rg/32 report incident form

packages/client/.gitignore

@@ -8,7 +8,9 @@
 /coverage
 
 # next.js
-../.next/
+./next
+
+
 /out/
 
 # production

packages/client/lib/components/BottomNav/BottomNav.jsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import BottomNavItem from './BottomNavItem.jsx';
+import {
+  HomeIcon,
+  MagnifyingGlassIcon,
+  UserIcon,
+  PlusCircleIcon,
+  MapPinIcon,
+} from '@heroicons/react/24/outline';
+import useFormStore from '../../../store/formStore.js';
+
+const BOTTOM_NAV_ITEMS = [
+  {
+    name: 'Home',
+    icon: <HomeIcon className="h-6 w-6 pointer-events-none" />,
+  },
+  {
+    name: 'Search',
+    icon: <MagnifyingGlassIcon className="h-6 w-6 pointer-events-none" />,
+  },
+  {
+    name: 'Layers',
+    icon: <MapPinIcon className="h-6 w-6 pointer-events-none" />,
+  },
+  {
+    name: 'Profile',
+    icon: <UserIcon className="h-6 w-6 pointer-events-none" />,
+  },
+];
+
+const LEFT_NAV_ITEMS = BOTTOM_NAV_ITEMS.slice(0, 2);
+const RIGHT_NAV_ITEMS = BOTTOM_NAV_ITEMS.slice(2, 4);
+
+const BottomNav = () => {
+  const [active, setActive] = useState(0);
+  const setShowForm = useFormStore((state) => state.setShowForm);
+
+  const handleActive = (name) => {
+    setActive(name);
+  };
+
+  const isActive = (name) => {
+    return active === name ? true : false;
+  };
+
+  return (
+    <div className="absolute bottom-0 z-[9999] w-full h-16 text-foreground/30 rounded-t-2xl p-1 grid grid-cols-5 justify-items-center items-center bg-white">
+      {LEFT_NAV_ITEMS.map((item) => (
+        <BottomNavItem
+          key={item.name}
+          setActive={() => handleActive(item.name)}
+          selected={isActive(item.name)}
+          name={item.name}
+        >
+          {item.icon}
+        </BottomNavItem>
+      ))}
+      <div onClick={() => setShowForm(true)} className="relative">
+        <div className="absolute left-0 bottom-0 translate-y-1/3 -translate-x-1/2 rounded-full h-24 w-24 flex items-center justify-center bg-background">
+          <div className="rounded-full h-20 w-20 flex items-center justify-center bg-primary ">
+            <button className="rounded-full h-16 w-16 flex items-center justify-center bg-backgroundAlt">
+              <PlusCircleIcon className="h-6 w-6 text-primary" />
+            </button>
+          </div>
+        </div>
+      </div>
+      {RIGHT_NAV_ITEMS.map((item) => (
+        <BottomNavItem
+          key={item.name}
+          setActive={() => handleActive(item.name)}
+          selected={isActive(item.name)}
+          name={item.name}
+        >
+          {item.icon}
+        </BottomNavItem>
+      ))}
+    </div>
+  );
+};
+
+export default BottomNav;

packages/client/lib/components/Map.jsx

@@ -1,52 +1,86 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import useStore from '../../store/store';
 import 'leaflet/dist/leaflet.css';
-import { MapContainer, TileLayer, Marker, ZoomControl,useMap } from 'react-leaflet';
+import {
+  MapContainer,
+  TileLayer,
+  Marker,
+  ZoomControl,
+  useMap,
+} from 'react-leaflet';
 import Leaflet from 'leaflet';
