diff --git a/apps/cs/src/app/providers/app-provider.tsx b/apps/cs/src/app/providers/app-provider.tsx index cf477dcc0..caf3b98f7 100644 --- a/apps/cs/src/app/providers/app-provider.tsx +++ b/apps/cs/src/app/providers/app-provider.tsx @@ -3,13 +3,17 @@ import { ConfirmProvider } from "@frontend-opensource/use-react-hooks"; import { AuthWrapper } from "@/entities/auth"; import { QueryProvider, StoreProvider } from "@/shared/providers"; +import { AlertDialog } from "@/shared/ui/alert-dialog"; const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => { return ( - {children} + + {children} + + diff --git a/apps/cs/src/shared/lib/use-alert-store.ts b/apps/cs/src/shared/lib/use-alert-store.ts new file mode 100644 index 000000000..c21a00ed3 --- /dev/null +++ b/apps/cs/src/shared/lib/use-alert-store.ts @@ -0,0 +1,14 @@ +import { useStore } from "zustand"; +import { useContext } from "react"; +import type { AlertStore } from "../store/alert-store"; +import { StoreContext } from "../providers/store-provider"; + +export const useAlertStore = (selector: (store: AlertStore) => T): T => { + const storeContext = useContext(StoreContext); + + if (!storeContext) { + throw new Error("useAlertStore must be used within StoreProvider"); + } + + return useStore(storeContext.alertStore, selector); +}; diff --git a/apps/cs/src/shared/lib/use-user-store.ts b/apps/cs/src/shared/lib/use-user-store.ts index f4bf9763a..748caed4c 100644 --- a/apps/cs/src/shared/lib/use-user-store.ts +++ b/apps/cs/src/shared/lib/use-user-store.ts @@ -1,6 +1,6 @@ import { useStore } from "zustand"; import { useContext } from "react"; -import { type UserStore } from "@/shared/store/user-store"; +import type { UserStore } from "../store/user-store"; import { StoreContext } from "../providers/store-provider"; export const useUserStore = (selector: (store: UserStore) => T): T => { diff --git a/apps/cs/src/shared/providers/store-provider.tsx b/apps/cs/src/shared/providers/store-provider.tsx index ec913f235..4814705ab 100644 --- a/apps/cs/src/shared/providers/store-provider.tsx +++ b/apps/cs/src/shared/providers/store-provider.tsx @@ -1,9 +1,11 @@ "use client"; import { createContext, useRef } from "react"; -import { createUserStore } from "@/shared/store/user-store"; +import { createAlertStore } from "../store/alert-store"; +import { createUserStore } from "../store/user-store"; type StoreContextType = { + alertStore: ReturnType; userStore: ReturnType; }; @@ -15,6 +17,7 @@ export const StoreProvider = ({ children }: { children: React.ReactNode }) => { const storeRef = useRef(null); if (storeRef.current === null) { storeRef.current = { + alertStore: createAlertStore(), userStore: createUserStore(), }; } diff --git a/apps/cs/src/shared/store/alert-store.ts b/apps/cs/src/shared/store/alert-store.ts new file mode 100644 index 000000000..a6e22d441 --- /dev/null +++ b/apps/cs/src/shared/store/alert-store.ts @@ -0,0 +1,22 @@ +import { createStore } from "zustand/vanilla"; + +export type AlertState = { + alertMessage: string; +}; + +export type AlertActions = { + setAlertMessage: (message: string) => void; +}; + +export type AlertStore = AlertState & AlertActions; + +export const defaultInitState: AlertState = { + alertMessage: "", +}; + +export const createAlertStore = (initState: AlertState = defaultInitState) => { + return createStore()((set) => ({ + ...initState, + setAlertMessage: (alertMessage: string) => set(() => ({ alertMessage })), + })); +}; diff --git a/apps/cs/src/shared/ui/alert-dialog.tsx b/apps/cs/src/shared/ui/alert-dialog.tsx new file mode 100644 index 000000000..68805ce2f --- /dev/null +++ b/apps/cs/src/shared/ui/alert-dialog.tsx @@ -0,0 +1,28 @@ +import { + Dialog, + DialogContent, + DialogFooter, + DialogClose, + Button, +} from "@common/components/ui"; +import { useAlertStore } from "../lib/use-alert-store"; + +function AlertDialog() { + const { alertMessage, setAlertMessage } = useAlertStore((state) => state); + return ( + setAlertMessage("")}> + +
+

{alertMessage}

+
+ + + + + +
+
+ ); +} + +export { AlertDialog }; diff --git a/apps/cs/src/shared/ui/confirm-dialog.tsx b/apps/cs/src/shared/ui/confirm-dialog.tsx new file mode 100644 index 000000000..3e1e90f9d --- /dev/null +++ b/apps/cs/src/shared/ui/confirm-dialog.tsx @@ -0,0 +1,46 @@ +import { useConfirm } from "@frontend-opensource/use-react-hooks"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogClose, + Button, + type ButtonProps, +} from "@common/components/ui"; + +type ConfirmDialogProps = { + open: boolean; + confirmButtonProps?: ButtonProps & { label?: string }; + cancelButtonProps?: ButtonProps & { label?: string }; +}; + +function ConfirmDialog({ + open, + confirmButtonProps, + cancelButtonProps, +}: ConfirmDialogProps) { + const { message, onConfirm, onCancel } = useConfirm(); + return ( + + +
+

{message}

+
+ + + + + + + + +
+
+ ); +} + +export { ConfirmDialog };