jazz-react-native 0.8.3

package/src/auth/DemoAuthUI.tsx

@@ -0,0 +1,289 @@
+import React, { useMemo, useState, useEffect } from "react";
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    TextInput,
+    StyleSheet,
+} from "react-native";
+import { AgentSecret } from "cojson";
+import { Account, ID } from "jazz-tools";
+import { RNDemoAuth } from "./DemoAuthMethod.js";
+
+type DemoAuthState = (
+    | {
+          state: "uninitialized";
+      }
+    | {
+          state: "loading";
+      }
+    | {
+          state: "ready";
+          existingUsers: string[];
+          signUp: (username: string) => void;
+          logInAs: (existingUser: string) => void;
+      }
+    | {
+          state: "signedIn";
+          logOut: () => void;
+      }
+) & {
+    errors: string[];
+};
+
+/** @category Auth Providers */
+export function useDemoAuth({
+    seedAccounts,
+}: {
+    seedAccounts?: {
+        [name: string]: { accountID: ID<Account>; accountSecret: AgentSecret };
+    };
+} = {}) {
+    const [state, setState] = useState<DemoAuthState>({
+        state: "loading",
+        errors: [],
+    });
+
+    const [authMethod, setAuthMethod] = useState<RNDemoAuth | null>(null);
+
+    const authMethodPromise = useMemo(() => {
+        return RNDemoAuth.init(
+            {
+                onReady: async ({ signUp, getExistingUsers, logInAs }) => {
+                    const existingUsers = await getExistingUsers();
+                    setState({
+                        state: "ready",
+                        signUp,
+                        existingUsers,
+                        logInAs,
+                        errors: [],
+                    });
+                },
+                onSignedIn: ({ logOut }) => {
+                    setState({ state: "signedIn", logOut, errors: [] });
+                },
+                onError: (error) => {
+                    setState((current) => ({
+                        ...current,
+                        errors: [...current.errors, error.toString()],
+                    }));
+                },
+            },
+            seedAccounts,
+        );
+    }, [seedAccounts]);
+
+    useEffect(() => {
+        async function init() {
+            const auth = await authMethodPromise;
+            setAuthMethod(auth);
+        }
+        if (authMethod) return;
+        void init();
+    }, [seedAccounts]);
+
+    return [authMethod, state] as const;
+}
+
+export const DemoAuthBasicUI = ({
+    appName,
+    state,
+}: {
+    appName: string;
+    state: DemoAuthState;
+}) => {
+    const darkMode = false;
+    const [username, setUsername] = useState<string>("");
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    const handleSignUp = () => {
+        if (state.state !== "ready") return;
+        if (username.trim() === "") {
+            setErrorMessage("Display name is required");
+        } else {
+            setErrorMessage(null);
+            state.signUp(username);
+        }
+    };
+
+    return (
+        <View
+            style={[
+                styles.container,
+                darkMode ? styles.darkBackground : styles.lightBackground,
+            ]}
+        >
+            {state.state === "loading" ? (
+                <Text style={styles.loadingText}>Loading...</Text>
+            ) : state.state === "ready" ? (
+                <View style={styles.formContainer}>
+                    <Text
+                        style={[
+                            styles.headerText,
+                            darkMode ? styles.darkText : styles.lightText,
+                        ]}
+                    >
+                        {appName}
+                    </Text>
+
+                    {state.errors.map((error) => (
+                        <Text key={error} style={styles.errorText}>
+                            {error}
+                        </Text>
+                    ))}
+
+                    {errorMessage && (
+                        <Text style={styles.errorText}>{errorMessage}</Text>
+                    )}
+
+                    <TextInput
+                        placeholder="Display name"
+                        value={username}
+                        onChangeText={setUsername}
+                        placeholderTextColor={darkMode ? "#fff" : "#000"}
+                        style={[
+                            styles.textInput,
+                            darkMode ? styles.darkInput : styles.lightInput,
+                        ]}
+                    />
+
+                    <TouchableOpacity
+                        onPress={handleSignUp}
+                        style={[
+                            styles.button,
+                            darkMode ? styles.darkButton : styles.lightButton,
+                        ]}
+                    >
+                        <Text
+                            style={
+                                darkMode
+                                    ? styles.darkButtonText
+                                    : styles.lightButtonText
+                            }
+                        >
+                            Sign Up as new account
+                        </Text>
+                    </TouchableOpacity>
+
+                    <View style={styles.existingUsersContainer}>
+                        {state.existingUsers.map((user) => (
+                            <TouchableOpacity
+                                key={user}
+                                onPress={() => state.logInAs(user)}
+                                style={[
+                                    styles.existingUserButton,
+                                    darkMode
+                                        ? styles.darkUserButton
+                                        : styles.lightUserButton,
+                                ]}
+                            >
+                                <Text
+                                    style={
+                                        darkMode
+                                            ? styles.darkText
+                                            : styles.lightText
+                                    }
+                                >
+                                    Log In as "{user}"
+                                </Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+                </View>
+            ) : null}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 20,
+    },
+    formContainer: {
+        width: "80%",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    headerText: {
+        fontSize: 24,
+        marginBottom: 20,
+    },
+    errorText: {
+        color: "red",
+        marginVertical: 5,
+        textAlign: "center",
+    },
+    textInput: {
+        borderWidth: 1,
+        padding: 10,
+        marginVertical: 10,
+        width: "100%",
+        borderRadius: 6,
+    },
+    darkInput: {
+        borderColor: "#444",
+        backgroundColor: "#000",
+        color: "#fff",
+    },
+    lightInput: {
+        borderColor: "#ddd",
+        backgroundColor: "#fff",
+        color: "#000",
+    },
+    button: {
+        paddingVertical: 15,
+        paddingHorizontal: 10,
+        borderRadius: 6,
+        width: "100%",
+        marginVertical: 10,
+    },
+    darkButton: {
+        backgroundColor: "#444",
+    },
+    lightButton: {
+        backgroundColor: "#ddd",
+    },
+    darkButtonText: {
+        color: "#fff",
+        textAlign: "center",
+    },
+    lightButtonText: {
+        color: "#000",
+        textAlign: "center",
+    },
+    existingUsersContainer: {
+        width: "100%",
+        marginTop: 20,
+    },
+    existingUserButton: {
+        paddingVertical: 15,
+        paddingHorizontal: 10,
+        borderRadius: 6,
+        marginVertical: 5,
+    },
+    darkUserButton: {
+        backgroundColor: "#222",
+    },
+    lightUserButton: {
+        backgroundColor: "#eee",
+    },
+    loadingText: {
+        fontSize: 18,
+        color: "#888",
+    },
+    darkText: {
+        color: "#fff",
+    },
+    lightText: {
+        color: "#000",
+    },
+    darkBackground: {
+        backgroundColor: "#000",
+    },
+    lightBackground: {
+        backgroundColor: "#fff",
+    },
+});

package/src/auth/auth.ts

@@ -0,0 +1 @@
+export * from "./DemoAuthUI.js";

package/src/index.ts

@@ -0,0 +1,275 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+    CoValue,
+    ID,
+    AgentID,
+    SessionID,
+    cojsonInternals,
+    InviteSecret,
+    Account,
+    CoValueClass,
+    CryptoProvider,
+    AuthMethod,
+    createJazzContext,
+    AnonymousJazzAgent,
+} from "jazz-tools";
+
+import { PureJSCrypto } from "jazz-tools/native";
+import { RawAccountID } from "cojson";
+import { createWebSocketPeer } from "cojson-transport-ws";
+import { MMKV } from "react-native-mmkv";
+import NetInfo from "@react-native-community/netinfo";
+import * as Linking from "expo-linking";
+
+export { RNDemoAuth } from "./auth/DemoAuthMethod.js";
+
+import { NativeStorageContext } from "./native-storage.js";
+
+/** @category Context Creation */
+export type BrowserContext<Acc extends Account> = {
+    me: Acc;
+    logOut: () => void;
+    // TODO: Symbol.dispose?
+    done: () => void;
+};
+
+export type BrowserGuestContext = {
+    guest: AnonymousJazzAgent;
+    logOut: () => void;
+    done: () => void;
+};
+
+export type BrowserContextOptions<Acc extends Account> = {
+    auth: AuthMethod;
+    AccountSchema: CoValueClass<Acc> & {
+        fromNode: (typeof Account)["fromNode"];
+    };
+} & BaseBrowserContextOptions;
+
+export type BaseBrowserContextOptions = {
+    peer: `wss://${string}` | `ws://${string}`;
+    reconnectionTimeout?: number;
+    storage?: "indexedDB" | "singleTabOPFS";
+    crypto?: CryptoProvider;
+};
+
+/** @category Context Creation */
+export async function createJazzRNContext<Acc extends Account>(
+    options: BrowserContextOptions<Acc>,
+): Promise<BrowserContext<Acc>>;
+export async function createJazzRNContext(
+    options: BaseBrowserContextOptions,
+): Promise<BrowserGuestContext>;
+export async function createJazzRNContext<Acc extends Account>(
+    options: BrowserContextOptions<Acc> | BaseBrowserContextOptions,
+): Promise<BrowserContext<Acc> | BrowserGuestContext>;
+export async function createJazzRNContext<Acc extends Account>(
+    options: BrowserContextOptions<Acc> | BaseBrowserContextOptions,
+): Promise<BrowserContext<Acc> | BrowserGuestContext> {
+    const firstWsPeer = createWebSocketPeer({
+        websocket: new WebSocket(options.peer),
+        id: options.peer + "@" + new Date().toISOString(),
+        role: "server",
+        expectPings: true,
+    });
+    let shouldTryToReconnect = true;
+
+    let currentReconnectionTimeout = options.reconnectionTimeout || 500;
+
+    const unsubscribeNetworkChange = NetInfo.addEventListener((state) => {
+        if (state.isConnected) {
+            currentReconnectionTimeout = options.reconnectionTimeout || 500;
+        }
+    });
+
+    const context =
+        "auth" in options
+            ? await createJazzContext({
+                  AccountSchema: options.AccountSchema,
+                  auth: options.auth,
+                  crypto: await PureJSCrypto.create(),
+                  peersToLoadFrom: [firstWsPeer],
+                  sessionProvider: provideLockSession,
+              })
+            : await createJazzContext({
+                  crypto: await PureJSCrypto.create(),
+                  peersToLoadFrom: [firstWsPeer],
+              });
+
+    const node =
+        "account" in context
+            ? context.account._raw.core.node
+            : context.agent.node;
+
+    async function websocketReconnectLoop() {
+        while (shouldTryToReconnect) {
+            if (
+                Object.keys(node.syncManager.peers).some((peerId) =>
+                    peerId.includes(options.peer),
+                )
+            ) {
+                // TODO: this might drain battery, use listeners instead
+                await new Promise((resolve) => setTimeout(resolve, 100));
+            } else {
+                console.log(
+                    "Websocket disconnected, trying to reconnect in " +
+                        currentReconnectionTimeout +
+                        "ms",
+                );
+                currentReconnectionTimeout = Math.min(
+                    currentReconnectionTimeout * 2,
+                    30000,
+                );
+                await new Promise<void>((resolve) => {
+                    setTimeout(resolve, currentReconnectionTimeout);
+                    const _unsubscribeNetworkChange = NetInfo.addEventListener(
+                        (state) => {
+                            if (state.isConnected) {
+                                resolve();
+                                _unsubscribeNetworkChange();
+                            }
+                        },
+                    );
+                });
+
+                node.syncManager.addPeer(
+                    createWebSocketPeer({
+                        websocket: new WebSocket(options.peer),
+                        id: options.peer + "@" + new Date().toISOString(),
+                        role: "server",
+                    }),
+                );
+            }
+        }
+    }
+
+    void websocketReconnectLoop();
+
+    return "account" in context
+        ? {
+              me: context.account,
+              done: () => {
+                  shouldTryToReconnect = false;
+                  unsubscribeNetworkChange?.();
+                  context.done();
+              },
+              logOut: () => {
+                  context.logOut();
+              },
+          }
+        : {
+              guest: context.agent,
+              done: () => {
+                  shouldTryToReconnect = false;
+                  unsubscribeNetworkChange?.();
+                  context.done();
+              },
+              logOut: () => {
+                  context.logOut();
+              },
+          };
+}
+
+/** @category Auth Providers */
+export type SessionProvider = (
+    accountID: ID<Account> | AgentID,
+) => Promise<SessionID>;
+
+export async function provideLockSession(
+    accountID: ID<Account> | AgentID,
+    crypto: CryptoProvider,
+) {
+    const sessionDone = () => {};
+
+    const storage = NativeStorageContext.getInstance().getStorage();
+
+    const sessionID =
+        ((await storage.get(accountID)) as SessionID) ||
+        crypto.newRandomSessionID(accountID as RawAccountID | AgentID);
+    await storage.set(accountID, sessionID);
+
+    return Promise.resolve({
+        sessionID,
+        sessionDone,
+    });
+}
+
+const window = {
+    location: {
+        href: "#",
+    },
+    history: {
+        replaceState: (a: any, b: any, c: any) => {},
+    },
+};
+
+/** @category Invite Links */
+export function createInviteLink<C extends CoValue>(
+    value: C,
+    role: "reader" | "writer" | "admin",
+    { baseURL, valueHint }: { baseURL?: string; valueHint?: string } = {},
+): string {
+    const coValueCore = value._raw.core;
+    let currentCoValue = coValueCore;
+
+    while (currentCoValue.header.ruleset.type === "ownedByGroup") {
+        currentCoValue = currentCoValue.getGroup().core;
+    }
+
+    if (currentCoValue.header.ruleset.type !== "group") {
+        throw new Error("Can't create invite link for object without group");
+    }
+
+    const group = cojsonInternals.expectGroup(
+        currentCoValue.getCurrentContent(),
+    );
+    const inviteSecret = group.createInvite(role);
+
+    return `${baseURL}/invite/${valueHint ? valueHint + "/" : ""}${
+        value.id
+    }/${inviteSecret}`;
+}
+
+/** @category Invite Links */
+export function parseInviteLink<C extends CoValue>(
+    inviteURL: string,
+):
+    | {
+          valueID: ID<C>;
+          valueHint?: string;
+          inviteSecret: InviteSecret;
+      }
+    | undefined {
+    const url = Linking.parse(inviteURL);
+    const parts = url.path?.split("/");
+
+    if (!parts || parts[0] !== "invite") {
+        return undefined;
+    }
+
+    let valueHint: string | undefined;
+    let valueID: ID<C> | undefined;
+    let inviteSecret: InviteSecret | undefined;
+
+    if (parts.length === 4) {
+        valueHint = parts[1];
+        valueID = parts[2] as ID<C>;
+        inviteSecret = parts[3] as InviteSecret;
+    } else if (parts.length === 3) {
+        valueID = parts[1] as ID<C>;
+        inviteSecret = parts[2] as InviteSecret;
+    }
+
+    if (!valueID || !inviteSecret) {
+        return undefined;
+    }
+
+    return { valueID, inviteSecret, valueHint };
+}
+
+/////////
+
+export * from "./provider.js";
+export * from "./auth/auth.js";
+export * from "./native-storage.js";

package/src/media.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+import { ImageDefinition } from "jazz-tools";
+
+/** @category Media */
+export function useProgressiveImg({
+    image,
+    maxWidth,
+}: {
+    image: ImageDefinition | null | undefined;
+    maxWidth?: number;
+}) {
+    const [current, setCurrent] = useState<
+        | { src?: string; res?: `${number}x${number}` | "placeholder" }
+        | undefined
+    >(undefined);
+
+    useEffect(() => {
+        let lastHighestRes: string | undefined;
+        if (!image) return;
+        const unsub = image.subscribe({}, (update) => {
+            const highestRes = update?.highestResAvailable({ maxWidth });
+            if (highestRes) {
+                if (highestRes.res !== lastHighestRes) {
+                    lastHighestRes = highestRes.res;
+                    const blob = highestRes.stream.toBlob();
+                    if (blob) {
+                        const blobURI = URL.createObjectURL(blob);
+                        setCurrent({ src: blobURI, res: highestRes.res });
+                        return () => {
+                            setTimeout(() => URL.revokeObjectURL(blobURI), 200);
+                        };
+                    }
+                }
+            } else {
+                setCurrent({
+                    src: update?.placeholderDataURL,
+                    res: "placeholder",
+                });
+            }
+        });
+
+        return unsub;
+    }, [image?.id, maxWidth]);
+
+    return {
+        src: current?.src,
+        res: current?.res,
+        originalSize: image?.originalSize,
+    };
+}
+
+/** @category Media */
+export function ProgressiveImg({
+    children,
+    image,
+    maxWidth,
+}: {
+    children: (result: {
+        src: string | undefined;
+        res: `${number}x${number}` | "placeholder" | undefined;
+        originalSize: readonly [number, number] | undefined;
+    }) => React.ReactNode;
+    image: ImageDefinition | null | undefined;
+    maxWidth?: number;
+}) {
+    const result = useProgressiveImg({ image, maxWidth });
+    return result && children(result);
+}

package/src/native-storage.ts

@@ -0,0 +1,35 @@
+export interface NativeStorage {
+    get(key: string): Promise<string | undefined>;
+    set(key: string, value: string): Promise<void>;
+    delete(key: string): Promise<void>;
+    clearAll(): Promise<void>;
+}
+
+export class NativeStorageContext {
+    private static instance: NativeStorageContext;
+    private storageInstance: NativeStorage | null = null;
+
+    private constructor() {}
+
+    public static getInstance(): NativeStorageContext {
+        if (!NativeStorageContext.instance) {
+            NativeStorageContext.instance = new NativeStorageContext();
+        }
+        return NativeStorageContext.instance;
+    }
+
+    public initialize(db: NativeStorage): void {
+        if (!this.storageInstance) {
+            this.storageInstance = db;
+        }
+    }
+
+    public getStorage(): NativeStorage {
+        if (!this.storageInstance) {
+            throw new Error("Storage instance is not initialized.");
+        }
+        return this.storageInstance;
+    }
+}
+
+export default NativeStorageContext;