refactor: port unleash context to SWR (#683)

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx

@@ -13,7 +13,7 @@ import { Info } from '@material-ui/icons';
 
 import { weightTypes } from './enums';
 
-import OverrideConfig from './OverrideConfig/OverrideConfig';
+import { OverrideConfig } from './OverrideConfig/OverrideConfig';
 import ConditionallyRender from '../../../../../common/ConditionallyRender';
 import GeneralSelect from '../../../../../common/GeneralSelect/GeneralSelect';
 import { useCommonStyles } from '../../../../../../common.styles';

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx

@@ -1,6 +1,4 @@
-import { connect } from 'react-redux';
 import classnames from 'classnames';
-
 import PropTypes from 'prop-types';
 import { Grid, IconButton, TextField } from '@material-ui/core';
 import { Delete } from '@material-ui/icons';
@@ -10,17 +8,19 @@ import GeneralSelect from '../../../../../../common/GeneralSelect/GeneralSelect'
 import { useCommonStyles } from '../../../../../../../common.styles';
 import ConditionallyRender from '../../../../../../common/ConditionallyRender';
 import InputListField from '../../../../../../common/input-list-field.jsx';
+import useUnleashContext from '../../../../../../../hooks/api/getters/useUnleashContext/useUnleashContext';
 
-const OverrideConfig = ({
+export const OverrideConfig = ({
     overrides,
     updateOverrideType,
     updateOverrideValues,
     removeOverride,
-    contextDefinitions,
 }) => {
     const styles = useStyles();
     const commonStyles = useCommonStyles();
-    const contextNames = contextDefinitions.map(c => ({
+
+    const { context } = useUnleashContext();
+    const contextNames = context.map(c => ({
         key: c.name,
         label: c.name,
     }));
@@ -34,9 +34,7 @@ const OverrideConfig = ({
     };
 
     return overrides.map((o, i) => {
-        const definition = contextDefinitions.find(
+        const definition = context.find(c => c.name === o.contextName);
-            c => c.name === o.contextName
-        );
         const legalValues = definition ? definition.legalValues : [];
 
         return (
@@ -115,9 +113,3 @@ OverrideConfig.propTypes = {
     updateOverrideValues: PropTypes.func.isRequired,
     removeOverride: PropTypes.func.isRequired,
 };
-
-const mapStateToProps = state => ({
-    contextDefinitions: state.context.toJS(),
-});
-
-export default connect(mapStateToProps, {})(OverrideConfig);

frontend/src/store/context/actions.js

@@ -1,58 +0,0 @@
-import api from './api';
-import { dispatchError } from '../util';
-
-export const RECEIVE_CONTEXT = 'RECEIVE_CONTEXT';
-export const ERROR_RECEIVE_CONTEXT = 'ERROR_RECEIVE_CONTEXT';
-export const REMOVE_CONTEXT = 'REMOVE_CONTEXT';
-export const ERROR_REMOVING_CONTEXT = 'ERROR_REMOVING_CONTEXT';
-export const ADD_CONTEXT_FIELD = 'ADD_CONTEXT_FIELD';
-export const ERROR_ADD_CONTEXT_FIELD = 'ERROR_ADD_CONTEXT_FIELD';
-export const UPDATE_CONTEXT_FIELD = 'UPDATE_CONTEXT_FIELD';
-export const ERROR_UPDATE_CONTEXT_FIELD = 'ERROR_UPDATE_CONTEXT_FIELD';
-
-export const receiveContext = value => ({ type: RECEIVE_CONTEXT, value });
-const addContextField = context => ({ type: ADD_CONTEXT_FIELD, context });
-const upContextField = context => ({ type: UPDATE_CONTEXT_FIELD, context });
-const createRemoveContext = context => ({ type: REMOVE_CONTEXT, context });
-
-export function fetchContext() {
-    return dispatch =>
-        api
-            .fetchAll()
-            .then(json => {
-                json.sort((a, b) => a.sortOrder - b.sortOrder);
-                dispatch(receiveContext(json));
-            })
-            .catch(dispatchError(dispatch, ERROR_RECEIVE_CONTEXT));
-}
-
-export function removeContextField(context) {
-    return dispatch =>
-        api
-            .remove(context)
-            .then(() => dispatch(createRemoveContext(context)))
-            .catch(dispatchError(dispatch, ERROR_REMOVING_CONTEXT));
-}
-
-export function createContextField(context) {
-    return dispatch =>
-        api
-            .create(context)
-            .then(() => dispatch(addContextField(context)))
-            .catch(e => {
-                dispatchError(dispatch, ERROR_ADD_CONTEXT_FIELD);
-                throw e;
-            });
-}
-
-export function updateContextField(context) {
-    return dispatch =>
-        api
-            .update(context)
-            .then(() => dispatch(upContextField(context)))
-            .catch(dispatchError(dispatch, ERROR_UPDATE_CONTEXT_FIELD));
-}
-
-export function validateName(name) {
-    return api.validate({ name });
-}

frontend/src/store/context/api.js

@@ -1,53 +0,0 @@
-import { formatApiPath } from '../../utils/format-path';
-import { throwIfNotSuccess, headers } from '../api-helper';
-
-const URI = formatApiPath('api/admin/context');
-
-function fetchAll() {
-    return fetch(URI, { credentials: 'include' })
-        .then(throwIfNotSuccess)
-        .then(response => response.json());
-}
-
-function create(contextField) {
-    return fetch(URI, {
-        method: 'POST',
-        headers,
-        body: JSON.stringify(contextField),
-        credentials: 'include',
-    }).then(throwIfNotSuccess);
-}
-
-function update(contextField) {
-    return fetch(`${URI}/${contextField.name}`, {
-        method: 'PUT',
-        headers,
-        body: JSON.stringify(contextField),
-        credentials: 'include',
-    }).then(throwIfNotSuccess);
-}
-
-function remove(contextField) {
-    return fetch(`${URI}/${contextField.name}`, {
-        method: 'DELETE',
-        headers,
-        credentials: 'include',
-    }).then(throwIfNotSuccess);
-}
-
-function validate(name) {
-    return fetch(`${URI}/validate`, {
-        method: 'POST',
-        headers,
-        credentials: 'include',
-        body: JSON.stringify(name),
-    }).then(throwIfNotSuccess);
-}
-
-export default {
-    fetchAll,
-    create,
-    update,
-    remove,
-    validate,
-};

frontend/src/store/context/index.js

@@ -1,46 +0,0 @@
-import { List } from 'immutable';
-import {
-    RECEIVE_CONTEXT,
-    REMOVE_CONTEXT,
-    ADD_CONTEXT_FIELD,
-    UPDATE_CONTEXT_FIELD,
-} from './actions';
-import { USER_LOGOUT, USER_LOGIN } from '../user/actions';
-
-const DEFAULT_CONTEXT_FIELDS = [
-    { name: 'environment', initial: true },
-    { name: 'userId', initial: true },
-    { name: 'appName', initial: true },
-];
-
-function getInitState() {
-    return new List(DEFAULT_CONTEXT_FIELDS);
-}
-
-const context = (state = getInitState(), action) => {
-    switch (action.type) {
-        case RECEIVE_CONTEXT:
-            return new List(action.value);
-        case REMOVE_CONTEXT:
-            const index = state.findIndex(
-                item => item.name === action.context.name
-            );
-
-            return state.remove(index);
-        case ADD_CONTEXT_FIELD:
-            return state.push(action.context);
-        case UPDATE_CONTEXT_FIELD: {
-            const index = state.findIndex(
-                item => item.name === action.context.name
-            );
-            return state.set(index, action.context);
-        }
-        case USER_LOGOUT:
-        case USER_LOGIN:
-            return getInitState();
-        default:
-            return state;
-    }
-};
-
-export default context;

frontend/src/store/error/index.js

@@ -16,11 +16,6 @@ import {
     UPDATE_STRATEGY_SUCCESS,
 } from '../strategy/actions';
 
-import {
-    ERROR_ADD_CONTEXT_FIELD,
-    ERROR_UPDATE_CONTEXT_FIELD,
-} from '../context/actions';
-
 import {
     ERROR_REMOVING_PROJECT,
     ERROR_ADD_PROJECT,
@@ -62,8 +57,6 @@ const strategies = (state = getInitState(), action) => {
         case ERROR_UPDATING_STRATEGY:
         case ERROR_CREATING_STRATEGY:
         case ERROR_RECEIVE_STRATEGIES:
-        case ERROR_ADD_CONTEXT_FIELD:
-        case ERROR_UPDATE_CONTEXT_FIELD:
         case ERROR_REMOVING_PROJECT:
         case ERROR_UPDATE_PROJECT:
         case ERROR_ADD_ADDON_CONFIG:

frontend/src/store/index.js

@@ -10,7 +10,6 @@ import error from './error';
 import user from './user';
 import applications from './application';
 import uiConfig from './ui-config';
-import context from './context';
 import projects from './project';
 import addons from './addons';
 import apiCalls from './api-calls';
@@ -28,7 +27,6 @@ const unleashStore = combineReducers({
     user,
     applications,
     uiConfig,
-    context,
     projects,
     addons,
     apiCalls,

frontend/src/store/ui-bootstrap/actions.js

@@ -1,7 +1,6 @@
 import api from './api';
 import { dispatchError } from '../util';
 import { receiveConfig } from '../ui-config/actions';
-import { receiveContext } from '../context/actions';
 import { receiveFeatureTypes } from '../feature-type/actions';
 import { receiveProjects } from '../project/actions';
 import { receiveTagTypes } from '../tag-type/actions';
@@ -17,7 +16,6 @@ export function fetchUiBootstrap() {
             .then(json => {
                 dispatch(receiveProjects(json.projects));
                 dispatch(receiveConfig(json.uiConfig));
-                dispatch(receiveContext(json.context));
                 dispatch(receiveTagTypes(json));
                 dispatch(receiveFeatureTypes(json.featureTypes));
                 dispatch(receiveStrategies(json.strategies));