From 5e5df376ff76a3fcd9c3a769492f574ebb5f95cb Mon Sep 17 00:00:00 2001
From: RonanCraft <SuperRonanCraft@gmail.com>
Date: Wed, 22 May 2024 23:19:14 -0400
Subject: [PATCH] open vs get...

---
 package.json                      |  3 +-
 src/App.tsx                       | 14 ++++----
 src/api/{index.js => index.tsx}   |  8 +++--
 src/components/home/NavBar.tsx    | 17 +++++++---
 src/components/plugins/Plugin.tsx |  2 +-
 src/context/ThemeContext.tsx      |  6 +++-
 src/context/UserContext.tsx       | 53 +++++++++++++++++++++++++++++++
 7 files changed, 87 insertions(+), 16 deletions(-)
 rename src/api/{index.js => index.tsx} (65%)
 create mode 100644 src/context/UserContext.tsx

diff --git a/package.json b/package.json
index b3fb384..048c9bb 100644
--- a/package.json
+++ b/package.json
@@ -54,5 +54,6 @@
     "whitelist": [
       "API_URL"
     ]
-  }
+  },
+  "proxy": "http://localhost:3001"
 }
diff --git a/src/App.tsx b/src/App.tsx
index ec25d07..f177f4a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { Outlet } from "react-router-dom";
 import Nav from "./components/home/NavBar";
 import { ThemeProvider } from "./context/ThemeContext";
 import Footer from "./components/home/Footer";
+import UserProvider from "./context/UserContext";
 
 // const client = new ApolloClient({
 //   uri: "/graphql",
@@ -11,13 +12,14 @@ import Footer from "./components/home/Footer";
 // });
 
 function App() {
-  console.log("Welcome to RonanServices! Want to contribute?");
   return (
-    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-      <Nav />
-      <Outlet />
-      <Footer />
-    </ThemeProvider>
+    <UserProvider>
+      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <Nav />
+        <Outlet />
+        <Footer />
+      </ThemeProvider>
+    </UserProvider>
   );
 }
 
diff --git a/src/api/index.js b/src/api/index.tsx
similarity index 65%
rename from src/api/index.js
rename to src/api/index.tsx
index 5202816..273fbe9 100644
--- a/src/api/index.js
+++ b/src/api/index.tsx
@@ -5,13 +5,15 @@ const client = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
   responseType: "json",
   withCredentials: true,
-  crossdomain: true,
 });
 
 export default {
   async loginDiscord() {
     // const params = new URLSearchParams({ username, password });
-
-    return client.get(`/auth/discord`);
+    window.open(`${import.meta.env.VITE_API_URL}/auth/discord`);
+    // return client.get(`/auth/discord`);
+  },
+  async logout() {
+    client.post("/auth/logout");
   },
 };
diff --git a/src/components/home/NavBar.tsx b/src/components/home/NavBar.tsx
index f30b18d..66d566e 100644
--- a/src/components/home/NavBar.tsx
+++ b/src/components/home/NavBar.tsx
@@ -1,15 +1,24 @@
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { ModeToggle } from "../ModeToggle";
-import auth from "../../utils/auth";
 import { Button } from "../ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import { Menu } from "lucide-react";
 import { useEffect, useState } from "react";
 import NavItem from "./NavItem";
 import LoginDialog from "../dialogs/LoginDialog";
+import { useUserContext } from "@/context/UserContext";
+import api from "@/api";
 
 export default function Nav() {
   const [sheetOpen, setSheetOpen] = useState(false);
+  const { isLoggedIn, logout } = useUserContext();
+  const navigate = useNavigate();
+
+  const logoutHandler = async () => {
+    logout();
+    await api.logout();
+    navigate("/home");
+  };
 
   const location = useLocation();
   useEffect(() => {
@@ -62,10 +71,10 @@ export default function Nav() {
             <div className="flex-grow" />
             {/* Place Sign Up and Log In links to the right side */}
             <div className="flex gap-4 items-center font-medium">
-              {auth.loggedIn() ? (
+              {isLoggedIn() ? (
                 <>
                   <NavItem link={"/profile"} title={"Profile"} />
-                  <Button onClick={auth.logout}>Logout</Button>
+                  <Button onClick={logoutHandler}>Logout</Button>
                 </>
               ) : (
                 <LoginDialog />
diff --git a/src/components/plugins/Plugin.tsx b/src/components/plugins/Plugin.tsx
index c35619a..c69d775 100644
--- a/src/components/plugins/Plugin.tsx
+++ b/src/components/plugins/Plugin.tsx
@@ -12,7 +12,7 @@ import {
 } from "../ui/tooltip";
 
 export default function Plugin({ plugin }: { plugin: any }) {
-  console.log(plugin);
+  // console.log(plugin);
   return (
     <Card className="text-center">
       <CardTitle className="truncate mx-2 my-2">
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
index 882f6bf..8063a50 100644
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -12,6 +12,10 @@ export function ThemeProvider({
   defaultTheme = "system",
   storageKey = "vite-ui-theme",
   ...props
+}: {
+  children: any;
+  defaultTheme: string;
+  storageKey: string;
 }) {
   const [theme, setTheme] = useState(
     () => localStorage.getItem(storageKey) || defaultTheme
@@ -37,7 +41,7 @@ export function ThemeProvider({
 
   const value = {
     theme,
-    setTheme: (theme) => {
+    setTheme: (theme: any) => {
       localStorage.setItem(storageKey, theme);
       setTheme(theme);
     },
diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx
new file mode 100644
index 0000000..800b4e6
--- /dev/null
+++ b/src/context/UserContext.tsx
@@ -0,0 +1,53 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+const initialState = { user: null, isLoggedIn: () => false, logout: () => {} };
+
+const UserContext = createContext(initialState);
+
+export const useUserContext = () => {
+  return useContext(UserContext);
+};
+
+export default function UserProvider({ children }: { children: any }) {
+  const [user, setUser] = useState(null);
+
+  const isLoggedIn = () => {
+    return user !== null;
+  };
+
+  const logout = () => {
+    setUser(null);
+  };
+
+  useEffect(() => {
+    console.log("Welcome to RonanServices! Want to contribute?");
+    const getUser = () => {
+      fetch("http://localhost:3001/api/auth/login/success", {
+        method: "GET",
+        credentials: "include",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+          "Access-Control-Allow-Credentials": "true",
+        },
+      })
+        .then((response) => {
+          if (response.status === 200) return response.json();
+          throw new Error("authentication failed!");
+        })
+        .then((response) => {
+          setUser(response.user);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    };
+    getUser();
+  }, []);
+
+  return (
+    <UserContext.Provider value={{ user, isLoggedIn, logout }}>
+      {children}
+    </UserContext.Provider>
+  );
+}