feat(explore): fleshed out area info

crystalcheong · Mar 2, 2023 · 1a1f17f · 1a1f17f
1 parent 0d39c4d
commit 1a1f17f
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 62 deletions.
diff --git a/src/components/Properties/SaveButton.tsx b/src/components/Properties/SaveButton.tsx
@@ -8,6 +8,7 @@ import {
 import { cleanNotifications, showNotification } from "@mantine/notifications";
 import { PropertyType, User } from "@prisma/client";
 import { useRouter } from "next/router";
+import { useState } from "react";
 import { IconBaseProps } from "react-icons";
 import { TbBookmark } from "react-icons/tb";
 
@@ -47,8 +48,8 @@ export const SaveButton = ({
   const useAccountSaveProperty = api.account.saveProperty.useMutation();
   const useAccountUnsaveProperty = api.account.unsaveProperty.useMutation();
 
-  const useAccountGetSaved = useAccountStore.use.getSavedListing();
-  const isSaved = !!useAccountGetSaved(listingId);
+  const useAccountGetSaved = useAccountStore.use.getSavedListing()(listingId);
+  const [isSaved, setIsSaved] = useState<boolean>(!!useAccountGetSaved);
 
   const handleOnToastClick = () => {
     if (!currentUser) return;
@@ -67,43 +68,45 @@ export const SaveButton = ({
     e.preventDefault();
 
     if (!currentUser) return;
+    setIsSaved(!isSaved);
+
+    const isRent: boolean = listing_type === ListingTypes[0];
+    const baseParams = {
+      userId: currentUser.id,
+      listingId,
+    };
+    const saveParams = {
+      ...baseParams,
+      listingType: isRent ? PropertyType.RENT : PropertyType.SALE,
+      clusterId,
+    };
+
+    const onSave = (data: SavedListing[]) => {
+      logger("SaveButton.tsx line 35", { data, savedListings });
+      useAccountStore.setState(() => ({ savedListings: data }));
+
+      if (!isSaved) {
+        showNotification({
+          onClick: handleOnToastClick,
+          icon: <TbBookmark />,
+          title: "Listing Saved!",
+          message: "Click to view your saved listings",
+        });
+      }
+    };
 
     if (!isSaved) {
-      const isRent: boolean = listing_type === ListingTypes[0];
-      useAccountSaveProperty.mutate(
-        {
-          userId: currentUser.id,
-          listingType: isRent ? PropertyType.RENT : PropertyType.SALE,
-          listingId,
-          clusterId,
+      useAccountSaveProperty.mutate(saveParams, {
+        onSuccess(data) {
+          onSave(data);
         },
-        {
-          onSuccess(data) {
-            logger("SaveButton.tsx line 35", { data, savedListings });
-            useAccountStore.setState(() => ({ savedListings: data }));
-
-            showNotification({
-              onClick: handleOnToastClick,
-              icon: <TbBookmark />,
-              title: "Listing Saved!",
-              message: "Click to view your saved listings",
-            });
-          },
-        }
-      );
+      });
     } else {
-      useAccountUnsaveProperty.mutate(
-        {
-          userId: currentUser.id,
-          listingId,
+      useAccountUnsaveProperty.mutate(baseParams, {
+        onSuccess(data) {
+          onSave(data);
         },
-        {
-          onSuccess(data) {
-            logger("SaveButton.tsx line 69", { data });
-            useAccountStore.setState(() => ({ savedListings: data }));
-          },
-        }
-      );
+      });
     }
   };
 

diff --git a/src/data/clients/ninetyNine.ts b/src/data/clients/ninetyNine.ts
@@ -25,18 +25,20 @@ export type ListingPhoto = {
   url: string;
 };
 
-export type Neighbourhood = {
-  categories: {
+export type AreaCategory = {
+  name: string;
+  key: string;
+  data: {
     name: string;
-    key: string;
-    data: {
-      name: string;
-      id: string;
-      station_options: Record<string, string>[];
-    }[];
+    id: string;
+    station_options: Record<string, string>[];
   }[];
 };
 
+export type Neighbourhood = {
+  categories: AreaCategory[];
+};
+
 export type ProjectLaunch = {
   development_id: string;
   name: string;

diff --git a/src/pages/explore/neighbourhoods/[name].tsx b/src/pages/explore/neighbourhoods/[name].tsx
@@ -1,13 +1,70 @@
-import { Badge, Box, Group, Title } from "@mantine/core";
+import { Accordion, Badge, Box, Group, Text, Title } from "@mantine/core";
 import { useRouter } from "next/router";
+import { IconType } from "react-icons";
+import {
+  TbBuildingBank,
+  TbBuildingHospital,
+  TbBuildingStore,
+  TbBus,
+  TbCash,
+  TbMail,
+  TbMailbox,
+  TbSchool,
+  TbShoppingCart,
+  TbTrain,
+  TbTrees,
+} from "react-icons/tb";
 
+import { AreaCategory } from "@/data/clients/ninetyNine";
 import { useNinetyNineStore } from "@/data/stores";
 
 import { Layout, Provider } from "@/components";
 
 import { api } from "@/utils/api";
 import { logger } from "@/utils/debug";
 
+const getCategoryIcon: Record<string, IconType> = {
+  subway_station: TbTrain,
+  bus_station: TbBus,
+  school_v2: TbSchool,
+  supermarket: TbShoppingCart,
+  shopping_mall: TbBuildingStore,
+  clinic: TbBuildingHospital,
+  bank: TbBuildingBank,
+  atm: TbCash,
+  post_office: TbMail,
+  post_box: TbMailbox,
+  park: TbTrees,
+};
+const getCategoryInfo = (categoryData: AreaCategory) => {
+  switch (categoryData.key) {
+    case "subway_station":
+      return (categoryData.data ?? []).map((data) => (
+        <Badge
+          key={data.id}
+          styles={{
+            root: {
+              background: data.station_options?.[0]?.background_color,
+              color: data.station_options?.[0]?.text_color,
+            },
+          }}
+        >
+          {data.name}
+        </Badge>
+      ));
+    case "shopping_mall":
+    case "park": {
+      return (categoryData.data ?? []).map((data) => (
+        <Box key={data.id}>{data.name}</Box>
+      ));
+    }
+    default:
+      return (categoryData.data ?? []).map((data) => (
+        <Box key={data.id}>{data.name}</Box>
+      ));
+  }
+};
+
 const Neighbourhood = () => {
   const router = useRouter();
   const { name } = router.query;
@@ -42,26 +99,38 @@ const Neighbourhood = () => {
             {paramName.replace(/-/g, " ")}
           </Title>
 
-          <Group>
-            {neighbourhoodData?.categories?.[0].name}:
-            <Group>
-              {(neighbourhoodData?.categories?.[0]?.data ?? []).map(
-                ({ id, name, station_options }) => (
-                  <Badge
-                    key={id}
-                    styles={{
-                      root: {
-                        background: station_options?.[0]?.background_color,
-                        color: station_options?.[0]?.text_color,
-                      },
-                    }}
+          <Box>
+            <Accordion
+              variant="separated"
+              defaultValue="subway_station"
+            >
+              {(neighbourhoodData?.categories ?? []).map((category) => {
+                const categoryInfo = getCategoryInfo(category);
+                const CategoryIcon = getCategoryIcon[category.key];
+
+                return (
+                  <Accordion.Item
+                    key={category.key}
+                    value={category.key}
                   >
-                    {name}
-                  </Badge>
-                )
-              )}
-            </Group>
-          </Group>
+                    <Accordion.Control icon={<CategoryIcon size={16} />}>
+                      <Group position="apart">
+                        <Text>{category.name}</Text>
+                        <Text
+                          size="sm"
+                          color="dimmed"
+                          weight={400}
+                        >
+                          {(category.data ?? []).length}
+                        </Text>
+                      </Group>
+                    </Accordion.Control>
+                    <Accordion.Panel>{categoryInfo}</Accordion.Panel>
+                  </Accordion.Item>
+                );
+              })}
+            </Accordion>
+          </Box>
         </Box>
       </Provider.RenderGuard>
     </Layout.Base>