feat(POI): 🗃️ add status to poi data

CAMPUS-NYCU · Oct 12, 2023 · 9ffbdef · 9ffbdef
1 parent 1bd1c0b
commit 9ffbdef
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 34 deletions.
diff --git a/src/components/Drawer/AddReportDrawer/AddReportDrawerContent.tsx b/src/components/Drawer/AddReportDrawer/AddReportDrawerContent.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Image, Input } from "@nextui-org/react";
+import { Button, Image, Input, Select, SelectItem } from "@nextui-org/react";
 
+import { poiStatus, poiStatusMessageKeys } from "../../../constants/model/poi";
+import { PoiStatus } from "../../../models/poi";
 import { IRootState } from "../../../store";
 import {
   ReportData,
@@ -11,6 +13,38 @@ import {
 } from "../../../store/report";
 import { maps } from "../../../utils/googleMaps";
 
+const StatusSelect: React.FC = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useDispatch();
+  const reportData = useSelector((state: IRootState) => state.report.data);
+  const status = reportData.status;
+
+  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    if (e.target.value) {
+      dispatch(updateAddReportData({ status: e.target.value as PoiStatus }));
+    }
+  };
+
+  return (
+    <Select
+      label={t("addReport.content.select.setStatus.label", {
+        ns: ["drawer"],
+      })}
+      selectedKeys={new Set([status])}
+      onChange={handleSelectChange}
+    >
+      {Object.keys(poiStatus).map((s) => (
+        <SelectItem key={s} value={s}>
+          {t(poiStatusMessageKeys[s] || "", {
+            ns: ["drawer"],
+          })}
+        </SelectItem>
+      ))}
+    </Select>
+  );
+};
+
 const AddReportDrawerContentPhotos: React.FC = () => {
   const dispatch = useDispatch();
   const reportMedia = useSelector((state: IRootState) => state.report.media);
@@ -45,7 +79,7 @@ const AddReportDrawerContent: React.FC = () => {
   const dispatch = useDispatch();
   const reportData = useSelector((state: IRootState) => state.report.data);
 
-  const handleUpdataData = (key: keyof ReportData) => {
+  const handleUpdateData = (key: keyof ReportData) => {
     const oldValue = reportData[key];
     return (value: typeof oldValue) => {
       dispatch(updateAddReportData({ [key]: value }));
@@ -58,7 +92,7 @@ const AddReportDrawerContent: React.FC = () => {
       throw new Error("LatLng not found");
     }
 
-    const updateLatLng = handleUpdataData("latlng");
+    const updateLatLng = handleUpdateData("latlng");
     const newLagLng = { latitude: center.lat(), longitude: center.lng() };
     updateLatLng(newLagLng);
   };
@@ -68,40 +102,35 @@ const AddReportDrawerContent: React.FC = () => {
       <Input
         autoFocus
         label={t("addReport.content.inputs.name.label", { ns: ["drawer"] })}
-        placeholder={t("addReport.content.inputs.name.placeholder", {
-          ns: ["drawer"],
-        })}
         autoComplete="text"
         value={reportData.name || ""}
         isInvalid={!reportData.name}
-        onValueChange={handleUpdataData("name")}
+        onValueChange={handleUpdateData("name")}
         variant="bordered"
       />
       <Input
         label={t("addReport.content.inputs.description.label", {
           ns: ["drawer"],
         })}
-        placeholder={t("addReport.content.inputs.description.placeholder", {
-          ns: ["drawer"],
-        })}
         autoComplete="text"
         value={reportData.description || ""}
         isInvalid={!reportData.description}
-        onValueChange={handleUpdataData("description")}
+        onValueChange={handleUpdateData("description")}
         variant="bordered"
       />
       <div className="flex justify-between items-center">
         <h1>
-          {t("addReport.content.textWithButton.setLocation.text", {
+          {t("addReport.content.text.setLocation", {
             ns: ["drawer"],
           })}
         </h1>
         <Button onClick={handleSetLatLng}>
-          {t("addReport.content.textWithButton.setLocation.button", {
+          {t("addReport.content.button.setLocation", {
             ns: ["drawer"],
           })}
         </Button>
       </div>
+      <StatusSelect />
       <AddReportDrawerContentPhotos />
     </div>
   );

diff --git a/src/components/Drawer/PoiDrawer/index.tsx b/src/components/Drawer/PoiDrawer/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
-import { Button, Image } from "@nextui-org/react";
+import { Button, Chip, Image } from "@nextui-org/react";
 
 import { useGetPoiQuery } from "../../../api/poi";
 import {
@@ -10,8 +10,23 @@ import {
   resetDrawerParams,
 } from "../../../utils/routes/params";
 
+import { poiStatus, poiStatusMessageKeys } from "../../../constants/model/poi";
+import { PoiStatus } from "../../../models/poi";
+
 import Drawer from "..";
 
+const PoiDrawerStatus: React.FC<{ status?: PoiStatus }> = ({ status }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Chip>
+      {t(poiStatusMessageKeys[status || poiStatus.unknown] || "", {
+        ns: ["drawer"],
+      })}
+    </Chip>
+  );
+};
+
 const PoiDrawer: React.FC = () => {
   const { t } = useTranslation();
 
@@ -51,6 +66,7 @@ const PoiDrawer: React.FC = () => {
               ns: ["drawer"],
             })}
           </div>
+          <PoiDrawerStatus status={poi?.data.status} />
           <div className="flex flex-row">
             {poi?.media.photoUrls.map((url) => (
               <Image key={url} src={url} alt="" />

diff --git a/src/components/Map/Fabs/UserFab/UserFabMenu/index.tsx b/src/components/Map/Fabs/UserFab/UserFabMenu/index.tsx
@@ -50,7 +50,7 @@ const UserFabMenu: React.FC<UserFabMenuProps> = (props) => {
 
   return (
     <DropdownMenu
-      aria-label="Custom item styles"
+      aria-label="User Fab Menu"
       className="p-3"
       itemClasses={{
         base: [

diff --git a/src/constants/model/poi/index.ts b/src/constants/model/poi/index.ts
@@ -0,0 +1,17 @@
+export const poiStatus = {
+  excellent: "excellent",
+  good: "good",
+  normal: "normal",
+  bad: "bad",
+  terrible: "terrible",
+  unknown: "unknown",
+};
+
+export const poiStatusMessageKeys = {
+  [poiStatus.excellent]: "addReport.content.select.setStatus.options.excellent",
+  [poiStatus.good]: "addReport.content.select.setStatus.options.good",
+  [poiStatus.normal]: "addReport.content.select.setStatus.options.normal",
+  [poiStatus.bad]: "addReport.content.select.setStatus.options.bad",
+  [poiStatus.terrible]: "addReport.content.select.setStatus.options.terrible",
+  [poiStatus.unknown]: "addReport.content.select.setStatus.options.unknown",
+};
diff --git a/src/locale/en-us/drawer.json b/src/locale/en-us/drawer.json
@@ -15,18 +15,29 @@
     "content": {
       "inputs": {
         "description": {
-          "label": "Description",
-          "placeholder": "Enter the description"
+          "label": "Description"
         },
         "name": {
-          "label": "Name",
-          "placeholder": "Enter the name"
+          "label": "Name"
         }
       },
-      "textWithButton": {
-        "setLocation": {
-          "button": "Mark",
-          "text": "Location"
+      "text": {
+        "setLocation": "Location"
+      },
+      "button": {
+        "setLocation": "Mark"
+      },
+      "select": {
+        "setStatus": {
+          "label": "Status",
+          "options": {
+            "excellent": "Excellent",
+            "good": "Good",
+            "normal": "Normal",
+            "bad": "Bad",
+            "terrible": "Terrible",
+            "unknown": "Unknown"
+          }
         }
       }
     },

diff --git a/src/locale/zh-cn/drawer.json b/src/locale/zh-cn/drawer.json
@@ -23,10 +23,23 @@
           "placeholder": "输入名称"
         }
       },
-      "textWithButton": {
-        "setLocation": {
-          "button": "标记",
-          "text": "位置"
+      "text": {
+        "setLocation": "位置"
+      },
+      "button": {
+        "setLocation": "标记"
+      },
+      "select": {
+        "setStatus": {
+          "label": "状态",
+          "options": {
+            "excellent": "极佳",
+            "good": "良好",
+            "normal": "一般",
+            "bad": "差",
+            "terrible": "极差",
+            "unknown": "未知"
+          }
         }
       }
     },

diff --git a/src/locale/zh-tw/drawer.json b/src/locale/zh-tw/drawer.json
@@ -23,10 +23,23 @@
           "placeholder": "輸入名稱"
         }
       },
-      "textWithButton": {
-        "setLocation": {
-          "button": "標記",
-          "text": "位置"
+      "text": {
+        "setLocation": "位置"
+      },
+      "button": {
+        "setLocation": "標記"
+      },
+      "select": {
+        "setStatus": {
+          "label": "狀態",
+          "options": {
+            "excellent": "極佳",
+            "good": "良好",
+            "normal": "普通",
+            "bad": "差",
+            "terrible": "極差",
+            "unknown": "未知"
+          }
         }
       }
     },

diff --git a/src/models/firebase/firestore/index.ts b/src/models/firebase/firestore/index.ts
@@ -21,6 +21,7 @@ export interface FirestorePoiData {
   clusterId: string;
   description: string;
   latlng: GeoPoint;
+  status: string;
   createBy: string;
 }
 

diff --git a/src/models/poi/index.ts b/src/models/poi/index.ts
@@ -1,9 +1,13 @@
+import { poiStatus } from "../../constants/model/poi";
+
 interface Poi {
   id: string;
   data: PoiData;
   media: PoiMedia;
 }
 
+export type PoiStatus = keyof typeof poiStatus;
+
 export interface PoiData {
   name: string;
   clusterId: string;
@@ -12,6 +16,7 @@ export interface PoiData {
     latitude: number;
     longitude: number;
   };
+  status: PoiStatus;
   createBy: string;
 }
 

diff --git a/src/store/report/index.ts b/src/store/report/index.ts
@@ -1,10 +1,11 @@
 import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
-import { PoiData, PoiMedia } from "../../models/poi";
+import { PoiData, PoiMedia, PoiStatus } from "../../models/poi";
+import { poiStatus } from "../../constants/model/poi";
 
 export type ReportData = Pick<
   PoiData,
-  "name" | "clusterId" | "description" | "latlng"
+  "name" | "clusterId" | "description" | "latlng" | "status"
 >;
 
 interface ReportState {
@@ -22,6 +23,7 @@ export const initialReportPoiData: ReportData = {
     longitude: 0,
   },
   clusterId: "",
+  status: poiStatus.unknown as PoiStatus,
 };
 
 export const initialReportMedia: PoiMedia = {

diff --git a/src/utils/types/firebase/poi/index.ts b/src/utils/types/firebase/poi/index.ts
@@ -1,12 +1,13 @@
 import { GeoPoint } from "firebase/firestore";
 import { FirestorePoiData } from "../../../../models/firebase/firestore";
-import { PoiData } from "../../../../models/poi";
+import { PoiData, PoiStatus } from "../../../../models/poi";
 
 export const toFirebasePoiDataByPoiData = (poi: PoiData): FirestorePoiData => ({
   name: poi.name,
   clusterId: poi.clusterId,
   description: poi.description,
   latlng: new GeoPoint(poi.latlng.latitude, poi.latlng.longitude),
+  status: poi.status,
   createBy: poi.createBy,
 });
 
@@ -18,5 +19,6 @@ export const toPoiDataByFirebasePoiData = (poi: FirestorePoiData): PoiData => ({
     latitude: poi.latlng.latitude,
     longitude: poi.latlng.longitude,
   },
+  status: poi.status as PoiStatus,
   createBy: poi.createBy,
 });