From a4f8a5b46545286aa2f2b1d7b8a03f722e90bd28 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Sat, 28 Oct 2023 00:28:46 +0000
Subject: [PATCH 01/20] Install axios for REST API communication

---
 package-lock.json | 75 +++++++++++++++++++++++++++++++++++++----------
 package.json      |  1 +
 yarn.lock         | 19 ++++++++++++
 3 files changed, 79 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index caf88ae..b964533 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@types/react": "^18.2.20",
         "@types/react-dom": "^18.2.7",
         "@vitejs/plugin-react-swc": "^3.4.0",
+        "axios": "^1.6.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.17.0",
@@ -2057,8 +2058,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
@@ -2108,6 +2108,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
+      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -2383,7 +2393,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -2565,7 +2574,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -2773,6 +2781,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2785,7 +2812,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -3873,7 +3899,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -3882,7 +3907,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -4374,6 +4398,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -6805,8 +6834,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "autoprefixer": {
       "version": "10.4.16",
@@ -6827,6 +6855,16 @@
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
     },
+    "axios": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
+      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
@@ -7015,7 +7053,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -7144,8 +7181,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
     "dequal": {
       "version": "2.0.3",
@@ -7312,6 +7348,11 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q=="
+    },
     "for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -7324,7 +7365,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -8094,14 +8134,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -8433,6 +8471,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index 7ed2168..2928a5d 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.4.0",
+    "axios": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
diff --git a/yarn.lock b/yarn.lock
index 25b6b86..d294a7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -839,6 +839,15 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
+axios@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz"
+  integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
@@ -1283,6 +1292,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+follow-redirects@^1.15.0:
+  version "1.15.3"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -2174,6 +2188,11 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"

From e3576f3acf4f3c2cbc6e05a4f6842d5ba92379b9 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Sat, 28 Oct 2023 14:45:40 +0000
Subject: [PATCH 02/20] Create test component and route for resting mock API
 calls

---
 src/App.tsx                      | 3 ++-
 src/components/TestComponent.tsx | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TestComponent.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 17362d4..250a2e6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,15 @@
 import React from "react";
 import FrontPage from "./components/FrontPage";
 import Login from "./components/Login";
+import TestComponent from "./components/TestComponent";
 import { Route, Routes } from "react-router-dom"
-
 import "./App.css";
 
 function App() {
   return <Routes>
     <Route path="/" element={<FrontPage/>} />
     <Route path="/login" element={<Login />} />
+    <Route path="/test" element={<TestComponent/>} />
   </Routes>
 }
 
diff --git a/src/components/TestComponent.tsx b/src/components/TestComponent.tsx
new file mode 100644
index 0000000..9998332
--- /dev/null
+++ b/src/components/TestComponent.tsx
@@ -0,0 +1,7 @@
+export const TestComponent = () => {
+    return (
+        <h1> Mock API Tests </h1>
+    )
+}
+
+export default TestComponent;
\ No newline at end of file

From b590dff1a1bf3b0cd8e822954731e76632348f5a Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Sat, 28 Oct 2023 15:00:14 +0000
Subject: [PATCH 03/20] Add post interface and default value

---
 src/components/TestComponent.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/TestComponent.tsx b/src/components/TestComponent.tsx
index 9998332..0429541 100644
--- a/src/components/TestComponent.tsx
+++ b/src/components/TestComponent.tsx
@@ -1,7 +1,18 @@
+import axios from 'axios';
+
 export const TestComponent = () => {
     return (
-        <h1> Mock API Tests </h1>
+        <h1> Placeholder API Tests </h1>
     )
 }
 
+interface IPost {
+    id: number;
+    userId?: number;
+    title: string;
+    body: string;
+  }
+
+const defaultPosts:IPost[] = [];
+
 export default TestComponent;
\ No newline at end of file

From 9157d0e2cd9b1ba1665f908ebf191fdef8bf5a0f Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Mon, 18 Dec 2023 19:21:15 +0000
Subject: [PATCH 04/20] Delete initial test component

---
 src/components/TestComponent.tsx | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 src/components/TestComponent.tsx

diff --git a/src/components/TestComponent.tsx b/src/components/TestComponent.tsx
deleted file mode 100644
index 0429541..0000000
--- a/src/components/TestComponent.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import axios from 'axios';
-
-export const TestComponent = () => {
-    return (
-        <h1> Placeholder API Tests </h1>
-    )
-}
-
-interface IPost {
-    id: number;
-    userId?: number;
-    title: string;
-    body: string;
-  }
-
-const defaultPosts:IPost[] = [];
-
-export default TestComponent;
\ No newline at end of file

From 29bc8126b01ce646e0248f0e5203b7eee3e92e26 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Mon, 18 Dec 2023 19:38:21 +0000
Subject: [PATCH 05/20] Install axios

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 yarn.lock         |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b964533..7e33903 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@types/react": "^18.2.20",
         "@types/react-dom": "^18.2.7",
         "@vitejs/plugin-react-swc": "^3.4.0",
-        "axios": "^1.6.0",
+        "axios": "^1.6.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.17.0",
@@ -2109,9 +2109,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
-      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -6856,9 +6856,9 @@
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
     },
     "axios": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
