rlz-engine 1.0.19 → 1.0.20

package/dist/client/screens/SignupSigninScreen.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import { JSX } from 'react';
 interface SignupSigninScreenProps {
     appName: string;
 }
-export declare const SignupSigninScreen: React.FunctionComponent<SignupSigninScreenProps>;
+export declare function SignupSigninScreen({ appName }: SignupSigninScreenProps): JSX.Element;
 export {};

package/dist/client/screens/SignupSigninScreen.js

@@ -1,13 +1,11 @@
 import { Box, Button, CircularProgress, Stack, Tab, Tabs, TextField, Typography } from '@mui/material';
-import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useCallback, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 import { apiSignin, apiSignup } from '../api/auth';
 import { useAuthState } from '../state/auth';
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const SignupSigninScreen = observer(function SignupSigninScreen({ appName }) {
+export function SignupSigninScreen({ appName }) {
     const location = useLocation();
     const navigate = useNavigate();
     const tab = location.pathname.substring(1);
@@ -22,9 +20,8 @@ export const SignupSigninScreen = observer(function SignupSigninScreen({ appName
             && React.createElement(SignupForm, null),
         tab === 'signin'
             && React.createElement(SigninForm, null)));
-});
+}
 function SignupForm() {
-    const authState = useAuthState();
     const navigate = useNavigate();
     const [syncInProgress, setSyncInProgress] = useState(false);
     const [name, setName] = useState('');
@@ -39,7 +36,7 @@ function SignupForm() {
         setSyncInProgress(true);
         setTimeout(async () => {
             try {
-                await signup(name, email, password, password2, authState);
+                await signup(name, email, password, password2);
                 void navigate('/');
             }
             finally {
@@ -73,7 +70,8 @@ function SignupForm() {
                     marginLeft: '-12px'
                 } })))));
 }
-async function signup(name, email, password, password2, authState) {
+async function signup(name, email, password, password2) {
+    const login = useAuthState(i => i.login);
     if (name === ''
         || !isValidEmail(email)
         || password === ''
@@ -81,10 +79,9 @@ async function signup(name, email, password, password2, authState) {
         return;
     }
     const resp = await apiSignup(name, email, password);
-    authState.login(resp.id, resp.name, resp.email, resp.tempPassword);
+    login(resp.id, resp.name, resp.email, resp.tempPassword);
 }
 function SigninForm() {
-    const authState = useAuthState();
     const [syncInProgress, setSyncInProgress] = useState(false);
     const navigate = useNavigate();
     const [name, setName] = useState('');
@@ -93,7 +90,7 @@ function SigninForm() {
         setSyncInProgress(true);
         setTimeout(async () => {
             try {
-                await signin(name, password, authState);
+                await signin(name, password);
                 void navigate('/');
             }
             finally {
@@ -120,9 +117,10 @@ function SigninForm() {
                     marginLeft: '-12px'
                 } })))));
 }
