From 10dae9193c2fe6d8cbdeecdb593c8034e31b1ae9 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 23 Oct 2023 12:17:32 +0100
Subject: [PATCH] added family update component

---
 src/components/FamilyAcc/FamilyManageTabs.jsx |   2 +-
 src/components/FamilyAcc/FamilyTable.jsx      |   4 +-
 .../FamilyAcc/Tabs/FamilyProfile.jsx          | 201 +++++++++++++++++-
 src/services/UsersService.js                  |   3 +-
 4 files changed, 203 insertions(+), 7 deletions(-)

diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index e9e5832..63884ed 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -165,7 +165,7 @@ export default function FamilyManageTabs({
         handlePrint={useHandlePrint}
       />
     ),
-    Profile: <FamilyProfile />,
+    Profile: <FamilyProfile familyData={details.familyDetails.data} />,
   };
 
   // Default tab component
diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx
index b908a73..836e023 100644
--- a/src/components/FamilyAcc/FamilyTable.jsx
+++ b/src/components/FamilyAcc/FamilyTable.jsx
@@ -139,8 +139,8 @@ export default function FamilyTable({
                   </tr>
                 </thead>
                 <tbody className="h-full">
-                  {currentFamilyList?.map((familyMember) => {
-                    return <FamilyRow {...familyMember} />;
+                  {currentFamilyList?.map((familyMember, index) => {
+                    return <FamilyRow key={index} {...familyMember} />;
                   })}
                 </tbody>
               </table>
diff --git a/src/components/FamilyAcc/Tabs/FamilyProfile.jsx b/src/components/FamilyAcc/Tabs/FamilyProfile.jsx
index 79e318b..2f928b7 100644
--- a/src/components/FamilyAcc/Tabs/FamilyProfile.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyProfile.jsx
@@ -1,11 +1,206 @@
-export default function FamilyProfile({ className }) {
+import { useState } from "react";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import { useNavigate } from "react-router-dom";
+
+export default function FamilyProfile({familyData, className }) {
+  const navigate = useNavigate()
+  const api = new usersService()
+
+  let [requestStatus, setRequestStatus] = useState({loading:false, status:false, message: ''})
+
+  let [updateDetails, setUpdateDetails] = useState({
+    family_uid: familyData.uid,
+    firstname: familyData.firstname,
+    lastname: familyData.lastname,
+    year: familyData.year,
+    month: familyData.month,
+    action: 22020
+  })
+  
+  const handleChange = ({target:{name, value}})=>{
+    setUpdateDetails(prev => ({...prev, [name]:value}))
+  }
+
+  const updateFamily = () => {
+    setRequestStatus({loading:true, status:false, message: ''})
+    let {firstname, lastname, year, month} = updateDetails
+    if(!firstname || !lastname || !year || !month) {
+      setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
+      return setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message: ''})
+      }, 5000)
+    }
+    
+    api.getFamilyUpdate(updateDetails).then(res=>{
+      if(res.data.internal_return < 0){
+        return setRequestStatus({loading:false, status:false, message: 'Failed, try again!'})
+      }
+      setRequestStatus({loading:false, status:true, message: 'Family account updated'})
+      setTimeout(()=>{
+        navigate('/acc-family', {replace:true})
+      }, 5000)
+    }).catch(error => {
+      setRequestStatus({loading:false, status:false, message: 'Unable to update, try again!'})
+    }).finally(()=>{
+      setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message: ''})
+      }, 5000)
+    })
+  }
+
   return (
     <div
-      className={`update-table w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
+      className={`w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
         className || ""
       }`}
     >
-      <h1>Profile</h1>
+      <form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
+        <InputCom
+          placeholder="Firstname"
+          label="First Name:"
+          name="firstname"
+          type="text"
+          parentClass="flex items-center gap-1 w-full"
+          labelClass="flex-[0.2] mb-0"
+          inputClass="flex-[0.8] input-curve lg border border-[#dce4e9]"
+          fieldClass="px-2"
+          value={updateDetails?.firstname}
+          inputHandler={handleChange}
+        />
+        <InputCom
+          placeholder="Lastname"
+          label="Last Name:"
+          name="lastname"
+          type="text"
+          parentClass="flex items-center gap-1 w-full"
+          labelClass="flex-[0.2] mb-0"
+          inputClass="flex-[0.8] input-curve lg border border-[#dce4e9]"
+          fieldClass="px-2"
+          value={updateDetails?.lastname}
+          inputHandler={handleChange}
+        />
+        <div className="input-com mb-7 flex flex-col gap-1 w-full">
+          {/* Age dropdown */}
+          <div className="">
+            <label
+              className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+              htmlFor="age-selection"
+            >
+              Birthday: (Year/Month)
+            </label>
+          </div>
+          <YearMonthDropdowns
+            handleChange={handleChange}
+            selectedMonth={updateDetails.month}
+            selectedYear={updateDetails.year}
+          />
+        </div>
+        {requestStatus.message && (
+          <div className={`relative p-2 ${!requestStatus.status ? 'text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]' : 'text-green-700'} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}>
+            {requestStatus.message}
+          </div>
+        )}
+        <div className="flex justify-end w-full">
+          {requestStatus.loading ?
+            <>
+            <div className="signup btn-loader"></div>
+            <LoadingSpinner size='4' />
+            </>
+            :
+            <button
+            type="button"
+            onClick={updateFamily}
+            // className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+            className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
+            >
+             Update
+            </button>
+          }
+        </div>
+      </form>
     </div>
   );
 }
