From f01e6e561d2614c2d5605356b8e420d05463f272 Mon Sep 17 00:00:00 2001 From: Leo Westebbe Date: Sun, 18 Jun 2023 01:43:55 -0400 Subject: [PATCH 1/9] *get current user account data via rtk-query *load data on page *error handling and loading --- .../src/pages/Surveyor/account/Account.js | 86 ++++++++++++------- 1 file changed, 54 insertions(+), 32 deletions(-) diff --git a/frontend/front/src/pages/Surveyor/account/Account.js b/frontend/front/src/pages/Surveyor/account/Account.js index 4707ac87..4049aba3 100644 --- a/frontend/front/src/pages/Surveyor/account/Account.js +++ b/frontend/front/src/pages/Surveyor/account/Account.js @@ -3,42 +3,64 @@ import React from "react"; import AccountDetail from "./AccountDetail"; import { Link } from "react-router-dom"; import { useSelector } from "react-redux"; +import { selectCurrentUser } from "../../../features/login/loginSlice"; +import { useGetSurveyorQuery } from "../../../api/apiSlice"; +import Loader from "../../../components/Loader"; +import CustomSnackbar from "../../../components/CustomSnackbar"; const Account = () => { - const { firstName, lastName, email, address, phoneNumber } = useSelector( - (state) => state.account - ); + const { id: userId } = useSelector(selectCurrentUser); + + const { + data: accountData, + isError: isAccountDataError, + isLoading: isAccountDataLoading, + } = useGetSurveyorQuery(userId); + + return ( - - - - - My Account - - - - - - - - - - - - - - - - - - - - + {isAccountDataLoading ? ( + + ) : isAccountDataError ? ( + + ) : ( + <> + + + + + My Account + + + + + + + + + + + + + + + + + + + + + + )} ); }; From 8ca4cca39102cebaa35143cda1c13e87661e3ea2 Mon Sep 17 00:00:00 2001 From: Leo Westebbe Date: Sun, 18 Jun 2023 03:28:06 -0400 Subject: [PATCH 2/9] allow update account --- frontend/front/src/api/apiSlice.js | 4 +- .../src/pages/Surveyor/account/Account.js | 19 +- .../Surveyor/account/edit/EditAccount.js | 372 ++++++++++-------- 3 files changed, 225 insertions(+), 170 deletions(-) diff --git a/frontend/front/src/api/apiSlice.js b/frontend/front/src/api/apiSlice.js index dc3f410f..2c589890 100644 --- a/frontend/front/src/api/apiSlice.js +++ b/frontend/front/src/api/apiSlice.js @@ -108,8 +108,8 @@ export const apiSlice = createApi({ invalidatesTags: ["Surveyor"], }), updateSurveyor: builder.mutation({ - query: (surveyor) => ({ - url: `/surveyors/${surveyor.id}`, + query: ({ id, surveyor }) => ({ + url: `/surveyors/${id}`, method: "PUT", body: surveyor, }), diff --git a/frontend/front/src/pages/Surveyor/account/Account.js b/frontend/front/src/pages/Surveyor/account/Account.js index 4049aba3..518853f5 100644 --- a/frontend/front/src/pages/Surveyor/account/Account.js +++ b/frontend/front/src/pages/Surveyor/account/Account.js @@ -12,12 +12,17 @@ const Account = () => { const { id: userId } = useSelector(selectCurrentUser); const { - data: accountData, + data: { + firstname: firstName, + lastname: lastName, + email, + street_address: address, + phone: phoneNumber, + }, isError: isAccountDataError, isLoading: isAccountDataLoading, } = useGetSurveyorQuery(userId); - return ( {isAccountDataLoading ? ( @@ -38,11 +43,11 @@ const Account = () => { - - - - - + + + + + diff --git a/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js b/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js index 8834b592..20b9a8c7 100644 --- a/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js +++ b/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js @@ -1,15 +1,43 @@ -import React from "react"; +import React, { useCallback } from "react"; import Button from "@mui/material/Button"; import { Grid, Paper, TextField, Box } from "@mui/material"; import { useForm } from "react-hook-form"; -import { useDispatch, useSelector } from "react-redux"; -import { setAccount } from "../../../../features/account/accountSlice"; +import { useSelector } from "react-redux"; import { useNavigate, Link } from "react-router-dom"; +import { selectCurrentUser } from "../../../../features/login/loginSlice"; +import { + useGetSurveyorQuery, + useUpdateSurveyorMutation, +} from "../../../../api/apiSlice"; +import Loader from "../../../../components/Loader"; +import CustomSnackbar from "../../../../components/CustomSnackbar"; const EditAccount = () => { - const dispatch = useDispatch(); const navigate = useNavigate(); + const { id } = useSelector(selectCurrentUser); + + const { + data: { + firstname: firstName, + lastname: lastName, + email, + street_address: address, + phone: phoneNumber, + }, + isError: isAccountDataError, + isLoading: isAccountDataLoading, + } = useGetSurveyorQuery(id); + + const [ + updateAccount, + { + data: accountUpdateResult, + isError: isUpdateAccountError, + isLoading: isUpdatingAccount, + }, + ] = useUpdateSurveyorMutation(); + const { register, handleSubmit, @@ -17,13 +45,8 @@ const EditAccount = () => { reset, } = useForm(); - const { firstName, lastName, email, address, phoneNumber } = useSelector( - (state) => state.account - ); - const paperStyle = { padding: 40, - display: "flex", flexDirection: "column", width: 280, @@ -38,168 +61,195 @@ const EditAccount = () => { lineHeight: "1.25rem", }; + const handleUpdateAccount = useCallback( + async (values) => { + const updatedAccount = await updateAccount({ + id, + surveyor: { + surveyor: { + firstname: values.firstName, + lastname: values.lastName, + phone: values.phoneNumber, + email, + street_address: values.address, + }, + }, + }); + return updatedAccount; + }, + [updateAccount, id] + ); + async function EditAccountForms(values) { if (!values) return; - - dispatch( - setAccount({ - firstName: values.firstName, - lastName: values.lastName, - email: values.email, - address: values.address, - phoneNumber: values.phoneNumber, - }) - ); - + handleUpdateAccount(values); reset(); - navigate("../account"); } return ( - - -

Update Account Details?

- + {isAccountDataLoading || isUpdatingAccount ? ( + + ) : isAccountDataError ? ( + + ) : isUpdateAccountError ? ( + + ) : ( + + +

Update Account Details?

+ -
- - {errors?.firstName?.message} - - {errors?.lastName?.message} - ()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, - message: "Please enter a valid email", - }, - })} - /> - {errors?.email?.message} - - {errors?.address?.message} - - {errors?.phoneNumber?.message} + + + {errors?.firstName?.message} + + {errors?.lastName?.message} + ()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, + message: "Please enter a valid email", + }, + })} + /> + {errors?.email?.message} + + {errors?.address?.message} + + {errors?.phoneNumber?.message} - - - -
+ + + + + )} ); }; From 5d4a08c4a50be20ecdfde46b8a3696a4049c1065 Mon Sep 17 00:00:00 2001 From: Leo Westebbe Date: Sun, 18 Jun 2023 03:44:06 -0400 Subject: [PATCH 3/9] standardize apiSlice update/put query structures --- frontend/front/src/api/apiSlice.js | 58 +++++++++---------- .../Surveyor/account/edit/EditAccount.js | 2 +- 2 files changed, 27 insertions(+), 33 deletions(-) diff --git a/frontend/front/src/api/apiSlice.js b/frontend/front/src/api/apiSlice.js index 2c589890..ebe4c1b7 100644 --- a/frontend/front/src/api/apiSlice.js +++ b/frontend/front/src/api/apiSlice.js @@ -62,10 +62,10 @@ export const apiSlice = createApi({ invalidatesTags: ["Home"], }), updateHome: builder.mutation({ - query: (home) => ({ - url: `/homes/${home.id}`, + query: ({ id, body }) => ({ + url: `homes/${id}`, method: "PUT", - body: home, + body, }), invalidatesTags: (result, error, arg) => [{ type: "Home", id: arg.id }], }), @@ -108,10 +108,10 @@ export const apiSlice = createApi({ invalidatesTags: ["Surveyor"], }), updateSurveyor: builder.mutation({ - query: ({ id, surveyor }) => ({ + query: ({ id, body }) => ({ url: `/surveyors/${id}`, method: "PUT", - body: surveyor, + body, }), invalidatesTags: (result, error, arg) => [ { type: "Surveyor", id: arg.id }, @@ -151,10 +151,10 @@ export const apiSlice = createApi({ invalidatesTags: ["Survey"], }), updateSurvey: builder.mutation({ - query: (survey) => ({ - url: `/surveys/${survey.id}`, + query: ({ id, body }) => ({ + url: `/surveys/${id}`, method: "PUT", - body: survey, + body, }), invalidatesTags: (result, error, arg) => [{ type: "Survey", id: arg.id }], }), @@ -189,13 +189,11 @@ export const apiSlice = createApi({ invalidatesTags: ["SurveyVisit"], }), updateSurveyVisit: builder.mutation({ - query: ({ id, body }) => { - return { - url: `/survey_visits/${id}`, - method: "PUT", - body, - }; - }, + query: ({ id, body }) => ({ + url: `survey_visits/${id}`, + method: "PUT", + body, + }), invalidatesTags: (result, error, arg) => [ { type: "SurveyVisit", id: arg.id }, ], @@ -231,13 +229,11 @@ export const apiSlice = createApi({ invalidatesTags: ["SurveyResponse"], }), updateSurveyResponse: builder.mutation({ - query: ({ id, body }) => { - return { - url: `/survey_responses/${id}`, - method: "PUT", - body, - }; - }, + query: ({ id, body }) => ({ + url: `/survey_responses/${id}`, + method: "PUT", + body, + }), invalidatesTags: (result, error, arg) => [ { type: "SurveyResponse", id: arg.id }, ], @@ -271,13 +267,11 @@ export const apiSlice = createApi({ invalidatesTags: ["SurveyAnswer"], }), updateSurveyAnswer: builder.mutation({ - query: ({ id, body }) => { - return { - url: `/survey_answers/${id}`, - method: "PUT", - body, - }; - }, + query: ({ id, body }) => ({ + url: `/survey_answers/${id}`, + method: "PUT", + body, + }), invalidatesTags: (result, error, arg) => [ { type: "SurveyAnswer", id: arg.id }, ], @@ -313,10 +307,10 @@ export const apiSlice = createApi({ invalidatesTags: ["Assignment"], }), updateAssignment: builder.mutation({ - query: (assignment) => ({ - url: `/assignments/${assignment.id}`, + query: ({ id, body }) => ({ + url: `/assignments/${id}`, method: "PUT", - body: assignment, + body, }), invalidatesTags: (result, error, arg) => [ { type: "Assignment", id: arg.id }, diff --git a/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js b/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js index 20b9a8c7..b09a45d2 100644 --- a/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js +++ b/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js @@ -65,7 +65,7 @@ const EditAccount = () => { async (values) => { const updatedAccount = await updateAccount({ id, - surveyor: { + body: { surveyor: { firstname: values.firstName, lastname: values.lastName, From f4bd29e5835fccb5c1662a675b0afafbd08fea0c Mon Sep 17 00:00:00 2001 From: Leo Westebbe Date: Sun, 18 Jun 2023 03:54:20 -0400 Subject: [PATCH 4/9] update loginSlice to prevent log out from account page error --- frontend/front/src/features/login/loginSlice.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/front/src/features/login/loginSlice.js b/frontend/front/src/features/login/loginSlice.js index 38cf047b..0d28bb9f 100644 --- a/frontend/front/src/features/login/loginSlice.js +++ b/frontend/front/src/features/login/loginSlice.js @@ -6,9 +6,11 @@ import { createSelector, createSlice } from "@reduxjs/toolkit"; import { apiSlice } from "../../api/apiSlice"; +const initialState = { user: { id: null, email: null }, token: null }; + const loginSlice = createSlice({ name: "login", - initialState: { user: null, token: null }, + initialState, reducers: { setLoginInfo: (state, action) => { state.user = action.payload.user; @@ -20,8 +22,9 @@ const loginSlice = createSlice({ builder.addMatcher( apiSlice.endpoints.loginUser.matchFulfilled, (state, { payload, meta }) => { - const token = - meta.baseQueryMeta.response.headers.get(AUTHORIZATION_HEADER); + const token = meta.baseQueryMeta.response.headers.get( + AUTHORIZATION_HEADER + ); state.token = token; state.user = payload; if (token) { @@ -31,8 +34,8 @@ const loginSlice = createSlice({ ); // update state whenever user logs out successfully builder.addMatcher(apiSlice.endpoints.logoutUser.matchPending, (state) => { - state.user = null; - state.token = null; + state.user = initialState.user; + state.token = initialState.token; localStorage.removeItem(AUTH_TOKEN_LOCAL_STORAGE_KEY); }); }, From 30789f3af0e9f337ca52e12075b4a3993a66f84b Mon Sep 17 00:00:00 2001 From: Leo Westebbe Date: Sun, 18 Jun 2023 04:01:12 -0400 Subject: [PATCH 5/9] set up logout function to return to homepage on log out --- frontend/front/src/pages/Admin/nav/Nav.js | 11 ++++++++--- frontend/front/src/pages/Surveyor/nav/Nav.js | 11 ++++++++--- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/frontend/front/src/pages/Admin/nav/Nav.js b/frontend/front/src/pages/Admin/nav/Nav.js index 37b844ca..f2c3b12a 100644 --- a/frontend/front/src/pages/Admin/nav/Nav.js +++ b/frontend/front/src/pages/Admin/nav/Nav.js @@ -8,12 +8,17 @@ import { useTheme, } from "@mui/material"; -import { Link } from "react-router-dom"; -import React from "react"; +import { Link, useNavigate } from "react-router-dom"; +import React, { useCallback } from "react"; import { useLogoutUserMutation } from "../../../api/apiSlice"; const Nav = () => { + const navigate = useNavigate(); const [logout] = useLogoutUserMutation(); + const handleLogout = useCallback(async () => { + await logout(); + navigate("/"); + }); // const { title } = useSelector((state) => state.nav); const theme = useTheme(); @@ -28,7 +33,7 @@ const Nav = () => { ADMIN - diff --git a/frontend/front/src/pages/Surveyor/nav/Nav.js b/frontend/front/src/pages/Surveyor/nav/Nav.js index a06296ed..6c13d2ae 100644 --- a/frontend/front/src/pages/Surveyor/nav/Nav.js +++ b/frontend/front/src/pages/Surveyor/nav/Nav.js @@ -1,12 +1,17 @@ import { AppBar, Box, Button, Toolbar, Typography } from "@mui/material"; import LeftDrawer from "./LeftDrawer"; -import { Link } from "react-router-dom"; -import React from "react"; +import { Link, useNavigate } from "react-router-dom"; +import React, { useCallback } from "react"; import { useLogoutUserMutation } from "../../../api/apiSlice"; const Nav = () => { + const navigate = useNavigate(); const [logout] = useLogoutUserMutation(); + const handleLogout = useCallback(async () => { + await logout(); + navigate("/"); + }); return ( @@ -35,7 +40,7 @@ const Nav = () => { - From 45d178140568a835bc5dce39ff4d597f6fb4d5a6 Mon Sep 17 00:00:00 2001 From: Leo Westebbe Date: Sun, 18 Jun 2023 04:03:24 -0400 Subject: [PATCH 6/9] remove unnecessary accountSlice --- .../src/features/account/accountSlice.js | 34 ------------------- frontend/front/src/redux/store.js | 2 -- 2 files changed, 36 deletions(-) delete mode 100644 frontend/front/src/features/account/accountSlice.js diff --git a/frontend/front/src/features/account/accountSlice.js b/frontend/front/src/features/account/accountSlice.js deleted file mode 100644 index e926a513..00000000 --- a/frontend/front/src/features/account/accountSlice.js +++ /dev/null @@ -1,34 +0,0 @@ -import { createSlice } from "@reduxjs/toolkit"; - -const initialState = { - firstName: "John", - lastName: "Smith", - email: "jsmith@example.com", - address: "12345 John Smith Way", - phoneNumber: "1234567890", -}; - -const accountSlice = createSlice({ - name: "account", - initialState, - reducers: { - setAccount: (state, action) => { - state.firstName = action.payload.firstName; - state.lastName = action.payload.lastName; - state.email = action.payload.email; - state.address = action.payload.address; - state.phoneNumber = action.payload.phoneNumber; - }, - setLogOut: (state) => { - state.firstName = null; - state.lastName = null; - state.email = null; - state.address = null; - state.phoneNumber = null; - }, - }, -}); - -export const { setAccount, setLogOut } = accountSlice.actions; - -export default accountSlice.reducer; diff --git a/frontend/front/src/redux/store.js b/frontend/front/src/redux/store.js index eb5c9174..11d73fff 100644 --- a/frontend/front/src/redux/store.js +++ b/frontend/front/src/redux/store.js @@ -1,4 +1,3 @@ -import accountReducer from "../features/account/accountSlice"; import { apiSlice } from "../api/apiSlice"; import { configureStore } from "@reduxjs/toolkit"; import contactReducer from "../features/contact/contactSlice"; @@ -9,7 +8,6 @@ import surveyorReducer from "../features/surveyor/surveyorSlice"; export const createStore = (options) => configureStore({ reducer: { - account: accountReducer, contact: contactReducer, nav: navReducer, login: loginReducer, From f117469829385cc7d1e5ab0b63b5a12774bd5460 Mon Sep 17 00:00:00 2001 From: Leo Westebbe Date: Sun, 18 Jun 2023 05:10:07 -0400 Subject: [PATCH 7/9] Address Matt's comments * state restoration on logout made more concise * fix account data error message * camelCase function name in EditAccount --- frontend/front/src/features/login/loginSlice.js | 3 +-- frontend/front/src/pages/Surveyor/account/Account.js | 2 +- .../front/src/pages/Surveyor/account/edit/EditAccount.js | 8 ++++---- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/front/src/features/login/loginSlice.js b/frontend/front/src/features/login/loginSlice.js index 0d28bb9f..9d2a0eac 100644 --- a/frontend/front/src/features/login/loginSlice.js +++ b/frontend/front/src/features/login/loginSlice.js @@ -34,8 +34,7 @@ const loginSlice = createSlice({ ); // update state whenever user logs out successfully builder.addMatcher(apiSlice.endpoints.logoutUser.matchPending, (state) => { - state.user = initialState.user; - state.token = initialState.token; + state = initialState localStorage.removeItem(AUTH_TOKEN_LOCAL_STORAGE_KEY); }); }, diff --git a/frontend/front/src/pages/Surveyor/account/Account.js b/frontend/front/src/pages/Surveyor/account/Account.js index 518853f5..d77f1f8a 100644 --- a/frontend/front/src/pages/Surveyor/account/Account.js +++ b/frontend/front/src/pages/Surveyor/account/Account.js @@ -30,7 +30,7 @@ const Account = () => { ) : isAccountDataError ? ( ) : ( diff --git a/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js b/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js index b09a45d2..955d679b 100644 --- a/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js +++ b/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js @@ -80,7 +80,7 @@ const EditAccount = () => { [updateAccount, id] ); - async function EditAccountForms(values) { + async function editAccountForms(values) { if (!values) return; handleUpdateAccount(values); reset(); @@ -109,7 +109,7 @@ const EditAccount = () => {

Update Account Details?

 -
+ { type="submit" color="primary" variant="contained" - onClick={() => EditAccountForms} + onClick={() => editAccountForms} style={{ btnstyle, borderRadius: "20px", @@ -235,7 +235,7 @@ const EditAccount = () => { type="button" color="error" variant="contained" - onClick={() => EditAccountForms} + onClick={() => editAccountForms} style={{ btnstyle, borderRadius: "20px", From 782a51caf82fc89ae45746fc2d73b1db0b9d8ba3 Mon Sep 17 00:00:00 2001 From: Leo Westebbe Date: Tue, 20 Jun 2023 23:31:45 -0400 Subject: [PATCH 8/9] *HeatPumpTextField and HeatPumpPhoneField accept any props. *EditAccount uses controlled HeatPump[Etc.] field components. --- .../SurveyComponent/HeatPumpPhoneField.js | 12 +- .../SurveyComponent/HeatPumpTextField.js | 4 +- .../Surveyor/account/edit/EditAccount.js | 172 ++++++------------ 3 files changed, 67 insertions(+), 121 deletions(-) diff --git a/frontend/front/src/components/SurveyComponent/HeatPumpPhoneField.js b/frontend/front/src/components/SurveyComponent/HeatPumpPhoneField.js index 04a3264c..2f7846d2 100644 --- a/frontend/front/src/components/SurveyComponent/HeatPumpPhoneField.js +++ b/frontend/front/src/components/SurveyComponent/HeatPumpPhoneField.js @@ -2,10 +2,16 @@ import React from "react"; import { Controller, useController } from "react-hook-form"; import { TextField } from "@mui/material"; -export const HeatPumpPhoneField = ({ name, control, label, disabled }) => { +export const HeatPumpPhoneField = ({ + name, + control, + label, + disabled, + ...props +}) => { const { formState } = useController({ name, control }); const mainFieldError = formState.errors[name]; - + return ( { )} /> diff --git a/frontend/front/src/components/SurveyComponent/HeatPumpTextField.js b/frontend/front/src/components/SurveyComponent/HeatPumpTextField.js index c40e5e7c..6c13281c 100644 --- a/frontend/front/src/components/SurveyComponent/HeatPumpTextField.js +++ b/frontend/front/src/components/SurveyComponent/HeatPumpTextField.js @@ -8,6 +8,7 @@ export const HeatPumpTextField = ({ label, disabled, required, + ...props }) => { const { formState } = useController({ name, control }); @@ -17,7 +18,7 @@ export const HeatPumpTextField = ({ control={control} rules={ required && { - required: { value: true, message: "This field is required!" }, + required: { value: true, message: required }, } } render={({ field }) => ( @@ -31,6 +32,7 @@ export const HeatPumpTextField = ({ } disabled={disabled} {...field} + {...props} /> )} /> diff --git a/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js b/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js index 955d679b..e3c97cff 100644 --- a/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js +++ b/frontend/front/src/pages/Surveyor/account/edit/EditAccount.js @@ -1,6 +1,6 @@ import React, { useCallback } from "react"; import Button from "@mui/material/Button"; -import { Grid, Paper, TextField, Box } from "@mui/material"; +import { Grid, Paper, Box } from "@mui/material"; import { useForm } from "react-hook-form"; import { useSelector } from "react-redux"; import { useNavigate, Link } from "react-router-dom"; @@ -11,12 +11,25 @@ import { } from "../../../../api/apiSlice"; import Loader from "../../../../components/Loader"; import CustomSnackbar from "../../../../components/CustomSnackbar"; +import { HeatPumpPhoneField } from "../../../../components/SurveyComponent/HeatPumpPhoneField"; +import { HeatPumpTextField } from "../../../../components/SurveyComponent/HeatPumpTextField"; + +// Styles +const verticalMargin = { margin: "10px 0" }; +const paperStyle = { + padding: 40, + display: "flex", + flexDirection: "column", + width: 280, + margin: "20px auto", +}; const EditAccount = () => { const navigate = useNavigate(); + // Get account data const { id } = useSelector(selectCurrentUser); - + // RTK Query const { data: { firstname: firstName, @@ -38,29 +51,18 @@ const EditAccount = () => { }, ] = useUpdateSurveyorMutation(); - const { - register, - handleSubmit, - formState: { errors }, - reset, - } = useForm(); - - const paperStyle = { - padding: 40, - display: "flex", - flexDirection: "column", - width: 280, - margin: "20px auto", - }; - - const btnstyle = { margin: "10px 0" }; - - const errorStyles = { - color: "rgb(239 68 68 / 1)", - fontSize: "0.875rem", - lineHeight: "1.25rem", - }; + // react-hook-form + const { handleSubmit, control, reset } = useForm({ + defaultValues: { + firstName, + lastName, + email, + address, + phoneNumber: phoneNumber, + }, + }); + // Action handling const handleUpdateAccount = useCallback( async (values) => { const updatedAccount = await updateAccount({ @@ -70,7 +72,7 @@ const EditAccount = () => { firstname: values.firstName, lastname: values.lastName, phone: values.phoneNumber, - email, + email: values.email, street_address: values.address, }, }, @@ -110,112 +112,46 @@ const EditAccount = () => { - - {errors?.firstName?.message} - - {errors?.lastName?.message} - ()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, - message: "Please enter a valid email", - }, - })} + type="email" + sx={verticalMargin} /> - {errors?.email?.message} - - {errors?.address?.message} - - {errors?.phoneNumber?.message}