From 3b0a9e435a843b181293ec62560848cf8df727e6 Mon Sep 17 00:00:00 2001
From: "Leon.kov" <kovzel.leo@gmail.com>
Date: Mon, 27 Nov 2023 15:09:11 +0300
Subject: [PATCH] feat: add app dispatch \ fix login modal show on exit

---
 .../providers/StoreProvider/config/store.ts    |  2 ++
 src/app/providers/StoreProvider/index.ts       | 11 ++++++++---
 .../AuthByUsername/ui/LoginForm/LoginForm.tsx  | 18 ++++++++++++------
 .../ui/LoginModal/LoginModal.tsx               |  2 +-
 .../lib/hook/useAppDispatch/useAppDispatch.ts  |  4 ++++
 .../ui/PageLoader/PageLoader.module.scss       |  2 +-
 6 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 src/shared/lib/hook/useAppDispatch/useAppDispatch.ts

diff --git a/src/app/providers/StoreProvider/config/store.ts b/src/app/providers/StoreProvider/config/store.ts
index 4fa8020..95d33f1 100644
--- a/src/app/providers/StoreProvider/config/store.ts
+++ b/src/app/providers/StoreProvider/config/store.ts
@@ -27,3 +27,5 @@ export function createReduxStore(
 
     return store;
 }
+
+export type AppDispatch = ReturnType<typeof createReduxStore>['dispatch'];
diff --git a/src/app/providers/StoreProvider/index.ts b/src/app/providers/StoreProvider/index.ts
index bb840b2..66a7146 100644
--- a/src/app/providers/StoreProvider/index.ts
+++ b/src/app/providers/StoreProvider/index.ts
@@ -1,5 +1,10 @@
 import { StoreProvider } from 'app/providers/StoreProvider/ui/StoreProvider';
-import { createReduxStore } from 'app/providers/StoreProvider/config/store';
-import type { StateSchema, ReduxStoreWithManager } from 'app/providers/StoreProvider/config/StateSchema';
+import {
+    AppDispatch,
+    createReduxStore,
+} from 'app/providers/StoreProvider/config/store';
+import type { StateSchema } from 'app/providers/StoreProvider/config/StateSchema';
 
-export { StoreProvider, createReduxStore, StateSchema };
+export {
+    StoreProvider, createReduxStore, StateSchema, AppDispatch,
+};
diff --git a/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx b/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx
index fffa7e1..e2404cd 100644
--- a/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx
+++ b/src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx
@@ -2,13 +2,14 @@ import { classNames } from 'shared/lib/classNames/classNames';
 import { useTranslation } from 'react-i18next';
 import { Button, ButtonTheme } from 'shared/ui/Button/Button';
 import { Input } from 'shared/ui/Input/Input';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { memo, useCallback } from 'react';
 import { Text, TextTheme } from 'shared/ui/Text/Text';
 import {
     DynamicModuleLoader,
     ReducersList,
 } from 'shared/lib/components/DynamicModuleLoared/DynamicModuleLoared';
+import { useAppDispatch } from 'shared/lib/hook/useAppDispatch/useAppDispatch';
 import { getLoginUsername } from '../../model/selectors/getLoginUsername/getLoginUsername';
 import { getLoginIsLoading } from '../../model/selectors/getLoginIsLoading/getLoginIsLoading';
 import { getLoginPassword } from '../../model/selectors/getLoginPassword/getLoginPassword';
@@ -19,15 +20,16 @@ import { loginByUsername } from '../../model/services/loginByUsername/loginByUse
 
 export interface LoginFormProps {
   className?: string;
+	onSuccess: () => void;
 }
 
 const initialReducers: ReducersList = {
     loginForm: loginReducer,
 };
 
-const LoginForm = memo(({ className }: LoginFormProps) => {
+const LoginForm = memo(({ className, onSuccess }: LoginFormProps) => {
     const { t } = useTranslation();
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const username = useSelector(getLoginUsername);
     const password = useSelector(getLoginPassword);
     const isLoading = useSelector(getLoginIsLoading);
@@ -48,10 +50,14 @@ const LoginForm = memo(({ className }: LoginFormProps) => {
     );
 
     const onLoginClick = useCallback(
-        () => {
-            dispatch(loginByUsername({ username, password }));
+        async () => {
+            const result = await dispatch(loginByUsername({ username, password }));
+            console.log(result.meta.requestStatus);
+            if (result.meta.requestStatus === 'fulfilled') {
+                onSuccess();
+            }
         },
-        [dispatch, password, username],
+        [onSuccess, dispatch, password, username],
     );
 
     return (
diff --git a/src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx b/src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx
index 983c55e..c292afc 100644
--- a/src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx
+++ b/src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx
@@ -12,7 +12,7 @@ interface LoginModalProps {
 export const LoginModal = ({ className, isOpen, onClose }: LoginModalProps) => (
     <Modal lazy onClose={onClose} isOpen={isOpen}>
         <Suspense fallback={<PageLoader />}>
-            <LoginFormAsync />
+            <LoginFormAsync onSuccess={onClose} />
         </Suspense>
     </Modal>
 );
diff --git a/src/shared/lib/hook/useAppDispatch/useAppDispatch.ts b/src/shared/lib/hook/useAppDispatch/useAppDispatch.ts
new file mode 100644
index 0000000..25bb0c2
--- /dev/null
+++ b/src/shared/lib/hook/useAppDispatch/useAppDispatch.ts
@@ -0,0 +1,4 @@
+import { AppDispatch } from 'app/providers/StoreProvider';
+import { useDispatch } from 'react-redux';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/src/shared/ui/PageLoader/PageLoader.module.scss b/src/shared/ui/PageLoader/PageLoader.module.scss
index cc0d4ee..3eb1e36 100644
--- a/src/shared/ui/PageLoader/PageLoader.module.scss
+++ b/src/shared/ui/PageLoader/PageLoader.module.scss
@@ -1,5 +1,5 @@
 .PageLoader {
-    min-height: calc(100vh - var(--navbar-height));
+    // min-height: calc(100vh - var(--navbar-height));
     display: flex;
     justify-content: center;
     align-items: center;