From aed9eb8dd75764db3b2fe72890a2d4a6d4e3af22 Mon Sep 17 00:00:00 2001 From: Brandon Norsworthy Date: Fri, 30 Aug 2024 14:28:07 -0400 Subject: [PATCH 1/2] random quests are fetched and rendered to dev page --- src/App.tsx | 15 ++++++--- src/hocs/WithAuth/WithAuth.tsx | 10 ++---- src/hooks/useAuth.ts | 9 +++++- src/models/QuestModels/questResponse.ts | 6 ++++ src/pages/Dashboard/Dashboard.tsx | 1 + src/pages/DevPage.tsx | 43 +++++++++++++++++++++++++ src/pages/LandingPage/LandingPage.tsx | 5 ++- src/service/questService.ts | 14 ++++++++ 8 files changed, 87 insertions(+), 16 deletions(-) create mode 100644 src/models/QuestModels/questResponse.ts create mode 100644 src/pages/DevPage.tsx create mode 100644 src/service/questService.ts diff --git a/src/App.tsx b/src/App.tsx index ea5cd38..d640f02 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,14 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; - import LandingPage from './pages/LandingPage' -import AuthenticatedDashboard from './pages/Dashboard'; +import Dashboard from './pages/Dashboard'; +import DevPage from './pages/DevPage'; +import withAuth from './hocs/WithAuth'; import './App.css' +const AuthenticatedDashboard = withAuth(Dashboard); const queryClient = new QueryClient() function App() { @@ -16,13 +18,18 @@ function App() { - {/*public routes*/} + {/* public routes */} } /> - {/* protected routes*/} + + {/* protected routes */} } /> + } + /> diff --git a/src/hocs/WithAuth/WithAuth.tsx b/src/hocs/WithAuth/WithAuth.tsx index c800beb..8c077d5 100644 --- a/src/hocs/WithAuth/WithAuth.tsx +++ b/src/hocs/WithAuth/WithAuth.tsx @@ -1,21 +1,15 @@ import React, { useEffect, useState, ComponentType } from "react"; import { useNavigate } from "react-router-dom"; - -// eslint-disable-next-line @typescript-eslint/no-empty-object-type -type WithAuthProps = { - -}; - const withAuth =

(WrappedComponent: ComponentType

) => { - const ComponentWithAuth: React.FC

= (props) => { + const ComponentWithAuth: React.FC

= (props) => { const navigate = useNavigate(); const [isAuthenticated, setIsAuthenticated] = useState(false); useEffect(() => { const token = localStorage.getItem("token"); if (!token) { - navigate("/"); //maybe propmt them to login? + navigate("/"); //maybe propmt them to login? return; } diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts index e8c99d0..f5a8711 100644 --- a/src/hooks/useAuth.ts +++ b/src/hooks/useAuth.ts @@ -2,9 +2,16 @@ import { useState, useEffect } from "react"; const TOKEN_STORAGE_KEY = "token"; +interface User { + userId: number; + username: string; + role: string; + iat: number; +} + const useAuth = () => { const [accessToken, setAccessToken] = useState(null); - const [user, setUser] = useState(null); + const [user, setUser] = useState(null); useEffect(() => { const storedToken = localStorage.getItem(TOKEN_STORAGE_KEY); diff --git a/src/models/QuestModels/questResponse.ts b/src/models/QuestModels/questResponse.ts new file mode 100644 index 0000000..5a42d88 --- /dev/null +++ b/src/models/QuestModels/questResponse.ts @@ -0,0 +1,6 @@ +export interface Quest { + title: string, + description: string, + objectives: string[], + image_url: string, +} \ No newline at end of file diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx index 7e8c300..62d3965 100644 --- a/src/pages/Dashboard/Dashboard.tsx +++ b/src/pages/Dashboard/Dashboard.tsx @@ -17,4 +17,5 @@ const Dashboard: React.FC = () => { }; const AuthenticatedDashboard = withAuth(Dashboard); + export default AuthenticatedDashboard; \ No newline at end of file diff --git a/src/pages/DevPage.tsx b/src/pages/DevPage.tsx new file mode 100644 index 0000000..14882ef --- /dev/null +++ b/src/pages/DevPage.tsx @@ -0,0 +1,43 @@ +import useAuth from "@/hooks/useAuth" +import questService from "@/service/questService"; +import { useState } from "react"; + +import { Quest } from "../models/QuestModels/questResponse" + +const DevPage: React.FC = () => { + const { accessToken } = useAuth(); + const [currentQuest, setCurrentQuest] = useState(null); + + const handleGetRandomQuest = async () => { + if (!accessToken) return; + const randomQuestResponse = await questService.getRandomQuest(accessToken); + + setCurrentQuest(randomQuestResponse); + } + + console.log(currentQuest) + + return ( +

+ { + + } + { + currentQuest && +
+ {currentQuest.title} + {currentQuest.description} + { + currentQuest.objectives?.map((objective, index) => + {objective} + )} +
+ } +
+ ) +} + +export default DevPage \ No newline at end of file diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index baa3c17..d38ae61 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -1,9 +1,8 @@ import LoginPanel from "@/components/LoginPanel"; import SuggestionsPanel from "@/components/SuggestionsPanel/SuggestionsPanel"; - +import { Link } from "react-router-dom"; const LandingPage = () => { - return (
@@ -11,7 +10,7 @@ const LandingPage = () => {

Welcome to the resurected rust app

- + Dev hre
diff --git a/src/service/questService.ts b/src/service/questService.ts new file mode 100644 index 0000000..2a8717a --- /dev/null +++ b/src/service/questService.ts @@ -0,0 +1,14 @@ +import sendRequest from "@/lib/sendRequest"; +import { Quest } from "../models/QuestModels/questResponse" + +const basePath = '/quests'; + +export default { + getRandomQuest: async (accessToken: string) => { + return await sendRequest({ + method: 'GET', + endpoint: `${basePath}/random-quest?filters=pvp,raiding`, + accessToken + }) as Promise; + }, +} \ No newline at end of file From 666d7e3a8a777ce0d5307f0387b641a131a269bd Mon Sep 17 00:00:00 2001 From: Brandon Norsworthy Date: Sat, 31 Aug 2024 10:23:32 -0400 Subject: [PATCH 2/2] remove double hoc --- src/App.tsx | 4 +--- src/components/LoginPanel/LoginPanel.tsx | 2 +- src/pages/DevPage.tsx | 2 -- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d640f02..3a08722 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,11 +4,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import LandingPage from './pages/LandingPage' import Dashboard from './pages/Dashboard'; import DevPage from './pages/DevPage'; -import withAuth from './hocs/WithAuth'; import './App.css' -const AuthenticatedDashboard = withAuth(Dashboard); const queryClient = new QueryClient() function App() { @@ -24,7 +22,7 @@ function App() { {/* protected routes */} } + element={} /> { setOpen(false); } catch (error: unknown) { - console.log(error); + console.error(error); if (error instanceof AxiosError) { setError(error.response?.data.error || "An error occurred"); return; diff --git a/src/pages/DevPage.tsx b/src/pages/DevPage.tsx index 14882ef..450339b 100644 --- a/src/pages/DevPage.tsx +++ b/src/pages/DevPage.tsx @@ -15,8 +15,6 @@ const DevPage: React.FC = () => { setCurrentQuest(randomQuestResponse); } - console.log(currentQuest) - return (
{