Code cleaning

client/src/App.css

@@ -1,42 +0,0 @@
-.panel {
-  padding-left: 0px;
-  padding-top: 10px;
-}
-.field {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-.city {
-  display: flex;
-  background: linear-gradient(
-    90deg,
-    rgba(2, 0, 36, 1) 0%,
-    rgba(25, 112, 245, 0.6399510487788865) 0%,
-    rgba(0, 212, 255, 1) 100%
-  );
-  flex-direction: column;
-  height: 40vh;
-  justify-content: center;
-  align-items: center;
-  padding: 0px 20px 20px 20px;
-  margin: 0px 0px 50px 0px;
-  border: 1px solid;
-  border-radius: 5px;
-  box-shadow: 2px 2px #888888;
-  font-family: "Merriweather", serif;
-}
-.city h1 {
-  line-height: 1.2;
-}
-.city span {
-  padding-left: 20px;
-}
-.city .row {
-  padding-top: 20px;
-}
-.weatherError {
-  color: #f16051;
-  font-size: 20px;
-  letter-spacing: 1px;
-  font-weight: 200;
-}

client/src/App.tsx

@@ -1,6 +1,4 @@
 import React, { FC } from "react";
-import { AppRouter } from "./utils/router";
-import "./App.css";
 import Layout from "./pages/Layout";
 
 const App: FC = () => {

client/src/components/ActivityCollection.tsx

@@ -9,8 +9,10 @@ export const ActivityCollection: FC<IProps> = ({ activities }) => {
   return (
     <>
       <ul className="collection">
-        {activities.map((f: Activity) => (
+        {activities.map((activity: Activity) => (
-          <ActivityEntry activity={f} />
+          <li key={activity.id} className="collection-item avatar">
+            <ActivityEntry activity={activity} />
+          </li>
         ))}
       </ul>
     </>
@@ -23,13 +25,13 @@ type IFProps = {
 
 export const ActivityEntry: FC<IFProps> = ({ activity }) => {
   return (
-    <li key={activity.id} className="collection-item avatar">
+    <>
       <img src={activity.user.picture} alt="" className="circle" />
       {/* <i className="material-icons circle">folder</i> */}
       <span className="title">
         {activity.user.firstName} {activity.description} {activity.ticket.title}
       </span>
       <p>{activity.date.toDateString()}</p>
-    </li>
+    </>
   );
 };

client/src/components/AvatarList.tsx

@@ -1,15 +1,22 @@
 import React, { FC } from "react";
-import { FloatingButton } from "./FloatingButton";
+import { User } from "../types/User";
 
 interface AvatarListProps {
-  avatars: string[];
+  users: User[];
 }
 
-export const AvatarList: FC<AvatarListProps> = ({ avatars }) => {
+export const AvatarList: FC<AvatarListProps> = ({ users }) => {
   return (
     <>
-      {avatars.map((avatar: string) => (
+      {users.map((user: User, i: number) => (
-        <img className="circle" src={avatar} width="32vh" height="32vh" />
+        <img
+          key={i}
+          className="circle"
+          src={user.picture}
+          width="32vh"
+          height="32vh"
+          alt={user.fullName}
+        />
       ))}
     </>
   );

client/src/components/Button.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Children } from "react";
+import React, { FC } from "react";
 
 interface IProps {
   icon?: string;

client/src/components/FileCollection.tsx

@@ -9,8 +9,8 @@ export const FileCollection: FC<IProps> = ({ files }) => {
   return (
     <>
       <ul className="collection">
-        {files.map((f: AppFile) => (
+        {files.map((file: AppFile) => (
-          <FileEntry file={f} />
+          <FileEntry file={file} key={file.id} />
         ))}
       </ul>
     </>
@@ -23,7 +23,7 @@ type IFProps = {
 
 export const FileEntry: FC<IFProps> = ({ file }) => {
   return (
-    <li key={file.id} className="collection-item avatar">
+    <li className="collection-item avatar">
       {/* <img src={require("../images/user_1.jpg")} alt="" className="circle" /> */}
       <i className="material-icons circle">folder</i>
       <span className="title">{file.name}</span>

client/src/components/HorizontalCard.tsx

@@ -1,5 +1,4 @@
 import React, { FC, MouseEvent } from "react";
-import { AvatarList } from "./AvatarList";
 import { Link } from "react-router-dom";
 
 interface IProps {
@@ -29,16 +28,16 @@ export const HorizontalCard: FC<IProps> = ({
             </div>
             <span>Due {remainingDays} days</span>
             <div className="right">
-              <a>
+              <Link to="#">
                 <i className="material-icons" onClick={validateTicket}>
                   check
                 </i>
-              </a>
+              </Link>
-              <a>
+              <Link to="#">
                 <i className="material-icons" onClick={archiveTicket}>
                   archive
                 </i>
-              </a>
+              </Link>
             </div>
           </div>
         </div>

client/src/components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, CSSProperties } from "react";
+import React, { FC, CSSProperties } from "react";
 
 type ProgressBarProps = {
   value: number;

client/src/components/TabRouter.tsx

@@ -4,7 +4,7 @@ import { TicketList } from "./TicketList";
 import { FileList } from "./AppFileList";
 import { Ticket } from "../types/Ticket";
 import { AppFile } from "../types/AppFile";
-import { Switch, Route, useRouteMatch, Redirect } from "react-router-dom";
+import { Route, useRouteMatch, Redirect } from "react-router-dom";
 import { ActivityList } from "./ActivityList";
 import { Activity } from "../types/Activity";
 
@@ -26,25 +26,23 @@ export const TabRouter: FC<IProps> = ({
   const { url } = useRouteMatch();
   return (
     <>
-      <Switch>
+      <div className="row">
-        <div className="row">
+        <TabRouterHeader tabNames={tabNames} />
-          <TabRouterHeader nTabs={tabNames.length} tabNames={tabNames} />
 
-          <Redirect from={url} to={`${url}/tickets`} />
+        <Redirect from={url} to={`${url}/tickets`} />
 
-          <Route path={`${url}/tickets`}>
+        <Route path={`${url}/tickets`}>
-            <TicketList tickets={tickets} remainingDays={remainingDays} />
+          <TicketList tickets={tickets} remainingDays={remainingDays} />
-          </Route>
+        </Route>
 
-          <Route path={`${url}/files`}>
+        <Route path={`${url}/files`}>
-            <FileList files={files} />
+          <FileList files={files} />
-          </Route>
+        </Route>
 
-          <Route path={`${url}/activity`}>
+        <Route path={`${url}/activity`}>
-            <ActivityList activities={activities} />
+          <ActivityList activities={activities} />
-          </Route>
+        </Route>
-        </div>
+      </div>
-      </Switch>
     </>
   );
 };

client/src/components/TabRouterHeader.tsx

@@ -3,22 +3,21 @@ import { Link, useRouteMatch } from "react-router-dom";
 
 interface IProps {
   tabClass?: string;
-  nTabs: number;
   tabNames: string[];
 }
 
 export const TabRouterHeader: FC<IProps> = ({
   tabClass = "tab col s4",
-  nTabs,
   tabNames
 }) => {
-  const [isActive, setIsActive] = useState<number>(0);
+  const [isActive, setIsActive] = useState(0);
-
+  const nTabs = tabNames.length;
   return (
     <>
       <ul className="tabs z-depth-1">
         {tabNames.map((name, i) => (
           <TabUnit
+            key={i}
             text={name}
             value={i.toString()}
             tabClass={tabClass}

client/src/controllers/ProjectController.tsx

@@ -1,8 +1,12 @@
-import React, { FC, useState, useEffect } from "react";
+import React, {
-import { useParams } from "react-router-dom";
+  FC,
+  useState
+  // useEffect
+} from "react";
+// import { useParams } from "react-router-dom";
 import { ProjectPage } from "../pages/ProjectPage";
 import ProjectVM from "../viewModels/ProjectVM";
-import { Constants } from "../utils/Constants";
+// import { Constants } from "../utils/Constants";
 import { Project } from "../types/Project";
 import { Ticket } from "../types/Ticket";
 import { User } from "../types/User";
@@ -96,7 +100,7 @@ export const ProjectController: FC = () => {
       ticket: tickets[0]
     },
     {
-      id: 3,
+      id: 2,
       description: " added the task ",
       date: new Date(),
       user: users[1],

client/src/pages/ProjectPage.tsx

@@ -13,7 +13,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
   const {
     title,
     description,
-    avatars,
+    users,
     value,
     tickets,
     ticketsDone,
@@ -28,7 +28,7 @@ export const ProjectPage: FC<IProps> = ({ viewModel }) => {
       <div className="container">
         <Header title={title} description={description} />
         <div className="row valign-wrapper">
-          <AvatarList avatars={avatars} />
+          <AvatarList users={users} />
           <FloatingButton icon="add" color="grey" size="small" />
         </div>
         <ProgressBar

client/src/pages/TicketPage.tsx

@@ -10,7 +10,7 @@ export const TicketPage: FC = () => {
         description="Research, ideate and present brand concepts for client consideration"
         title="Brand Concept and Design"
       />
-      <AvatarList avatars={["../images/user_1.jpg", "../images/user_2.jpg"]} />
+      {/* <AvatarList users={["../images/user_1.jpg", "../images/user_2.jpg"]} /> */}
       <ProgressBar value={60} />
       {/* // <TabView>
         //     <ChildTicket/>

client/src/types/User.ts

@@ -2,4 +2,5 @@ export interface User {
   id: string;
   picture: string;
   firstName: string;
+  fullName?: string;
 }

client/src/utils/router.tsx

@@ -1,11 +1,16 @@
 import React from "react";
-import { Router, Route, Switch, Link, NavLink } from "react-router-dom";
+import {
+  Router,
+  Route,
+  Switch
+  //Link, NavLink
+} from "react-router-dom";
 import * as creacteHistory from "history";
-import { TicketPage } from "../pages/TicketPage";
+// import { TicketPage } from "../pages/TicketPage";
-import { HomeController } from "../controllers/HomeController";
+// import { HomeController } from "../controllers/HomeController";
 import { ProjectController } from "../controllers/ProjectController";
-import { UserController } from "../controllers/UserController";
+// import { UserController } from "../controllers/UserController";
-import { TicketController } from "../controllers/TicketController";
+// import { TicketController } from "../controllers/TicketController";
 
 export const history = creacteHistory.createBrowserHistory();
 

client/src/viewModels/ProjectVM.ts

@@ -1,9 +1,10 @@
 import { Ticket } from "../types/Ticket";
 import { Project } from "../types/Project";
-import { Constants } from "../utils/Constants";
+// import { Constants } from "../utils/Constants";
-import { User } from "../types/User";
+// import { User } from "../types/User";
 import { AppFile } from "../types/AppFile";
 import { Activity } from "../types/Activity";
+import { User } from "../types/User";
 
 export default class ProjectVM {
   public id: number;
@@ -11,7 +12,8 @@ export default class ProjectVM {
   public description: string;
   public value: number;
   public tickets: Ticket[];
-  public avatars: string[];
+  // public avatars: string[];
+  public users: User[];
   public ticketsTotalCount: number;
   public ticketsDone: number;
   public remainingDays: number;
@@ -33,7 +35,8 @@ export default class ProjectVM {
     this.id = project.id;
     this.title = project.title;
     this.description = project.description;
-    this.avatars = project.users.map(u => u.picture);
+    // this.avatars = project.users.map(u => u.picture);
+    this.users = project.users;
     this.value = project.progression;
     this.tickets = project.tickets;
     this.ticketsTotalCount = this.tickets.length;