update react reducer

actions/main.ts

@@ -1,10 +1,19 @@
 import * as types from '../constants/actionTypes';
 
 export default (dispatch: any): any => ({
-  switchNavbar: (state: string): any => (
-    dispatch({ type: types.SWITCH_NAVBAR, payload: { state } })
+  toggleDisplayMode: (state: string): any => (
+    dispatch({ type: types.TOGGLE_DISPLAY_MODE, payload: state })
   ),
-  switchSidebar: (state: string): any => (
-    dispatch({ type: types.SWITCH_SIDEBAR, payload: { state } })
+  setNavbar: (state: string): any => (
+    dispatch({ type: types.SET_NAVBAR, payload: state })
+  ),
+  setSidebar: (state: string): any => (
+    dispatch({ type: types.SET_SIDEBAR, payload: state })
+  ),
+  setMarkupTool: (state: string): any => (
+    dispatch({ type: types.SET_MARKUP_TOOL, payload: state })
+  ),
+  setInfo: (state: any): any => (
+    dispatch({ type: types.SET_INFO, payload: state })
   ),
 });

actions/pdf.ts

@@ -1,5 +1,5 @@
 import * as types from '../constants/actionTypes';
-import { ProgressType, ViewportType } from '../constants/type';
+import { ProgressType, ViewportType, AnnotationType } from '../constants/type';
 
 export default (dispatch: any): any => ({
   setTotalPage: (page: number): any => (
@@ -23,4 +23,10 @@ export default (dispatch: any): any => ({
   changeRotate: (rotation: number): any => (
     dispatch({ type: types.CHANGE_ROTATE, payload: rotation })
   ),
+  addAnnotation: (annotations: AnnotationType[], init: boolean): any => (
+    dispatch({ type: types.ADD_ANNOTATIONS, payload: { annotations, init } })
+  ),
+  updateAnnotation: (annotations: AnnotationType[]): any => (
+    dispatch({ type: types.UPDATE_ANNOTATIONS, payload: annotations })
+  ),
 });

constants/actionTypes.ts

@@ -1,5 +1,8 @@
-export const SWITCH_NAVBAR = 'SWITCH_NAVBAR';
-export const SWITCH_SIDEBAR = 'SWITCH_SIDEBAR';
+export const TOGGLE_DISPLAY_MODE = 'TOGGLE_DISPLAY_MODE';
+export const SET_NAVBAR = 'SET_NAVBAR';
+export const SET_SIDEBAR = 'SET_SIDEBAR';
+export const SET_MARKUP_TOOL = 'SET_MARKUP_TOOL';
+export const SET_INFO = 'SET_INFO';
 
 export const SET_CURRENT_PAGE = 'SET_CURRENT_PAGE';
 export const SET_TOTAL_PAGE = 'SET_TOTAL_PAGE';
@@ -8,3 +11,6 @@ export const SET_PROGRESS = 'SET_PROGRESS';
 export const SET_VIEWPORT = 'SET_VIEWPORT';
 export const CHANGE_SCALE = 'CHANGE_SCALE';
 export const CHANGE_ROTATE = 'CHANGE_ROTATE';
+
+export const ADD_ANNOTATIONS = 'ADD_ANNOTATIONS';
+export const UPDATE_ANNOTATIONS = 'UPDATE_ANNOTATIONS';

middleware/index.ts

@@ -1,15 +1,28 @@
+/* eslint-disable @typescript-eslint/camelcase */
 import { Dispatch } from 'react';
+import { CHANGE_SCALE, TOGGLE_DISPLAY_MODE } from '../constants/actionTypes';
 
-// import { SET_CURRENT_PAGE } from '../constants/actionTypes';
-
-const applyMiddleware = (dispatch: Dispatch<any>) => (
+const applyMiddleware = (
+  state: any, dispatch: Dispatch<any>,
+) => (
   action: { type: string; payload?: any },
 ): void => {
   dispatch(action);
-
-  // if (action.type === SET_CURRENT_PAGE) {
-  //   dispatch({type: UPDATE_RENDERING_QUEUE, payload: []});
-  // }
+  switch (action.type) {
+    case TOGGLE_DISPLAY_MODE: {
+      if (action.payload === 'full') {
+        const screenwidth = window.screen.width - 200;
+        const originPdfWidth = state.viewport.width / state.scale;
+        const rate = screenwidth / originPdfWidth;
+        dispatch({ type: CHANGE_SCALE, payload: rate });
+      } else {
+        dispatch({ type: CHANGE_SCALE, payload: 1 });
+      }
+      break;
+    }
+    default:
+      break;
+  }
 };
 
 export default applyMiddleware;

reducers/index.ts

@@ -14,8 +14,11 @@ const createReducer = (handlers: {[key: string]: any}) => (
 };
 
 export default createReducer({
-  [types.SWITCH_NAVBAR]: mainActions.setNavbarState,
-  [types.SWITCH_SIDEBAR]: mainActions.setSidebarState,
+  [types.TOGGLE_DISPLAY_MODE]: mainActions.toggleDisplayMode,
+  [types.SET_NAVBAR]: mainActions.setNavbarState,
+  [types.SET_SIDEBAR]: mainActions.setSidebarState,
+  [types.SET_MARKUP_TOOL]: mainActions.setMarkupTool,
+  [types.SET_INFO]: mainActions.setInfo,
 
   [types.SET_CURRENT_PAGE]: pdfActions.setCurrentPage,
   [types.SET_TOTAL_PAGE]: pdfActions.setTotalPage,
@@ -24,4 +27,6 @@ export default createReducer({
   [types.SET_VIEWPORT]: pdfActions.setViewport,
   [types.CHANGE_SCALE]: pdfActions.changeScale,
   [types.CHANGE_ROTATE]: pdfActions.changeRotate,
+  [types.ADD_ANNOTATIONS]: pdfActions.addAnnotation,
+  [types.UPDATE_ANNOTATIONS]: pdfActions.updateAnnotation,
 });

reducers/main.ts

@@ -1,11 +1,26 @@
 import { PayloadType } from '../constants/type';
 
+export const toggleDisplayMode = (state: Record<string, any>, { payload }: PayloadType): any => ({
+  ...state,
+  displayMode: payload,
+});
+
 export const setNavbarState = (state: Record<string, any>, { payload }: PayloadType): any => ({
   ...state,
-  navbarState: payload.state,
+  navbarState: payload,
 });
 
 export const setSidebarState = (state: Record<string, any>, { payload }: PayloadType): any => ({
   ...state,
-  sidebarState: payload.state,
+  sidebarState: payload,
+});
+
+export const setMarkupTool = (state: Record<string, any>, { payload }: PayloadType): any => ({
+  ...state,
+  markupToolState: payload,
+});
+
+export const setInfo = (state: Record<string, any>, { payload }: PayloadType): any => ({
+  ...state,
+  info: payload,
 });

reducers/pdf.ts

@@ -34,3 +34,15 @@ export const changeRotate = (state: Record<string, any>, { payload }: PayloadTyp
   ...state,
   rotation: payload,
 });
+
+export const addAnnotation = (state: Record<string, any>, { payload }: PayloadType): any => ({
+  ...state,
+  annotations: [...state.annotations, ...payload.annotations],
+  isInit: payload.init,
+});
+
+export const updateAnnotation = (state: Record<string, any>, { payload }: PayloadType): any => ({
+  ...state,
+  annotations: [...payload],
+  isInit: true,
+});

store/index.tsx

@@ -26,7 +26,7 @@ export const StoreProvider = ({
   children: React.ReactNode;
 }): React.ReactElement => {
   const [state, dispatch] = useReducer(reducers, initialState);
-  const enhancedDispatch = applyMiddleware(dispatch);
+  const enhancedDispatch = applyMiddleware(state, dispatch);
 
   return (
     <StateContext.Provider

store/initialMainState.ts

@@ -1,9 +1,15 @@
 export type StateType = {
+  displayMode: 'full' | 'normal';
   navbarState: 'search' | 'annotations' | 'thumbnails' | '';
   sidebarState: 'markup-tools' | 'create-form' | 'watermark' | '';
+  markupToolState: 'highlight' | 'freehand' | 'text' | 'sticky' | 'shape' | '';
+  info: {token: string; id: string};
 };
 
 export default {
+  displayMode: 'full',
   navbarState: '',
   sidebarState: '',
+  markupToolState: '',
+  info: {},
 };

store/initialPdfState.ts

@@ -1,4 +1,4 @@
-import { ProgressType, ViewportType } from '../constants/type';
+import { ProgressType, ViewportType, AnnotationType } from '../constants/type';
 
 export type StateType = {
   totalPage: number;
@@ -8,14 +8,21 @@ export type StateType = {
   viewport: ViewportType;
   scale: number;
   rotation: number;
+  annotations: AnnotationType[];
+  isInit: boolean;
 };
 
 export default {
   totalPage: 1,
   currentPage: 1,
   pdf: null,
-  progress: {},
+  progress: {
+    loaded: 0,
+    total: 1,
+  },
   viewport: {},
   scale: 1,
   rotation: 0,
+  annotations: [],
+  isInit: false,
 };