From e84176e940d6d7cac01f4b3fb01c4af78b557fcc Mon Sep 17 00:00:00 2001
From: ppc <albie@ppc.moe>
Date: Thu, 22 Aug 2024 08:22:01 +0100
Subject: [PATCH] add share button to page footer

---
 amnet-web/src/pages/card-in-screen.tsx | 84 +++++++++++++++++---------
 1 file changed, 55 insertions(+), 29 deletions(-)

diff --git a/amnet-web/src/pages/card-in-screen.tsx b/amnet-web/src/pages/card-in-screen.tsx
index 7251f83..35875c6 100644
--- a/amnet-web/src/pages/card-in-screen.tsx
+++ b/amnet-web/src/pages/card-in-screen.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useState} from "react";
+import {useEffect, useMemo, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
 import {useLiveQuery} from "dexie-react-hooks";
 import {CircleDot, CircleCheckBig, Home, Nfc, Wallet, WifiOff} from "lucide-react";
@@ -28,6 +28,7 @@ import {LoadingIndicator} from "@/components/loading-indicator";
 import {CardCreationDialog} from "@/components/card-creation-form";
 import {NoCardsNotification} from "@/components/no-cards-notification";
 import {IncognitoStorageWarning} from "@/components/incognito-warning.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
 
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
@@ -87,11 +88,15 @@ function ServerCardInPage() {
     const cards = useLiveQuery(() => db.cards.toArray());
 
     const [server, setServer] = useState<AimeServer | null>(null);
-    const [cardInStatus, setCardInStatus] = useState(false);
-    const [connectionError, setConnectionError] = useState(false);
-    const [selectedCard, setSelectedCard] = useState<AimeCard | null>(null);
     const [serverReloadCounter, setServerReloadCounter] = useState(0);
 
+    const [cardInStatus, setCardInStatus] = useState(false);
+    const [selectedCard, setSelectedCard] = useState<AimeCard | null>(null);
+
+    const [connectionError, setConnectionError] = useState(false);
+
+    const shareUrl = useMemo(() => `${location.origin}/#/servers/add?address=${encodeURIComponent(server?.address ?? "")}`, [server]);
+
     // select newest card
     useEffect(() => setSelectedCard(cards?.sort((a, b) => b.lastUsed - a.lastUsed)[0] ?? null), [cards]);
     useEffect(() => {
@@ -147,7 +152,8 @@ function ServerCardInPage() {
                         <AlertDescription>
                             There was an issue connecting to <code
                             className="max-w-full text-wrap">{server.address}</code>.
-                            Please check the game is running and <span className="underline cursor-pointer" onClick={() => setServerReloadCounter(serverReloadCounter + 1)}>try again</span>.
+                            Please check the game is running and <span className="underline cursor-pointer"
+                                                                       onClick={() => setServerReloadCounter(serverReloadCounter + 1)}>try again</span>.
                         </AlertDescription>
                     </Alert>
                     : <IncognitoStorageWarning/>}
@@ -183,31 +189,51 @@ function ServerCardInPage() {
                     </div>
                 )}
 
-                <AMFooter className="flex flex-col-reverse sm:flex-row sm:flex-wrap justify-center sm:justify-between gap-2">
+                <AMFooter
+                    className="flex flex-col-reverse sm:flex-row sm:flex-wrap justify-center sm:justify-between sm:gap-2 gap-4">
                     {server?.id && (
-                        <AlertDialog>
-                            <AlertDialogTrigger>
-                                <p className="text-sm text-red-700">Delete {server.serverName}</p>
-                            </AlertDialogTrigger>
-                            <AlertDialogContent>
-                                <AlertDialogHeader>
-                                    <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
-                                    <AlertDialogDescription>
-                                        You'll need to re-enter the server information if you want to use it in the
-                                        future...
-                                    </AlertDialogDescription>
-                                </AlertDialogHeader>
-                                <AlertDialogFooter>
-                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                    <AlertDialogAction onClick={async () => {
-                                        await db.servers.delete(server.id);
-                                        navigate('/');
-                                    }}>
-                                        Continue
-                                    </AlertDialogAction>
-                                </AlertDialogFooter>
-                            </AlertDialogContent>
-                        </AlertDialog>
+                        <div className="flex items-center justify-center sm:gap-5 gap-2">
+                            {location.protocol === "https:" ? (
+                                <p className="text-sm text-blue-500" role="button"
+                                   onClick={() => navigator.share({url: shareUrl})}>
+                                    Share
+                                </p>
+                            ) : (
+                                <p className="text-sm text-blue-500" role="button"
+                                   onClick={() => navigator.clipboard.writeText(shareUrl).then(() => {
+                                       toast({
+                                           description: "Server URL has been copied to clipboard.",
+                                           duration: 2500
+                                       })
+                                   })}>
+                                    Copy URL
+                                </p>
+                            )}
+                            <Separator orientation="vertical"/>
+                            <AlertDialog>
+                                <AlertDialogTrigger>
+                                    <p className="text-sm text-red-700">Delete {server.serverName}</p>
+                                </AlertDialogTrigger>
+                                <AlertDialogContent>
+                                    <AlertDialogHeader>
+                                        <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
+                                        <AlertDialogDescription>
+                                            You'll need to re-enter the server information if you want to use it in the
+                                            future...
+                                        </AlertDialogDescription>
+                                    </AlertDialogHeader>
+                                    <AlertDialogFooter>
+                                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                        <AlertDialogAction onClick={async () => {
+                                            await db.servers.delete(server.id);
+                                            navigate('/');
+                                        }}>
+                                            Continue
+                                        </AlertDialogAction>
+                                    </AlertDialogFooter>
+                                </AlertDialogContent>
+                            </AlertDialog>
+                        </div>
                     )}
                 </AMFooter>
             </main>