conditional rendering in timeline

avantifellows · Dec 4, 2023 · bce2b16 · bce2b16
1 parent bc9278c
commit bce2b16
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 39 deletions.
diff --git a/src/components/Steps/Form/SelectField.tsx b/src/components/Steps/Form/SelectField.tsx
@@ -1,12 +1,12 @@
 import styles from "@/styles/Home.module.css";
-import { MyForm, MyFormKey } from "@/types/FormTypes";
+import { QuizCreatorForm, QuizCreatorFormKey } from "@/types/FormTypes";
 import { OptionType } from "@/types/types";
 import { Control, Controller } from "react-hook-form";
 import Select from "react-select";
 interface SelectFieldProps {
-  control: Control<MyForm, any>;
+  control: Control<QuizCreatorForm, any>;
   options: OptionType[];
-  name_: MyFormKey;
+  name_: QuizCreatorFormKey;
   placeholder?: string;
 }
 

diff --git a/src/components/Steps/StudentDetails.tsx b/src/components/Steps/StudentDetails.tsx
@@ -1,6 +1,6 @@
 import { Step } from "@/pages/SessionCreator";
 import styles from "@/styles/Home.module.css";
-import { MyForm } from "@/types/FormTypes";
+import { QuizCreatorForm } from "@/types/FormTypes";
 import { ActiveFormProps } from "@/types/types";
 import { SubmitHandler, useForm } from "react-hook-form";
 import {
@@ -17,11 +17,11 @@ export default function StudentDetails({
   setActiveStep,
   setData,
 }: ActiveFormProps) {
-  const { register, handleSubmit, control } = useForm<MyForm>({
+  const { register, handleSubmit, control } = useForm<QuizCreatorForm>({
     defaultValues: { ...data.student },
   });
 
-  const onSubmit: SubmitHandler<MyForm> = (student) => {
+  const onSubmit: SubmitHandler<QuizCreatorForm> = (student) => {
     setData((prevData) => ({ ...prevData, student }));
 
     setActiveStep(Step.TEST_DETAILS);

diff --git a/src/components/Steps/TestDetails.tsx b/src/components/Steps/TestDetails.tsx
@@ -1,7 +1,7 @@
 import styles from "../../styles/Home.module.css";
 
 import { Step } from "@/pages/SessionCreator";
-import { MyForm } from "@/types/FormTypes";
+import { QuizCreatorForm } from "@/types/FormTypes";
 import { ActiveFormProps } from "@/types/types";
 import { SubmitHandler, useForm } from "react-hook-form";
 import {
@@ -17,11 +17,11 @@ import SelectField from "./Form/SelectField";
 // Renders sub-page containing test details
 
 export function TestDetails({ data, setActiveStep, setData }: ActiveFormProps) {
-  const { register, handleSubmit, control } = useForm<MyForm>({
+  const { register, handleSubmit, control } = useForm<QuizCreatorForm>({
     defaultValues: { ...data.test },
   });
 
-  const onSubmit: SubmitHandler<MyForm> = (test) => {
+  const onSubmit: SubmitHandler<QuizCreatorForm> = (test) => {
     setData((prevData) => ({ ...prevData, test }));
 
     setActiveStep(Step.TIMELINE);
@@ -75,7 +75,7 @@ export function TestDetails({ data, setActiveStep, setData }: ActiveFormProps) {
             options={OptionalLimitOptions}
             placeholder="Optional Limit"
           />
-          {/* TODO: ADD more conditions realated to generated data */}
+
           {data.test.id ? (
             <>
               <input

diff --git a/src/components/Steps/Timeline.tsx b/src/components/Steps/Timeline.tsx
@@ -1,5 +1,5 @@
 import { Step } from "@/pages/SessionCreator";
-import { MyForm } from "@/types/FormTypes";
+import { QuizCreatorForm } from "@/types/FormTypes";
 import { ActiveFormProps } from "@/types/types";
 import { useEffect, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
@@ -19,7 +19,7 @@ export default function Timeline({
   isSessionAdded,
 }: ActiveFormProps) {
   const [shouldSubmit, setShouldSubmit] = useState(false);
-  const { register, handleSubmit, control, reset } = useForm<MyForm>({
+  const { register, handleSubmit, control, reset } = useForm<QuizCreatorForm>({
     defaultValues: { ...data.timeline },
   });
 
@@ -28,7 +28,7 @@ export default function Timeline({
     reset();
   }, [shouldSubmit, data]);
 
-  const onSubmit: SubmitHandler<MyForm> = (timeline) => {
+  const onSubmit: SubmitHandler<QuizCreatorForm> = (timeline) => {
     setData((prevData) => ({ ...prevData, timeline }));
 
     setShouldSubmit(true);
@@ -88,26 +88,32 @@ export default function Timeline({
           name_="sessionType"
           options={SessionTypeOptions}
         />
-        <SelectField
-          control={control}
-          name_="synced"
-          options={HasSyncedOptions}
-        />
-        {/*
+        {data.timeline.id ? (
+          <>
+            <SelectField
+              control={control}
+              name_="synced"
+              options={HasSyncedOptions}
+            />
+            {/*
         // TODO: same as test details render acc to need
          */}
-        <input
-          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded block w-full p-2.5 mt-10"
-          placeholder="Repeat Schedule"
-          required
-          {...register("repeatSchedule")}
-        />
-        <input
-          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded block w-full p-2.5 mt-10"
-          placeholder="Report Link"
-          required
-          {...register("reportLink")}
-        />
+            <input
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded block w-full p-2.5 mt-10"
+              placeholder="Repeat Schedule"
+              required
+              {...register("repeatSchedule")}
+            />
+            <input
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded block w-full p-2.5 mt-10"
+              placeholder="Report Link"
+              required
+              {...register("reportLink")}
+            />
+          </>
+        ) : (
+          <></>
+        )}
         <div className="w-full flex justify-between">
           <button
             className="rounded-lg sm:w-44 w-10 text-xs h-8 bg-[#B52326] text-white sm:h-11 mt-10"

diff --git a/src/types/FormTypes.ts b/src/types/FormTypes.ts
@@ -44,16 +44,16 @@ type SessionType = {
   pop_up_form: boolean | null;
 };
 
-type MyForm = StudentForm | TestForm | TimelineForm | SessionType;
-type MyFormKey =
+type QuizCreatorForm = StudentForm | TestForm | TimelineForm | SessionType;
+type QuizCreatorFormKey =
   | keyof StudentForm
   | keyof TestForm
   | keyof TimelineForm
   | keyof SessionType;
 
 export type {
-  MyForm,
-  MyFormKey,
+  QuizCreatorForm,
+  QuizCreatorFormKey,
   StudentForm,
   TestForm,
   TimelineForm,

diff --git a/src/utils/FormInputHandling.ts b/src/utils/FormInputHandling.ts
@@ -20,23 +20,20 @@ function formatDateTime(date: string, time: string) {
   const [hour, minute] = time.split(":").map(Number);
 
   const combinedDate = new Date(year, month - 1, day, hour, minute);
-  console.log(combinedDate);
 
   return combinedDate;
 }
 // post data to the server
 async function postFormData(formData: RowType) {
   const { student, test, timeline, dateCreated, session } = formData;
-  console.log(timeline);
 
   let start_time = formatDateTime(timeline.startDate, timeline.startTime);
   let end_time = formatDateTime(timeline.endDate, timeline.endTime);
-  console.log(start_time);
 
   const requestBody = {
     name: test.name,
     platform: test.platform,
-    platform_link: test.platformLink,
+    platform_link: "",
     portal_link: "", //responds to the portal link
     start_time,
     end_time,