review page for add details

calblueprint · Dec 22, 2024 · d6e07dd · d6e07dd
1 parent acdcf84
commit d6e07dd
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 31 deletions.
diff --git a/app/add-details/page.tsx b/app/add-details/page.tsx
@@ -2,15 +2,23 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { UUID } from 'crypto';
 import { insertUserPlants } from '@/api/supabase/queries/userPlants';
 import PlantDetails from '@/components/PlantDetails';
+import ReviewAddDetails from '@/components/ReviewAddDetails';
 import COLORS from '@/styles/colors';
 import { Flex } from '@/styles/containers';
 import { H1, P1 } from '@/styles/text';
 import { UserPlant } from '@/types/schema';
 import { useAuth } from '@/utils/AuthProvider';
 import { useProfile } from '@/utils/ProfileProvider';
-import { ButtonDiv, FooterButton, MoveButton } from './styles';
+import {
+  ButtonDiv,
+  FooterButton,
+  MoveButton,
+  PageContainer,
+  ReviewHeader,
+} from './styles';
 
 export default function Home() {
   const { profileData, profileReady, plantsToAdd } = useProfile();
@@ -21,23 +29,38 @@ export default function Home() {
     router.push('/view-plants');
   }
   const [currentIndex, setCurrentIndex] = useState<number>(1);
-  const [details, setDetails] = useState<Partial<UserPlant>[]>(
-    plantsToAdd.map(plant => ({ plant_id: plant.id, user_id: userId! })),
+  const [details, setDetails] = useState<Record<string, Partial<UserPlant>>>(
+    plantsToAdd.reduce(
+      (acc, plant) => ({
+        ...acc,
+        [plant.id]: { plant_id: plant.id, user_id: userId! },
+      }),
+      {},
+    ),
   );
 
+  const plantDictionary: Record<UUID, string> = {};
+  for (const plant of plantsToAdd) {
+    plantDictionary[plant.id] = plant.plant_name;
+  }
+
   const getDefaultDate = () => new Date().toISOString().substring(0, 10);
 
   // Navigate between plants and save input data
   function move(steps: number) {
-    const currentDetail = details[currentIndex - 1];
-
     // Set curr date in details to default date if not on submission page
-    if (
-      (!currentDetail || !currentDetail.date_added) &&
-      currentIndex <= plantsToAdd.length
-    ) {
-      updateInput('date_added', getDefaultDate());
+
+    if (currentIndex <= plantsToAdd.length) {
+      const currentDetail = details[plantsToAdd[currentIndex - 1].id];
+      if (!currentDetail || !currentDetail.date_added) {
+        updateInput(
+          'date_added',
+          getDefaultDate(),
+          plantsToAdd[currentIndex - 1].id,
+        );
+      }
     }
+
     // For valid moves, move to next page
     if (
       steps !== 0 &&
@@ -51,21 +74,22 @@ export default function Home() {
   // disable next if planting type not selected (undefined)
   const disableNext =
     currentIndex <= plantsToAdd.length &&
-    !details[currentIndex - 1].planting_type;
+    !details[plantsToAdd[currentIndex - 1].id].planting_type;
 
-  function updateInput(field: string, value: string) {
-    const updatedDetails = [...details];
-    updatedDetails[currentIndex - 1] = {
-      ...updatedDetails[currentIndex - 1],
-      [field]: value,
-    };
-    setDetails(updatedDetails);
+  function updateInput(field: string, value: string, plant_id: UUID) {
+    setDetails(prevDetails => ({
+      ...prevDetails,
+      [plant_id]: {
+        ...prevDetails[plant_id],
+        [field]: value,
+      },
+    }));
   }
   const handleSubmit = async () => {
     // TODO: elegantly handle not logged in case (e.g. when someonee clicks "Back")
     // instead of doing userId!
     try {
-      await insertUserPlants(userId!, details);
+      await insertUserPlants(userId!, Object.values(details));
       router.push('/view-plants');
     } catch (error) {
       console.error('Error inserting user plants:', error);
@@ -85,10 +109,27 @@ export default function Home() {
             </Flex>
             <PlantDetails
               plant={plantsToAdd[currentIndex - 1]}
-              date={details[currentIndex - 1].date_added ?? getDefaultDate()}
-              plantingType={details[currentIndex - 1].planting_type ?? ''}
-              onDateChange={date => updateInput('date_added', date)}
-              onPlantingTypeChange={type => updateInput('planting_type', type)}
+              date={
+                details[plantsToAdd[currentIndex - 1].id].date_added ??
+                getDefaultDate()
+              }
+              plantingType={
+                details[plantsToAdd[currentIndex - 1].id].planting_type ?? ''
+              }
+              onDateChange={date =>
+                updateInput(
+                  'date_added',
+                  date,
+                  plantsToAdd[currentIndex - 1].id,
+                )
+              }
+              onPlantingTypeChange={type =>
+                updateInput(
+                  'planting_type',
+                  type,
+                  plantsToAdd[currentIndex - 1].id,
+                )
+              }
             />
           </Flex>
           <FooterButton>
@@ -117,14 +158,32 @@ export default function Home() {
         </Flex>
       )}
       {currentIndex === plantsToAdd.length + 1 && (
-        <div>
-          <button type="button" onClick={() => move(-1)}>
-            Back
-          </button>
-          <button type="button" onClick={handleSubmit}>
-            Submit
-          </button>
-        </div>
+        <PageContainer>
+          <ReviewHeader>Review & Submit</ReviewHeader>
+
+          <ReviewAddDetails
+            details={details}
+            updateInput={updateInput}
+            plantDictionary={plantDictionary}
+          ></ReviewAddDetails>
+          <Flex $direction="row" $justify="between" $w="500px" $mt="24px">
+            <MoveButton
+              type="button"
+              onClick={() => move(-1)}
+              $secondaryColor={COLORS.shrub}
+            >
+              Back
+            </MoveButton>
+            <MoveButton
+              type="button"
+              onClick={handleSubmit}
+              $primaryColor={disableNext ? COLORS.midgray : COLORS.shrub}
+              $secondaryColor="white"
+            >
+              Submit
+            </MoveButton>
+          </Flex>
+        </PageContainer>
       )}
     </>
   );

diff --git a/app/add-details/styles.ts b/app/add-details/styles.ts
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 import { SmallRoundedButton } from '@/components/Button';
+import COLORS from '@/styles/colors';
+import { H3 } from '../onboarding/styles';
 
 export const MoveButton = styled(SmallRoundedButton)`
   border: 1px solid;
@@ -32,3 +34,20 @@ export const ButtonDiv = styled.div`
     justify-content: flex-end;
   }
 `;
+
+export const PageContainer = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  background-color: ${COLORS.seed};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+`;
+
+export const ReviewHeader = styled(H3)`
+  text-align: center;
+  color: ${COLORS.shrub};
+  margin-bottom: 40px;
+`;
diff --git a/components/ReviewAddDetails/index.tsx b/components/ReviewAddDetails/index.tsx
@@ -0,0 +1,48 @@
+import { UUID } from 'crypto';
+import COLORS from '@/styles/colors';
+import { Flex } from '@/styles/containers';
+import { P1 } from '@/styles/text';
+import { DropdownOption, PlantingTypeEnum, UserPlant } from '@/types/schema';
+import CustomSelect from '../CustomSelect';
+import DateInput from '../DateInput';
+import { ReviewContainer } from './styles';
+
+export default function ReviewAddDetails({
+  details,
+  updateInput,
+  plantDictionary,
+}: {
+  details: Record<string, Partial<UserPlant>>;
+  updateInput: (field: string, value: string, plant_id: UUID) => void;
+  plantDictionary: Record<UUID, string>;
+}) {
+  const plantingTypeOptions: DropdownOption<PlantingTypeEnum>[] = [
+    { value: 'TRANSPLANT', label: 'Transplant' },
+    { value: 'INDOORS', label: 'Indoors' },
+    { value: 'OUTDOORS', label: 'Outdoors' },
+  ];
+
+  return (
+    <ReviewContainer>
+      {Object.entries(details).map(([plant_id, detail]) => (
+        <Flex $direction="column" $gap="8px" $mb="16px" key={plant_id}>
+          <P1 $color={COLORS.shrub}>{plantDictionary[plant_id as UUID]}</P1>
+          <CustomSelect
+            label="Planting Type"
+            value={detail.planting_type as string}
+            options={plantingTypeOptions}
+            onChange={value =>
+              updateInput('planting_type', value, plant_id as UUID)
+            }
+          />
+          <DateInput
+            value={detail.date_added as string}
+            onChange={value =>
+              updateInput('date_added', value, plant_id as UUID)
+            }
+          />
+        </Flex>
+      ))}
+    </ReviewContainer>
+  );
+}
diff --git a/components/ReviewAddDetails/styles.ts b/components/ReviewAddDetails/styles.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const ReviewContainer = styled.div`
+  width: 100%;
+  max-width: 500px;
+  background-color: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  justify-content: center;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+`;