Project Detail Page

src/App.tsx

@@ -6,6 +6,7 @@ import './App.css'
 import Concept from './pages/Concept'
 import { userApi } from './api/userApi'
 import Projects from './pages/Projects'
+import { ProjectView } from './pages/ProjectView'
 
 
 
@@ -26,6 +27,7 @@ function App() {
               <Route path="/settings" element={<Settings />} />
               <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/>} />
             </Routes>

src/api/directus.ts

@@ -16,6 +16,7 @@ export type Place = {
     text: string;
     position?: Point;
     picture: string;
+    subname: string;
   };
 
   export type Tag = {

src/api/itemsApi.ts

@@ -1,4 +1,4 @@
-import { createItem, deleteItem, readItems, updateItem } from '@directus/sdk';
+import { createItem, deleteItem, readItem, readItems, updateItem } from '@directus/sdk';
 import { MyCollections, directusClient } from './directus';
 import { ItemsApi } from 'utopia-ui/dist/types';
 
@@ -23,6 +23,17 @@ export class itemsApi<T> implements ItemsApi<T>{
     }
   }
 
+  async getItem(id : string) {
+    try {
+      return await directusClient.request(readItem(this.collectionName as never, id));
+    } catch (error: any) {
+      console.log(error);
+      if (error.errors[0]?.message)
+        throw error.errors[0].message;
+      else throw error;
+    }
+  }
+
   async createItem(item: T & { id?: string }) {
     try {
       return await directusClient.request(createItem(this.collectionName as keyof MyCollections, item))

src/pages/ProjectView.tsx

@@ -0,0 +1,37 @@
+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/src/Components/Templates/CardPage";
+
+export const ProjectView = () => {
+
+    const [projectsApi, setProjectsApi] = useState<itemsApi<Project>>();
+    const [project, setProject] = useState<Project>();
+
+    let location = useLocation();
+
+  
+    const loadProject = async () => {    
+      const project : unknown = await projectsApi?.getItem(location.pathname.split("/")[2]);
+      setProject(project as Project);
+  
+    }
+  
+    useEffect(() => {
+      setProjectsApi(new itemsApi<Project>('projects'));
+    }, [])
+  
+    useEffect(() => {
+      loadProject();
+    }, [projectsApi])
+
+  return (
+    <CardPage title={project?.name || ""}>
+                  <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>
+    </CardPage>
+  )
+}

src/pages/Projects.tsx

@@ -1,6 +1,3 @@
-import UsersIcon from '@heroicons/react/24/outline/UsersIcon'
-import MapPinIcon from '@heroicons/react/24/outline/MapPinIcon'
-import CalendarIcon from '@heroicons/react/24/outline/CalendarIcon'
 import { TextInput, TitleCard, SelectBox, useAuth } from 'utopia-ui'
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
@@ -61,9 +58,10 @@ const {token,isAuthenticated} = useAuth();
               return (
                 <Link key={k} to={'/projects/' + i.id}>
                   <TitleCard className={"!h-96"} title={i.name} topMargin={"mt-2"}>
-                    <p className='font-bold text-sm mb-2'>{i.subname}</p>
                   <img className='h-36' src={`https://api.utopia-lab.org/assets/${i.picture}${isAuthenticated ?  `?access_token=${token}` : ''}`}></img>
-                    {i.text}
+                  <p className='font-bold text-sm mb-2 mt-2'>{i.subname}</p>
+
+                  <p className='text-sm mb-2'>{i.text}</p>
                     {/**
  *                  <div className='flex justify-between text-gray-500 '>
                     <div className='flex'><UsersIcon className=' h-6 w-6' />&nbsp;2</div>

src/routes/sidebar.tsx

@@ -1,5 +1,5 @@
 
-import { BookOpenIcon, RectangleGroupIcon, UsersIcon, MapIcon } from '@heroicons/react/24/outline'
+import { BookOpenIcon, RectangleGroupIcon, MapIcon } from '@heroicons/react/24/outline'
 
 //const iconClasses = `h-6 w-6`
 //const submenuIconClasses = `h-5 w-5`