feat: extension window navigation (#21)

* feat: extension window navigation

* remove unnecessary async fn

* remove redundant bool return

Co-authored-by: Anush <[email protected]>

---------

Co-authored-by: Anush <[email protected]>

manifest.json

@@ -9,5 +9,5 @@
       "matches": ["https://github.com/*"]
     }
   ],
-  "permissions": ["chrome"]
+  "permissions": ["storage"]
 }

src/App.tsx

@@ -1,45 +1,48 @@
-import { useState } from 'react'
-import logo from './logo.svg'
-import './App.css'
+import { useState, useEffect } from "react";
+
+import Start from "./pages/start";
+import SignIn from "./pages/signin";
+import Home from "./pages/home";
+import Loading from "./pages/loading";
+
+import { checkTokenValidity } from "./utils/fetchOpenSaucedApiData";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [osAccessToken, setOsAccessToken] = useState("");
+  // renderedPage can be either "start", "home", "signin" or "loading"
+  const [renderedPage, setRenderedPage] = useState("loading");
+
+  useEffect(() => {
+    chrome.storage.sync.get(["os-access-token"], (result) => {
+      if (result["os-access-token"]) {
+        checkTokenValidity(result["os-access-token"]).then((valid) => {
+          if (!valid) {
+            setOsAccessToken("");
+            setRenderedPage("signin");
+          } else {
+            setOsAccessToken(result["os-access-token"]);
+            setRenderedPage("home");
+          }
+        });
+      } else {
+        setRenderedPage("start");
+      }
+    });
+  }, []);
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Hello Vite + React!</p>
-        <p>
-          <button type="button" onClick={() => setCount((count) => count + 1)}>
-            count is: {count}
-          </button>
-        </p>
-        <p>
-          Edit <code>App.tsx</code> and save to test HMR updates.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          {' | '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
-          </a>
-        </p>
-      </header>
+    <div className="p-4">
+      {renderedPage === "start" ? (
+        <Start setRenderedPage={setRenderedPage} />
+      ) : renderedPage === "home" ? (
+        <Home osAccessToken={osAccessToken} setRenderedPage={setRenderedPage} />
+      ) : renderedPage === "signin" ? (
+        <SignIn setRenderedPage={setRenderedPage} />
+      ) : (
+        <Loading />
+      )}
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/index.css

@@ -1,16 +1,22 @@
 @tailwind components;
 @tailwind utilities;
 
+* {
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

src/pages/home.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+interface HomeProps {
+  osAccessToken: string;
+  setRenderedPage: (page: string) => void;
+}
+
+function Home({ osAccessToken, setRenderedPage }: HomeProps) {
+  return <div>Home</div>;
+}
+
+export default Home;

src/pages/loading.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Loading() {
+  return <div>Loading</div>;
+}
+
+export default Loading;

src/pages/signin.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+interface SignInProps {
+  setRenderedPage: (page: string) => void;
+}
+
+function SignIn({ setRenderedPage }: SignInProps) {
+  return <div>
+    <h1>Sign In</h1>
+    <p>Sign in with your PAT</p>
+    <input type="text" />
+    <button onClick={() => setRenderedPage("home")}>Sign In</button>
+  </div>;
+}
+
+export default SignIn;

src/pages/start.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+interface StartProps {
+  setRenderedPage: (page: string) => void;
+}
+
+function Start({ setRenderedPage }: StartProps) {
+  return (
+    <div>
+      <h1>OpenSauced</h1>
+      <p>Welcome Text</p>
+      <button onClick={() => setRenderedPage("signin")}>Get Started</button>
+    </div>
+  );
+}
+
+export default Start;

src/utils/fetchOpenSaucedApiData.ts

@@ -7,3 +7,14 @@ export const getOpenSaucedUser = async (username: string) => {
   }
   return await response.json();
 };
+
+export const checkTokenValidity = async (token: string) => {
+  const url = "https://api.opensauced.pizza/v1/auth/session";
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  return response.status === 200;
+};