#74 Configured stage routing.

src/components/Header/components/BranchStep/Body.jsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { UrlPratTypes } from '@/models/UrlPartTypes';
 import slice from '@/redux/modules/branches';
 import repositoriesSlice from '@/redux/modules/repositories';
 import Highlight from '@/shared/components/Highlight';
 import LoadingOverlay from '@/shared/components/LoadingOverlay';
 import { ScrollBarMixin } from '@/shared/components/ScrollBar';
 import { useUIProperty } from '@/shared/hooks';
+import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
 import { Avatar, ListItem as ListItemOrigin, ListItemAvatar, ListSubheader, TextField } from '@material-ui/core';
 import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -65,6 +67,7 @@ const bySearch = (search) => (item) => {
 
 const Body = () => {
   const dispatch = useDispatch();
+  const redirectTo = useRedirectTo(UrlPratTypes.branch);
   const inputRef = useRef();
   const [search, setSearch] = useState('');
   const { isFetching, items } = useSelector(slice.selectors.getState);
@@ -90,10 +93,10 @@ const Body = () => {
 
   const onClick = useCallback(
     (item) => () => {
-      dispatch(slice.actions.setSelected(item));
       setBodyOpen(false);
+      redirectTo(item.name);
     },
-    [setBodyOpen, dispatch],
+    [setBodyOpen, redirectTo],
   );
 
   const ListHeader = useMemo(

src/components/Header/components/CommitsStep/Body.jsx

@@ -1,6 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { UrlPratTypes } from '@/models/UrlPartTypes';
 import branchesSlice from '@/redux/modules/branches';
+import commitsSlice from '@/redux/modules/commits';
 import { useUIProperty } from '@/shared/hooks';
+import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Input from '@material-ui/core/Input';
@@ -9,7 +12,7 @@ import Typography from '@material-ui/core/Typography';
 import HistoryIcon from 'mdi-react/HistoryIcon';
 import PlayArrowIcon from 'mdi-react/PlayArrowIcon';
 import StopIcon from 'mdi-react/StopIcon';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 const Container = styled.div`
@@ -38,9 +41,11 @@ const SliderContainer = styled(Grid)`
 const valueLabelFormat = (value) => -value;
 
 const Body = () => {
+  const dispatch = useDispatch();
+  const redirectTo = useRedirectTo(UrlPratTypes.commits);
   const [, setBodyOpen] = useUIProperty('bodyOpen');
-  const [isAnalysing, setIsAnalysing] = useUIProperty('isAnalysing');
-
+  const [, setRefreshKey] = useUIProperty('refreshKey');
+  const { isFetching } = useSelector(commitsSlice.selectors.getState);
   const { selected: branch } = useSelector(branchesSlice.selectors.getState);
   const { commits = 0 } = branch || {};
   const [storedValue, setStoredValue] = useUIProperty('commitsCount', Math.min(100, commits));
@@ -85,10 +90,17 @@ const Body = () => {
         return;
       }
 
-      setIsAnalysing((prev) => !prev);
       setBodyOpen(false);
+      setRefreshKey(Date.now());
+      redirectTo(-value);
+    },
+    [redirectTo, setBodyOpen, setRefreshKey, value],
+  );
+  const onStop = useCallback(
+    () => {
+      dispatch(commitsSlice.actions.cancel());
     },
-    [setBodyOpen, setIsAnalysing, value],
+    [dispatch],
   );
 
   useEffect(
@@ -118,7 +130,7 @@ const Body = () => {
               step: 1,
               type: 'number',
             }}
-            disabled={isAnalysing}
+            disabled={isFetching}
           />
         </Grid>
         <Grid item>
@@ -138,16 +150,16 @@ const Body = () => {
             valueLabelFormat={valueLabelFormat}
             valueLabelDisplay="on"
             track="inverted"
-            disabled={isAnalysing}
+            disabled={isFetching}
           />
         </SliderContainer>
         <Grid item>
           <Button
             variant="outlined"
-            color={isAnalysing ? 'secondary' : ''}
-            onClick={onClick}
+            color={isFetching ? 'secondary' : 'default'}
+            onClick={isFetching ? onStop : onClick}
           >
-            {isAnalysing ? <StopIcon /> : <PlayArrowIcon />}
+            {isFetching ? <StopIcon /> : <PlayArrowIcon />}
           </Button>
         </Grid>
       </GridStyled>

src/components/Header/components/RepositoryStep/Body.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { UrlPratTypes } from '@/models/UrlPartTypes';
 import slice from '@/redux/modules/repositories';
 import Highlight from '@/shared/components/Highlight';
 import LoadingOverlay from '@/shared/components/LoadingOverlay';
 import { ScrollBarMixin } from '@/shared/components/ScrollBar';
 import { useUIProperty } from '@/shared/hooks';
+import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
 import {
   Avatar, ListItem as ListItemOrigin,
   ListItemAvatar, ListSubheader, TextField,
@@ -68,6 +70,7 @@ const bySearch = (search) => (item) => {
 };
 
 const Body = () => {
+  const redirectTo = useRedirectTo(UrlPratTypes.repository);
   const dispatch = useDispatch();
   const inputRef = useRef();
   const [search, setSearch] = useState('');
@@ -92,10 +95,10 @@ const Body = () => {
 
   const onClick = useCallback(
     (item) => () => {
-      dispatch(slice.actions.setSelected(item));
       setBodyOpen(false);
+      redirectTo(item.name);
     },
-    [setBodyOpen, dispatch],
+    [setBodyOpen, redirectTo],
   );
 
   const ListHeader = useMemo(

src/components/Header/components/UserStep/Body.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useRef, useState } from 'react';
+import { UrlPratTypes } from '@/models/UrlPartTypes';
 import slice from '@/redux/modules/profiles';
 import Highlight from '@/shared/components/Highlight';
 import LoadingOverlay from '@/shared/components/LoadingOverlay';
 import ScrollBar from '@/shared/components/ScrollBar';
 import { useUIProperty } from '@/shared/hooks';
+import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
 import {
   Avatar, ListItem as ListItemOrigin,
   ListItemAvatar, ListSubheader,
@@ -64,6 +66,7 @@ const TopHeader = (
 
 const Body = () => {
   const dispatch = useDispatch();
+  const redirectTo = useRedirectTo(UrlPratTypes.profile);
   const inputRef = useRef();
   const [search, setSearch] = useState('');
   const [neverChange, setNeverChange] = useState(true);
@@ -80,11 +83,10 @@ const Body = () => {
 
   const onClick = useCallback(
     (user) => () => {
-      dispatch(slice.actions.setSelected(user));
       setBodyOpen(false);
-      dispatch(slice.actions.fetchProfile(user.login));
+      redirectTo(user.login);
     },
-    [setBodyOpen, dispatch],
+    [redirectTo, setBodyOpen],
   );
 
   useDebounce(

src/components/StageController/index.js

@@ -1,38 +1,22 @@
-import { useEffect, useRef } from 'react';
-import branchesSlice from '@/redux/modules/branches';
-import commitsSlice from '@/redux/modules/commits';
+import { useEffect } from 'react';
+import { useStageBranches } from '@/components/StageController/useStageBranches';
+import { useStageCommits } from '@/components/StageController/useStageCommits';
+import { useStageProfiles } from '@/components/StageController/useStageProfiles';
+import { useStageRepositories } from '@/components/StageController/useStageRepositories';
 import emojisSlice from '@/redux/modules/emojis';
-import profilesSlice from '@/redux/modules/profiles';
-import repositoriesSlice from '@/redux/modules/repositories';
-import { useUIProperty } from '@/shared/hooks';
-import { useDispatch, useSelector } from 'react-redux';
+import { useRouteMatches } from '@/shared/hooks/useRouteMatches';
+import { useDispatch } from 'react-redux';
 
-export default () => {
+const StageController = () => {
   const dispatch = useDispatch();
-  const { selected: profile } = useSelector(profilesSlice.selectors.getState);
-  const { selected: repository } = useSelector(repositoriesSlice.selectors.getState);
-  const { items: branches, selected: branch } = useSelector(branchesSlice.selectors.getState);
-  const { isFetching } = useSelector(commitsSlice.selectors.getState);
-  const lastFetching = useRef(isFetching);
-  const [isAnalysing, setIsAnalysing] = useUIProperty('isAnalysing');
-  const [commits] = useUIProperty('commitsCount', 0);
 
-  const owner = profile?.login;
-  const amount = profile?.public_repos;
-  const repo = repository?.name;
-  const defaultBranch = repository?.default_branch;
-
-  // fetch list of top users
-  useEffect(
-    () => {
-      dispatch(profilesSlice.actions.fetchTop(null, 'global'));
-
-      return () => {
-        dispatch(profilesSlice.actions.cancel('global'));
-      };
-    },
-    [dispatch],
-  );
+  const {
+    service,
+    profile,
+    repository,
+    branch,
+    commits,
+  } = useRouteMatches();
 
   // fetch list of emojis
   useEffect(
@@ -43,96 +27,15 @@ export default () => {
         dispatch(emojisSlice.actions.cancel());
       };
     },
-    [dispatch],
-  );
-
-  // fetch all repositories of a owner
-  useEffect(
-    () => {
-      dispatch(repositoriesSlice.actions.clear());
-      dispatch(repositoriesSlice.actions.fetch({ owner, amount }));
-
-      return () => {
-        dispatch(repositoriesSlice.actions.cancel());
-      };
-    },
-    [dispatch, owner, amount],
+    [service, dispatch],
   );
 
-  // fetch all branches of a repository
-  useEffect(
-    () => {
-      dispatch(branchesSlice.actions.clear());
-      if (!repo) {
-        return undefined;
-      }
-
-      dispatch(branchesSlice.actions.fetch({
-        owner,
-        repo,
-      }));
-
-      return () => {
-        dispatch(branchesSlice.actions.cancel());
-      };
-    },
-    [dispatch, owner, repo],
-  );
-
-  // select a default branch of a repository
-  useEffect(
-    () => {
-      setIsAnalysing(false);
-      if (!branches.length || branch || !defaultBranch) {
-        return;
-      }
-
-      const item = branches.find(({ name }) => name === defaultBranch);
-
-      if (item) {
-        dispatch(branchesSlice.actions.setSelected(item));
-      }
-    },
-    [branch, branches, defaultBranch, dispatch, setIsAnalysing],
-  );
-
-  // fetch commits
-  useEffect(
-    () => {
-      if (!isAnalysing) {
-        return undefined;
-      }
-
-      dispatch(commitsSlice.actions.clear());
-      if (!branch?.name || !owner || !repo || !commits) {
-        return undefined;
-      }
-
-      dispatch(commitsSlice.actions.fetch({
-        owner,
-        repo,
-        branch: branch.name,
-        amount: commits,
-      }));
-
-      return () => {
-        if (lastFetching.current) {
-          dispatch(commitsSlice.actions.cancel());
-        }
-      };
-    },
-    [isAnalysing, branch, owner, repo, commits, dispatch],
-  );
-
-  useEffect(
-    () => {
-      if (lastFetching.current && !isFetching) {
-        setIsAnalysing(false);
-      }
-      lastFetching.current = isFetching;
-    },
-    [isFetching, setIsAnalysing],
-  );
+  useStageProfiles(service, profile);
+  useStageRepositories(repository);
+  useStageBranches(branch);
+  useStageCommits(commits);
 
   return null;
 };
+
+export default StageController;

src/components/StageController/useSetSelected.js

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+const defaultCondition = (name, selected) => name === selected;
+
+/**
+ * @param name - is needed to find
+ * @param selected - already selected
+ * @param {Array} items
+ * @param {Function} action
+ * @param {Function} [skipCondition]
+ * @param {Function} [preAction]
+ */
+export const useSetSelected = ({ name, selected, items, action, skipCondition, preAction }) => {
+  const dispatch = useDispatch();
+
+  const skip = skipCondition || defaultCondition;
+
+  useEffect(
+    () => {
+      if (preAction) {
+        preAction();
+      }
+
+      if (!items?.length || skip(name, selected)) {
+        return;
+      }
+
+      const found = items.find((item) => item.name === name);
+
+      if (!found) {
+        return;
+      }
+
+      dispatch(action(found));
+    },
+    [name, selected, items, dispatch, action, preAction, skip],
+  );
+};