Restructure redux code (#109)

* Restructure redux code

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>

src/redux/backend-config/methods.ts

@@ -1,12 +1,11 @@
-import { BackendConfigState, SET_BACKEND_CONFIG_ACTION_TYPE, SetBackendConfigAction } from './types'
+import { BackendConfig } from '../../api/backend-config/types'
 import { store } from '../../utils/store'
+import { BackendConfigActionType, SetBackendConfigAction } from './types'
 
-export const setBackendConfig = (state: BackendConfigState): void => {
+export const setBackendConfig = (state: BackendConfig): void => {
   const action: SetBackendConfigAction = {
-    type: SET_BACKEND_CONFIG_ACTION_TYPE,
-    payload: {
-      state
-    }
+    type: BackendConfigActionType.SET_BACKEND_CONFIG,
+    state: state
   }
   store.dispatch(action)
 }

src/redux/backend-config/reducers.ts

@@ -1,7 +1,8 @@
 import { Reducer } from 'redux'
-import { BackendConfigActions, BackendConfigState, SET_BACKEND_CONFIG_ACTION_TYPE } from './types'
+import { BackendConfig } from '../../api/backend-config/types'
+import { BackendConfigActions, BackendConfigActionType, SetBackendConfigAction } from './types'
 
-export const initialState: BackendConfigState = {
+export const initialState: BackendConfig = {
   allowAnonymous: true,
   authProviders: {
     facebook: false,
@@ -33,10 +34,10 @@ export const initialState: BackendConfigState = {
   }
 }
 
-export const BackendConfigReducer: Reducer<BackendConfigState, BackendConfigActions> = (state: BackendConfigState = initialState, action: BackendConfigActions) => {
+export const BackendConfigReducer: Reducer<(BackendConfig), BackendConfigActions> = (state: (BackendConfig) = initialState, action: BackendConfigActions) => {
   switch (action.type) {
-    case SET_BACKEND_CONFIG_ACTION_TYPE:
-      return action.payload.state
+    case BackendConfigActionType.SET_BACKEND_CONFIG:
+      return (action as SetBackendConfigAction).state
     default:
       return state
   }

src/redux/backend-config/types.ts

@@ -1,52 +1,14 @@
 import { Action } from 'redux'
+import { BackendConfig } from '../../api/backend-config/types'
 
-export const SET_BACKEND_CONFIG_ACTION_TYPE = 'backend-config/set'
-
-export interface BackendConfigState {
-  allowAnonymous: boolean,
-  authProviders: AuthProvidersState,
-  customAuthNames: CustomAuthNames,
-  specialLinks: SpecialLinks,
-  version: BackendVersion,
+export enum BackendConfigActionType {
+  SET_BACKEND_CONFIG = 'backend-config/set'
 }
 
-export interface BackendVersion {
-  version: string,
-  sourceCodeUrl: string
-  issueTrackerUrl: string
+export interface BackendConfigActions extends Action<BackendConfigActionType>{
+  type: BackendConfigActionType;
 }
 
-export interface AuthProvidersState {
-  facebook: boolean,
-  github: boolean,
-  twitter: boolean,
-  gitlab: boolean,
-  dropbox: boolean,
-  ldap: boolean,
-  google: boolean,
-  saml: boolean,
-  oauth2: boolean,
-  email: boolean,
-  openid: boolean,
+export interface SetBackendConfigAction extends BackendConfigActions {
+  state: BackendConfig;
 }
-
-export interface CustomAuthNames {
-  ldap: string;
-  oauth2: string;
-  saml: string;
-}
-
-export interface SpecialLinks {
-  privacy: string,
-  termsOfUse: string,
-  imprint: string,
-}
-
-export interface SetBackendConfigAction extends Action {
-  type: string;
-  payload: {
-    state: BackendConfigState;
-  };
-}
-
-export type BackendConfigActions = SetBackendConfigAction;

src/redux/editor/methods.ts

@@ -1,14 +1,11 @@
-import {
-  EditorMode,
-  SET_EDITOR_CONFIG_MODE_ACTION_TYPE,
-  SetEditorConfigAction
-} from './types'
+import { EditorMode } from '../../components/editor/task-bar/editor-view-mode'
 import { store } from '../../utils/store'
+import { EditorConfigActionType, SetEditorConfigAction } from './types'
 
 export const setEditorModeConfig = (editorMode: EditorMode): void => {
   const action: SetEditorConfigAction = {
-    type: SET_EDITOR_CONFIG_MODE_ACTION_TYPE,
-    payload: editorMode
+    type: EditorConfigActionType.SET_EDITOR_VIEW_MODE,
+    mode: editorMode
   }
   store.dispatch(action)
 }

src/redux/editor/reducers.ts

@@ -1,21 +1,17 @@
 import { Reducer } from 'redux'
-import {
-  EditorConfigActions,
-  EditorConfigState,
-  EditorMode,
-  SET_EDITOR_CONFIG_MODE_ACTION_TYPE
-} from './types'
+import { EditorMode } from '../../components/editor/task-bar/editor-view-mode'
+import { EditorConfig, EditorConfigActions, EditorConfigActionType, SetEditorConfigAction } from './types'
 
-export const initialState: EditorConfigState = {
+export const initialState: EditorConfig = {
   editorMode: EditorMode.PREVIEW
 }
 
-export const EditorConfigReducer: Reducer<EditorConfigState, EditorConfigActions> = (state: EditorConfigState = initialState, action: EditorConfigActions) => {
+export const EditorConfigReducer: Reducer<EditorConfig, EditorConfigActions> = (state: EditorConfig = initialState, action: EditorConfigActions) => {
   switch (action.type) {
-    case SET_EDITOR_CONFIG_MODE_ACTION_TYPE:
+    case EditorConfigActionType.SET_EDITOR_VIEW_MODE:
       return {
         ...state,
-        editorMode: action.payload
+        editorMode: (action as SetEditorConfigAction).mode
       }
     default:
       return state

src/redux/editor/types.ts

@@ -1,20 +1,18 @@
 import { Action } from 'redux'
+import { EditorMode } from '../../components/editor/task-bar/editor-view-mode'
 
-export const SET_EDITOR_CONFIG_MODE_ACTION_TYPE = 'editor/mode/set'
-
-export interface EditorConfigState {
-    editorMode: EditorMode;
+export enum EditorConfigActionType {
+  SET_EDITOR_VIEW_MODE = 'editor/mode/set'
 }
 
-export enum EditorMode {
-    PREVIEW,
-    BOTH,
-    EDITOR,
+export interface EditorConfig {
+  editorMode: EditorMode;
 }
 
-export interface SetEditorConfigAction extends Action {
-    type: string;
-    payload: EditorMode;
+export interface EditorConfigActions extends Action<EditorConfigActionType> {
+  type: EditorConfigActionType;
 }
 
-export type EditorConfigActions = SetEditorConfigAction;
+export interface SetEditorConfigAction extends EditorConfigActions {
+  mode: EditorMode;
+}

src/redux/frontend-config/methods.ts

@@ -1,14 +1,13 @@
-import { FrontendConfigState, SET_FRONTEND_CONFIG_ACTION_TYPE, SetFrontendConfigAction } from './types'
+import { FrontendConfig } from '../../api/frontend-config/types'
 import { store } from '../../utils/store'
+import { FrontendConfigActionType, SetFrontendConfigAction } from './types'
 
-export const setFrontendConfig = (state: FrontendConfigState): void => {
+export const setFrontendConfig = (state: FrontendConfig): void => {
   const action: SetFrontendConfigAction = {
-    type: SET_FRONTEND_CONFIG_ACTION_TYPE,
-    payload: {
-      state: {
-        ...state,
-        backendUrl: state.backendUrl + '/api/v2.0/'
-      }
+    type: FrontendConfigActionType.SET_FRONTEND_CONFIG,
+    state: {
+      ...state,
+      backendUrl: state.backendUrl + '/api/v2.0/'
     }
   }
   store.dispatch(action)

src/redux/frontend-config/reducers.ts

@@ -1,14 +1,15 @@
 import { Reducer } from 'redux'
-import { FrontendConfigActions, FrontendConfigState, SET_FRONTEND_CONFIG_ACTION_TYPE } from './types'
+import { FrontendConfig } from '../../api/frontend-config/types'
+import { FrontendConfigActions, FrontendConfigActionType, SetFrontendConfigAction } from './types'
 
-export const initialState: FrontendConfigState = {
+const initialState: FrontendConfig = {
   backendUrl: ''
 }
 
-export const FrontendConfigReducer: Reducer<FrontendConfigState, FrontendConfigActions> = (state: FrontendConfigState = initialState, action: FrontendConfigActions) => {
+export const FrontendConfigReducer: Reducer<(FrontendConfig), FrontendConfigActions> = (state: (FrontendConfig) = initialState, action: FrontendConfigActions) => {
   switch (action.type) {
-    case SET_FRONTEND_CONFIG_ACTION_TYPE:
-      return action.payload.state
+    case FrontendConfigActionType.SET_FRONTEND_CONFIG:
+      return (action as SetFrontendConfigAction).state
     default:
       return state
   }

src/redux/frontend-config/types.ts

@@ -1,16 +1,14 @@
 import { Action } from 'redux'
+import { FrontendConfig } from '../../api/frontend-config/types'
 
-export const SET_FRONTEND_CONFIG_ACTION_TYPE = 'frontend-config/set'
-
-export interface SetFrontendConfigAction extends Action {
-    type: string;
-    payload: {
-        state: FrontendConfigState;
-    };
+export enum FrontendConfigActionType {
+  SET_FRONTEND_CONFIG = 'frontend-config/set'
 }
 
-export interface FrontendConfigState {
-    backendUrl: string,
+export interface FrontendConfigActions extends Action<FrontendConfigActionType> {
+  type: FrontendConfigActionType;
 }
 
-export type FrontendConfigActions = SetFrontendConfigAction;
+export interface SetFrontendConfigAction extends FrontendConfigActions {
+  state: FrontendConfig;
+}

src/redux/index.ts

@@ -1,18 +1,18 @@
 import { combineReducers, Reducer } from 'redux'
-import { UserState } from './user/types'
-import { UserReducer } from './user/reducers'
-import { BackendConfigState } from './backend-config/types'
-import { FrontendConfigState } from './frontend-config/types'
+import { BackendConfig } from '../api/backend-config/types'
+import { FrontendConfig } from '../api/frontend-config/types'
 import { BackendConfigReducer } from './backend-config/reducers'
-import { FrontendConfigReducer } from './frontend-config/reducers'
-import { EditorConfigState } from './editor/types'
 import { EditorConfigReducer } from './editor/reducers'
+import { EditorConfig } from './editor/types'
+import { FrontendConfigReducer } from './frontend-config/reducers'
+import { UserReducer } from './user/reducers'
+import { MaybeUserState } from './user/types'
 
 export interface ApplicationState {
-    user: UserState;
-    backendConfig: BackendConfigState;
-    frontendConfig: FrontendConfigState;
-    editorConfig: EditorConfigState;
+    user: MaybeUserState;
+    backendConfig: BackendConfig;
+    frontendConfig: FrontendConfig;
+    editorConfig: EditorConfig;
 }
 
 export const allReducers: Reducer<ApplicationState> = combineReducers<ApplicationState>({

src/redux/user/methods.ts

@@ -1,20 +1,17 @@
-import { CLEAR_USER_ACTION_TYPE, ClearUserAction, SET_USER_ACTION_TYPE, SetUserAction, UserState } from './types'
 import { store } from '../../utils/store'
+import { ClearUserAction, SetUserAction, UserActionType, UserState } from './types'
 
 export const setUser: (state: UserState) => void = (state: UserState) => {
   const action: SetUserAction = {
-    type: SET_USER_ACTION_TYPE,
-    payload: {
-      state
-    }
+    type: UserActionType.SET_USER,
+    state
   }
   store.dispatch(action)
 }
 
 export const clearUser: () => void = () => {
   const action: ClearUserAction = {
-    type: CLEAR_USER_ACTION_TYPE,
-    payload: null
+    type: UserActionType.CLEAR_USER
   }
   store.dispatch(action)
 }

src/redux/user/reducers.ts

@@ -1,28 +1,12 @@
 import { Reducer } from 'redux'
-import {
-  CLEAR_USER_ACTION_TYPE,
-  LoginProvider,
-  LoginStatus,
-  SET_USER_ACTION_TYPE,
-  SetUserAction,
-  UserActions,
-  UserState
-} from './types'
+import { MaybeUserState, SetUserAction, UserActions, UserActionType } from './types'
 
-export const initialState: UserState = {
-  id: '',
-  name: '',
-  photo: '',
-  status: LoginStatus.forbidden,
-  provider: LoginProvider.EMAIL
-}
-
-export const UserReducer: Reducer<UserState, UserActions> = (state: UserState = initialState, action: UserActions) => {
+export const UserReducer: Reducer<MaybeUserState, UserActions> = (state: MaybeUserState = null, action: UserActions) => {
   switch (action.type) {
-    case SET_USER_ACTION_TYPE:
-      return (action as SetUserAction).payload.state
-    case CLEAR_USER_ACTION_TYPE:
-      return initialState
+    case UserActionType.SET_USER:
+      return (action as SetUserAction).state
+    case UserActionType.CLEAR_USER:
+      return null
     default:
       return state
   }

src/redux/user/types.ts

@@ -1,45 +1,39 @@
 import { Action } from 'redux'
 
-export const SET_USER_ACTION_TYPE = 'user/set'
-export const CLEAR_USER_ACTION_TYPE = 'user/clear'
-
-export interface SetUserAction extends Action {
-    type: string;
-    payload: {
-        state: UserState,
-    };
+export enum UserActionType {
+  SET_USER = 'user/set',
+  CLEAR_USER = 'user/clear'
 }
 
-export interface ClearUserAction extends Action {
-    type: string;
-    payload: null;
+export interface UserActions extends Action<UserActionType> {
+  type: UserActionType;
 }
 
+export interface SetUserAction extends UserActions {
+  state: UserState;
+}
+
+export type ClearUserAction = UserActions
+
 export interface UserState {
-    status: LoginStatus;
-    id: string;
-    name: string;
-    photo: string;
-    provider: LoginProvider;
-}
-
-export enum LoginStatus {
-    forbidden = 'forbidden',
-    ok = 'ok'
+  id: string;
+  name: string;
+  photo: string;
+  provider: LoginProvider;
 }
 
 export enum LoginProvider {
-    FACEBOOK = 'facebook',
-    GITHUB = 'github',
-    TWITTER = 'twitter',
-    GITLAB = 'gitlab',
-    DROPBOX = 'dropbox',
-    GOOGLE = 'google',
-    SAML = 'saml',
-    OAUTH2 = 'oauth2',
-    EMAIL = 'email',
-    LDAP = 'ldap',
-    OPENID = 'openid'
+  FACEBOOK = 'facebook',
+  GITHUB = 'github',
+  TWITTER = 'twitter',
+  GITLAB = 'gitlab',
+  DROPBOX = 'dropbox',
+  GOOGLE = 'google',
+  SAML = 'saml',
+  OAUTH2 = 'oauth2',
+  EMAIL = 'email',
+  LDAP = 'ldap',
+  OPENID = 'openid'
 }
 
-export type UserActions = SetUserAction | ClearUserAction;
+export type MaybeUserState = (UserState | null)