From f658323814ca41669bf77691b55665418be7dd41 Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 1 Aug 2024 13:39:51 +0200 Subject: [PATCH 1/7] Fix multi wallet local storage usage --- .../ContentCardWithConsume.tsx | 11 +++- .../content.$protectedDataAddress.tsx | 1 + .../src/utils/localStorageContentMap.ts | 65 ++++++++++++++++--- 3 files changed, 66 insertions(+), 11 deletions(-) diff --git a/packages/demo/usecase-demo/src/modules/oneProtectedData/ContentCardWithConsume.tsx b/packages/demo/usecase-demo/src/modules/oneProtectedData/ContentCardWithConsume.tsx index 38e7c26e0..51955fe73 100644 --- a/packages/demo/usecase-demo/src/modules/oneProtectedData/ContentCardWithConsume.tsx +++ b/packages/demo/usecase-demo/src/modules/oneProtectedData/ContentCardWithConsume.tsx @@ -6,6 +6,7 @@ import { useMutation } from '@tanstack/react-query'; import { clsx } from 'clsx'; import { useEffect, useState } from 'react'; import { AlertOctagon, CheckCircle, DownloadCloud, Lock } from 'react-feather'; +import { Address } from 'wagmi'; import { Alert } from '@/components/Alert.tsx'; import { DocLink } from '@/components/DocLink'; import { LoadingSpinner } from '@/components/LoadingSpinner.tsx'; @@ -24,11 +25,13 @@ import { import { cn } from '@/utils/style.utils.ts'; export function ContentCardWithConsume({ + userAddress, protectedDataAddress, protectedDataName, isOwner, hasAccessToContent, }: { + userAddress: Address; protectedDataAddress: string; protectedDataName: string; isOwner: boolean; @@ -70,6 +73,7 @@ export function ContentCardWithConsume({ } const completedTaskId = getCompletedTaskId({ + walletId: userAddress, protectedDataAddress, }); if (completedTaskId) { @@ -104,7 +108,11 @@ export function ContentCardWithConsume({ }, }); - saveCompletedTaskId({ protectedDataAddress, completedTaskId: taskId }); + saveCompletedTaskId({ + walletId: userAddress, + protectedDataAddress, + completedTaskId: taskId, + }); const fileAsBlob = new Blob([result]); const fileAsObjectURL = URL.createObjectURL(fileAsBlob); @@ -154,6 +162,7 @@ export function ContentCardWithConsume({ status.payload?.taskId ) { saveCompletedTaskId({ + walletId: userAddress, protectedDataAddress, completedTaskId: status.payload.taskId, }); diff --git a/packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx b/packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx index 4a79aee68..c8af0dcaa 100644 --- a/packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx +++ b/packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx @@ -107,6 +107,7 @@ export function ProtectedDataPreview() {
+ item.wallet_id === walletId && + item.protected_data_address === protectedDataAddress ); + + if (index > -1) { + data[index] = newData; + } else { + data.push(newData); + } + + localStorage.setItem(key, JSON.stringify(data)); } export function getCompletedTaskId({ + walletId, protectedDataAddress, }: { + walletId: Address; protectedDataAddress: string; }) { - return localStorage.getItem( - `${LOCAL_STORAGE_PREFIX}_${protectedDataAddress}` + const storedDataName = 'savedTaskId'; + const key = `${LOCAL_STORAGE_PREFIX}_${storedDataName}`; + + const storedData = localStorage.getItem(key); + const data: TaskData[] = storedData ? JSON.parse(storedData) : []; + + const entry = data.find( + (item) => + item.wallet_id === walletId && + item.protected_data_address === protectedDataAddress ); + console.log(entry); + + if (!entry || !entry.completed_task_id) { + return null; + } + + return entry.completed_task_id; } export function resetCompletedTaskIdsCache() { - for (const key in localStorage) { - if (key.startsWith(`${LOCAL_STORAGE_PREFIX}_0x`)) { - localStorage.removeItem(key); - } - } + const storedDataName = 'savedTaskId'; + const key = `${LOCAL_STORAGE_PREFIX}_${storedDataName}`; + localStorage.removeItem(key); } From 20537f0cc765eb50ef46e44e3af4eed7324ceaf1 Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Thu, 1 Aug 2024 13:40:04 +0200 Subject: [PATCH 2/7] fix type error --- .../src/routes/_explore/content.$protectedDataAddress.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx b/packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx index c8af0dcaa..0649f19e9 100644 --- a/packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx +++ b/packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx @@ -3,6 +3,7 @@ import { createFileRoute, Link, useRouter } from '@tanstack/react-router'; import { clsx } from 'clsx'; import { EyeOff, Tag } from 'react-feather'; import { ChevronLeft } from 'react-feather'; +import { Address } from 'wagmi'; import { Alert } from '@/components/Alert.tsx'; import { CircularLoader } from '@/components/CircularLoader.tsx'; import { DocLink } from '@/components/DocLink'; @@ -107,7 +108,7 @@ export function ProtectedDataPreview() {
Date: Thu, 1 Aug 2024 13:44:32 +0200 Subject: [PATCH 3/7] Better code readability --- .../src/utils/localStorageContentMap.ts | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts index d732a1e63..4c9f1d025 100644 --- a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts +++ b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts @@ -7,6 +7,8 @@ type TaskData = { completed_task_id: string; }; +const STORED_DATA_KEY = `${LOCAL_STORAGE_PREFIX}_savedTaskId`; + /** * localStorage cache for completed iExec tasks. * ie. Content is available on IPFS *but* the key needs not to have been re-generated in the meantime! @@ -21,13 +23,10 @@ export function saveCompletedTaskId({ protectedDataAddress: string; completedTaskId: string; }) { - const storedDataName = 'savedTaskId'; - const key = `${LOCAL_STORAGE_PREFIX}_${storedDataName}`; - - const storedData = localStorage.getItem(key); + const storedData = localStorage.getItem(STORED_DATA_KEY); const data: TaskData[] = storedData ? JSON.parse(storedData) : []; - const newData = { + const newData: TaskData = { wallet_id: walletId, protected_data_address: protectedDataAddress, completed_task_id: completedTaskId, @@ -45,7 +44,7 @@ export function saveCompletedTaskId({ data.push(newData); } - localStorage.setItem(key, JSON.stringify(data)); + localStorage.setItem(STORED_DATA_KEY, JSON.stringify(data)); } export function getCompletedTaskId({ @@ -54,11 +53,8 @@ export function getCompletedTaskId({ }: { walletId: Address; protectedDataAddress: string; -}) { - const storedDataName = 'savedTaskId'; - const key = `${LOCAL_STORAGE_PREFIX}_${storedDataName}`; - - const storedData = localStorage.getItem(key); +}): string | null { + const storedData = localStorage.getItem(STORED_DATA_KEY); const data: TaskData[] = storedData ? JSON.parse(storedData) : []; const entry = data.find( @@ -66,7 +62,6 @@ export function getCompletedTaskId({ item.wallet_id === walletId && item.protected_data_address === protectedDataAddress ); - console.log(entry); if (!entry || !entry.completed_task_id) { return null; @@ -75,8 +70,9 @@ export function getCompletedTaskId({ return entry.completed_task_id; } +/** + * Réinitialise le cache des IDs de tâches complétées dans le localStorage. + */ export function resetCompletedTaskIdsCache() { - const storedDataName = 'savedTaskId'; - const key = `${LOCAL_STORAGE_PREFIX}_${storedDataName}`; - localStorage.removeItem(key); + localStorage.removeItem(STORED_DATA_KEY); } From d684a07b2f2e4dbaa50b591f258bd37d32600c54 Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Fri, 2 Aug 2024 11:08:06 +0200 Subject: [PATCH 4/7] Better variable name --- .../src/utils/localStorageContentMap.ts | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts index 4c9f1d025..c545917de 100644 --- a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts +++ b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts @@ -23,28 +23,28 @@ export function saveCompletedTaskId({ protectedDataAddress: string; completedTaskId: string; }) { - const storedData = localStorage.getItem(STORED_DATA_KEY); - const data: TaskData[] = storedData ? JSON.parse(storedData) : []; + const storeTasks = localStorage.getItem(STORED_DATA_KEY); + const tasks: TaskData[] = storeTasks ? JSON.parse(storeTasks) : []; - const newData: TaskData = { + const newCompletedTask: TaskData = { wallet_id: walletId, protected_data_address: protectedDataAddress, completed_task_id: completedTaskId, }; - const index = data.findIndex( - (item) => - item.wallet_id === walletId && - item.protected_data_address === protectedDataAddress + const existingTaskIndex = tasks.findIndex( + (task) => + task.wallet_id === walletId && + task.protected_data_address === protectedDataAddress ); - if (index > -1) { - data[index] = newData; + if (existingTaskIndex > -1) { + tasks[existingTaskIndex] = newCompletedTask; } else { - data.push(newData); + tasks.push(newCompletedTask); } - localStorage.setItem(STORED_DATA_KEY, JSON.stringify(data)); + localStorage.setItem(STORED_DATA_KEY, JSON.stringify(tasks)); } export function getCompletedTaskId({ @@ -54,20 +54,20 @@ export function getCompletedTaskId({ walletId: Address; protectedDataAddress: string; }): string | null { - const storedData = localStorage.getItem(STORED_DATA_KEY); - const data: TaskData[] = storedData ? JSON.parse(storedData) : []; + const storeTasks = localStorage.getItem(STORED_DATA_KEY); + const tasks: TaskData[] = storeTasks ? JSON.parse(storeTasks) : []; - const entry = data.find( - (item) => - item.wallet_id === walletId && - item.protected_data_address === protectedDataAddress + const existingTask = tasks.find( + (task) => + task.wallet_id === walletId && + task.protected_data_address === protectedDataAddress ); - if (!entry || !entry.completed_task_id) { + if (!existingTask || !existingTask.completed_task_id) { return null; } - return entry.completed_task_id; + return existingTask.completed_task_id; } /** From 10dfc9f1dde1214d548b85aa05e597a9a233186b Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Fri, 2 Aug 2024 11:14:25 +0200 Subject: [PATCH 5/7] function infos in english --- packages/demo/usecase-demo/src/utils/localStorageContentMap.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts index c545917de..aa8efdc4c 100644 --- a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts +++ b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts @@ -71,7 +71,7 @@ export function getCompletedTaskId({ } /** - * Réinitialise le cache des IDs de tâches complétées dans le localStorage. + * Reset the cache of completed task IDs in localStorage. */ export function resetCompletedTaskIdsCache() { localStorage.removeItem(STORED_DATA_KEY); From 1fc1d6d5a35bb85afaa3cb6a4caa50ce7f2f483e Mon Sep 17 00:00:00 2001 From: ErwanDecoster Date: Fri, 2 Aug 2024 11:27:50 +0200 Subject: [PATCH 6/7] add try catch and extract getItem logic --- .../src/utils/localStorageContentMap.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts index aa8efdc4c..b4e38b890 100644 --- a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts +++ b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts @@ -14,6 +14,17 @@ const STORED_DATA_KEY = `${LOCAL_STORAGE_PREFIX}_savedTaskId`; * ie. Content is available on IPFS *but* the key needs not to have been re-generated in the meantime! */ +function getCompletedTasksCache(): TaskData[] { + const storeTasks = localStorage.getItem(STORED_DATA_KEY); + try { + return storeTasks ? JSON.parse(storeTasks) : []; + } catch (err) { + console.error('[getCompletedTasksCache] ERROR', err); + localStorage.removeItem(STORED_DATA_KEY); + return []; + } +} + export function saveCompletedTaskId({ walletId, protectedDataAddress, @@ -23,8 +34,7 @@ export function saveCompletedTaskId({ protectedDataAddress: string; completedTaskId: string; }) { - const storeTasks = localStorage.getItem(STORED_DATA_KEY); - const tasks: TaskData[] = storeTasks ? JSON.parse(storeTasks) : []; + const tasks = getCompletedTasksCache(); const newCompletedTask: TaskData = { wallet_id: walletId, @@ -54,8 +64,7 @@ export function getCompletedTaskId({ walletId: Address; protectedDataAddress: string; }): string | null { - const storeTasks = localStorage.getItem(STORED_DATA_KEY); - const tasks: TaskData[] = storeTasks ? JSON.parse(storeTasks) : []; + const tasks = getCompletedTasksCache(); const existingTask = tasks.find( (task) => From c005c2bea22dd2c8406677011044a1d65cce21e8 Mon Sep 17 00:00:00 2001 From: Cedric Nicoloso Date: Mon, 5 Aug 2024 10:37:46 +0200 Subject: [PATCH 7/7] Minor: rename var to 'tasksCache' --- .../demo/usecase-demo/src/utils/localStorageContentMap.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts index b4e38b890..d58bdd1a2 100644 --- a/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts +++ b/packages/demo/usecase-demo/src/utils/localStorageContentMap.ts @@ -15,9 +15,9 @@ const STORED_DATA_KEY = `${LOCAL_STORAGE_PREFIX}_savedTaskId`; */ function getCompletedTasksCache(): TaskData[] { - const storeTasks = localStorage.getItem(STORED_DATA_KEY); + const tasksCache = localStorage.getItem(STORED_DATA_KEY); try { - return storeTasks ? JSON.parse(storeTasks) : []; + return tasksCache ? JSON.parse(tasksCache) : []; } catch (err) { console.error('[getCompletedTasksCache] ERROR', err); localStorage.removeItem(STORED_DATA_KEY);