diff --git a/.env.example b/.env.example index 75f523f..a35b9e2 100644 --- a/.env.example +++ b/.env.example @@ -1 +1 @@ -NEXT_PUBLIC_BACKEND_URL = http://localhost:3001 +NEXT_PUBLIC_DB_URL = "https://localhost:3000" diff --git a/db.json b/db.json deleted file mode 100644 index 980cd60..0000000 --- a/db.json +++ /dev/null @@ -1,231 +0,0 @@ -{ - "quiz": [ - { - "id": 1, - "dateCreated": "8/7/2023", - "student": { - "testTakers": "1500", - "program": "Himachal Students", - "batch": "DL-12-Alpha-Eng-23", - "grade": "9", - "course": "NEET", - "stream": "Medical" - }, - "test": { - "name": "Physics Rotational", - "id": "1", - "sessionId": "cdsc", - "sessionLink": "cdscdsc", - "cmsId": "csdcs", - "type": "assessment", - "format": "major_test", - "purpose": "baseline", - "platform": "Quiz", - "markingScheme": "4,-1", - "optionalLimit": "na" - }, - "timeline": { - "startDate": "2023-08-11", - "endDate": "2023-08-04", - "startTime": "10:24", - "endTime": "22:24", - "reportSchedule": "dscsdc", - "reportLink": "cdscjndsc", - "isEnabled": false, - "sessionType": "infinite" - } - }, - { - "student": { - "testTakers": "1000", - "program": "Himachal Students", - "batch": "DL-12-Catalyst-Eng-23", - "grade": "9", - "course": "Certification", - "stream": "Maths" - }, - "test": { - "name": "Organic Chemistry", - "type": "assessment", - "format": "major_test", - "purpose": "baseline", - "platform": "Quiz", - "markingScheme": "1,0", - "optionalLimit": "na" - }, - "timeline": { - "startDate": "2023-09-11", - "endDate": "2023-09-09", - "startTime": "14:04", - "endTime": "16:04", - "reportSchedule": "sample", - "reportLink": "tobeGenerated", - "isEnabled": true, - "sessionType": "infinite", - "synced": true - }, - "dateCreated": "9/7/2023", - "id": 2 - }, - { - "student": { - "testTakers": "700", - "program": "Himachal Students", - "batch": "DL-12-Catalyst-Eng-23", - "grade": "9", - "course": "Certification", - "stream": "Science" - }, - "test": { - "name": "Biology", - "type": "assessment", - "format": "part_test", - "purpose": "endline", - "platform": "Quiz", - "markingScheme": "1,0", - "optionalLimit": "neet" - }, - "timeline": { - "startDate": "2023-09-19", - "endDate": "2023-09-24", - "startTime": "18:52", - "endTime": "21:52", - "reportSchedule": "To be generated", - "reportLink": "Sample link", - "isEnabled": false, - "sessionType": "infinite", - "synced": false - }, - "dateCreated": "9/7/2023", - "id": 3 - }, - { - "student": { - "testTakers": "1000", - "program": "Haryana Students", - "batch": "DL-12-Alpha-med-23", - "grade": "9", - "course": "Catalyst", - "stream": "Maths" - }, - "test": { - "name": "canem", - "type": "assessment", - "format": "part_test", - "purpose": "weekly_test", - "platform": "Quiz", - "markingScheme": "4,-1", - "optionalLimit": "na" - }, - "timeline": { - "startDate": "2023-10-04", - "endDate": "2023-10-07", - "startTime": "12:00", - "endTime": "10:02", - "reportSchedule": "lgkhk", - "reportLink": "faass", - "isEnabled": true, - "sessionType": "infinite", - "synced": true - }, - "dateCreated": "10/3/2023", - "id": 4 - }, - { - "student": { - "testTakers": "1000", - "program": "Haryana Students", - "batch": "DL-12-Alpha-med-23", - "grade": "9", - "course": "Catalyst", - "stream": "Maths" - }, - "test": { - "name": "canem", - "type": "assessment", - "format": "part_test", - "purpose": "weekly_test", - "platform": "Quiz", - "markingScheme": "4,-1", - "optionalLimit": "na" - }, - "timeline": { - "startDate": "2023-10-04", - "endDate": "2023-10-07", - "startTime": "12:00", - "endTime": "10:02", - "reportSchedule": "lgkhk", - "reportLink": "faass", - "isEnabled": true, - "sessionType": "infinite", - "synced": true - }, - "dateCreated": "10/3/2023", - "id": 5 - }, - { - "student": { - "testTakers": "1000", - "program": "Haryana Students", - "batch": "DL-12-Alpha-med-23", - "grade": "9", - "course": "Catalyst", - "stream": "Maths" - }, - "test": { - "name": "canem", - "type": "assessment", - "format": "part_test", - "purpose": "weekly_test", - "platform": "Quiz", - "markingScheme": "4,-1", - "optionalLimit": "na" - }, - "timeline": { - "startDate": "2023-10-04", - "endDate": "2023-10-07", - "startTime": "12:00", - "endTime": "10:02", - "reportSchedule": "lgkhk", - "reportLink": "faass", - "isEnabled": true, - "sessionType": "infinite", - "synced": true - }, - "dateCreated": "10/3/2023", - "id": 6 - }, - { - "student": { - "testTakers": "1000", - "program": "Haryana Students", - "batch": "DL-12-Alpha-med-23", - "grade": "9", - "course": "Catalyst", - "stream": "Maths" - }, - "test": { - "name": "canem", - "type": "assessment", - "format": "part_test", - "purpose": "weekly_test", - "platform": "Quiz", - "markingScheme": "4,-1", - "optionalLimit": "na" - }, - "timeline": { - "startDate": "2023-10-04", - "endDate": "2023-10-07", - "startTime": "12:00", - "endTime": "10:02", - "reportSchedule": "lgkhk", - "reportLink": "faass", - "isEnabled": true, - "sessionType": "infinite", - "synced": true - }, - "dateCreated": "10/3/2023", - "id": 7 - } - ] -} diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx index 2f88879..d1ec865 100644 --- a/src/components/displayTable/DataDisplay.tsx +++ b/src/components/displayTable/DataDisplay.tsx @@ -1,32 +1,25 @@ import React, { useState, useEffect } from "react"; -import { RowType } from "@/types/types"; import TableRow from "./Row"; -import { getData } from "@/utils/FormInputHandling"; import ReactPaginate from "react-paginate"; -import { instance } from "@/utils/RootClient"; - - -type DataDisplayProps = { - getData: () => Promise; -}; +import { DbTypes } from "@/types/ResponseTypes"; +import { getData } from "@/utils/FormInputHandling"; -const DataDisplay: React.FC = ({ getData }) => { - const [data, setData] = useState([]); +const DataDisplay: React.FC = () => { + const [data, setData] = useState([]); const [totalItems, setTotalItems] = useState(0); const [currentPage, setCurrentPage] = useState(0); + const [hasMore, setHasMore] = useState(true); const itemsPerPage = 5; + const pageCount = Math.ceil(totalItems / itemsPerPage); 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 { data, hasMore } = await getData(currentPage, itemsPerPage); + setData(data); + setHasMore(hasMore); + })(); + }, [currentPage, itemsPerPage]); + return (
@@ -49,30 +42,36 @@ const DataDisplay: React.FC = ({ getData }) => { .slice() .reverse() .map((row, i) => ( - + ))} setCurrentPage(selected)} + marginPagesDisplayed={0} + pageRangeDisplayed={0} + pageCount={hasMore ? currentPage + 2 : currentPage + 1} + onPageChange={({ selected }) => { + setCurrentPage(selected); + }} containerClassName={ - "pagination flex flex-wrap justify-center items-center my-4" + "pagination flex flex-wrap justify-between items-center my-4" } - pageClassName={"mx-1"} + pageClassName={"mx-1 hidden"} previousClassName={ "mx-1 bg-[#B52326] text-white rounded px-2 py-1 sm:px-3 sm:py-2 hover: bg-[#B52326]" } nextClassName={ "mx-1 bg-[#B52326] text-white rounded px-2 py-1 sm:px-3 sm:py-2 hover:bg- bg-[#B52326]" } - activeClassName={" bg-[#B52326] text-white rounded px-3 py-2"} disabledClassName={"opacity-50 cursor-not-allowed"} />
diff --git a/src/components/displayTable/Row.tsx b/src/components/displayTable/Row.tsx index 57c7a37..7e66ef0 100644 --- a/src/components/displayTable/Row.tsx +++ b/src/components/displayTable/Row.tsx @@ -2,30 +2,54 @@ import React, { useState } from "react"; import NextLink from "next/link"; import { Copy, Edit, Link, Trash2 } from "react-feather"; import { RowType } from "@/types/types"; +import { DbTypes } from "@/types/ResponseTypes"; -const TableRow = ({ row, index }: { row: RowType; index: number }) => { +const TableRow = ({ + row, + index, + currentPage, + itemsPerPage, +}: { + row: DbTypes; + index: number; + currentPage: number; + itemsPerPage: number; +}) => { const [isExpand, setIsExpand] = useState(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: repeatSchedule, + 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(); + + const actualIndex = currentPage * itemsPerPage + index + 1; + return ( <> setIsExpand(!isExpand)}> - {index} + {actualIndex} {batch} {name} {startDate} @@ -39,11 +63,11 @@ const TableRow = ({ row, index }: { row: RowType; index: number }) => { )} - {typeof sessionLink === "string" && ( + {/* {typeof sessionLink === "string" && ( - )} + )} */} { test_purpose: {purpose} is_enabled: {isEnabled?.toString()} end_time: {endTime} - repeat_schedule: {reportSchedule} + repeat_schedule: {repeatSchedule?.type} diff --git a/src/pages/SessionCreator.tsx b/src/pages/SessionCreator.tsx index 5e34a8f..14006ba 100644 --- a/src/pages/SessionCreator.tsx +++ b/src/pages/SessionCreator.tsx @@ -3,9 +3,9 @@ import StudentDetails from "@/components/Steps/StudentDetails"; import { TestDetails } from "@/components/Steps/TestDetails"; import Timeline from "@/components/Steps/Timeline"; import { RowType } from "@/types/types"; -import { postFormData } from "@/utils/FormInputHandling"; -import { useRouter } from "next/router"; +import { postFormData } from "../utils/FormInputHandling"; +import { useRouter } from "next/router"; import { useState } from "react"; export enum Step { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 350baf4..40062e1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,4 @@ import DataDisplay from "@/components/displayTable/DataDisplay"; -import { getData } from "@/utils/FormInputHandling"; import Head from "next/head"; import { useRouter } from "next/router"; @@ -30,7 +29,7 @@ export default function Home() { /> - + ); } diff --git a/src/types/ResponseTypes.ts b/src/types/ResponseTypes.ts new file mode 100644 index 0000000..10bb343 --- /dev/null +++ b/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 DbTypes { + 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; +} diff --git a/src/utils/forminputhandling.ts b/src/utils/FormInputHandling.ts similarity index 52% rename from src/utils/forminputhandling.ts rename to src/utils/FormInputHandling.ts index 62d52a7..cc200a7 100644 --- a/src/utils/forminputhandling.ts +++ b/src/utils/FormInputHandling.ts @@ -2,9 +2,17 @@ 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}`); - return data; +async function getData(currentPage: number, limit: number) { + const offset = currentPage * limit; + const { data } = await instance.get( + `api/session?session_id_is_null=true&offset=${offset}&limit=${limit + 1}` + ); + const hasMore = data.length > limit; + const items = hasMore ? data.slice(0, -1) : data; + return { + data: items, + hasMore, + }; } // post data to the server @@ -12,8 +20,8 @@ async function postFormData(formData: RowType) { const currentDate = new Date().toLocaleDateString(); const res = await instance.post("/quiz", { - ...formData, dateCreated: currentDate, + ...formData, }); return res; diff --git a/src/utils/RootClient.ts b/src/utils/RootClient.ts new file mode 100644 index 0000000..5a5447b --- /dev/null +++ b/src/utils/RootClient.ts @@ -0,0 +1,6 @@ +import axios from "axios"; + +export const instance = axios.create({ + baseURL: process.env.NEXT_PUBLIC_DB_URL, + headers: { Authorization: "Bearer " + process.env.NEXT_PUBLIC_BEARER_TOKEN }, +}); diff --git a/src/utils/rootclient.ts b/src/utils/rootclient.ts deleted file mode 100644 index 4c5133a..0000000 --- a/src/utils/rootclient.ts +++ /dev/null @@ -1,5 +0,0 @@ -import axios from "axios"; - -export const instance = axios.create({ - baseURL: process.env.NEXT_PUBLIC_BACKEND_URL, -});