Added book list reading for bookshelf

src/Bookshelf/index.tsx

@@ -1,14 +1,18 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { IBook } from "@type/book";
 
 import styles from "./Bookshelf.module.css";
 
-import list from "@assets/bookList.json";
 import { BookItem } from "./BookItem";
 import { AddBook } from "./AddBook";
+import { readBooks } from "@utils/localStorage";
 
 export const Bookshelf = () => {
-  const [books, setBooks] = useState<IBook[]>(list);
+  const [books, setBooks] = useState<IBook[]>([]);
+
+  useEffect(() => {
+    setBooks(readBooks());
+  }, []);
 
   return (
     <div className={styles.container}>

src/utils/localStorage.ts

@@ -1,14 +1,40 @@
 import { IBook } from "@type/book";
 import { isArrOfStr } from "@type/utils";
+import { validateResponse } from "../api";
+import { BookItem } from "../Bookshelf/BookItem";
 
-export const saveBook = (bookObj: IBook, key: string): void => {
+const readBookList = <T>(
+  cb: (bookList: string[]) => T,
+  defaultValue: T extends void ? undefined : T
+) => {
   const bookListStr = localStorage.getItem("list") || "[]";
   const bookList: unknown = JSON.parse(bookListStr);
 
-  if (isArrOfStr(bookList) && !bookList.includes(key)) {
+  if (isArrOfStr(bookList)) return cb(bookList);
-    const newBookList = [key, ...bookList];
+  return defaultValue;
-
-    localStorage.setItem("list", JSON.stringify(newBookList));
-    localStorage.setItem(key, JSON.stringify(bookObj));
-  }
 };
+
+export const saveBook = (bookObj: IBook, key: string) =>
+  readBookList((bookList) => {
+    if (!bookList.includes(key)) {
+      const newBookList = [key, ...bookList];
+
+      localStorage.setItem("list", JSON.stringify(newBookList));
+      localStorage.setItem(key, JSON.stringify(bookObj));
+    }
+  }, undefined);
+
+export const readBooks = (): IBook[] =>
+  readBookList(
+    (bookList) =>
+      bookList
+        .map((hash) => JSON.parse(localStorage.getItem(hash) || "{}"))
+        .filter((e) => {
+          try {
+            return validateResponse(e);
+          } catch (err) {
+            return false;
+          }
+        }),
+    []
+  );