From 349b5241511b5dedcb3b094bad964cbf17677c63 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Mon, 25 Sep 2023 07:30:50 +0100
Subject: [PATCH 1/2] Added two select elements for year and month
 respectively.

---
 src/components/FamilyAcc/index.jsx | 161 ++++++++++++++++++++---------
 1 file changed, 111 insertions(+), 50 deletions(-)

diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx
index 390648e..d8c9eaf 100644
--- a/src/components/FamilyAcc/index.jsx
+++ b/src/components/FamilyAcc/index.jsx
@@ -14,7 +14,9 @@ import FamilyTable from "./FamilyTable";
 
 export default function FamilyAcc() {
   const [selectTab, setValue] = useState("today");
-  const [selectedAge, setSelectedAge] = useState(undefined);
+  // State to store the selected year and month
+  const [selectedYear, setSelectedYear] = useState("");
+  const [selectedMonth, setSelectedMonth] = useState("");
   const [familyList, setFamilyList] = useState([]);
   const [loader, setLoader] = useState(false);
   const [popUp, setPopUp] = useState(false);
@@ -35,17 +37,14 @@ export default function FamilyAcc() {
     setValue(value);
   };
 
-  const ageRange = useMemo(() => {
-    const startAge = 5;
-    const endAge = 16;
-    return Array.from(
-      { length: endAge - startAge + 1 },
-      (_, index) => startAge + index
-    );
-  }, []);
+  // Handle year selection
+  const handleYearChange = (e) => {
+    setSelectedYear(e.target.value);
+  };
 
-  const handleAgeSelect = (event) => {
-    setSelectedAge(parseInt(event.target.value));
+  // Handle month selection
+  const handleMonthChange = (e) => {
+    setSelectedMonth(e.target.value);
   };
 
   const handleInputChange = (event) => {
@@ -53,6 +52,13 @@ export default function FamilyAcc() {
     setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
   };
 
+  // use the useEffect hook to clear the selected month if the year changes (to ensure consistency)
+  useEffect(() => {
+    if (selectedYear === "" && selectedMonth !== "") {
+      setSelectedMonth("");
+    }
+  }, [selectedYear]);
+
   const addMember = async () => {
     const { first_name, last_name } = formData;
     setLoader(true);
@@ -61,7 +67,8 @@ export default function FamilyAcc() {
         const reqData = {
           firstname: first_name,
           lastname: last_name,
-          age: selectedAge,
+          year: +selectedYear,
+          month: +selectedMonth,
         };
 
         const res = await apiCall.addFamily(reqData);
@@ -91,7 +98,8 @@ export default function FamilyAcc() {
         first_name: "",
         last_name: "",
       });
-      setSelectedAge("");
+      setSelectedMonth("");
+      setSelectedYear("");
     }
   };
 
@@ -129,8 +137,6 @@ export default function FamilyAcc() {
     };
   }, [listReload, memberList]);
 
-  console.log("Family List ====>", familyList.length);
-
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -145,16 +151,16 @@ export default function FamilyAcc() {
                 >
                   Family Accounts
                 </span>
-                {(familyList.length <
-                  process.env.REACT_APP_MAX_FAMILY_MEMBERS && !loader) && (
-                  <button
-                    onClick={popUpHandler}
-                    type="button"
-                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
-                  >
-                    Add
-                  </button>
-                )}
+                {familyList.length < process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
+                  !loader && (
+                    <button
+                      onClick={popUpHandler}
+                      type="button"
+                      className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                    >
+                      Add
+                    </button>
+                  )}
               </h1>
             </div>
             <div className="slider-btns flex space-x-4">
@@ -178,9 +184,10 @@ export default function FamilyAcc() {
           <FamilyForm
             popUpHandler={popUpHandler}
             value={formData}
-            ageHandler={handleAgeSelect}
-            ageRange={ageRange}
-            ageValue={selectedAge}
+            selectedYear={selectedYear}
+            selectedMonth={selectedMonth}
+            monthHandler={handleMonthChange}
+            yearHandler={handleYearChange}
             inputHandler={handleInputChange}
             msgErr={msgErr}
             onClick={addMember}
@@ -196,8 +203,10 @@ const FamilyForm = ({
   value: { first_name, last_name },
   ageValue,
   inputHandler,
-  ageHandler,
-  ageRange,
+  selectedMonth,
+  selectedYear,
+  monthHandler,
+  yearHandler,
   msgErr,
   loader,
   onClick,
@@ -242,33 +251,22 @@ const FamilyForm = ({
           value={last_name}
           inputHandler={inputHandler}
         />
-        <div className="input-com mb-7 flex gap-1 items-center w-full justify-between">
+        <div className="input-com mb-7 flex flex-col gap-1 w-full">
           {/* Age dropdown */}
-          <div className="flex items-center justify-between flex-[0.3]">
+          <div className="">
             <label
               className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
               htmlFor="age-selection"
             >
-              Select your age:
+              Birthday: (Year/Month)
             </label>
           </div>
-          <div className=" flex-[0.7] max-w-[150px]">
-            <select
-              name="age-selection"
-              id="age-selection"
-              className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[35px] h-[42px] 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"
-              onChange={ageHandler}
-              value={ageValue}
-            >
-              <option value={""}>Select age</option>
-              {ageRange?.length > 0 &&
-                ageRange?.map((age) => (
-                  <option value={age} key={age}>
-                    {age}
-                  </option>
-                ))}
-            </select>
-          </div>
+          <YearMonthDropdowns
+            handleMonthChange={monthHandler}
+            handleYearChange={yearHandler}
+            selectedMonth={selectedMonth}
+            selectedYear={selectedYear}
+          />
         </div>
         {msgErr && (
           <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-xs font-light leading-[19.5px]">
@@ -317,3 +315,66 @@ const CloseIcon = () => (
     />
   </svg>
 );
+
+function YearMonthDropdowns({
+  selectedMonth,
+  selectedYear,
+  handleMonthChange,
+  handleYearChange,
+}) {
+  // 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: 20 }, (_, index) => currentYear - index);
+
+  // Array of month names
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  return (
+    <div className="flex max-w-[330px] w-full self-end gap-4">
+      <select
+        id="yearDropdown"
+        value={selectedYear}
+        onChange={handleYearChange}
+        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"
+        // size="5"
+      >
+        <option value="">Select a Year</option>
+        {years.map((year) => (
+          <option key={year} value={year}>
+            {year}
+          </option>
+        ))}
+      </select>
+
+      <select
+        id="monthDropdown"
+        value={selectedMonth}
+        onChange={handleMonthChange}
+        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"
+        // size="5"
+      >
+        <option value="">Select a Month</option>
+        {months.map((month, index) => (
+          <option key={month} value={index + 1}>
+            {month}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

From 89a9e77380d98ca7f4ea3757dbf705fbb53f7136 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Mon, 25 Sep 2023 07:39:08 +0100
Subject: [PATCH 2/2] reduced the year length to 17

---
 src/components/FamilyAcc/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx
index d8c9eaf..c398e13 100644
--- a/src/components/FamilyAcc/index.jsx
+++ b/src/components/FamilyAcc/index.jsx
@@ -326,7 +326,7 @@ function YearMonthDropdowns({
   const currentYear = new Date().getFullYear();
 
   // Generate an array of years from the current year to (currentYear - 19)
-  const years = Array.from({ length: 20 }, (_, index) => currentYear - index);
+  const years = Array.from({ length: 17 }, (_, index) => currentYear - index);
 
   // Array of month names
   const months = [