From d5348cceb0519b18d69e42564a655fb69420c1d4 Mon Sep 17 00:00:00 2001
From: Tristan Chin <23557893+maxijonson@users.noreply.github.com>
Date: Sat, 1 Jul 2023 22:25:34 -0400
Subject: [PATCH] [web] Offer to clear localstorage if loading data is too long
 (#30)

---
 .../providers/PersistenceProvider.tsx         | 14 ++-
 packages/web/src/hooks/useStorage.tsx         | 94 +++++++++----------
 packages/web/src/pages/ConversationPage.tsx   | 34 ++++++-
 3 files changed, 89 insertions(+), 53 deletions(-)

diff --git a/packages/web/src/contexts/providers/PersistenceProvider.tsx b/packages/web/src/contexts/providers/PersistenceProvider.tsx
index 9bdc7ff..126ba20 100644
--- a/packages/web/src/contexts/providers/PersistenceProvider.tsx
+++ b/packages/web/src/contexts/providers/PersistenceProvider.tsx
@@ -259,11 +259,17 @@ const PersistenceProvider = ({ children }: PersistenceProviderProps) => {
         };
 
         const load = async () => {
-            await Promise.all([loadConversations(), loadCallableFunctions()]);
-        };
-        load().then(() => {
+            try {
+                await Promise.all([
+                    loadConversations(),
+                    loadCallableFunctions(),
+                ]);
+            } catch (e) {
+                console.error(e);
+            }
             setHasInit(true);
-        });
+        };
+        load();
     }, [
         addCallableFunction,
         addConversation,
diff --git a/packages/web/src/hooks/useStorage.tsx b/packages/web/src/hooks/useStorage.tsx
index 906e427..e72c918 100644
--- a/packages/web/src/hooks/useStorage.tsx
+++ b/packages/web/src/hooks/useStorage.tsx
@@ -78,57 +78,55 @@ const useStorage = <T,>(
                     return value;
                 })()
             ),
-        deserialize: (v) =>
-            (() => {
-                const value = JSON.parse(v);
-                if (!schema) return value;
+        deserialize: (v) => {
+            const value = JSON.parse(v);
+            if (!schema) return value;
 
-                const result = schema.safeParse(value);
-                if (result.success) {
-                    return result.data;
-                }
-                if (warns.has(key)) return value;
+            const result = schema.safeParse(value);
+            if (result.success) {
+                return result.data;
+            }
+            if (warns.has(key)) return value;
 
-                const repaired = repairValueFromZodError(
-                    value,
-                    defaultValue,
-                    result.error
-                );
+            const repaired = repairValueFromZodError(
+                value,
+                defaultValue,
+                result.error
+            );
 
-                try {
-                    return schema.parse(repaired);
-                } catch {
-                    warns.add(key);
-                    console.error(result.error.format());
-                    notifications.show({
-                        title: `Invalid ${key} Local Storage value`,
-                        message: (
-                            <Stack spacing="xs">
-                                <Text size="xs">
-                                    The value for {key} in the browser's local
-                                    storage is invalid or outdated. The app may
-                                    not function properly. It is recommended to
-                                    clear the value. See the console for more
-                                    details.
-                                </Text>
-                                <Button
-                                    variant="subtle"
-                                    color="red"
-                                    onClick={() => {
-                                        removeValue();
-                                        window.location.reload();
-                                    }}
-                                >
-                                    Delete storage and reload
-                                </Button>
-                            </Stack>
-                        ),
-                        color: "orange",
-                        autoClose: false,
-                    });
-                }
-                return value;
-            })(),
+            try {
+                return schema.parse(repaired);
+            } catch {
+                warns.add(key);
+                console.error(result.error.format());
+                notifications.show({
+                    title: `Invalid ${key} Local Storage value`,
+                    message: (
+                        <Stack spacing="xs">
+                            <Text size="xs">
+                                The value for {key} in the browser's local
+                                storage is invalid or outdated. The app may not
+                                function properly. It is recommended to clear
+                                the value. See the console for more details.
+                            </Text>
+                            <Button
+                                variant="subtle"
+                                color="red"
+                                onClick={() => {
+                                    removeValue();
+                                    window.location.reload();
+                                }}
+                            >
+                                Delete storage and reload
+                            </Button>
+                        </Stack>
+                    ),
+                    color: "orange",
+                    autoClose: false,
+                });
+            }
+            return value;
+        },
     });
 
     return {
diff --git a/packages/web/src/pages/ConversationPage.tsx b/packages/web/src/pages/ConversationPage.tsx
index 93160be..a1db64c 100644
--- a/packages/web/src/pages/ConversationPage.tsx
+++ b/packages/web/src/pages/ConversationPage.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, Text } from "@mantine/core";
+import { Button, Divider, Group, Stack, Text } from "@mantine/core";
 import AddConversation from "../components/AddConversation";
 import useConversationManager from "../hooks/useConversationManager";
 import Messages from "../components/Messages";
@@ -6,15 +6,47 @@ import Prompt from "../components/Prompt";
 import usePersistence from "../hooks/usePersistence";
 import ContentLoader from "../components/ContentLoader";
 import ConversationPageShell from "../components/ConversationPageShell";
+import { useTimeout } from "@mantine/hooks";
+import React from "react";
 
 const ConversationPage = () => {
     const { activeConversation } = useConversationManager();
     const { hasInit: hasPersistenceInit } = usePersistence();
+    const [longLoading, setLongLoading] = React.useState(false);
+    const { start, clear } = useTimeout(() => setLongLoading(true), 5000);
+
+    React.useEffect(() => {
+        start();
+        return clear;
+    }, [start, clear]);
 
     if (!hasPersistenceInit) {
         return (
             <ContentLoader size="xl">
                 <Text size="xl">Loading Saved Data</Text>
+                {longLoading && (
+                    <Stack>
+                        <Text size="sm" color="gray">
+                            This is taking a while. Try refreshing the page or
+                            deleting your saved data.
+                        </Text>
+                        <Group position="center">
+                            <Button onClick={() => window.location.reload()}>
+                                Refresh
+                            </Button>
+                            <Button
+                                variant="outline"
+                                color="red"
+                                onClick={() => {
+                                    localStorage.clear();
+                                    window.location.reload();
+                                }}
+                            >
+                                Delete Saved Data
+                            </Button>
+                        </Group>
+                    </Stack>
+                )}
             </ContentLoader>
         );
     }