proje-react-panel 1.1.3 → 1.1.5

package/src/components/form/InnerForm.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { FormProvider, useForm, useFormContext, UseFormReturn } from 'react-hook-form';
+import React, { useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 import { InputConfiguration } from '../../decorators/form/Input';
 import { FormField } from './FormField';
 import { useNavigate } from 'react-router';
 import { FormConfiguration } from '../../decorators/form/Form';
 import { AnyClass } from '../../types/AnyClass';
+import { toast } from 'react-toastify';
 
 interface InnerFormProps<T extends AnyClass> {
   inputs: InputConfiguration[];
@@ -17,6 +18,7 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
   const formRef = useRef<HTMLFormElement>(null);
   const navigate = useNavigate();
   const form = useFormContext<T>();
+  const loadingRef = useRef(false);
 
   return (
     <div className="form-wrapper">
@@ -24,6 +26,8 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
         ref={formRef}
         onSubmit={form.handleSubmit(
           async (dataForm: T) => {
+            if (loadingRef.current) return;
+            loadingRef.current = true;
             try {
               const data =
                 formClass.type === 'json'
@@ -37,17 +41,23 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
                       }
                       return formData;
                     })();
-              await formClass.onSubmit(data);
+              const resut = await formClass.onSubmit(data);
+              form.reset(resut);
               setErrorMessage(null);
-              if (formClass.redirectBackOnSuccess) {
-                navigate(-1);
+              toast.success('Form submitted successfully');
+              if (formClass.redirectSuccessUrl) {
+                navigate(formClass.redirectSuccessUrl);
               }
-            } catch (error: any) {
+            } catch (error: unknown) {
+              const errorResponse = error as { response?: { data?: { message?: string } } };
               const message =
-                error?.response?.data?.message ||
+                errorResponse?.response?.data?.message ||
                 (error instanceof Error ? error.message : 'An error occurred');
+              toast.error('Something went wrong');
               setErrorMessage(message);
               console.error(error);
+            } finally {
+              loadingRef.current = false;
             }
           },
           (errors, event) => {
@@ -69,7 +79,13 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
               register={form.register}
               error={
                 input.name
-                  ? { message: (form.formState.errors[input.name as keyof T] as any)?.message }
+                  ? {
+                      message: (
+                        form.formState.errors[input.name as keyof T] as {
+                          message: string;
+                        }
+                      )?.message,
+                    }
                   : undefined
               }
             />

package/src/components/form/Select.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { InputConfiguration } from '../../decorators/form/Input';
-import { useFormContext, Controller, useWatch } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 import { SelectInputConfiguration } from '../../decorators/form/inputs/SelectInput';
-import ReactSelect, { SingleValue } from 'react-select';
+import ReactSelect from 'react-select';
 import { darkSelectStyles } from './SelectStyles';
 
 interface SelectProps {
@@ -10,16 +10,18 @@ interface SelectProps {
   fieldName: string;
 }
 
-interface OptionType {
+interface OptionType<TValue> {
   label: string;
-  value: string;
+  value: TValue;
 }
 
-export function Select({ input, fieldName }: SelectProps) {
-  const inputSelect = input as SelectInputConfiguration;
+export function Select<TValue>({ input, fieldName }: SelectProps) {
+  const inputSelect = input as SelectInputConfiguration<TValue>;
   const { control } = useFormContext();
-  const [options, setOptions] = useState<OptionType[]>(inputSelect.defaultOptions || []);
+  const [options, setOptions] = useState<OptionType<TValue>[]>(inputSelect.defaultOptions || []);
   const [key, setKey] = useState(0);
+  //NOTE: is added to component to fix type error. Need to find a better solution.
+  const styles = useMemo(() => darkSelectStyles<TValue>(), []);
   useEffect(() => {
     if (inputSelect.onSelectPreloader) {
       inputSelect.onSelectPreloader().then(option => {
@@ -27,7 +29,7 @@ export function Select({ input, fieldName }: SelectProps) {
         setKey(key + 1);
       });
     }
-  }, [input]);
+  }, [inputSelect, inputSelect.onSelectPreloader, key]);
 
   return (
     <Controller
@@ -38,10 +40,10 @@ export function Select({ input, fieldName }: SelectProps) {
           <ReactSelect
             key={key}
             options={options}
-            styles={darkSelectStyles}
+            styles={styles}
             value={options.find(option => option.value === field.value) || null}
-            onChange={(selectedOption: OptionType | null) => {
-              field.onChange(selectedOption?.value);
+            onChange={(selectedOption: OptionType<TValue> | null) => {
+              field.onChange(selectedOption?.value as TValue);
             }}
           />
         );

package/src/components/form/SelectStyles.ts

@@ -1,11 +1,11 @@
 import { StylesConfig } from 'react-select';
 
-interface OptionType {
+interface OptionType<TValue> {
   label: string;
-  value: string;
+  value: TValue;
 }
 
-export const darkSelectStyles: StylesConfig<OptionType, false> = {
+export const darkSelectStyles = <TValue>(): StylesConfig<OptionType<TValue>, false> => ({
   control: (baseStyles, state) => ({
     ...baseStyles,
     backgroundColor: '#1f2937',
@@ -70,4 +70,4 @@ export const darkSelectStyles: StylesConfig<OptionType, false> = {
       color: '#6366f1',
     },
   }),
-};
+});

package/src/components/layout/Layout.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { SideBar } from './SideBar';
 import { useAppStore } from '../../store/store';
-import { useNavigate } from 'react-router';
 
 export function Layout<IconType>({
   children,
@@ -17,18 +16,13 @@ export function Layout<IconType>({
   const { user } = useAppStore(s => ({
     user: s.user,
   }));
-  const navigate = useNavigate();
   if (!user) {
     logout?.('redirect');
   }
 
   return (
     <div className="layout">
-      <SideBar
-        onLogout={logout}
-        menu={menu}
-        getIcons={getIcons}
-      />
+      <SideBar onLogout={logout} menu={menu} getIcons={getIcons} />
       <main className="content">{children}</main>
     </div>
   );

package/src/components/layout/SideBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router';
+import { Link, useLocation } from 'react-router';
 
 type GetMenuFunction<IconType> = () => { name: string; path: string; iconType: IconType }[];
 
@@ -16,7 +16,6 @@ export function SideBar<IconType>({
 }) {
   const [isOpen, setIsOpen] = useState(true);
   const location = useLocation();
-  const navigate = useNavigate();
 
   // Helper function to determine if a link is active
   const isActiveLink = (path: string) => {

package/src/components/list/CellField.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ImageCellOptions } from '../../decorators/list/cells/ImageCell';
 import { AnyClass } from '../../types/AnyClass';
-import { CellConfiguration, ExtendedCellTypes } from '../../decorators/list/Cell';
+import { CellConfiguration } from '../../decorators/list/Cell';
 import { BooleanCell } from './cells/BooleanCell';
 import { DateCell } from './cells/DateCell';
 import { ImageCell } from './cells/ImageCell';
@@ -11,13 +10,11 @@ import { DownloadCell } from './cells/DownloadCell';
 
 interface CellFieldProps<T extends AnyClass> {
   configuration: CellConfiguration;
-  item: T;
-  value: any;
+  value: T[keyof T];
 }
 
 export function CellField<T extends AnyClass>({
   configuration,
-  item,
   value,
 }: CellFieldProps<T>): React.ReactElement {
   let render;

package/src/components/list/Datagrid.tsx

@@ -58,7 +58,6 @@ export function Datagrid<T extends AnyClass>({
                       <CellField
                         key={configuration.name}
                         configuration={configuration}
-                        item={item}
                         value={value}
                       />
                     );

package/src/components/list/EmptyList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const EmptyList: React.FC = () => {
+export function EmptyList() {
   return (
     <div className="empty-list">
       <div className="empty-list-content">
@@ -23,4 +23,4 @@ export const EmptyList: React.FC = () => {
       </div>
     </div>
   );
-};
+}

package/src/components/list/FilterPopup.tsx

@@ -134,6 +134,8 @@ export function FilterPopup<T extends AnyClass>({
   listPageMeta,
   activeFilters,
 }: FilterPopupProps<T>): React.ReactElement | null {
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [filters, setFilters] = React.useState<Record<string, any>>(activeFilters ?? {});
   const popupRef = useRef<HTMLDivElement>(null);
   const fields = useMemo(
@@ -158,8 +160,8 @@ export function FilterPopup<T extends AnyClass>({
   }, [isOpen, onClose]);
 
   if (!isOpen) return null;
-
-  const handleFilterChange = (fieldName: string, value: any) => {
+  
+  const handleFilterChange = (fieldName: string, value: string) => {
     setFilters(prev => ({
       ...prev,
       [fieldName]: value,

package/src/components/list/ListPage.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useEffect, useState } from 'react';
+import React, { useMemo, useCallback, useEffect, useState, useId } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import { Datagrid } from './Datagrid';
 import { ErrorComponent } from '../ErrorComponent';
@@ -16,10 +16,11 @@ export function ListPage<T extends AnyClass>({
   model: AnyClassConstructor<T>;
   customHeader?: React.ReactNode;
 }) {
+  const id = useId();
   const listPageMeta = useMemo(() => getListPageMeta(model), [model]);
 
   const [loading, setLoading] = useState(true);
-  const [data, setData] = useState<any>(null);
+  const [data, setData] = useState<T[]>([]);
   const [error, setError] = useState<unknown>(null);
 
   const [pagination, setPagination] = useState({ total: 0, page: 0, limit: 0 });
@@ -36,7 +37,9 @@ export function ListPage<T extends AnyClass>({
           page,
           filters: filters ?? activeFilters ?? {},
         });
-        setData(result.data);
+        //TODO: any is not a good solution, we need to find a better way to do this
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setData(result.data as any);
         setPagination({
           total: result.total,
           page: result.page,
@@ -49,7 +52,7 @@ export function ListPage<T extends AnyClass>({
         setLoading(false);
       }
     },
-    [activeFilters, listPageMeta.class.getData]
+    [activeFilters, listPageMeta.class]
   );
 
   useEffect(() => {
@@ -59,7 +62,7 @@ export function ListPage<T extends AnyClass>({
       filtersFromUrl[key] = value;
     });
     setActiveFilters(filtersFromUrl);
-  }, [location.search]);
+  }, []);
 
   useEffect(() => {
     if (activeFilters) {
@@ -67,7 +70,7 @@ export function ListPage<T extends AnyClass>({
     }
   }, [fetchData, params.page, activeFilters, listPageMeta.class.getData]);
 
-  const handleFilterApply = (filters: Record<string, any>) => {
+  const handleFilterApply = (filters: Record<string, string>) => {
     setActiveFilters(filters);
 
     // Convert filters to URLSearchParams
@@ -83,8 +86,8 @@ export function ListPage<T extends AnyClass>({
     fetchData(1, filters); // Reset to first page when filters change
   };
 
-  if (loading) return <LoadingScreen />;
-  if (error) return <ErrorComponent error={error} />;
+  if (loading) return <LoadingScreen id={id} />;
+  if (error) return <ErrorComponent id={id} error={error} />;
 
   return (
     <div className="list">

package/src/components/list/cells/DefaultCell.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
 
 interface DefaultCellProps {
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
   configuration: CellConfiguration;
 }

package/src/decorators/details/Details.ts

@@ -8,10 +8,10 @@ interface DetailsOptions<T extends AnyClass> {
   getDetailsData: GetDetailsDataFN<T>;
 }
 
-export interface DetailsConfiguration<T extends AnyClass> extends DetailsOptions<T> {}
+export type DetailsConfiguration<T extends AnyClass> = DetailsOptions<T>;
 
 export function Details<T extends AnyClass>(options?: DetailsOptions<T>): ClassDecorator {
-  return (target: Function) => {
+  return (target: object) => {
     if (options) {
       Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
     }

package/src/decorators/details/DetailsItem.ts

@@ -26,6 +26,8 @@ export function DetailsItem(options?: DetailsItemOptions): PropertyDecorator {
 export function getDetailsItemFields<T extends AnyClass>(
   entityClass: T
 ): DetailsItemConfiguration[] {
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const prototype = (entityClass as any).prototype;
   const inputFields: string[] = Reflect.getMetadata(DETAILS_ITEM_KEY, prototype) || [];
 

package/src/decorators/form/Form.ts

@@ -1,25 +1,26 @@
 import 'reflect-metadata';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { GetDetailsDataFN } from '../details/Details';
-import { InputConfiguration } from './Input';
 
 const DETAILS_METADATA_KEY = 'DetailsMetaData';
-export type OnSubmitFN<T> = (data: T | FormData) => Promise<T | FormData>;
+export type OnSubmitFN<T> = (data: T | FormData) => Promise<T>;
 
 interface FormOptions<T extends AnyClass> {
   onSubmit: OnSubmitFN<T>;
   getDetailsData?: GetDetailsDataFN<T>;
-  redirectBackOnSuccess?: boolean;
   type?: 'json' | 'formData';
+  redirectSuccessUrl?: string;
 }
 
-export interface FormConfiguration<T extends AnyClass> extends FormOptions<T> {
-  redirectBackOnSuccess: boolean;
+export interface FormConfiguration<T extends AnyClass> {
+  onSubmit: OnSubmitFN<T>;
+  getDetailsData?: GetDetailsDataFN<T>;
   type: 'json' | 'formData';
+  redirectSuccessUrl?: string;
 }
 
 export function Form<T extends AnyClass>(options?: FormOptions<T>): ClassDecorator {
-  return (target: Function) => {
+  return (target: object) => {
     if (options) {
       Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
     }
@@ -31,14 +32,16 @@ export function getFormConfiguration<T extends AnyClass, K extends AnyClassConst
 ): FormConfiguration<T> {
   const formOptions: FormOptions<T> = Reflect.getMetadata(
     DETAILS_METADATA_KEY,
-    entityClass as Object
+    entityClass as object
   );
   if (!formOptions) {
     throw new Error('Form decerator should be used on class');
   }
-  return {
-    ...formOptions,
+  const formConfiguration: FormConfiguration<T> = {
+    onSubmit: formOptions.onSubmit,
+    getDetailsData: formOptions.getDetailsData,
     type: formOptions.type ?? 'json',
-    redirectBackOnSuccess: formOptions.redirectBackOnSuccess ?? true,
+    redirectSuccessUrl: formOptions.redirectSuccessUrl,
   };
+  return formConfiguration;
 }

package/src/decorators/form/Input.ts

@@ -11,21 +11,29 @@ export type InputTypes = 'input' | 'textarea' | 'file-upload' | 'checkbox' | 'hi
 export type ExtendedInputTypes = InputTypes | 'select';
 
 export interface InputOptions {
+  name?: string;
   type?: InputTypes;
   inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
-  name?: string;
   label?: string;
   placeholder?: string;
   nestedFields?: InputConfiguration[];
+  includeInCSV?: boolean;
+  includeInJSON?: boolean;
 }
 
 export interface ExtendedInputOptions extends Omit<InputOptions, 'type'> {
   type: ExtendedInputTypes;
 }
 
-export interface InputConfiguration extends Omit<InputOptions, 'type'> {
+export interface InputConfiguration {
   name: string;
   type: ExtendedInputTypes;
+  inputType: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
+  label?: string;
+  placeholder?: string;
+  nestedFields?: InputConfiguration[];
+  includeInCSV: boolean;
+  includeInJSON: boolean;
 }
 
 export function Input(options?: InputOptions): PropertyDecorator {
@@ -55,21 +63,22 @@ export function ExtendedInput(options?: ExtendedInputOptions): PropertyDecorator
 export function getInputFields<T extends AnyClass>(
   entityClass: AnyClassConstructor<T>
 ): InputConfiguration[] {
-  const prototype = (entityClass as any).prototype;
+  const prototype = entityClass.prototype;
   const inputFields: string[] = Reflect.getMetadata(INPUT_KEY, prototype) || [];
   return inputFields.map(field => {
-    const fields = Reflect.getMetadata(`${INPUT_KEY.toString()}:${field}:options`, prototype) || {};
+    const fields: InputOptions =
+      Reflect.getMetadata(`${INPUT_KEY.toString()}:${field}:options`, prototype) || {};
     const inputType = fields?.inputType ?? (isFieldSensitive(field) ? 'password' : 'text');
-    return {
-      ...fields,
-      editable: fields.editable ?? true,
-      sensitive: fields.sensitive,
+    const inputConfiguration: InputConfiguration = {
       name: fields?.name ?? field,
       label: fields?.label ?? field,
       placeholder: fields?.placeholder ?? field,
       inputType: inputType,
+      nestedFields: fields?.nestedFields ?? [],
       type: fields?.type ?? 'input',
-      selectOptions: fields?.selectOptions ?? [],
+      includeInCSV: fields?.includeInCSV ?? false,
+      includeInJSON: fields?.includeInJSON ?? false,
     };
+    return inputConfiguration;
   });
 }

package/src/decorators/form/inputs/SelectInput.ts

@@ -1,17 +1,18 @@
 import { ExtendedInput, ExtendedInputOptions, InputConfiguration, InputOptions } from '../Input';
 
-export interface SelectInputOptions extends InputOptions {
-  onSelectPreloader?: () => Promise<{ label: string; value: any }[]>;
-  defaultOptions?: { value: any; label: string }[];
+export interface SelectInputOptions<T> extends InputOptions {
+  onSelectPreloader?: () => Promise<{ label: string; value: T }[]>;
+  defaultOptions?: { value: T; label: string }[];
+  csvExport?: never;
 }
 
-export interface SelectInputConfiguration extends InputConfiguration {
+export interface SelectInputConfiguration<T> extends InputConfiguration {
   type: 'select';
-  onSelectPreloader?: () => Promise<{ label: string; value: string }[]>;
-  defaultOptions?: { value: any; label: string }[];
+  onSelectPreloader?: () => Promise<{ label: string; value: T }[]>;
+  defaultOptions?: { value: T; label: string }[];
 }
 
-export function SelectInput(options?: SelectInputOptions): PropertyDecorator {
+export function SelectInput<K>(options?: SelectInputOptions<K>): PropertyDecorator {
   return ExtendedInput({
     ...options,
     type: 'select',

package/src/decorators/list/Cell.ts

@@ -1,8 +1,8 @@
 import 'reflect-metadata';
-import { AnyClass } from '../../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { createDecorator, DecoratorMap } from '../../utils/decerators';
 
-export const CELL_KEY: Symbol = Symbol('cell');
+export const CELL_KEY = Symbol('cell');
 
 interface Filter {
   type: 'string' | 'number' | 'date' | 'static-select';
@@ -42,8 +42,10 @@ export function Cell(options?: CellOptions): PropertyDecorator {
   return createDecorator(CELL_KEY, options, cellMap);
 }
 
-export function getCellFields<T extends AnyClass>(entityClass: T): CellConfiguration[] {
-  const prototype = (entityClass as any).prototype;
+export function getCellFields<T extends AnyClass>(
+  entityClass: AnyClassConstructor<T>
+): CellConfiguration[] {
+  const prototype = entityClass.prototype;
   const inputFields: string[] = Reflect.getMetadata(CELL_KEY, prototype) || [];
 
   return inputFields.map(field => {

package/src/decorators/list/ExtendedCell.ts

@@ -1,12 +1,4 @@
-import {
-  CELL_KEY,
-  CellConfiguration,
-  CellOptions,
-  CellTypes,
-  Cell,
-  ExtendedCellTypes,
-  cellMap,
-} from './Cell';
+import { CELL_KEY, CellConfiguration, CellOptions, ExtendedCellTypes, cellMap } from './Cell';
 import { createDecorator, DecoratorMap } from '../../utils/decerators';
 
 export interface ExtendedCellOptions extends Omit<CellOptions, 'type'> {

package/src/decorators/list/List.ts

@@ -1,11 +1,13 @@
 import 'reflect-metadata';
-import { AnyClass } from '../../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 
 const LIST_METADATA_KEY = 'ListMetaData';
 
 export interface GetDataParams {
   page?: number;
   limit?: number;
+  //TODO: fix this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   filters?: Record<string, any>;
 }
 
@@ -35,17 +37,19 @@ export interface ListOptions<T> {
   cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
 }
 
-export interface ListConfiguration<T> extends ListOptions<T> {}
+export type ListConfiguration<T> = ListOptions<T>;
 
 export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)): ClassDecorator {
-  return (target: Function) => {
+  return (target: object) => {
     if (options) {
       Reflect.defineMetadata(LIST_METADATA_KEY, options, target);
     }
   };
 }
 
-export function getListConfiguration<T extends AnyClass>(entityClass: T): ListConfiguration<T> {
+export function getListConfiguration<T extends AnyClass>(
+  entityClass: AnyClassConstructor<T>
+): ListConfiguration<T> {
   const listConfiguration = Reflect.getMetadata(LIST_METADATA_KEY, entityClass);
   if (!listConfiguration) {
     throw new Error('List decerator should be used on class');

package/src/decorators/list/cells/ImageCell.ts

@@ -1,5 +1,5 @@
 import { CellConfiguration, CellOptions } from '../Cell';
-import { ExtendedCell, ExtendedCellOptions } from '../ExtendedCell';
+import { ExtendedCell } from '../ExtendedCell';
 
 export interface ImageCellOptions extends Omit<CellOptions, 'type'> {
   baseUrl: string;

package/src/decorators/list/getListPageMeta.ts

@@ -1,5 +1,4 @@
-import { AnyClass } from '../../types/AnyClass';
-import { getDetailsItemFields } from '../details/DetailsItem';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { CellConfiguration, getCellFields } from './Cell';
 import { getListConfiguration, ListConfiguration } from './List';
 
@@ -8,7 +7,9 @@ export interface ListPageMeta<T extends AnyClass> {
   cells: CellConfiguration[];
 }
 
-export function getListPageMeta<T extends AnyClass>(entityClass: T): ListPageMeta<T> {
+export function getListPageMeta<T extends AnyClass>(
+  entityClass: AnyClassConstructor<T>
+): ListPageMeta<T> {
   return {
     class: getListConfiguration(entityClass),
     cells: getCellFields<T>(entityClass),

package/src/store/store.ts

@@ -8,12 +8,14 @@ interface User {
 
 interface AppState {
   user: User | null;
+  login: (user: User) => void;
 }
 
 export const useAppStore = createWithEqualityFn<AppState>()(
   persist(
-    _ => ({
+    set => ({
       user: null,
+      login: (user: User) => set({ user }),
     }),
     {
       name: 'app-store-1',