From 8c8467f51f1b08d9a9fd51f612a52a7bf8491b29 Mon Sep 17 00:00:00 2001 From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com> Date: Sun, 17 Sep 2023 14:27:36 +0200 Subject: [PATCH] Using separated pages insteads of components --- components/quests/questCategory.tsx | 18 ++------ components/quests/questCategoryDetails.tsx | 54 ---------------------- components/quests/questDetails.tsx | 35 -------------- components/quests/screenLayout.tsx | 32 ------------- pages/categories/[category].tsx | 48 +++++++++++++++++++ pages/index.tsx | 2 +- styles/Home.module.css | 42 ----------------- styles/category.module.css | 15 ++++++ 8 files changed, 69 insertions(+), 177 deletions(-) delete mode 100644 components/quests/questCategoryDetails.tsx delete mode 100644 components/quests/questDetails.tsx delete mode 100644 components/quests/screenLayout.tsx create mode 100644 pages/categories/[category].tsx create mode 100644 styles/category.module.css diff --git a/components/quests/questCategory.tsx b/components/quests/questCategory.tsx index 3a482147..1fdfc35f 100644 --- a/components/quests/questCategory.tsx +++ b/components/quests/questCategory.tsx @@ -1,17 +1,15 @@ -import React, { FunctionComponent, useState } from "react"; +import React, { FunctionComponent } from "react"; import styles from "../../styles/Home.module.css"; -import QuestCategoryDetails from "./questCategoryDetails"; +import Link from "next/link"; type QuestCategoryProps = { category: QuestCategory; }; const QuestCategory: FunctionComponent = ({ category }) => { - const [showMenu, setShowMenu] = useState(false); - return ( - <> -
setShowMenu(true)}> + +

{category.name} Quest

@@ -20,13 +18,7 @@ const QuestCategory: FunctionComponent = ({ category }) => {

- {showMenu && ( - - )} - + ); }; diff --git a/components/quests/questCategoryDetails.tsx b/components/quests/questCategoryDetails.tsx deleted file mode 100644 index b1916dae..00000000 --- a/components/quests/questCategoryDetails.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { FunctionComponent, useEffect } from "react"; -import styles from "../../styles/Home.module.css"; -import { QuestDocument } from "../../types/backTypes"; -import ScreenLayout from "./screenLayout"; -import Quest from "./quest"; -import { useRouter } from "next/router"; - -type QuestCategoryDetailsProps = { - quests: QuestDocument[]; - setShowMenu: (showMenu: boolean) => void; -}; - -const QuestCategoryDetails: FunctionComponent = ({ - quests, - setShowMenu, -}) => { - const router = useRouter(); - - useEffect(() => { - const documentBody = document.querySelector("body"); - if (!documentBody) return; - // Mount - documentBody.style.overflow = "hidden"; - // Scroll to top - window.scrollTo(0, 0); - // Unmount - return () => { - documentBody.style.removeProperty("overflow"); - }; - }, []); - - return ( - setShowMenu(false)}> -

Onboarding quests

-
- {quests.map((quest) => ( - router.push(`/quest/${quest.id}`)} - imgSrc={quest.img_card} - issuer={{ - name: quest.issuer, - logoFavicon: quest.logo, - }} - reward={quest.rewards_title} - /> - ))} -
- - ); -}; - -export default QuestCategoryDetails; diff --git a/components/quests/questDetails.tsx b/components/quests/questDetails.tsx deleted file mode 100644 index 47e6023e..00000000 --- a/components/quests/questDetails.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { FunctionComponent, useEffect } from "react"; -import { QuestDocument } from "../../types/backTypes"; -import ScreenLayout from "./screenLayout"; -import QuestMenu from "./questMenu"; - -type QuestDetailsProps = { - quest: QuestDocument; - close: () => void; -}; - -const QuestDetails: FunctionComponent = ({ - quest, - close, -}) => { - useEffect(() => { - const documentBody = document.querySelector("body"); - if (!documentBody) return; - // Mount - documentBody.style.overflow = "hidden"; - // Scroll to top - window.scrollTo(0, 0); - // Unmount - return () => { - documentBody.style.removeProperty("overflow"); - }; - }, []); - - return ( - - - - ); -}; - -export default QuestDetails; diff --git a/components/quests/screenLayout.tsx b/components/quests/screenLayout.tsx deleted file mode 100644 index 7ed01686..00000000 --- a/components/quests/screenLayout.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import styles from "../../styles/Home.module.css"; -import React, { FunctionComponent, ReactNode } from "react"; -import BackButton from "../UI/backButton"; -import Footer from "../UI/footer"; -import Blur from "../shapes/blur"; - -type ScreenLayoutProps = { - children: ReactNode; - close: () => void; -}; - -const ScreenLayout: FunctionComponent = ({ - children, - close, -}) => { - return ( -
-
- -
-
- close()} /> -
-
{children}
-
-
-
-
- ); -}; - -export default ScreenLayout; diff --git a/pages/categories/[category].tsx b/pages/categories/[category].tsx new file mode 100644 index 00000000..a2045af1 --- /dev/null +++ b/pages/categories/[category].tsx @@ -0,0 +1,48 @@ +import { NextPage } from "next"; +import React, { useContext, useEffect, useState } from "react"; +import { useRouter } from "next/router"; +import { QuestsContext } from "../../context/QuestsProvider"; +import styles from "../../styles/category.module.css"; +import homeStyles from "../../styles/Home.module.css"; +import Quest from "../../components/quests/quest"; +import BackButton from "../../components/UI/backButton"; + +const CategoriesPage: NextPage = () => { + const router = useRouter(); + const { category: categoryName } = router.query; + const { categories } = useContext(QuestsContext); + + const [category, setCategory] = useState(); + + useEffect(() => { + if (!categoryName) return; + setCategory(categories.find((cat) => cat.name === categoryName)); + }, [categories, categoryName]); + + return ( +
+
+ router.back()} /> +
+

Onboarding quests

+
+ {category && + category.quests.map((quest, index) => ( + router.push(`/quest/${quest.id}`)} + imgSrc={quest.img_card} + issuer={{ + name: quest.issuer, + logoFavicon: quest.logo, + }} + reward={quest.rewards_title} + /> + ))} +
+
+ ); +}; + +export default CategoriesPage; diff --git a/pages/index.tsx b/pages/index.tsx index 622862b7..7a58f909 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -13,7 +13,7 @@ import { QuestsContext } from "../context/QuestsProvider"; const Quests: NextPage = () => { const router = useRouter(); - const { quests, featuredQuest, categories, trendingQuests } = + const { featuredQuest, categories, trendingQuests } = useContext(QuestsContext); return ( diff --git a/styles/Home.module.css b/styles/Home.module.css index c91d5292..4a97e990 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -111,52 +111,10 @@ z-index: -1; } -.categoryDetails { - position: fixed; - left: 0; - top: 0; - bottom: 0; - background-color: var(--background); - z-index: 10; - width: 100%; - padding-top: calc(12vh + 2em); - overflow-y: auto; - overflow-x: hidden; -} - -.categoryDetails .content { - width: 100%; - min-height: calc(100% - 13vh - 4em); - max-width: calc(100% - 126px); - display: block; - margin: 0 auto; - padding: 25px; -} - -.categoryDetails .footer { - width: 100%; -} - .backButton { margin-left: 63px; } -.categoryDetails .blur { - position: absolute; - left: 0; - top: 0; - z-index: -1; -} - -.categoryDetails .questList { - display: flex; - gap: 1rem; - margin-top: 2rem; - flex-wrap: wrap; - display: flex; - justify-content: center; -} - .controls { display: none; gap: 1rem; diff --git a/styles/category.module.css b/styles/category.module.css new file mode 100644 index 00000000..4e4ff350 --- /dev/null +++ b/styles/category.module.css @@ -0,0 +1,15 @@ +.questList { + display: flex; + gap: 1rem; + margin-top: 2rem; + flex-wrap: wrap; + display: flex; + justify-content: center; +} + +.blur { + position: absolute; + left: 0; + top: 0; + z-index: -1; +}