Merge pull request #34 from brandonnorsworthy/render-random-quests

random quests are fetched and rendered to dev page

Author: brandonnorsworthy

src/App.tsx

@@ -1,9 +1,9 @@
 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 './App.css'
 
@@ -16,12 +16,17 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <Router>
         <Routes>
-          {/*public routes*/}
+          {/* public routes */}
           <Route path="/" element={<LandingPage />} />
-          {/* protected routes*/}
+
+          {/* protected routes */}
           <Route
             path="/dashboard"
-            element={<AuthenticatedDashboard />}
+            element={<Dashboard />}
+          />
+          <Route
+            path="/dev"
+            element={<DevPage />}
           />
         </Routes>
       </Router>

src/components/LoginPanel/LoginPanel.tsx

@@ -57,7 +57,7 @@ const LoginPanel = () => {
       setOpen(false);
     }
     catch (error: unknown) {
-      console.log(error);
+      console.error(error);
       if (error instanceof AxiosError) {
         setError(error.response?.data.error || "An error occurred");
         return;

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 = <P extends object>(WrappedComponent: ComponentType<P>) => {
-  const ComponentWithAuth: React.FC<P & WithAuthProps> = (props) => {
+  const ComponentWithAuth: React.FC<P> = (props) => {
     const navigate = useNavigate();
     const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
 
     useEffect(() => {
       const token = localStorage.getItem("token");
       if (!token) {
-        navigate("/"); //maybe propmt them to login? 
+        navigate("/"); //maybe propmt them to login?
         return;
       }
 

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<string | null>(null);
-  const [user, setUser] = useState<unknown | null>(null);
+  const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
     const storedToken = localStorage.getItem(TOKEN_STORAGE_KEY);

src/models/QuestModels/questResponse.ts

@@ -0,0 +1,6 @@
+export interface Quest {
+  title: string,
+  description: string,
+  objectives: string[],
+  image_url: string,
+}

src/pages/Dashboard/Dashboard.tsx

@@ -17,4 +17,5 @@ const Dashboard: React.FC = () => {
 };
 
 const AuthenticatedDashboard = withAuth(Dashboard);
+
 export default AuthenticatedDashboard;

src/pages/DevPage.tsx

@@ -0,0 +1,41 @@
+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<Quest | null>(null);
+
+  const handleGetRandomQuest = async () => {
+    if (!accessToken) return;
+    const randomQuestResponse = await questService.getRandomQuest(accessToken);
+
+    setCurrentQuest(randomQuestResponse);
+  }
+
+  return (
+    <div>
+      {
+        <button
+          onClick={handleGetRandomQuest}>
+          Get Random Test
+        </button>
+      }
+      {
+        currentQuest &&
+        <div className="flex flex-col">
+          <span className="text-xlg">{currentQuest.title}</span>
+          <span className="text-lg">{currentQuest.description}</span>
+          {
+            currentQuest.objectives?.map((objective, index) =>
+              <span key={objective + index}>{objective}</span>
+            )}
+        </div>
+      }
+    </div>
+  )
+}
+
+export default DevPage

src/pages/LandingPage/LandingPage.tsx

@@ -1,17 +1,16 @@
 import LoginPanel from "@/components/LoginPanel";
 import SuggestionsPanel from "@/components/SuggestionsPanel/SuggestionsPanel";
-
+import { Link } from "react-router-dom";
 
 const LandingPage = () => {
-
   return (
     <div className="h-screen font-bold text-white bg-idk font-rust-like">
       <header className='flex justify-between p-4 text-3xl '>
         {/* logo? */}
         <h1 className='text-5xl'>
           Welcome to the resurected rust app
         </h1>
-
+        <Link to='/dev'>Dev hre</Link>
       </header>
       <main className="px-12 py-2">
         <div className="flex flex-col items-start gap-4 pl-32 text-4xl mt-60">

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<Quest>;
+  },
+}