From 30caff5dfd23bb74ca4ae146a671e4b7f1a05230 Mon Sep 17 00:00:00 2001 From: Zhi Date: Sat, 11 Mar 2023 22:45:32 +0800 Subject: [PATCH 1/3] feature/Page-Logic --- client/components/footer/StickyFooter.tsx | 39 ++++++++++++-------- client/pages/HomePickupPage.tsx | 9 +++++ client/pages/InstructionsPage.tsx | 9 +++++ client/pages/MapPage.tsx | 9 +++++ client/pages/index.tsx | 43 +++++++++++++++++------ 5 files changed, 84 insertions(+), 25 deletions(-) create mode 100644 client/pages/HomePickupPage.tsx create mode 100644 client/pages/InstructionsPage.tsx create mode 100644 client/pages/MapPage.tsx diff --git a/client/components/footer/StickyFooter.tsx b/client/components/footer/StickyFooter.tsx index bab9e87..48818f9 100644 --- a/client/components/footer/StickyFooter.tsx +++ b/client/components/footer/StickyFooter.tsx @@ -5,9 +5,10 @@ import { COLORS } from "theme"; type Props = { disabled: boolean; + setPage: (pageNumber: number) => void; }; -export const StickyFooter = forwardRef(({ disabled }, ref) => { +export const StickyFooter = forwardRef(({ disabled, setPage }, ref) => { const isMobile = useBreakpointValue({ base: true, md: false }); return ( (({ disabled }, ref height={"18rem"} width={"12rem"} blockSize={"auto"} - label={ + label={ +
- Learn how to decontaminate and recycle properly. - This will help reduce contamination in blue bins! - } + Learn how to decontaminate and recycle properly. This will + help reduce contamination in blue bins! + + } color="black" - placement="top"> + placement="top" + > Recommended! @@ -53,12 +58,15 @@ export const StickyFooter = forwardRef(({ disabled }, ref - + @@ -66,13 +74,14 @@ export const StickyFooter = forwardRef(({ disabled }, ref - setPage(3)} > I prefer someone to collect from me - + diff --git a/client/pages/HomePickupPage.tsx b/client/pages/HomePickupPage.tsx new file mode 100644 index 0000000..3eadd7a --- /dev/null +++ b/client/pages/HomePickupPage.tsx @@ -0,0 +1,9 @@ +import { Flex, Text } from "@chakra-ui/react"; + +export const HomePickupPage = () => { + return ( + + Home Pickup Page + + ); +}; diff --git a/client/pages/InstructionsPage.tsx b/client/pages/InstructionsPage.tsx new file mode 100644 index 0000000..102f5d2 --- /dev/null +++ b/client/pages/InstructionsPage.tsx @@ -0,0 +1,9 @@ +import { Flex, Text } from "@chakra-ui/react"; + +export const InstructionsPage = () => { + return ( + + Instructions + + ); +}; diff --git a/client/pages/MapPage.tsx b/client/pages/MapPage.tsx new file mode 100644 index 0000000..3770f94 --- /dev/null +++ b/client/pages/MapPage.tsx @@ -0,0 +1,9 @@ +import { Flex, Text } from "@chakra-ui/react"; + +export const MapPage = () => { + return ( + + Map Page + + ); +}; diff --git a/client/pages/index.tsx b/client/pages/index.tsx index 2453066..657f9d6 100644 --- a/client/pages/index.tsx +++ b/client/pages/index.tsx @@ -8,10 +8,14 @@ import { useWindowDimensions } from "hooks/useWindowDimensions"; import { BasePage } from "layouts/BasePage"; import type { NextPage } from "next"; import { useEffect, useRef, useState } from "react"; +import { InstructionsPage } from "./InstructionsPage"; +import { MapPage } from "./MapPage"; +import { HomePickupPage } from "./HomePickupPage"; const Home: NextPage = () => { const [stickyHeight, setStickyHeight] = useState(0); const [readyToSubmit, setReadyToSubmit] = useState(false); + const [page, setPage] = useState(0); const { height } = useWindowDimensions(); const { isLoaded } = useSheetyData(); @@ -37,17 +41,36 @@ const Home: NextPage = () => { height={height - stickyHeight - NAVBAR_HEIGHT} ref={scrollableContainerRef} > - - - {isLoaded && ( - - )} - + {page === 0 && ( + + + {isLoaded && ( + + )} + + )} + {page === 1 && ( + + + + )} + {page === 2 && ( + + + + )} + {page === 3 && ( + + + + )} - + {page === 0 && ( + + )} ); From 7a64d2348618094bf275134da943ca22aece278a Mon Sep 17 00:00:00 2001 From: Zhi Date: Wed, 22 Mar 2023 22:30:04 +0800 Subject: [PATCH 2/3] change/moved-files --- client/{pages => pageFiles}/HomePickupPage.tsx | 0 client/{pages => pageFiles}/InstructionsPage.tsx | 0 client/{pages => pageFiles}/MapPage.tsx | 0 client/pages/index.tsx | 6 +++--- 4 files changed, 3 insertions(+), 3 deletions(-) rename client/{pages => pageFiles}/HomePickupPage.tsx (100%) rename client/{pages => pageFiles}/InstructionsPage.tsx (100%) rename client/{pages => pageFiles}/MapPage.tsx (100%) diff --git a/client/pages/HomePickupPage.tsx b/client/pageFiles/HomePickupPage.tsx similarity index 100% rename from client/pages/HomePickupPage.tsx rename to client/pageFiles/HomePickupPage.tsx diff --git a/client/pages/InstructionsPage.tsx b/client/pageFiles/InstructionsPage.tsx similarity index 100% rename from client/pages/InstructionsPage.tsx rename to client/pageFiles/InstructionsPage.tsx diff --git a/client/pages/MapPage.tsx b/client/pageFiles/MapPage.tsx similarity index 100% rename from client/pages/MapPage.tsx rename to client/pageFiles/MapPage.tsx diff --git a/client/pages/index.tsx b/client/pages/index.tsx index 657f9d6..8d74dc2 100644 --- a/client/pages/index.tsx +++ b/client/pages/index.tsx @@ -8,9 +8,9 @@ import { useWindowDimensions } from "hooks/useWindowDimensions"; import { BasePage } from "layouts/BasePage"; import type { NextPage } from "next"; import { useEffect, useRef, useState } from "react"; -import { InstructionsPage } from "./InstructionsPage"; -import { MapPage } from "./MapPage"; -import { HomePickupPage } from "./HomePickupPage"; +import { InstructionsPage } from "../pageFiles/InstructionsPage"; +import { MapPage } from "../pageFiles/MapPage"; +import { HomePickupPage } from "../pageFiles/HomePickupPage"; const Home: NextPage = () => { const [stickyHeight, setStickyHeight] = useState(0); From d3ca63cd894c7477dd7867827a87b4f3e62a2bff Mon Sep 17 00:00:00 2001 From: ryhuz Date: Sun, 26 Mar 2023 20:03:04 +0800 Subject: [PATCH 3/3] refactor spa to use enums and basepage for each page --- client/components/footer/StickyFooter.tsx | 11 ++- client/pageFiles/HomePickupPage.tsx | 9 -- client/pageFiles/InstructionsPage.tsx | 9 -- client/pageFiles/MapPage.tsx | 9 -- client/pages/index.tsx | 92 ++++--------------- client/spa-pages/components/HomePage.tsx | 58 ++++++++++++ .../spa-pages/components/HomePickupPage.tsx | 12 +++ .../spa-pages/components/InstructionsPage.tsx | 12 +++ client/spa-pages/components/MapPage.tsx | 12 +++ client/spa-pages/index.ts | 4 + client/spa-pages/pageEnums.ts | 6 ++ 11 files changed, 130 insertions(+), 104 deletions(-) delete mode 100644 client/pageFiles/HomePickupPage.tsx delete mode 100644 client/pageFiles/InstructionsPage.tsx delete mode 100644 client/pageFiles/MapPage.tsx create mode 100644 client/spa-pages/components/HomePage.tsx create mode 100644 client/spa-pages/components/HomePickupPage.tsx create mode 100644 client/spa-pages/components/InstructionsPage.tsx create mode 100644 client/spa-pages/components/MapPage.tsx create mode 100644 client/spa-pages/index.ts create mode 100644 client/spa-pages/pageEnums.ts diff --git a/client/components/footer/StickyFooter.tsx b/client/components/footer/StickyFooter.tsx index 48818f9..a83625c 100644 --- a/client/components/footer/StickyFooter.tsx +++ b/client/components/footer/StickyFooter.tsx @@ -1,6 +1,7 @@ import { QuestionIcon, QuestionOutlineIcon } from "@chakra-ui/icons"; import { Button, Container, Flex, Link, Text, Tooltip, useBreakpointValue } from "@chakra-ui/react"; import { forwardRef } from "react"; +import { Pages } from "spa-pages/pageEnums"; import { COLORS } from "theme"; type Props = { @@ -58,7 +59,7 @@ export const StickyFooter = forwardRef(({ disabled, setPa - @@ -74,14 +75,14 @@ export const StickyFooter = forwardRef(({ disabled, setPa - setPage(3)} + onClick={() => setPage(Pages.HOMEPICKUP)} > I prefer someone to collect from me - + diff --git a/client/pageFiles/HomePickupPage.tsx b/client/pageFiles/HomePickupPage.tsx deleted file mode 100644 index 3eadd7a..0000000 --- a/client/pageFiles/HomePickupPage.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Flex, Text } from "@chakra-ui/react"; - -export const HomePickupPage = () => { - return ( - - Home Pickup Page - - ); -}; diff --git a/client/pageFiles/InstructionsPage.tsx b/client/pageFiles/InstructionsPage.tsx deleted file mode 100644 index 102f5d2..0000000 --- a/client/pageFiles/InstructionsPage.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Flex, Text } from "@chakra-ui/react"; - -export const InstructionsPage = () => { - return ( - - Instructions - - ); -}; diff --git a/client/pageFiles/MapPage.tsx b/client/pageFiles/MapPage.tsx deleted file mode 100644 index 3770f94..0000000 --- a/client/pageFiles/MapPage.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { Flex, Text } from "@chakra-ui/react"; - -export const MapPage = () => { - return ( - - Map Page - - ); -}; diff --git a/client/pages/index.tsx b/client/pages/index.tsx index 8d74dc2..0d915e5 100644 --- a/client/pages/index.tsx +++ b/client/pages/index.tsx @@ -1,79 +1,27 @@ -import { Container, VStack } from "@chakra-ui/react"; -import { StickyFooter } from "components/footer/StickyFooter"; -import { Banner, UserInput } from "components/home"; -import styles from "components/home/hideScrollbar.module.css"; -import { NAVBAR_HEIGHT } from "components/nav/NavHeader"; -import { useSheetyData } from "hooks/useRecyclableItemList"; -import { useWindowDimensions } from "hooks/useWindowDimensions"; -import { BasePage } from "layouts/BasePage"; import type { NextPage } from "next"; -import { useEffect, useRef, useState } from "react"; -import { InstructionsPage } from "../pageFiles/InstructionsPage"; -import { MapPage } from "../pageFiles/MapPage"; -import { HomePickupPage } from "../pageFiles/HomePickupPage"; +import { useState } from "react"; +import { HomePage, HomePickupPage, InstructionsPage, MapPage } from "spa-pages"; +import { Pages } from "spa-pages/pageEnums"; const Home: NextPage = () => { - const [stickyHeight, setStickyHeight] = useState(0); - const [readyToSubmit, setReadyToSubmit] = useState(false); - const [page, setPage] = useState(0); - const { height } = useWindowDimensions(); - const { isLoaded } = useSheetyData(); + const [page, setPage] = useState(Pages.HOME); - const stickyRef = useRef(null); - const scrollableContainerRef = useRef(null); - - useEffect(() => { - setStickyHeight(stickyRef.current?.clientHeight || 0); - }, [stickyRef.current?.clientHeight, height]); - - return ( - - - - {page === 0 && ( - - - {isLoaded && ( - - )} - - )} - {page === 1 && ( - - - - )} - {page === 2 && ( - - - - )} - {page === 3 && ( - - - - )} - - {page === 0 && ( - - )} - - - ); + let PageComponent: JSX.Element; + switch (page) { + case Pages.HOME: + PageComponent = ; + break; + case Pages.HOMEPICKUP: + PageComponent = ; + break; + case Pages.INSTRUCTIONS: + PageComponent = ; + break; + case Pages.MAP: + PageComponent = ; + break; + } + return PageComponent; }; export default Home; diff --git a/client/spa-pages/components/HomePage.tsx b/client/spa-pages/components/HomePage.tsx new file mode 100644 index 0000000..95e50eb --- /dev/null +++ b/client/spa-pages/components/HomePage.tsx @@ -0,0 +1,58 @@ +import { Container, VStack } from "@chakra-ui/react"; +import { StickyFooter } from "components/footer/StickyFooter"; +import { Banner, UserInput } from "components/home"; +import styles from "components/home/hideScrollbar.module.css"; +import { NAVBAR_HEIGHT } from "components/nav/NavHeader"; +import { useSheetyData } from "hooks/useRecyclableItemList"; +import { useWindowDimensions } from "hooks/useWindowDimensions"; +import { BasePage } from "layouts/BasePage"; +import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react"; +import { Pages } from "spa-pages/pageEnums"; + +type Props = { + setPage: Dispatch>; +}; +export const HomePage = ({ setPage }: Props) => { + const [stickyHeight, setStickyHeight] = useState(0); + const [readyToSubmit, setReadyToSubmit] = useState(false); + + const { height } = useWindowDimensions(); + const { isLoaded } = useSheetyData(); + + const stickyRef = useRef(null); + const scrollableContainerRef = useRef(null); + + useEffect(() => { + setStickyHeight(stickyRef.current?.clientHeight || 0); + }, [stickyRef.current?.clientHeight, height]); + + return ( + + + + + + {isLoaded && ( + + )} + + + + + + ); +}; diff --git a/client/spa-pages/components/HomePickupPage.tsx b/client/spa-pages/components/HomePickupPage.tsx new file mode 100644 index 0000000..8fac761 --- /dev/null +++ b/client/spa-pages/components/HomePickupPage.tsx @@ -0,0 +1,12 @@ +import { Flex, Text } from "@chakra-ui/react"; +import { BasePage } from "layouts/BasePage"; + +export const HomePickupPage = () => { + return ( + + + Home Pickup Page + + + ); +}; diff --git a/client/spa-pages/components/InstructionsPage.tsx b/client/spa-pages/components/InstructionsPage.tsx new file mode 100644 index 0000000..fdfd573 --- /dev/null +++ b/client/spa-pages/components/InstructionsPage.tsx @@ -0,0 +1,12 @@ +import { Flex, Text } from "@chakra-ui/react"; +import { BasePage } from "layouts/BasePage"; + +export const InstructionsPage = () => { + return ( + + + Instructions + + + ); +}; diff --git a/client/spa-pages/components/MapPage.tsx b/client/spa-pages/components/MapPage.tsx new file mode 100644 index 0000000..7c516f4 --- /dev/null +++ b/client/spa-pages/components/MapPage.tsx @@ -0,0 +1,12 @@ +import { Flex, Text } from "@chakra-ui/react"; +import { BasePage } from "layouts/BasePage"; + +export const MapPage = () => { + return ( + + + Map Page + + + ); +}; diff --git a/client/spa-pages/index.ts b/client/spa-pages/index.ts new file mode 100644 index 0000000..eb61a7b --- /dev/null +++ b/client/spa-pages/index.ts @@ -0,0 +1,4 @@ +export * from "./components/HomePage"; +export * from "./components/HomePickupPage"; +export * from "./components/InstructionsPage"; +export * from "./components/MapPage"; diff --git a/client/spa-pages/pageEnums.ts b/client/spa-pages/pageEnums.ts new file mode 100644 index 0000000..2a7ba66 --- /dev/null +++ b/client/spa-pages/pageEnums.ts @@ -0,0 +1,6 @@ +export enum Pages { + HOME, + HOMEPICKUP, + INSTRUCTIONS, + MAP, +}