From 42fc173896bfaadd8cc4d91dc887a6aa843e6938 Mon Sep 17 00:00:00 2001
From: Juan Carlos Miranda Carruana <jc.carruana@gmail.com>
Date: Wed, 30 Mar 2022 18:31:23 +0200
Subject: [PATCH] SPF-18: create function to make the watchlists persist in the
 local storage

---
 Frontend/src/routes/index.jsx | 47 +++++++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/Frontend/src/routes/index.jsx b/Frontend/src/routes/index.jsx
index 0372856a..713a9f17 100644
--- a/Frontend/src/routes/index.jsx
+++ b/Frontend/src/routes/index.jsx
@@ -1,22 +1,53 @@
-import React, {lazy} from "react";
-import { Route, Routes } from 'react-router-dom';
+import React, {lazy, useEffect, useState} from "react";
+import {Route, Routes} from 'react-router-dom';
 
 /**
  * Optional the component could load lazily, allowing to borrow more
  * time for it to completely load
  */
-const Home = lazy(() => import("../components/Home"));
-const About = lazy(() => import("../components/About"));
+const Home = lazy(() => import('../components/screens/Home'));
+const DashboardScreen = lazy(() => import('../components/screens/Dashboard/DashboardScreen'));
+const WatchListsScreen = lazy(() => import('../components/screens/WatchLists/WatchListsScreen'));
+const SettingsScreen = lazy(() => import('../components/screens/Settings/SettingsScreen'));
+
+/**
+ * Get value from key in local storage
+ * @param keyName
+ * @param defaultValue
+ * @returns {any|string}
+ */
+const persistState = (keyName, defaultValue) => {
+  const savedData = localStorage.getItem(keyName);
+  return savedData !== '' ? JSON.parse(savedData) : defaultValue;
+};
 
 /**
  * Defines the routes for the different pages
  * @constructor
  */
-let AppRoutes = () => (
+const AppRoutes = () => {
+  const [watchListsArray, setWatchListsArray] = useState(() => persistState('watchListsArray', []));
+
+  useEffect(() => {
+    localStorage.setItem("watchListsArray", JSON.stringify(watchListsArray));
+  }, [watchListsArray]);
+
+  return (
     <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
+      <Route path='/' element={<Home/>}/>
+      <Route path='/dashboard' element={<DashboardScreen/>}/>
+      <Route
+        path='/watchlists'
+        element={
+        <WatchListsScreen
+          watchListsArray={watchListsArray}
+          setWatchListsArray={setWatchListsArray}
+          />
+        }
+      />
+      <Route path='/settings' element={<SettingsScreen/>}/>
     </Routes>
-);
+  );
+}
 
 export default AppRoutes;
\ No newline at end of file