-      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "requires": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
diff --git a/package.json b/package.json
index 2928a5d..abf5d5c 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.4.0",
-    "axios": "^1.6.0",
+    "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
diff --git a/yarn.lock b/yarn.lock
index d294a7e..e53a763 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -839,10 +839,10 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axios@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz"
-  integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==
+axios@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz"
+  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"

From 6825ad960ca41d0e06c6d30055d8c479ed6d0912 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Sun, 18 Feb 2024 23:09:38 +0000
Subject: [PATCH 06/20] Add example data interface

Signed-off-by: aematei <alexanderematei@gmail.com>
---
 src/ts/IExampleData.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 src/ts/IExampleData.ts

diff --git a/src/ts/IExampleData.ts b/src/ts/IExampleData.ts
new file mode 100644
index 0000000..42195c7
--- /dev/null
+++ b/src/ts/IExampleData.ts
@@ -0,0 +1,6 @@
+export default interface IExampleData {
+    userId: number,
+    id: number,
+    title: string,
+    completed: boolean,
+  }
\ No newline at end of file

From 1e934c0f05d1c049b67ff84ebebf67ded22c9ba7 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Sun, 18 Feb 2024 23:10:43 +0000
Subject: [PATCH 07/20] Add demo microservice logic

Signed-off-by: aematei <alexanderematei@gmail.com>
---
 src/microservices/example.service.ts | 46 ++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/microservices/example.service.ts

diff --git a/src/microservices/example.service.ts b/src/microservices/example.service.ts
new file mode 100644
index 0000000..0ad2759
--- /dev/null
+++ b/src/microservices/example.service.ts
@@ -0,0 +1,46 @@
+//In this example, we'll be interacting with a fake todo list service to illustrate
+//how to create a front end api that connects to a backend service.
+//https://jsonplaceholder.typicode.com/
+//https://www.bezkoder.com/react-typescript-axios/
+
+import axios from "axios";
+import IExampleData from "../ts/IExampleData"; //We need an interface to type our data
+
+//First, we need to initialize an axios instance that will connect to the backend
+const ExampleClient = axios.create({ //replace <example> with your service name, like "account"
+  baseURL: "https://jsonplaceholder.typicode.com/", //the backend url
+  headers: {
+    "Content-type": "application/json"
+  }
+});
+
+//Next, we will define the fronted API that we'll use in our code to send requests to backend
+async function getAll() {
+    return await ExampleClient.get<Array<IExampleData>>("/todos");
+}
+
+async function get(id: string) { //get one (by id)
+    return await ExampleClient.get<IExampleData>(`/todos/${id}`);
+}
+
+async function create(data: IExampleData) { //create one
+    return await ExampleClient.post<IExampleData>("/todos", data);
+}
+
+async function update(data: IExampleData, id: any) { //update one (by id)
+    return await ExampleClient.put<any>(`/todos/${id}`, data);
+}
+
+//You can add any other methods that you think would help, just see what is
+//available to you on the backend and read up on HTTP requests.
+
+const example = [
+    getAll,
+    get,
+    create,
+    update
+]
+
+export default example;
+//Now our service is ready to be used in components!
+

From db3606ea50dd038139718fda4041cbeb2d88b307 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Sun, 18 Feb 2024 23:13:37 +0000
Subject: [PATCH 08/20] Add example component and route for viewing it

Signed-off-by: aematei <alexanderematei@gmail.com>
---
 src/App.tsx                           | 4 ++--
 src/components/ExampleServicePage.tsx | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ExampleServicePage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 250a2e6..0e730a9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import FrontPage from "./components/FrontPage";
+import { ExampleServicePage } from "./components/ExampleServicePage";
 import Login from "./components/Login";
-import TestComponent from "./components/TestComponent";
 import { Route, Routes } from "react-router-dom"
 import "./App.css";
 
@@ -9,7 +9,7 @@ function App() {
   return <Routes>
     <Route path="/" element={<FrontPage/>} />
     <Route path="/login" element={<Login />} />
-    <Route path="/test" element={<TestComponent/>} />
+    <Route path="/example" element={<ExampleServicePage/>} />
   </Routes>
 }
 
diff --git a/src/components/ExampleServicePage.tsx b/src/components/ExampleServicePage.tsx
new file mode 100644
index 0000000..68976d3
--- /dev/null
+++ b/src/components/ExampleServicePage.tsx
@@ -0,0 +1,8 @@
+export const ExampleServicePage = () => {
+    return (
+        <>
+        Test.
+        </>
+    )
+
+}
\ No newline at end of file

From 536d4cad7eda24a59827c8f38dde9e2e69d50c90 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Tue, 20 Feb 2024 20:53:57 +0000
Subject: [PATCH 09/20] Make getAll() return data only

Signed-off-by: aematei <alexanderematei@gmail.com>
---
 src/microservices/example.service.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/microservices/example.service.ts b/src/microservices/example.service.ts
