#104 extracted fetching github emojis to hook.

src/components/StageController/index.js

@@ -1,32 +1,15 @@
-import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-
-import emojisSlice from '@/redux/modules/emojis';
-
 import { useRouteMatches } from '@/shared/hooks/useRouteMatches';
 
+import { useGithubEmojis } from './useGithubEmojis';
 import { useStageBranches } from './useStageBranches';
 import { useStageCommits } from './useStageCommits';
 import { useStageProfiles } from './useStageProfiles';
 import { useStageRepositories } from './useStageRepositories';
 
 const StageController = () => {
-  const dispatch = useDispatch();
-
   const { service, profile, repository, branch, commits } = useRouteMatches();
 
-  // fetch list of emojis
-  useEffect(
-    () => {
-      dispatch(emojisSlice.actions.fetch());
-
-      return () => {
-        dispatch(emojisSlice.actions.cancel());
-      };
-    },
-    [service, dispatch],
-  );
-
+  useGithubEmojis(service);
   useStageProfiles(service, profile);
   useStageRepositories(repository);
   useStageBranches(branch);

src/components/StageController/useGithubEmojis.js

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import emojisSlice from '@/redux/modules/emojis';
+
+export const useGithubEmojis = (service) => {
+  const dispatch = useDispatch();
+
+  const { items: emojis } = useSelector(emojisSlice.selectors.getState);
+
+  // fetch list of emojis
+  useEffect(
+    () => {
+      if (service !== 'github' || Object.values(emojis).length) {
+        return undefined;
+      }
+
+      dispatch(emojisSlice.actions.fetch());
+
+      return () => {
+        dispatch(emojisSlice.actions.cancel());
+      };
+    },
+    [service, dispatch],
+  );
+};

src/redux/utils/index.js

@@ -10,6 +10,7 @@ export const startFetching = (state) => {
   state.isFetching = true;
   state._requests = (state._requests ?? 0) + 1;
   state.error = '';
+  state.errorStatus = 0;
 };
 
 /**
@@ -29,18 +30,16 @@ export const stopFetching = (state) => {
  */
 export const incrementFetching = (state, { payload: { data, append } }) => {
   const fixed = Array.isArray(data) ? data : [];
-  state.items = append ? [
-    ...state.items,
-    ...fixed,
-  ] : fixed;
+  state.items = append ? [...state.items, ...fixed] : fixed;
 };
 
 /**
  * Stops fetching and set error message into state
  * @param {*} state
  * @param {Error} payload
  */
-export const fail = (state, { payload: { message } }) => {
+export const fail = (state, { payload: { message, status } }) => {
   stopFetching(state);
   state.error = message;
+  state.errorStatus = status;
 };