refactor: improved-extension-navigation

package.json

@@ -18,6 +18,7 @@
     "gpt-tokenizer": "^1.0.5",
     "node-emoji": "^1.11.0",
     "react": "^18.0.0",
+    "react-chrome-extension-router": "^1.4.0",
     "react-dom": "^18.0.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.8.0"

src/App.tsx

@@ -1,50 +1,25 @@
-import { useState, useEffect, createContext } from "react";
-
+import { useEffect } from "react";
 import Start from "./pages/start";
 import Home from "./pages/home";
 import Loading from "./pages/loading";
-import { Profile } from "./pages/profile";
 import { useAuth } from "./hooks/useAuth";
-import AIPRDescription from "./pages/aiprdescription";
-
-export const RouteContext = createContext<{ page: { name: string, props?: any }, setCurrentPage:(page: RouteKeys, props?: any) => void }>({ page: { name: "loading" }, setCurrentPage: () => {} });
-
-const routes = {
-  start: <Start />,
-  home: <Home />,
-  loading: <Loading />,
-  profile: <Profile />,
-  aiprdescription: <AIPRDescription />,
-};
+import { goTo } from "react-chrome-extension-router";
 
-type RouteKeys = keyof typeof routes;
 
 const App = () => {
   const { isTokenValid } = useAuth();
-  const [renderedPage, setRenderedPage] = useState<{ name: RouteKeys, props?: any }>({ name: "loading", props: {} });
-
-  const setCurrentPage = (name: RouteKeys, props: any = {}) => {
-    setRenderedPage({ name, props });
-  };
 
 
   useEffect(() => {
-    if (isTokenValid === null) {
-      setCurrentPage("loading");
-    } else if (isTokenValid) {
-      setCurrentPage("home");
+    if (isTokenValid) {
+      goTo(Home);
     } else {
-      setCurrentPage("start");
+      goTo(Start);
     }
   }, [isTokenValid]);
 
   return (
-    <RouteContext.Provider value={{ page: renderedPage, setCurrentPage }}>
-      <div className="p-4 bg-slate-800">
-        {routes[renderedPage.name]}
-      </div>
-    </RouteContext.Provider>
-
+      <Loading />
   );
 };
 

src/main.tsx

@@ -2,9 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./popup.css";
+import { Router } from "react-chrome-extension-router";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
 );

src/pages/aiprdescription.tsx

