Notes

// userSlice.js (in Redux)

import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
name: 'user',
initialState: {
userData: null, // Store user info here
},
reducers: {
setUserData: (state, action) => {
state.userData = action.payload;
},
},
});

export const { setUserData } = userSlice.actions;
export default userSlice.reducer;







import { useDispatch } from 'react-redux';
import { setUserData } from '../../Redux/Feautures/userSlice';
import { Link } from 'react-router-dom';

const PolicyDashboard = ({ addPolicy }) => {
const dispatch = useDispatch();
const { state } = useLocation(); // Assuming this is the state you want to pass

// Store the user data in Redux
useEffect(() => {
if (state) {
dispatch(setUserData(state));
}
}, [state, dispatch]);

return (
<div>
{/* Other PolicyDashboard content */}
<Link to="/account">
<button>Go to Account</button>
</Link>
</div>
);
};

export default PolicyDashboard;


import { useSelector } from 'react-redux';
import { useState, useEffect } from 'react';
import BackToDasboard from "../../Components/BackToDashboard/BackToDashboard.js";
import SectionInputBox from "./SectionInputBox/SectionInputBox";
import { Button } from "@qbe/ui-core";
import "./Account.css";

const Account = () => {
const [isActive, setActive] = useState(false);

// Access user data from Redux
const userDataFromRedux = useSelector((state) => state.user.userData);

const [userData, setUserData] = useState([
{
sectionName: "Personal info",
inputs: [
{ name: "Name", value: "" },
{ name: "Relationship", value: "" },
{ name: "Email", value: "" },
],
},
]);

useEffect(() => {
if (userDataFromRedux) {
setUserData([
{
sectionName: "Personal info",
inputs: [
{ name: "Name", value: `${userDataFromRedux.firstName} ${userDataFromRedux.lastName}` },
{ name: "Relationship", value: userDataFromRedux.relationship },
{ name: "Email", value: userDataFromRedux.email },
],
},
]);
}
}, [userDataFromRedux]);

const getUserDetails = (user) => {
setUserData((prevData) => {
const updatedData = [...prevData];
updatedData[0].inputs[0].value = `${user.firstName} ${user.lastName}`;
updatedData[0].inputs[1].value = user.relationship;
updatedData[0].inputs[2].value = user.email;
return updatedData;
});
};

const handleSaveChanges = () => {
console.log("Save changes", userData);
};

return (
<>
<div className="p-3">
<BackToDasboard backTo="Dashboard" path="/policydashboard" />
</div>
<div className="account-info-container">
<div className="form-card-container">
<div className="account-top-section">
<h6 className="account-form-card-title">Account</h6>
</div>
<div className="account-bottom-section">
{userData.map((section) => {
return (
<div key={section.sectionName}>
<h1 className="section-title">{section.sectionName}</h1>
{section.inputs.map((inputField) => (
<SectionInputBox
key={inputField.name}
isActive={isActive}
inputField={inputField}
getUserDetails={getUserDetails}
/>
))}
</div>
);
})}
<div className="edit-details-container">
{isActive && (
<div className="edit-details-save-changes">
<Button onClick={handleSaveChanges} size="medium" label="Save changes" />
<button className="edit-details" onClick={() => setActive(!isActive)}>
Cancel
</button>
</div>
)}
</div>
</div>
</div>
</div>
</>
);
};

export default Account;