updated code to use-event-callback and moved function to genereal reducers

Author: sreevardhanreddi

src/Annotator/index.js

@@ -121,12 +121,12 @@ export const Annotator = ({
     dispatchToReducer(action)
   })
 
-  const onRegionLabelAdded = (cls) => {
+  const onRegionClassAdded = useEventCallback((cls) => {
     dispatchToReducer({
       type: "ON_CLS_ADDED",
       cls: cls,
     })
-  }
+  })
 
   useEffect(() => {
     if (!selectedImage) return
@@ -144,7 +144,7 @@ export const Annotator = ({
         alwaysShowPrevButton={Boolean(onPrevImage)}
         state={state}
         dispatch={dispatch}
-        onRegionLabelAdded={onRegionLabelAdded}
+        onRegionClassAdded={onRegionClassAdded}
       />
     </SettingsProvider>
   )

src/Annotator/reducers/general-reducer.js

@@ -22,6 +22,15 @@ const getRandomColor = () => {
 }
 
 export default (state: MainLayoutState, action: Action) => {
+  if (action.type === "ON_CLS_ADDED" && action.cls && action.cls !== "") {
+    const oldRegionClsList = state.regionClsList
+    const newState = {
+      ...state,
+      regionClsList: oldRegionClsList.concat(action.cls),
+    }
+    return newState
+  }
+
   // Throttle certain actions
   if (action.type === "MOUSE_MOVE") {
     if (Date.now() - ((state: any).lastMouseMoveCall || 0) < 16) return state

src/Annotator/reducers/history-handler.js

@@ -26,15 +26,6 @@ export default (reducer) => {
     const prevState = state
     const nextState = reducer(state, action)
 
-    if (action.type === "ON_CLS_ADDED" && action.cls && action.cls !== "") {
-      const oldRegionClsList = state.regionClsList
-      const newState = {
-        ...state,
-        regionClsList: oldRegionClsList.concat(action.cls),
-      }
-      return newState
-    }
-
     if (action.type === "RESTORE_HISTORY") {
       if (state.history.length > 0) {
         return setIn(

src/ImageCanvas/index.js

@@ -79,7 +79,7 @@ type Props = {
     duration?: number,
   }) => any,
   onChangeVideoTime: (number) => any,
-  onRegionLabelAdded: () => {},
+  onRegionClassAdded: () => {},
 }
 
 const getDefaultMat = () => Matrix.from(1, 0, 0, 1, -10, -10)
@@ -119,7 +119,7 @@ export default ({
   onDeleteRegion,
   onChangeVideoTime,
   onChangeVideoPlaying,
-  onRegionLabelAdded,
+  onRegionClassAdded,
 }: Props) => {
   const classes = useStyles()
 
@@ -443,7 +443,7 @@ export default ({
             layoutParams={layoutParams}
             imageSrc={imageSrc}
             RegionEditLabel={RegionEditLabel}
-            onRegionLabelAdded={onRegionLabelAdded}
+            onRegionClassAdded={onRegionClassAdded}
           />
         </PreventScrollToParents>
       )}

src/MainLayout/index.js

@@ -34,7 +34,7 @@ type Props = {
   dispatch: (Action) => any,
   alwaysShowNextButton?: boolean,
   alwaysShowPrevButton?: boolean,
-  onRegionLabelAdded: () => {},
+  onRegionClassAdded: () => {},
 }
 
 export default ({
@@ -43,7 +43,7 @@ export default ({
   alwaysShowNextButton = false,
   alwaysShowPrevButton = false,
   RegionEditLabel,
-  onRegionLabelAdded,
+  onRegionClassAdded,
 }: Props) => {
   const classes = useStyles()
   const settings = useSettings()
@@ -222,7 +222,7 @@ export default ({
                     "CHANGE_VIDEO_PLAYING",
                     "isPlaying"
                   )}
-                  onRegionLabelAdded={onRegionLabelAdded}
+                  onRegionClassAdded={onRegionClassAdded}
                 />
               </div>
             )}

src/RegionLabel/index.js

@@ -29,7 +29,7 @@ type Props = {
   onChange: (Region) => null,
   onClose: (Region) => null,
   onOpen: (Region) => null,
-  onRegionLabelAdded: () => {},
+  onRegionClassAdded: () => {},
 }
 
 export const RegionLabel = ({
@@ -41,7 +41,7 @@ export const RegionLabel = ({
   onChange,
   onClose,
   onOpen,
-  onRegionLabelAdded,
+  onRegionClassAdded,
 }: Props) => {
   const classes = useStyles()
 
@@ -108,7 +108,7 @@ export const RegionLabel = ({
                 placeholder="Classification"
                 onChange={(o, actionMeta) => {
                   if (actionMeta.action == "create-option") {
-                    onRegionLabelAdded(o.value)
+                    onRegionClassAdded(o.value)
                   }
                   return onChange({
                     ...(region: any),

src/RegionTags/index.js

@@ -26,7 +26,7 @@ export const RegionTags = ({
   layoutParams,
   imageSrc,
   RegionEditLabel,
-  onRegionLabelAdded,
+  onRegionClassAdded,
 }) => {
   const RegionLabel =
     RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel
@@ -116,7 +116,7 @@ export const RegionTags = ({
               region={region}
               regions={regions}
               imageSrc={imageSrc}
-              onRegionLabelAdded={onRegionLabelAdded}
+              onRegionClassAdded={onRegionClassAdded}
             />
           </div>
         </div>