Add new observation form for custom observations

.github/workflows/release.yml

@@ -1,6 +1,10 @@
 name: Release docker image
 
 on:
+  push:
+    branches:
+      - main
+      - new_observation_types
   release:
     types: [created]
 

index.d.ts

@@ -0,0 +1 @@
+declare module '@bhch/react-json-form';

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@20tab/react-leaflet-resetview": "^1.1.0",
+    "@bhch/react-json-form": "^2.14.4",
     "@hookform/resolvers": "^3.1.0",
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -38,6 +39,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
     "react-leaflet": "^4.2.1",
+    "react-modal": "^3.16.1",
     "sharp": "^0.32.6",
     "slugify": "^1.6.6",
     "tailwind-merge": "^2.2.2",

src/api/customObservations.ts

@@ -0,0 +1,129 @@
+import { JSONSchema } from 'json-schema-yup-transformer/dist/schema';
+
+import { Attachement } from './settings';
+
+export type Observation = {
+  id: number;
+  label: string;
+  description: string;
+  json_schema_form: JSONSchema;
+  stations: number[];
+  password_required?: boolean;
+};
+
+export type ObservationDetails = {
+  values?: { id: string; value: any; label?: string }[];
+  id: string;
+  contributedAt?: string;
+  label?: string;
+  description?: string;
+  attachments?: Attachement[];
+  geometry?: {
+    coordinates: number[];
+  };
+};
+
+type ObservationListItem = {
+  id: number;
+  contributed_at: string;
+  attachments: Attachement[];
+};
+
+async function fetchObservations(): Promise<Observation[]> {
+  const res = await fetch(
+    `${process.env.apiHost}/api/portal/fr/${process.env.portal}/custom-contribution-types/`,
+    {
+      next: { revalidate: 5 * 60, tags: ['admin', 'contributions'] },
+      headers: {
+        Accept: 'application/json',
+      },
+    },
+  );
+  if (res.status < 200 || res.status > 299) {
+    return [];
+  }
+  return res.json();
+}
+
+async function fetchObservation(id: string): Promise<Observation | null> {
+  const res = await fetch(
+    `${process.env.apiHost}/api/portal/fr/${process.env.portal}/custom-contribution-types/${id}`,
+    {
+      next: { revalidate: 5 * 60, tags: ['admin', 'contributions'] },
+      headers: {
+        Accept: 'application/json',
+      },
+    },
+  );
+  if (res.status < 200 || res.status > 299) {
+    return null;
+  }
+  return res.json();
+}
+
+async function fetchObservationDetails(
+  id: string,
+): Promise<ObservationListItem[] | null> {
+  const res = await fetch(
+    `${process.env.apiHost}/api/portal/fr/${process.env.portal}/custom-contribution-types/${id}/contributions`,
+    {
+      next: { revalidate: 5 * 60, tags: ['admin', 'contributions'] },
+      headers: {
+        Accept: 'application/json',
+      },
+    },
+  );
+  if (res.status < 200 || res.status > 299) {
+    return null;
+  }
+  return res.json();
+}
+
+export async function getObservationDetails(
+  type: string,
+  id: string,
+): Promise<ObservationDetails | null> {
+  const [schema, detailsList] = await Promise.all([
+    fetchObservation(type),
+    fetchObservationDetails(type),
+  ]);
+  const values = detailsList?.find(detail => String(detail.id) === id);
+
+  if (!values) return null;
+
+  const details = {
+    values: Object.entries(values)
+      .filter(([key]) => schema?.json_schema_form.properties?.[key])
+      .map(([key, value]) => ({
+        id: key,
+        value,
+        label: (schema?.json_schema_form.properties?.[key] as any)?.title,
+      })),
+    id,
+    contributedAt: values.contributed_at,
+    label: schema?.label,
+    description: schema?.description,
+    attachments: values.attachments,
+  };
+
+  return details;
+}
+
+export async function getObservation(id: string) {
+  const observation = await fetchObservation(id);
+  if (!observation || !observation.json_schema_form) return null;
+  return {
+    ...observation,
+    json_schema_form: {
+      ...observation.json_schema_form,
+      properties: {
+        ...observation.json_schema_form.properties,
+      },
+    },
+  };
+}
+
+export async function getObservations() {
+  const observations = await fetchObservations();
+  return observations;
+}

src/api/details.ts

