From 48589d80f9189763162e693362ab7c3c1a33cc4f Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Sun, 17 Oct 2021 19:45:36 +0300
Subject: [PATCH] made tasks persistent in localstorage

---
 src/App.tsx              | 37 ++++++++++++++++++++++---------------
 src/hooks.ts             |  2 +-
 src/index.tsx            |  9 ++++++++-
 src/localStorage.ts      | 15 +++++++++++++++
 src/store/slices/todo.ts | 12 ++++++------
 5 files changed, 52 insertions(+), 23 deletions(-)
 create mode 100644 src/localStorage.ts

diff --git a/src/App.tsx b/src/App.tsx
index d92d5f4..33b7da5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,25 +1,32 @@
-import React from "react";
-import { Provider } from "react-redux";
+import React, { useEffect } from "react";
 
 import { Layout } from "./components/Layout";
 import { TodoList } from "./components/TodoList";
 import { AppBar } from "./components/AppBar";
 import { AddTask } from "./components/AddTask";
-import store from "./store";
+
+import { loadStorage } from "./localStorage";
+import { useAppDispatch } from "./hooks";
+import { hydrate } from "./store/slices/todo";
 
 export const App = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    const initialStorage = loadStorage();
+    if (initialStorage) dispatch(hydrate(initialStorage));
+  }, []);
+
   return (
-    <Provider store={store}>
-      <Layout
-        appBar={<AppBar />}
-        title="My tasks"
-        content={
-          <>
-            <TodoList />
-            <AddTask />
-          </>
-        }
-      />
-    </Provider>
+    <Layout
+      appBar={<AppBar />}
+      title="My tasks"
+      content={
+        <>
+          <TodoList />
+          <AddTask />
+        </>
+      }
+    />
   );
 };
diff --git a/src/hooks.ts b/src/hooks.ts
index d35e905..ecc1f5b 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -1,4 +1,4 @@
-import { ChangeEventHandler, useState } from "react";
+import { useState } from "react";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 
 import { AppDispatch, RootState } from "./store";
diff --git a/src/index.tsx b/src/index.tsx
index cfdd49e..23d5d70 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,11 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
 
 import { App } from "./App";
+import { saveStorage } from "./localStorage";
+import store from "./store";
+
+store.subscribe(() => saveStorage(store.getState().todo.tasks));
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/src/localStorage.ts b/src/localStorage.ts
new file mode 100644
index 0000000..dd859c0
--- /dev/null
+++ b/src/localStorage.ts
@@ -0,0 +1,15 @@
+import { TaskItemT } from "./types";
+
+const LOCAL_STORAGE_KEY = "reduxStorage";
+
+export const loadStorage = (): TaskItemT[] | undefined => {
+  try {
+    const persistedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (persistedState) return JSON.parse(persistedState);
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const saveStorage = (storage: TaskItemT[]) =>
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(storage));
diff --git a/src/store/slices/todo.ts b/src/store/slices/todo.ts
index 9fed27e..6f7fb8c 100644
--- a/src/store/slices/todo.ts
+++ b/src/store/slices/todo.ts
@@ -3,18 +3,18 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { TaskItemT } from "../../types";
 
 const initialState: { tasks: TaskItemT[] } = {
-  tasks: [
-    { done: true, id: 1, text: "hello" },
-    { done: false, id: 2, text: "goodbye" },
-  ],
+  tasks: [],
 };
 
 export const todoSlice = createSlice({
   name: "todo",
   initialState: initialState,
   reducers: {
+    hydrate: (state, { payload }) => {
+      state.tasks = payload;
+    },
     add: (state, { payload }: PayloadAction<string>) => {
-      const newId = state.tasks[state.tasks.length - 1]?.id ?? 0;
+      const newId = (state.tasks[state.tasks.length - 1]?.id ?? -1) + 1;
 
       state.tasks.push({
         done: false,
@@ -40,6 +40,6 @@ export const todoSlice = createSlice({
   },
 });
 
-export const { add, updateText, markDone, remove } = todoSlice.actions;
+export const { hydrate, add, updateText, markDone, remove } = todoSlice.actions;
 
 export default todoSlice.reducer;