Add react-router for routing and refactor MainPage to handle shared IDs

- Introduced `react-router` version 7.6.2 in `package.json`.
- Wrapped the application in `HashRouter` for routing in `index.jsx`.
- Updated `MainPage` to utilize `useParams` for fetching shared IDs and handle imports using `importHandler`.
- Cleaned up `NavBar` by removing unused imports and components.

Author: souravrax

package.json

@@ -20,6 +20,7 @@
     "react-monaco-editor": "^0.58.0",
     "react-redux": "^7.2.2",
     "react-resize-detector": "^8.0.4",
+    "react-router": "^7.6.2",
     "react-select": "^3.1.0",
     "react-split-pane": "^0.1.92",
     "redux": "^5.0.1",

pnpm-lock.yaml

@@ -14,16 +14,9 @@ import { Heading, HeadingLevel } from "baseui/heading";
 import { useSnackbar, PLACEMENT, DURATION } from "baseui/snackbar";
 import { StatefulPopover, TRIGGER_TYPE } from "baseui/popover";
 
-// Custom Components
-// import Share from "./Share";
-// import ImportSharedCode from "./ImportSharedCode";
-// import InfoModel from "./Info";
-// import Settings from "./Settings";
-
 import Logo from "../assets/logo.png";
 const Settings = lazy(() => import("./Settings"));
 const Share = lazy(() => import("./Share"));
-const ImportSharedCode = lazy(() => import("./ImportSharedCode"));
 const InfoModel = lazy(() => import("./Info"));
 
 // Redux
@@ -228,16 +221,6 @@ const NavBar = ({
                             clearOnEscape
                         />
                     </StyledNavigationItem> */}
-          <StyledNavigationItem>
-            <Button
-              size={SIZE.compact}
-              startEnhancer={() => <i className="fas fa-network-wired"></i>}
-              onClick={() => setShowImportCodeModel(true)}
-              shape={SHAPE.pill}
-            >
-              Import shared code
-            </Button>
-          </StyledNavigationItem>
           <StyledNavigationItem>
             <Button
               startEnhancer={() => <i className="fas fa-share-alt"></i>}
@@ -277,12 +260,6 @@ const NavBar = ({
       <Suspense fallback={<div>Loading...</div>}>
         <Share show={showShareModel} setShow={setShowShareModel} />
       </Suspense>
-      <Suspense fallback={<div>Loading...</div>}>
-        <ImportSharedCode
-          show={showImportCodeModel}
-          setShow={setShowImportCodeModel}
-        />
-      </Suspense>
       <Suspense fallback={<div>Loading...</div>}>
         <InfoModel isOpen={showInfoModel} setIsOpen={setShowInfoModel} />
       </Suspense>

src/components/NavBar.jsx

@@ -3,67 +3,29 @@ import { BASE_URL } from "../constants";
 
 const URL = `${BASE_URL}/share/import`;
 
-const importHandler = (
+const importHandler = async (
     id,
-    isLoading,
     setCode,
     setInput,
     setLanguage,
-    setShow,
-    enqueue
+    setShow
 ) => {
-    if (id.length !== 24) {
-        isLoading(false);
-        enqueue({
-            message: "ID is not valid",
-            startEnhancer: () => (
-                <i className="fas fa-exclamation-triangle"></i>
-            ),
-        });
-        return;
+    console.log({ id });
+    try {
+        const response = await Axios.post(URL, { id });
+        console.log(response);
+        
+        if (response.data.success) {
+            console.log(response.data.data);
+            const { code, input, language } = response.data.data;
+            return {code, language, input};
+        } else {
+            throw new Error("Unable to import code");
+        }
+    } catch (e) {
+        console.error(e)
+        return null;
     }
-    console.log({
-        id: id,
-        isLoading: isLoading,
-        setCode: setCode,
-        setInput: setInput,
-        setLanguage: setLanguage,
-        setShow: setShow,
-    });
-    Axios.post(URL, {
-        id: id,
-    })
-        .then((response) => {
-            isLoading(false);
-            console.log(response);
-            if (response.data.success) {
-                console.log(response.data.data);
-                const { code, input, language } = response.data.data;
-                setCode(code);
-                setInput(input);
-                setLanguage(language);
-                isLoading(false);
-                setShow(false);
-            } else {
-                enqueue({
-                    message: "Something went wrong",
-                    startEnhancer: () => (
-                        <i className="fas fa-exclamation-triangle"></i>
-                    ),
-                });
-            }
-        })
-        .catch((error) => {
-            isLoading(false);
-            console.log(error);
-            enqueue({
-                message: "Something went wrong",
-                startEnhancer: () => (
-                    <i className="fas fa-exclamation-triangle"></i>
-                ),
-            });
-            return "";
-        });
 };
 
 export default importHandler;

src/controllers/importHandler.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import * as serviceWorker from "./serviceWorker";
+import { HashRouter, Routes, Route } from "react-router";
 
 // BaseWeb imports
 import { Client as Styletron } from "styletron-engine-atomic";
@@ -20,13 +21,18 @@ import App from "./App.jsx";
 
 // ReactDOM Render
 ReactDOM.render(
-  <Provider store={store}>
-    <StyletronProvider value={engine}>
-      <PersistGate loading={null} persistor={persistor}>
-        <App />
-      </PersistGate>
-    </StyletronProvider>
-  </Provider>,
+  <HashRouter>
+    <Provider store={store}>
+      <StyletronProvider value={engine}>
+        <PersistGate loading={null} persistor={persistor}>
+          <Routes>
+            <Route index element={<App />} />
+            <Route path=":sharedId" element={<App />} />
+          </Routes>
+        </PersistGate>
+      </StyletronProvider>
+    </Provider>
+  </HashRouter>,
   document.getElementById("root")
 );
 

src/index.jsx

@@ -1,14 +1,53 @@
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useEffect } from "react";
 import NavBar from "../components/NavBar";
+import { useParams } from "react-router";
 const Editor = lazy(() => import("../components/Editor"));
 
 import { Textarea } from "baseui/textarea";
 
 import { connect } from "react-redux";
 
-import { setInput } from "../app/master/master-actions";
+import {
+  setInput,
+  setCode,
+  setLanguage,
+  setOutput,
+} from "../app/master/master-actions";
+import importHandler from "../controllers/importHandler";
+
+const MainPage = ({
+  input,
+  setInput,
+  output,
+  setCode,
+  setLanguage,
+  setOutput,
+}) => {
+  const { sharedId } = useParams();
+
+  useEffect(() => {
+    (async function () {
+      if (sharedId) {
+        try {
+          const response = await importHandler(
+            sharedId,
+            setCode,
+            setLanguage,
+            setInput,
+            setOutput
+          );
+          if (response) {
+            setCode(response.code);
+            setLanguage(response.language);
+            setInput(response.input);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    })();
+  }, [sharedId]);
 
-const MainPage = ({ input, setInput, output }) => {
   return (
     <>
       <NavBar toggleTheme={(val) => console.log(val)} />
@@ -67,6 +106,9 @@ const MainPage = ({ input, setInput, output }) => {
 
 const mapDispatchToProps = (dispatch) => ({
   setInput: (input) => dispatch(setInput(input)),
+  setCode: (code) => dispatch(setCode(code)),
+  setLanguage: (language) => dispatch(setLanguage(language)),
+  setOutput: (output) => dispatch(setOutput(output)),
 });
 
 const mapStateToProps = (state) => ({