#105 changed data routers matching only for allowed services.

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) => {

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}
         />

src/components/Layout.jsx

@@ -21,11 +21,8 @@ const Layout = () => (
         path="about"
         element={<div />}
       />
-      <Route
-        path="*"
-        element={<StageController />}
-      />
     </Routes>
+    <StageController />
     <Visualization />
     <Progress />
     <Header />

src/shared/hooks/useRouteMatches.js

@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { useMatch } from 'react-router-dom';
 
 const servicePath = '/:service';
@@ -6,18 +7,26 @@ 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 }) || {};
   const { params: { repository } = {} } = useMatch({ path: repositoryPath, end: false }) || {};
   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;
 };