From 7af7649edf67858a6d1a8a50f5b049c539f527dd Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Fri, 16 Feb 2024 14:03:19 +0100
Subject: [PATCH] fix some rendering issue at offers and needs

---
 src/Components/Profile/OverlayProfile.tsx | 41 ++++++++++++++---------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/Components/Profile/OverlayProfile.tsx b/src/Components/Profile/OverlayProfile.tsx
index 2bb77246..7ad21aad 100644
--- a/src/Components/Profile/OverlayProfile.tsx
+++ b/src/Components/Profile/OverlayProfile.tsx
@@ -2,8 +2,8 @@ import * as React from 'react'
 import { MapOverlayPage } from '../Templates'
 import { useItems } from '../Map/hooks/useItems'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useState } from 'react';
-import { Item, UserItem } from '../../types';
+import { useEffect, useState } from 'react';
+import { Item, Tag, UserItem } from '../../types';
 import { getValue } from '../../Utils/GetValue';
 import { useMap } from 'react-leaflet';
 import { LatLng } from 'leaflet';
@@ -28,19 +28,19 @@ export function OverlayProfile() {
     const navigate = useNavigate();
 
     const [owner, setOwner] = useState<UserItem>();
+    const [offers, setOffers] = useState<Array<Tag>>([]);
+    const [needs, setNeeds] = useState<Array<Tag>>([]);
+
 
     const addFilterTag = useAddFilterTag();
 
 
 
-    React.useEffect(() => {
+    useEffect(() => {
         const itemId = location.pathname.split("/")[2];
         const item = items.find(i => i.id === itemId);
         item && setItem(item);
-        console.log(item);
-        console.log(user);
 
-        item?.layer?.itemOwnerField && setOwner(getValue(item, item.layer?.itemOwnerField));
         const bounds = map.getBounds();
         const x = bounds.getEast() - bounds.getWest()
         if (windowDimension.width > 768)
@@ -49,6 +49,21 @@ export function OverlayProfile() {
     }, [location, items])
 
 
+    useEffect(() => {
+        item?.layer?.itemOwnerField && setOwner(getValue(item, item.layer?.itemOwnerField));
+        item.layer?.itemOffersField && getValue(item, item.layer.itemOffersField).map(o => {
+            const tag = tags.find(t => t.id === o.tags_id);
+            tag && setOffers(current => [...current, tag])
+        })
+        item.layer?.itemNeedsField && getValue(item, item.layer.itemNeedsField).map(n => {
+            const tag = tags.find(t => t.id === n.tags_id);
+            tag && setNeeds(current => [...current, tag])
+        })
+
+    }, [item])
+
+
+
     return (
         <MapOverlayPage className='tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-[calc(100dvh-96px)] md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-max-w-3xl !tw-left-auto tw-top-0 tw-bottom-0'>
             {item &&
@@ -69,29 +84,23 @@ export function OverlayProfile() {
                     <div className='tw-overflow-y-auto tw-h-full tw-pt-4 fade'>
                         <div className='tw-grid tw-grid-cols-1 xl:tw-grid-cols-2'>
                             {
-                                item.layer?.itemOffersField && getValue(item, item.layer.itemOffersField).length > 0 ?
+                                offers.length > 0 ?
                                     <div className='tw-col-span-1'>
                                         <h3 className='-tw-mb-2'>Offers</h3>
                                         < div className='tw-flex tw-flex-wrap tw-mb-2'>
                                             {
-                                                item.layer?.itemOffersField && getValue(item, item.layer.itemOffersField).map(o => {
-                                                    const tag = tags.find(t => t.id === o.tags_id);
-                                                    return (tag ? <TagView key={tag?.id} tag={tag} onClick={() => addFilterTag(tag)}/> : "")
-                                                })
+                                                offers.map(o => <TagView key={o?.id} tag={o} onClick={() => addFilterTag(o)} />)
                                             }
                                         </div>
                                     </div> : ""
                             }
                             {
-                                item.layer?.itemNeedsField && getValue(item, item.layer.itemNeedsField).length > 0 ?
+                                needs.length > 0 ?
                                     <div className='tw-col-span-1'>
                                         <h3 className='-tw-mb-2 tw-col-span-1'>Needs</h3>
                                         < div className='tw-flex tw-flex-wrap  tw-mb-4'>
                                             {
-                                                item.layer?.itemNeedsField && getValue(item, item.layer.itemNeedsField).map(o => {
-                                                    const tag = tags.find(t => t.id === o.tags_id);
-                                                    return (tag ? <TagView key={tag?.id} tag={tag} onClick={() => addFilterTag(tag)}/> : "")
-                                                })
+                                                needs.map(n => <TagView key={n?.id} tag={n} onClick={() => addFilterTag(n)} />)
                                             }
                                         </div>
                                     </div> : ""