utopia-ui 3.0.0-alpha.75 → 3.0.0-alpha.76

package/dist/index.js

@@ -3902,31 +3902,41 @@ var TagView = function (_a) {
 };
 
 function OverlayProfile() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     var location = useLocation();
     var items = useItems();
-    var _g = useState({}), item = _g[0], setItem = _g[1];
+    var _c = useState({}), item = _c[0], setItem = _c[1];
     var map = useMap();
     var windowDimension = useWindowDimensions();
     var tags = useTags();
     var user = useAuth().user;
     var navigate = useNavigate();
-    var _h = useState(), owner = _h[0], setOwner = _h[1];
+    var _d = useState(), owner = _d[0], setOwner = _d[1];
+    var _e = useState([]), offers = _e[0], setOffers = _e[1];
+    var _f = useState([]), needs = _f[0], setNeeds = _f[1];
     var addFilterTag = useAddFilterTag();
-    React.useEffect(function () {
-        var _a, _b;
+    useEffect(function () {
         var itemId = location.pathname.split("/")[2];
         var item = items.find(function (i) { return i.id === itemId; });
         item && setItem(item);
-        console.log(item);
-        console.log(user);
-        ((_a = item === null || item === void 0 ? void 0 : item.layer) === null || _a === void 0 ? void 0 : _a.itemOwnerField) && setOwner(getValue(item, (_b = item.layer) === null || _b === void 0 ? void 0 : _b.itemOwnerField));
         var bounds = map.getBounds();
         var x = bounds.getEast() - bounds.getWest();
         if (windowDimension.width > 768)
             if (item === null || item === void 0 ? void 0 : item.position.coordinates[0])
                 map.setView(new LatLng(item === null || item === void 0 ? void 0 : item.position.coordinates[1], (item === null || item === void 0 ? void 0 : item.position.coordinates[0]) + x / 4));
     }, [location, items]);
+    useEffect(function () {
+        var _a, _b, _c, _d;
+        ((_a = item === null || item === void 0 ? void 0 : item.layer) === null || _a === void 0 ? void 0 : _a.itemOwnerField) && setOwner(getValue(item, (_b = item.layer) === null || _b === void 0 ? void 0 : _b.itemOwnerField));
+        ((_c = item.layer) === null || _c === void 0 ? void 0 : _c.itemOffersField) && getValue(item, item.layer.itemOffersField).map(function (o) {
+            var tag = tags.find(function (t) { return t.id === o.tags_id; });
+            tag && setOffers(function (current) { return __spreadArray(__spreadArray([], current, true), [tag], false); });
+        });
+        ((_d = item.layer) === null || _d === void 0 ? void 0 : _d.itemNeedsField) && getValue(item, item.layer.itemNeedsField).map(function (n) {
+            var tag = tags.find(function (t) { return t.id === n.tags_id; });
+            tag && setNeeds(function (current) { return __spreadArray(__spreadArray([], current, true), [tag], false); });
+        });
+    }, [item]);
     return (React.createElement(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 &&
         React.createElement(React.Fragment, null,
             React.createElement("div", { className: 'tw-flex tw-flex-row' },
@@ -3941,20 +3951,14 @@ function OverlayProfile() {
                             React.createElement("path", { d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" }))) : ""),
             React.createElement("div", { className: 'tw-overflow-y-auto tw-h-full tw-pt-4 fade' },
                 React.createElement("div", { className: 'tw-grid tw-grid-cols-1 xl:tw-grid-cols-2' },
-                    ((_c = item.layer) === null || _c === void 0 ? void 0 : _c.itemOffersField) && getValue(item, item.layer.itemOffersField).length > 0 ?
+                    offers.length > 0 ?
                         React.createElement("div", { className: 'tw-col-span-1' },
                             React.createElement("h3", { className: '-tw-mb-2' }, "Offers"),
-                            React.createElement("div", { className: 'tw-flex tw-flex-wrap tw-mb-2' }, ((_d = item.layer) === null || _d === void 0 ? void 0 : _d.itemOffersField) && getValue(item, item.layer.itemOffersField).map(function (o) {
-                                var tag = tags.find(function (t) { return t.id === o.tags_id; });
-                                return (tag ? React.createElement(TagView, { key: tag === null || tag === void 0 ? void 0 : tag.id, tag: tag, onClick: function () { return addFilterTag(tag); } }) : "");
-                            }))) : "",
-                    ((_e = item.layer) === null || _e === void 0 ? void 0 : _e.itemNeedsField) && getValue(item, item.layer.itemNeedsField).length > 0 ?
+                            React.createElement("div", { className: 'tw-flex tw-flex-wrap tw-mb-2' }, offers.map(function (o) { return React.createElement(TagView, { key: o === null || o === void 0 ? void 0 : o.id, tag: o, onClick: function () { return addFilterTag(o); } }); }))) : "",
+                    needs.length > 0 ?
                         React.createElement("div", { className: 'tw-col-span-1' },
                             React.createElement("h3", { className: '-tw-mb-2 tw-col-span-1' }, "Needs"),
-                            React.createElement("div", { className: 'tw-flex tw-flex-wrap  tw-mb-4' }, ((_f = item.layer) === null || _f === void 0 ? void 0 : _f.itemNeedsField) && getValue(item, item.layer.itemNeedsField).map(function (o) {
-                                var tag = tags.find(function (t) { return t.id === o.tags_id; });
-                                return (tag ? React.createElement(TagView, { key: tag === null || tag === void 0 ? void 0 : tag.id, tag: tag, onClick: function () { return addFilterTag(tag); } }) : "");
-                            }))) : ""),
+                            React.createElement("div", { className: 'tw-flex tw-flex-wrap  tw-mb-4' }, needs.map(function (n) { return React.createElement(TagView, { key: n === null || n === void 0 ? void 0 : n.id, tag: n, onClick: function () { return addFilterTag(n); } }); }))) : ""),
                 React.createElement(TextView, { item: item })))));
 }