From 9f722fd13c4525873425a101324b8f1b51087eb1 Mon Sep 17 00:00:00 2001
From: Brandon Norsworthy <brandonknorsworthy@gmail.com>
Date: Thu, 19 Sep 2024 20:52:27 -0500
Subject: [PATCH] fix overflows and final data rendering

---
 src/constants.ts                               | 2 ++
 src/modals/EditQuest/EditQuest.tsx             | 3 ++-
 src/modals/EditSuggestions/EditSuggestions.tsx | 3 ++-
 src/modals/ViewQuest/ViewQuest.tsx             | 3 ++-
 src/pages/AllQuestsPage.tsx                    | 2 +-
 src/pages/LandingPage.tsx                      | 2 +-
 src/pages/LoginPage.tsx                        | 2 +-
 src/pages/admin/AdminPage.tsx                  | 2 +-
 src/pages/admin/AdminQuestsPage.tsx            | 2 +-
 src/pages/admin/AdminSuggestionsPage.tsx       | 2 +-
 src/pages/admin/AdminUsersPage.tsx             | 2 +-
 11 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 src/constants.ts

diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..d14a17c
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,2 @@
+
+export const DEFAULT_IMG_URL = "https://questsandbox.s3.amazonaws.com/mission.png";
\ No newline at end of file
diff --git a/src/modals/EditQuest/EditQuest.tsx b/src/modals/EditQuest/EditQuest.tsx
index b2a2587..6769964 100644
--- a/src/modals/EditQuest/EditQuest.tsx
+++ b/src/modals/EditQuest/EditQuest.tsx
@@ -3,6 +3,7 @@ import Button from '../../components/Button';
 import { Category } from '@/models/CategoryModels/categoryResponse';
 import { Quest } from '@/models/QuestModels/questResponse';
 import { EditQuestRequest } from '@/models/QuestModels/questRequests';
