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 (
-
-
-
-
-
+
+
+
+
+
+
+
);
}
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() {
{/* Place Sign Up and Log In links to the right side */}
- {auth.loggedIn() ? (
+ {isLoggedIn() ? (
<>
-
+
>
) : (
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 (
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 (
+
+ {children}
+
+ );
+}