LF-4672 (1) - Rtk upgrade/locations rebase

packages/api/src/models/locationModel.js

@@ -268,7 +268,7 @@ class Location extends baseModel {
     }
   }
 
-  /* Mirrors cropLocationsSelector but without buffer zone (which does not return a polygon) */
+  /* Mirrors useCropLocations hook but without buffer zone (which does not return a polygon) */
   static async getCropSupportingLocationsByFarmId(farm_id, trx) {
     return Location.query(trx)
       .where({ 'location.farm_id': farm_id })

packages/webapp/public/locales/en/translation.json

@@ -788,6 +788,7 @@
       "PERIMETER": "Perimeter",
       "TOTAL_AREA": "Total area"
     },
+    "ASSETS_LOADING": "Assets are loading...",
     "BARN": {
       "ANIMALS": "Is this area used for housing animals?",
       "COLD_STORAGE": "Does this barn have cold storage?",
@@ -906,6 +907,7 @@
       "RESIDENCE": "Residence",
       "SATELLITE": "Satellite background",
       "SENSOR": "Sensor",
+      "SENSOR_ARRAY": "Sensor array",
       "SHOW_ALL": "Show all",
       "SOIL_SAMPLE_LOCATION": "Soil sample location",
       "SURFACE_WATER": "Surface water",

packages/webapp/src/apiConfig.js

@@ -39,6 +39,8 @@ export const farmUrl = `${URI}/farm`;
 export const inviteUserUrl = `${URI}/user/invite`;
 //export const fieldURL = `${URI}/field`;
 export const locationURL = `${URI}/location`;
+export const getLocationsByFarmIdUrl = (farm_id) => `${locationURL}/farm/${farm_id}`;
+export const checkDeleteLocationUrl = `${locationURL}/check_delete`;
 export const cropURL = `${URI}/crop`;
 export const cropVarietyURL = `${URI}/crop_variety`;
 export const logURL = `${URI}/log`;
@@ -97,6 +99,7 @@ export const marketDirectoryInfoUrl = `${URI}/market_directory_info`;
 export const marketProductCategoryUrl = `${URI}/market_product_categories`;
 export const marketDirectoryPartnersUrl = `${URI}/market_directory_partners`;
 export const supportTicketUrl = `${URI}/support_ticket`;
+export const logUserInfoUrl = `${URI}/userLog`;
 export const offlineEventLogUrl = `${URI}/offline_event_log`;
 
 export const url = URI;
@@ -106,8 +109,10 @@ export default {
   pseudoUserUrl,
   farmUrl,
   inviteUserUrl,
+  logUserInfoUrl,
   //fieldURL,
   locationURL,
+  getLocationsByFarmIdUrl,
   cropURL,
   cropVarietyURL,
   logURL,

packages/webapp/src/components/Crop/Management.jsx

@@ -1,18 +1,17 @@
 import Layout from '../Layout';
 import CropHeader from './CropHeader';
 import RouterTab from '../RouterTab';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { AddLink, Semibold } from '../Typography';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { CardWithStatusContainer } from '../CardWithStatus/CardWithStatusContainer/CardWithStatusContainer';
 import { ManagementPlanCard } from '../CardWithStatus/ManagementPlanCard/ManagementPlanCard';
 import Input from '../Form/Input';
-import { useSelector } from 'react-redux';
-import { cropLocationsSelector } from '../../containers/locationSlice';
 import LocationCreationModal from '../LocationCreationModal';
 import CropPlansModal from '../Modals/CropModals/CropPlansModal';
 import navStyles from '@navStyles';
+import useCropLocations from '../../hooks/location/useCropLocations';
 
 export default function PureCropManagement({
   history,
@@ -38,7 +37,7 @@ export default function PureCropManagement({
         )
       : managementPlanCardContents;
   }, [searchString, managementPlanCardContents]);
-  const cropLocations = useSelector(cropLocationsSelector);
+  const { locations: cropLocations } = useCropLocations();
   const [createCropLocation, setCreateCropLocation] = useState(false);
 
   const dismissLocationCreationModal = () => {

packages/webapp/src/components/Loading/Loading.jsx

@@ -1,7 +1,7 @@
 import { ReactComponent as LoadingAnimation } from '../../assets/images/signUp/animated_loading_farm.svg';
 import { colors } from '../../assets/theme';
 
-export function Loading({ children = <LoadingAnimation />, style, ...props }) {
+export function Loading({ children = <LoadingAnimation />, style = {}, ...props }) {
   return (
     <div
       style={{

packages/webapp/src/components/LocationDetailLayout/PureLocationDetailLayout.jsx

@@ -9,10 +9,9 @@ import LineDetails from './LineDetails/LineDetails';
 import PointDetails from './PointDetails/PointDetails';
 import RouterTab from '../RouterTab';
 import useLocationRouterTabs from '../../containers/LocationDetails/useLocationRouterTabs';
-import { useSelector } from 'react-redux';
-import { locationByIdSelector } from '../../containers/locationSlice';
 import { Variant } from '../RouterTab/Tab';
 import CardLayout from '../Layout/CardLayout';
+import useLocationsById from '../../hooks/location/useLocationsById';
 
 export function PureLocationDetailLayout({
   history,
@@ -51,8 +50,9 @@ export function PureLocationDetailLayout({
 
   // TODO: Move this up to container when just 1 container exists for locations
   const { location_id } = match.params;
-  const location =
-    isViewLocationPage && location_id && useSelector(locationByIdSelector(location_id));
+  const { locations: locationById } = useLocationsById(location_id);
+  const location = isViewLocationPage && location_id && locationById;
+
   const routerTabs = location && useLocationRouterTabs(location);
 
   const details = useMemo(() => {

packages/webapp/src/components/Map/Footer/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import MapDrawer from '../../MapDrawer';
-import { locationEnum } from '../../../containers/Map/constants';
+import { MAP_LOCATION_TYPE_BY_FIGURE } from '../../../containers/Map/constants';
 import { TourProviderWrapper } from '../../TourProviderWrapper/TourProviderWrapper';
 import FloatingContainer from '../../FloatingContainer';
 import MapNavigationButtons from './MapNavigationButtons';
@@ -22,26 +22,7 @@ export default function PureMapFooter({
   filterSettings,
   onFilterMenuClick,
   onAddMenuClick,
-  availableFilterSettings = {
-    area: [
-      locationEnum.barn,
-      locationEnum.ceremonial_area,
-      locationEnum.farm_site_boundary,
-      locationEnum.field,
-      locationEnum.garden,
-      locationEnum.greenhouse,
-      locationEnum.surface_water,
-      locationEnum.natural_area,
-      locationEnum.residence,
-    ],
-    line: [locationEnum.buffer_zone, locationEnum.watercourse, locationEnum.fence],
-    point: [
-      locationEnum.gate,
-      locationEnum.water_valve,
-      locationEnum.soil_sample_location,
-      locationEnum.sensor,
-    ],
-  },
+  availableFilterSettings = MAP_LOCATION_TYPE_BY_FIGURE,
   isMapFilterSettingActive = false,
   isCompactSideMenu,
   isOffline,

packages/webapp/src/components/MapDrawer/index.jsx

@@ -20,6 +20,7 @@ import { ReactComponent as Gate } from '../../assets/images/farmMapFilter/Gate.s
 import { ReactComponent as SoilSampleLocation } from '../../assets/images/farmMapFilter/SoilSampleLocation.svg';
 import { ReactComponent as WaterValve } from '../../assets/images/farmMapFilter/WaterValve.svg';
 import { ReactComponent as Sensor } from '../../assets/images/farmMapFilter/Sensor.svg';
+import { ReactComponent as SensorArray } from '../../assets/images/farmMapFilter/SensorArray.svg';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { locationEnum } from '../../containers/Map/constants';
@@ -142,6 +143,11 @@ export default function MapDrawer({
           icon: () => <Sensor style={{ transform: 'translate(-5px, 5px)' }} />,
           key: locationEnum.sensor,
         },
+        {
+          name: t('FARM_MAP.MAP_FILTER.SENSOR_ARRAY'),
+          icon: () => <SensorArray />,
+          key: locationEnum.sensor_array,
+        },
         {
           name: t('FARM_MAP.MAP_FILTER.SOIL_SAMPLE_LOCATION'),
           icon: () => <SoilSampleLocation />,

packages/webapp/src/components/Modals/LoadingMapModal/index.tsx

@@ -0,0 +1,40 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useTranslation } from 'react-i18next';
+import styles from './styles.module.scss';
+import { Main } from '../../Typography';
+import { Loading } from '../../Loading/Loading';
+import { Dialog } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles((_theme) => ({
+  paper: (_props) => ({
+    overflow: 'inherit',
+  }),
+}));
+
+export default function LoadingMapModal({ isOpen }: { isOpen: boolean }) {
+  const { t } = useTranslation();
+  const classes = useStyles();
+  return (
+    <Dialog PaperProps={{ className: classes.paper }} open={isOpen} scroll="paper">
+      <div className={styles.container}>
+        <Loading />
+        <Main>{t('FARM_MAP.ASSETS_LOADING')}</Main>
+      </div>
+    </Dialog>
+  );
+}

packages/webapp/src/components/Modals/LoadingMapModal/styles.module.scss

@@ -0,0 +1,57 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+.container {
+  display: flex;
+  // align-items: center;
+  flex-direction: column;
+  max-width: 312px;
+  width: 90vw;
+  // height: 320px;
+  background: #fafafd;
+  border-radius: 7.05466px;
+  position: relative;
+  padding: 24px;
+}
+
+.button {
+  margin-top: 24px;
+  box-shadow: 0px 2px 4px rgba(102, 115, 138, 0.3);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .downloadSvg {
+    stroke: var(--labels);
+    margin-right: 4px;
+  }
+
+  .mailSvg {
+    stroke: var(--labels);
+    margin-right: 8px;
+    font-size: 18px;
+  }
+}
+
+.button:active {
+  box-shadow: none;
+  color: var(--grey900);
+  border-color: var(--grey600);
+
+  .svg {
+    stroke: var(--grey900);
+  }
+}

packages/webapp/src/components/Task/AddSoilAmendmentProducts/index.tsx

@@ -23,7 +23,7 @@ import { type ProductId, TASK_PRODUCT_FIELD_NAMES } from './types';
 import type { SoilAmendmentProduct } from '../../../store/api/types';
 import { ReactComponent as PlusCircleIcon } from '../../../assets/images/plus-circle.svg';
 import styles from './styles.module.scss';
-import { Location } from './QuantityApplicationRate';
+import { FlattenedInternalArea } from '../../../hooks/location/types';
 
 export type AddSoilAmendmentProductsProps = Pick<
   ProductCardProps,
@@ -32,7 +32,7 @@ export type AddSoilAmendmentProductsProps = Pick<
   products: SoilAmendmentProduct[];
   purposes?: { id: number; key: string }[];
   fertiliserTypes?: { id: number; key: string }[];
-  locations: Location[];
+  locations: FlattenedInternalArea[];
 };
 
 interface ProductFields {

packages/webapp/src/components/Task/PureIrrigationTask/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Label, Underlined } from '../../Typography';
 import { useTranslation } from 'react-i18next';
 import { Controller } from 'react-hook-form';
@@ -16,8 +16,8 @@ import WaterUsageCalculatorModal from '../../Modals/WaterUsageCalculatorModal';
 import { getIrrigationTaskTypes } from '../../../containers/Task/IrrigationTaskTypes/saga';
 import { useDispatch, useSelector } from 'react-redux';
 import { irrigationTaskTypesSliceSelector } from '../../../containers/irrigationTaskTypesSlice';
-import { cropLocationsSelector } from '../../../containers/locationSlice';
 import { BsFillExclamationCircleFill } from 'react-icons/bs';
+import useCropLocations from '../../../hooks/location/useCropLocations';
 
 export const generateIrrigationTypeOption = (type, defaultTypes, t) => {
   return {
@@ -51,7 +51,7 @@ export default function PureIrrigationTask({
   const [showWaterUseCalculatorModal, setShowWaterUseCalculatorModal] = useState(false);
   const irrigationTaskTypes =
     useSelector(irrigationTaskTypesSliceSelector)?.irrigationTaskTypes || [];
-  const cropLocations = useSelector(cropLocationsSelector);
+  const { locations: cropLocations } = useCropLocations();
   const location =
     locations?.length &&
     cropLocations.filter(

packages/webapp/src/components/Task/SoilAmendmentTask/index.tsx

@@ -14,7 +14,6 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import { Controller, FormProvider, UseFormReturn } from 'react-hook-form';
 import {
   useGetSoilAmendmentMethodsQuery,
@@ -28,10 +27,11 @@ import Unit from '../../Form/Unit';
 import AddSoilAmendmentProducts from '../AddSoilAmendmentProducts';
 import { type ProductCardProps } from '../AddSoilAmendmentProducts/ProductCard';
 import { MolecularCompound, Nutrients, TASK_FIELD_NAMES } from '../AddSoilAmendmentProducts/types';
-import type { SoilAmendmentProduct } from '../../../store/api/types';
+import type { SoilAmendmentProduct, WithLocationId } from '../../../store/api/types';
 import { furrow_hole_depth } from '../../../util/convert-units/unit';
 import styles from './styles.module.scss';
-import { locationsSelector } from '../../../containers/locationSlice';
+import useLocationsById from '../../../hooks/location/useLocationsById';
+import { FlattenedInternalArea } from '../../../hooks/location/types';
 
 // Return products in inventory plus removed ones already used in the task.
 const getAvailableProducts = (
@@ -46,10 +46,10 @@ type PureSoilAmendmentTaskProps = UseFormReturn &
   Pick<ProductCardProps, 'farm' | 'system' | 'products'> & {
     disabled: boolean;
     task?: {
-      locations: { location_id: number }[];
+      locations: FlattenedInternalArea[];
       soil_amendment_task_products: SoilAmendmentProduct[];
     };
-    locations: { location_id: number }[];
+    locations: WithLocationId[];
   };
 
 export const hasNoValue = (
@@ -79,9 +79,7 @@ const PureSoilAmendmentTask = ({
 
   const { task, locations: propLocations } = props;
   const taskLocationIds = (task?.locations || propLocations)?.map(({ location_id }) => location_id);
-  const locations = useSelector(locationsSelector).filter(({ location_id }) =>
-    taskLocationIds?.includes(location_id),
-  );
+  const { locations = [] } = useLocationsById<FlattenedInternalArea>(taskLocationIds);
 
   const { data: methods = [] } = useGetSoilAmendmentMethodsQuery();
   const { data: purposes = [] } = useGetSoilAmendmentPurposesQuery();

packages/webapp/src/containers/Animals/Inventory/useAnimalInventory.tsx

@@ -36,10 +36,8 @@ import { AnimalOrBatchKeys } from '../types';
 import { generateInventoryId } from '../../../util/animal';
 import { AnimalTypeIconKey, isAnimalTypeIconKey } from '../../../components/Icons/icons';
 import { createSingleAnimalViewURL } from '../../../util/siteMapConstants';
-import { useSelector } from 'react-redux';
-import { locationsSelector } from '../../locationSlice';
-import { Location } from '../../../types';
 import { getComparator, orderEnum, animalDescendingComparator } from '../../../util/sort';
+import useLocations from '../../../hooks/location/useLocations';
 
 export type AnimalInventoryItem = {
   id: string;
@@ -276,7 +274,7 @@ export const buildInventory = ({
 };
 
 const useAnimalInventory = (showRemoved = false) => {
-  const { data, isLoading } = useQueries([
+  const { data, isLoading: isLoadingAnimalsData } = useQueries([
     { label: 'animals', hook: useGetAnimalsQuery },
     { label: 'animalBatches', hook: useGetAnimalBatchesQuery },
     { label: 'customAnimalBreeds', hook: useGetCustomAnimalBreedsQuery },
@@ -295,12 +293,14 @@ const useAnimalInventory = (showRemoved = false) => {
     defaultAnimalTypes,
   } = data;
 
-  const locations: Location[] = useSelector(locationsSelector);
+  const { locations, isLoading: isLoadingLocations } = useLocations();
   const locationsMap = locations?.reduce(
     (map, { location_id, name }) => ({ ...map, [location_id]: name }),
     {},
   );
 
+  const isLoading = isLoadingAnimalsData || isLoadingLocations;
+
   const inventory = useMemo(() => {
     if (isLoading) {
       return [];