@@ -2,7 +2,7 @@ import { getDetailsUrl } from './settings';
 
 async function fetchDetails(url: string) {
   const res = await fetch(`${process.env.apiHost}${url}`, {
-    next: { revalidate: 60 * 60 },
+    next: { revalidate: 5 * 60, tags: ['details', 'admin'] },
     headers: {
       Accept: 'application/json',
     },
@@ -26,9 +26,16 @@ export async function getDetails(path: string, id: number) {
   }
   let details = null;
   try {
-    details = await fetchDetails(`${endpoint}${id}`);
+    details = await fetchDetails(
+      `/api/portal/fr/${process.env.portal}/${path}/${id}`,
+    );
   } catch (e) {
-    // notfound
+    try {
+      details = await fetchDetails(`/api/portal/fr/${path}/${id}`);
+    } catch (e) {
+      return null;
+    }
+    return details;
   }
   return details;
 }

src/api/geojson.ts

@@ -2,7 +2,7 @@ import { GeoJSON } from 'geojson';
 
 async function fetchGeoJSON(url: string) {
   const res = await fetch(`${process.env.apiHost}${url}`, {
-    next: { revalidate: 60 * 60 },
+    next: { revalidate: 20 * 60, tags: ['admin', 'geojson'] },
   });
   if (res.status < 200 || res.status > 299) {
     return null;

src/api/observations.ts

@@ -1,21 +1,42 @@
-import {
-  JSONSchema,
-  JSONSchemaType,
-} from 'json-schema-yup-transformer/dist/schema';
-
 import { getCorrespondingPath } from '@/lib/utils';
 
+import { Attachement } from './settings';
+
 export type PostObservationProps = {
   geom: string;
   properties: string;
   files: string;
 };
 
+export type ObservationDetails = {
+  id: number;
+  type: string;
+  category: string;
+  description: string;
+  attachments?: Attachement[];
+};
+
 async function fetchObservation() {
   const res = await fetch(
     `${process.env.apiHost}/api/portal/fr/${process.env.portal}/contributions/json_schema/`,
     {
-      next: { revalidate: 60 * 60 },
+      next: { revalidate: 5 * 60, tags: ['admin', 'observations'] },
+      headers: {
+        Accept: 'application/json',
+      },
+    },
+  );
+  if (res.status < 200 || res.status > 299) {
+    return {};
+  }
+  return res.json();
+}
+
+async function fetchObservationDetails(id: string) {
+  const res = await fetch(
+    `${process.env.apiHost}/api/portal/fr/${process.env.portal}/contributions/${id}/`,
+    {
+      next: { revalidate: 5 * 60, tags: ['admin', 'observations'] },
       headers: {
         Accept: 'application/json',
       },
@@ -79,10 +100,10 @@ async function postObservation(props: PostObservationProps) {
   }
 }
 
-function observationAdapter(json: JSONSchema, path: string) {
+function observationAdapter(json: any, path: string) {
   const { category, ...jsonProperties } = json.properties;
-  const { then: type } = json.allOf.find(
-    (item: JSONSchemaType) =>
+  const { then: type } = json.allOf?.find(
+    (item: any) =>
       item.if.properties.category?.const === getCorrespondingPath(path),
   );
   return {
@@ -103,12 +124,20 @@ function observationAdapter(json: JSONSchema, path: string) {
       ...jsonProperties,
       ...type.properties,
     },
-    required: [...json.required, 'lng', 'lat'].filter(
+    required: [...(json.required ?? []), 'lng', 'lat'].filter(
       item => item !== 'category',
     ),
   };
 }
 
+export async function getObservationDetails(
+  id: string,
+): Promise<ObservationDetails | null> {
+  const observationDetails = fetchObservationDetails(id);
+
+  return observationDetails;
+}
+
 export async function getObservationJsonSchema(path: string) {
   const rawObservation = await fetchObservation();
   return observationAdapter(rawObservation, path);

src/api/page.ts

@@ -2,7 +2,7 @@ import { Menu, getMenuSettings } from './settings';
 
 async function fetchDetails(url: string) {
   const res = await fetch(`${process.env.apiHost}${url}`, {
-    next: { revalidate: 60 * 60 },
+    next: { revalidate: 5 * 60, tags: ['admin', 'staticpages'] },
     headers: {
       Accept: 'application/json',
     },

src/api/poi.ts

@@ -23,7 +23,7 @@ async function fetchPois({ params }: FetchPoisProps = {}): Promise<Poi[]> {
     headers: {
       Accept: 'application/json',
     },
-    next: { revalidate: 60 * 60 },
+    next: { revalidate: 5 * 60, tags: ['admin', 'pois'] },
   });
   if (res.status < 200 || res.status > 299) {
     return [];

src/api/postObservation.ts

@@ -0,0 +1,56 @@
+async function postObservation(
+  props: { [key: string]: string | Blob },
+  id: string,
+  formData: FormData,
+) {
+  const body = new FormData();
+
+  Object.entries(props).forEach(([key, value]) => {
+    // `null` in formData is converted to `'null'`
+    // We convert them to an empty string to avoid it
+    const nextValue = value !== null ? value : '';
+    body.append(key, nextValue);
+  });
+
+  Array.from({ length: 5 }).forEach((_, index) => {
+    const number = index + 1;
+    const file = formData.get(`file${number}-file`) as File;
+    if (file && file.size > 0) {
+      body.append(`file${number}`, file);
+    }
+  });
+
+  try {
+    const res = await fetch(
+      `${process.env.apiHost}/api/portal/fr/${process.env.portal}/custom-contribution-types/${id}/contributions/`,
+      {
+        method: 'POST',
+        body,
+      },
+    ).catch(errorServer => {
+      throw Error(errorServer);
+    });
+    if (res.status > 499) {
+      throw Error(res.statusText);
+    }
+    const json = await res.json();
+
+    if (res.status < 200 || res.status > 299) {
+      return { error: true, message: json };
+    }
+    return { error: false, message: json };
+  } catch (error) {
+    let message = 'Unknown Error';
+    if (error instanceof Error) message = error.message;
+    return { error: true, message };
+  }
+}
+
+export async function handleSubmitCustomObservation(
+  body: { [key: string]: string | Blob },
+  id: string,
+  formData: FormData,
+) {
+  'use server';
+  return await postObservation(body, id, formData);
+}

src/api/settings.ts

@@ -9,7 +9,9 @@ type BaseLayers = {
   id: number;
   label: string;
   url: string;
-  attribution: string;
+  control: {
+    attribution: string;
+  };
 }[];
 
 export type RawLayer = {
@@ -156,7 +158,7 @@ export async function fetchSettings(): Promise<RawSettings> {
     const res = await fetch(
       `${process.env.apiHost}/api/portal/fr/portal/${process.env.portal}/`,
       {
-        next: { revalidate: 60 * 60 },
+        next: { revalidate: 5 * 60, tags: ['admin', 'settings'] },
         headers: {
           Accept: 'application/json',
         },