From 23b87fc033227a5181597c32348e91614c6fb68f Mon Sep 17 00:00:00 2001 From: Anton Date: Sat, 6 Jan 2024 21:13:20 +0100 Subject: [PATCH] implmented profile detail view and update to utopia-ui@3.0.0-alpha.41 --- package-lock.json | 8 +++--- package.json | 2 +- src/App.tsx | 7 +++-- src/api/readUserApi.ts | 19 ++++++++++++++ src/api/updatesApi.ts | 53 -------------------------------------- src/pages/MapContainer.tsx | 5 ++-- src/pages/ProfileView.tsx | 31 ++++++++++++---------- 7 files changed, 49 insertions(+), 76 deletions(-) create mode 100644 src/api/readUserApi.ts delete mode 100644 src/api/updatesApi.ts diff --git a/package-lock.json b/package-lock.json index f9267a66..42b582d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.2", - "utopia-ui": "^3.0.0-alpha.40" + "utopia-ui": "^3.0.0-alpha.41" }, "devDependencies": { "@types/react": "^18.0.28", @@ -6707,9 +6707,9 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, "node_modules/utopia-ui": { - "version": "3.0.0-alpha.40", - "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.40.tgz", - "integrity": "sha512-YePG5lVTxh4pxldqcHTm5/HO9hfZWi4OaBCKldOCYWESJP1XJhAZl9CkOTaIAqw2/fC3agNh1Cm1Lu+dnGo3Cw==", + "version": "3.0.0-alpha.41", + "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.41.tgz", + "integrity": "sha512-SZjsJ/uiwKJwuc73oewDaxiZVTCJ1kBgIOQjtNwdrZS++ylAOBqHxwnsjKGXO3st7ZVgGTKu1NFnbPc+P47D1w==", "dependencies": { "@heroicons/react": "^2.0.17", "@types/offscreencanvas": "^2019.7.1", diff --git a/package.json b/package.json index 78111744..d81eb139 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.2", - "utopia-ui": "^3.0.0-alpha.40" + "utopia-ui": "^3.0.0-alpha.41" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/src/App.tsx b/src/App.tsx index 65fc59dd..2b0e8d20 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { AppShell, SideBar, Content, AuthProvider, Settings, Modal, LoginPage, SignupPage, Quests } from 'utopia-ui' +import { AppShell, SideBar, Content, AuthProvider, UserSettings, ProfileSettings, Modal, LoginPage, SignupPage, Quests } from 'utopia-ui' import { bottomRoutes, routes } from './routes/sidebar' import { Route, Routes } from 'react-router-dom' import MapContainer from "./pages/MapContainer" @@ -9,6 +9,7 @@ import Projects from './pages/Projects' import { ProjectView } from './pages/ProjectView' import { assetsApi } from './api/assetsApi' import { ModalContent } from './ModalContent' +import { ProfileView } from './pages/ProfileView' @@ -28,12 +29,14 @@ function App() { } /> - } /> + } /> + } /> } /> } /> } /> } /> } /> + } /> diff --git a/src/api/readUserApi.ts b/src/api/readUserApi.ts new file mode 100644 index 00000000..301aa303 --- /dev/null +++ b/src/api/readUserApi.ts @@ -0,0 +1,19 @@ +import { readUser } from '@directus/sdk'; +import { directusClient } from './directus'; + + + +export class readUserApi{ + + async getItem(id : string) { + try { + return await directusClient.request(readUser(id)); + } catch (error: any) { + console.log(error); + if (error.errors[0]?.message) + throw error.errors[0].message; + else throw error; + } + } + +} \ No newline at end of file diff --git a/src/api/updatesApi.ts b/src/api/updatesApi.ts deleted file mode 100644 index 3928d0b1..00000000 --- a/src/api/updatesApi.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { readItems,updateItem} from '@directus/sdk'; -import { directusClient } from './directus'; -import { Point } from 'geojson'; - - -export class updatesApi{ - - collectionName: string; - - constructor(collectionName: string) { - this.collectionName = collectionName; - } - - async getItems() { - try { - return await directusClient.request(readItems("updates",{ - fields: ['*', { user_created: ['*'] }], - })); - } catch (error: any) { - console.log(error); - if (error.errors[0]?.message) - throw error.errors[0].message; - else throw error; - } - } - - - - //setting geoposition - async createItem(item: T & { id?: string, position?: Point }) { - try { - return await directusClient.request(updateItem("updates",item.id!,{position: item.position})) - } catch (error: any) { - console.log(error); - if (error.errors[0]?.message) - throw error.errors[0].message; - else throw error; - } - } - - - //setting geoposition to null - async deleteItem(id: string) { - try { - return await directusClient.request(updateItem("updates",id,{position: undefined})) - } catch (error: any) { - console.log(error); - if (error.errors[0].message) - throw error.errors[0].message; - else throw error; - } - } -} \ No newline at end of file diff --git a/src/pages/MapContainer.tsx b/src/pages/MapContainer.tsx index 6077e73c..a8026b80 100644 --- a/src/pages/MapContainer.tsx +++ b/src/pages/MapContainer.tsx @@ -1,4 +1,4 @@ -import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupTextInput, PopupStartEndInput, TextView, StartEndView, Permissions } from 'utopia-ui' +import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupTextInput, PopupStartEndInput, TextView, StartEndView, Permissions, PopupButton } from 'utopia-ui' import { itemsApi } from '../api/itemsApi'; import { permissionsApi } from '../api/permissionsApi'; import { Place, Event, Tag } from '../api/directus'; @@ -69,9 +69,11 @@ function MapContainer() { itemTitleField='user_created.first_name' itemAvatarField='user_created.avatar' itemColorField='user_created.color' + itemOwnerField="user_created.id" // data={places} api={updatesApiInstance}> + @@ -84,5 +86,4 @@ function MapContainer() { ) } - export default MapContainer diff --git a/src/pages/ProfileView.tsx b/src/pages/ProfileView.tsx index 170d2c65..36e97b76 100644 --- a/src/pages/ProfileView.tsx +++ b/src/pages/ProfileView.tsx @@ -1,38 +1,41 @@ import { useState, useEffect } from "react"; -import { itemsApi } from "../api/itemsApi"; -import { Project } from '../api/directus' import { useLocation } from "react-router-dom"; import { CardPage } from "utopia-ui"; +import { readUserApi } from "../api/readUserApi"; +import { UserItem } from "utopia-ui/dist/types"; -export const ProjectView = () => { +export const ProfileView = () => { - const [projectsApi, setProjectsApi] = useState>(); - const [project, setProject] = useState(); + const [userApi, setUserApi] = useState(); + const [user, setUser] = useState(); let location = useLocation(); const loadProject = async () => { - const project: unknown = await projectsApi?.getItem(location.pathname.split("/")[2]); - setProject(project as Project); + const user: unknown = await userApi?.getItem(location.pathname.split("/")[2]); + setUser(user as UserItem); } useEffect(() => { - setProjectsApi(new itemsApi('projects')); + setUserApi(new readUserApi()); }, []) useEffect(() => { loadProject(); - }, [projectsApi]) + }, [userApi]) return ( - - {project && + + {user && <> - -

{project?.subname}

-

{project?.text}

+
+ +

{user?.first_name}

+ +
+

{user?.description}

}