#104 added useStateAuthenticated`

src/components/Header/index.jsx

@@ -14,7 +14,7 @@ import branchesSlice from '@/redux/modules/branches';
 import profilesSlice from '@/redux/modules/profiles';
 import repositoriesSlice from '@/redux/modules/repositories';
 
-import { useRouteMatches, useUIProperty } from '@/shared/hooks';
+import { useUIProperty } from '@/shared/hooks';
 
 import BranchStepBody from './components/BranchStep/Body';
 import BranchStepHeader from './components/BranchStep/Header';
@@ -77,7 +77,7 @@ const StepBodies = {
 };
 
 const Header = () => {
-  const { service } = useRouteMatches();
+  const { authenticated } = useSelector(profilesSlice.selectors.getState);
   const [step, setStep] = useUIProperty('step');
   const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
   const ref = useRef();
@@ -151,7 +151,7 @@ const Header = () => {
       <Container>
         <ProfileStepHeader
           onClick={onClick(StageTypes.profile)}
-          disabled={!service}
+          disabled={!authenticated}
           divider
           ref={profileRef}
         />

src/components/Settings/index.jsx

@@ -58,10 +58,7 @@ const items = [
 const Body = () => {
   return (
     <Fragment>
-      <Collection
-        items={items}
-        path="."
-      />
+      <Collection items={items} />
 
       <Outlet />
     </Fragment>
@@ -77,7 +74,7 @@ const Settings = () => {
       >
         <Route
           path="connection/github"
-          element={<GitHub path="." />}
+          element={<GitHub parent="../.." />}
         />
         <Route path="*" />
       </Route>

src/components/StageController/index.js → src/components/StageController/index.jsx

@@ -5,10 +5,13 @@ import { useStageBranches } from './useStageBranches';
 import { useStageCommits } from './useStageCommits';
 import { useStageProfiles } from './useStageProfiles';
 import { useStageRepositories } from './useStageRepositories';
+import { useStateAuthenticated } from './useStateAuthenticated';
 
-const StageController = () => {
+const Authenticated = () => {
   const { service, profile, repository, branch, commits } = useRouteMatches();
 
+  console.log('Authenticated');
+
   useGithubEmojis(service);
   useStageProfiles(service, profile);
   useStageRepositories(repository);
@@ -18,4 +21,18 @@ const StageController = () => {
   return null;
 };
 
+const Authentication = () => {
+  const { service } = useRouteMatches();
+
+  const isAuthenticated = useStateAuthenticated(service);
+
+  return isAuthenticated ? <Authenticated /> : null;
+};
+
+const StageController = () => {
+  const { service } = useRouteMatches();
+
+  return service ? <Authentication /> : null;
+};
+
 export default StageController;

src/components/StageController/useGithubEmojis.js

@@ -21,6 +21,6 @@ export const useGithubEmojis = (service) => {
         dispatch(emojisSlice.actions.cancel());
       };
     },
-    [service, dispatch],
+    [service],
   );
 };

src/components/StageController/useSetSelected.js

@@ -11,7 +11,14 @@ const defaultCondition = (name, selected) => name === selected;
  * @param {Function} [skipCondition]
  * @param {Function} [preAction]
  */
-export const useSetSelected = ({ name, selected, items, action, skipCondition, preAction }) => {
+export const useSetSelected = ({
+  name,
+  selected,
+  items,
+  action,
+  skipCondition,
+  preAction,
+}) => {
   const dispatch = useDispatch();
 
   const skip = skipCondition || defaultCondition;
@@ -34,6 +41,6 @@ export const useSetSelected = ({ name, selected, items, action, skipCondition, p
 
       dispatch(action(found));
     },
-    [name, selected, items, dispatch, action, preAction, skip],
+    [name, selected, items, action, preAction, skip],
   );
 };

src/components/StageController/useStageBranches.js

@@ -18,7 +18,9 @@ export const useStageBranches = (name) => {
   const dispatch = useDispatch();
   const redirectTo = useRedirectTo(UrlPratTypes.branch);
 
-  const { selected: repository } = useSelector(repositoriesSlice.selectors.getState);
+  const { selected: repository } = useSelector(
+    repositoriesSlice.selectors.getState,
+  );
   const { selected: profile } = useSelector(profilesSlice.selectors.getState);
   const { selected, items } = useSelector(branchesSlice.selectors.getState);
 
@@ -33,16 +35,18 @@ export const useStageBranches = (name) => {
         return undefined;
       }
 
-      dispatch(branchesSlice.actions.fetch({
-        owner,
-        repo,
-      }));
+      dispatch(
+        branchesSlice.actions.fetch({
+          owner,
+          repo,
+        }),
+      );
 
       return () => {
         dispatch(branchesSlice.actions.cancel());
       };
     },
-    [dispatch, owner, repo],
+    [owner, repo],
   );
 
   useSetSelected({

src/components/StageController/useStageCommits.js

@@ -15,7 +15,9 @@ export const useStageCommits = (amount) => {
   const [, setPause] = useUIProperty('pause');
   const [refreshKey] = useUIProperty('refreshKey');
 
-  const { selected: repository } = useSelector(repositoriesSlice.selectors.getState);
+  const { selected: repository } = useSelector(
+    repositoriesSlice.selectors.getState,
+  );
   const { selected: profile } = useSelector(profilesSlice.selectors.getState);
   const { selected } = useSelector(branchesSlice.selectors.getState);
 
@@ -38,21 +40,28 @@ export const useStageCommits = (amount) => {
 
       setStoredValue(fixedAmount);
 
-      dispatch(commitsSlice.actions.fetch({
-        owner,
-        repo,
-        branch,
-        amount: fixedAmount,
-      }));
+      dispatch(
+        commitsSlice.actions.fetch({
+          owner,
+          repo,
+          branch,
+          amount: fixedAmount,
+        }),
+      );
 
       return () => {
         dispatch(commitsSlice.actions.cancel());
       };
     },
     [
-      branch, owner, repo,
-      dispatch, amount, setStoredValue,
-      refreshKey, setStart, setPause,
+      branch,
+      owner,
+      repo,
+      amount,
+      setStoredValue,
+      refreshKey,
+      setStart,
+      setPause,
     ],
   );
 };

src/components/StageController/useStageProfiles.js

@@ -17,14 +17,7 @@ export const useStageProfiles = (service, profile) => {
         dispatch(profilesSlice.actions.cancel('global'));
       };
     },
-    [dispatch, service],
-  );
-
-  useEffect(
-    () => {
-      dispatch(profilesSlice.actions.clear());
-    },
-    [dispatch, service],
+    [service],
   );
 
   useEffect(
@@ -39,6 +32,6 @@ export const useStageProfiles = (service, profile) => {
         dispatch(profilesSlice.actions.cancel('profile'));
       };
     },
-    [profile, login, dispatch],
+    [profile, login],
   );
 };

src/components/StageController/useStageRepositories.js

@@ -20,16 +20,18 @@ export const useStageRepositories = (name) => {
   useEffect(
     () => {
       dispatch(repositoriesSlice.actions.clear());
-      dispatch(repositoriesSlice.actions.fetch({
-        owner,
-        amount,
-      }));
+      dispatch(
+        repositoriesSlice.actions.fetch({
+          owner,
+          amount,
+        }),
+      );
 
       return () => {
         dispatch(repositoriesSlice.actions.cancel());
       };
     },
-    [owner, amount, dispatch],
+    [owner, amount],
   );
 
   useSetSelected({

src/components/StageController/useStateAuthenticated.js

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import useEventCallback from '@mui/material/utils/useEventCallback';
+
+import errorsSlice from '@/redux/modules/errors';
+import profilesSlice from '@/redux/modules/profiles';
+
+const allowedErrors = [401, 403];
+
+export const useStateAuthenticated = (service) => {
+  const dispatch = useDispatch();
+
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const { authenticated } = useSelector(profilesSlice.selectors.getState);
+  const { errorStatus } = useSelector(errorsSlice.selectors.getState);
+
+  const isAuthenticated = useRef(false);
+  isAuthenticated.current = !!authenticated;
+
+  const needRefresh = useRef(0);
+  const prevPathname = useRef(pathname);
+
+  if (
+    prevPathname.current !== pathname
+    && pathname.startsWith(`/${service}`)
+    && !isAuthenticated.current
+  ) {
+    needRefresh.current += 1;
+  }
+
+  console.log(
+    'useStateAuthenticated',
+    prevPathname.current,
+    pathname,
+    needRefresh.current,
+  );
+
+  prevPathname.current = pathname;
+
+  const redirectToConnection = useEventCallback(() => {
+    const path = `/settings/connection/${service}`;
+    if (pathname !== path && service) {
+      navigate(path, { state: { from: pathname } });
+    }
+  });
+
+  useEffect(
+    () => {
+      console.log('request', service, needRefresh.current);
+      isAuthenticated.current = false;
+      dispatch(profilesSlice.actions.clear());
+      dispatch(profilesSlice.actions.fetchAuthenticated(null, 'authenticated'));
+
+      return () => {
+        dispatch(profilesSlice.actions.cancel('authenticated'));
+      };
+    },
+    [service, needRefresh.current],
+  );
+
+  useEffect(
+    () => {
+      if (!allowedErrors.includes(errorStatus)) {
+        return;
+      }
+
+      isAuthenticated.current = false;
+
+      dispatch(profilesSlice.actions.clear());
+      dispatch(errorsSlice.actions.clear());
+
+      redirectToConnection();
+    },
+    [errorStatus],
+  );
+
+  return isAuthenticated.current;
+};