basics for projects detail page

client/src/adapters/project.ts

@@ -10,6 +10,12 @@ export enum Status {
     SUSPENDED = 'suspended'
 }
 
+export const StatusColors = new Map<string, string>([
+    ['open', 'lightblue'],
+    ['closed', 'purple'],
+    ['suspended', 'red']
+]);
+
 export enum ProjectColors {
     RED = 'red',
     ORANGE = 'orange',

client/src/components/ui/Tag/tag.scss

@@ -4,14 +4,19 @@
     font-weight: s.$weight-bold;
     font-size: 14px;
     padding: 5px 25px;
-    background: s.$linear-gradient;
     color: #fff;
     border-radius: 5px;
     display: inline-block;
+    text-transform: uppercase;
 
     .icon {
         font-size: 13px;
         margin-right: 4px;
         line-height: 1;
     }
+
+    &:not([class*='bg-gradient']) {
+        background: s.$linear-gradient;
+    }
+
 }
\ No newline at end of file

client/src/pages/AppWrapper.tsx

@@ -26,7 +26,7 @@ export default function AppWrapper() {
                     <ProtectedRoute path="/tasks/:uuid" component={TaskDetail} />
                     <ProtectedRoute path="/tasks" exact component={Tasks} />
                     <ProtectedRoute path="/projects/create" component={ProjectCreate} />
-                    <ProtectedRoute path="/projects/:uuid" component={ProjectDetail} />
+                    <ProtectedRoute path="/projects/:projectId" component={ProjectDetail} />
                     <ProtectedRoute path="/projects" component={Projects} />
                     <ProtectedRoute path="/stats" component={Stats} />
                     <ProtectedRoute path="/settings" component={Settings} />

client/src/pages/Projects/ProjectDetail/ProjectDetails/index.tsx

@@ -2,23 +2,37 @@ import './project-details.scss';
 import DetailGrid from 'components/layout/DetailGrid';
 import BarChart from 'components/graphs/BarChart';
 import ButtonLink from 'components/navigation/ButtonLink';
-import { Params } from '../../ProjectDetail';
-import { useParams } from 'react-router';
+import { Project } from 'adapters/project';
+import { DetailProps } from 'components/ui/DetailBox';
+import { useEffect, useState } from 'react';
+import { getTeam, Team } from 'adapters/team';
+
+interface Props {
+    project: Project
+}
+
+export default function ProjectDetails({ project }: Props) {
+    const [teams, setTeams] = useState<string[]>([]);
+
+    useEffect(() => {
+        project.teams.forEach(teamId => {
+            getTeam(teamId).then((team) => setTeams(prev => [...prev, team.name]));
+        });
+    }, [])
 
-export default function ProjectDetails() {
-    const { uuid } = useParams<Params>();
 
     const details = [{
         icon: 'group',
         title: 'Team',
-        label: 'Ryoko'
+        label: teams.join(', ') ?? ''
     },
     {
         icon: 'warning',
         title: 'Deadline',
-        label: 'March'
+        label: project.deadline?.getMonth().toString() ?? ''
     }];
 
+
     const data = [
         {
             label: 'Mon',
@@ -34,7 +48,7 @@ export default function ProjectDetails() {
         <section className="project-details">
             <DetailGrid details={details} />
             <BarChart data={data} />
-            <ButtonLink routing href={`/projects/${uuid}/edit`} className="expanded">
+            <ButtonLink routing href={`/projects/${project.id}/edit`} className="expanded">
                 Edit
 
             </ButtonLink>

client/src/pages/Projects/ProjectDetail/index.tsx

 import './project-detail.scss';
 import Tag from 'components/ui/Tag';
-import Tabs from 'components/navigation/Tabs';
-import { useParams } from 'react-router';
+import Tabs, { Tab } from 'components/navigation/Tabs';
+import { useHistory, useParams } from 'react-router';
 import ProjectDetails from './ProjectDetails';
 import ProjectTasks from './ProjectTasks';
+import { useEffect, useState } from 'react';
+import { getProject, Project, ProjectColors, StatusColors } from 'adapters/project';
 
 export interface Params {
-    uuid: string;
+    projectId: string;
 }
 
 export default function ProjectDetail() {
-    const { uuid } = useParams<Params>();
-    const tabs = [
-        {
-            label: 'Details',
-            path: '/projects/' + uuid,
-            routePath: '/projects/:uuid',
-            component: ProjectDetails
-        },
-        {
-            label: 'Tasks',
-            path: '/projects/' + uuid + '/tasks',
-            routePath: '/projects/:uuid/tasks',
-            component: ProjectTasks
-        }
-    ];
+    const { projectId } = useParams<Params>();
+    const [project, setProject] = useState<Project>();
+    const [tabs, setTabs] = useState<Tab[]>([]);
+    const history = useHistory();
+    useEffect(() => {
+        getProject(projectId).then((project) => {
+            setProject(project);
+            setTabs([
+                {
+                    label: 'Details',
+                    route: '/projects/' + projectId,
+                    component: <ProjectDetails project={project}/>
+                },
+                {
+                    label: 'Tasks',
+                    route: '/projects/' + projectId + '/tasks',
+                    component: <ProjectTasks />
+                }
+            ]);
+
+        }).catch(() => {
+            history.push('/projects');
+        });
+    }, [])
+
+
+
     return (
         <div className="project-detail-page">
             <div className="content-container">
-                <Tag label="Done" />
-                <h1>Shopping list</h1>
+                <Tag label={project?.status ?? ''} color={StatusColors.get(project?.status ?? '')} />
+                <h1>{project?.name}</h1>
                 <div className="description-container">
                     <p>
-                        A basic shopping list app, much like Bring!
+                        {project?.text}
                     </p>
                 </div>
-                {/*<Tabs tabs={tabs} />*/}
+                {<Tabs tabs={tabs} />}
 
             </div>
         </div>

client/src/pages/Projects/index.tsx

@@ -3,7 +3,7 @@ import './projects.scss';
 import ProjectGrid from 'components/layout/ProjectGrid';
 import Filter from 'components/helpers/Filter';
 import { useEffect, useState } from 'react';
-import { getProjects, Project, Status } from 'adapters/project';
+import { getProjects, Project, Status, StatusColors } from 'adapters/project';
 
 export default function Projects() {
     const [filter, setFilter] = useState({ term: '', tags: [] });
@@ -12,7 +12,8 @@ export default function Projects() {
 
     const allStatus = Object.values(Status).map((status) => {
         return {
-            label: status.toString()
+            label: status.toString(),
+            color: StatusColors.get(status.toString())
         }
     });