update projectlist

client/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React from "react";
 import { Router } from "react-router-dom";
 import * as createHistory from "history";
 import Layout from "./pages/Layout";

client/src/authentication/auth0.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, FC } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import createAuth0Client from "@auth0/auth0-spa-js";
 import Auth0Client from "@auth0/auth0-spa-js/dist/typings/Auth0Client";
 

client/src/components/HorizontalCard.tsx

@@ -39,7 +39,6 @@ export const HorizontalCard: FC<IProps> = ({
   validateTicket
 }) => {
   const classes = useStyles();
-  const bull = <span className={classes.bullet}>•</span>;
 
   return (
     <Card className={classes.root}>

client/src/components/ProjectList.tsx

@@ -6,7 +6,7 @@ import { put } from "../utils/http";
 import { Constants } from "../utils/Constants";
 import { HttpResponse } from "../types/HttpResponse";
 import { Project } from "../types/Project";
-import { Container, Typography, Grid } from "@material-ui/core";
+import { Typography, Grid } from "@material-ui/core";
 
 type IProps = {
   projects: Project[];
@@ -27,43 +27,44 @@ export const ProjectList: FC<IProps> = ({ projects }) => {
       t.status !== "Done" &&
       t.title.toLowerCase().includes(filterText.toLowerCase())
   );
+
   return (
-    <>
+    <Grid container>
-      <Grid container>
+      <Grid item xs>
-        <Grid item xs>
+        <Typography variant="h4" component="h4">
-          <Typography variant="h4" component="h4">
+          Projects
-            Projects
+        </Typography>
-          </Typography>
-        </Grid>
-        <Grid item xs={4}>
-          <FilterBar
-            filterText={filterText}
-            handleChange={handleChange}
-            clearFilterText={clearFilterText}
-          />
-        </Grid>
       </Grid>
-      <div className="col s12 grey lighten-1">
+      <Grid item xs={4}>
-        {filteredTickets.length === 0 ? (
+        <FilterBar
-          <HorizontalCard />
+          filterText={filterText}
-        ) : (
+          handleChange={handleChange}
-          filteredTickets.map((t: Project) => (
+          clearFilterText={clearFilterText}
-            <HorizontalCard
+        />
-              key={t.id}
+      </Grid>
-              title={t.title}
+      <Grid item xs={12}>
-              remainingDays={t.endingDate}
+        <div className="col s12 grey lighten-1">
-              link={`/projects/${t.id}`}
+          {filteredTickets.length === 0 ? (
-              validateTicket={async (e: MouseEvent) => {
+            <HorizontalCard />
-                e.preventDefault();
+          ) : (
-                await put<HttpResponse<Ticket>>(
+            filteredTickets.map((t: Project) => (
-                  `${Constants.ticketsURI}/${t.id}/closed`,
+              <HorizontalCard
-                  {}
+                key={t.id}
-                );
+                title={t.title}
-              }}
+                remainingDays={t.endingDate}
-            />
+                link={`/projects/${t.id}`}
-          ))
+                validateTicket={async (e: MouseEvent) => {
-        )}
+                  e.preventDefault();
-      </div>
+                  await put<HttpResponse<Ticket>>(
-    </>
+                    `${Constants.ticketsURI}/${t.id}/closed`,
+                    {}
+                  );
+                }}
+              />
+            ))
+          )}
+        </div>
+      </Grid>
+    </Grid>
   );
 };

client/src/components/UserTabPanel.tsx

@@ -6,7 +6,6 @@ import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import Typography from "@material-ui/core/Typography";
 import Box from "@material-ui/core/Box";
-import { Header } from "./Header";
 import { Ticket } from "../types/Ticket";
 import { Project } from "../types/Project";
 import { ProjectList } from "./ProjectList";
@@ -45,7 +44,7 @@ const a11yProps = (index: any) => {
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: "#ffffff",
     flexGrow: 1
   }
 }));
@@ -81,7 +80,7 @@ export const UserTabPanel: FC<IProps> = ({ tickets, tabNames, projects }) => {
           aria-label="full width tabs example"
         >
           {tabNames.map((t: string, i: number) => (
-            <Tab label={t} {...a11yProps({ i })} />
+            <Tab key={i} label={t} {...a11yProps({ i })} />
           ))}
         </Tabs>
       </AppBar>

client/src/pages/Layout.tsx

@@ -1,5 +1,4 @@
-import React, { FC } from "react";
+import React from "react";
-
 import CssBaseline from "@material-ui/core/CssBaseline";
 import { makeStyles } from "@material-ui/core/styles";
 import { AppRouter } from "../utils/router";
@@ -21,16 +20,14 @@ const useStyles = makeStyles(theme => ({
 export default function Layout() {
   const classes = useStyles();
   return (
-    <div className="grey lighten-3">
+    <div className={classes.root}>
-      <div className={classes.root}>
+      <header>
-        <header>
+        <ButtonAppBar />
-          <ButtonAppBar />
+      </header>
-        </header>
+      {/* <BreadCrumb /> */}
-        {/* <BreadCrumb /> */}
+      <CssBaseline />
-        <CssBaseline />
+      <AppRouter />
-        <AppRouter />
+      <Footer />
-        <Footer />
-      </div>
     </div>
   );
 }

client/src/pages/UserPage.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react";
 import { UserVM } from "../VM/UserVM";
 import { UserHeader } from "../components/UserHeader";
-import { UserTabRouter } from "../components/UserTabRouter";
 import { UserTabPanel } from "../components/UserTabPanel";
 import { Container } from "@material-ui/core";
 

client/src/utils/router.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Router, Route, Switch } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
-import * as creacteHistory from "history";
+
 import { HomeController } from "../controllers/HomeController";
 import { ProjectController } from "../controllers/ProjectController";
 import { UserController } from "../controllers/UserController";