Modal

src/redux/modal/actions.ts

@@ -0,0 +1,17 @@
+import { IModalState } from '~/redux/modal/reducer';
+import { MODAL_ACTIONS } from '~/redux/modal/constants';
+
+export const modalSetShown = (is_shown: IModalState['is_shown']) => ({
+  is_shown,
+  type: MODAL_ACTIONS.SET_SHOWN,
+});
+
+export const modalSetDialog = (dialog: IModalState['dialog']) => ({
+  dialog,
+  type: MODAL_ACTIONS.SET_DIALOG,
+});
+
+export const modalShowDialog = (dialog: IModalState['dialog']) => ({
+  dialog,
+  type: MODAL_ACTIONS.SHOW_DIALOG,
+});

src/redux/modal/constants.ts

@@ -0,0 +1,21 @@
+import { ValueOf } from "~/redux/types";
+import { HorizontalExample } from "~/containers/examples/HorizontalExample";
+
+export const MODAL_ACTIONS = {
+  SET_SHOWN: "MODAL.SET_SHOWN",
+  SET_DIALOG: "SET_DIALOG",
+  SHOW_DIALOG: "SHOW_DIALOG"
+};
+
+export const DIALOGS = {
+  TEST: "TEST"
+};
+
+export const DIALOG_CONTENT = {
+  [DIALOGS.TEST]: HorizontalExample
+};
+
+export interface IDialogProps {
+  onRequestClose: () => void;
+  onDialogChange: (dialog: ValueOf<typeof DIALOGS>) => void;
+}

src/redux/modal/handlers.ts

@@ -0,0 +1,11 @@
+import { MODAL_ACTIONS } from '~/redux/modal/constants';
+
+const setShown = (state, { is_shown }) => ({ ...state, is_shown });
+const showDialog = (state, { dialog }) => ({ ...state, dialog, is_shown: true });
+const setDialog = (state, { dialog }) => ({ ...state, dialog });
+
+export const MODAL_HANDLERS = {
+  [MODAL_ACTIONS.SET_SHOWN]: setShown,
+  [MODAL_ACTIONS.SHOW_DIALOG]: showDialog,
+  [MODAL_ACTIONS.SET_DIALOG]: setDialog,
+};

src/redux/modal/reducer.ts

@@ -0,0 +1,16 @@
+import { MODAL_HANDLERS } from "~/redux/modal/handlers";
+import { createReducer } from "~/utils/reducer";
+import { DIALOGS } from "~/redux/modal/constants";
+import { ValueOf } from "~/redux/types";
+
+export interface IModalState {
+  is_shown: boolean;
+  dialog: ValueOf<typeof DIALOGS>;
+}
+
+const INITIAL_STATE: IModalState = {
+  is_shown: true,
+  dialog: DIALOGS.TEST
+};
+
+export default createReducer(INITIAL_STATE, MODAL_HANDLERS);

src/redux/modal/selectors.ts

@@ -0,0 +1,3 @@
+import { IState } from "~/redux/store";
+
+export const selectModal = (state: IState) => state.modal;

src/redux/store.ts

@@ -1,42 +1,49 @@
-import { createStore, applyMiddleware, combineReducers, compose, Store } from 'redux';
+import { createStore, applyMiddleware, combineReducers, compose, Store } from "redux";
 