+import { DEFAULT_IMG_URL } from '@/constants';
 
 interface ModalProps {
   onClose: () => void;
@@ -23,7 +24,7 @@ const EditQuest: React.FC<ModalProps> = (props) => {
 
   const [previewQuest, setPreviewQuest] = useState(true);
 
-  const [imageUrl] = useState(quest.image_url);
+  const [imageUrl] = useState(quest?.image_url || DEFAULT_IMG_URL);
   const [title, setTitle] = useState(quest.title);
   const [description, setDescription] = useState(quest.description);
   const [objectives, setObjectives] = useState<string[]>(quest.objectives);
diff --git a/src/modals/EditSuggestions/EditSuggestions.tsx b/src/modals/EditSuggestions/EditSuggestions.tsx
index a91ce44..a95d369 100644
--- a/src/modals/EditSuggestions/EditSuggestions.tsx
+++ b/src/modals/EditSuggestions/EditSuggestions.tsx
@@ -3,6 +3,7 @@ import Button from '../../components/Button';
 import { Suggestion } from '@/models/SuggestionModels/suggestionResponse';
 import { Category } from '@/models/CategoryModels/categoryResponse';
 import { convertSuggestionIntoQuestBodyRequest } from '@/models/SuggestionModels/suggestionRequests';
+import { DEFAULT_IMG_URL } from '@/constants';
 
 interface ModalProps {
   onClose: () => void;
@@ -22,7 +23,7 @@ const EditSuggestion: React.FC<ModalProps> = (props) => {
   } = props;
 
   const [previewQuest, setPreviewQuest] = useState(true);
-  const [imageUrl] = useState("https://questsandbox.s3.amazonaws.com/mission.png");
+  const [imageUrl] = useState(DEFAULT_IMG_URL);
   const [title, setTitle] = useState(suggestion.title);
   const [description, setDescription] = useState(suggestion.description);
   const [objectives, setObjectives] = useState<string[]>([]);
diff --git a/src/modals/ViewQuest/ViewQuest.tsx b/src/modals/ViewQuest/ViewQuest.tsx
index 1ac3069..841be2c 100644
--- a/src/modals/ViewQuest/ViewQuest.tsx
+++ b/src/modals/ViewQuest/ViewQuest.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Button from '../../components/Button';
 import { Quest } from '@/models/QuestModels/questResponse';
+import { DEFAULT_IMG_URL } from '@/constants';
 
 interface ModalProps {
   onClose: () => void;
@@ -23,7 +24,7 @@ const ViewQuest: React.FC<ModalProps> = (props) => {
   return (
     <>
       <img
-        src={image_url}
+        src={image_url ? image_url : DEFAULT_IMG_URL}
         alt="logo"
         className='w-full max-h-[16rem] object-cover'
       />
diff --git a/src/pages/AllQuestsPage.tsx b/src/pages/AllQuestsPage.tsx
index efdd4dd..a4fd56e 100644
--- a/src/pages/AllQuestsPage.tsx
+++ b/src/pages/AllQuestsPage.tsx
@@ -91,7 +91,7 @@ const AllQuestsPage: React.FC = () => {
   }
 
   return (
-    <main className="h-dvh w-dvw">
+    <main className="overflow-hidden h-dvh w-dvw">
       <div className="absolute h-dvh w-dvw overflow-hidden z-[-1] bg-secondary/50">
       </div>
 
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index c70e7bb..cf658e0 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -161,7 +161,7 @@ const LandingPage = () => {
   };
 
   return (
-    <main className="flex justify-center w-full h-screen overflow-hidden">
+    <main className="flex justify-center overflow-hidden h-dvh">
       <div className="flex flex-col xl:max-w-[86rem] items-start mt-1 w-full ml-2 text-5xl sm:mt-10 sm:ml-10 text-white/50">
         <img src={logoImg} alt="logo" className="h-36 md:h-32" />
 
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index f6d9278..f429829 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -13,7 +13,7 @@ const LoginPage: React.FC = () => {
   }
 
   return (
-    <main className="h-screen overflow-hidden">
+    <main className="overflow-hidden h-dvh w-dvw">
       <LoginPanel
         onLoginSuccess={() => navigate("/")}
         onRegistrationSuccess={() => navigate("/")}
diff --git a/src/pages/admin/AdminPage.tsx b/src/pages/admin/AdminPage.tsx
index 5533088..8771c4c 100644
--- a/src/pages/admin/AdminPage.tsx
+++ b/src/pages/admin/AdminPage.tsx
@@ -9,7 +9,7 @@ import withAuth from "@/hocs/withAuth";
 const AdminPage = () => {
   const navigate = useNavigate();
   return (
-    <main className="flex justify-center w-full h-screen overflow-hidden">
+    <main className="flex justify-center overflow-hidden h-dvh w-dvw">
       <div className="flex flex-col xl:max-w-[86rem] items-start mt-1 w-full ml-2 text-5xl sm:mt-10 sm:ml-10 text-white/50">
         <img src={logoImg} alt="logo" className="h-36 md:h-32" />
 
diff --git a/src/pages/admin/AdminQuestsPage.tsx b/src/pages/admin/AdminQuestsPage.tsx
index 2f0197e..7165a51 100644
--- a/src/pages/admin/AdminQuestsPage.tsx
+++ b/src/pages/admin/AdminQuestsPage.tsx
@@ -134,7 +134,7 @@ const AdminQuestsPage = () => {
   };
 
   return (
-    <main className="h-dvh w-dvw">
+    <main className="overflow-hidden h-dvh w-dvw">
       <div className="absolute h-dvh w-dvw overflow-hidden z-[-1] bg-secondary/50">
       </div>
 
diff --git a/src/pages/admin/AdminSuggestionsPage.tsx b/src/pages/admin/AdminSuggestionsPage.tsx
index f9697b0..71cd256 100644
--- a/src/pages/admin/AdminSuggestionsPage.tsx
+++ b/src/pages/admin/AdminSuggestionsPage.tsx
@@ -136,7 +136,7 @@ const AdminSuggestionsPage = () => {
   };
 
   return (
-    <main className="h-dvh w-dvw">
+    <main className="overflow-hidden h-dvh w-dvw">
       <div className="absolute h-dvh w-dvw overflow-hidden z-[-1] bg-secondary/50">
       </div>
 
diff --git a/src/pages/admin/AdminUsersPage.tsx b/src/pages/admin/AdminUsersPage.tsx
index d509a9d..21971e8 100644
--- a/src/pages/admin/AdminUsersPage.tsx
+++ b/src/pages/admin/AdminUsersPage.tsx
@@ -48,7 +48,7 @@ const AdminUsersPage = () => {
   }, [page, fetchUsers]);
 
   return (
-    <main className="h-dvh w-dvw">
+    <main className="overflow-hidden h-dvh w-dvw">
       <div className="absolute h-dvh w-dvw overflow-hidden z-[-1] bg-secondary/50">
       </div>