From 0d86578a6d2392247ba9d29726dabb5dc8c4711a Mon Sep 17 00:00:00 2001
From: Artem Zubkov <artzub@gmail.com>
Date: Sun, 12 Mar 2023 16:36:17 +0700
Subject: [PATCH] #105 changed data routers matching only for allowed services.

---
 .../components/Menu/ServiceSelector/index.jsx |  9 +++++++-
 src/components/Header/index.jsx               |  4 +++-
 src/components/Layout.jsx                     |  5 +---
 src/shared/hooks/useRouteMatches.js           | 23 +++++++++++++------
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/Header/components/Menu/ServiceSelector/index.jsx b/src/components/Header/components/Menu/ServiceSelector/index.jsx
index bfa0b78..9aee998 100644
--- a/src/components/Header/components/Menu/ServiceSelector/index.jsx
+++ b/src/components/Header/components/Menu/ServiceSelector/index.jsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import styled from 'styled-components';
@@ -65,6 +65,13 @@ const ServiceSelector = () => {
   const navigate = useNavigate();
   const [value, setValue] = useState(currentService || '');
 
+  useEffect(
+    () => {
+      setValue(currentService || '');
+    },
+    [currentService],
+  );
+
   const services = useMemo(
     () => {
       servicesMock.forEach((service) => {
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 934b541..a1ac1de 100644
--- a/src/components/Header/index.jsx
+++ b/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 { useUIProperty } from '@/shared/hooks';
+import { useRouteMatches, useUIProperty } from '@/shared/hooks';
 
 import BranchStepBody from './components/BranchStep/Body';
 import BranchStepHeader from './components/BranchStep/Header';
@@ -77,6 +77,7 @@ const StepBodies = {
 };
 
 const Header = () => {
+  const { service } = useRouteMatches();
   const [step, setStep] = useUIProperty('step');
   const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
   const ref = useRef();
@@ -150,6 +151,7 @@ const Header = () => {
       <Container>
         <ProfileStepHeader
           onClick={onClick(StageTypes.profile)}
+          disabled={!service}
           divider
           ref={profileRef}
         />
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 91ba457..9376ba7 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -21,11 +21,8 @@ const Layout = () => (
         path="about"
         element={<div />}
       />
-      <Route
-        path="*"
-        element={<StageController />}
-      />
     </Routes>
+    <StageController />
     <Visualization />
     <Progress />
     <Header />
diff --git a/src/shared/hooks/useRouteMatches.js b/src/shared/hooks/useRouteMatches.js
index f72d285..1eb7377 100644
--- a/src/shared/hooks/useRouteMatches.js
+++ b/src/shared/hooks/useRouteMatches.js
@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { useMatch } from 'react-router-dom';
 
 const servicePath = '/:service';
@@ -6,6 +7,8 @@ const repositoryPath = `${profilePath}/:repository`;
 const branchPath = `${repositoryPath}/:branch`;
 const commitsPath = `${branchPath}/:commits`;
 
+const allowedServices = ['github', 'gitlab', 'bitbucket'];
+
 export const useRouteMatches = () => {
   const { params: { service } = {} } = useMatch({ path: servicePath, end: false }) || {};
   const { params: { profile } = {} } = useMatch({ path: profilePath, end: false }) || {};
@@ -13,11 +16,17 @@ export const useRouteMatches = () => {
   const { params: { branch } = {} } = useMatch({ path: branchPath, end: false }) || {};
   const { params: { commits } = {} } = useMatch({ path: commitsPath, end: false }) || {};
 
-  return {
-    service,
-    profile,
-    repository,
-    branch,
-    commits,
-  };
+  const refs = useRef({});
+
+  if (!service || allowedServices.includes(service)) {
+    refs.current = {
+      service,
+      profile,
+      repository,
+      branch,
+      commits,
+    };
+  }
+
+  return refs.current;
 };