Displaying data from db

src/components/displayTable/DataDisplay.tsx

@@ -4,29 +4,25 @@ import TableRow from "./Row";
 import { getData } from "@/utils/FormInputHandling";
 import ReactPaginate from "react-paginate";
 import { instance } from "@/utils/RootClient";
-
+import { Welcome3 } from "@/types/ResponseTypes";
 
 type DataDisplayProps = {
-  getData: () => Promise<RowType[]>;
+  getData: (currentPage: number, itemsPerPage: number) => Promise<Welcome3[]>;
 };
 
 const DataDisplay: React.FC<DataDisplayProps> = ({ getData }) => {
-  const [data, setData] = useState<RowType[]>([]);
+  const [data, setData] = useState<Welcome3[]>([]);
   const [totalItems, setTotalItems] = useState(0);
   const [currentPage, setCurrentPage] = useState(0);
   const itemsPerPage = 5;
 
   useEffect(() => {
-    const fetchData = async () => {
-      const response = await instance.get(
-        `/quiz?_page=${currentPage + 1}&_limit=${itemsPerPage}`
-      );
-      setData(response.data);
-      const total = parseInt(response.headers["x-total-count"], 10);
-      setTotalItems(total);
-    };
-    fetchData();
-  }, [currentPage, getData]);
+    (async () => {
+      const res = await getData(currentPage, itemsPerPage);
+      setData(res);
+    })();
+  }, [currentPage]);
+
   return (
     <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8">
       <div className="overflow-x-auto">
@@ -61,7 +57,9 @@ const DataDisplay: React.FC<DataDisplayProps> = ({ getData }) => {
           pageCount={Math.ceil(totalItems / itemsPerPage)}
           marginPagesDisplayed={2}
           pageRangeDisplayed={5}
-          onPageChange={({ selected }) => setCurrentPage(selected)}
+          onPageChange={({ selected }) =>
+            setCurrentPage(selected * itemsPerPage)
+          }
           containerClassName={
             "pagination flex flex-wrap justify-center items-center my-4"
           }

src/components/displayTable/Row.tsx

@@ -2,26 +2,40 @@ import React, { useState } from "react";
 import NextLink from "next/link";
 import { Copy, Edit, Link, Trash2 } from "react-feather";
 import { RowType } from "@/types/types";
+import { Welcome3 } from "@/types/ResponseTypes";
 
-const TableRow = ({ row, index }: { row: RowType; index: number }) => {
+const TableRow = ({ row, index }: { row: Welcome3; index: number }) => {
   const [isExpand, setIsExpand] = useState<boolean>(false);
   const {
-    dateCreated,
-    student: { batch, testTakers },
-    test: { name, sessionLink, type, format, purpose, optionalLimit },
-    timeline: {
-      reportLink,
-      startDate,
-      endDate,
-      sessionType,
-      reportSchedule,
-      endTime,
-      startTime,
-      synced,
-      isEnabled,
-    },
+    meta_data,
+    start_time,
+    end_time,
+    repeat_schedule: reportSchedule,
+    name,
   } = row!;
 
+  const {
+    batch,
+
+    date_created: dateCreated,
+    test_format: format,
+    test_purpose: purpose,
+    optional_limits: optionalLimit,
+    test_type: type,
+    test_takers_count: testTakers,
+    report_link: reportLink,
+    infinite_session: sessionType,
+    has_synced_to_bq: synced,
+    enabled: isEnabled,
+  } = meta_data || {};
+
+  const startDate = new Date(start_time!).toLocaleDateString();
+
+  const endDate = new Date(end_time!).toLocaleDateString();
+
+  const startTime = new Date(start_time!).toLocaleTimeString();
+  const endTime = new Date(end_time!).toLocaleTimeString();
+
   return (
     <>
       <tr className="border text-center" onClick={() => setIsExpand(!isExpand)}>
@@ -39,11 +53,11 @@ const TableRow = ({ row, index }: { row: RowType; index: number }) => {
           )}
         </td>
         <td className="border p-2">
-          {typeof sessionLink === "string" && (
+          {/* {typeof sessionLink === "string" && (
             <NextLink href={sessionLink}>
               <Link className="mx-auto" />
             </NextLink>
-          )}
+          )} */}
         </td>
         <td className="border p-2 flex gap-2 justify-center">
           <Copy
@@ -89,7 +103,7 @@ const TableRow = ({ row, index }: { row: RowType; index: number }) => {
                   <td>test_purpose: {purpose}</td>
                   <td>is_enabled: {isEnabled?.toString()}</td>
                   <td>end_time: {endTime}</td>
-                  <td>repeat_schedule: {reportSchedule}</td>
+                  <td>repeat_schedule: {reportSchedule?.type}</td>
                 </tr>
               </tbody>
             </table>

src/types/ResponseTypes.ts

@@ -0,0 +1,72 @@
+export interface Student {
+  [key: string]: string | number | boolean | null;
+}
+
+export interface Test {
+  [key: string]: string | number | boolean | null;
+}
+
+export interface Timeline {
+  [key: string]: string | number | boolean | null;
+}
+
+export interface Welcome3 {
+  dateCreated?: string;
+  student: Student;
+  test: Test;
+  timeline: Timeline;
+  activate_signup: boolean | null;
+  auth_type: null | string;
+  created_by_id: null;
+  end_time: Date | null;
+  form_schema_id: number | null;
+  id: number;
+  id_generation: boolean | null;
+  is_active: boolean;
+  meta_data: MetaData | null;
+  name: string;
+  number_of_fields_in_pop_form: number | null;
+  owner_id: null;
+  platform: string;
+  platform_id: null;
+  platform_link: null;
+  pop_up_form: boolean | null;
+  portal_link: null;
+  purpose: Purpose | null;
+  redirection: boolean | null;
+  repeat_schedule: RepeatSchedule | null;
+  session_id: null;
+  start_time: Date | null;
+  type: null | string;
+}
+
+export interface MetaData {
+  batch: string;
+  cms_test_id: string;
+  course: string;
+  date_created: string;
+  enabled: number;
+  grade: string;
+  group: string;
+  has_synced_to_bq: string;
+  infinite_session: boolean;
+  marking_scheme: string;
+  optional_limits: string;
+  report_link: string;
+  shortened_link: string;
+  stream: string;
+  test_format: string;
+  test_purpose: string;
+  test_takers_count: string;
+  test_type: string;
+}
+
+export interface Purpose {
+  params: string;
+  type: string;
+}
+
+export interface RepeatSchedule {
+  params: number[];
+  type: string;
+}

src/utils/forminputhandling.ts

@@ -2,8 +2,10 @@ import { RowType } from "@/types/types";
 import { instance } from "./RootClient";
 
 // get data from the db
-async function getData(page = 1, limit = 5) {
-  const { data } = await instance.get(`/quiz?_page=${page}&_limit=${limit}`);
+async function getData(page: number, limit: number) {
+  const { data } = await instance.get(
+    `api/session?session_id_is_null=true&offset=${page}&limit=${limit}`
+  );
   return data;
 }
 

src/utils/rootclient.ts

@@ -2,4 +2,5 @@ import axios from "axios";
 
 export const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
+  headers: { Authorization: "Bearer " + process.env.NEXT_PUBLIC_BEARER_TOKEN },
 });