Fixed coderabbit review points &

Dynamic ageAgo
Plant-for-the-Planet-org · Jan 16, 2025 · abb42fb · abb42fb
1 parent bcfbdd1
commit abb42fb
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 36 deletions.
diff --git a/public/assets/images/icons/FireIcon.tsx b/public/assets/images/icons/FireIcon.tsx
@@ -2,12 +2,11 @@ import type { IconProps } from '../../../../src/features/common/types/common';
 
 import React from 'react';
 
-const FireIcon = ({ width, height }: IconProps) => {
+const FireIcon = ({ width }: IconProps) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width={width}
-      height={height}
       viewBox="7 1 22 28"
       fill="none"
     >

diff --git a/public/static/locales/de/projectDetails.json b/public/static/locales/de/projectDetails.json
@@ -9,11 +9,10 @@
     "seeLess": "weniger sehen",
     "seeMore": "mehr sehen",
     "forestFire": "Waldbrand",
-    "hoursAgo": "vor {hours}h",
+    "ageAgo": "vor {age}",
     "highAlertConfidenceText": "<important>Hohe</important> Alarmkonfidenz",
     "mediumAlertConfidenceText": "<important>Hohe</important> Alarmkonfidenz",
     "lowAlertConfidenceText": "<important>Hohe</important> Alarmkonfidenz",
-    "defaultAlertConfidenceText": "<important>Hohe</important> Alarmkonfidenz",
     "setUpAlertsText": "Einrichten von Alarmen mit <important>FireAlert</important>",
     "firstTreePlanted": "Erster gepflanzter Baum",
     "plantingSeasons": "Pflanzsaisons",

diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
@@ -9,11 +9,10 @@
     "seeLess": "see less",
     "seeMore": "see more",
     "forestFire": "Forest Fire",
-    "hoursAgo": "{hours}h ago",
+    "ageAgo": "{age} ago",
     "highAlertConfidenceText": "<important>High</important> alert confidence",
     "mediumAlertConfidenceText": "<important>Medium</important> alert confidence",
     "lowAlertConfidenceText": "<important>Low</important> alert confidence",
-    "defaultAlertConfidenceText": "<important>Default</important> alert confidence",
     "setUpAlertsText": "Set up alerts with <important>FireAlert</important>",
     "firstTreePlanted": "First tree planted",
     "plantingSeasons": "planting seasons",

diff --git a/src/features/projectsV2/ProjectsMap/FirePopup/index.tsx b/src/features/projectsV2/ProjectsMap/FirePopup/index.tsx
@@ -22,12 +22,19 @@ export default function FirePopup({ isOpen, feature }: Props) {
   const [showPopup, setShowPopup] = React.useState(isOpen);
   const tProjectDetails = useTranslations('ProjectDetails');
 
-  const hourseAgo = useMemo(() => {
+  const alertAge = useMemo(() => {
     const ms = Math.abs(
       new Date().getTime() - new Date(feature.properties.eventDate).getTime()
     );
-    return Math.round(ms / (1000 * 60 * 60));
-  }, []);
+
+    const hours = Math.round(ms / (1000 * 60 * 60));
+    if (hours < 24) {
+      return `${hours}h`; // Less than 24 hours
+    }
+
+    const days = Math.round(hours / 24); // Calculate days
+    return `${days}d`; // 24 hours or more
+  }, [feature.properties.eventDate]);
 
   const alertConfidence = useMemo(() => {
     switch (feature.properties.confidence) {
@@ -38,9 +45,9 @@ export default function FirePopup({ isOpen, feature }: Props) {
       case 'low':
         return 'lowAlertConfidenceText';
       default:
-        return 'defaultAlertConfidenceText';
+        return 'mediumAlertConfidenceText';
     }
-  }, []);
+  }, [feature.properties.confidence]);
 
   const firealertAppLink = useMemo(() => {
     let link = 'https://www.plant-for-the-planet.org/firealert/';
@@ -86,8 +93,8 @@ export default function FirePopup({ isOpen, feature }: Props) {
               <FirePopupIcon width={18} /> {tProjectDetails('forestFire')}
             </h2>
             <p className={styles.timeDuration}>
-              {tProjectDetails('hoursAgo', {
-                hours: hourseAgo,
+              {tProjectDetails('ageAgo', {
+                age: alertAge,
               })}
               <InfoIconPopup width={9} height={9} color={'#828282'}>
                 <div className={styles.infoIconPopupContainer}>
@@ -102,9 +109,13 @@ export default function FirePopup({ isOpen, feature }: Props) {
               {feature.geometry.coordinates[1]}
             </p>
             <p>
-              {tProjectDetails.rich(alertConfidence as any, {
-                important: (chunks) => <span>{chunks}</span>,
-              })}
+              {tProjectDetails.rich(
+                alertConfidence as
+                  | 'highAlertConfidenceText'
+                  | 'mediumAlertConfidenceText'
+                  | 'lowAlertConfidenceText',
+                { important: (chunks) => <span>{chunks}</span> }
+              )}
             </p>
             <a
               className={styles.setUpAlertsContainer}

diff --git a/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx b/src/features/projectsV2/ProjectsMap/SingleProjectView.tsx
@@ -12,9 +12,8 @@ import { zoomToPolygonPlantLocation } from '../../../utils/mapsV2/zoomToPolygonP
 import zoomToLocation from '../../../utils/mapsV2/zoomToLocation';
 import ProjectLocation from './microComponents/ProjectLocation';
 import FireLocations from './microComponents/FireLocations';
-import FeatureFlag, {
-  isFirealertFiresEnabled,
-} from './microComponents/FeatureFlag';
+import FeatureFlag from './microComponents/FeatureFlag';
+import { isFirealertFiresEnabled } from '../../../utils/projectV2';
 
 interface Props {
   mapRef: MapRef;

diff --git a/src/features/projectsV2/ProjectsMap/microComponents/FeatureFlag.tsx b/src/features/projectsV2/ProjectsMap/microComponents/FeatureFlag.tsx
@@ -11,15 +11,3 @@ export default function FeatureFlag({
 }: Props): ReactElement {
   return <>{condition ? <>{children}</> : null}</>;
 }
-
-export function isFirealertFiresEnabled() {
-  const isEnvVariableEnabled =
-    process.env.NEXT_PUBLIC_ENABLE_FIREALERT_FIRES?.trim().toLowerCase() ===
-    'true';
-  const isQueryStringEnabled =
-    new URLSearchParams(window.location.search)
-      .get('fa-fires')
-      ?.toLowerCase() === 'true';
-
-  return isEnvVariableEnabled || isQueryStringEnabled;
-}
diff --git a/src/features/projectsV2/ProjectsMap/microComponents/FireLocations.tsx b/src/features/projectsV2/ProjectsMap/microComponents/FireLocations.tsx
@@ -12,6 +12,7 @@ import { getRequest } from '../../../../utils/apiRequests/api';
 import FirePopup from '../FirePopup';
 
 export default function FireLocations(): ReactElement {
+  console.log('is this?', process.env.NEXT_PUBLIC_FIREALERT_ENDPOINT);
   const { query } = useRouter();
 
   const { site } = query;
@@ -25,15 +26,12 @@ export default function FireLocations(): ReactElement {
       try {
         const qs = new URLSearchParams();
         qs.append('remoteId', site as string);
-        // qs.append('span', '1y');
+        qs.append('span', '1y');
         const fireAlertApiUrl =
           process.env.NEXT_PUBLIC_FIREALERT_ENDPOINT ??
           'https://fa.pp.eco/api/v1';
         const url = `${fireAlertApiUrl}/fires?${qs.toString()}`;
-        const fetchedFires = await getRequest<FireFeatureCollection>(
-          undefined,
-          url
-        );
+        const fetchedFires = await getRequest<FireFeatureCollection>({ url });
         if (
           fetchedFires?.type === 'FeatureCollection' &&
           fetchedFires?.features?.length > 0

diff --git a/src/utils/projectV2.ts b/src/utils/projectV2.ts
@@ -282,3 +282,15 @@ export const getDeviceType = (): MobileOs => {
   if (/iPad|iPhone|iPod/.test(userAgent)) return 'ios';
   return undefined;
 };
+
+export function isFirealertFiresEnabled() {
+  const isEnvVariableEnabled =
+    process.env.NEXT_PUBLIC_ENABLE_FIREALERT_FIRES?.trim().toLowerCase() ===
+    'true';
+  const isQueryStringEnabled =
+    new URLSearchParams(window.location.search)
+      .get('fa-fires')
+      ?.toLowerCase() === 'true';
+
+  return isEnvVariableEnabled || isQueryStringEnabled;
+}