Skip to content

Commit

Permalink
feat: drafted posted
Browse files Browse the repository at this point in the history
  • Loading branch information
crystalcheong committed Mar 30, 2023
1 parent a02a3d3 commit 77d784b
Show file tree
Hide file tree
Showing 9 changed files with 228 additions and 125 deletions.
94 changes: 21 additions & 73 deletions src/components/Layouts/Navbars/Base.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,17 @@ import {
import { useDisclosure } from "@mantine/hooks";
import Link from "next/link";
import { useRouter } from "next/router";
import { signOut, useSession } from "next-auth/react";
import { useSession } from "next-auth/react";
import { Fragment, useRef, useState } from "react";
import { IconType } from "react-icons";
import {
TbBookmarks,
TbBuildingSkyscraper,
TbBuildingWarehouse,
TbBuildingCommunity,
TbChevronDown,
TbChevronLeft,
TbChevronRight,
TbChevronUp,
TbLogout,
TbSettings,
} from "react-icons/tb";

import { ListingTypes } from "@/data/clients/ninetyNine";
import { AccountMenulist, NavRoutes } from "@/data/static";
import { SavedListing, useAccountStore } from "@/data/stores";

import AuthActions from "@/components/Layouts/AuthActions";
Expand All @@ -42,73 +37,11 @@ import UserButton from "@/components/Layouts/UserButton";
import Logo from "@/components/Logo";
import ThemeToggle from "@/components/ThemeToggle";

import { getInsertedArray } from "@/utils";
import { api } from "@/utils/api";
import { logger } from "@/utils/debug";
import { useIsMobile, useIsTablet } from "@/utils/dom";

export interface Route {
label: string;
href: string;
icon?: IconType;
description?: string;
}

const NavRoutes: (Route & {
nodes?: Route[];
})[] = [
{
label: "Home",
href: "/",
},
{
label: "Rent",
href: `/property/${ListingTypes[0]}`,
},
{
label: "Buy",
href: `/property/${ListingTypes[1]}`,
},
{
label: "Explore",
href: `#`,
nodes: [
{
icon: TbBuildingWarehouse,
label: "Neighbourhoods",
href: "/explore/neighbourhoods",
description: "Find a neighbourhood you'll love to live in",
},
{
icon: TbBuildingSkyscraper,
label: "New Launches",
href: "/explore/new-launches",
description: "Check out the latest projects launches to hit the market",
},
],
},
];

export const AccountMenulist: (Omit<Route, "href"> & {
href?: string;
onClick?: () => void;
})[] = [
{
label: "Saved listings",
icon: TbBookmarks,
href: `/account/saved`,
},
{
label: "Account settings",
icon: TbSettings,
href: `/account/update`,
},
{
label: "Logout",
icon: TbLogout,
onClick: () => signOut(),
},
];

export function HeaderMegaMenu() {
const router = useRouter();
const theme = useMantineTheme();
Expand All @@ -127,6 +60,21 @@ export function HeaderMegaMenu() {
const [linksOpened, setLinkOpened] = useState<string>("");

const currentUser = useAccountStore.use.currentUser();
const isAgentUser: boolean =
!!(currentUser?.propertyAgent ?? []).length ?? false;
const isVerifiedAgentUser: boolean =
isAgentUser && (currentUser?.propertyAgent?.[0]?.isVerified ?? false);

const agentMenuList: typeof AccountMenulist = isVerifiedAgentUser
? [
{
label: "Posted Listings",
icon: TbBuildingCommunity,
href: `/account/posted`,
},
]
: [];
const accountMenuList = getInsertedArray(AccountMenulist, 1, agentMenuList);

const drawerScrollTo = (position: "top" | "center" | "bottom" = "top") => {
if (!drawerViewport) return;
Expand Down Expand Up @@ -378,7 +326,7 @@ export function HeaderMegaMenu() {
</Menu.Target>

<Menu.Dropdown>
{AccountMenulist.map((item) => (
{accountMenuList.map((item) => (
<Menu.Item
key={`accMenu-${item.label}`}
component={Link}
Expand Down Expand Up @@ -521,7 +469,7 @@ export function HeaderMegaMenu() {
})}

{accDrawerOpened &&
AccountMenulist.map((item) => {
accountMenuList.map((item) => {
const isActiveRoute: boolean = router.asPath === item.href;
return (
<Button
Expand Down
45 changes: 31 additions & 14 deletions src/components/Layouts/UnknownState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,20 @@ import {
useMantineTheme,
} from "@mantine/core";
import { useRouter } from "next/router";
import React, { ReactNode, useEffect, useState } from "react";
import { ReactNode, useEffect, useState } from "react";
import { TbArrowNarrowLeft } from "react-icons/tb";

export function useRedirectAfterSomeSeconds(redirectTo = "", seconds = 5) {
export const useRedirectAfterSomeSeconds = (
redirectTo = "",
seconds = 5,
allowRedirect = true
) => {
const [secondsRemaining, setSecondsRemaining] = useState(seconds);
const router = useRouter();

useEffect(() => {
if (!allowRedirect) return;

if (secondsRemaining === 0) router.push("/");

const timer = setTimeout(() => {
Expand All @@ -25,16 +31,17 @@ export function useRedirectAfterSomeSeconds(redirectTo = "", seconds = 5) {
return () => {
clearInterval(timer);
};
}, [router, secondsRemaining, redirectTo]);
}, [router, secondsRemaining, redirectTo, allowRedirect]);

return { secondsRemaining };
}
};

interface Props extends BoxProps {
svgNode: ReactNode;
title: string | ReactNode;
subtitle: string | ReactNode;
hideBackButton?: boolean;
allowRedirect?: boolean;
}

const UnknownState = ({
Expand All @@ -43,11 +50,16 @@ const UnknownState = ({
subtitle,
children,
hideBackButton = false,
allowRedirect = true,
...rest
}: Props) => {
const router = useRouter();
const theme = useMantineTheme();
const { secondsRemaining } = useRedirectAfterSomeSeconds("/", 5);
const { secondsRemaining } = useRedirectAfterSomeSeconds(
"/",
5,
allowRedirect
);

return (
<Box
Expand Down Expand Up @@ -95,15 +107,20 @@ const UnknownState = ({
fw={500}
>
{subtitle}
<br />
Redirecting to homepage in
<Text
component="span"
variant="gradient"
fw={800}
>
&nbsp;{secondsRemaining} {secondsRemaining > 1 ? "seconds" : "second"}
</Text>
{allowRedirect && (
<>
<br />
Redirecting to homepage in
<Text
component="span"
variant="gradient"
fw={800}
>
&nbsp;{secondsRemaining}{" "}
{secondsRemaining > 1 ? "seconds" : "second"}
</Text>
</>
)}
.
</Text>

Expand Down
1 change: 1 addition & 0 deletions src/data/static/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from "./app";
export * from "./info";
export * from "./routes";
74 changes: 74 additions & 0 deletions src/data/static/routes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { signOut } from "next-auth/react";
import { IconType } from "react-icons";
import {
TbBookmarks,
TbBuildingSkyscraper,
TbBuildingWarehouse,
TbLogout,
TbSettings,
} from "react-icons/tb";

import { ListingTypes } from "@/data/clients/ninetyNine";

export interface Route {
label: string;
href: string;
icon?: IconType;
description?: string;
}

export const AccountMenulist: (Omit<Route, "href"> & {
href?: string;
onClick?: () => void;
})[] = [
{
label: "Saved listings",
icon: TbBookmarks,
href: `/account/saved`,
},
{
label: "Account settings",
icon: TbSettings,
href: `/account/update`,
},
{
label: "Logout",
icon: TbLogout,
onClick: () => signOut(),
},
];

export const NavRoutes: (Route & {
nodes?: Route[];
})[] = [
{
label: "Home",
href: "/",
},
{
label: "Rent",
href: `/property/${ListingTypes[0]}`,
},
{
label: "Buy",
href: `/property/${ListingTypes[1]}`,
},
{
label: "Explore",
href: `#`,
nodes: [
{
icon: TbBuildingWarehouse,
label: "Neighbourhoods",
href: "/explore/neighbourhoods",
description: "Find a neighbourhood you'll love to live in",
},
{
icon: TbBuildingSkyscraper,
label: "New Launches",
href: "/explore/new-launches",
description: "Check out the latest projects launches to hit the market",
},
],
},
];
7 changes: 6 additions & 1 deletion src/pages/account/[auth]/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
Alert,
Badge,
Box,
Button,
Checkbox,
Expand Down Expand Up @@ -429,7 +430,11 @@ const AccountAuthPage: NextPage<Props> = ({ providers }: Props) => {
<Checkbox
// hidden={!isAgent || !isNewUser}
hidden={!isNewUser}
label="Register as Agent"
label={
<>
Register as Agent&nbsp;<Badge size="xs">Preview</Badge>
</>
}
description={
<>
Get verified as a &nbsp;
Expand Down
68 changes: 68 additions & 0 deletions src/pages/account/posted.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { useMantineTheme } from "@mantine/core";
import { useRouter } from "next/router";
import { useSession } from "next-auth/react";
import { useEffect } from "react";

import { Layout, Property, Provider } from "@/components";
import BetaWarning from "@/components/Layouts/BetaWarning";
import UnknownState from "@/components/Layouts/UnknownState";

import { useIsTablet } from "@/utils";

import EmptyListing from "~/assets/images/empty-listing.svg";

const AgentPostedPage = () => {
const theme = useMantineTheme();
const isTablet = useIsTablet(theme);

const router = useRouter();
const { data: sessionData, status: sessionStatus } = useSession();
const isAuth = !!sessionData;
const isAuthLoading: boolean = sessionStatus === "loading";

//#endregion //*======== Pre-Render Checks ===========

useEffect(() => {
if (!isAuthLoading && !isAuth) {
router.replace("/account/signIn");
return;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuth, isAuthLoading]);

//#endregion //*======== Pre-Render Checks ===========

return (
<Layout.Base
layoutStylesOverwrite={{
display: "flex",
flexDirection: "column",
gap: "5vh",
}}
>
<BetaWarning />

<Provider.RenderGuard renderIf={isAuth}>
<Property.Grid
showViewMode={false}
title="Posted"
listings={[]}
// listings={allListings.get(type) ?? []}
// isLoading={isTypeLoading}
maxViewableCount={isTablet ? 4 : 3}
placeholderCount={isTablet ? 4 : 3}
emptyFallback={
<UnknownState
allowRedirect={false}
svgNode={<EmptyListing />}
title="No posted listings"
subtitle={<>Work in Progress</>}
/>
}
/>
</Provider.RenderGuard>
</Layout.Base>
);
};

export default AgentPostedPage;
Loading

0 comments on commit 77d784b

Please sign in to comment.