From 46eb35892d4a6f620412c32e72720cb0c3e60111 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Tue, 17 Oct 2023 22:58:13 +0530 Subject: [PATCH 01/12] Displaying data from db --- src/components/displayTable/DataDisplay.tsx | 26 ++++---- src/components/displayTable/Row.tsx | 50 ++++++++------ src/types/ResponseTypes.ts | 72 +++++++++++++++++++++ src/utils/forminputhandling.ts | 6 +- src/utils/rootclient.ts | 1 + 5 files changed, 121 insertions(+), 34 deletions(-) create mode 100644 src/types/ResponseTypes.ts diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx index 2f88879..dfd93b5 100644 --- a/src/components/displayTable/DataDisplay.tsx +++ b/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; + getData: (currentPage: number, itemsPerPage: number) => Promise; }; const DataDisplay: React.FC = ({ getData }) => { - const [data, setData] = useState([]); + const [data, setData] = useState([]); 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 (
@@ -61,7 +57,9 @@ const DataDisplay: React.FC = ({ 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" } diff --git a/src/components/displayTable/Row.tsx b/src/components/displayTable/Row.tsx index 57c7a37..83438ea 100644 --- a/src/components/displayTable/Row.tsx +++ b/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(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 ( <> setIsExpand(!isExpand)}> @@ -39,11 +53,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: {reportSchedule?.type} diff --git a/src/types/ResponseTypes.ts b/src/types/ResponseTypes.ts new file mode 100644 index 0000000..ab457e7 --- /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 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; +} diff --git a/src/utils/forminputhandling.ts b/src/utils/forminputhandling.ts index 62d52a7..87ff5ee 100644 --- a/src/utils/forminputhandling.ts +++ b/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; } diff --git a/src/utils/rootclient.ts b/src/utils/rootclient.ts index 4c5133a..d8ed0ac 100644 --- a/src/utils/rootclient.ts +++ b/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 }, }); From 149f5feb7c661ecffb6418b409bca6b3e4c65d0c Mon Sep 17 00:00:00 2001 From: Prakhar Date: Fri, 20 Oct 2023 02:32:28 +0530 Subject: [PATCH 02/12] updated getData --- src/components/displayTable/DataDisplay.tsx | 24 +++++++++++++-------- src/components/displayTable/Row.tsx | 8 +++---- src/types/ResponseTypes.ts | 2 +- src/utils/forminputhandling.ts | 5 +++-- src/utils/rootclient.ts | 2 +- 5 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx index dfd93b5..204da81 100644 --- a/src/components/displayTable/DataDisplay.tsx +++ b/src/components/displayTable/DataDisplay.tsx @@ -4,24 +4,27 @@ import TableRow from "./Row"; import { getData } from "@/utils/FormInputHandling"; import ReactPaginate from "react-paginate"; import { instance } from "@/utils/RootClient"; -import { Welcome3 } from "@/types/ResponseTypes"; +import { DbTypes } from "@/types/ResponseTypes"; type DataDisplayProps = { - getData: (currentPage: number, itemsPerPage: number) => Promise; + getData: (currentPage: number, itemsPerPage: number) => Promise; }; const DataDisplay: React.FC = ({ getData }) => { - const [data, setData] = useState([]); + const [data, setData] = useState([]); const [totalItems, setTotalItems] = useState(0); - const [currentPage, setCurrentPage] = useState(0); + const [lastId, setLastId] = useState(0); const itemsPerPage = 5; useEffect(() => { (async () => { - const res = await getData(currentPage, itemsPerPage); + const res = await getData(lastId, itemsPerPage); setData(res); + if (res.length) { + setLastId(res[res.length - 1].id); + } })(); - }, [currentPage]); + }, [lastId]); return (
@@ -57,9 +60,12 @@ const DataDisplay: React.FC = ({ getData }) => { pageCount={Math.ceil(totalItems / itemsPerPage)} marginPagesDisplayed={2} pageRangeDisplayed={5} - onPageChange={({ selected }) => - setCurrentPage(selected * itemsPerPage) - } + onPageChange={({ selected }) => { + const newLastId = data[selected * itemsPerPage - 1]?.id; + if (newLastId) { + setLastId(newLastId); + } + }} containerClassName={ "pagination flex flex-wrap justify-center items-center my-4" } diff --git a/src/components/displayTable/Row.tsx b/src/components/displayTable/Row.tsx index 83438ea..a0f066b 100644 --- a/src/components/displayTable/Row.tsx +++ b/src/components/displayTable/Row.tsx @@ -2,15 +2,15 @@ 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"; +import { DbTypes } from "@/types/ResponseTypes"; -const TableRow = ({ row, index }: { row: Welcome3; index: number }) => { +const TableRow = ({ row, index }: { row: DbTypes; index: number }) => { const [isExpand, setIsExpand] = useState(false); const { meta_data, start_time, end_time, - repeat_schedule: reportSchedule, + repeat_schedule: repeatSchedule, name, } = row!; @@ -103,7 +103,7 @@ const TableRow = ({ row, index }: { row: Welcome3; index: number }) => { test_purpose: {purpose} is_enabled: {isEnabled?.toString()} end_time: {endTime} - repeat_schedule: {reportSchedule?.type} + repeat_schedule: {repeatSchedule?.type} diff --git a/src/types/ResponseTypes.ts b/src/types/ResponseTypes.ts index ab457e7..10bb343 100644 --- a/src/types/ResponseTypes.ts +++ b/src/types/ResponseTypes.ts @@ -10,7 +10,7 @@ export interface Timeline { [key: string]: string | number | boolean | null; } -export interface Welcome3 { +export interface DbTypes { dateCreated?: string; student: Student; test: Test; diff --git a/src/utils/forminputhandling.ts b/src/utils/forminputhandling.ts index 87ff5ee..9c95dd2 100644 --- a/src/utils/forminputhandling.ts +++ b/src/utils/forminputhandling.ts @@ -2,9 +2,10 @@ import { RowType } from "@/types/types"; import { instance } from "./RootClient"; // get data from the db -async function getData(page: number, limit: number) { +async function getData(lastId: number, limit: number) { + const offsetParam = lastId ? `&offset_id=${lastId}` : " "; const { data } = await instance.get( - `api/session?session_id_is_null=true&offset=${page}&limit=${limit}` + `api/session?session_id_is_null=true${offsetParam}&limit=${limit}` ); return data; } diff --git a/src/utils/rootclient.ts b/src/utils/rootclient.ts index d8ed0ac..5a5447b 100644 --- a/src/utils/rootclient.ts +++ b/src/utils/rootclient.ts @@ -1,6 +1,6 @@ import axios from "axios"; export const instance = axios.create({ - baseURL: process.env.NEXT_PUBLIC_BACKEND_URL, + baseURL: process.env.NEXT_PUBLIC_DB_URL, headers: { Authorization: "Bearer " + process.env.NEXT_PUBLIC_BEARER_TOKEN }, }); From aa3c1f1d9e7ec2465619e1bc2784e39c33ac8b37 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Tue, 31 Oct 2023 17:38:56 +0530 Subject: [PATCH 03/12] pagination updates --- src/components/displayTable/DataDisplay.tsx | 15 +++++---------- src/components/displayTable/Row.tsx | 2 -- src/utils/forminputhandling.ts | 7 +++---- 3 files changed, 8 insertions(+), 16 deletions(-) diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx index 204da81..d88ce3f 100644 --- a/src/components/displayTable/DataDisplay.tsx +++ b/src/components/displayTable/DataDisplay.tsx @@ -13,18 +13,16 @@ type DataDisplayProps = { const DataDisplay: React.FC = ({ getData }) => { const [data, setData] = useState([]); const [totalItems, setTotalItems] = useState(0); - const [lastId, setLastId] = useState(0); + const [currentPage, setCurrentPage] = useState(0); const itemsPerPage = 5; useEffect(() => { (async () => { - const res = await getData(lastId, itemsPerPage); + const offset = currentPage * itemsPerPage; + const res = await getData(offset, itemsPerPage); setData(res); - if (res.length) { - setLastId(res[res.length - 1].id); - } })(); - }, [lastId]); + }, [currentPage, itemsPerPage, getData]); return (
@@ -61,10 +59,7 @@ const DataDisplay: React.FC = ({ getData }) => { marginPagesDisplayed={2} pageRangeDisplayed={5} onPageChange={({ selected }) => { - const newLastId = data[selected * itemsPerPage - 1]?.id; - if (newLastId) { - setLastId(newLastId); - } + setCurrentPage(selected); }} containerClassName={ "pagination flex flex-wrap justify-center items-center my-4" diff --git a/src/components/displayTable/Row.tsx b/src/components/displayTable/Row.tsx index a0f066b..867f2ea 100644 --- a/src/components/displayTable/Row.tsx +++ b/src/components/displayTable/Row.tsx @@ -16,7 +16,6 @@ const TableRow = ({ row, index }: { row: DbTypes; index: number }) => { const { batch, - date_created: dateCreated, test_format: format, test_purpose: purpose, @@ -30,7 +29,6 @@ const TableRow = ({ row, index }: { row: DbTypes; index: number }) => { } = meta_data || {}; const startDate = new Date(start_time!).toLocaleDateString(); - const endDate = new Date(end_time!).toLocaleDateString(); const startTime = new Date(start_time!).toLocaleTimeString(); diff --git a/src/utils/forminputhandling.ts b/src/utils/forminputhandling.ts index 9c95dd2..ae1c39b 100644 --- a/src/utils/forminputhandling.ts +++ b/src/utils/forminputhandling.ts @@ -2,10 +2,9 @@ import { RowType } from "@/types/types"; import { instance } from "./RootClient"; // get data from the db -async function getData(lastId: number, limit: number) { - const offsetParam = lastId ? `&offset_id=${lastId}` : " "; +async function getData(currentPage: number, limit: number) { const { data } = await instance.get( - `api/session?session_id_is_null=true${offsetParam}&limit=${limit}` + `api/session?session_id_is_null=true&offset=${currentPage}&limit=${limit}` ); return data; } @@ -15,8 +14,8 @@ async function postFormData(formData: RowType) { const currentDate = new Date().toLocaleDateString(); const res = await instance.post("/quiz", { - ...formData, dateCreated: currentDate, + ...formData, }); return res; From 6cb694b23255f4af630d886c84fb0b09332ae4eb Mon Sep 17 00:00:00 2001 From: Prakhar Date: Tue, 31 Oct 2023 18:02:31 +0530 Subject: [PATCH 04/12] build fixes --- src/components/displayTable/DataDisplay.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx index d88ce3f..0acf04c 100644 --- a/src/components/displayTable/DataDisplay.tsx +++ b/src/components/displayTable/DataDisplay.tsx @@ -1,9 +1,6 @@ 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"; import { DbTypes } from "@/types/ResponseTypes"; type DataDisplayProps = { From 38044432b5ad3920460e4bd6cfad65b601338c29 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Tue, 31 Oct 2023 19:07:00 +0530 Subject: [PATCH 05/12] build fixes v2 --- db.json | 231 ----------------------------------- src/pages/SessionCreator.tsx | 4 +- src/pages/index.tsx | 2 +- 3 files changed, 3 insertions(+), 234 deletions(-) delete mode 100644 db.json 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/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..13ca2f6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,5 @@ import DataDisplay from "@/components/displayTable/DataDisplay"; -import { getData } from "@/utils/FormInputHandling"; +import { getData } from "../utils/FormInputHandling"; import Head from "next/head"; import { useRouter } from "next/router"; From e1cf7dd042831c319773155365f4761ecc5e0eb6 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Wed, 1 Nov 2023 15:20:33 +0530 Subject: [PATCH 06/12] files renamed --- src/utils/FormInputHandling.ts | 24 ++++++++++++++++++++++++ src/utils/RootClient.ts | 6 ++++++ 2 files changed, 30 insertions(+) create mode 100644 src/utils/FormInputHandling.ts create mode 100644 src/utils/RootClient.ts diff --git a/src/utils/FormInputHandling.ts b/src/utils/FormInputHandling.ts new file mode 100644 index 0000000..ae1c39b --- /dev/null +++ b/src/utils/FormInputHandling.ts @@ -0,0 +1,24 @@ +import { RowType } from "@/types/types"; +import { instance } from "./RootClient"; + +// get data from the db +async function getData(currentPage: number, limit: number) { + const { data } = await instance.get( + `api/session?session_id_is_null=true&offset=${currentPage}&limit=${limit}` + ); + return data; +} + +// post data to the server +async function postFormData(formData: RowType) { + const currentDate = new Date().toLocaleDateString(); + + const res = await instance.post("/quiz", { + dateCreated: currentDate, + ...formData, + }); + + return res; +} + +export { getData, postFormData }; 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 }, +}); From b9a8eed0e6bd79593f1f17a575202c51288a2da6 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Thu, 2 Nov 2023 14:13:28 +0530 Subject: [PATCH 07/12] fixed pagination --- src/components/displayTable/DataDisplay.tsx | 23 ++++++++++----------- src/pages/index.tsx | 3 +-- src/utils/FormInputHandling.ts | 10 +++++++-- src/utils/forminputhandling.ts | 10 +++++++-- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx index 0acf04c..1ac2286 100644 --- a/src/components/displayTable/DataDisplay.tsx +++ b/src/components/displayTable/DataDisplay.tsx @@ -2,24 +2,23 @@ import React, { useState, useEffect } from "react"; import TableRow from "./Row"; import ReactPaginate from "react-paginate"; import { DbTypes } from "@/types/ResponseTypes"; +import { getData } from "@/utils/FormInputHandling"; -type DataDisplayProps = { - getData: (currentPage: number, itemsPerPage: number) => Promise; -}; - -const DataDisplay: React.FC = ({ getData }) => { +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(() => { (async () => { - const offset = currentPage * itemsPerPage; - const res = await getData(offset, itemsPerPage); - setData(res); + const { data, hasMore } = await getData(currentPage, itemsPerPage); + setData(data); + setHasMore(hasMore); })(); - }, [currentPage, itemsPerPage, getData]); + }, [currentPage, itemsPerPage]); return (
@@ -52,9 +51,9 @@ const DataDisplay: React.FC = ({ getData }) => { nextLabel={"next"} breakLabel={"..."} breakClassName={"break-me px-2 py-1"} - pageCount={Math.ceil(totalItems / itemsPerPage)} - marginPagesDisplayed={2} - pageRangeDisplayed={5} + marginPagesDisplayed={0} + pageRangeDisplayed={0} + pageCount={hasMore ? currentPage + 2 : currentPage + 1} onPageChange={({ selected }) => { setCurrentPage(selected); }} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 13ca2f6..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/utils/FormInputHandling.ts b/src/utils/FormInputHandling.ts index ae1c39b..cc200a7 100644 --- a/src/utils/FormInputHandling.ts +++ b/src/utils/FormInputHandling.ts @@ -3,10 +3,16 @@ import { instance } from "./RootClient"; // get data from the db async function getData(currentPage: number, limit: number) { + const offset = currentPage * limit; const { data } = await instance.get( - `api/session?session_id_is_null=true&offset=${currentPage}&limit=${limit}` + `api/session?session_id_is_null=true&offset=${offset}&limit=${limit + 1}` ); - return data; + const hasMore = data.length > limit; + const items = hasMore ? data.slice(0, -1) : data; + return { + data: items, + hasMore, + }; } // post data to the server diff --git a/src/utils/forminputhandling.ts b/src/utils/forminputhandling.ts index ae1c39b..cc200a7 100644 --- a/src/utils/forminputhandling.ts +++ b/src/utils/forminputhandling.ts @@ -3,10 +3,16 @@ import { instance } from "./RootClient"; // get data from the db async function getData(currentPage: number, limit: number) { + const offset = currentPage * limit; const { data } = await instance.get( - `api/session?session_id_is_null=true&offset=${currentPage}&limit=${limit}` + `api/session?session_id_is_null=true&offset=${offset}&limit=${limit + 1}` ); - return data; + const hasMore = data.length > limit; + const items = hasMore ? data.slice(0, -1) : data; + return { + data: items, + hasMore, + }; } // post data to the server From 8dd464b61dec6c60ffba8fdf0dac0e87d7c7564e Mon Sep 17 00:00:00 2001 From: Prakhar Date: Thu, 2 Nov 2023 14:39:17 +0530 Subject: [PATCH 08/12] Remove fileinputhandling and rootclient --- ...utHandling.ts => TempFileInputHandling.ts} | 0 .../{RootClient.ts => TempRootClient.ts} | 0 src/utils/forminputhandling.ts | 30 ------------------- src/utils/rootclient.ts | 6 ---- 4 files changed, 36 deletions(-) rename src/utils/{FormInputHandling.ts => TempFileInputHandling.ts} (100%) rename src/utils/{RootClient.ts => TempRootClient.ts} (100%) delete mode 100644 src/utils/forminputhandling.ts delete mode 100644 src/utils/rootclient.ts diff --git a/src/utils/FormInputHandling.ts b/src/utils/TempFileInputHandling.ts similarity index 100% rename from src/utils/FormInputHandling.ts rename to src/utils/TempFileInputHandling.ts diff --git a/src/utils/RootClient.ts b/src/utils/TempRootClient.ts similarity index 100% rename from src/utils/RootClient.ts rename to src/utils/TempRootClient.ts diff --git a/src/utils/forminputhandling.ts b/src/utils/forminputhandling.ts deleted file mode 100644 index cc200a7..0000000 --- a/src/utils/forminputhandling.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { RowType } from "@/types/types"; -import { instance } from "./RootClient"; - -// get data from the db -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 -async function postFormData(formData: RowType) { - const currentDate = new Date().toLocaleDateString(); - - const res = await instance.post("/quiz", { - dateCreated: currentDate, - ...formData, - }); - - return res; -} - -export { getData, postFormData }; diff --git a/src/utils/rootclient.ts b/src/utils/rootclient.ts deleted file mode 100644 index 5a5447b..0000000 --- a/src/utils/rootclient.ts +++ /dev/null @@ -1,6 +0,0 @@ -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 }, -}); From 6389a3ac72b2a596f85e0a5bfb65801b5575a2b2 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Thu, 2 Nov 2023 14:41:36 +0530 Subject: [PATCH 09/12] Rename files back to original --- src/utils/{TempFileInputHandling.ts => FormInputHandling.ts} | 0 src/utils/{TempRootClient.ts => RootClient.ts} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/utils/{TempFileInputHandling.ts => FormInputHandling.ts} (100%) rename src/utils/{TempRootClient.ts => RootClient.ts} (100%) diff --git a/src/utils/TempFileInputHandling.ts b/src/utils/FormInputHandling.ts similarity index 100% rename from src/utils/TempFileInputHandling.ts rename to src/utils/FormInputHandling.ts diff --git a/src/utils/TempRootClient.ts b/src/utils/RootClient.ts similarity index 100% rename from src/utils/TempRootClient.ts rename to src/utils/RootClient.ts From 06dbcf7402163c20870640636518654d79a79190 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Thu, 2 Nov 2023 16:28:42 +0530 Subject: [PATCH 10/12] env updates --- .env.example | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.example b/.env.example index 75f523f..10cc615 100644 --- a/.env.example +++ b/.env.example @@ -1 +1 @@ -NEXT_PUBLIC_BACKEND_URL = http://localhost:3001 +NEXT_PUBLIC_BACKEND_URL = "" From 5605b3d0a59a190e89eedfee32c35ff881581803 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Thu, 2 Nov 2023 16:40:34 +0530 Subject: [PATCH 11/12] renamed URL --- .env.example | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.example b/.env.example index 10cc615..774590a 100644 --- a/.env.example +++ b/.env.example @@ -1 +1 @@ -NEXT_PUBLIC_BACKEND_URL = "" +NEXT_PUBLIC_DB_URL = "" From b10ac581f515fbaf6e88fc6fb33a940172a8cbc3 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Sat, 4 Nov 2023 05:08:26 +0530 Subject: [PATCH 12/12] indexing in UI --- .env.example | 2 +- src/components/displayTable/DataDisplay.tsx | 18 +++++++++++------- src/components/displayTable/Row.tsx | 16 ++++++++++++++-- 3 files changed, 26 insertions(+), 10 deletions(-) diff --git a/.env.example b/.env.example index 774590a..a35b9e2 100644 --- a/.env.example +++ b/.env.example @@ -1 +1 @@ -NEXT_PUBLIC_DB_URL = "" +NEXT_PUBLIC_DB_URL = "https://localhost:3000" diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx index 1ac2286..d1ec865 100644 --- a/src/components/displayTable/DataDisplay.tsx +++ b/src/components/displayTable/DataDisplay.tsx @@ -42,14 +42,19 @@ const DataDisplay: React.FC = () => { .slice() .reverse() .map((row, i) => ( - + ))} { 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 867f2ea..7e66ef0 100644 --- a/src/components/displayTable/Row.tsx +++ b/src/components/displayTable/Row.tsx @@ -4,7 +4,17 @@ import { Copy, Edit, Link, Trash2 } from "react-feather"; import { RowType } from "@/types/types"; import { DbTypes } from "@/types/ResponseTypes"; -const TableRow = ({ row, index }: { row: DbTypes; index: number }) => { +const TableRow = ({ + row, + index, + currentPage, + itemsPerPage, +}: { + row: DbTypes; + index: number; + currentPage: number; + itemsPerPage: number; +}) => { const [isExpand, setIsExpand] = useState(false); const { meta_data, @@ -34,10 +44,12 @@ const TableRow = ({ row, index }: { row: DbTypes; index: number }) => { 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}