+
+
+
+
+function YearMonthDropdowns({
+  selectedYear,
+  selectedMonth,
+  handleChange
+}) {
+  // Get the current year
+  const currentYear = new Date().getFullYear();
+
+  // Generate an array of years from the current year to (currentYear - 19)
+  const years = Array.from({ length: 17 }, (_, index) => currentYear - index);
+
+  // Array of month names
+  // const months = [
+  //   "January",
+  //   "February",
+  //   "March",
+  //   "April",
+  //   "May",
+  //   "June",
+  //   "July",
+  //   "August",
+  //   "September",
+  //   "October",
+  //   "November",
+  //   "December",
+  // ];
+
+  const months = [
+    {id:'1', name:"January"},
+    {id:'2', name:"February"},
+    {id:'3', name:"March"},
+    {id:'4', name:"April"},
+    {id:'5', name:"May"},
+    {id:'6', name:"June"},
+    {id:'7', name:"July"},
+    {id:'8', name:"August"},
+    {id:'9', name:"September"},
+    {id:'10', name:"October"},
+    {id:'11', name:"November"},
+    {id:'12', name:"December"},
+  ];
+
+  return (
+    <div className="flex max-w-[330px] w-full self-end gap-4">
+      <select
+        name='year'
+        id="yearDropdown"
+        value={selectedYear}
+        onChange={handleChange}
+        className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
+      >
+        <option value="">Select a Year</option>
+        {years.map((year) => (
+          <option key={year} value={year}>
+            {year}
+          </option>
+        ))}
+      </select>
+
+      <select
+        name='month'
+        id="monthDropdown"
+        value={(months.filter(month => month.id == selectedMonth)[0].id)}
+        onChange={handleChange}
+        className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
+      >
+        <option value="">Select a Month</option>
+        {months.map(({id, name}) => (
+          <option key={id} value={id}>
+            {name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index 1cf3f75..e1670fd 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -578,13 +578,14 @@ class usersService {
     return this.postAuxEnd("/familyadd", postData);
   }
 
-  getFamilyUpdate() {
+  getFamilyUpdate(reqdata) {
     var postData = {
       uuid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       page: 0,
       limit: 100,
+      ...reqdata
     };
     return this.postAuxEnd("/familyupdate", postData);
   }