Skip to content

Commit

Permalink
fix: optimizations
Browse files Browse the repository at this point in the history
  • Loading branch information
@tamalCodes
tamalCodes committed Feb 15, 2024
1 parent 442d17e commit ad3e054
Show file tree
Hide file tree
Showing 10 changed files with 239 additions and 270 deletions.
193 changes: 45 additions & 148 deletions src/components/shared/profileCompletion/ProfileCompletion.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import Cookies from "js-cookie";
import React, { useEffect, useState } from "react";
import { IoMdCloseCircleOutline } from "react-icons/io";
import { useDispatch, useSelector } from "react-redux";
import { ProfileCompletionDetails } from "../../../constants";

import { ProfileElements } from "../../../constants";
import { updateUserData } from "../../../redux/slice/userSlice";
import { UpdateUser } from "../../../service/MilanApi";
import { showErrorToast, showSuccessToast } from "../../../utils/Toasts";
import getProfileFields from "../../../utils/getProfileFields";
import Button from "../buttons/globalbutton/Button";
import "./ProfileCompletion.scss";

Expand All @@ -14,96 +16,34 @@ const ProfileCompletion = ({
editProfile,
seteditProfile,
}) => {
const [missingElements, setMissingElements] = useState([]);
const [currentStep, setcurrentStep] = useState(0);
const [currentStep, setcurrentStep] = useState(2);
const [currentIndex, setcurrentIndex] = useState(0);
const [formData, setFormData] = useState({});
const [errors, setErrors] = useState({});
const info = useSelector((state) => state.user);
const dispatch = useDispatch();

useEffect(() => {
calculateMissingElements();
if (editProfile) {
setFormData(info);
}
}, [info]);

const calculateMissingElements = () => {
const missing = [];
if (!info.tagLine) missing.push("tagLine");
if (!info.description) missing.push("description");
if (!info.city) missing.push("city");
if (!info.state) missing.push("state");
if (!info.address) missing.push("address");
if (!info.country) missing.push("country");
if (!info.pincode) missing.push("pincode");

setMissingElements(missing);
};

const editProfileFields = [
"name",
"tagLine",
"description",
"city",
"state",
"address",
"country",
"pincode",
];

const calculateTotalSteps = () => {
if (editProfile) {
if (editProfileFields.length % 2 === 0) {
return Math.ceil(editProfileFields.length / 2);
} else {
return Math.ceil(editProfileFields.length / 2) + 1;
}
} else {
if (missingElements.length % 2 === 0) {
return Math.ceil(missingElements.length / 2);
} else {
return Math.ceil(missingElements.length / 2) + 1;
}
}
};

const validateFields = () => {
let stepErrors = {};
}, []);

const currentMissingElements = missingElements.slice(
currentStep,
currentStep + 2,
);

const formElementstoBeValidated = ProfileCompletionDetails.elements.filter(
(element) => currentMissingElements.includes(element.id),
);

formElementstoBeValidated.forEach((element) => {
if (
!formData[element.id] ||
element.minimumLength > formData[element.id]?.length
) {
stepErrors[element.id] = element.errorMessage;
}
});

setErrors(stepErrors);
return Object.keys(stepErrors).length === 0;
};
const fields = getProfileFields(info, editProfile);
const totalfields = fields.length;

const handleIncrementStep = () => {
if (editProfile) {
if (currentStep < calculateTotalSteps()) setcurrentStep(currentStep + 2);
} else {
if (validateFields() && currentStep < calculateTotalSteps())
setcurrentStep(currentStep + 2);
if (currentStep + 2 <= totalfields) {
setcurrentIndex(currentIndex + 2);
setcurrentStep(currentStep + 2);
}
};

const handleDecrementStep = () => {
if (currentStep - 2 >= 0) setcurrentStep(currentStep - 2);
if (currentStep - 2 >= 2) {
setcurrentIndex(currentIndex - 2);
setcurrentStep(currentStep - 2);
}
};

const handleChange = (e) => {
Expand All @@ -113,24 +53,18 @@ const ProfileCompletion = ({

const handleSubmit = async (e) => {
e.preventDefault();
if (validateFields()) {
const response = await UpdateUser(formData);
if (response?.status !== 200) {
showErrorToast(response?.data?.message);
} else {
dispatch(updateUserData(formData));
setFormData({});
setShowProfileModal(false);
seteditProfile(false);
showSuccessToast(response?.data?.message);
}
const response = await UpdateUser(formData);
if (response?.status !== 200) {
showErrorToast(response?.data?.message);
} else {
dispatch(updateUserData(formData));
setFormData({});
setShowProfileModal(false);
seteditProfile(false);
showSuccessToast(response?.data?.message);
}
};

const maxSteps = editProfile
? editProfileFields.length
: missingElements.length;

return (
<div className="profilecompletion_overlay">
<div className="profilecompletion_modal">
Expand All @@ -154,73 +88,36 @@ const ProfileCompletion = ({
</div>

<form>
{editProfile
? editProfileFields
.slice(currentStep, currentStep + 2)
.map((elId) => {
const formElement = ProfileCompletionDetails.elements.find(
(element) => element.id === elId,
);
console.log("🚀 ~ .map ~ formElement:", formElement);

return (
<div
className="profilecompletion_element"
key={formElement.id}
>
<label>{formElement?.label}</label>
<input
type={formElement?.type}
name={formElement?.id}
value={formData[formElement?.id] || ""}
onChange={handleChange}
className="auth_input"
placeholder={formElement?.placeholder}
/>
{errors[formElement?.id] && (
<p>{errors[formElement?.id]}</p>
)}
</div>
);
})
: missingElements
.slice(currentStep, currentStep + 2)
.map((elId) => {
const formElement = ProfileCompletionDetails.elements.find(
(element) => element.id === elId,
);

return (
<div
className="profilecompletion_element"
key={formElement.id}
>
<label>{formElement?.label}</label>
<input
type={formElement?.type}
name={formElement?.id}
value={formData[formElement?.id] || ""}
onChange={handleChange}
className="auth_input"
placeholder={formElement?.placeholder}
/>
{errors[formElement?.id] && (
<p>{errors[formElement?.id]}</p>
)}
</div>
);
})}
{fields.slice(currentIndex, currentIndex + 2).map((elId) => {
const formElement = ProfileElements.find(
(element) => element.id === elId,
);

return (
<div className="profilecompletion_element" key={formElement.id}>
<label>{formElement?.label}</label>
<input
type={formElement?.type}
name={formElement?.id}
value={formData[formElement?.id] || ""}
onChange={handleChange}
className="auth_input"
placeholder={formElement?.placeholder}
/>
</div>
);
})}
</form>

<div className="profilecompletion_btndiv">
<Button
variant="solid"
disabled={currentStep === 2}
onClickfunction={handleDecrementStep}
disabled={currentStep === 0}
>
Previous
</Button>
{currentStep + 2 >= maxSteps ? (
{currentStep == totalfields ? (
<Button variant="solid" onClickfunction={handleSubmit}>
Finish
</Button>
Expand Down
93 changes: 0 additions & 93 deletions src/constants/ProfileCompletionDetails.js
View file

This file was deleted.

Loading

0 comments on commit ad3e054

Please sign in to comment.