From 73bbb23808b36dbb0fbd544649f8e0e6dce750ef Mon Sep 17 00:00:00 2001 From: ppc Date: Thu, 22 Aug 2024 09:02:27 +0100 Subject: [PATCH] refactor amnet-web to use shared lib --- amnet-web/package-lock.json | 57 +++++++++++++++++-- amnet-web/package.json | 1 + .../src/components/card-creation-form.tsx | 15 +++-- amnet-web/src/lib/aime-net.ts | 32 ----------- amnet-web/src/lib/database.ts | 10 ++-- amnet-web/src/pages/card-in-screen.tsx | 36 +++++++----- amnet-web/src/pages/card-manager.tsx | 7 +-- amnet-web/src/pages/server-listing.tsx | 14 ++--- 8 files changed, 97 insertions(+), 75 deletions(-) delete mode 100644 amnet-web/src/lib/aime-net.ts diff --git a/amnet-web/package-lock.json b/amnet-web/package-lock.json index 0339a77..d58992e 100644 --- a/amnet-web/package-lock.json +++ b/amnet-web/package-lock.json @@ -1,12 +1,12 @@ { - "name": "aimenet-web", - "version": "0.0.0", + "name": "amnet-web", + "version": "1.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "aimenet-web", - "version": "0.0.0", + "name": "amnet-web", + "version": "1.1.0", "dependencies": { "@hookform/resolvers": "^3.9.0", "@radix-ui/react-alert-dialog": "^1.1.1", @@ -17,6 +17,7 @@ "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-toast": "^1.2.1", "@radix-ui/react-tooltip": "^1.1.2", + "amnet-shared": "file:../amnet-shared", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "detectincognitojs": "^1.3.5", @@ -52,6 +53,50 @@ "vite": "^5.4.0" } }, + "../amnet-native": { + "version": "1.0.0", + "extraneous": true, + "hasInstallScript": true, + "dependencies": { + "@expo-google-fonts/jetbrains-mono": "^0.2.3", + "@react-navigation/bottom-tabs": "^6.6.1", + "@react-navigation/native": "^6.1.18", + "@react-navigation/native-stack": "^6.11.0", + "@realm/react": "^0.9.0", + "@types/react": "~18.2.79", + "date-fns": "^3.6.0", + "expo": "^51.0.0", + "expo-blur": "~13.0.2", + "expo-clipboard": "~6.0.3", + "expo-constants": "~16.0.2", + "expo-dev-client": "~4.0.10", + "expo-linking": "~6.3.1", + "expo-status-bar": "~1.12.1", + "expo-system-ui": "~3.0.7", + "lucide-react-native": "^0.427.0", + "patch-package": "^8.0.0", + "react": "18.2.0", + "react-native": "0.74.1", + "react-native-context-menu-view": "^1.16.0", + "react-native-gesture-handler": "^2.18.1", + "react-native-get-random-values": "^1.11.0", + "react-native-paper": "^5.12.5", + "react-native-reanimated": "^3.15.0", + "react-native-safe-area-context": "4.10.5", + "react-native-screens": "3.31.1", + "react-native-svg": "^15.5.0", + "react-native-url-polyfill": "^2.0.0", + "realm": "^12.12.1", + "typescript": "~5.3.3" + } + }, + "../amnet-shared": { + "version": "1.0.0", + "dependencies": { + "tsup": "^8.2.4", + "typescript": "^5.5.4" + } + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -2286,6 +2331,10 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/amnet-shared": { + "resolved": "../amnet-shared", + "link": true + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", diff --git a/amnet-web/package.json b/amnet-web/package.json index f36b937..f7591d3 100644 --- a/amnet-web/package.json +++ b/amnet-web/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-toast": "^1.2.1", "@radix-ui/react-tooltip": "^1.1.2", + "amnet-shared": "file:../amnet-shared", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "detectincognitojs": "^1.3.5", diff --git a/amnet-web/src/components/card-creation-form.tsx b/amnet-web/src/components/card-creation-form.tsx index ac645ee..044cbcc 100644 --- a/amnet-web/src/components/card-creation-form.tsx +++ b/amnet-web/src/components/card-creation-form.tsx @@ -1,13 +1,15 @@ import {z} from "zod"; import React, {useEffect} from "react"; import {Check, Plus, X} from "lucide-react"; +import {useLocation} from "react-router-dom"; +import {useLiveQuery} from "dexie-react-hooks"; import {FormProvider, useForm} from "react-hook-form"; +import {validateCardId, generateCardNumber} from "amnet-shared/src/card"; -import {useMediaQuery} from "@/hooks/use-media-query"; +import {cn} from "@/lib/utils"; import {zodResolver} from "@hookform/resolvers/zod"; - +import {useMediaQuery} from "@/hooks/use-media-query"; import {AimeCard, CARD_LIMIT, db} from "@/lib/database"; -import {generateAimeCardId, validateAimeCardId} from "@/lib/aime-card"; import {Button} from "@/components/ui/button"; import {Input} from "@/components/ui/input"; @@ -36,15 +38,12 @@ import { DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"; -import {useLiveQuery} from "dexie-react-hooks"; -import {cn} from "@/lib/utils.ts"; -import {useLocation} from "react-router-dom"; const schema = z.object({ name: z.string().min(1, { message: "A name/description must be provided" }), - id: z.string().refine(validateAimeCardId, { + id: z.string().refine(validateCardId, { message: "Card id must be 20 digits and not start with the number 3" }) }); @@ -102,7 +101,7 @@ function AimeCardCreationForm(props: { callback?: () => void }) { If you've got a card, enter the matrix code here. If not, you can form.setValue("id", generateAimeCardId())}> + onClick={() => form.setValue("id", generateCardNumber())}> generate a new one. diff --git a/amnet-web/src/lib/aime-net.ts b/amnet-web/src/lib/aime-net.ts deleted file mode 100644 index 9c8f819..0000000 --- a/amnet-web/src/lib/aime-net.ts +++ /dev/null @@ -1,32 +0,0 @@ -export const AMNET_API_VERSION = 1; - -export interface AimeServerInfo { - serverName: string; - apiVersion: number; -} - -export interface AimeCardinRequest { - cardId: string; -} - -export async function getServerInfo(address: string) { - const response = await fetch(address, { - signal: AbortSignal.timeout(10000) - }); - - const json: AimeServerInfo = await response.json(); - return json; -} - -export function serverCardIn(address: string, id: string) { - return fetch(`${address}/card`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - cardId: id - } satisfies AimeCardinRequest), - signal: AbortSignal.timeout(5000) - }); -} \ No newline at end of file diff --git a/amnet-web/src/lib/database.ts b/amnet-web/src/lib/database.ts index 274c5f9..8a5b3a5 100644 --- a/amnet-web/src/lib/database.ts +++ b/amnet-web/src/lib/database.ts @@ -1,12 +1,10 @@ import Dexie, { type EntityTable } from 'dexie'; - -import {AimeServerInfo} from "@/lib/aime-net.ts"; +import {AMServerInfoResponse} from "amnet-shared/dist/amnet-api"; export const CARD_LIMIT = 15; -interface AimeServer extends AimeServerInfo { +interface AimeServer extends AMServerInfoResponse { id: number; - address: string; lastConnected: number; } @@ -16,13 +14,13 @@ interface AimeCard { lastUsed: number; } -const db = new Dexie('aimedb') as Dexie & { +const db = new Dexie('amnet_db') as Dexie & { servers: EntityTable; cards: EntityTable; }; db.version(1).stores({ - servers: '++id, address', + servers: '++id, serverAddress', cards: 'id' }); diff --git a/amnet-web/src/pages/card-in-screen.tsx b/amnet-web/src/pages/card-in-screen.tsx index 35875c6..fd3c8ed 100644 --- a/amnet-web/src/pages/card-in-screen.tsx +++ b/amnet-web/src/pages/card-in-screen.tsx @@ -1,10 +1,10 @@ +import {useLiveQuery} from "dexie-react-hooks"; 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"; import {AimeCard, AimeServer, db} from "@/lib/database"; -import {getServerInfo, serverCardIn} from "@/lib/aime-net"; +import {performCardIn, fetchServerInfo} from "amnet-shared/dist/amnet-api"; import {Button} from "@/components/ui/button"; import {useToast} from "@/components/ui/use-toast"; @@ -21,22 +21,24 @@ import { AlertDialogTrigger } from "@/components/ui/alert-dialog.tsx"; -import {AMHeader} from "@/components/am-header.tsx"; -import {AMFooter} from "@/components/am-footer.tsx"; +import {AMHeader} from "@/components/am-header"; +import {AMFooter} from "@/components/am-footer"; +import {Separator} from "@/components/ui/separator"; import {AimeCardEntry} from "@/components/aime-card"; import {LoadingIndicator} from "@/components/loading-indicator"; import {CardCreationDialog} from "@/components/card-creation-form"; +import {IncognitoStorageWarning} from "@/components/incognito-warning"; 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 */ async function performCardInAction(card: AimeCard, server: AimeServer, setCardInStatus: (status: boolean) => void, toaster: any) { setCardInStatus(true); try { - await serverCardIn(server.address, card.id); + const abort = new AbortController(); + setTimeout(() => abort.abort("timeout"), 10000); + + await performCardIn(server.serverAddress, {cardId: card.id}, abort.signal); await db.cards.update(card.id, {lastUsed: Date.now()}); toaster({ @@ -95,7 +97,7 @@ function ServerCardInPage() { const [connectionError, setConnectionError] = useState(false); - const shareUrl = useMemo(() => `${location.origin}/#/servers/add?address=${encodeURIComponent(server?.address ?? "")}`, [server]); + const shareUrl = useMemo(() => `${location.origin}/#/servers/add?address=${encodeURIComponent(server?.serverAddress ?? "")}`, [server]); // select newest card useEffect(() => setSelectedCard(cards?.sort((a, b) => b.lastUsed - a.lastUsed)[0] ?? null), [cards]); @@ -119,11 +121,17 @@ function ServerCardInPage() { } try { - const info = await getServerInfo(server.address); - await db.servers.update(server.id, info); + const abort = new AbortController(); + setTimeout(() => abort.abort("timeout"), 10000); - Object.assign(server, info); - setConnectionError(false); + const info = await fetchServerInfo(server.serverAddress, abort.signal); + if (info) { + await db.servers.update(server.id, info); + Object.assign(server, info); + setConnectionError(false); + } else { + setConnectionError(true); + } } catch { setConnectionError(true); } @@ -151,7 +159,7 @@ function ServerCardInPage() { Connection Issue There was an issue connecting to {server.address}. + className="max-w-full text-wrap">{server.serverAddress}. Please check the game is running and setServerReloadCounter(serverReloadCounter + 1)}>try again. diff --git a/amnet-web/src/pages/card-manager.tsx b/amnet-web/src/pages/card-manager.tsx index ba5e35a..13dfe7a 100644 --- a/amnet-web/src/pages/card-manager.tsx +++ b/amnet-web/src/pages/card-manager.tsx @@ -2,8 +2,6 @@ import {Server, Trash} from "lucide-react"; import {useNavigate} from "react-router-dom"; import {useLiveQuery} from "dexie-react-hooks"; -import {AimeCard, db} from "@/lib/database"; - import {Button} from "@/components/ui/button"; import { ContextMenu, @@ -12,8 +10,9 @@ import { ContextMenuTrigger } from "@/components/ui/context-menu"; -import {AMHeader} from "@/components/am-header.tsx"; -import {AMFooter} from "@/components/am-footer.tsx"; +import {AimeCard, db} from "@/lib/database"; +import {AMHeader} from "@/components/am-header"; +import {AMFooter} from "@/components/am-footer"; import {AimeCardEntry} from "@/components/aime-card"; import {LoadingIndicator} from "@/components/loading-indicator"; import {CardCreationDialog} from "@/components/card-creation-form"; diff --git a/amnet-web/src/pages/server-listing.tsx b/amnet-web/src/pages/server-listing.tsx index 41c61ac..fb58137 100644 --- a/amnet-web/src/pages/server-listing.tsx +++ b/amnet-web/src/pages/server-listing.tsx @@ -1,9 +1,9 @@ import {z} from "zod"; import TimeAgo from "react-timeago"; -import React, {useEffect, useState} from "react"; import {useForm} from "react-hook-form"; -import {useLocation, useNavigate} from 'react-router-dom'; import {useLiveQuery} from "dexie-react-hooks"; +import React, {useEffect, useState} from "react"; +import {useLocation, useNavigate} from 'react-router-dom'; import {zodResolver} from "@hookform/resolvers/zod"; import { Earth, @@ -33,8 +33,8 @@ import { import {AMFooter} from "@/components/am-footer"; import {AMHeader} from "@/components/am-header"; -import {AMNET_API_VERSION} from "@/lib/aime-net"; import {AMCard, AMCardDetail} from "@/components/am-card"; +import {AMNET_API_VERSION} from "amnet-shared/dist/amnet-api"; const serverAdditionSchema = z.object({ address: z.string().startsWith("http") @@ -77,7 +77,7 @@ function ServerList(props: { servers: AimeServer[] | undefined }) { )} - {s.address} + {s.serverAddress} @@ -122,7 +122,7 @@ function ServerAddForm() { } address = decodeURIComponent(address); - const server = await db.servers.filter(x => x.address === address).first(); + const server = await db.servers.filter(x => x.serverAddress === address).first(); if (server) { navigate(`/servers/${server.id}`); @@ -137,7 +137,7 @@ function ServerAddForm() { async function onSubmit(values: z.infer) { const existingServer = await db.servers - .where("address") + .where("serverAddress") .equalsIgnoreCase(values.address) .limit(1) .first(); @@ -147,7 +147,7 @@ function ServerAddForm() { const newId = await db.servers.add({ lastConnected: 0, serverName: "Server", - address: values.address, + serverAddress: values.address, apiVersion: AMNET_API_VERSION });