diff --git a/src/app/App.jsx b/src/app/App.jsx index c02f5ac..338e206 100644 --- a/src/app/App.jsx +++ b/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 ( <> +
}> diff --git a/src/components/PatchUserModal.jsx b/src/components/PatchUserModal.jsx new file mode 100644 index 0000000..74e5d8f --- /dev/null +++ b/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 ( +
+ +
+ Введите полное имя и почту, что бы продолжить +
+ {profile.fullName && ( + setUserFullName(e.target.value)} + type="text" + placeholder="Введите имя и фамилию" + /> + )} + {profile.email && ( + setUserEmail(e.target.value)} + type="text" + placeholder="Введите Email" + className="mt-2" + /> + )} + + + +
+
+
+
+ ); +}; + +export default PatchUserModal; diff --git a/src/features/profile/ProfileUser.jsx b/src/features/profile/ProfileUser.jsx index 7dfe8af..236b73b 100644 --- a/src/features/profile/ProfileUser.jsx +++ b/src/features/profile/ProfileUser.jsx @@ -60,8 +60,10 @@ const ProfileUser = () => {
Зарегистрирован {dayjs(profile.createdAt).fromNow()}
-
Атамазов Насырбек
-
atamazov00@mail.ru
+
+ {profile.fullName ? profile.fullName : `User ${profile._id}`} +
+
{profile.email}
diff --git a/src/features/profile/profileSlice.js b/src/features/profile/profileSlice.js index 7467ec8..938ee80 100644 --- a/src/features/profile/profileSlice.js +++ b/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) => {