implmented profile detail view and update to utopia-ui@3.0.0-alpha.41

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",

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",

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() {
             <Quests /> 
             <Routes>
               <Route path="/*" element={<MapContainer />} />
-              <Route path="/settings" element={<Settings />} />
+              <Route path="/settings" element={<UserSettings />} />
+              <Route path="/profile" element={<ProfileSettings />} />
               <Route path="/concept" element={<Concept/>} />
               <Route path="/projects" element={<Projects/>} />
               <Route path="/projects/*" element={<ProjectView/>} />
               <Route path="/login" element={<LoginPage/>} />
               <Route path="/signup" element={<SignupPage/>} />
+              <Route path="/profile/*" element={<ProfileView/>} />
             </Routes>
           </Content>
         </AppShell>

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;
+    }
+  }
+
+}

src/api/updatesApi.ts

@@ -1,53 +0,0 @@
-import { readItems,updateItem} from '@directus/sdk';
-import { directusClient } from './directus';
-import { Point } from 'geojson';
-
-
-export class updatesApi<T>{
-
-  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;
-    }
-  }
-}

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}>
         <ItemView>
+          <PopupButton url={'/profile'} parameterField={'user_created.id'} text={'Profile'} colorField={'user_created.color'} />
           <TextView></TextView>
         </ItemView>
         <ItemForm>
@@ -84,5 +86,4 @@ function MapContainer() {
   )
 }
 
-
 export default MapContainer

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<itemsApi<Project>>();
-  const [project, setProject] = useState<Project>();
+  const [userApi, setUserApi] = useState<readUserApi>();
+  const [user, setUser] = useState<UserItem>();
 
   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<Project>('projects'));
+    setUserApi(new readUserApi());
   }, [])
 
   useEffect(() => {
     loadProject();
-  }, [projectsApi])
+  }, [userApi])
 
   return (
-    <CardPage title={project?.name || ""} parent={{name: 'Projects',url: "/projects"}}>
-      {project &&
+    <CardPage title={user?.first_name} hideTitle={true} parent={{ name: 'Profiles', url: "/profiles" }}>
+      {user &&
         <>
-          <img className='h-36' src={`https://api.utopia-lab.org/assets/${project?.picture} : ''}`}></img>
-          <p className='font-bold text-sm mb-2 mt-2'>{project?.subname}</p>
-          <p className='text-sm mb-2'>{project?.text}</p>
+          <div className="flex flex-row">
+            
+            <p className="text-4xl"><img className='h-20 rounded-full inline' src={`https://api.utopia-lab.org/assets/${user.avatar} : ''}`}></img> {user?.first_name}</p>
+
+          </div>
+          <p className='text-sm mt-8 mb-2 whitespace-pre-wrap	'>{user?.description}</p>
         </>
 
       }