削除時のstate更新もまとめる

cloudnativedaysjp · May 12, 2024 · d4e9cc7 · d4e9cc7
1 parent 7102f38
commit d4e9cc7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/src/components/CheckIn/CheckIn.tsx b/src/components/CheckIn/CheckIn.tsx
@@ -26,16 +26,7 @@ export const CheckIn: React.FC<Props> = ({ checkInType }) => {
   useEffect(() => {
     const interval = setInterval(() => {
       console.log('Send check-in logs to dreamkast api:')
-      console.log(storedKeys)
-
-      for (const key of storedKeys) {
-        console.log(
-          `Success to send check-in log: key:L ${key}, value: ${JSON.stringify(
-            localStorage.getItem(key),
-          )}`,
-        )
-        deleteItem(key)
-      }
+      deleteItems(storedKeys)
     }, 10000)
     return () => clearInterval(interval)
   }, [storedKeys])
@@ -62,9 +53,17 @@ export const CheckIn: React.FC<Props> = ({ checkInType }) => {
     setOpen(false)
   }
 
-  const deleteItem = (key: string) => {
-    localStorage.removeItem(key)
-    setStoredKeys(storedKeys.filter((k) => k !== key))
+  const deleteItems = (keys: string[]) => {
+    console.log(keys)
+    for (const key of keys) {
+      console.log(
+        `Success to send check-in log: key:L ${key}, value: ${JSON.stringify(
+          localStorage.getItem(key),
+        )}`,
+      )
+      localStorage.removeItem(key)
+    }
+    setStoredKeys(storedKeys.filter((k) => !keys.includes(k)))
   }
 
   return (
@@ -74,7 +73,7 @@ export const CheckIn: React.FC<Props> = ({ checkInType }) => {
       <DummyCheckInButton onClick={checkInConference} />
       <ConfirmDialog open={open} handleClose={handleClose} />
       <Typography variant="h5">↓Debug↓</Typography>
-      <Debug storedKeys={storedKeys} deleteItem={deleteItem} />
+      <Debug storedKeys={storedKeys} deleteItems={deleteItems} />
     </div>
   )
 }
diff --git a/src/components/CheckIn/internal/Debug/Debug.tsx b/src/components/CheckIn/internal/Debug/Debug.tsx
@@ -11,10 +11,10 @@ import React from 'react'
 
 type Props = {
   storedKeys: string[]
-  deleteItem: (key: string) => void
+  deleteItems: (keys: string[]) => void
 }
 
-export const Debug: React.FC<Props> = ({ storedKeys, deleteItem }) => {
+export const Debug: React.FC<Props> = ({ storedKeys, deleteItems }) => {
   return (
     <TableContainer>
       <Table>
@@ -37,7 +37,7 @@ export const Debug: React.FC<Props> = ({ storedKeys, deleteItem }) => {
                   <TableCell>
                     <Button
                       type="submit"
-                      onClick={() => deleteItem(key)}
+                      onClick={() => deleteItems([key])}
                       variant="contained"
                     >
                       Delete