antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix some rendering issue at offers and needs

Browse Source
This commit is contained in:
Anton Tranelis 2024-02-16 14:03:19 +01:00
parent 3a5430f077
commit 7af7649edf
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/Components/Profile/OverlayProfile.tsx
View File

@ -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> : ""