Surveyor view: Load My Account data

backend/app/controllers/surveyors_controller.rb

@@ -67,6 +67,6 @@ def surveyor_params
   end
 
   def search_params
-    params.permit(:city, :zipcode, :state, :role, :status)
+    params.permit(:city, :zipcode, :state, :role, :status, :email)
   end
 end

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 }],
     }),
@@ -99,6 +99,11 @@ export const apiSlice = createApi({
       query: (id) => `/surveyors/${id}`,
       providesTags: (result, error, arg) => [{ type: "Surveyor", id: arg }],
     }),
+    getSurveyorByEmail: builder.query({
+      query: (email) => `/surveyors?email=${email}`,
+      transformResponse: (res) => res ? res[0] : null,
+      providesTags: (result, error, arg) => [{ type: "Surveyor", id: arg }],
+    }),
     createSurveyor: builder.mutation({
       query: (surveyor) => ({
         url: `/surveyors`,
@@ -108,10 +113,10 @@ export const apiSlice = createApi({
       invalidatesTags: ["Surveyor"],
     }),
     updateSurveyor: builder.mutation({
-      query: (surveyor) => ({
-        url: `/surveyors/${surveyor.id}`,
+      query: ({ id, body }) => ({
+        url: `/surveyors/${id}`,
         method: "PUT",
-        body: surveyor,
+        body,
       }),
       invalidatesTags: (result, error, arg) => [
         { type: "Surveyor", id: arg.id },
@@ -151,10 +156,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 +194,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 +234,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 +272,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 +312,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 },
@@ -365,6 +364,7 @@ export const {
   useCreateSurveyorMutation,
   useGetSurveyorQuery,
   useGetSurveyorsQuery,
+  useGetSurveyorByEmailQuery,
   // useGetSurveyorsByAssignmentIdQuery,
 
   // Home

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 (
     <Controller
       name={name}
@@ -21,11 +27,13 @@ export const HeatPumpPhoneField = ({ name, control, label, disabled }) => {
         <TextField
           id={`${name}-phoneNumber`}
           label={label}
+          type="tel"
           variant="standard"
           error={!!mainFieldError}
           helperText={!!mainFieldError && mainFieldError.message}
           disabled={disabled}
           {...field}
+          {...props}
         />
       )}
     />

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}
         />
       )}
     />

frontend/front/src/features/login/loginSlice.js

@@ -7,9 +7,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;
@@ -21,8 +23,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 = decodeJwt(token);
         if (token) {
@@ -32,8 +35,7 @@ const loginSlice = createSlice({
     );
     // update state whenever user logs out successfully
     builder.addMatcher(apiSlice.endpoints.logoutUser.matchPending, (state) => {
-      state.user = null;
-      state.token = null;
+      state = initialState
       localStorage.removeItem(AUTH_TOKEN_LOCAL_STORAGE_KEY);
     });
   },

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();
@@ -27,7 +32,7 @@ const Nav = () => {
               <Typography variant="h6">ADMIN</Typography>
             </Button>
           </Typography>
-          <Button color="inherit" component={Link} onClick={logout}>
+          <Button color="inherit" component={Link} onClick={handleLogout}>
             <Typography variant="h6">LOG OUT</Typography>
           </Button>
         </Toolbar>

frontend/front/src/pages/Surveyor/account/Account.js

@@ -3,42 +3,63 @@ 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 { useGetSurveyorByEmailQuery } 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 { email } = useSelector(selectCurrentUser);
+
+  const {
+    data: accountData,
+    isError: isAccountDataError,
+    isLoading: isAccountDataLoading,
+  } = useGetSurveyorByEmailQuery(email);
+
   return (
     <Box>
-      <Grid container direction="column" rowSpacing={1}>
-        <Grid item xs={12}>
-          <Box display="flex" px={2} pt={3}>
-            <Typography variant="h2" component="h2">
-              My Account
-            </Typography>
-          </Box>
-        </Grid>
-        <AccountDetail label="First Name" value={firstName} />
-        <AccountDetail label="Last Name" value={lastName} />
-        <AccountDetail label="Email" value={email} />
-        <AccountDetail label="Address" value={address} />
-        <AccountDetail label="Phone Number" value={phoneNumber} />
-      </Grid>
-      <Grid container direction="column" rowSpacing={4}>
-        <Grid item xs={12}>
-          <Box display="flex" mt={3} mb={2} px={2}>
-            <Button variant="contained" component={Link} to="edit">
-              Edit
-            </Button>
-          </Box>
-          <Box p={1} sx={{ borderBottom: "1px dashed grey" }} />
-          <Box display="flex" mt={3} mb={2} px={2}>
-            <Button variant="contained" disabled={true}>
-              Request New Assignment
-            </Button>
-          </Box>
-        </Grid>
-      </Grid>
+      {isAccountDataLoading ? (
+        <Loader />
+      ) : isAccountDataError ? (
+        <CustomSnackbar
+          open={isAccountDataError}
+          message="Error fetching account data."
+          severity="error"
+        />
+      ) : (
+        <>
+          <Grid container direction="column" rowSpacing={1}>
+            <Grid item xs={12}>
+              <Box display="flex" px={2} pt={3}>
+                <Typography variant="h2" component="h2">
+                  My Account
+                </Typography>
+              </Box>
+            </Grid>
+            <AccountDetail label="First Name" value={accountData.firstname} />
+            <AccountDetail label="Last Name" value={accountData.lastname} />
+            <AccountDetail label="Email" value={accountData.email} />
+            <AccountDetail label="Address" value={accountData.street_address} />
+            <AccountDetail label="Phone Number" value={accountData.phone} />
+          </Grid>
+          <Grid container direction="column" rowSpacing={4}>
+            <Grid item xs={12}>
+              <Box display="flex" mt={3} mb={2} px={2}>
+                <Button variant="contained" component={Link} to="edit">
+                  Edit
+                </Button>
+              </Box>
+              <Box p={1} sx={{ borderBottom: "1px dashed grey" }} />
+              <Box display="flex" mt={3} mb={2} px={2}>
+                <Button variant="contained" disabled={true}>
+                  Request New Assignment
+                </Button>
+              </Box>
+            </Grid>
+          </Grid>
+        </>
+      )}
     </Box>
   );
 };