Miscellaneous UI issues

avantifellows · Sep 12, 2023 · 681bfd8 · 681bfd8
1 parent a659528
commit 681bfd8
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 18 deletions.
diff --git a/src/components/Modal/Success.tsx b/src/components/Modal/Success.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Check } from "react-feather";
+
+export const Success = ({ show }: { show: boolean }) => {
+  return (
+    <section
+      className={`fixed ${
+        show ? "block" : "hidden"
+      } inset-0 w-screen bg-gray-400/40 backdrop-blur-md`}
+    >
+      <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1/3 rounded-md px-5 py-10 bg-white text-center ">
+        <div className="relative">
+          <div className="m-auto h-32 aspect-square rounded-full border-4 border-solid border-current border-r-transparent text-primary animate-spin " />
+          <Check
+            className=" text-green-500 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+            size={100}
+          />
+        </div>
+        <p className="text-xl">
+          Your session request is added. Please wait while we generate quiz
+          links. Redirecting to Home
+        </p>
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/Steps/Form/SelectField.tsx b/src/components/Steps/Form/SelectField.tsx
@@ -23,6 +23,7 @@ const SelectField = ({
       render={({ field: { onChange, value, ref } }) => (
         <Select
           required
+          isSearchable={false}
           placeholder={
             placeholder ? placeholder : (name_ as string).toUpperCase()
           }

diff --git a/src/components/Steps/Timeline.tsx b/src/components/Steps/Timeline.tsx
@@ -9,15 +9,15 @@ import {
   SessionTypeOptions,
 } from "../Options/TimelineOptions";
 import SelectField from "./Form/SelectField";
-import { useRouter } from "next/router";
+import { Success } from "../Modal/Success";
 
 export default function Timeline({
   data,
   setActiveStep,
   setData,
   createSession,
+  isSessionAdded,
 }: ActiveFormProps) {
-  const router = useRouter();
   const [shouldSubmit, setShouldSubmit] = useState(false);
   const { register, handleSubmit, control, reset } = useForm<MyForm>({
     defaultValues: { ...data.timeline },
@@ -30,12 +30,12 @@ export default function Timeline({
 
   const onSubmit: SubmitHandler<MyForm> = (timeline) => {
     setData((prevData) => ({ ...prevData, timeline }));
-    router.push("/");
+
     setShouldSubmit(true);
   };
 
   return (
-    <div className="bg-white rounded-2 border border-solid border-[#B52326] sm:m-10 m-5 rounded-lg">
+    <div className="bg-white rounded-2  border border-solid border-[#B52326] sm:m-10 m-5 rounded-lg">
       <form
         className="flex flex-col items-center m-[60px]"
         onSubmit={handleSubmit(onSubmit)}
@@ -125,6 +125,7 @@ export default function Timeline({
           </button>
         </div>
       </form>
+      <Success show={isSessionAdded} />
     </div>
   );
 }
diff --git a/src/components/displayTable/Row.tsx b/src/components/displayTable/Row.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from "react";
-import { Copy, Edit, Trash2 } from "react-feather";
+import NextLink from "next/link";
+import { Copy, Edit, Link, Trash2 } from "react-feather";
 import { RowType } from "@/types/types";
 
 const TableRow = ({ row, index }: { row: RowType; index: number }) => {
   const [isExpand, setIsExpand] = useState<boolean>(false);
   const {
+    dateCreated,
     student: { batch, testTakers },
     test: { name, sessionLink, type, format, purpose, optionalLimit },
     timeline: {
@@ -19,8 +21,7 @@ const TableRow = ({ row, index }: { row: RowType; index: number }) => {
       isEnabled,
     },
   } = row!;
-  const currentDate = new Date();
-  const formattedDate = currentDate.toLocaleDateString();
+
   return (
     <>
       <tr className="border text-center" onClick={() => setIsExpand(!isExpand)}>
@@ -30,8 +31,20 @@ const TableRow = ({ row, index }: { row: RowType; index: number }) => {
         <td className="border p-2">{startDate}</td>
         <td className="border p-2">{endDate}</td>
         <td className="border p-2">{testTakers}</td>
-        <td className="border p-2">{reportLink}</td>
-        <td className="border p-2">{sessionLink}</td>
+        <td className="border p-2">
+          {typeof reportLink === "string" && (
+            <NextLink href={reportLink}>
+              <Link className="mx-auto" />
+            </NextLink>
+          )}
+        </td>
+        <td className="border p-2">
+          {typeof sessionLink === "string" && (
+            <NextLink href={sessionLink}>
+              <Link className="mx-auto" />
+            </NextLink>
+          )}
+        </td>
         <td className="border p-2 flex gap-2 justify-center">
           <Copy
             className="cursor-pointer"
@@ -63,18 +76,18 @@ const TableRow = ({ row, index }: { row: RowType; index: number }) => {
                 <tr>
                   <td>Test_type: {type}</td>
                   <td>Test Takers Count: {testTakers}</td>
-                  <td>date_created: {formattedDate}</td>
+                  <td>date_created: {dateCreated}</td>
                   <td>infinite_session: {sessionType}</td>
                 </tr>
                 <tr>
                   <td>test_format: {format}</td>
                   <td>optinal_limit: {optionalLimit}</td>
                   <td>start_time: {startTime}</td>
-                  <td>has_synced: {synced}</td>
+                  <td>has_synced: {synced?.toString()}</td>
                 </tr>
                 <tr>
                   <td>test_purpose: {purpose}</td>
-                  <td>is_enabled: {isEnabled}</td>
+                  <td>is_enabled: {isEnabled?.toString()}</td>
                   <td>end_time: {endTime}</td>
                   <td>repeat_schedule: {reportSchedule}</td>
                 </tr>

diff --git a/src/pages/SessionCreator.tsx b/src/pages/SessionCreator.tsx
@@ -2,8 +2,10 @@ import Stepper from "@/components/Stepper";
 import StudentDetails from "@/components/Steps/StudentDetails";
 import { TestDetails } from "@/components/Steps/TestDetails";
 import Timeline from "@/components/Steps/Timeline";
+// import { SessionData } from "@/types/FormTypes";
 import { RowType } from "@/types/types";
 import { postFormData } from "@/utils/forminputhandling";
+import { useRouter } from "next/router";
 
 import { useState } from "react";
 
@@ -20,7 +22,8 @@ const stepArr: string[] = [
 ];
 
 export default function SessionCreator() {
-  // const router = useRouter();
+  const router = useRouter();
+  const [isSessionAdded, setIsSessionAdded] = useState(false);
 
   const [activeStep, setActiveStep] = useState<string>(Step.STUDENT_DETAILS);
   const [data, setData] = useState<RowType>({
@@ -30,10 +33,13 @@ export default function SessionCreator() {
   });
 
   const createSession = async () => {
-    // @ts-ignore
     await postFormData(data);
+    setIsSessionAdded(true);
 
-    // setTimeout(() => router.push('/'), 2000);
+    setTimeout(() => {
+      router.push("/");
+      setIsSessionAdded(false);
+    }, 5000);
   };
 
   const activeForm = () => {
@@ -43,6 +49,7 @@ export default function SessionCreator() {
           data={data}
           setActiveStep={setActiveStep}
           setData={setData}
+          isSessionAdded={isSessionAdded}
         />
       );
     } else if (activeStep === Step.TEST_DETAILS) {
@@ -51,6 +58,7 @@ export default function SessionCreator() {
           data={data}
           setActiveStep={setActiveStep}
           setData={setData}
+          isSessionAdded={isSessionAdded}
         />
       );
     } else {
@@ -60,6 +68,7 @@ export default function SessionCreator() {
           setActiveStep={setActiveStep}
           setData={setData}
           createSession={createSession}
+          isSessionAdded={isSessionAdded}
         />
       );
     }

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -10,9 +10,11 @@ interface ActiveFormProps {
   setActiveStep: Dispatch<SetStateAction<string>>;
   setData: Dispatch<SetStateAction<RowType>>;
   createSession?: () => void;
+  isSessionAdded: boolean;
 }
 
 interface RowType {
+  dateCreated?: string;
   student: {
     [key: string]: string | number | boolean | null;
   };

diff --git a/src/utils/forminputhandling.ts b/src/utils/forminputhandling.ts
@@ -10,12 +10,24 @@ async function getData() {
 
 // post data to the server
 async function postFormData(formData: RowType) {
-  console.log(formData);
+  const currentDate = new Date().toLocaleDateString();
 
-  const res = await instance.post("/quiz", formData);
-  console.log(res.data);
+  const res = await instance.post("/quiz", {
+    ...formData,
+    dateCreated: currentDate,
+  });
 
   return res;
 }
 
 export { getData, postFormData };
+
+// import { SessionData } from "../types/FormTypes"; // Adjust the import based on where your types are defined
+// import { instance } from "./rootclient";
+
+// async function getData(): Promise<SessionData[]> {
+//   const { data } = await instance.get("/session"); // Assuming the endpoint is `/session` to get all sessions
+//   return data;
+// }
+
+// export { getData };