+import useFormStore from '@/store/formStore';
 
 const SetViewOnUserLocation = () => {
+  const setLocation = useFormStore((state) => state.setLocation);
+  const isMounted = useRef(false);
   const map = useMap();
 
   useEffect(() => {
     (async function init() {
+      // TODO: delete override required on prototype required or not?
       // delete Leaflet.Icon.Default.prototype._getIconUrl;
+
+      // Sets default icon path for leaflet icons/markers
       Leaflet.Icon.Default.mergeOptions({
         iconRetinaUrl: 'leaflet/images/marker-icon-2x.png',
         iconUrl: 'leaflet/images/marker-icon.png',
         shadowUrl: 'leaflet/images/marker-shadow.png',
       });
     })();
+
+    // Checks if map is currently mounted (prevents position error when form is opened)
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
   }, []);
 
   useEffect(() => {
     navigator.geolocation.getCurrentPosition(
       (position) => {
-        map.setView(
-          { lat: position.coords.latitude, lng: position.coords.longitude },
-          12
-        );
+        if (!map) return;
+
+        if (isMounted.current) {
+          map.setView(
+            { lat: position.coords.latitude, lng: position.coords.longitude },
+            12
+          );
+          setLocation({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude,
+          });
+        }
       },
       (error) => {
         console.error(error);
       },
       { enableHighAccuracy: true, timeout: 10000, maximumAge: Infinity }
     );
-  }, [map]);
+  }, [map, setLocation]);
 
   return null;
 };
 
 const Map = () => {
   const geoData = useStore((state) => state.geoData);
+  const markers = useStore((state) => state.markers);
 
   return (
-    <MapContainer center={geoData} zoom={12} zoomControl={false} className="min-h-screen w-full">
+    <MapContainer
+      center={geoData}
+      zoom={12}
+      zoomControl={false}
+      className="min-h-screen w-full"
+    >
       <SetViewOnUserLocation />
       <TileLayer
         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Marker position={geoData} draggable />
+      {markers.length > 0 &&
+        markers.map((marker) =>  <Marker key={marker.id} position={marker.location} />)}
       <ZoomControl position="topright" />
     </MapContainer>
   );

packages/client/lib/components/ReportForm/FormViews/CategoryView.jsx

@@ -0,0 +1,57 @@
+import useFormStore from '../../../../store/formStore';
+
+const categoryOptions = [
+  'Lost/Missing Pet',
+  'Found Pet',
+  'Needs Medical Treatment',
+  'Gave/Received Medical Treatment',
+  'Gave Food',
+  'Poisoning',
+  'Other',
+];
+
+const CategoryView = () => {
+  const category = useFormStore((state) => state.category);
+  const setCategory = useFormStore((state) => state.setCategory);
+  const formErrorState = useFormStore((state) => state.error);
+
+  const handleChange = ({ target }) => {
+    setCategory(target.value);
+  };
+
+  const isFormValid = () => {
+    if(!category && formErrorState) {
+      return false;
+    }
+    return true;
+  };
+
+  return (
+    <div className="flex-1">
+      <h2 className="text-xl mt-4">Category of incident</h2>
+      <h3 className="text-lg">Please choose one category</h3>
+      {categoryOptions.map((option) => (
+        <div className="flex items-center" key={option}>
+          <input
+            onChange={handleChange}
+            checked={category === option}
+            type="radio"
+            name="category"
+            className="w-4 h-4"
+            id={option}
+            value={option}
+            required
+          />
+          <label htmlFor={option} className="p-1">
+            {option}
+          </label>
+        </div>
+      ))}
+      <p className={`text-xs text-negative ${isFormValid() ?'invisible' : 'visible'}`}> 
+        Please provide a category
+      </p>
+    </div>
+  );
+};
+
+export default CategoryView;

packages/client/lib/components/ReportForm/FormViews/LocationView.jsx

@@ -0,0 +1,43 @@
+import useFormStore from '../../../../store/formStore';
+import { MapPinIcon } from '@heroicons/react/24/outline';
+
+const LocationView = () => {
+  const location = useFormStore((state) => state.location);
+  const setLocation = useFormStore((state) => state.setLocation);
+  const setStep = useFormStore((state) => state.setStep);
+
+  return (
+    <div className="flex-1">
+      <h2 className="text-xl mt-4">Pin map location</h2>
+      <div>
+        <label htmlFor="location" className="block mb-2 text-foreground">
+          e.g. "Example Road, City" or "-8.54, 115.24"
+        </label>
+        <input
+          type="text"
+          id="location"
+          disabled
+          onChange={(e) => setLocation(e.target.value)}
+          name="location"
+          value={`${location.lat}, ${location.lng}`}
+          placeholder="Provide a location or coordinates"
+          className="block w-full p-2 text-foreground border border-gray-300 rounded-lg bg-background focus:ring-primary focus:border-primary shadow-md"
+        />
+        <div className="flex justify-center mt-20">
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              setStep(5);
+            }}
+            className="flex items-center bg-primary text-background font-bold py-2.5 px-3.5 rounded-xl"
+          >
+            <MapPinIcon className="w-7 h-7 pr-1 text-background" />
+            Update Location
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LocationView;