index 0ad2759..2aaba3a 100644
--- a/src/microservices/example.service.ts
+++ b/src/microservices/example.service.ts
@@ -16,7 +16,8 @@ const ExampleClient = axios.create({ //replace <example> with your service name,
 
 //Next, we will define the fronted API that we'll use in our code to send requests to backend
 async function getAll() {
-    return await ExampleClient.get<Array<IExampleData>>("/todos");
+    let response = await ExampleClient.get<Array<IExampleData>>("/todos");
+    return response.data;
 }
 
 async function get(id: string) { //get one (by id)

From 65a90a17c81aa85f809405de486fe2f69ae193d4 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Tue, 20 Feb 2024 20:56:10 +0000
Subject: [PATCH 10/20] Use object type for service method container

Signed-off-by: aematei <alexanderematei@gmail.com>
---
 src/microservices/example.service.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/microservices/example.service.ts b/src/microservices/example.service.ts
index 2aaba3a..773c323 100644
--- a/src/microservices/example.service.ts
+++ b/src/microservices/example.service.ts
@@ -35,12 +35,12 @@ async function update(data: IExampleData, id: any) { //update one (by id)
 //You can add any other methods that you think would help, just see what is
 //available to you on the backend and read up on HTTP requests.
 
-const example = [
+const example = {
     getAll,
     get,
     create,
     update
-]
+}
 
 export default example;
 //Now our service is ready to be used in components!

From b582ee9ad4717c2a88b5466583413ce7865fb264 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Tue, 20 Feb 2024 21:14:33 +0000
Subject: [PATCH 11/20] wip: use hook to get todos

Signed-off-by: aematei <alexanderematei@gmail.com>
---
 src/components/ExampleServicePage.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/ExampleServicePage.tsx b/src/components/ExampleServicePage.tsx
index 68976d3..d111e3d 100644
--- a/src/components/ExampleServicePage.tsx
+++ b/src/components/ExampleServicePage.tsx
@@ -1,3 +1,22 @@
+import example from "../microservices/example.service"
+import IExampleData from "../ts/IExampleData";
+import { create } from 'zustand'
+
+interface ToDoState {
+  todos: IExampleData[]
+  refresh: () => void
+}
+
+const useBearStore = create<ToDoState>()((set) => ({
+  todos: [],
+  refresh: () => set((state) => ({ todos: example.getAll()})),
+}))
+
+
+let data = await example.getAll();
+for (var datum of data) {
+    console.log(datum)
+}
 export const ExampleServicePage = () => {
     return (
         <>

From 90ccfbc789702bf8b758eb2428a9fe512c2e99a7 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Sun, 25 Feb 2024 22:48:01 +0000
Subject: [PATCH 12/20] ip: ts logic for state mgmt

Signed-off-by: aematei <alexanderematei@gmail.com>
---
 src/components/ExampleServicePage.tsx    | 54 +++++++++++++++++++-----
 src/microservices/microserviceFactory.ts |  0
 2 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/microservices/microserviceFactory.ts

diff --git a/src/components/ExampleServicePage.tsx b/src/components/ExampleServicePage.tsx
index d111e3d..bbf1e35 100644
--- a/src/components/ExampleServicePage.tsx
+++ b/src/components/ExampleServicePage.tsx
@@ -2,25 +2,57 @@ import example from "../microservices/example.service"
 import IExampleData from "../ts/IExampleData";
 import { create } from 'zustand'
 
-interface ToDoState {
-  todos: IExampleData[]
-  refresh: () => void
+
+interface CounterState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
 }
 
-const useBearStore = create<ToDoState>()((set) => ({
-  todos: [],
-  refresh: () => set((state) => ({ todos: example.getAll()})),
-}))
+const useCounterStore = create<CounterState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}));
 
+interface Todo {
+  userId: number;
+  id: number;
+  title: string;
+  completed: boolean;
+}
+interface ToDoState {
+  todos: Todo[];
+  setOne: (id: number) => void;
+  setAll: () => void;
+}
 
-let data = await example.getAll();
-for (var datum of data) {
-    console.log(datum)
+interface PlaceholderState {
+  todos: any;
+  set: () => void
 }
+const usePlaceholderStore = create<PlaceholderState>((set) => ({
+  todos: 0,
+  set: () => {todo: example.getAll(); console.log(example.getAll())}
+}));
+
+const ToDos = () => {
+  const { count, increment, decrement } = useCounterStore();
+  const { todos, set } = usePlaceholderStore();
+
+  return (
+    <div>
+      <button onClick={set}>Get Todos</button>
+      <h1>TODOS</h1>
+    </div>
+  );
+};
+
 export const ExampleServicePage = () => {
+
     return (
         <>
-        Test.
+        <ToDos/>
         </>
     )
 
diff --git a/src/microservices/microserviceFactory.ts b/src/microservices/microserviceFactory.ts
new file mode 100644
index 0000000..e69de29

From 7bb338e794e7d0d3ba7c83ca3993461cbd3b5541 Mon Sep 17 00:00:00 2001
From: pogi7 <aaronlevitt7@gmail.com>
Date: Sun, 25 Feb 2024 23:18:20 +0000
Subject: [PATCH 13/20] wip: vanilla react state management example

Signed-off-by: pogi7 <aaronlevitt7@gmail.com>
---
 package-lock.json                     | 152 +++++++++++++-------------
 src/components/ExampleServicePage.tsx |  61 ++++++++---
 src/microservices/example.service.ts  |   2 +-
 yarn.lock                             | 108 +++++++++---------
 4 files changed, 177 insertions(+), 146 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7e33903..c0899fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,9 +43,9 @@
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
-      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg=="
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
+      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ=="
     },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
@@ -72,11 +72,11 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
       "dependencies": {
-        "@babel/highlight": "^7.22.13",
+        "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
       },
       "engines": {
@@ -121,11 +121,11 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
-      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
       "dependencies": {
-        "@babel/types": "^7.23.0",
+        "@babel/types": "^7.23.6",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -241,9 +241,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -278,9 +278,9 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
-      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -291,9 +291,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -356,19 +356,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz",
-      "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
+      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.0",
-        "@babel/types": "^7.23.0",
-        "debug": "^4.1.0",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -376,11 +376,11 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
+      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
@@ -2782,9 +2782,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "funding": [
         {
           "type": "individual",
@@ -5119,9 +5119,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.10.tgz",
-      "integrity": "sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -5543,9 +5543,9 @@
   },
   "dependencies": {
     "@adobe/css-tools": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
-      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg=="
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
+      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ=="
     },
     "@alloc/quick-lru": {
       "version": "5.2.0",
@@ -5563,11 +5563,11 @@
       }
     },
     "@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
       "requires": {
-        "@babel/highlight": "^7.22.13",
+        "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
       }
     },
@@ -5599,11 +5599,11 @@
       }
     },
     "@babel/generator": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
-      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
       "requires": {
-        "@babel/types": "^7.23.0",
+        "@babel/types": "^7.23.6",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -5686,9 +5686,9 @@
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw=="
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ=="
     },
     "@babel/helper-validator-identifier": {
       "version": "7.22.20",
@@ -5711,9 +5711,9 @@
       }
     },
     "@babel/highlight": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
-      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
       "requires": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -5721,9 +5721,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA=="
     },
     "@babel/plugin-syntax-jsx": {
       "version": "7.22.5",
@@ -5762,28 +5762,28 @@
       }
     },
     "@babel/traverse": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz",
