From 1f5c0b7a4881e2d67d476b80bd3970e0a987dacd Mon Sep 17 00:00:00 2001
From: Karol Harezlak <76980800+karolh2000@users.noreply.github.com>
Date: Mon, 7 Aug 2023 20:29:05 -0700
Subject: [PATCH 1/2] UI prototyping (bootstrap)

---
 src/App.tsx                                   | 29 ++++--
 src/{components/Main.tsx => Location.tsx}     | 10 +-
 src/components/Client.tsx                     | 17 ++++
 src/components/CreateTask.tsx                 | 23 +++++
 src/components/Home.tsx                       | 12 +++
 src/components/Image.tsx                      |  4 +-
 src/components/Matter.tsx                     | 17 ++++
 src/components/{Navigator.tsx => Menu.tsx}    |  9 +-
 src/components/PersistantCombo.tsx            | 30 ++++++
 src/components/{Login.tsx => Project.tsx}     | 10 +-
 src/components/Routing.tsx                    | 18 ++++
 src/components/RoutingTable.tsx               | 18 ----
 src/components/Search.tsx                     | 27 ++++++
 src/components/Task.tsx                       | 94 +++++++++++++++++++
 src/components/Tasks.tsx                      | 15 +++
 src/components/auth/LoginButton.tsx           |  3 +-
 src/components/auth/LogoutButton.tsx          |  1 +
 src/components/auth/Profile.tsx               |  1 +
 src/components/auth/api/Authorization.ts      |  3 +
 .../auth/impl/AuthorizationAuth0.ts           | 12 +++
 .../auth/impl/AuthorizationFactory.ts         | 17 ++++
 src/index.tsx                                 |  4 +-
 22 files changed, 333 insertions(+), 41 deletions(-)
 rename src/{components/Main.tsx => Location.tsx} (56%)
 create mode 100644 src/components/Client.tsx
 create mode 100644 src/components/CreateTask.tsx
 create mode 100644 src/components/Home.tsx
 create mode 100644 src/components/Matter.tsx
 rename src/components/{Navigator.tsx => Menu.tsx} (78%)
 create mode 100644 src/components/PersistantCombo.tsx
 rename src/components/{Login.tsx => Project.tsx} (57%)
 create mode 100644 src/components/Routing.tsx
 delete mode 100644 src/components/RoutingTable.tsx
 create mode 100644 src/components/Search.tsx
 create mode 100644 src/components/Task.tsx
 create mode 100644 src/components/Tasks.tsx
 create mode 100644 src/components/auth/api/Authorization.ts
 create mode 100644 src/components/auth/impl/AuthorizationAuth0.ts
 create mode 100644 src/components/auth/impl/AuthorizationFactory.ts

diff --git a/src/App.tsx b/src/App.tsx
index 13422c3..cfe482b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,32 @@
 import React from 'react';
 import './App.css';
-import Navigator from "./components/Navigator";
-import RoutingTable from "./components/RoutingTable";
+import Menu from "./components/Menu";
+import Routing from "./components/Routing";
 import LoginButton from "./components/auth/LoginButton";
 import Image from "./components/Image";