-import { persistStore, persistReducer } from 'redux-persist';
-import storage from 'redux-persist/lib/storage';
-import createSagaMiddleware from 'redux-saga';
-import { connectRouter } from 'connected-react-router'
-import userReducer from '~/redux/user/reducer';
-import userSaga from '~/redux/user/sagas';
-import { createBrowserHistory } from 'history';
+import { persistStore, persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
+import createSagaMiddleware from "redux-saga";
+import { connectRouter, RouterState } from "connected-react-router";
+import { createBrowserHistory } from "history";
 import { PersistConfig, Persistor } from "redux-persist/es/types";
-import { routerMiddleware } from 'connected-react-router'
+import { routerMiddleware } from "connected-react-router";
+
+import userReducer, { IUserState } from "~/redux/user/reducer";
+import userSaga from "~/redux/user/sagas";
+
+import modalReducer, { IModalState } from "~/redux/modal/reducer";
+import { IState } from "~/redux/store";
 
 const userPersistConfig: PersistConfig = {
-  key: 'user',
-  whitelist: ['profile'],
-  storage,
+  key: "user",
+  whitelist: ["profile"],
+  storage
 };
 
+export interface IState {
+  user: IUserState;
+  modal: IModalState;
+  router: RouterState;
+}
+
 export const sagaMiddleware = createSagaMiddleware();
 export const history = createBrowserHistory();
 
 const composeEnhancers =
-  typeof window === 'object' &&
-  (<any>window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  typeof window === "object" && (<any>window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     ? (<any>window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
     : compose;
 
 export const store = createStore(
   combineReducers({
     user: persistReducer(userPersistConfig, userReducer),
-    router: connectRouter(history),
+    modal: modalReducer,
+    router: connectRouter(history)
   }),
-  composeEnhancers(applyMiddleware(
-    routerMiddleware(history),
-    sagaMiddleware
-  ))
+  composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware))
 );
 
-export function configureStore(): { store: Store<any>, persistor: Persistor } {
+export function configureStore(): { store: Store<any>; persistor: Persistor } {
   sagaMiddleware.run(userSaga);
 
   const persistor = persistStore(store);

src/redux/types.ts

@@ -2,10 +2,13 @@ import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 
 export type ITag = {
   title: string;
-  feature?: 'red' | 'blue' | 'green' | 'olive' | 'black';
-}
+  feature?: "red" | "blue" | "green" | "olive" | "black";
+};
 
-export type IInputTextProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+export type IInputTextProps = DetailedHTMLProps<
+  InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & {
   wrapperClassName?: string;
   handler?: (value: string) => void;
   required?: boolean;
@@ -20,3 +23,5 @@ export type IInputTextProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputEle
 };
 
 export type IIcon = string;
+
+export type ValueOf<T> = T[keyof T];

src/redux/user/reducer.ts

@@ -1,27 +1,27 @@
-import { createReducer } from 'reduxsauce';
 import * as ActionCreators from "~/redux/user/actions";
 import { USER_ACTIONS } from "~/redux/user/constants";
+import { createReducer } from "~/utils/reducer";
 
 export interface IUserProfile {
-  id: number,
-  username: string,
-  email: string,
-  role: string,
-  token: string,
+  id: number;
+  username: string;
+  email: string;
+  role: string;
+  token: string;
 
-  is_activated: boolean,
-  is_user: boolean,
+  is_activated: boolean;
+  is_user: boolean;
 }
 
 export interface IUserFormStateLogin {
-  error: string,
+  error: string;
 }
 
 export type IUserState = Readonly<{
-  profile: IUserProfile,
+  profile: IUserProfile;
   form_state: {
-    login: IUserFormStateLogin,
-  },
+    login: IUserFormStateLogin;
+  };
 }>;
 
 type UnsafeReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
@@ -29,13 +29,16 @@ interface ActionHandler<T> {
   (state: IUserState, payload: UnsafeReturnType<T>): IUserState;
 }
 
-const setLoginErrorHandler: ActionHandler<typeof ActionCreators.userSetLoginError> = (state, { error }) => ({
+const setLoginErrorHandler: ActionHandler<typeof ActionCreators.userSetLoginError> = (
+  state,
+  { error }
+) => ({
   ...state,
   form_state: {
     ...state.form_state,
     login: {
       ...state.form_state.login,
-      error,
+      error
     }
   }
 });
@@ -44,28 +47,28 @@ const setUserHandler: ActionHandler<typeof ActionCreators.userSetUser> = (state,
   ...state,
   profile: {
     ...state.profile,
-    ...profile,
+    ...profile
   }
 });
 
 const HANDLERS = {
   [USER_ACTIONS.SET_LOGIN_ERROR]: setLoginErrorHandler,
-  [USER_ACTIONS.SET_USER]: setUserHandler,
+  [USER_ACTIONS.SET_USER]: setUserHandler
 };
 
 const INITIAL_STATE: IUserState = {
   profile: {
     id: 0,
-    username: '',
-    email: '',
-    role: '',
-    token: '',
+    username: "",
+    email: "",
+    role: "",
+    token: "",
     is_activated: false,
-    is_user: false,
+    is_user: false
   },
   form_state: {
     login: {
-      error: '',
+      error: ""
     }
   }
 };