diff --git a/package-lock.json b/package-lock.json index d628bd92..68cfbbb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "dotenv": "^16.3.1", "framer-motion": "^11.0.3", "js-cookie": "^3.0.5", + "lodash": "^4.17.21", "react": "^18.2.0", "react-calendar": "^4.8.0", "react-dom": "^18.2.0", @@ -13776,7 +13777,8 @@ }, "node_modules/lodash": { "version": "4.17.21", - "license": "MIT" + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.camelcase": { "version": "4.3.0", diff --git a/package.json b/package.json index 36e922cb..94304f07 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "dotenv": "^16.3.1", "framer-motion": "^11.0.3", "js-cookie": "^3.0.5", + "lodash": "^4.17.21", "react": "^18.2.0", "react-calendar": "^4.8.0", "react-dom": "^18.2.0", diff --git a/src/components/shared/buttons/globalbutton/Button.jsx b/src/components/shared/buttons/globalbutton/Button.jsx index 70b1632d..d16d9e3e 100644 --- a/src/components/shared/buttons/globalbutton/Button.jsx +++ b/src/components/shared/buttons/globalbutton/Button.jsx @@ -1,5 +1,4 @@ /* eslint-disable react/no-unknown-property */ -import React from "react"; import { Link } from "react-router-dom"; import { ClipLoader } from "react-spinners"; import styles from "./Button.module.css"; diff --git a/src/components/shared/profileCompletion/ProfileCompletion.jsx b/src/components/shared/profileCompletion/ProfileCompletion.jsx index 79274ca7..be287fca 100644 --- a/src/components/shared/profileCompletion/ProfileCompletion.jsx +++ b/src/components/shared/profileCompletion/ProfileCompletion.jsx @@ -1,142 +1,95 @@ /* eslint-disable no-unused-vars */ -import { useEffect, useState } from "react"; -import { useSelector } from "react-redux"; - +import { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; + +import { selectUser, updateUserData } from "@redux/slice/userSlice"; +import { UpdateUser } from "@service/MilanApi"; +import { useMutation } from "@tanstack/react-query"; +import { showErrorToast, showSuccessToast } from "@utils/Toasts"; +import _ from "lodash"; +import { Button } from ".."; import getProfileFields from "../../../utils/getProfileFields"; -import Button from "../buttons/globalbutton/Button"; import "./ProfileCompletion.scss"; -const ProfileCompletion = ({ editProfile }) => { - const [part, setPart] = useState(editProfile ? 2 : 1); - const [currentStep, setcurrentStep] = useState(2); - const [currentIndex, setcurrentIndex] = useState(0); - const [formData, setFormData] = useState({}); - const [errors, setErrors] = useState({}); - const user = useSelector((state) => state.user); - - useEffect(() => { - if (editProfile) { - setFormData(user); - } - }, [editProfile]); - - const fields = getProfileFields(user, editProfile); - - const totalfields = fields.length; - - const handleIncrementStep = () => { - if (currentStep + 2 <= totalfields) { - setcurrentIndex(currentIndex + 2); - setcurrentStep(currentStep + 2); - } - }; - - const handleDecrementStep = () => { - if (currentStep - 2 >= 2) { - setcurrentIndex(currentIndex - 2); - setcurrentStep(currentStep - 2); - } - }; +const ProfileCompletion = () => { + const [credentials, setCredentials] = useState({}); + const user = useSelector(selectUser); + const fields = getProfileFields(user); + const dispatch = useDispatch(); const handleChange = (e) => { - setFormData({ ...formData, [e.target.name]: e.target.value }); - setErrors({ ...errors, [e.target.name]: undefined }); + setCredentials({ + ...credentials, + [e.target.name]: e.target.value, + }); }; - const handleSubmit = async (e) => { - e.preventDefault(); - - // formData is an object - // lenght of an object - - // 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); - // mutate(clubEndpoints.details(user?.userName)); - // } - }; + const { mutate: handleUpdateDetails } = useMutation({ + mutationFn: UpdateUser, + onSuccess: (data) => { + dispatch(updateUserData(credentials)); + showSuccessToast(data?.message); + }, + onError: (error) => { + showErrorToast(error?.message); + }, + }); return (
- {part === 1 ? ( -

Choose Account Type

- ) : ( -

{editProfile ? "Edit Profile" : `We're almost done`}

- )} +

We're almost done

- {part === 1 ? ( -

Your Account Type is permanent and cannot be changed later.

- ) : !editProfile ? ( -

- Please complete your profile to enjoy the full benefits of the - platform. -

- ) : null} +

+ To make your Organization visible to others, please complete your + profile. +

- {/*
- {fields.slice(currentIndex, currentIndex + 2).map((elId) => { - const formElement = ProfileElements.find( - (element) => element.id === elId, - ); - - return ( -
- - {formElement?.id === "description" ? ( -