+import Search from "./components/Search";
 
 function App() {
     return (
-        <div>
-            <LoginButton/>
-            <Image imagePath={"./resources/media/logo-white.svg"}></Image>
+        <div className="m-3">
             <div className="row">
-                <div className="col-2">
-                    <Navigator/>
-                </div>
                 <div className="col-5">
-                    <RoutingTable/>
+                    {/*<Search/>*/}
+                </div>
+                <div className="col-6">
+                    <div className="float-end">
+                        <Search/>
+                        <LoginButton/>
+                    </div>
+                </div>
+            </div>
+            {/*<Image imagePath={"./resources/media/logo-white.svg"}></Image>*/}
+            <div className="row">
+                <div className="col-2 mt-lg-3">
+                    <Menu/>
+                </div>
+                <div className="col-9 mt-lg-3">
+                    <Routing/>
                 </div>
             </div>
         </div>
diff --git a/src/components/Main.tsx b/src/Location.tsx
similarity index 56%
rename from src/components/Main.tsx
rename to src/Location.tsx
index 63ebdd3..8ebe89d 100644
--- a/src/components/Main.tsx
+++ b/src/Location.tsx
@@ -1,10 +1,16 @@
 import React from "react";
 import 'bootstrap/dist/css/bootstrap.min.css';
 
+interface Location {
+    city: string;
+    state: string;
+    country: string;
+}
+
 function Main() {
     return (
-        <div className="display-1">
-            Main
+        <div>
+            Location
         </div>
     );
 }
diff --git a/src/components/Client.tsx b/src/components/Client.tsx
new file mode 100644
index 0000000..a537241
--- /dev/null
+++ b/src/components/Client.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import PersistantCombo from "./PersistantCombo";
+
+interface Client {
+    name: string;
+}
+
+function Client() {
+    return (
+        <div>
+            <PersistantCombo/>
+        </div>
+    );
+}
+
+export default Client;
\ No newline at end of file
diff --git a/src/components/CreateTask.tsx b/src/components/CreateTask.tsx
new file mode 100644
index 0000000..0a94e0f
--- /dev/null
+++ b/src/components/CreateTask.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import Task from "./Task";
+
+function CreateTask() {
+
+    const task: Task = {
+        client: { name: ""},
+        code: "",
+        matter: { name: ""},
+        name: "",
+        narrative: "",
+        project: {name: ""},
+        activityCode: "",
+        time: 0,
+    }
+    return (
+        <div className="container">
+            <Task  {...task} />
+        </div>
+    );
+}
+
+export default CreateTask;
\ No newline at end of file
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
new file mode 100644
index 0000000..cb2bf09
--- /dev/null
+++ b/src/components/Home.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+function Home() {
+    return (
+        <div className="form-control-lg">
+            HOME PAGE NOT IMPLEMENTED YET
+        </div>
+    );
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/Image.tsx b/src/components/Image.tsx
index c2c1480..0b4e20e 100644
--- a/src/components/Image.tsx
+++ b/src/components/Image.tsx
@@ -5,7 +5,9 @@ import TickerLogo from '../resources/media/logo-white.svg';
 const Image = ({ imagePath } : { imagePath: string }) => {
     return (
         <div>
-            <img src={ imagePath } alt={ imagePath } />
+            <svg className="">
+                <use xlinkHref={imagePath}></use>
+            </svg>
         </div>
     );
 }
diff --git a/src/components/Matter.tsx b/src/components/Matter.tsx
new file mode 100644
index 0000000..ecd16c5
--- /dev/null
+++ b/src/components/Matter.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import PersistantCombo from "./PersistantCombo";
+
+interface Matter {
+    name: string;
+}
+
+function Matter() {
+    return (
+        <div>
+            Matter
+        </div>
+    );
+}
+
+export default Matter;
\ No newline at end of file
diff --git a/src/components/Navigator.tsx b/src/components/Menu.tsx
similarity index 78%
rename from src/components/Navigator.tsx
rename to src/components/Menu.tsx
index 927c85e..cce13f6 100644
--- a/src/components/Navigator.tsx
+++ b/src/components/Menu.tsx
@@ -7,8 +7,9 @@ interface NavInfo {
 }
 
 const AppRoutes: NavInfo[] = [
-    {path: "/", displayName: "Main", name: "main"},
-    {path: "/login", displayName: "Login", name: "login"}
+    {path: "/", displayName: "Home", name: "home"},
+    {path: "/tasks", displayName: "Tasks", name: "tasks"},
+    {path: "/createTask", displayName: "Create Task", name: "createTask"}
 ];
 
 function NaviLink(navInfo: NavInfo) {
@@ -20,7 +21,7 @@ function NaviLink(navInfo: NavInfo) {
     );
 }
 
-function Navigator() {
+function Menu() {
     return (
         <div className="container mt-3 h4">
             <nav>
@@ -35,5 +36,5 @@ function Navigator() {
     );
 }
 
-export default Navigator;
+export default Menu;
 
diff --git a/src/components/PersistantCombo.tsx b/src/components/PersistantCombo.tsx
new file mode 100644
index 0000000..0f700fa
--- /dev/null
+++ b/src/components/PersistantCombo.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import {FormText} from "react-bootstrap";
+
+const enum State  {Save = 'save'}
+function PersistentCombo() {
+
+    const context = {};
+
+    // const reducer = (state: string, action: any) => {
+    //     if (State.Save === state) {
+    //         context.value = action.value;
+    //     }
+    // }
+    return (
+        <div>
+            <label>List</label>
+            <input name="ble" list="sfd, sf, sdf, sdf"/>
+            <datalist></datalist>
+            <div className="">
+                <select className="">
+                        <option value="roundTrip">Item 1</option>
+                        <option value="oneWay">Item 2</option>
+                </select>
+            </div>
+        </div>
+    );
+}
+
+export default PersistentCombo;
\ No newline at end of file
diff --git a/src/components/Login.tsx b/src/components/Project.tsx
similarity index 57%
rename from src/components/Login.tsx
rename to src/components/Project.tsx
index 71e6231..fba7b4f 100644
--- a/src/components/Login.tsx
+++ b/src/components/Project.tsx
@@ -1,12 +1,16 @@
 import React from "react";
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-function Login() {
+interface Project {
+    name: string;
+}
+
+function Project() {
     return (
         <div className="">
-            Login
+            Project
         </div>
     );
 }
 
-export default Login;
\ No newline at end of file
+export default Project;
\ No newline at end of file
diff --git a/src/components/Routing.tsx b/src/components/Routing.tsx
new file mode 100644
index 0000000..58cd2d3
--- /dev/null
+++ b/src/components/Routing.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
+import Home from './Home';
+import Tasks from "./Tasks";
+import CreateTask from "./CreateTask";
+function Routing() {
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/tasks" element={<Tasks />} />
+                <Route path="/createTask" element={<CreateTask />} />
+            </Routes>
+        </BrowserRouter>
+    );
+}
+
+export default Routing;
\ No newline at end of file
diff --git a/src/components/RoutingTable.tsx b/src/components/RoutingTable.tsx
deleted file mode 100644
index 574d4eb..0000000
--- a/src/components/RoutingTable.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import {BrowserRouter, Route, Routes} from "react-router-dom";
-import About from './About';
-import Main from './Main';
-import Login from "./Login";
-function RoutingTable() {
-    return (
-        <BrowserRouter>
-            <Routes>
-                <Route path="/" element={<Main />} />
-                <Route path="/about" element={<About />} />
-                <Route path="/login" element={<Login />} />
-            </Routes>
-        </BrowserRouter>
-    );
-}
-
-export default RoutingTable;
\ No newline at end of file
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
new file mode 100644
index 0000000..f7fb690
--- /dev/null
+++ b/src/components/Search.tsx
@@ -0,0 +1,27 @@
+import React, {useRef, useState} from "react";
+
+function Search() {
+
+    const ref: any = useRef(null);
+
+    const [text, setText] = useState("Search");
+
+    const handleChange = (event: any) => {
+        setText(event.target.value);
+        console.log("Text value " + event.target.value);
+    }
+    const clearText = () => {
+        setText("");
+        // if (ref.current != null) {
+            ref.current.value = "";
+        // }
+    }
+
+    return (
+        <>
+            <input className="form-control-lg" ref={ref} onChange={handleChange} id="tickerSearch" readOnly={false} type="search"  defaultValue={text} onClick={clearText}/>
+        </>
+    );
+}
+
+export default Search;
\ No newline at end of file
diff --git a/src/components/Task.tsx b/src/components/Task.tsx
new file mode 100644
index 0000000..24d3f0a
--- /dev/null
+++ b/src/components/Task.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Client from "./Client";
+import Matter from "./Matter";
+import Project from "./Project";
+
+interface Task {
+    name: string;
+    project: Project;
+    narrative: string;
+    client: Client;
+    matter: Matter;
+    code: string;
+    activityCode: string;
+    time: number;
+}
+
+function Task(task: Task, readOnly: boolean, vertical: boolean) {
+    // if (!task) {
+    //     task = {
+    //         client: {name: ""},
+    //         code: "",
+    //         matter: {name: ""},
+    //         name: "",
+    //         narrative: "",
+    //         project: {name: ""},
+    //         activityCode: "",
+    //         time: 0,
+    //     }
+    // }
+    const [urls, addTask] = React.useState([]);
+    const handleSaveTask = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        addTask()
+    };
+
+    // TODO dynamic IDs/keys
+    if (vertical) {
+        return (
+            <div>
+                NOT IMPLEMENTED
+            </div>
+        );
+    } else {
+        return (
+            <form onSubmit={handleSaveTask}>
+                <div className="mb-3">
+                    <label htmlFor="text" className="form-label">Task</label>
+                    <input defaultValue={task.name} type="text" className="form-control" id="taskName" aria-describedby="task"/>
+                        <div id="task" className="form-text"></div>
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="text" className="form-label">Project</label>
+                    <input defaultValue={task.project.name} type="text" className="form-control" id="projectName" aria-describedby="project"/>
+                    <div id="project" className="form-text"></div>
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="text" className="form-label">Client</label>
+                    <input defaultValue={task.client.name} type="text" className="form-control" id="client" aria-describedby="client"/>
+                    <div id="client" className="form-text"></div>
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="text" className="form-label">Matter</label>
+                    <input defaultValue={task.matter.name} type="text" className="form-control" id="matter" aria-describedby="matter"/>
+                    <div id="matter" className="form-text"></div>
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="text" className="form-label">Narrative</label>
+                    <input defaultValue={task.narrative} type="text" className="form-control" id="narrtive" aria-describedby="narrtive"/>
+                    <div id="narrtive" className="form-text"></div>
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="text" className="form-label">Narrative</label>
+                    <input defaultValue={task.narrative} type="text" className="form-control" id="narrtive" aria-describedby="narrtive"/>
+                    <div id="narrtive" className="form-text"></div>
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="text" className="form-label">Activity Code</label>
+                    <input defaultValue={task.activityCode} type="text" className="form-control" id="activityCode" aria-describedby="activityCode"/>
+                    <div id="activityCode" className="form-text"></div>
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="text" className="form-label">Time</label>
+                    <input defaultValue={task.time} type="text" className="form-control" id="activityCode" aria-describedby="activityCode"/>
+                    <div id="activityCode" className="form-text"></div>
+                </div>
+
+                <button type="submit" className="btn btn-primary">Save</button>
+            </form>
+        );
+    }
+}
+
+export default Task;
\ No newline at end of file
diff --git a/src/components/Tasks.tsx b/src/components/Tasks.tsx
new file mode 100644
index 0000000..16a741d
--- /dev/null
+++ b/src/components/Tasks.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+function Tasks() {
+    return (
+        <div>
+            <div className="container">
+                {}
+            </div>
+            {/*<CreateTask/>*/}
+        </div>
+    );
+}
+
+export default Tasks;
\ No newline at end of file
diff --git a/src/components/auth/LoginButton.tsx b/src/components/auth/LoginButton.tsx
index e6dc7e2..845b161 100644
--- a/src/components/auth/LoginButton.tsx
+++ b/src/components/auth/LoginButton.tsx
@@ -1,10 +1,11 @@
 import { useAuth0 } from "@auth0/auth0-react";
 import React from "react";
 
+//TODO abstraction
 const LoginButton = () => {
     const { loginWithRedirect } = useAuth0();
 
-    return <button onClick={() => loginWithRedirect()}>Log In</button>;
+    return <button className="form-control-lg" onClick={() => loginWithRedirect()}>Log In</button>;
 };
 
 export default LoginButton;
\ No newline at end of file
diff --git a/src/components/auth/LogoutButton.tsx b/src/components/auth/LogoutButton.tsx
index 81ba4bf..c7c21c1 100644
--- a/src/components/auth/LogoutButton.tsx
+++ b/src/components/auth/LogoutButton.tsx
@@ -1,6 +1,7 @@
 import { useAuth0 } from "@auth0/auth0-react";
 import React from "react";
 
+//TODO abstraction
 const LogoutButton = () => {
     const { logout } = useAuth0();
 
diff --git a/src/components/auth/Profile.tsx b/src/components/auth/Profile.tsx
index 05026d5..f861ec7 100644
--- a/src/components/auth/Profile.tsx
+++ b/src/components/auth/Profile.tsx
@@ -1,6 +1,7 @@
 import {Auth0ContextInterface, useAuth0, User} from "@auth0/auth0-react";
 import React from "react";
 
+//TODO abstraction
 const Profile = () => {
     const auth: Auth0ContextInterface = useAuth0();
 
diff --git a/src/components/auth/api/Authorization.ts b/src/components/auth/api/Authorization.ts
new file mode 100644
index 0000000..7402cd0
--- /dev/null
+++ b/src/components/auth/api/Authorization.ts
@@ -0,0 +1,3 @@
+export interface Authorization {
+    isAuthenticated() :boolean;
+}
\ No newline at end of file
diff --git a/src/components/auth/impl/AuthorizationAuth0.ts b/src/components/auth/impl/AuthorizationAuth0.ts
new file mode 100644
index 0000000..57ece0c
--- /dev/null
+++ b/src/components/auth/impl/AuthorizationAuth0.ts
@@ -0,0 +1,12 @@
+import {Authorization} from "../api/Authorization";
+import {Auth0ContextInterface, useAuth0} from "@auth0/auth0-react";
+
+
+export class AuthorizationAuth0 implements Authorization{
+    isAuthenticated(): boolean {
+        const auth: Auth0ContextInterface = useAuth0();
+
+        return auth.isAuthenticated;
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/auth/impl/AuthorizationFactory.ts b/src/components/auth/impl/AuthorizationFactory.ts
new file mode 100644
index 0000000..5caed85
--- /dev/null
+++ b/src/components/auth/impl/AuthorizationFactory.ts
@@ -0,0 +1,17 @@
+import {Authorization} from "../api/Authorization";
+import {AuthorizationAuth0} from "./AuthorizationAuth0";
+
+export class AuthorizationFactory {
+
+    private static instance: Authorization;
+
+    static getInstance() : Authorization {
+        if (!this.instance) {
+            this.instance = new AuthorizationAuth0(); // TODO
+        }
+
+        return this.instance;
+    }
+}
+
+export const auth: Authorization = AuthorizationFactory.getInstance();
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 5f1c9d4..017d521 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,6 +10,7 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
+    // TODO auth abstraction
     <Auth0Provider
         domain={ authConfig.domain }
         clientId={ authConfig.clientId }
@@ -21,7 +22,4 @@ root.render(
     </Auth0Provider>,
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 // reportWebVitals();

From 6db7527e672a2e528ac014a56356596bee7feafa Mon Sep 17 00:00:00 2001
From: Karol Harezlak <76980800+karolh2000@users.noreply.github.com>
Date: Wed, 9 Aug 2023 19:11:35 -0700
Subject: [PATCH 2/2] Task component partly implemented

---
 package-lock.json                | 28 +++++++++--
 package.json                     |  3 ++
 src/App.tsx                      |  1 -
 src/components/CreateTask.tsx    |  3 +-
 src/components/Task.tsx          | 83 ++++++++++++++++----------------
 src/persistence/LocalStorage.tsx | 46 ++++++++++++++++++
 src/persistence/Storage.tsx      | 25 ++++++++++
 src/persistence/StorageData.ts   |  3 ++
 8 files changed, 146 insertions(+), 46 deletions(-)
 create mode 100644 src/persistence/LocalStorage.tsx
 create mode 100644 src/persistence/Storage.tsx
 create mode 100644 src/persistence/StorageData.ts

diff --git a/package-lock.json b/package-lock.json
index 4369767..cede916 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
+        "@types/lodash": "^4.14.196",
         "@types/node": "^16.18.39",
         "@types/react": "^18.2.18",
         "@types/react-dom": "^18.2.7",
@@ -23,9 +24,11 @@
         "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
+        "uuid": "^9.0.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@types/uuid": "^9.0.2",
         "eslint": "^8.46.0"
       }
     },
@@ -4168,6 +4171,11 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.196",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.196.tgz",
+      "integrity": "sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ=="
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -4310,6 +4318,12 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
       "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.2.tgz",
+      "integrity": "sha512-kNnC1GFBLuhImSnV7w4njQkUiJi0ZXUycu1rUaouPqiKlXkh77JKgdRnTAp1x5eBwcIwbtI+3otwzuIDEuDoxQ==",
+      "dev": true
+    },
     "node_modules/@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
@@ -15450,6 +15464,14 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -16623,9 +16645,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/package.json b/package.json
index 6ae97e0..9a254a7 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.14.196",
     "@types/node": "^16.18.39",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
@@ -18,6 +19,7 @@
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -45,6 +47,7 @@
     ]
   },
   "devDependencies": {
+    "@types/uuid": "^9.0.2",
     "eslint": "^8.46.0"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
index cfe482b..fc50cbf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,6 @@ import './App.css';
 import Menu from "./components/Menu";
 import Routing from "./components/Routing";
 import LoginButton from "./components/auth/LoginButton";
-import Image from "./components/Image";
 import Search from "./components/Search";
 
 function App() {
diff --git a/src/components/CreateTask.tsx b/src/components/CreateTask.tsx
index 0a94e0f..cfe20f3 100644
--- a/src/components/CreateTask.tsx
+++ b/src/components/CreateTask.tsx
@@ -4,6 +4,7 @@ import Task from "./Task";
 function CreateTask() {
 
     const task: Task = {
+        id: "",
         client: { name: ""},
         code: "",
         matter: { name: ""},
@@ -11,7 +12,7 @@ function CreateTask() {
         narrative: "",
         project: {name: ""},
         activityCode: "",
-        time: 0,
+        time: 0
     }
     return (
         <div className="container">
diff --git a/src/components/Task.tsx b/src/components/Task.tsx
index 24d3f0a..6355fa6 100644
--- a/src/components/Task.tsx
+++ b/src/components/Task.tsx
@@ -1,10 +1,15 @@
-import React from "react";
+import React, {useState} from "react";
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Client from "./Client";
 import Matter from "./Matter";
 import Project from "./Project";
+import {Storage} from "../persistence/Storage";
+import { v4 as UUID } from 'uuid';
+import { StorageData } from "../persistence/StorageData";
+import _ from "lodash";
 
-interface Task {
+interface Task extends StorageData, Record<string, any> {
+    id: string;
     name: string;
     project: Project;
     narrative: string;
@@ -14,75 +19,71 @@ interface Task {
     activityCode: string;
     time: number;
 }
-
+const storage: Storage = Storage.getInstance();
 function Task(task: Task, readOnly: boolean, vertical: boolean) {
-    // if (!task) {
-    //     task = {
-    //         client: {name: ""},
-    //         code: "",
-    //         matter: {name: ""},
-    //         name: "",
-    //         narrative: "",
-    //         project: {name: ""},
-    //         activityCode: "",
-    //         time: 0,
-    //     }
-    // }
-    const [urls, addTask] = React.useState([]);
+    const [formTask, setFormTask] = useState(task);
+
+    const handleChange  = (event: { target: HTMLInputElement }): void => {
+        const propName: string = event.target.id;
+        const cloned = _.cloneDeep(formTask);
+        if (!cloned.id) {
+            cloned.id = UUID();
+        }
+        const {value} = event.target;
+        if (propName == "project") {
+            cloned.project.name = value;
+        } else {
+            cloned[propName] = value;
+        }
+
+        setFormTask(cloned);
+    }
+
     const handleSaveTask = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
-        addTask()
+        storage.saveTask(formTask);
     };
 
     // TODO dynamic IDs/keys
     if (vertical) {
-        return (
-            <div>
-                NOT IMPLEMENTED
-            </div>
-        );
+        throw new Error("Not implemented");
     } else {
         return (
             <form onSubmit={handleSaveTask}>
                 <div className="mb-3">
                     <label htmlFor="text" className="form-label">Task</label>
-                    <input defaultValue={task.name} type="text" className="form-control" id="taskName" aria-describedby="task"/>
-                        <div id="task" className="form-text"></div>
+                    <input value={formTask.name} onChange={handleChange} type="text" className="form-control" id="name" aria-describedby="task"/>
+                    {/*<div id="task" className="form-text"></div>*/}
                 </div>
                 <div className="mb-3">
                     <label htmlFor="text" className="form-label">Project</label>
-                    <input defaultValue={task.project.name} type="text" className="form-control" id="projectName" aria-describedby="project"/>
-                    <div id="project" className="form-text"></div>
+                    <input value={formTask.project.name} onChange={handleChange} type="text" className="form-control" id="project" aria-describedby="project"/>
+                    {/*<div id="project" className="form-text"></div>*/}
                 </div>
                 <div className="mb-3">
                     <label htmlFor="text" className="form-label">Client</label>
-                    <input defaultValue={task.client.name} type="text" className="form-control" id="client" aria-describedby="client"/>
-                    <div id="client" className="form-text"></div>
+                    <input value={formTask.client.name} onChange={handleChange} type="text" className="form-control" id="client.name" aria-describedby="client"/>
+                    {/*<div id="client" className="form-text"></div>*/}
                 </div>
                 <div className="mb-3">
                     <label htmlFor="text" className="form-label">Matter</label>
-                    <input defaultValue={task.matter.name} type="text" className="form-control" id="matter" aria-describedby="matter"/>
-                    <div id="matter" className="form-text"></div>
-                </div>
-                <div className="mb-3">
-                    <label htmlFor="text" className="form-label">Narrative</label>
-                    <input defaultValue={task.narrative} type="text" className="form-control" id="narrtive" aria-describedby="narrtive"/>
-                    <div id="narrtive" className="form-text"></div>
+                    <input value={formTask.matter.name} onChange={handleChange} type="text" className="form-control" id="matter.name" aria-describedby="matter"/>
+                    {/*<div id="matter" className="form-text"></div>*/}
                 </div>
                 <div className="mb-3">
                     <label htmlFor="text" className="form-label">Narrative</label>
-                    <input defaultValue={task.narrative} type="text" className="form-control" id="narrtive" aria-describedby="narrtive"/>
-                    <div id="narrtive" className="form-text"></div>
+                    <input value={formTask.narrative} onChange={handleChange} type="text" className="form-control" id="narrtive" aria-describedby="narrtive"/>
+                    {/*<div id="narrtive" className="form-text"></div>*/}
                 </div>
                 <div className="mb-3">
                     <label htmlFor="text" className="form-label">Activity Code</label>
-                    <input defaultValue={task.activityCode} type="text" className="form-control" id="activityCode" aria-describedby="activityCode"/>
-                    <div id="activityCode" className="form-text"></div>
+                    <input value={formTask.activityCode} onChange={handleChange} type="text" className="form-control" id="activityCode" aria-describedby="activityCode"/>
+                    {/*<div id="activityCode" className="form-text"></div>*/}
                 </div>
                 <div className="mb-3">
                     <label htmlFor="text" className="form-label">Time</label>
-                    <input defaultValue={task.time} type="text" className="form-control" id="activityCode" aria-describedby="activityCode"/>
-                    <div id="activityCode" className="form-text"></div>
+                    <input value={formTask.time} onChange={handleChange} type="text" className="form-control" id="time" aria-describedby="time"/>
+                    {/*<div id="activityCode" className="form-text"></div>*/}
                 </div>
 
                 <button type="submit" className="btn btn-primary">Save</button>
diff --git a/src/persistence/LocalStorage.tsx b/src/persistence/LocalStorage.tsx
new file mode 100644
index 0000000..3e580be
--- /dev/null
+++ b/src/persistence/LocalStorage.tsx
@@ -0,0 +1,46 @@
+import {Storage} from "./Storage";
+import Task from "../components/Task";
+import _ from 'lodash';
+
+export class LocalStorage implements Storage {
+    private static readonly TASK_PROP_NAME = "task_prop_name";
+    saveItem(propertyName: string, item: any): void {
+        localStorage.setItem(propertyName, item);
+    }
+
+    getItem(propertyName: string): any {
+        return localStorage.getItem(propertyName);
+    }
+
+    saveTask(task: Task): void {
+        const tasksRaw: any = localStorage.getItem(LocalStorage.TASK_PROP_NAME);
+        let tasks;
+        if (!tasksRaw) {
+            tasks = [task];
+        } else {
+            tasks = JSON.parse(tasksRaw);
+            const t = _.find(tasks, task.id);
+            if (t) {
+                tasks.remove(t);
+            }
+            tasks.push(task);
+        }
+        localStorage.setItem(LocalStorage.TASK_PROP_NAME, JSON.stringify(tasks));
+        console.log("Logging tasks save");
+        tasks.forEach((t: any) => {
+           console.log("Task: \n" + JSON.stringify(t));
+        });
+    }
+
+    getTask(id: string): Task {
+        const tasks: any = localStorage.getItem(LocalStorage.TASK_PROP_NAME);
+
+        return _.find(tasks, id);
+    }
+
+    getTasks(): Array<Task> {
+        const tasks: any= localStorage.getItem(LocalStorage.TASK_PROP_NAME);
+
+        return tasks;
+    }
+}
\ No newline at end of file
diff --git a/src/persistence/Storage.tsx b/src/persistence/Storage.tsx
new file mode 100644
index 0000000..1d1d2d5
--- /dev/null
+++ b/src/persistence/Storage.tsx
@@ -0,0 +1,25 @@
+import {LocalStorage} from "./LocalStorage";
+import Task from "../components/Task";
+
+export abstract class Storage {
+
+    private static instance: Storage;
+
+    abstract saveItem(propertyName: string, item: any) : void;
+    abstract getItem(propertyName: string): any;
+    abstract saveTask(task: Task): void;
+    abstract getTask(id: string): Task;
+    abstract getTasks(): Array<Task>;
+
+    static getInstance(): Storage {
+        // TODO implement only for local and DB
+        if (!this.instance) {
+            this.instance = new LocalStorage();
+        }
+
+        return this.instance;
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/src/persistence/StorageData.ts b/src/persistence/StorageData.ts
new file mode 100644
index 0000000..a206c77
--- /dev/null
+++ b/src/persistence/StorageData.ts
@@ -0,0 +1,3 @@
+export interface StorageData {
+    id: string;
+}
\ No newline at end of file