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(source): fixed edit item form init process (#234)

Browse Source 
* fixed edit item form init process

* fix linting
This commit is contained in:
Anton Tranelis 2025-06-10 10:27:05 +02:00 committed by GitHub
parent 483c3f0857
commit 5927ba8c16
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 75 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/AppShell/UserControl.tsx
View File

@ -22,7 +22,7 @@ export const UserControl = () => {
user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer) user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer)
profile profile
? setUserProfile(profile) ? setUserProfile(profile)
: setUserProfile({ id: crypto.randomUUID(), name: user?.first_name ?? '', text: '' }) : setUserProfile({ id: 'new', name: user?.first_name ?? '', text: '' })
}, [user, items]) }, [user, items])
const onLogout = async () => { const onLogout = async () => {

149
src/Components/Profile/ProfileForm.tsx
View File

@ -3,7 +3,6 @@
/* eslint-disable @typescript-eslint/no-unsafe-argument */ /* eslint-disable @typescript-eslint/no-unsafe-argument */
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { useAuth } from '#components/Auth/useAuth' import { useAuth } from '#components/Auth/useAuth'
import { useItems, useUpdateItem, useAddItem } from '#components/Map/hooks/useItems' import { useItems, useUpdateItem, useAddItem } from '#components/Map/hooks/useItems'
@ -51,7 +50,7 @@ export function ProfileForm() {
const [updatePermission, setUpdatePermission] = useState<boolean>(false) const [updatePermission, setUpdatePermission] = useState<boolean>(false)
const [loading, setLoading] = useState<boolean>(false) const [loading, setLoading] = useState<boolean>(false)
const [item, setItem] = useState<Item>({} as Item) const [item, setItem] = useState<Item>()
const { user } = useAuth() const { user } = useAuth()
const updateItem = useUpdateItem() const updateItem = useUpdateItem()
const addItem = useAddItem() const addItem = useAddItem()
@ -72,30 +71,23 @@ export function ProfileForm() {
useEffect(() => { useEffect(() => {
const itemId = location.pathname.split('/')[2] const itemId = location.pathname.split('/')[2]
if (itemId === 'new') {
const item = items.find((i) => i.id === itemId) const layer = layers.find((l) => l.userProfileLayer)
item && setItem(item) setItem({
id: crypto.randomUUID(),
if (!item) { name: user?.first_name ?? '',
if (items.some((i) => i.user_created?.id === user?.id && i.layer?.userProfileLayer)) { text: '',
navigate('/') layer,
toast.error('Item does not exist') new: true,
} else { })
const layer = layers.find((l) => l.userProfileLayer) } else {
setItem({ const item = items.find((i) => i.id === itemId)
id: crypto.randomUUID(), if (item) setItem(item)
name: user?.first_name ?? '',
text: '',
layer,
new: true,
})
}
} }
}, [items, location.pathname, layers, user?.first_name])
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [items])
useEffect(() => { useEffect(() => {
if (!item) return
const newColor = const newColor =
item.color ?? item.color ??
(getItemTags(item) && getItemTags(item)[0]?.color (getItemTags(item) && getItemTags(item)[0]?.color
@ -147,6 +139,7 @@ export function ProfileForm() {
const [template, setTemplate] = useState<string>('') const [template, setTemplate] = useState<string>('')
useEffect(() => { useEffect(() => {
if (!item) return
if (item.layer?.itemType.template) setTemplate(item.layer?.itemType.template) if (item.layer?.itemType.template) setTemplate(item.layer?.itemType.template)
else { else {
const userLayer = layers.find((l) => l.userProfileLayer === true) const userLayer = layers.find((l) => l.userProfileLayer === true)
@ -160,65 +153,71 @@ export function ProfileForm() {
backdrop backdrop
className='tw:mx-4 tw:mt-4 tw:mb-4 tw:overflow-x-hidden tw:w-[calc(100%-32px)] tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0' className='tw:mx-4 tw:mt-4 tw:mb-4 tw:overflow-x-hidden tw:w-[calc(100%-32px)] tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0'
> >
<form {item ? (
className='tw:h-full' <form
onSubmit={(e) => { className='tw:h-full'
e.preventDefault() onSubmit={(e) => {
void onUpdateItem( e.preventDefault()
state, void onUpdateItem(
item, state,
tags, item,
addTag, tags,
setLoading, addTag,
navigate, setLoading,
updateItem, navigate,
addItem, updateItem,
user, addItem,
urlParams, user,
) urlParams,
}} )
> }}
<div className='tw:flex tw:flex-col tw:h-full'> >
<FormHeader item={item} state={state} setState={setState} /> <div className='tw:flex tw:flex-col tw:h-full'>
<FormHeader item={item} state={state} setState={setState} />
{template === 'onepager' && ( {template === 'onepager' && (
<OnepagerForm item={item} state={state} setState={setState}></OnepagerForm> <OnepagerForm item={item} state={state} setState={setState}></OnepagerForm>
)} )}
{template === 'simple' && <SimpleForm state={state} setState={setState}></SimpleForm>} {template === 'simple' && <SimpleForm state={state} setState={setState}></SimpleForm>}
{template === 'flex' && ( {template === 'flex' && (
<FlexForm item={item} state={state} setState={setState}></FlexForm> <FlexForm item={item} state={state} setState={setState}></FlexForm>
)} )}
{template === 'tabs' && ( {template === 'tabs' && (
<TabsForm <TabsForm
loading={loading} loading={loading}
item={item} item={item}
state={state} state={state}
setState={setState} setState={setState}
updatePermission={updatePermission} updatePermission={updatePermission}
linkItem={(id) => linkItem(id, item, updateItem)} linkItem={(id) => linkItem(id, item, updateItem)}
unlinkItem={(id) => unlinkItem(id, item, updateItem)} unlinkItem={(id) => unlinkItem(id, item, updateItem)}
setUrlParams={setUrlParams} setUrlParams={setUrlParams}
></TabsForm> ></TabsForm>
)} )}
<div className='tw:mt-4 tw:flex-none'> <div className='tw:mt-4 tw:flex-none'>
<button <button
className={`${loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}`} className={`${loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}`}
type='submit' type='submit'
style={{ style={{
// We could refactor this, it is used several times at different locations // We could refactor this, it is used several times at different locations
backgroundColor: `${item.color ?? (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor)}`, backgroundColor: `${item.color ?? (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor)}`,
color: '#fff', color: '#fff',
}} }}
> >
Update Update
</button> </button>
</div>
</div> </div>
</form>
) : (
<div className='tw:h-full tw:flex tw:flex-col tw:items-center tw:justify-center'>
<div className='tw:loading tw:loading-spinner'></div>
</div> </div>
</form> )}
</MapOverlayPage> </MapOverlayPage>
</> </>
) )