refactor: Ditch the use of react router ♻️

Author: GeeekyBoy

package-lock.json

@@ -17,8 +17,7 @@
     "@mui/icons-material": "5.11.16",
     "fontsource-rubik": "4.0.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-router-dom": "6.14.0"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "vite": "4.3.9",

package.json

@@ -1,29 +1,22 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Route, Routes, Navigate } from "react-router";
+import React, { useEffect, useState, createContext } from "react";
 import Result from "./components/Result";
 import Letters from "./components/Letters";
 import NoMinimization from "./components/NoMinimization"
 import Start from "./components/Start";
 
 function App() {
-  const navigate = useNavigate();
-  const [isFirstLoad, setIsFirstLoad] = useState(true);
+  const [wizardStep, setWizardStep] = useState(0);
   useEffect(() => {
     document.body.classList.remove("loadingBody");
     document.getElementById("splash").remove();
     document.body.classList.add("root");
-    navigate("/", { replace: true });
-    setIsFirstLoad(false);
   }, []);
-  return isFirstLoad ? null : (
-    <Routes>
-      <Route path="/" element={<Start />} />
-      <Route exact path="/no-minimization" element={<NoMinimization />} />
-      <Route exact path="/letters" element={<Letters />} />
-      <Route exact path="/result" element={<Result />} />
-      <Route path="*" element={<Navigate to="/" />} />
-    </Routes>
+  return (
+    wizardStep === 0 ? <Start onNextPage={(alt) => setWizardStep(alt ? 1 : 2)} /> :
+    wizardStep === 1 ? <NoMinimization onNextPage={() => setWizardStep(0)} /> :
+    wizardStep === 2 ? <Letters onNextPage={() => setWizardStep(3)} /> :
+    wizardStep === 3 ? <Result onNextPage={() => setWizardStep(0)} /> :
+    null
   );
 }
 

src/App.jsx

@@ -1,15 +1,13 @@
 import React, { useState } from "react";
 import Paper from "@mui/material/Paper";
-import { useNavigate } from "react-router-dom";
 import Button from "@mui/material/Button";
 import CalculateRounded from "@mui/icons-material/CalculateRounded";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import varStore from "../utils/varStore";
 import { Fade } from "@mui/material";
 
-const Letter = () => {
-  const navigate = useNavigate();
+const Letter = ({ onNextPage }) => {
   const [isShown, setIsShown] = useState(true);
   const [isLettersChanged, setIsLettersChanged] = useState(false);
   const [letters, setLetters] = useState("");
@@ -32,7 +30,7 @@ const Letter = () => {
     } else if (!errMsg) {
       varStore.initInputLetters = letters.split("");
       setIsShown(false);
-      setTimeout(() => navigate("/result"), 500);
+      setTimeout(() => onNextPage(), 500);
     }
   };
   document.body.classList.add("centering-root");

src/components/Letters.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
 import noMinimizationImg from "../assets/img/no-minimization.gif";
@@ -9,14 +8,13 @@ import Typography from "@mui/material/Typography";
 import varStore from "../utils/varStore";
 import { Fade } from "@mui/material";
 
-const NoMinimization = () => {
-  const navigate = useNavigate();
+const NoMinimization = ({ onNextPage }) => {
   const [isShown, setIsShown] = useState(true);
   const handleNewFunction = () => {
     setIsShown(false);
     setTimeout(() => {
       varStore.reset();
-      navigate("/");
+      onNextPage();
     }, 500);
   };
   document.body.classList.add("centering-root");

src/components/NoMinimization.jsx

@@ -1,6 +1,5 @@
 import { Fade } from "@mui/material";
 import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
 import minimizeFunction from "../core/minimizeFunction";
 import varStore from "../utils/varStore";
 import SelectionTable from "./SelectionTable";
@@ -11,14 +10,13 @@ import TabularTable from "./TabularTable";
 import MinimizedFunction from "./MinimizedFunction";
 import FunctionNotation from "./FunctionNotation";
 
-const Result = () => {
+const Result = ({ onNextPage }) => {
   const [steps, setSteps] = useState(null);
-  const navigate = useNavigate();
   const handleNewFunction = () => {
     setSteps(null);
     setTimeout(() => {
       varStore.reset();
-      navigate("/");
+      onNextPage();
     }, 500);
   };
   document.body.classList.remove("centering-root");

src/components/Result.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
 import Paper from "@mui/material/Paper";
 import Button from "@mui/material/Button";
 import FormGroup from "@mui/material/FormGroup";
@@ -11,8 +10,7 @@ import Typography from "@mui/material/Typography";
 import varStore from "../utils/varStore";
 import { Fade } from "@mui/material";
 
-const Start = () => {
-  const navigate = useNavigate();
+const Start = ({ onNextPage }) => {
   const [isShown, setIsShown] = useState(true);
   const [isMintermsChanged, setIsMintermsChanged] = useState(false);
   const [minterms, setMinterms] = useState("");
@@ -58,11 +56,11 @@ const Start = () => {
       varStore.initInputsNumber = Math.max(inputsCount, minInputsCount);
       if (mintermsPlusDonotcares.length === 2 ** varStore.initInputsNumber) {
         setIsShown(false);
-        setTimeout(() => navigate("/no-minimization"), 500);
+        setTimeout(() => onNextPage(true), 500);
       } else {
         varStore.isComplementAvail = isComplementAvail;
         setIsShown(false);
-        setTimeout(() => navigate("/letters"), 500);
+        setTimeout(() => onNextPage(false), 500);
       }
     }
   };

src/components/Start.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { HashRouter } from "react-router-dom";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import App from "./App";
 import "fontsource-rubik";
@@ -38,8 +37,6 @@ const root = createRoot(container);
 
 root.render(
   <ThemeProvider theme={theme}>
-    <HashRouter>
-      <App />
-    </HashRouter>
+    <App />
   </ThemeProvider>
 );