Merge pull request #43 from chingu-voyages/feature/local-storage

data from local storage rendered on the last step page of initial stages
chingu-voyages · Oct 9, 2024 · 7a7d981 · 7a7d981
2 parents 42040ce + cbda6f7
commit 7a7d981
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 15 deletions.
diff --git a/src/components/forms/ExpenseForm.jsx b/src/components/forms/ExpenseForm.jsx
@@ -98,7 +98,7 @@ export function ExpenseForm({ onSubmit, actions, className, date, setDate }) {
           <SelectContent>
             <SelectGroup>
               {CONTRIBUTION_WEIGHTS.map((weight) => (
-                <SelectItem key={weight} value={weight}>
+                <SelectItem key={weight} value={weight.toString()}>
                   {`${weight}%`}
                 </SelectItem>
               ))}

diff --git a/src/components/forms/ParticipantForm.jsx b/src/components/forms/ParticipantForm.jsx
@@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
 import PropTypes from "prop-types";
 import { cn } from "@/lib/utils";
 import { SelectedParticipantsList } from "../SelectedParticipantsList";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useLocalStorage } from "@uidotdev/usehooks";
 
@@ -25,8 +25,9 @@ export function ParticipantForm({
   showParticipantsPreview = true,
   className,
 }) {
-
   const [participants, setParticipants] = useState([])
+
+
   const [formData, setFormData] = useState({
       id: uuidv4(),
       firstName: "",
@@ -52,11 +53,22 @@ export function ParticipantForm({
         firstName: "",
         lastName: "",
         avatarUrl:"#",
-        balance: Number(0)
-        // weight: Number("")
+        balance: Number(0),
+        weight: Number("")
       })
 
+
       localStorage.setItem("participantsData", JSON.stringify(updatedParticipants))
+      const currentGroupId = JSON.parse(localStorage.getItem("currentGroup"));
+      const groupsData = JSON.parse(localStorage.getItem("groupsData"))
+
+      for(let i=0; i<groupsData.length; i++){
+        if(currentGroupId == groupsData[i].id){
+          const updatedParticipantIds = groupsData[i].participantIds ? [...groupsData[i].participantIds, formData.id] : [formData.id]
+          groupsData[i].participantIds = updatedParticipantIds;
+        }
+      }
+      localStorage.setItem("groupsData", JSON.stringify(groupsData));
     }
 
   return (
@@ -71,7 +83,7 @@ export function ParticipantForm({
       </Label>
       <Label>
         <span className="sr-only">Select the contribution weight</span>
-        <Select name="contribution">
+        <Select name="contribution" onChange={handleInputChange} value={formData.weight}>
           <SelectTrigger>
             <div className="flex items-center gap-4">
               <Percent className="size-4" />
@@ -81,7 +93,7 @@ export function ParticipantForm({
           <SelectContent>
             <SelectGroup>
               {CONTRIBUTION_WEIGHTS.map((weight) => (
-                <SelectItem key={weight} value={weight}>
+                <SelectItem key={weight} value={weight.toString()}>
                   {`${weight}%`}
                 </SelectItem>
               ))}

diff --git a/src/pages/FirstGroupPage/components/LastStep.jsx b/src/pages/FirstGroupPage/components/LastStep.jsx
@@ -5,11 +5,53 @@ import { EXPENSES_MOCK_DATA, PARTICIPANTS_MOCK_DATA } from "@/lib/mock-data"
 import { ExpensesList } from "@/components/ExpensesList"
 import { GroupInfoWidget } from "@/components/GroupInfoWidget"
 import { SelectedParticipantsList } from "@/components/SelectedParticipantsList"
+import { useEffect, useState } from "react"
 
 export function LastStep() {
   const { useStepper } = useFirstGroupPageContext()
   const stepper = useStepper()
 
+  const [group, setGroup] = useState(null);
+  const [participants, setParticipants] = useState([]);
+  const [expenses, setExpenses] = useState([]);
+
+  function getGroup() {
+    const groupsData = JSON.parse(localStorage.getItem("groupsData"));
+    const currentGroupId = JSON.parse(localStorage.getItem("currentGroup"));
+
+    const currentGroup = groupsData.find((group) => group.id === currentGroupId);
+
+    setGroup(currentGroup)
+  }
+
+  function getParticipants(){
+    if(!group) return;
+
+    const participantsData = JSON.parse(localStorage.getItem("participantsData")) || [];
+    const participantIds = group.participantIds || [];
+
+    const matchedParticipants = participantsData.filter((participant) => {
+      return participantIds.includes(participant.id)
+    })
+
+    setParticipants(matchedParticipants);
+  }
+
+  function getExpenses(){
+
+  }
+
+  useEffect(() => {
+    getGroup();
+
+  }, [])
+
+  useEffect(() => {
+    if (group) {
+      getParticipants();
+    }
+  }, [group]);
+
   return (
     <div className="space-y-10 md:space-y-12">
       <div>
@@ -21,17 +63,23 @@ export function LastStep() {
         </BodyText>
       </div>
 
-      <GroupInfoWidget
-        groupInfo={{
-          groupName: "Bali Trip",
-          description: "Lorem ipsum dolor sit amet consectetur.",
-          amount: 5000,
-        }}
-      />
+      {group ? (
+        <GroupInfoWidget
+          groupInfo={{
+            groupName: group.name,
+            description: group.description,
+            amount: group.totalBudget,
+          }}
+        />
+
+      ) : (
+        <p>Loading data....</p>
+      )}
+
 
       <section>
         <Heading tag="h3">Participants</Heading>
-        <SelectedParticipantsList participants={PARTICIPANTS_MOCK_DATA} />
+        <SelectedParticipantsList participants={participants} />
       </section>
 
       {EXPENSES_MOCK_DATA ? (