@@ -1,7 +1,6 @@
-import React, { useContext, useEffect, useReducer, useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import { FaChevronLeft } from "react-icons/fa";
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
-import { RouteContext } from "../App";
 import { ImSwitch } from "react-icons/im";
 import toast, { Toaster } from "react-hot-toast";
 
@@ -16,9 +15,9 @@ import {
 } from "../utils/aiprdescription/descriptionconfig";
 import { useRefs } from "../hooks/useRefs";
 import { configurationReducer } from "../utils/aiprdescription/configurationReducer";
+import { goBack } from "react-chrome-extension-router";
 
 const AIPRDescription = () => {
-  const { setCurrentPage } = useContext(RouteContext);
   const [config, dispatch] = useReducer(configurationReducer, getDefaultDescriptionConfig());
   const { refs, setRefFromKey } = useRefs();
 
@@ -57,16 +56,16 @@ const AIPRDescription = () => {
 
   return (
 
-    <>
-      <Toaster />
-
+  <>
+    <Toaster />
+    <div className="p-4 bg-slate-800">
       <div className="grid grid-cols-1 divide-y divider-y-center-2 min-w-[320px]">
         <header className="flex justify-between">
           <div className="flex items-center gap-2">
             <button
               className="rounded-full p-2 bg-slate-700 hover:bg-slate-700/50"
               onClick={() => {
-                setCurrentPage("home");
+                goBack();
               }}
             >
               <FaChevronLeft className="text-osOrange text-white" />
@@ -251,7 +250,8 @@ const AIPRDescription = () => {
           </form>
         </main>
       </div>
-    </>
+    </div>
+  </>
   );
 };
 

src/pages/home.tsx

@@ -1,16 +1,17 @@
-import { useContext } from "react";
 import { HiArrowTopRightOnSquare, HiPencil, HiUserCircle } from "react-icons/hi2";
-import { RouteContext } from "../App";
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
 import { useAuth } from "../hooks/useAuth";
 import { useOpensaucedUserCheck } from "../hooks/useOpensaucedUserCheck";
+import { Profile } from "./profile";
+import { goTo } from "react-chrome-extension-router";
+import AIPRDescription from "./aiprdescription";
 
 const Home = () => {
-  const { setCurrentPage } = useContext(RouteContext);
   const { user } = useAuth();
   const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
 
   return (
+  <div className="p-4 bg-slate-800">
     <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
       <header className="flex justify-between">
         <img
@@ -23,7 +24,7 @@ const Home = () => {
           <button
             className="flex gap-1 items-center hover:text-orange text-white no-underline"
             onClick={() => {
-              setCurrentPage("profile", { userName: user.user_name });
+              goTo(Profile, { username: user.user_name });
             }}
           >
             {user.user_name}
@@ -64,7 +65,7 @@ const Home = () => {
           <button
             className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
             onClick={() => {
-              setCurrentPage("aiprdescription");
+              goTo(AIPRDescription);
             }}
           >
             <HiPencil />
@@ -75,7 +76,7 @@ const Home = () => {
             <button
               className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
               onClick={() => {
-                setCurrentPage("profile", { userName: checkedUser });
+                goTo(Profile, { username: checkedUser });
               }}
             >
               <HiUserCircle />
@@ -90,6 +91,7 @@ const Home = () => {
         </div>
       </main>
     </div>
+  </div>
   );
 };
 

src/pages/loading.tsx

@@ -1,6 +1,8 @@
 const Loading = () => (
     <div>
-      <p className="text-white">Loading...</p>
+      <div className="p-4 bg-slate-800">
+        <p className="text-white">Loading...</p>
+      </div>
     </div>
   );
 

src/pages/profile.tsx

@@ -1,13 +1,13 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { FaBrain, FaChevronLeft, FaRobot } from "react-icons/fa";
 import { RiLinkedinFill, RiLinkM, RiTwitterFill } from "react-icons/ri";
 import { AiOutlineReload } from "react-icons/ai";
 import { SiC, SiCplusplus, SiCsharp, SiGoland, SiJavascript, SiPhp, SiPython, SiReact, SiRuby, SiRust, SiTypescript } from "react-icons/si";
 import { DiJava } from "react-icons/di";
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
 import { getUserData, getUserPRData, getUserHighlightsData } from "../utils/fetchOpenSaucedApiData";
-import { RouteContext } from "../App";
 import { emojify } from "node-emoji";
+import { goBack } from "react-chrome-extension-router";
 
 const interestIcon = {
   python: <SiPython />,
@@ -28,15 +28,14 @@ const interestIcon = {
 
 type InterestIconKeys = keyof typeof interestIcon;
 
-export const Profile = () => {
-  const { page, setCurrentPage } = useContext(RouteContext);
+export const Profile = ({ username }: {username: string}) => {
   const [user, setUser] = useState<null | { id: string, user_name: string, bio: string, created_at: string, linkedin_url: string, twitter_username: string, blog: string, interests: string, open_issues: number }>(null);
   const [userPR, setUserPR] = useState<null | { meta: { itemCount: number } }>(null);
   const [userHighlights, setUserHighlights] = useState<null | { meta: { itemCount: number } }>(null);
 
   useEffect(() => {
     const fetchUserData = async () => {
-      const [userData, userPRData, userHighlightsData] = await Promise.all([getUserData(page.props.userName), getUserPRData(page.props.userName), getUserHighlightsData(page.props.userName)]);
+      const [userData, userPRData, userHighlightsData] = await Promise.all([getUserData(username), getUserPRData(username), getUserHighlightsData(username)]);
 
       setUser(userData);
       setUserPR(userPRData);
@@ -48,13 +47,14 @@ export const Profile = () => {
 
 
   return (
+  <div className="p-4 bg-slate-800">
     <div className="grid grid-cols-1 divide-y divider-y-center-2 min-w-[320px] text-white">
       <header className="flex justify-between">
         <div className="flex items-center gap-2">
           <button
             className="rounded-full p-2 bg-slate-700 hover:bg-slate-700/50"
             onClick={() => {
-              setCurrentPage("home");
+              goBack();
             }}
           >
             <FaChevronLeft className="text-osOrange" />
@@ -71,7 +71,7 @@ export const Profile = () => {
           className="hover:text-orange text-lg"
           title="Refresh user data"
           onClick={async () => {
-            const [userData, userPRData] = await Promise.all([getUserData(page.props.userName), getUserPRData(page.props.userName)]);
+            const [userData, userPRData] = await Promise.all([getUserData(username), getUserPRData(username)]);
 
             setUser(userData);
             setUserPR(userPRData);
@@ -85,19 +85,19 @@ export const Profile = () => {
         <div className="flex flex-col items-center gap-1 mb-4">
           <a
             className="flex flex-col items-center hover:text-orange hover:scale-105"
-            href={`https://insights.opensauced.pizza/user/${page.props.userName}`}
+            href={`https://insights.opensauced.pizza/user/${username}`}
             rel="noopener noreferrer"
             target="_blank"
           >
           <img
             alt="User avatar"
             className="rounded-full w-14 aspect-square p-1 bg-slate-700"
-            src={`https://github.com/${page.props.userName}.png`}
+            src={`https://github.com/${username}.png`}
           />
 
           <p className="font-medium">
             @
-{page.props.userName}
+{username}
           </p>
           </a>
 
@@ -198,5 +198,6 @@ export const Profile = () => {
         </div>
       </main>
     </div>
+  </div>
   );
 };