From 207f5d641371dba42ba81bb7279dcc779ec68d36 Mon Sep 17 00:00:00 2001 From: Crystal Cheong <65748007+crystalcheong@users.noreply.github.com> Date: Sun, 26 Feb 2023 23:18:53 +0800 Subject: [PATCH] feat: fallback listing state + offloaded nav placeholders --- public/assets/images/empty-listing.svg | 144 ++++++++++++++++++++++++ src/components/Layouts/Navbars/Base.tsx | 46 -------- src/components/Layouts/UnknownState.tsx | 31 ++++- src/pages/account/update.tsx | 40 ++++++- src/pages/property/[type]/[id].tsx | 10 ++ 5 files changed, 220 insertions(+), 51 deletions(-) create mode 100644 public/assets/images/empty-listing.svg diff --git a/public/assets/images/empty-listing.svg b/public/assets/images/empty-listing.svg new file mode 100644 index 0000000..b823896 --- /dev/null +++ b/public/assets/images/empty-listing.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Layouts/Navbars/Base.tsx b/src/components/Layouts/Navbars/Base.tsx index 3a25d26..36218e9 100644 --- a/src/components/Layouts/Navbars/Base.tsx +++ b/src/components/Layouts/Navbars/Base.tsx @@ -22,19 +22,13 @@ import { signOut, useSession } from "next-auth/react"; import { Fragment, useRef, useState } from "react"; import { IconType } from "react-icons"; import { - TbBook, TbBookmarks, TbBuildingWarehouse, - TbChartPie3, TbChevronDown, TbChevronLeft, TbChevronRight, TbChevronUp, - TbCoin, - TbFingerprint, TbLogout, - TbMessage, - TbNotification, TbSettings, } from "react-icons/tb"; @@ -83,42 +77,6 @@ const NavRoutes: (Route & { href: "/explore/neighbourhoods", description: "This Pokémon’s cry is very loud and distracting", }, - { - icon: TbCoin, - label: "Free for everyone", - href: "", - description: "The fluid of Smeargle’s tail secretions changes", - }, - { - icon: TbBook, - label: "Documentation", - href: "", - description: "Yanma is capable of seeing 360 degrees without", - }, - ], - }, - { - label: "Feature 2", - href: `#`, - nodes: [ - { - icon: TbFingerprint, - label: "Security", - href: "", - description: "The shell’s rounded shape and the grooves on its.", - }, - { - icon: TbChartPie3, - label: "Analytics", - href: "", - description: "This Pokémon uses its flying ability to quickly chase", - }, - { - icon: TbNotification, - label: "Notifications", - href: "", - description: "Combusken battles with the intensely hot flames it spews", - }, ], }, ]; @@ -132,10 +90,6 @@ export const AccountMenulist: (Omit & { icon: TbBookmarks, href: `/account/saved`, }, - { - label: "Your comments", - icon: TbMessage, - }, { label: "Account settings", icon: TbSettings, diff --git a/src/components/Layouts/UnknownState.tsx b/src/components/Layouts/UnknownState.tsx index 91b5dbc..82595b0 100644 --- a/src/components/Layouts/UnknownState.tsx +++ b/src/components/Layouts/UnknownState.tsx @@ -1,5 +1,14 @@ -import { Box, BoxProps, Text, Title } from "@mantine/core"; +import { + Box, + BoxProps, + Button, + Text, + Title, + useMantineTheme, +} from "@mantine/core"; +import { useRouter } from "next/router"; import React, { ReactNode } from "react"; +import { TbArrowNarrowLeft } from "react-icons/tb"; interface Props extends BoxProps { svgNode: ReactNode; @@ -14,9 +23,19 @@ const UnknownState = ({ children, ...rest }: Props) => { + const router = useRouter(); + const theme = useMantineTheme(); + return ( @@ -48,6 +66,7 @@ const UnknownState = ({ + {children} ); diff --git a/src/pages/account/update.tsx b/src/pages/account/update.tsx index c9e595b..ac8427e 100644 --- a/src/pages/account/update.tsx +++ b/src/pages/account/update.tsx @@ -1,11 +1,45 @@ -import React from "react"; +import { Title } from "@mantine/core"; +import { useRouter } from "next/router"; +import { useSession } from "next-auth/react"; +import { useEffect } from "react"; -import { Layout } from "@/components"; +import { useAccountStore } from "@/data/stores"; + +import { Layout, Provider } from "@/components"; +import BetaWarning from "@/components/Layouts/BetaWarning"; const AccountUpdatePage = () => { + const router = useRouter(); + const { data: sessionData } = useSession(); + const isAuth = !!sessionData; + + const currentUser = useAccountStore.use.currentUser(); + + //#endregion //*======== Pre-Render Checks =========== + useEffect(() => { + if (!isAuth) { + router.replace("/account/signIn"); + return; + } + }, [isAuth, router]); + + //#endregion //*======== Pre-Render Checks =========== + return ( -
AccountUpdatePage
+ + + + + Account Details + + ); }; diff --git a/src/pages/property/[type]/[id].tsx b/src/pages/property/[type]/[id].tsx index ef96fb5..8092095 100644 --- a/src/pages/property/[type]/[id].tsx +++ b/src/pages/property/[type]/[id].tsx @@ -24,6 +24,7 @@ import { Listing, ListingTypes } from "@/data/clients/ninetyNine"; import { useNinetyNineStore } from "@/data/stores"; import { Layout, Provider } from "@/components"; +import UnknownState from "@/components/Layouts/UnknownState"; import { EnquiryButtonGroup, PriceListingTypes, @@ -40,6 +41,8 @@ import { logger } from "@/utils/debug"; import { useIsMobile } from "@/utils/dom"; import { getLimitedArray } from "@/utils/helpers"; +import EmptyListing from "~/assets/images/empty-listing.svg"; + export const getServerSideProps: GetServerSideProps = async (context) => { const { id, type, clusterId } = context.query; @@ -167,6 +170,13 @@ const PropertyPage = ({ id, type, clusterId, isValidProperty }: Props) => { > } + title="Listing not found" + subtitle="Woops, the listing has vanished" + /> + } >