front: Fetch siblings directly from API.

Replaced the previous method of fetching sibling regions, which was to fetch the parent region then fetch its subregions, with a direct call to an API endpoint that fetches the siblings. This simplifies the code in ListOfRegions.jsx and speeds up the application. Issue: #159 Signed-off-by: Nikolay Martyanov <[email protected]>
uncovering-world · Dec 27, 2023 · b717c94 · b717c94
1 parent 10cf654
commit b717c94
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
@@ -17,6 +17,19 @@ export const fetchRootRegions = async (hierarchyId) => {
   }
 };
 
+export const fetchSiblings = async (regionId, hierarchyId) => {
+  try {
+    const response = await api.get(`/api/regions/${regionId}/siblings`, { params: { hierarchyId } });
+    if (response.status === 404) {
+      return [];
+    }
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching siblings:', error);
+    return [];
+  }
+};
+
 export const fetchSubregions = async (regionId, hierarchyId) => {
   try {
     const response = await api.get(`/api/regions/${regionId}/subregions`, { params: { hierarchyId } });

diff --git a/frontend/src/components/ListOfRegions.jsx b/frontend/src/components/ListOfRegions.jsx
@@ -2,7 +2,9 @@ import React, { useState, useEffect } from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import { Box } from '@mui/material';
-import { fetchAncestors, fetchRootRegions, fetchSubregions } from '../api';
+import {
+  fetchRootRegions, fetchSiblings, fetchSubregions,
+} from '../api';
 import { useNavigation } from './NavigationContext';
 
 /**
@@ -26,20 +28,7 @@ function ListOfRegions() {
         if (hasSubregions) {
           newRegions = await fetchSubregions(regionId, selectedHierarchy.hierarchyId);
         } else {
-          // Fecth the siblings of the selected region
-          // TODO: do not fetch the siblings if they are already fetched. Address in #159.
-          // First - fetch the parent of the selected region
-          // TODO: add a dedicated API endpoint for fetching siblings. Address in #159.
-          const ancestors = await fetchAncestors(regionId, selectedHierarchy.hierarchyId);
-          // The parent is the second item in the ancestors array as the
-          // first item is the region itself.
-          if (!ancestors || ancestors.length < 2) {
-            setError('Unable to find the parent region, and hence the siblings.');
-            return;
-          }
-          const parent = ancestors[1];
-          // Then fetch the subregions of the parent
-          newRegions = await fetchSubregions(parent.id, selectedHierarchy.hierarchyId);
+          newRegions = await fetchSiblings(regionId, selectedHierarchy.hierarchyId);
         }
       } else {
         newRegions = await fetchRootRegions(selectedHierarchy.hierarchyId);