Skip to content

Commit

Permalink
feat: add app dispatch \ fix login modal show on exit
Browse files Browse the repository at this point in the history
  • Loading branch information
TomatoVan committed Nov 27, 2023
1 parent ad90a05 commit 3b0a9e4
Show file tree
Hide file tree
Showing 6 changed files with 28 additions and 11 deletions.
2 changes: 2 additions & 0 deletions src/app/providers/StoreProvider/config/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,5 @@ export function createReduxStore(

return store;
}

export type AppDispatch = ReturnType<typeof createReduxStore>['dispatch'];
11 changes: 8 additions & 3 deletions src/app/providers/StoreProvider/index.ts
Original file line number Diff line number Diff line change
@@ -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,
};
18 changes: 12 additions & 6 deletions src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
Expand All @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
4 changes: 4 additions & 0 deletions src/shared/lib/hook/useAppDispatch/useAppDispatch.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { AppDispatch } from 'app/providers/StoreProvider';
import { useDispatch } from 'react-redux';

export const useAppDispatch = () => useDispatch<AppDispatch>();
2 changes: 1 addition & 1 deletion src/shared/ui/PageLoader/PageLoader.module.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down

0 comments on commit 3b0a9e4

Please sign in to comment.