-      "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
+      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
       "requires": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.0",
-        "@babel/types": "^7.23.0",
-        "debug": "^4.1.0",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "debug": "^4.3.1",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
+      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
       "requires": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       }
@@ -7349,9 +7349,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q=="
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw=="
     },
     "for-each": {
       "version": "0.3.3",
@@ -8984,9 +8984,9 @@
       }
     },
     "vite": {
-      "version": "4.4.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.10.tgz",
-      "integrity": "sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "requires": {
         "esbuild": "^0.18.10",
         "fsevents": "~2.3.2",
diff --git a/src/components/ExampleServicePage.tsx b/src/components/ExampleServicePage.tsx
index bbf1e35..5f48d1d 100644
--- a/src/components/ExampleServicePage.tsx
+++ b/src/components/ExampleServicePage.tsx
@@ -1,7 +1,8 @@
-import example from "../microservices/example.service"
+import { useState } from "react";
+import example from "../microservices/example.service";
+import { getAll } from "../microservices/example.service";
 import IExampleData from "../ts/IExampleData";
-import { create } from 'zustand'
-
+import { create } from "zustand";
 
 interface CounterState {
   count: number;
@@ -29,31 +30,61 @@ interface ToDoState {
 
 interface PlaceholderState {
   todos: any;
-  set: () => void
+  set: () => void;
 }
 const usePlaceholderStore = create<PlaceholderState>((set) => ({
   todos: 0,
-  set: () => {todo: example.getAll(); console.log(example.getAll())}
+  set: () => {
+    todo: example.getAll();
+    console.log(example.getAll());
+  },
 }));
 
 const ToDos = () => {
   const { count, increment, decrement } = useCounterStore();
   const { todos, set } = usePlaceholderStore();
 
+  // Vanilla React State Management
+  const [todo, setTodo] = useState<any>([]);
+  const [toggle, setToggle] = useState<boolean>(false);
+
+  const resolveTodoListPromise = () => {
+    if (toggle) 
+    {
+      // Resolve promise
+      getAll().then((value: any) => {
+        setTodo([{id: "1", title: "test"}]);
+      });
+      // Set toggle to inverse
+      setToggle(!toggle);
+    }
+    else
+    {
+      // Resolve promise
+      getAll().then((value: any) => {
+        setTodo(value);
+      });
+      // Set toggle to inverse
+      setToggle(!toggle);
+    }
+  };
+
   return (
     <div>
-      <button onClick={set}>Get Todos</button>
-      <h1>TODOS</h1>
+      <button onClick={resolveTodoListPromise}>Get Todos</button>
+      {todo.map((todo: any) => (
+        <div key={todo.id}>
+          <p>{todo.title}</p>
+        </div>
+      ))}
     </div>
   );
 };
 
 export const ExampleServicePage = () => {
-
-    return (
-        <>
-        <ToDos/>
-        </>
-    )
-
-}
\ No newline at end of file
+  return (
+    <>
+      <ToDos />
+    </>
+  );
+};
diff --git a/src/microservices/example.service.ts b/src/microservices/example.service.ts
index 773c323..8f27b87 100644
--- a/src/microservices/example.service.ts
+++ b/src/microservices/example.service.ts
@@ -15,7 +15,7 @@ const ExampleClient = axios.create({ //replace <example> with your service name,
 });
 
 //Next, we will define the fronted API that we'll use in our code to send requests to backend
-async function getAll() {
+export async function getAll() {
     let response = await ExampleClient.get<Array<IExampleData>>("/todos");
     return response.data;
 }
diff --git a/yarn.lock b/yarn.lock
index e53a763..09a46bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3,9 +3,9 @@
 
 
 "@adobe/css-tools@^4.0.1":
-  version "4.3.1"
-  resolved "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz"
-  integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
+  version "4.3.3"
+  resolved "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz"
+  integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==
 
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
@@ -20,12 +20,12 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.13":
-  version "7.22.13"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz"
-  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz"
+  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
   dependencies:
-    "@babel/highlight" "^7.22.13"
+    "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
 "@babel/compat-data@^7.22.9":
@@ -54,12 +54,12 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz"
-  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
+"@babel/generator@^7.23.0", "@babel/generator@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz"
+  integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
   dependencies:
-    "@babel/types" "^7.23.0"
+    "@babel/types" "^7.23.6"
     "@jridgewell/gen-mapping" "^0.3.2"
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
@@ -132,10 +132,10 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-string-parser@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz"
-  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+"@babel/helper-string-parser@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz"
+  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
 
 "@babel/helper-validator-identifier@^7.22.20":
   version "7.22.20"
@@ -156,19 +156,19 @@
     "@babel/traverse" "^7.23.0"
     "@babel/types" "^7.23.0"
 
-"@babel/highlight@^7.22.13":
-  version "7.22.20"
-  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz"
-  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+"@babel/highlight@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz"
+  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
   dependencies:
     "@babel/helper-validator-identifier" "^7.22.20"
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz"
-  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz"
+  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
 
 "@babel/plugin-syntax-jsx@^7.16.7":
   version "7.22.5"
@@ -201,27 +201,27 @@
     "@babel/types" "^7.22.15"
 
 "@babel/traverse@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz"
-  integrity sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==
+  version "7.23.9"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz"
+  integrity sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==
   dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.23.0"
+    "@babel/code-frame" "^7.23.5"
+    "@babel/generator" "^7.23.6"
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.0"
-    "@babel/types" "^7.23.0"
-    debug "^4.1.0"
+    "@babel/parser" "^7.23.9"
+    "@babel/types" "^7.23.9"
+    debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz"
-  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
+"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz"
+  integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==
   dependencies:
-    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-string-parser" "^7.23.4"
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
@@ -230,10 +230,10 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@esbuild/linux-arm64@0.18.20":
+"@esbuild/linux-x64@0.18.20":
   version "0.18.20"
-  resolved "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
 
 "@fortawesome/fontawesome-common-types@6.4.2":
   version "6.4.2"
@@ -440,15 +440,15 @@
     "@svgr/hast-util-to-babel-ast" "8.0.0"
     svg-parser "^2.0.4"
 
-"@swc/core-linux-arm64-gnu@1.3.91":
+"@swc/core-linux-x64-gnu@1.3.91":
   version "1.3.91"
-  resolved "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.91.tgz"
-  integrity sha512-fki4ioRP/Esy4vdp8T34RCV+V9dqkRmOt763pf74pdiyFV2dPLXa5lnw/XvR1RTfPGknrYgjEQLCfZlReTryRw==
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.91.tgz"
+  integrity sha512-d11bYhX+YPBr/Frcjc6eVn3C0LuS/9U1Li9EmQ+6s9EpYtYRl2ygSlC8eueLbaiazBnCVYFnc8bU4o0kc5B9sw==
 
-"@swc/core-linux-arm64-musl@1.3.91":
+"@swc/core-linux-x64-musl@1.3.91":
   version "1.3.91"
-  resolved "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.91.tgz"
-  integrity sha512-XrG+DUUqNtfVLcJ20imby7fpBwQNG5VsEQBzQndSonPyUOa2YkTbBb60YDondfQGDABopuHH8gHN8o2H2/VCnQ==
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.91.tgz"
+  integrity sha512-2SRp5Dke2P4jCQePkDx9trkkTstnRpZJVw5r3jvYdk0zeO6iC4+ZPvvoWXJLigqQv/fZnIiSUfJ6ssOoaEqTzQ==
 
 "@swc/core@^1.3.85":
   version "1.3.91"
@@ -1091,7 +1091,7 @@ data-urls@^4.0.0:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^12.0.0"
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.4, debug@4:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4, debug@4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -1293,9 +1293,9 @@ fill-range@^7.0.1:
     to-regex-range "^5.0.1"
 
 follow-redirects@^1.15.0:
-  version "1.15.3"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz"
-  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+  version "1.15.5"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz"
+  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -2680,9 +2680,9 @@ vite-tsconfig-paths@^4.2.1:
     tsconfck "^2.1.0"
 
 vite@*, "vite@^2.6.0 || 3 || 4", "vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", "vite@^3.1.0 || ^4.0.0 || ^5.0.0-0", vite@^4, vite@^4.4.10, vite@>=2:
-  version "4.4.10"
-  resolved "https://registry.npmjs.org/vite/-/vite-4.4.10.tgz"
-  integrity sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==
+  version "4.5.2"
+  resolved "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz"
+  integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
   dependencies:
     esbuild "^0.18.10"
     postcss "^8.4.27"

From 29ae76086206bc764e8894fd96652bed62ea94d1 Mon Sep 17 00:00:00 2001
From: aematei <alexanderematei@gmail.com>
Date: Mon, 26 Feb 2024 19:13:38 +0000
Subject: [PATCH 14/20] wip: configures hooks

Signed-off-by: aematei <alexanderematei@gmail.com>
---
 src/components/ExampleServicePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ExampleServicePage.tsx b/src/components/ExampleServicePage.tsx
index bbf1e35..27a797f 100644
--- a/src/components/ExampleServicePage.tsx
+++ b/src/components/ExampleServicePage.tsx
@@ -15,7 +15,7 @@ const useCounterStore = create<CounterState>((set) => ({
   decrement: () => set((state) => ({ count: state.count - 1 })),
 }));
 
-interface Todo {
+interface Todo { 
   userId: number;
   id: number;
   title: string;

From 115498def3e06b0291715be19869ff98c1d15f61 Mon Sep 17 00:00:00 2001
From: Alex Matei <25559473+aematei@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:00:57 +0000
Subject: [PATCH 15/20] Fix npm vulnerabilities

Signed-off-by: Alex Matei <25559473+aematei@users.noreply.github.com>
---
 package-lock.json | 64 +++++++++++++++++++++++------------------------
 yarn.lock         | 34 ++++++++++++-------------
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c0899fc..e73ad25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2184,12 +2184,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -2770,9 +2770,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -2782,9 +2782,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -5119,9 +5119,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -5452,9 +5452,9 @@
       "dev": true
     },
     "node_modules/ws": {
-      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -6920,12 +6920,12 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "browserslist": {
@@ -7340,18 +7340,18 @@
       }
     },
     "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
     },
     "follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw=="
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
     },
     "for-each": {
       "version": "0.3.3",
@@ -8984,9 +8984,9 @@
       }
     },
     "vite": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "requires": {
         "esbuild": "^0.18.10",
         "fsevents": "~2.3.2",
@@ -9170,9 +9170,9 @@
       "dev": true
     },
     "ws": {
-      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "requires": {}
     },
diff --git a/yarn.lock b/yarn.lock
index 09a46bc..7f7a1ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -876,11 +876,11 @@ brace-expansion@^1.1.7:
     concat-map "0.0.1"
 
 braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
 browserslist@^4.21.10, browserslist@^4.21.9, "browserslist@>= 4.21.0":
   version "4.22.1"
@@ -1285,17 +1285,17 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
 follow-redirects@^1.15.0:
-  version "1.15.5"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz"
-  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
+  version "1.15.6"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz"
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -2680,9 +2680,9 @@ vite-tsconfig-paths@^4.2.1:
     tsconfck "^2.1.0"
 
 vite@*, "vite@^2.6.0 || 3 || 4", "vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", "vite@^3.1.0 || ^4.0.0 || ^5.0.0-0", vite@^4, vite@^4.4.10, vite@>=2:
-  version "4.5.2"
-  resolved "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz"
-  integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
+  version "4.5.3"
+  resolved "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz"
+  integrity sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==
   dependencies:
     esbuild "^0.18.10"
     postcss "^8.4.27"
@@ -2803,9 +2803,9 @@ wrappy@1:
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
 ws@^8.13.0:
-  version "8.14.2"
-  resolved "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz"
-  integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==
+  version "8.18.0"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
 xml-name-validator@^4.0.0:
   version "4.0.0"

From 45ed60a64291facc8eb4468ed77d21628c4484d7 Mon Sep 17 00:00:00 2001
From: Alex Matei <25559473+aematei@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:15:26 +0000
Subject: [PATCH 16/20] Create account data interface

Signed-off-by: Alex Matei <25559473+aematei@users.noreply.github.com>
---
 src/components/Content.tsx            | 1 +
 src/components/ExampleServicePage.tsx | 1 -
 src/interfaces/IAccountData.ts        | 8 ++++++++
 src/types/images.d.ts                 | 4 ----
 4 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 src/interfaces/IAccountData.ts
 delete mode 100644 src/types/images.d.ts

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index 7f69568..5ea7307 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -3,6 +3,7 @@ import { IconCard } from "./IconCard";
 import { iconCards } from "../assets/cardData";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { icon } from "@fortawesome/fontawesome-svg-core/import.macro";
+import { IAccountData } from "../interfaces/IAccountData";
 
 var icons = [
   <FontAwesomeIcon
diff --git a/src/components/ExampleServicePage.tsx b/src/components/ExampleServicePage.tsx
index bb4ae0e..ba12e7d 100644
--- a/src/components/ExampleServicePage.tsx
+++ b/src/components/ExampleServicePage.tsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 import example from "../microservices/example.service";
 import { getAll } from "../microservices/example.service";
-import IExampleData from "../ts/IExampleData";
 import { create } from "zustand";
 
 interface CounterState {
diff --git a/src/interfaces/IAccountData.ts b/src/interfaces/IAccountData.ts
new file mode 100644
index 0000000..1e4fc25
--- /dev/null
+++ b/src/interfaces/IAccountData.ts
@@ -0,0 +1,8 @@
+export interface IAccountData {
+        creationDate: string,
+        deleteDate: string,
+        lastUpdated: string,
+        email: string,
+        name: string,
+        devicesLinked: string[]
+}
\ No newline at end of file
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
deleted file mode 100644
index c3a2776..0000000
--- a/src/types/images.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module "*.png";
-declare module "*.svg";
-declare module "*.jpeg";
-declare module "*.jpg";

From 82941f874d5e703555cd58f697509d3d7ac5ead5 Mon Sep 17 00:00:00 2001
From: Alex Matei <25559473+aematei@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:20:23 +0000
Subject: [PATCH 17/20] Create device data interface

Signed-off-by: Alex Matei <25559473+aematei@users.noreply.github.com>
---
 src/interfaces/IDeviceData.ts          | 12 ++++++++++++
 src/{ts => interfaces}/IExampleData.ts |  0
 src/microservices/example.service.ts   |  2 +-
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 src/interfaces/IDeviceData.ts
 rename src/{ts => interfaces}/IExampleData.ts (100%)

diff --git a/src/interfaces/IDeviceData.ts b/src/interfaces/IDeviceData.ts
new file mode 100644
index 0000000..904e2cc
--- /dev/null
+++ b/src/interfaces/IDeviceData.ts
@@ -0,0 +1,12 @@
+export interface IDeviceData {
+    uuid: string,
+    lastUpdated: string,
+    powered: boolean;
+    poweredTimestamp: string,
+    connected: boolean,
+    connectedTimestamp: string,
+    color: string,
+    colorTimestamp: string,
+    brightness: string,
+    brightnessTimestamp: string
+}
\ No newline at end of file
diff --git a/src/ts/IExampleData.ts b/src/interfaces/IExampleData.ts
similarity index 100%
rename from src/ts/IExampleData.ts
rename to src/interfaces/IExampleData.ts
diff --git a/src/microservices/example.service.ts b/src/microservices/example.service.ts
index 8f27b87..fcefc1f 100644
--- a/src/microservices/example.service.ts
+++ b/src/microservices/example.service.ts
@@ -4,7 +4,7 @@
 //https://www.bezkoder.com/react-typescript-axios/
 
 import axios from "axios";
-import IExampleData from "../ts/IExampleData"; //We need an interface to type our data
+import IExampleData from "../interfaces/IExampleData"; //We need an interface to type our data
 
 //First, we need to initialize an axios instance that will connect to the backend
 const ExampleClient = axios.create({ //replace <example> with your service name, like "account"

From 84bab04571196eec8f90feda553f30c0b524ba71 Mon Sep 17 00:00:00 2001
From: Alex Matei <25559473+aematei@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:22:40 +0000
Subject: [PATCH 18/20] Remove microsrevice example and direcrtory

Signed-off-by: Alex Matei <25559473+aematei@users.noreply.github.com>
---
 src/microservices/example.service.ts     | 47 ------------------------
 src/microservices/microserviceFactory.ts |  0
 2 files changed, 47 deletions(-)
 delete mode 100644 src/microservices/example.service.ts
 delete mode 100644 src/microservices/microserviceFactory.ts

diff --git a/src/microservices/example.service.ts b/src/microservices/example.service.ts
deleted file mode 100644
index fcefc1f..0000000
--- a/src/microservices/example.service.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-//In this example, we'll be interacting with a fake todo list service to illustrate
-//how to create a front end api that connects to a backend service.
-//https://jsonplaceholder.typicode.com/
-//https://www.bezkoder.com/react-typescript-axios/
-
-import axios from "axios";
-import IExampleData from "../interfaces/IExampleData"; //We need an interface to type our data
-
-//First, we need to initialize an axios instance that will connect to the backend
-const ExampleClient = axios.create({ //replace <example> with your service name, like "account"
-  baseURL: "https://jsonplaceholder.typicode.com/", //the backend url
-  headers: {
-    "Content-type": "application/json"
-  }
-});
-
-//Next, we will define the fronted API that we'll use in our code to send requests to backend
-export async function getAll() {
-    let response = await ExampleClient.get<Array<IExampleData>>("/todos");
-    return response.data;
-}
-
-async function get(id: string) { //get one (by id)
-    return await ExampleClient.get<IExampleData>(`/todos/${id}`);
-}
-
-async function create(data: IExampleData) { //create one
-    return await ExampleClient.post<IExampleData>("/todos", data);
-}
-
-async function update(data: IExampleData, id: any) { //update one (by id)
-    return await ExampleClient.put<any>(`/todos/${id}`, data);
-}
-
-//You can add any other methods that you think would help, just see what is
-//available to you on the backend and read up on HTTP requests.
-
-const example = {
-    getAll,
-    get,
-    create,
-    update
-}
-
-export default example;
-//Now our service is ready to be used in components!
-
diff --git a/src/microservices/microserviceFactory.ts b/src/microservices/microserviceFactory.ts
deleted file mode 100644
index e69de29..0000000

From ab3cfe659c8c21ea7221e695e57c2dc2d085d262 Mon Sep 17 00:00:00 2001
From: Alex Matei <25559473+aematei@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:25:31 +0000
Subject: [PATCH 19/20] Remove microsrevice example and direcrtory

Signed-off-by: Alex Matei <25559473+aematei@users.noreply.github.com>
---
 src/components/ExampleServicePage.tsx | 89 ---------------------------
 src/interfaces/IExampleData.ts        |  6 --
 src/pages/AccountPage.tsx             |  0
 src/pages/FrontPage.tsx               |  0
 4 files changed, 95 deletions(-)
 delete mode 100644 src/components/ExampleServicePage.tsx
 delete mode 100644 src/interfaces/IExampleData.ts
 create mode 100644 src/pages/AccountPage.tsx
 create mode 100644 src/pages/FrontPage.tsx

diff --git a/src/components/ExampleServicePage.tsx b/src/components/ExampleServicePage.tsx
deleted file mode 100644
index ba12e7d..0000000
--- a/src/components/ExampleServicePage.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useState } from "react";
-import example from "../microservices/example.service";
-import { getAll } from "../microservices/example.service";
-import { create } from "zustand";
-
-interface CounterState {
-  count: number;
-  increment: () => void;
-  decrement: () => void;
-}
-
-const useCounterStore = create<CounterState>((set) => ({
-  count: 0,
-  increment: () => set((state) => ({ count: state.count + 1 })),
-  decrement: () => set((state) => ({ count: state.count - 1 })),
-}));
-
-interface Todo { 
-  userId: number;
-  id: number;
-  title: string;
-  completed: boolean;
-}
-interface ToDoState {
-  todos: Todo[];
-  setOne: (id: number) => void;
-  setAll: () => void;
-}
-
-interface PlaceholderState {
-  todos: any;
-  set: () => void;
-}
-const usePlaceholderStore = create<PlaceholderState>((set) => ({
-  todos: 0,
-  set: () => {
-    todo: example.getAll();
-    console.log(example.getAll());
-  },
-}));
-
-const ToDos = () => {
-  const { count, increment, decrement } = useCounterStore();
-  const { todos, set } = usePlaceholderStore();
-
-  // Vanilla React State Management
-  const [todo, setTodo] = useState<any>([]);
-  const [toggle, setToggle] = useState<boolean>(false);
-
-  const resolveTodoListPromise = () => {
-    if (toggle) 
-    {
-      // Resolve promise
-      getAll().then((value: any) => {
-        setTodo([{id: "1", title: "test"}]);
-      });
-      // Set toggle to inverse
-      setToggle(!toggle);
-    }
-    else
-    {
-      // Resolve promise
-      getAll().then((value: any) => {
-        setTodo(value);
-      });
-      // Set toggle to inverse
-      setToggle(!toggle);
-    }
-  };
-
-  return (
-    <div>
-      <button onClick={resolveTodoListPromise}>Get Todos</button>
-      {todo.map((todo: any) => (
-        <div key={todo.id}>
-          <p>{todo.title}</p>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export const ExampleServicePage = () => {
-  return (
-    <>
-      <ToDos />
-    </>
-  );
-};
diff --git a/src/interfaces/IExampleData.ts b/src/interfaces/IExampleData.ts
deleted file mode 100644
index 42195c7..0000000
--- a/src/interfaces/IExampleData.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default interface IExampleData {
-    userId: number,
-    id: number,
-    title: string,
-    completed: boolean,
-  }
\ No newline at end of file
diff --git a/src/pages/AccountPage.tsx b/src/pages/AccountPage.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/FrontPage.tsx b/src/pages/FrontPage.tsx
new file mode 100644
index 0000000..e69de29

From a7db30710b89da4a588acb9a1d8817b8c88135f7 Mon Sep 17 00:00:00 2001
From: Alex Matei <25559473+aematei@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:32:23 +0000
Subject: [PATCH 20/20] Create front page view

Signed-off-by: Alex Matei <25559473+aematei@users.noreply.github.com>
---
 src/pages/AccountPage.tsx   | 0
 src/pages/FrontPage.tsx     | 0
 src/pages/FrontPageView.tsx | 5 +++++
 3 files changed, 5 insertions(+)
 delete mode 100644 src/pages/AccountPage.tsx
 delete mode 100644 src/pages/FrontPage.tsx
 create mode 100644 src/pages/FrontPageView.tsx

diff --git a/src/pages/AccountPage.tsx b/src/pages/AccountPage.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/FrontPage.tsx b/src/pages/FrontPage.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/FrontPageView.tsx b/src/pages/FrontPageView.tsx
new file mode 100644
index 0000000..fe7a3a0
--- /dev/null
+++ b/src/pages/FrontPageView.tsx
@@ -0,0 +1,5 @@
+import { FrontPage } from "../components/FrontPage"
+
+export const FrontPageView = () => {
+    return <FrontPage />
+}
\ No newline at end of file