Detail fixed (#98)

Co-authored-by: Tomas Schaffer <schtomas@gmail.com>
bratislava · Apr 6, 2023 · 21b83be · 21b83be
1 parent ea8953e
commit 21b83be
Showing 1 changed file with 58 additions and 62 deletions.
diff --git a/apps/greenary-care-map/src/components/Detail/index.tsx b/apps/greenary-care-map/src/components/Detail/index.tsx
@@ -1,9 +1,8 @@
 import { useRef, useState, useEffect } from "react";
 import { Feature } from "geojson";
-import { BottomSheetRef } from "react-spring-bottom-sheet";
 import { useTranslation } from "react-i18next";
 import { useArcgisAttachments } from "@bratislava/react-use-arcgis";
-import { DataDisplay } from "@bratislava/react-maps-ui";
+import { DataDisplay, SheetHandle } from "@bratislava/react-maps-ui";
 import { Detail as MapDetail } from "@bratislava/react-maps";
 
 
@@ -17,7 +16,7 @@ export interface DetailProps {
 export const Detail = ({ features, onClose, isMobile, arcgisServerUrl }: DetailProps) => {
   const { t, i18n }: { t: (key: string) => string; i18n: { language: string } } = useTranslation();
 
-  const sheetRef = useRef<BottomSheetRef>(null);
+  const sheetRef = useRef<SheetHandle>(null);
 
   const [feature, setFeature] = useState<Feature | null>(null);
   const [objectId, setObjectId] = useState<string | number | null>(null);
@@ -29,7 +28,7 @@ export const Detail = ({ features, onClose, isMobile, arcgisServerUrl }: DetailP
     const firstFeature = features[0];
     if (firstFeature) {
       setFeature(firstFeature);
-      sheetRef.current?.snapTo(({ snapPoints }) => snapPoints[1]);
+      sheetRef.current?.snapTo(1);
       if (firstFeature.properties?.["OBJECTID"]) setObjectId(firstFeature.properties?.["OBJECTID"]);
     }
   }, [features, setObjectId]);
@@ -39,80 +38,77 @@ export const Detail = ({ features, onClose, isMobile, arcgisServerUrl }: DetailP
   if (!feature) return null;
 
   const detail = (
-    <div className="flex flex-col space-y-4 p-8 pt-0 sm:pt-4 overflow-auto">
-      <div className="flex flex-col space-y-4">
-        <div className="first-letter:uppercase font-bold font-md text-[20px]">
-          {feature?.properties?.["TYP_VYKONU_1"]
-            ? t(`categories.${feature?.properties?.["TYP_VYKONU_1"]}`)
-            : t(`layers.esri.detail.title`)}
-        </div>
-        <DataDisplay
-          label={t(`layers.esri.detail.slovakName`)}
-          text={feature?.properties?.["Drevina_SK"]}
-        />
-        <DataDisplay
-          label={t(`layers.esri.detail.latinName`)}
-          text={feature?.properties?.["Drevina_LAT"]}
-        />
-        <DataDisplay label={t(`layers.esri.detail.street`)} text={feature?.properties?.["ULICA"]} />
-        <DataDisplay
-          label={t(`layers.esri.detail.description`)}
-          text={feature?.properties?.["POPIS_VYKONU_1"]}
-        />
-        {feature?.properties?.["TERMIN_REAL_1"] && (
-          <DataDisplay
-            label={t(`layers.esri.detail.date`)}
-            text={new Date(feature?.properties?.["TERMIN_REAL_1"]).toLocaleString(i18n.language, {
-              year: "numeric",
-              day: "numeric",
-              month: "numeric",
-            })}
-          />
-        )}
+    <div className="flex flex-col space-y-4 p-8 pt-6">
+      <div className="first-letter:uppercase font-bold font-md text-[20px]">
+        {feature?.properties?.["TYP_VYKONU_1"]
+          ? t(`categories.${feature?.properties?.["TYP_VYKONU_1"]}`)
+          : t(`layers.esri.detail.title`)}
+      </div>
+      <DataDisplay
+        label={t(`layers.esri.detail.slovakName`)}
+        text={feature?.properties?.["Drevina_SK"]}
+      />
+      <DataDisplay
+        label={t(`layers.esri.detail.latinName`)}
+        text={feature?.properties?.["Drevina_LAT"]}
+      />
+      <DataDisplay label={t(`layers.esri.detail.street`)} text={feature?.properties?.["ULICA"]} />
+      <DataDisplay
+        label={t(`layers.esri.detail.description`)}
+        text={feature?.properties?.["POPIS_VYKONU_1"]}
+      />
+      {feature?.properties?.["TERMIN_REAL_1"] && (
         <DataDisplay
-          label={t(`layers.esri.detail.district`)}
-          text={feature?.properties?.["district"]}
+          label={t(`layers.esri.detail.date`)}
+          text={new Date(feature?.properties?.["TERMIN_REAL_1"]).toLocaleString(i18n.language, {
+            year: "numeric",
+            day: "numeric",
+            month: "numeric",
+          })}
         />
+      )}
+      <DataDisplay
+        label={t(`layers.esri.detail.district`)}
+        text={feature?.properties?.["district"]}
+      />
 
-        {attachments && !!attachments.length && (
+      {attachments && !!attachments.length && (
+        <div>
+          <div>{t(`layers.esri.detail.document`)}</div>
           <div>
-            <div>{t(`layers.esri.detail.document`)}</div>
-            <div>
-              {attachments.map((attachment, index) => {
-                const attachmentUrl = `${arcgisServerUrl}/${objectId}/attachment/${attachment.id}`;
-                return (
-                  <a
-                    className="font-bold flex underline"
-                    rel="noreferrer"
-                    href={attachmentUrl}
-                    target="_blank"
-                    key={index}
-                  >
-                    {`${t("layers.esri.detail.showDocument")} ${attachments.length > 1 ? index + 1 : ""
-                      }`}
-                  </a>
-                );
-              })}
-            </div>
+            {attachments.map((attachment, index) => {
+              const attachmentUrl = `${arcgisServerUrl}/${objectId}/attachment/${attachment.id}`;
+              return (
+                <a
+                  className="font-bold flex underline"
+                  rel="noreferrer"
+                  href={attachmentUrl}
+                  target="_blank"
+                  key={index}
+                >
+                  {`${t("layers.esri.detail.showDocument")} ${attachments.length > 1 ? index + 1 : ""
+                    }`}
+                </a>
+              );
+            })}
           </div>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 
   return (
     <MapDetail
+      ref={sheetRef}
       isBottomSheet={isMobile}
       onClose={onClose}
       isVisible={!!feature}
       bottomSheetSnapPoints={[84, "50%", "100%"]}
       bottomSheetInitialSnap={1}
     >
-      <div className="px-6 py-4">
-        {feature?.properties &&
-          detail
-        }
-      </div>
+      {feature?.properties &&
+        detail
+      }
     </MapDetail>
   );
 };