fix(source): fixed edit item form init process (#234)

* fixed edit item form init process

* fix linting

src/Components/AppShell/UserControl.tsx

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

src/Components/Profile/ProfileForm.tsx

@@ -3,7 +3,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { toast } from 'react-toastify'
 
 import { useAuth } from '#components/Auth/useAuth'
 import { useItems, useUpdateItem, useAddItem } from '#components/Map/hooks/useItems'
@@ -51,7 +50,7 @@ export function ProfileForm() {
 
   const [updatePermission, setUpdatePermission] = 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 updateItem = useUpdateItem()
   const addItem = useAddItem()
@@ -72,30 +71,23 @@ export function ProfileForm() {
 
   useEffect(() => {
     const itemId = location.pathname.split('/')[2]
-
-    const item = items.find((i) => i.id === itemId)
-    item && setItem(item)
-
-    if (!item) {
-      if (items.some((i) => i.user_created?.id === user?.id && i.layer?.userProfileLayer)) {
-        navigate('/')
-        toast.error('Item does not exist')
-      } else {
-        const layer = layers.find((l) => l.userProfileLayer)
-        setItem({
-          id: crypto.randomUUID(),
-          name: user?.first_name ?? '',
-          text: '',
-          layer,
-          new: true,
-        })
-      }
+    if (itemId === 'new') {
+      const layer = layers.find((l) => l.userProfileLayer)
+      setItem({
+        id: crypto.randomUUID(),
+        name: user?.first_name ?? '',
+        text: '',
+        layer,
+        new: true,
+      })
+    } else {
+      const item = items.find((i) => i.id === itemId)
+      if (item) setItem(item)
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [items])
+  }, [items, location.pathname, layers, user?.first_name])
 
   useEffect(() => {
+    if (!item) return
     const newColor =
       item.color ??
       (getItemTags(item) && getItemTags(item)[0]?.color
@@ -147,6 +139,7 @@ export function ProfileForm() {
   const [template, setTemplate] = useState<string>('')
 
   useEffect(() => {
+    if (!item) return
     if (item.layer?.itemType.template) setTemplate(item.layer?.itemType.template)
     else {
       const userLayer = layers.find((l) => l.userProfileLayer === true)
@@ -160,65 +153,71 @@ export function ProfileForm() {
         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'
       >
-        <form
-          className='tw:h-full'
-          onSubmit={(e) => {
-            e.preventDefault()
-            void onUpdateItem(
-              state,
-              item,
-              tags,
-              addTag,
-              setLoading,
-              navigate,
-              updateItem,
-              addItem,
-              user,
-              urlParams,
-            )
-          }}
-        >
-          <div className='tw:flex tw:flex-col tw:h-full'>
-            <FormHeader item={item} state={state} setState={setState} />
+        {item ? (
+          <form
+            className='tw:h-full'
+            onSubmit={(e) => {
+              e.preventDefault()
+              void onUpdateItem(
+                state,
+                item,
+                tags,
+                addTag,
+                setLoading,
+                navigate,
+                updateItem,
+                addItem,
+                user,
+                urlParams,
+              )
+            }}
+          >
+            <div className='tw:flex tw:flex-col tw:h-full'>
+              <FormHeader item={item} state={state} setState={setState} />
 
-            {template === 'onepager' && (
-              <OnepagerForm item={item} state={state} setState={setState}></OnepagerForm>
-            )}
+              {template === 'onepager' && (
+                <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' && (
-              <FlexForm item={item} state={state} setState={setState}></FlexForm>
-            )}
+              {template === 'flex' && (
+                <FlexForm item={item} state={state} setState={setState}></FlexForm>
+              )}
 
-            {template === 'tabs' && (
-              <TabsForm
-                loading={loading}
-                item={item}
-                state={state}
-                setState={setState}
-                updatePermission={updatePermission}
-                linkItem={(id) => linkItem(id, item, updateItem)}
-                unlinkItem={(id) => unlinkItem(id, item, updateItem)}
-                setUrlParams={setUrlParams}
-              ></TabsForm>
-            )}
+              {template === 'tabs' && (
+                <TabsForm
+                  loading={loading}
+                  item={item}
+                  state={state}
+                  setState={setState}
+                  updatePermission={updatePermission}
+                  linkItem={(id) => linkItem(id, item, updateItem)}
+                  unlinkItem={(id) => unlinkItem(id, item, updateItem)}
+                  setUrlParams={setUrlParams}
+                ></TabsForm>
+              )}
 
-            <div className='tw:mt-4 tw:flex-none'>
-              <button
-                className={`${loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}`}
-                type='submit'
-                style={{
-                  // 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)}`,
-                  color: '#fff',
-                }}
-              >
-                Update
-              </button>
+              <div className='tw:mt-4 tw:flex-none'>
+                <button
+                  className={`${loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}`}
+                  type='submit'
+                  style={{
+                    // 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)}`,
+                    color: '#fff',
+                  }}
+                >
+                  Update
+                </button>
+              </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>
-        </form>
+        )}
       </MapOverlayPage>
     </>
   )