refactor amnet-web to use shared lib

This commit is contained in:
ppc
2024-08-22 09:02:27 +01:00
parent 733fa96b19
commit 73bbb23808
8 changed files with 97 additions and 75 deletions
+53 -4
View File
@@ -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",
+1
View File
@@ -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",
@@ -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 }) {
<FormDescription>
If you&apos;ve got a card, enter the matrix code here. If not, you can
<span className="font-bold hover:cursor-pointer ml-1"
onClick={() => form.setValue("id", generateAimeCardId())}>
onClick={() => form.setValue("id", generateCardNumber())}>
generate a new one.
</span>
</FormDescription>
-32
View File
@@ -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)
});
}
+4 -6
View File
@@ -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<AimeServer, 'id'>;
cards: EntityTable<AimeCard, 'id'>;
};
db.version(1).stores({
servers: '++id, address',
servers: '++id, serverAddress',
cards: 'id'
});
+22 -14
View File
@@ -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() {
<AlertTitle>Connection Issue</AlertTitle>
<AlertDescription>
There was an issue connecting to <code
className="max-w-full text-wrap">{server.address}</code>.
className="max-w-full text-wrap">{server.serverAddress}</code>.
Please check the game is running and <span className="underline cursor-pointer"
onClick={() => setServerReloadCounter(serverReloadCounter + 1)}>try again</span>.
</AlertDescription>
+3 -4
View File
@@ -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";
+7 -7
View File
@@ -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 }) {
)}
<AMCardDetail>
<Earth className="h-5 w-5"/>
<code className="text-ellipsis whitespace-nowrap overflow-hidden">{s.address}</code>
<code className="text-ellipsis whitespace-nowrap overflow-hidden">{s.serverAddress}</code>
</AMCardDetail>
</AMCard>
</ContextMenuTrigger>
@@ -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<typeof serverAdditionSchema>) {
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
});