move store in local storage

components/App.tsx

@@ -3,8 +3,10 @@ import LetterOptions from './LetterOptions'
 import Button from './Button'
 import Preview from './Preview'
 import LatestList from './LatestList'
-import { generatePdf, getLatest, removeLatest } from './apiHelper'
-import { ILatest } from '../interfaces/ILatest'
+import { generatePdf } from './apiHelper'
+import { addDocument, removeDocument, getDocuments } from '../lib/dataStore'
+import { getDocuments as getLatestDocuments } from '../lib/dataStore'
+import { IStoreItem } from '../interfaces/IStoreItem'
 import { IDocProps } from '../interfaces/IDocProps'
 
 export default function App() {
@@ -27,21 +29,13 @@ export default function App() {
     yourRef: '',
     yourRefName: '',
   })
-  const [latest, setLatest] = useState<ILatest[]>([])
+  const [storeData, setStoreData] = useState<IStoreItem[]>([])
   const [pdfUrl, setPdfUrl] = useState<string | null>(null)
   const [pdfIsLoading, setPdfIsLoading] = useState<boolean>(false)
   const [pdfError, setPdfError] = useState<string | null>(null)
 
   useEffect(() => {
-    async function getLatestEffect() {
-      try {
-        const latest = await getLatest()
-        setLatest(latest)
-      } catch (err) {
-        console.error('Unable to get latest:', err)
-      }
-    }
-    getLatestEffect()
+    setStoreData(getDocuments())
   }, [pdfUrl])
 
   const _onChange = (name: string, event: React.ChangeEvent<{ value: string }>) => {
@@ -52,13 +46,13 @@ export default function App() {
     setOptions({ ...options, [name]: value })
   }
 
-  const _onSelectLatest = (selectedOption: ILatest) => {
+  const _onSelectLatest = (selectedOption: IStoreItem) => {
     setOptions({ ...selectedOption })
   }
 
-  const _onRemoveLatest = async (item: ILatest) => {
-    await removeLatest(item)
-    setLatest(latest.filter((curr) => curr.id !== item.id))
+  const _onRemoveLatest = async (item: IStoreItem) => {
+    removeDocument(item.id)
+    setStoreData(getLatestDocuments())
   }
 
   const _onClear = () => {
@@ -70,7 +64,8 @@ export default function App() {
     setPdfError(null)
 
     try {
-      const url = await generatePdf(options)
+      const { url, data } = await generatePdf(options)
+      addDocument(data)
       setPdfIsLoading(false)
       setPdfUrl(url)
     } catch (error) {
@@ -90,7 +85,7 @@ export default function App() {
         </div>
         <Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
       </div>
-      <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
+      <LatestList storeData={storeData} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
     </div>
   )
 }

components/LatestList.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
-import { ILatest } from '../interfaces/ILatest'
+import { IStoreItem } from '../interfaces/IStoreItem'
 
 export default function LatestList({
-  latest,
+  storeData,
   onSelect,
   onRemove,
 }: {
-  latest: ILatest[]
-  onSelect: (l: ILatest) => void
-  onRemove: (l: ILatest) => void
+  storeData: IStoreItem[]
+  onSelect: (l: IStoreItem) => void
+  onRemove: (l: IStoreItem) => void
 }) {
-  if (!latest || !latest.length) {
+  if (!storeData || !storeData.length) {
     return null
   }
-  const latestElements = latest.map((item) => {
+  const latestElements = storeData.map((item) => {
     const created = new Date(item.created)
     const subject = item.subject
     const hrefId = `#item-${item.id}`

components/apiHelper.tsx

@@ -1,5 +1,5 @@
 import { IDocProps } from '../interfaces/IDocProps'
-import { ILatest } from '../interfaces/ILatest'
+import { IStoreItem } from '../interfaces/IStoreItem'
 
 function checkStatus(res: Response) {
   if (res.status < 200 || res.status >= 400) {
@@ -7,7 +7,7 @@ function checkStatus(res: Response) {
   }
 }
 
-export async function generatePdf(state: IDocProps): Promise<string> {
+export async function generatePdf(state: IDocProps): Promise<{ url: string; data: IStoreItem }> {
   const options = {
     method: 'POST',
     headers: {
@@ -18,18 +18,9 @@ export async function generatePdf(state: IDocProps): Promise<string> {
 
   const response = await fetch('/api/document?template=brief', options)
   checkStatus(response)
-  const { id } = await response.json()
-  return `/api/document/${id}`
-}
-
-export async function getLatest(): Promise<ILatest[]> {
-  const response = await fetch('/api/document/latest')
-  checkStatus(response)
-  return response.json()
-}
-
-export async function removeLatest(item: { id: string }) {
-  const response = await fetch(`/api/document/${item.id}`, { method: 'DELETE' })
-  checkStatus(response)
-  return response
+  const { id, data } = await response.json()
+  return {
+    url: `/api/document/${id}`,
+    data,
+  }
 }