From 24dcbff68b28fcd6135e38e634726419021b46e9 Mon Sep 17 00:00:00 2001
From: ascariandrea <dev.ascariandrea@gmail.com>
Date: Wed, 3 Jan 2024 16:53:40 +0100
Subject: [PATCH] fix(ui): display items map and list in areas page

---
 .../ui/src/components/lists/AreaList.tsx      |  7 +-
 .../@liexp/ui/src/containers/AreasMapBox.tsx  |  8 +-
 .../ui/src/templates/SearchAreaTemplate.tsx   | 79 ++++++++++++++++++-
 3 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/packages/@liexp/ui/src/components/lists/AreaList.tsx b/packages/@liexp/ui/src/components/lists/AreaList.tsx
index c7571dfd0..ace3767cd 100644
--- a/packages/@liexp/ui/src/components/lists/AreaList.tsx
+++ b/packages/@liexp/ui/src/components/lists/AreaList.tsx
@@ -54,7 +54,12 @@ export const AreaListItem: React.FC<
     true,
   );
 
-  const mediaSrc = media.data?.data?.[0]?.location ?? defaultImage;
+  const mediaSrc = React.useMemo(() => {
+    if (media.data?.data?.[0]?.location) {
+      return media.data?.data?.[0]?.location;
+    }
+    return defaultImage;
+  }, [media.data?.data?.[0]?.location]);
 
   return (
     <StyledBox
diff --git a/packages/@liexp/ui/src/containers/AreasMapBox.tsx b/packages/@liexp/ui/src/containers/AreasMapBox.tsx
index ded6b9791..055991067 100644
--- a/packages/@liexp/ui/src/containers/AreasMapBox.tsx
+++ b/packages/@liexp/ui/src/containers/AreasMapBox.tsx
@@ -1,14 +1,12 @@
 import * as React from "react";
 import AreasMap, { type AreasMapProps } from "../components/AreasMap";
 import QueriesRenderer from "../components/QueriesRenderer";
-import { useEndpointQueries } from "../hooks/useEndpointQueriesProvider";
 
 const AreasMapBox: React.FC<AreasMapProps> = (props) => {
-  const Queries = useEndpointQueries();
   return (
     <QueriesRenderer
-      queries={{
-        areas: Queries.Area.list.useQuery(
+      queries={(Q) => ({
+        areas: Q.Area.list.useQuery(
           {
             pagination: { perPage: 20, page: 1 },
             filter: null,
@@ -20,7 +18,7 @@ const AreasMapBox: React.FC<AreasMapProps> = (props) => {
           undefined,
           false,
         ),
-      }}
+      })}
       render={({ areas }) => {
         return <AreasMap {...props} areas={areas.data} />;
       }}
diff --git a/packages/@liexp/ui/src/templates/SearchAreaTemplate.tsx b/packages/@liexp/ui/src/templates/SearchAreaTemplate.tsx
index 92a32bcbd..ae3416a12 100644
--- a/packages/@liexp/ui/src/templates/SearchAreaTemplate.tsx
+++ b/packages/@liexp/ui/src/templates/SearchAreaTemplate.tsx
@@ -1,8 +1,13 @@
 import { type Area } from "@liexp/shared/lib/io/http";
 import * as React from "react";
+import { AutoSizer } from 'react-virtualized';
+import AreasMap from '../components/AreasMap';
 import { AutocompleteAreaInput } from "../components/Input/AutocompleteAreaInput";
-import { Container } from "../components/mui";
+import QueriesRenderer from '../components/QueriesRenderer';
+import { AreaList } from '../components/lists/AreaList';
+import { Box, Container, Grid } from "../components/mui";
 import { PageContentBox } from "../containers/PageContentBox";
+import { useTheme } from '../theme';
 
 export interface SearchAreaTemplateProps {
   onAreaClick: (a: Area.Area) => void;
@@ -11,6 +16,7 @@ export interface SearchAreaTemplateProps {
 const SearchAreaTemplate: React.FC<SearchAreaTemplateProps> = ({
   onAreaClick,
 }) => {
+  const theme = useTheme();
   return (
     <Container style={{ height: innerHeight, width: "100%" }}>
       <PageContentBox path="areas" />
@@ -23,6 +29,77 @@ const SearchAreaTemplate: React.FC<SearchAreaTemplateProps> = ({
         }}
         discrete={true}
       />
+      <QueriesRenderer
+        queries={Q => ({
+          areas: Q.Area.list.useQuery(
+            {
+              filter: null,
+            },
+            undefined,
+            false,
+          ),
+        })}
+        render={({ areas: { data: areas } }) => {
+          return (
+            <AutoSizer
+              defaultHeight={600}
+              style={{ width: "100%", height: "100%" }}
+            >
+              {({ width, height }) => {
+                return (
+                  <Grid container style={{ height, width: "100%" }}>
+                    <Grid item md={12}>
+                      <PageContentBox path="areas" />
+                    </Grid>
+
+                    <Grid
+                      item
+                      md={8}
+                      style={{
+                        paddingLeft: theme.spacing(2),
+                        paddingRight: theme.spacing(2),
+                      }}
+                    >
+                      <Box style={{ width: "100%", maxHeight: "100%" }}>
+                        <AreasMap
+                          areas={areas}
+                          height={height * (2 / 3)}
+                          onMapClick={(features) => {
+                            if (features.length > 0) {
+                              const area: any = features[0].getProperties();
+                              onAreaClick(area);
+                            }
+                          }}
+                        />
+                      </Box>
+                    </Grid>
+                    <Grid
+                      item
+                      md={4}
+                      style={{
+                        maxHeight: "100%",
+                        padding: theme.spacing(2),
+                      }}
+                    >
+                      <AreaList
+                        areas={areas.map((a) => ({ ...a, selected: false }))}
+                        onAreaClick={onAreaClick}
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          width: "100%",
+                          height: "100%",
+                          overflow: "scroll",
+                        }}
+                      />
+                    </Grid>
+                  </Grid>
+                );
+              }}
+            </AutoSizer>
+          );
+        }}
+      />
     </Container>
   );
 };