basic Market View

src/Components/Templates/MarketView.tsx

@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+import { useItems } from "../Map/hooks/useItems"
+import { useState } from "react";
+import { Tag } from "../../types";
+import { useTags } from "../Map/hooks/useTags";
+import { getValue } from "../../Utils/GetValue";
+import { MapOverlayPage } from "./MapOverlayPage";
+import { TagView } from "./TagView";
+import { useNavigate } from "react-router-dom";
+
+
+function groupAndCount(arr) {
+  const grouped = arr.reduce((acc, obj) => {
+    const found = acc.find(item => JSON.stringify(item.object) === JSON.stringify(obj));
+
+    if (found) {
+      found.count += 1;
+    } else {
+      acc.push({ object: obj, count: 1 });
+    }
+
+    return acc;
+  }, []);
+
+  return grouped.sort((a, b) => b.count - a.count);
+}
+
+
+export const MarketView = () => {
+
+  const [offers, setOffers] = useState<Array<Tag>>([]);
+  const [needs, setNeeds] = useState<Array<Tag>>([]);
+  const navigate = useNavigate();
+
+  const items = useItems();
+  const tags = useTags();
+
+  useEffect(() => {
+    setOffers([]);
+    setNeeds([]);
+    items.map(i => {
+      i?.layer?.itemOffersField && getValue(i, i.layer.itemOffersField)?.map(o => {
+        const tag = tags.find(t => t.id === o.tags_id);
+        tag && setOffers(current => [...current, tag])
+      })
+      i?.layer?.itemNeedsField && getValue(i, i.layer.itemNeedsField)?.map(n => {
+        const tag = tags.find(t => t.id === n.tags_id);
+        tag && setNeeds(current => [...current, tag])
+      })
+    })
+    console.log(offers);
+    
+  }, [items])
+
+
+  return (
+    <MapOverlayPage className='tw-rounded-none tw-overflow-y-auto tw-bg-base-200 !tw-p-4'>
+      <div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2">
+        <div>
+          <p className="tw-text-lg tw-font-bold">Offers</p>
+          <div className="tw-flex tw-flex-wrap">
+      {groupAndCount(offers).map(o => (
+        <TagView onClick={()=> navigate(`/?tags=${o.object.name}`)} key={o.object.id} tag={o.object} count={o.count}></TagView>
+      ))}
+      </div>
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">Needs</p>
+          <div className="tw-flex tw-flex-wrap">
+      {groupAndCount(needs).map(o => (
+        <TagView onClick={()=> navigate(`/?tags=${o.object.name}`)} key={o.object.id} tag={o.object} count={o.count}></TagView>
+      ))}
+      </div>
+        </div>
+      </div>
+
+    </MapOverlayPage>
+  )
+}

src/Components/Templates/TagView.tsx

@@ -2,14 +2,19 @@ import * as React from 'react'
 import { decodeTag } from '../../Utils/FormatTags'
 import { Tag } from '../../types'
 
-export const TagView = ({tag, heighlight, onClick} : {tag: Tag, heighlight?: boolean, onClick?: (e)=> void}) => {
+export const TagView = ({ tag, heighlight, onClick, count }: { tag: Tag, heighlight?: boolean, onClick?: (e) => void, count?: number }) => {
   return (
-     // Use your imagination to render suggestions.
+    // Use your imagination to render suggestions.
 
-    <div key={tag.name} onClick={onClick} className={`tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card  tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-4 tw-border-base-200 tw-shadow-lg'}`} style={{ backgroundColor: tag.color ? tag.color : "#666" }}>
-      <div className="tw-card-actions tw-justify-end">
-      </div><b>{decodeTag(tag.name)}</b>
-    </div>
+<div 
+  key={tag.name} 
+  onClick={onClick} 
+  className={`tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-4 tw-border-base-200 tw-shadow-lg'}`} 
+  style={{ backgroundColor: tag.color ? tag.color : "#666" }}
+>
+  <b>{decodeTag(tag.name)}</b>
+  {count && <span className="tw-ml-2">({count})</span>}
+</div>
 
   )
 }