fixed some profile setting issues

This commit is contained in:
Anton Tranelis 2024-05-02 10:56:58 +02:00
parent 6e26435b87
commit 321bd393f8

View File

@ -12,15 +12,11 @@ import { randomColor } from '../../Utils/RandomColor';
import { useLocation, useNavigate } from 'react-router-dom';
import { Item, Tag } from '../../types';
import { MapOverlayPage } from '../Templates';
import { AvatarWidget } from './AvatarWidget';
import { encodeTag } from '../../Utils/FormatTags';
import { useLayers } from '../Map/hooks/useLayers';
import { TagsWidget } from './TagsWidget';
import { LinkedItemsHeaderView } from './LinkedItemsHeaderView';
import { TextView } from '../Map/Subcomponents/ItemPopupComponents/TextView';
import { ActionButton } from './ActionsButton';
import { useHasUserPermission } from '../Map/hooks/usePermissions';
export function OverlayItemProfileSettings() {
@ -33,20 +29,13 @@ export function OverlayItemProfileSettings() {
const [color, setColor] = useState<string>("");
const [offers, setOffers] = useState<Array<Tag>>([]);
const [needs, setNeeds] = useState<Array<Tag>>([]);
const [updatePermission, setUpdatePermission] = useState<boolean>(false);
const [relations, setRelations] = useState<Array<Item>>([]);
const [activeTab, setActiveTab] = useState<number>(1);
const [loading, setLoading] = useState<boolean>(false);
const { user } = useAuth();
const hasUserPermission = useHasUserPermission();
const updateItem = useUpdateItem();
const addItem = useAddItem();
const layers = useLayers();
@ -57,16 +46,20 @@ export function OverlayItemProfileSettings() {
const addTag = useAddTag();
const navigate = useNavigate();
const items = useItems();
const [item, setItem] = useState<Item>({} as Item)
useEffect(() => {
const itemId = location.pathname.split("/")[2];
const item = items.find(i => i.id === itemId);
item && setItem(item);
!item && setItem({ id: crypto.randomUUID(), name: user ? user.first_name : "", text: "" })
}, [location, items, activeTab])
const layer = layers.find(l => l.itemType.name == "user")
!item && setItem({ id: crypto.randomUUID(), name: user ? user.first_name : "", text: "", layer: layer, new: true })
}, [items])
const updateActiveTab = (id: number) => {
setActiveTab(id);
@ -86,7 +79,7 @@ export function OverlayItemProfileSettings() {
React.useEffect(() => {
useEffect(() => {
if (item.layer?.itemColorField) setColor(getValue(item, item.layer?.itemColorField));
else setColor(item.layer?.markerDefaultColor || "#3D3846")
@ -105,15 +98,17 @@ export function OverlayItemProfileSettings() {
const need = tags.find(t => t.id === o.tags_id);
need && setNeeds(current => [...current, need])
})
setRelations([]);
item.relations?.map(r => {
const item = items.find(i => i.id == r.related_items_id)
item && setRelations(current => [...current, item])
})
item && item.user_created && hasUserPermission("items", "update", item) && setUpdatePermission(true);
}, [item])
useEffect(() => {
console.log(offers);
console.log(needs);
console.log(subname)
}, [offers, needs, subname])
const onUpdateItem = async () => {
let changedItem = {} as Item;
@ -138,6 +133,10 @@ export function OverlayItemProfileSettings() {
changedItem = { id: id, name: name, subname: subname, text: text, color: color, position: item.position, ...image.length > 10 && { image: image }, ...offers.length > 0 && { offers: offer_updates }, ...needs.length > 0 && { needs: needs_updates } };
// update profile item in current state
@ -165,7 +164,7 @@ export function OverlayItemProfileSettings() {
console.log(item.layer);
if (item.layer) {
if (!item.new) {
item?.layer?.api?.updateItem && toast.promise(
item?.layer?.api?.updateItem(changedItem),
{
@ -185,9 +184,8 @@ export function OverlayItemProfileSettings() {
}
else {
const layer = layers.find(l => l.itemType.name == "user")
layer?.api?.createItem && toast.promise(
layer?.api?.createItem(changedItem),
item.layer?.api?.createItem && toast.promise(
item.layer?.api?.createItem(changedItem),
{
pending: 'updating Item ...',
success: 'Item updated',
@ -197,7 +195,7 @@ export function OverlayItemProfileSettings() {
},
},
})
.then(() => item && addItem({ ...item, ...changedItem, layer: layer, user_created: user, type: layer.itemType }))
.then(() => item && addItem({ ...item, ...changedItem, layer: item.layer, user_created: user, type: item.layer?.itemType }))
.then(() => {
setLoading(false);
navigate("/")