refactor(source): get rid of item type (#142)

* started

* removed replaced itemType on all the places where it was used to identyfi the user profile layer

* removed unused property from NavBar

* removed unused property from AppShell

* removed userType from app state

* 3.0.60

* set version to 3.0.64 to publish package to include it in utopia-map

---------

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.59",
+  "version": "3.0.60",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.59",
+      "version": "3.0.60",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.59",
+  "version": "3.0.64",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage": "https://utopia-os.org/",

src/Components/AppShell/AppShell.tsx

@@ -13,7 +13,6 @@ export function AppShell({
   appName,
   children,
   assetsApi,
-  userType,
 }: {
   appName: string
   children: React.ReactNode
@@ -23,8 +22,8 @@ export function AppShell({
   return (
     <ContextWrapper>
       <div className='tw-flex tw-flex-col tw-h-full'>
-        <SetAppState assetsApi={assetsApi} userType={userType} />
-        <NavBar userType={userType} appName={appName}></NavBar>
+        <SetAppState assetsApi={assetsApi} />
+        <NavBar appName={appName}></NavBar>
         <div id='app-content' className='tw-flex-grow'>
           {children}
         </div>

src/Components/AppShell/NavBar.tsx

@@ -8,7 +8,7 @@ import { useItems } from '#components/Map/hooks/useItems'
 
 import type { Item } from '#types/Item'
 
-export default function NavBar({ appName, userType }: { appName: string; userType: string }) {
+export default function NavBar({ appName }: { appName: string }) {
   const { isAuthenticated, user, logout } = useAuth()
 
   const [userProfile, setUserProfile] = useState<Item>({} as Item)
@@ -16,12 +16,10 @@ export default function NavBar({ appName, userType }: { appName: string; userTyp
 
   useEffect(() => {
     const profile =
-      user &&
-      items.find((i) => i.user_created?.id === user.id && i.layer?.itemType.name === userType)
+      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: '' })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, items])
 
   // useEffect(() => {}, [userProfile])

src/Components/AppShell/SetAppState.tsx

@@ -4,13 +4,7 @@ import { useSetAppState } from './hooks/useAppState'
 
 import type { AssetsApi } from '#types/AssetsApi'
 
-export const SetAppState = ({
-  assetsApi,
-  userType,
-}: {
-  assetsApi: AssetsApi
-  userType: string
-}) => {
+export const SetAppState = ({ assetsApi }: { assetsApi: AssetsApi }) => {
   const setAppState = useSetAppState()
 
   useEffect(() => {
@@ -18,9 +12,5 @@ export const SetAppState = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [assetsApi])
 
-  useEffect(() => {
-    setAppState({ userType })
-  }, [setAppState, userType])
-
   return <></>
 }

src/Components/Gaming/Quests.tsx

@@ -29,7 +29,7 @@ export function Quests() {
       items.find(
         (i) =>
           i.user_created?.id === user?.id &&
-          i.layer?.itemType.name === 'user' &&
+          i.layer?.userProfileLayer &&
           i.user_created?.id != null,
       ),
     )

src/Components/Map/Layer.tsx

@@ -49,7 +49,7 @@ export const Layer = ({
   markerDefaultColor2 = 'RGBA(35, 31, 32, 0.2)',
   api,
   itemType,
-  onlyOnePerOwner = false,
+  userProfileLayer = false,
   customEditLink,
   customEditParameter,
   // eslint-disable-next-line camelcase
@@ -101,7 +101,7 @@ export const Layer = ({
         markerDefaultColor2,
         api,
         itemType,
-        onlyOnePerOwner,
+        userProfileLayer,
         // Can we just use editCallback for all cases?
         customEditLink,
         customEditParameter,
@@ -127,7 +127,7 @@ export const Layer = ({
         markerDefaultColor2,
         api,
         itemType,
-        onlyOnePerOwner,
+        userProfileLayer,
         customEditLink,
         customEditParameter,
         // eslint-disable-next-line camelcase

src/Components/Map/Subcomponents/ItemFormPopup.tsx

@@ -86,17 +86,16 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
       map.closePopup()
     } else {
       const item = items.find(
-        (i) =>
-          i.user_created?.id === user?.id && i.layer?.itemType.name === props.layer.itemType.name,
+        (i) => i.user_created?.id === user?.id && i.layer?.id === props.layer.id,
       )
 
       const uuid = crypto.randomUUID()
       let success = false
       try {
-        props.layer.onlyOnePerOwner &&
+        props.layer.userProfileLayer &&
           item &&
           (await props.layer.api?.updateItem!({ ...formItem, id: item.id }))
-        ;(!props.layer.onlyOnePerOwner || !item) &&
+        ;(!props.layer.userProfileLayer || !item) &&
           (await props.layer.api?.createItem!({
             ...formItem,
             id: uuid,
@@ -108,13 +107,12 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
         toast.error(error.toString())
       }
       if (success) {
-        if (props.layer.onlyOnePerOwner && item) updateItem({ ...item, ...formItem })
-        if (!props.layer.onlyOnePerOwner || !item) {
+        if (props.layer.userProfileLayer && item) updateItem({ ...item, ...formItem })
+        if (!props.layer.userProfileLayer || !item) {
           addItem({
             ...formItem,
             name: (formItem.name ? formItem.name : user?.first_name) ?? '',
             user_created: user ?? undefined,
-            type: props.layer.itemType,
             id: uuid,
             layer: props.layer,
             public_edit: !user,

src/Components/Map/Subcomponents/ItemViewPopup.tsx

@@ -60,9 +60,9 @@ export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) =>
     setLoading(true)
     let success = false
     try {
-      !props.item.layer?.onlyOnePerOwner &&
+      !props.item.layer?.userProfileLayer &&
         (await props.item.layer?.api?.deleteItem!(props.item.id))
-      props.item.layer?.onlyOnePerOwner &&
+      props.item.layer?.userProfileLayer &&
         (await props.item.layer.api?.updateItem!({ id: props.item.id, position: null }))
       success = true
       // eslint-disable-next-line no-catch-all/no-catch-all
@@ -71,8 +71,8 @@ export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) =>
       toast.error(error.toString())
     }
     if (success) {
-      !props.item.layer?.onlyOnePerOwner && removeItem(props.item)
-      props.item.layer?.onlyOnePerOwner && updadateItem({ ...props.item, position: undefined })
+      !props.item.layer?.userProfileLayer && removeItem(props.item)
+      props.item.layer?.userProfileLayer && updadateItem({ ...props.item, position: undefined })
       toast.success('Item deleted')
     }
     setLoading(false)

src/Components/Profile/ProfileForm.tsx

@@ -3,6 +3,7 @@
 /* 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 { useAppState } from '#components/AppShell/hooks/useAppState'
 import { useAuth } from '#components/Auth/useAuth'
@@ -76,14 +77,19 @@ export function ProfileForm() {
     item && setItem(item)
 
     if (!item) {
-      const layer = layers.find((l) => l.itemType.name === appState.userType)
-      setItem({
-        id: crypto.randomUUID(),
-        name: user?.first_name ?? '',
-        text: '',
-        layer,
-        new: true,
-      })
+      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,
+        })
+      }
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/Components/Profile/Subcomponents/ContactInfoView.tsx

@@ -16,24 +16,9 @@ export const ContactInfoView = ({ item, heading }: { item: Item; heading: string
   const items = useItems()
 
   useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log(
-      'user:',
-      items.find(
-        (i) =>
-          i.user_created?.id === item.user_created?.id &&
-          i.layer?.itemType.name === appState.userType,
-      ),
-    )
-
     setProfileOwner(
-      items.find(
-        (i) =>
-          i.user_created?.id === item.user_created?.id &&
-          i.layer?.itemType.name === appState.userType,
-      ),
+      items.find((i) => i.user_created?.id === item.user_created?.id && i.layer?.userProfileLayer),
     )
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item, items])
 
   return (

src/Components/Profile/itemFunctions.ts

@@ -273,7 +273,6 @@ export const onUpdateItem = async (
               ...changedItem,
               layer: item.layer,
               user_created: user,
-              type: item.layer?.itemType,
             }),
         )
         .then(() => {

src/Components/Templates/AttestationForm.tsx

@@ -76,7 +76,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
                 (i) =>
                   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                   i.user_created?.id === to[0].directus_users_id &&
-                  i.layer?.itemType.name === 'player',
+                  i.layer?.userProfileLayer === true,
               )?.id +
               '?tab=2',
           ),

src/Components/Templates/SelectUser.tsx

@@ -13,7 +13,7 @@ import { MapOverlayPage } from './MapOverlayPage'
 export const SelectUser = () => {
   const appState = useAppState()
   const items = useItems()
-  const users = items.filter((i) => i.layer?.itemType.name === appState.userType)
+  const users = items.filter((i) => i.layer?.userProfileLayer)
 
   const [selectedUsers, setSelectedUsers] = useState<string[]>([])
 

src/types/Item.d.ts

@@ -1,5 +1,4 @@
 import type { ItemsApi } from './ItemsApi'
-import type { ItemType } from './ItemType'
 import type { LayerProps } from './LayerProps'
 import type { Relation } from './Relation'
 import type { UserItem } from './UserItem'
@@ -50,7 +49,6 @@ export interface Item {
   contact?: string
   telephone?: string
   next_appointment?: string
-  type?: ItemType
   gallery?: GalleryItem[]
 
   // {

src/types/LayerProps.d.ts

@@ -21,7 +21,7 @@ export interface LayerProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   api?: ItemsApi<any>
   itemType: ItemType
-  onlyOnePerOwner?: boolean
+  userProfileLayer?: boolean
   customEditLink?: string
   customEditParameter?: string
   public_edit_items?: boolean