-async function signin(name, password, authState) {
+async function signin(name, password) {
+    const login = useAuthState(i => i.login);
     const resp = await apiSignin(name, password);
-    authState.login(resp.id, resp.name, resp.email, resp.tempPassword);
+    login(resp.id, resp.name, resp.email, resp.tempPassword);
 }
 function isValidEmail(s) {
     return z.string().email().safeParse(s).success;

package/dist/client/state/auth.d.ts

@@ -1,13 +1,22 @@
 import { AuthParam } from '../api/api';
-export declare class AuthState {
+interface AuthState {
     id: string | null;
     name: string | null;
     email: string | null;
     tempPassword: string | null;
-    constructor();
-    logout(): void;
-    login(id: string, name: string, email: string, tempPassword: string): void;
-    get authParam(): AuthParam | null;
+    login: (id: string, name: string, email: string, tempPassword: string) => void;
+    logout: () => void;
 }
-export declare const AuthStateContext: import("react").Context<AuthState | null>;
-export declare function useAuthState(): AuthState;
+export declare const useAuthState: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<AuthState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<AuthState, AuthState>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: AuthState) => void) => () => void;
+        onFinishHydration: (fn: (state: AuthState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<AuthState, AuthState>>;
+    };
+}>;
+export declare function useAuthParam(): AuthParam | null;
+export {};

package/dist/client/state/auth.js

@@ -1,77 +1,30 @@
-import { autorun, makeAutoObservable } from 'mobx';
-import { createContext, useContext } from 'react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 const AUTH_ID_KEY = 'AUTH_ID';
 const AUTH_NAME_KEY = 'AUTH_NAME';
 const AUTH_EMAIL_KEY = 'AUTH_EMAIL';
 const AUTH_TEMP_PASSWORD_KEY = 'AUTH_TEMP_PASSWORD';
-export class AuthState {
-    id = localStorage.getItem(AUTH_ID_KEY);
-    name = localStorage.getItem(AUTH_NAME_KEY);
-    email = localStorage.getItem(AUTH_EMAIL_KEY);
-    tempPassword = localStorage.getItem(AUTH_TEMP_PASSWORD_KEY);
-    constructor() {
-        makeAutoObservable(this);
-        autorun(() => {
-            if (this.id !== null) {
-                localStorage.setItem(AUTH_ID_KEY, this.id);
-            }
-            else {
-                localStorage.removeItem(AUTH_ID_KEY);
-            }
-        });
-        autorun(() => {
-            if (this.name !== null) {
-                localStorage.setItem(AUTH_NAME_KEY, this.name);
-            }
-            else {
-                localStorage.removeItem(AUTH_NAME_KEY);
-            }
-        });
-        autorun(() => {
-            if (this.email !== null) {
-                localStorage.setItem(AUTH_EMAIL_KEY, this.email);
-            }
-            else {
-                localStorage.removeItem(AUTH_EMAIL_KEY);
-            }
-        });
-        autorun(() => {
-            if (this.tempPassword !== null) {
-                localStorage.setItem(AUTH_TEMP_PASSWORD_KEY, this.tempPassword);
-            }
-            else {
-                localStorage.removeItem(AUTH_TEMP_PASSWORD_KEY);
-            }
-        });
-    }
-    logout() {
-        this.id = null;
-        this.name = null;
-        this.email = null;
-        this.tempPassword = null;
-    }
-    login(id, name, email, tempPassword) {
-        this.id = id;
-        this.name = name;
-        this.email = email;
-        this.tempPassword = tempPassword;
-    }
-    get authParam() {
-        if (this.id === null || this.tempPassword === null) {
-            return null;
-        }
-        return {
-            userId: this.id,
-            tempPassword: this.tempPassword
-        };
-    }
-}
+localStorage.removeItem(AUTH_ID_KEY);
+localStorage.removeItem(AUTH_NAME_KEY);
+localStorage.removeItem(AUTH_EMAIL_KEY);
+localStorage.removeItem(AUTH_TEMP_PASSWORD_KEY);
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const AuthStateContext = createContext(null);
-export function useAuthState() {
-    const state = useContext(AuthStateContext);
-    if (state === null) {
-        throw Error('AuthState is not provided');
+export const useAuthState = create()(persist(set => ({
+    id: null,
+    name: null,
+    email: null,
+    tempPassword: null,
+    login: (id, name, email, tempPassword) => set({ id, name, email, tempPassword }),
+    logout: () => set({ id: null, name: null, email: null, tempPassword: null })
+}), { name: 'AUTH' }));
+export function useAuthParam() {
+    const id = useAuthState(i => i.id);
+    const tempPassword = useAuthState(i => i.tempPassword);
+    if (id === null || tempPassword === null) {
+        return null;
     }
-    return state;
+    return {
+        userId: id,
+        tempPassword
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rlz-engine",
-    "version": "1.0.19",
+    "version": "1.0.20",
     "description": "Deps and tools for my style of development",
     "scripts": {
         "build": "tsc",
@@ -55,8 +55,6 @@
         "fastify-plugin": "^5.0.1",
         "iterator-helpers-polyfill": "^3.0.1",
         "luxon": "^3.5.0",
-        "mobx": "^6.13.5",
-        "mobx-react-lite": "^4.1.0",
         "mongodb": "^6.12.0",
         "pino": "^9.5.0",
         "pino-pretty": "^13.0.0",
@@ -66,6 +64,7 @@
         "react-router-dom": "^7.1.1",
         "uuidv7": "^1.0.2",
         "zod": "^3.23.8",
-        "zod-to-json-schema": "^3.23.5"
+        "zod-to-json-schema": "^3.23.5",
+        "zustand": "^5.0.3"
     }
 }