From 8f467cef5ef1225a6eb142706ce4955d6ec13db5 Mon Sep 17 00:00:00 2001 From: amol Date: Sun, 13 Nov 2022 00:19:46 +0530 Subject: [PATCH] feat: Bookshelf, --- src/app/features/bookShelfSlice.ts | 20 ++++++++++ src/app/hook.ts | 5 +++ src/app/store.ts | 12 ++++-- src/components/Book.tsx | 6 +-- src/components/Navbar.tsx | 64 +++++++++++++++++++++++++++--- src/index.css | 2 +- src/type.d.ts | 1 + 7 files changed, 97 insertions(+), 13 deletions(-) create mode 100644 src/app/features/bookShelfSlice.ts create mode 100644 src/app/hook.ts create mode 100644 src/type.d.ts diff --git a/src/app/features/bookShelfSlice.ts b/src/app/features/bookShelfSlice.ts new file mode 100644 index 0000000..db35b01 --- /dev/null +++ b/src/app/features/bookShelfSlice.ts @@ -0,0 +1,20 @@ +import { createSlice } from "@reduxjs/toolkit"; + +let initialState: BookShelf = []; +if( localStorage.getItem("bookShelf")!==null ){ + initialState = JSON.parse( localStorage.getItem("bookShelf") as string ); +} + +export const bookShelfSlice = createSlice({ + name: "bookShelf", + initialState: initialState, + reducers: { + addBook: (state, {payload}: {payload: string}) => { + state.push(payload); + localStorage.setItem('bookShelf', JSON.stringify(state)); + } + } +}) + +export const {addBook} = bookShelfSlice.actions; +export default bookShelfSlice.reducer; \ No newline at end of file diff --git a/src/app/hook.ts b/src/app/hook.ts new file mode 100644 index 0000000..3e4908a --- /dev/null +++ b/src/app/hook.ts @@ -0,0 +1,5 @@ +import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; +import { AppDispatch, RootState } from "./store"; + +export const useAppDispatch: () => AppDispatch = useDispatch +export const useAppSelector: TypedUseSelectorHook = useSelector \ No newline at end of file diff --git a/src/app/store.ts b/src/app/store.ts index de8499d..51a80c5 100644 --- a/src/app/store.ts +++ b/src/app/store.ts @@ -1,8 +1,14 @@ import { configureStore } from "@reduxjs/toolkit"; +import bookShelfReducer from "./features/bookShelfSlice"; import bookReducer from "./features/bookSlice"; -export default configureStore({ +const store = configureStore({ reducer: { - book: bookReducer + book: bookReducer, + bookShelf: bookShelfReducer } -}); \ No newline at end of file +}); + +export default store; +export type RootState = ReturnType +export type AppDispatch = typeof store.dispatch \ No newline at end of file diff --git a/src/components/Book.tsx b/src/components/Book.tsx index b229e14..32f62d1 100644 --- a/src/components/Book.tsx +++ b/src/components/Book.tsx @@ -1,11 +1,11 @@ import { useEffect, useRef } from "react"; -import { useDispatch, useSelector } from "react-redux"; import { add } from "../app/features/bookSlice"; +import { useAppDispatch, useAppSelector } from "../app/hook"; export default function Book(){ // @ts-ignore - const text: string = useSelector(s => s.book.text); - const dispatch = useDispatch(); + const text: string = useAppSelector(s => s.book.text); + const dispatch = useAppDispatch(); const textRef = useRef(null); useEffect( ()=>{ diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 6fa2afa..fa73529 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,10 +1,57 @@ -import { useState } from "react"; +import { useState, useRef, FormEvent, useMemo } from "react"; +import { addBook } from "../app/features/bookShelfSlice"; +import { useAppDispatch, useAppSelector } from "../app/hook"; export default function Navbar(){ + const LABEL = 'New'; const [state, setState] = useState(false); + const createBtnRef = useRef(null); + const [isHidden, setIsHidden] = useState(true); + // let [bookShelf, setBookShelf] = useState([]); + let bookShelf: BookShelf = useAppSelector(s => s.bookShelf); + const dispatch = useAppDispatch(); - const handleToggle = ()=>{ - setState( (prev: boolean )=> !prev ); + const bookListItem = useMemo( () => { + return bookShelf.map( book =>
  • {book}
    • ); + }, [bookShelf]); + + const handleToggle = ()=> setState( (prev: boolean )=> !prev ); + + const changeNewText = (e: FormEvent)=>{ + let text: string|undefined|null = createBtnRef.current?.textContent; + (LABEL === text || text==="") ? setIsHidden(true) : setIsHidden(false); + } + + const HandleEnter = (e: any) => { + if(e.key === 'Enter') { + e.preventDefault(); + console.log(createBtnRef.current?.textContent); + if(createBtnRef.current !== null) { + // createBtnRef.current.textContent = LABEL; + } + } + } + + const resetDefault = (e: FormEvent) => { + if(createBtnRef.current !== null) { + if(createBtnRef.current.textContent===""){ + createBtnRef.current.textContent = LABEL; + } + } + } + + const save = () => { + let text: string|undefined|null = createBtnRef.current?.textContent; + + if( createBtnRef.current!==null ){ + createBtnRef.current.textContent = LABEL; + createBtnRef.current.blur(); + } + if( text!==undefined && text!==null && text!=="" && text.toLowerCase()!==LABEL.toLowerCase()) { + // setBookShelf( prev => [...prev, text?.toLowerCase() as string] ) + dispatch(addBook(text.toLowerCase() as string)); + setIsHidden(true) + } } return ( @@ -12,9 +59,14 @@ export default function Navbar(){ diff --git a/src/index.css b/src/index.css index c470f75..8dd571c 100644 --- a/src/index.css +++ b/src/index.css @@ -15,6 +15,6 @@ @layer components{ .nav_active{ - @apply bg-mixed text-hard rounded-sm; + @apply bg-mixed text-hard rounded-sm mb-1; } } \ No newline at end of file diff --git a/src/type.d.ts b/src/type.d.ts new file mode 100644 index 0000000..d9df625 --- /dev/null +++ b/src/type.d.ts @@ -0,0 +1 @@ +type BookShelf = string[]; \ No newline at end of file