home page layout

client/src/components/InputField.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from "react";
+
+export const InputField: FC = () => {
+  return (
+    <div className="input-field">
+      <input id="email" type="text" className="validate" />
+      <label htmlFor="email">Email</label>
+    </div>
+  );
+};

client/src/components/LogInForm.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from "react";
+import { InputField } from "./InputField";
+import { PasswordField } from "./PasswordField";
+import { Button } from "./Button";
+
+export const LogInForm: FC = () => {
+  return (
+    <div className="section col s10 offset-s1 white z-depth-1">
+      <div className="row ">
+        <div className="center ">
+          <h4>Login</h4>
+          <form className="col s10 offset-s1">
+            <InputField />
+            <PasswordField />
+            <Button color="indigo" size="large">
+              Submit
+            </Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};

client/src/components/PasswordField.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from "react";
+
+export const PasswordField: FC = () => {
+  return (
+    <div className="input-field">
+      <input id="password" type="password" className="validate" />
+      <label htmlFor="password">Password</label>
+    </div>
+  );
+};

client/src/components/ProfileSelector.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from "react";
+import { HorizontalCard } from "./HorizontalCard";
+import { Avatar } from "./Avatar";
+import { Link } from "react-router-dom";
+
+export const ProfileSelector: FC = () => {
+  return (
+    <div className="section col s10 offset-s1 white z-depth-1">
+      <div className="row ">
+        <div className="center ">
+          <h4>Select a profile</h4>
+          <Link to="/users/cd179eb7-3a54-4060-b22c-3e947bdffcbc">
+            <Avatar picture="https://vignette.wikia.nocookie.net/jamescameronsavatar/images/0/08/Neytiri_Profilbild.jpg/revision/latest/scale-to-width-down/250?cb=20100107164021&path-prefix=de" />
+          </Link>
+          <h5>Demo User</h5>
+        </div>
+      </div>
+    </div>
+  );
+};

client/src/controllers/TicketController.tsx

@@ -2,7 +2,6 @@ import React, { FC, useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { TicketPage } from "../pages/TicketPage";
 import { ErrorController } from "./ErrorController";
-import { User } from "../types/User";
 import { HttpResponse } from "../types/HttpResponse";
 import { Preloader } from "../components/Preloader";
 import { get } from "../utils/http";
@@ -49,76 +48,3 @@ export const TicketController: FC = () => {
   const viewModel = new TicketVM(ticket);
   return isLoading ? <Preloader /> : <TicketPage viewModel={viewModel} />;
 };
-
-// const user: User = {
-//   id: "resldsm,dgd",
-//   firstName: "Ti",
-//   lastName: "Nyny",
-//   fullName: "Nilka Netty Nemo",
-//   presentation: "Woman of my life  ❤️❤️❤️",
-//   creationDate: new Date().toDateString(),
-//   email: "dw@mail.au",
-//   phone: "0998765432",
-//   picture: require("../images/user_1.jpg"),
-//   projects: [
-//     {
-//       id: 1,
-//       title: "OP Baby",
-//       description: "What is it about",
-//       progression: 25,
-//       creationDate: new Date().toDateString(),
-//       endingDate: "2020-02-17 15:51:02.787373",
-//       status: "Todo",
-//       manager: {} as User,
-//       users: [] as User[],
-//       tickets: [] as Ticket[],
-//       files: [] as AppFile[],
-//       activities: [] as Activity[]
-//     }
-//   ],
-//   tickets: [
-//     {
-//       id: 1,
-//       title: "Client objective meeting",
-//       description: "Client objective meeting",
-//       endingDate: "2020-02-17 15:51:02.787373",
-//       status: "Done",
-//       project: {
-//         id: 1,
-//         title: "Project Title",
-//         description: "What is it about",
-//         progression: 25,
-//         creationDate: new Date().toDateString(),
-//         endingDate: "2020-02-17 15:51:02.787373",
-//         status: "Todo",
-//         manager: {} as User,
-//         users: [] as User[],
-//         tickets: [] as Ticket[],
-//         files: [] as AppFile[],
-//         activities: [] as Activity[]
-//       }
-//     },
-//     {
-//       id: 2,
-//       title: "Assemble Outcomes Report for client",
-//       description: "Assemble Outcomes Report for client",
-//       endingDate: "2020-02-27 15:51:02.787373",
-//       status: "To Do",
-//       project: {
-//         id: 1,
-//         title: "Project Title",
-//         description: "What is it about",
-//         progression: 25,
-//         creationDate: new Date().toDateString(),
-//         endingDate: "2020-02-17 15:51:02.787373",
-//         status: "Todo",
-//         manager: {} as User,
-//         users: [] as User[],
-//         tickets: [] as Ticket[],
-//         files: [] as AppFile[],
-//         activities: [] as Activity[]
-//       }
-//     }
-//   ],
-//   activities: []
-// };

client/src/pages/HomePage.tsx

@@ -1,9 +1,21 @@
 import React from "react";
+import { LogInForm } from "../components/LogInForm";
+import { ProfileSelector } from "../components/ProfileSelector";
 
 export const HomePage: React.FC = () => {
   return (
-    <div className="App">
+    <div className="section">
-      <p>HomePage</p>
+      <div className="container center">
+        <h1 className="center">Ticket Manager</h1>
+        <div className="row">
+          <div className="col s6">
+            <ProfileSelector />
+          </div>
+          <div className="col s6">
+            <LogInForm />
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

client/src/pages/TicketPage.tsx

@@ -22,7 +22,7 @@ export const TicketPage: FC<IProps> = ({ viewModel }) => {
     difficulty
   } = viewModel;
   const daysToEnd: number = getRemainingdays(endingDate);
-  let notes: string = "";
+  // let notes: string = "";
 
   return (
     <div className="section">

client/src/utils/router.tsx

@@ -1,18 +1,12 @@
 import React from "react";
-import {
+import { Router, Route, Switch } from "react-router-dom";
-  Router,
-  Route,
-  Switch
-  // Redirect
-  //Link, NavLink
-} from "react-router-dom";
 import * as creacteHistory from "history";
-// import { HomeController } from "../controllers/HomeController";
+import { HomeController } from "../controllers/HomeController";
 import { ProjectController } from "../controllers/ProjectController";
 import { UserController } from "../controllers/UserController";
 import { TicketController } from "../controllers/TicketController";
 import { NotFoundPage } from "../pages/NotFoundPage";
-import { TestPage } from "../pages/TestPage";
+// import { TestPage } from "../pages/TestPage";
 
 export const history = creacteHistory.createBrowserHistory();
 
@@ -21,24 +15,27 @@ export const AppRouter = () => {
     <Router history={history}>
       <div className="grey lighten-3">
         <Switch>
-          <Route exact path="/">
+          {/* <Route exact path="/">
             <TestPage />
+          </Route> */}
+
+          <Route exact path="/">
+            <HomeController />
           </Route>
 
-          {/* <Route path="/">
-            <HomeController />
-          </Route> */}
           <Route path="/users/:id">
             <UserController />
           </Route>
+
           <Route path="/projects/:id">
             <ProjectController />
           </Route>
+
           <Route path="/tickets/:id">
             <TicketController />
           </Route>
 
-          <Route path="/401">
+          <Route path="/404">
             <NotFoundPage />
           </Route>
         </Switch>