Если у пользователя не заполнены поля имя и почта, вылезет модальное … (#292)

* Если у пользователя не заполнены поля имя и почта, вылезет модальное окно, с просьбой заполнить их

* Доработал модальное окно и изменил стили для него

* Убрал бессмыленную очисту полей ввода данных пользователя

Author: baysarov077

src/app/App.jsx

@@ -5,6 +5,7 @@ import { useAuth } from 'common/context/Auth/useAuth';
 import { Header } from 'components/layout/header/Header';
 import { fetchProfile } from 'features/profile/profileSlice';
 import { Footer } from 'components/layout/Footer';
+import PatchUserModal from 'components/PatchUserModal';
 import { LazyPlaceholder } from './LazyPlaceholder';
 
 const QuestionPage = lazy(() => import('features/questions/question-page/QuestionPage'));
@@ -56,6 +57,7 @@ export const App = () => {
 
   return (
     <>
+      <PatchUserModal />
       <Header />
       <Suspense fallback={<LazyPlaceholder />}>
         <Switch>

src/components/PatchUserModal.jsx

@@ -0,0 +1,71 @@
+import { Button, Input, Modal } from 'antd';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectProfile, updateProfile } from 'features/profile/profileSlice';
+import styled from 'styled-components';
+
+const StyledModalHeading = styled.h2`
+  text-align: center;
+`;
+const StyledButtonBlock = styled.div`
+  width: 110px;
+  margin: auto;
+`;
+
+const PatchUserModal = () => {
+  const profile = useSelector(selectProfile);
+
+  const dispatch = useDispatch();
+
+  const [userFullName, setUserFullName] = useState('');
+  const [userEmail, setUserEmail] = useState('');
+
+  const id = profile._id;
+
+  const handleSubmit = () => {
+    dispatch(updateProfile({ id, userFullName, userEmail }));
+  };
+
+  const isModalOpened = !profile.fullName || !profile.email;
+
+  return (
+    <div>
+      <Modal open={isModalOpened} footer={null} destroyOnClose>
+        <div>
+          <StyledModalHeading>Введите полное имя и почту, что бы продолжить</StyledModalHeading>
+          <div className="mt-3">
+            {profile.fullName && (
+              <Input
+                value={userFullName}
+                onChange={(e) => setUserFullName(e.target.value)}
+                type="text"
+                placeholder="Введите имя и фамилию"
+              />
+            )}
+            {profile.email && (
+              <Input
+                value={userEmail}
+                onChange={(e) => setUserEmail(e.target.value)}
+                type="text"
+                placeholder="Введите Email"
+                className="mt-2"
+              />
+            )}
+            <StyledButtonBlock>
+              <Button
+                className="mt-3"
+                disabled={!userFullName}
+                onClick={handleSubmit}
+                type="button"
+              >
+                Сохранить
+              </Button>
+            </StyledButtonBlock>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default PatchUserModal;

src/features/profile/ProfileUser.jsx

@@ -60,8 +60,10 @@ const ProfileUser = () => {
                 <div className="registration-date">
                   Зарегистрирован {dayjs(profile.createdAt).fromNow()}
                 </div>
-                <div className="userName">Атамазов Насырбек</div>
-                <div className="userEmail">atamazov00@mail.ru</div>
+                <div className="userName">
+                  {profile.fullName ? profile.fullName : `User ${profile._id}`}
+                </div>
+                <div className="userEmail">{profile.email}</div>
               </div>
             </Paper>
           </div>

src/features/profile/profileSlice.js

@@ -15,6 +15,21 @@ export const fetchProfile = createAsyncThunk('profile/fetch', async (_, thunkAPI
   }
 });
 
+export const updateProfile = createAsyncThunk(
+  'profile/patch',
+  async ({ id, userFullName, userEmail }, thunkAPI) => {
+    try {
+      const response = await axios.patch(`http://localhost:3030/user/profile/${id}`, {
+        fullName: userFullName,
+        email: userEmail,
+      });
+      return response.data;
+    } catch (e) {
+      return thunkAPI.rejectWithValue(e.message);
+    }
+  }
+);
+
 const profileSlice = createSlice({
   name: 'profile',
   initialState: {
@@ -26,6 +41,7 @@ const profileSlice = createSlice({
     questionIdsThatUserFavorite: [],
     isAdmin: false,
     createdAt: null,
+    email: null,
     // добавить остальные поля по мере необходимости
   },
 
@@ -43,6 +59,7 @@ const profileSlice = createSlice({
       state.questionIdsThatUserFavorite = payload.questionIdsThatUserFavorite;
       state.isAdmin = payload.isAdmin;
       state.createdAt = payload.createdAt;
+      state.email = payload.email;
     },
 
     [addQuestionToFavorites.pending]: (state, action) => {
@@ -54,6 +71,11 @@ const profileSlice = createSlice({
         (id) => id !== action.meta.arg.questionId
       );
     },
+
+    [updateProfile.fulfilled]: (state, action) => {
+      state.fullName = action.payload.fullName;
+      state.email = action.payload.email;
+    },
   },
   reducers: {
     resetProfile: (state) => {