Cleanup: tags, memo, doc

- Add missing author tags
- Use React useCallback/useMemo
- Add missing documentation

backend/src/app.module.ts

@@ -37,7 +37,6 @@ const database = (config: any, name: string) => {
       serveRoot: '/cdn/',
     }),
   ],
-
   controllers: [
     AppController,
     RCController,

backend/src/images/image.service.ts

@@ -61,6 +61,8 @@ export class ImageService {
    *
    * @param wayId the way id
    * @param isDashCam boolean to indicate if the images are dash camera images or road surface images
+   *
+   * @author Kerbourc'h
    */
   async getWayImages(
     wayId: OSMWayId,

backend/src/models.ts

@@ -6,6 +6,16 @@ export interface LatLng {
   lng: number;
 }
 
+/**
+ * Used in the data plot to show the condition of a road.
+ * The way_dist is the distance from the start of the way. It will be the x-axis in the plot.
+ * The value is the condition value. It will be the y-axis in the plot.
+ */
+export interface Condition {
+  way_dist: number;
+  value: number;
+}
+
 /**
  * Type of answer from backend for a survey.
  */

backend/src/roads/road.service.ts

@@ -51,8 +51,6 @@ export class RoadService {
    * This executes the queries sequentially to avoid useless queries to OSM
    * and the database. This is especially useful when the ways are in the same road.
    *
-   * // TODO: change this a nest queue
-   *
    * @param wayIds
    *
    * @author Kerbourc'h
@@ -79,8 +77,6 @@ export class RoadService {
    * Will get the Way corresponding to the OSMWayId either from the database if
    * available or from OSM and insert the whole road containing it in the database.
    *
-   * // TODO: change this a nest queue
-   *
    * @param OSMWayId the osm id of a way in the road
    *
    * @author Kerbourc'h

backend/src/surveys/survey.controller.ts

@@ -7,6 +7,9 @@ import { SurveyService } from './survey.service';
 export class SurveyController {
   constructor(private readonly service: SurveyService) {}
 
+  /**
+   * @author Muro
+   */
   @Get('')
   getWayConditions(@Query() query: { surveyId: string }): Promise<ISurvey> {
     const { surveyId } = query;

backend/src/surveys/survey.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@nestjs/common';
 import { InjectConnection, Knex } from 'nestjs-knex';
 import { Measurement, Survey } from '../tables';
-import { MeasurementType, ISurvey } from '../models';
+import { ISurvey, MeasurementType } from '../models';
 
 @Injectable()
 export class SurveyService {
@@ -57,11 +57,11 @@ export class SurveyService {
   }
 
   /**
-   *Asynchronously retrieves all surveys from the database, including their IDs and timestamps.
+   * Asynchronously retrieves all surveys from the database, including their IDs and timestamps.
    *
    * @author Lyons
    */
   async getAllSurveys(): Promise<ISurvey[]> {
-    return await Survey(this.knex_group_d).select('id', 'timestamp');
+    return Survey(this.knex_group_d).select('id', 'timestamp');
   }
 }

frontend/src/App.tsx

@@ -13,6 +13,8 @@ import Main from './pages/Main';
 
 /**
  * Component rendering the whole application
+ *
+ * @author LiraVis, Muro, Kerbourc'h
  */
 const App: FC = () => {
   return (

frontend/src/Components/Conditions/ConditionsMap.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';
 import { GeoJSON } from 'react-leaflet';
 import L, { CircleMarkerOptions } from 'leaflet';
 import { FeatureCollection } from 'geojson';
@@ -147,13 +147,12 @@ const severityThreshold = (
       const isMedium = severity.mode.includes('Medium');
       const isLow = severity.mode.includes('Low');
 
-      const meetsSeverityConditions =
+      return (
         (isLow && (value <= thresholds[0] || value < thresholds[1])) ||
         (isMedium && thresholds[1] <= value && value <= thresholds[2]) ||
         (isHigh && thresholds[2] < value && value <= thresholds[3]) ||
-        (isCritical && thresholds[3] < value);
-
-      return meetsSeverityConditions;
+        (isCritical && thresholds[3] < value)
+      );
     }
   }
   return false;
@@ -190,10 +189,12 @@ const ConditionsMap: FC<ConditionsMapProps> = ({
   const geoJsonRef = useRef<any>();
 
   // The default data to show in the GeoJSON component
-  const defaultData: FeatureCollection = {
-    type: 'FeatureCollection',
-    features: [],
-  };
+  const defaultData: FeatureCollection = useMemo(() => {
+    return {
+      type: 'FeatureCollection',
+      features: [],
+    };
+  }, []);
 
   const setStyle = useCallback(
     (

frontend/src/Components/Conditions/InfoButton.tsx

@@ -1,29 +1,30 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import '../../css/InfoButton.css';
 
 /**
  * A small button showing information and instructions to use the webapp.
+ *
+ * @author Lyons, Chen, Muro
  */
-
 const InfoButton: React.FC = () => {
   const [showInfo, setShowInfo] = useState(false);
   const infoButtonRef = useRef<HTMLDivElement>(null);
 
   // Toggle the visibility of the info box
 
-  const handleInfoToggle = () => {
+  const handleInfoToggle = useCallback(() => {
     setShowInfo(!showInfo);
-  };
+  }, [showInfo]);
 
   // Close the info box if clicking outside
-  const handleClickOutside = (event: MouseEvent) => {
+  const handleClickOutside = useCallback((event: MouseEvent) => {
     if (
       infoButtonRef.current &&
       !infoButtonRef.current.contains(event.target as Node)
     ) {
       setShowInfo(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     // Add event listener for the click when the component is mounted
@@ -36,9 +37,9 @@ const InfoButton: React.FC = () => {
   }, []);
 
   // Stop the propagation of the click event to prevent handleClickOutside from being triggered
-  const stopPropagation = (event: React.MouseEvent) => {
+  const stopPropagation = useCallback((event: React.MouseEvent) => {
     event.stopPropagation();
-  };
+  }, []);
 
   return (
     <>

frontend/src/Components/Conditions/UploadPanel.tsx

@@ -11,6 +11,8 @@ interface Props {
 
 /**
  * Create a panel where the user can upload a zip file
+ *
+ * @author Kerbourc'h
  */
 const UploadPanel: FC<Props> = ({ close }) => {
   const [state, setState] = useState<
@@ -57,7 +59,7 @@ const UploadPanel: FC<Props> = ({ close }) => {
                   } else {
                     setState('sent-error');
                   }
-                  console.warn(error);
+                  console.warn('Error while uploading new survey: ', error);
                   setTimeout(() => setState('waiting'), 3000);
                 },
               );

frontend/src/Components/Inputs/SingleFileInput.tsx

@@ -14,6 +14,8 @@ interface Props {
 
 /**
  * Create a file input (either using the default file selector or using drag 'n' drop)
+ *
+ * @author Kerbourc'h
  */
 const SingleFileInput: FC<Props> = ({
   displayName,

frontend/src/Components/Map/GradientLine.tsx

@@ -27,8 +27,7 @@ interface Props {
  * GradientLine component to render the path on the map. This path is colored
  * using a palette and the data provided.
  *
- *
- * @author LiRA Map (Called Ways), Kerbourc'h
+ * @author Kerbourc'h
  */
 const GradientLine: FC<Props> = ({
   geometry,

frontend/src/Components/Map/ForceMapUpdate.tsx → frontend/src/Components/Map/Hooks/ForceMapUpdate.tsx

@@ -1,4 +1,4 @@
-import { LatLng } from '../../models/models';
+import { LatLng } from '../../../models/models';
 import { useMap } from 'react-leaflet';
 import React, { useEffect } from 'react';
 

frontend/src/Components/Map/Hooks/useZoom.tsx

@@ -3,6 +3,8 @@ import { useMapEvents } from 'react-leaflet';
 
 /**
  * Zoom implementation on map events
+ *
+ * @author LiraVis
  */
 const useZoom = () => {
   const [zoom, setZoom] = useState<number>();

frontend/src/Components/Map/InfoCard.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../../css/roadinfo_card.css';
 import { IRoad } from '../../models/path';
 
 interface Props {
-  hidden: boolean; // Prop to control visibility
+  /** To control visibility */
+  hidden: boolean;
+  /** The road data to display */
   roadData?: IRoad;
 }
 /**
@@ -16,14 +18,14 @@ const InfoCard: React.FC<Props> = ({ hidden, roadData }) => {
   const navigate = useNavigate(); // Get the navigate function
 
   // Navigate to the "Inspect" page
-  const handleInspect = () => {
+  const handleInspect = useCallback(() => {
     if (!roadData) return;
     const biggestBranch = roadData?.branches.reduce((prev, curr) =>
       prev.length > curr.length ? prev : curr,
     );
 
     navigate('/inspect/paths/' + biggestBranch.join(','));
-  };
+  }, [roadData, navigate]);
 
   if (hidden || !roadData) {
     return null; // Don't render anything if hidden is true

frontend/src/Components/Map/Inputs/Hamburger.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../../../css/Sidebar.css';
 import { getAllSurveyData } from '../../../queries/conditions';
@@ -26,15 +26,17 @@ const Hamburger: React.FC<HamburgerProps> = ({ isOpen, toggle }) => {
 
   useEffect(() => {
     getAllSurveyData((data: SurveyList) => {
-      console.log('Received survey data:', data);
       setSurveys(data);
     });
   }, []);
 
-  const handleSurveyClick = (surveyId: string, _index: number) => {
-    const path = `/inspect/surveys/${surveyId}`;
-    navigate(path);
-  };
+  const handleSurveyClick = useCallback(
+    (surveyId: string, _index: number) => {
+      const path = `/inspect/surveys/${surveyId}`;
+      navigate(path);
+    },
+    [navigate],
+  );
 
   return (
     <>

frontend/src/Components/Map/Inputs/MonthFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import DatePicker from 'react-datepicker';
 import '../../../css/month_filter.css';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -36,8 +36,9 @@ interface MonthFilterProps {
   onStartChange: (date: any) => void;
   /** function taking argument "date" for End date **/
   onEndChange: (date: any) => void;
-  /** The minimum & maximum date possible **/
+  /** The minimum date possible **/
   minDate: Date;
+  /** The maximum date possible **/
   maxDate: Date;
 }
 

frontend/src/Components/Map/Inputs/MultiSelector.tsx

@@ -24,7 +24,6 @@ interface MultiSelectProps {
  *
  * @author Hansen
  */
-
 const MultiSelector: React.FC<MultiSelectProps> = ({
   handleSelectionChange,
   children,

frontend/src/Components/Map/Inputs/Search.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import {
-  GeoapifyGeocoderAutocomplete,
   GeoapifyContext,
+  GeoapifyGeocoderAutocomplete,
 } from '@geoapify/react-geocoder-autocomplete';
 import '@geoapify/geocoder-autocomplete/styles/minimal.css';
 import '../../../css/search.css';
@@ -12,7 +12,6 @@ interface Props {
    * value: text input in the search bar
    * onPlaceSelect: function taking argument "value"
    */
-
   onPlaceSelect: (value: any) => void;
 }
 
@@ -21,20 +20,14 @@ interface Props {
  *
  * @author Hansen
  */
-
 const Search: React.FC<Props> = ({ onPlaceSelect }) => {
-  function onSuggestionChange(value: any) {
-    console.log(value);
-  }
-
   return (
     <GeoapifyContext apiKey="bb524d9939ae497688b9b2dddc5cf0a2">
       <GeoapifyGeocoderAutocomplete
         placeholder="Enter address here"
         type={'street'}
         filterByCountryCode={['dk', 'sa']} // Denmark and Saudi Arabia
         placeSelect={onPlaceSelect}
-        suggestionsChange={onSuggestionChange}
       />
     </GeoapifyContext>
   );

frontend/src/Components/Map/MapWrapper.tsx

@@ -19,6 +19,8 @@ interface IMapWrapper {
 
 /**
  * MapWrapper is the component to show a map.
+ *
+ * @author LiraVis, Kerbourc'h, Hansen, Muro
  */
 const MapWrapper: FC<IMapWrapper> = ({ children }) => {
   const { center, zoom, minZoom, maxZoom, scaleWidth } = MAP_OPTIONS;