Not found modal (#5229)

open-chat-labs · Jan 22, 2024 · 58146fc · 58146fc
1 parent b511a9d
commit 58146fc
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 47 deletions.
diff --git a/frontend/app/src/components/NotFound.svelte b/frontend/app/src/components/NotFound.svelte
@@ -1,29 +1,35 @@
 <script lang="ts">
-    import Link from "./Link.svelte";
-    import ModalPage from "./ModalPage.svelte";
-    import page from "page";
-    import { getContext } from "svelte";
-    import type { OpenChat } from "openchat-client";
-    import { routeForScope } from "../routes";
+    import { createEventDispatcher } from "svelte";
     import Translatable from "./Translatable.svelte";
     import { i18nKey } from "../i18n/i18n";
+    import ModalContent from "./ModalContent.svelte";
+    import Button from "./Button.svelte";
+    import { mobileWidth } from "../stores/screenDimensions";
+    import ButtonGroup from "./ButtonGroup.svelte";
 
-    const client = getContext<OpenChat>("client");
-    $: chatListScope = client.chatListScope;
+    const dispatch = createEventDispatcher();
 </script>
 
-<ModalPage bgClass="none" minHeight="200px">
-    <div class="not-found" />
-    <div class="content">
-        <div>
-            <h1 class="msg">404</h1>
-            <Link underline={"always"} on:click={() => page(routeForScope($chatListScope))}
-                ><Translatable resourceKey={i18nKey("home")} /></Link>
-        </div>
+<ModalContent on:close>
+    <div class="body" slot="body">
+        <div class="not-found" />
+        <h1 class="msg">404</h1>
     </div>
-</ModalPage>
+    <div slot="footer">
+        <ButtonGroup align={$mobileWidth ? "fill" : "center"}>
+            <Button on:click={() => dispatch("close")}>
+                <Translatable resourceKey={i18nKey("goHome")} />
+            </Button>
+        </ButtonGroup>
+    </div>
+</ModalContent>
 
 <style lang="scss">
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
     .msg {
         @include font(bold, normal, fs-260);
         text-shadow: 3px 3px #000;
@@ -32,12 +38,12 @@
 
     .not-found {
         background-image: url("/assets/not_found.svg");
-        width: 400px;
-        height: 420px;
+        width: 250px;
+        height: 260px;
 
         @include mobile() {
-            width: 200px;
-            height: 210px;
+            width: 150px;
+            height: 160px;
         }
     }
 </style>
diff --git a/frontend/app/src/components/home/Home.svelte b/frontend/app/src/components/home/Home.svelte
@@ -92,6 +92,7 @@
     import RightPanel from "./RightPanelWrapper.svelte";
     import EditLabel from "../EditLabel.svelte";
     import { i18nKey, type ResourceKey } from "../../i18n/i18n";
+    import NotFound from "../NotFound.svelte";
 
     type ViewProfileConfig = {
         userId: string;
@@ -154,6 +155,7 @@
         MakeProposal,
         Registering,
         LoggingIn,
+        NotFound,
     }
 
     let modal = ModalType.None;
@@ -322,7 +324,7 @@
                         page.replace(routeForChatIdentifier($chatListScope.kind, preview.location));
                     }
                 } else if (preview.kind === "failure") {
-                    page.replace(routeForScope(client.getDefaultScope()));
+                    modal = ModalType.NotFound;
                     return;
                 }
             }
@@ -989,6 +991,7 @@
 
     async function createDirectChat(chatId: DirectChatIdentifier): Promise<boolean> {
         if (!(await client.createDirectChat(chatId))) {
+            modal = ModalType.NotFound;
             return false;
         }
 
@@ -1149,6 +1152,7 @@
     <Overlay
         dismissible={modal !== ModalType.SelectChat &&
             modal !== ModalType.Wallet &&
+            modal !== ModalType.NotFound &&
             modal !== ModalType.MakeProposal}
         alignLeft={modal === ModalType.SelectChat}
         on:close={closeModal}>
@@ -1158,6 +1162,8 @@
             <SuspendedModal on:close={closeModal} />
         {:else if modal === ModalType.NoAccess}
             <NoAccess on:close={closeNoAccess} />
+        {:else if modal === ModalType.NotFound}
+            <NotFound on:close={closeNoAccess} />
         {:else if modal === ModalType.GateCheckFailed && joining !== undefined}
             <GateCheckFailed on:close={closeModal} gate={joining.gate} />
         {:else if modal === ModalType.VerifyCredential && credentialCheck !== undefined}

diff --git a/frontend/openchat-client/src/openchat.ts b/frontend/openchat-client/src/openchat.ts
@@ -362,6 +362,8 @@ import type {
     DiamondMembershipStatus,
     TranslationCorrections,
     TranslationCorrection,
+    Success,
+    Failure,
 } from "openchat-shared";
 import {
     AuthProvider,
@@ -947,28 +949,32 @@ export class OpenChat extends OpenChatAgentWorker {
             });
     }
 
-    previewChat(
-        chatId: MultiUserChatIdentifier,
-    ): Promise<{ kind: "success" } | { kind: "failure" } | GroupMoved> {
+    previewChat(chatId: MultiUserChatIdentifier): Promise<Success | Failure | GroupMoved> {
         switch (chatId.kind) {
             case "group_chat":
-                return this.sendRequest({ kind: "getPublicGroupSummary", chatId }).then((resp) => {
-                    if (resp.kind === "success" && !resp.group.frozen) {
-                        addGroupPreview(resp.group);
-                        return { kind: "success" };
-                    } else if (resp.kind === "group_moved") {
-                        return resp;
-                    }
-                    return { kind: "failure" };
-                });
+                return this.sendRequest({ kind: "getPublicGroupSummary", chatId })
+                    .then((resp) => {
+                        if (resp.kind === "success" && !resp.group.frozen) {
+                            addGroupPreview(resp.group);
+                            return CommonResponses.success();
+                        } else if (resp.kind === "group_moved") {
+                            return resp;
+                        }
+                        return CommonResponses.failure();
+                    })
+                    .catch(() => {
+                        return CommonResponses.failure();
+                    });
             case "channel":
-                return this.sendRequest({ kind: "getChannelSummary", chatId }).then((resp) => {
-                    if (resp.kind === "channel") {
-                        addGroupPreview(resp);
-                        return { kind: "success" };
-                    }
-                    return { kind: "failure" };
-                });
+                return this.sendRequest({ kind: "getChannelSummary", chatId })
+                    .then((resp) => {
+                        if (resp.kind === "channel") {
+                            addGroupPreview(resp);
+                            return CommonResponses.success();
+                        }
+                        return CommonResponses.failure();
+                    })
+                    .catch(() => CommonResponses.failure());
         }
     }
 
@@ -4417,12 +4423,14 @@ export class OpenChat extends OpenChatAgentWorker {
     }
 
     getUser(userId: string, allowStale = false): Promise<UserSummary | undefined> {
-        return this.sendRequest({ kind: "getUser", userId, allowStale }).then((resp) => {
-            if (resp !== undefined) {
-                userStore.add(resp);
-            }
-            return resp;
-        });
+        return this.sendRequest({ kind: "getUser", userId, allowStale })
+            .then((resp) => {
+                if (resp !== undefined) {
+                    userStore.add(resp);
+                }
+                return resp;
+            })
+            .catch(() => undefined);
     }
 
     getUserStatus(userId: string, now: number): Promise<UserStatus> {