diff --git a/examples/1-basic-map/README.md b/examples/1-basic-map/README.md index ee8fefec..7b1f3b35 100644 --- a/examples/1-basic-map/README.md +++ b/examples/1-basic-map/README.md @@ -1,42 +1,44 @@ -# Example 1: Basic Map +# Example 1: Basic Map -In this example we see how we create a basic React app with a Map component using [utopia-ui](https://github.com/utopia-os/utopia-ui) library. +In this example, we'll learn how to create a **basic React app** with a map component using the [utopia-ui](https://github.com/utopia-os/utopia-ui) library. -For this example we use Vite to create an empty React app called "1-static-map" +### Setting Up the Project + +We'll use **Vite** to create an empty React app named **"1-static-map"**: ```shell npm create vite@latest 1-static-map -- --template react-ts -``` -We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package +Next, we navigate into our project folder and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package: ```shell cd 1-static-map npm install utopia-ui -``` +``` -We open our `src/App.tsx` and we replace the content with +### Implementing the Map + +Now, we open `src/App.tsx` and replace its content with the following: ```tsx -import { UtopiaMap } from "utopia-ui" +import { UtopiaMap } from "utopia-ui"; function App() { return ( - - - ) + + ); } -export default App +export default App; +``` -``` +### Running the Application -Then we start the development server to check out the result in our browser: +To see our **first map app**, we start the development server: ```shell npm run dev -``` -And can open our first map app in the browser 🙂 +Now, we can open the project in the browser and explore our interactive map! 😊 -In [Example 2](../2-static-layers/) we gonna add some static data to our map +➡️ In [Example 2](../2-static-layers/), we'll add **static data** to our map. diff --git a/package-lock.json b/package-lock.json index bf9cd422..d6ad1280 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 60b30c32..f7ee70b5 100644 --- a/package.json +++ b/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/", diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index 9db9aadd..68249746 100644 --- a/src/Components/AppShell/AppShell.tsx +++ b/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 (
- - + +
{children}
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index 36ecee76..4c038d25 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/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({} 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]) diff --git a/src/Components/AppShell/SetAppState.tsx b/src/Components/AppShell/SetAppState.tsx index eb537911..ac52faea 100644 --- a/src/Components/AppShell/SetAppState.tsx +++ b/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 <> } diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx index 2d14488d..597f597b 100644 --- a/src/Components/Gaming/Quests.tsx +++ b/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, ), ) diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index ce87e223..9e4cc6cd 100644 --- a/src/Components/Map/Layer.tsx +++ b/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 diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx index 48f9e0ff..ef191276 100644 --- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx +++ b/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, diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx index 735a7bbb..4f4583c8 100644 --- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx +++ b/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) diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx index d7af5b70..0b109010 100644 --- a/src/Components/Profile/ProfileForm.tsx +++ b/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 diff --git a/src/Components/Profile/Subcomponents/ContactInfoView.tsx b/src/Components/Profile/Subcomponents/ContactInfoView.tsx index 34e6b8fa..3c11e641 100644 --- a/src/Components/Profile/Subcomponents/ContactInfoView.tsx +++ b/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 ( diff --git a/src/Components/Profile/itemFunctions.ts b/src/Components/Profile/itemFunctions.ts index ad11c536..7c7443d0 100644 --- a/src/Components/Profile/itemFunctions.ts +++ b/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(() => { diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx index a127b1d0..edee6d4c 100644 --- a/src/Components/Templates/AttestationForm.tsx +++ b/src/Components/Templates/AttestationForm.tsx @@ -76,7 +76,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi }) => { (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', ), diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx index 1cd48a9a..770bd1ed 100644 --- a/src/Components/Templates/SelectUser.tsx +++ b/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([]) diff --git a/src/types/Item.d.ts b/src/types/Item.d.ts index 4e84e992..1dd7bde4 100644 --- a/src/types/Item.d.ts +++ b/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[] // { diff --git a/src/types/LayerProps.d.ts b/src/types/LayerProps.d.ts index e1b94b8b..44f55a95 100644 --- a/src/types/LayerProps.d.ts +++ b/src/types/LayerProps.d.ts @@ -21,7 +21,7 @@ export interface LayerProps { // eslint-disable-next-line @typescript-eslint/no-explicit-any api?: ItemsApi itemType: ItemType - onlyOnePerOwner?: boolean + userProfileLayer?: boolean customEditLink?: string customEditParameter?: string public_edit_items?: boolean