✨feat: 💻client & 🌐server: quizzes API

ad features added
b-l-i-n-d · Jun 15, 2023 · 3a74982 · 3a74982
1 parent 4e9adf9
commit 3a74982
Show file tree

Hide file tree

Showing 32 changed files with 1,525 additions and 101 deletions.
diff --git a/client/components/Menus/AdminMenu.tsx b/client/components/Menus/AdminMenu.tsx
@@ -42,19 +42,23 @@ const AdminMenu: React.FC = () => {
             ),
         },
         {
-            key: "/quizzes",
+            key: "/admin/quizzes",
             label: (
-                <Button type="text">
-                    <Typography.Text strong>Quizzes</Typography.Text>
-                </Button>
+                <Link href="/admin/quizzes">
+                    <Button type="text">
+                        <Typography.Text strong>Quizzes</Typography.Text>
+                    </Button>
+                </Link>
             ),
         },
         {
-            key: "/assignments",
+            key: "/admin/assignments",
             label: (
-                <Button type="text">
-                    <Typography.Text strong>Assignments</Typography.Text>
-                </Button>
+                <Link href="/admin/assignments">
+                    <Button type="text">
+                        <Typography.Text strong>Assignments</Typography.Text>
+                    </Button>
+                </Link>
             ),
         },
         {

diff --git a/client/components/common/DebounceSelect.tsx b/client/components/common/DebounceSelect.tsx
@@ -0,0 +1,130 @@
+import { Select, Spin } from "antd";
+import debounce from "lodash/debounce";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { apiConfig } from "../../configs";
+import { DebounceSelectProps } from "../../interfaces";
+import { useLazyGetVideosQuery } from "../../redux/features/videos/videosApi";
+
+const DebounceSelect = <
+    ValueType extends {
+        key?: string;
+        label: React.ReactNode;
+        value: string | number;
+    } = any
+>({
+    debounceTimeout = 800,
+    form,
+    ...props
+}: DebounceSelectProps<ValueType>) => {
+    const [fetching, setFetching] = useState(false);
+    const [options, setOptions] = useState<ValueType[]>([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const fetchRef = useRef(0);
+    const [getVideos, { data: videos, isLoading, error }] =
+        useLazyGetVideosQuery();
+
+    const debounceFetcher = useMemo(() => {
+        const loadOptions = async (value: string) => {
+            fetchRef.current += 1;
+            const fetchId = fetchRef.current;
+            setOptions([]);
+            setFetching(true);
+
+            const searchValue = value.trim();
+            const queryOptions = searchValue
+                ? { search: searchValue, page: 1, limit: apiConfig.PAGE_SIZE }
+                : { page: 1, limit: apiConfig.PAGE_SIZE };
+
+            await getVideos(queryOptions);
+
+            if (fetchId !== fetchRef.current) {
+                // for fetch callback order
+                return;
+            }
+            setFetching(false);
+        };
+
+        return debounce(loadOptions, debounceTimeout);
+    }, [getVideos, debounceTimeout]);
+
+    const handlePopupScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        const { target }: any = e;
+        if (
+            target.scrollTop + target.offsetHeight === target.scrollHeight &&
+            !isLoading &&
+            !error &&
+            videos &&
+            videos.totalResults > options.length
+        ) {
+            setCurrentPage((prev) => prev + 1);
+        }
+    };
+
+    useEffect(() => {
+        getVideos({ page: currentPage, limit: apiConfig.PAGE_SIZE });
+    }, [currentPage, getVideos]);
+
+    useEffect(() => {
+        if (!isLoading && !error && videos) {
+            setOptions((prevOptions) => {
+                const newOptions = videos.results.map((video) => ({
+                    key: String(video.id),
+                    label: video.title,
+                    value: video.id,
+                }));
+
+                const updatedOptions = [...prevOptions, ...newOptions];
+
+                const uniqueOptions = updatedOptions.reduce((acc, current) => {
+                    const x = acc.find((item) => item.value === current.value);
+                    if (!x) {
+                        return acc.concat([current] as ValueType[]);
+                    } else {
+                        return acc;
+                    }
+                }, [] as ValueType[]);
+
+                return uniqueOptions as ValueType[];
+            });
+        }
+    }, [videos, isLoading, error]);
+
+    useEffect(() => {
+        if (form && form.getFieldValue("videoTitle") && props.value) {
+            setOptions((prevOptions) => {
+                const newOption = {
+                    key: String(props.value),
+                    label: form.getFieldValue("videoTitle"),
+                    value: props.value,
+                };
+
+                const updatedOptions = [...prevOptions, newOption];
+
+                const uniqueOptions = updatedOptions.reduce((acc, current) => {
+                    const x = acc.find((item) => item.value === current.value);
+                    if (!x) {
+                        return acc.concat([current] as ValueType[]);
+                    } else {
+                        return acc;
+                    }
+                }, [] as ValueType[]);
+
+                return uniqueOptions as ValueType[];
+            });
+        }
+    }, [form, props.value]);
+
+    return (
+        <Select
+            showSearch
+            filterOption={false}
+            onSearch={debounceFetcher}
+            notFoundContent={fetching ? <Spin size="small" /> : null}
+            {...props}
+            onPopupScroll={handlePopupScroll}
+            options={options}
+        />
+    );
+};
+
+export default DebounceSelect;
diff --git a/client/components/common/index.ts b/client/components/common/index.ts
@@ -1,6 +1,8 @@
 import Loader from "./Loader";
+import DebounceSelect from "./DebounceSelect";
 
 const Common = {
+    DebounceSelect,
     Loader,
 };
 

diff --git a/client/helpers/generateQueryUrl.ts b/client/helpers/generateQueryUrl.ts
@@ -1,8 +1,8 @@
-import { VideosQueryParams } from "../interfaces";
+import { QuizzesQueryParams, VideosQueryParams } from "../interfaces";
 
 export default function generateQueryUrl(
     url: string,
-    params: VideosQueryParams
+    params: VideosQueryParams | QuizzesQueryParams
 ) {
     let query = url + "?";
     for (const [key, value] of Object.entries(params)) {

diff --git a/client/interfaces/index.ts b/client/interfaces/index.ts
@@ -1,9 +1,12 @@
+import { FormInstance, FormProps } from "antd";
+import type { SelectProps } from "antd/es/select";
 export interface VideosQueryParams {
     title?: string;
     description?: string;
     sortBy?: string;
     page?: number;
     limit?: number;
+    search?: string;
 }
 
 export interface Videos {
@@ -22,3 +25,45 @@ export interface Video {
     thumbnail: string;
     duration: number;
 }
+
+export interface QuizzesQueryParams {
+    question?: string;
+    videoId?: string;
+    sortBy?: string;
+    page?: number;
+    limit?: number;
+}
+
+export interface Quizzes {
+    results: Quizz[];
+    totalResults: number;
+    limit: number;
+    page: number;
+    totalPages: number;
+}
+
+export interface Quizz {
+    id: string;
+    question: string;
+    video: string | Video;
+    options: Options[];
+}
+
+export interface QuizzParams {
+    question: string;
+    video: string;
+    options: Options[];
+}
+
+export interface Options {
+    option: string;
+    isCorrect: boolean;
+}
+
+export type ModalType = "add" | "edit" | "show";
+
+export interface DebounceSelectProps<ValueType = any>
+    extends Omit<SelectProps<ValueType | ValueType[]>, "options" | "children"> {
+    debounceTimeout?: number;
+    form?: FormInstance<any>;
+}
diff --git a/client/pages/admin/index.tsx b/client/pages/admin/index.tsx
@@ -4,7 +4,9 @@ import Head from "next/head";
 import { useState } from "react";
 import { Auth } from "../../components";
 import { apiConfig } from "../../configs";
+import { useGetQuizzesQuery } from "../../redux/features/quizzes/quizzesApi";
 import { useGetVideosQuery } from "../../redux/features/videos/videosApi";
+import { NumberOutlined } from "@ant-design/icons";
 
 const Dashboard: NextPage = () => {
     const [currentPage, setCurrentPage] = useState(1);
@@ -16,6 +18,14 @@ const Dashboard: NextPage = () => {
         page: currentPage,
         limit: apiConfig.PAGE_SIZE,
     });
+    const {
+        data: quizzes,
+        isLoading: isGetQuizzesLoading,
+        error: getQuizzesError,
+    } = useGetQuizzesQuery({
+        page: currentPage,
+        limit: apiConfig.PAGE_SIZE,
+    });
 
     return (
         <Auth.AdminOnly>
@@ -30,7 +40,14 @@ const Dashboard: NextPage = () => {
                                 textAlign: "center",
                                 fontWeight: "bold",
                             }}
-                            value={videos?.totalResults}
+                            prefix={<NumberOutlined />}
+                            value={
+                                (!isGetVideosLoading &&
+                                    !getVideosError &&
+                                    videos &&
+                                    videos.totalResults) ||
+                                0
+                            }
                         />
                     </Card>
                 </Col>
@@ -41,7 +58,14 @@ const Dashboard: NextPage = () => {
                                 textAlign: "center",
                                 fontWeight: "bold",
                             }}
-                            value={videos?.totalResults}
+                            prefix={<NumberOutlined />}
+                            value={
+                                (!isGetQuizzesLoading &&
+                                    !getQuizzesError &&
+                                    quizzes &&
+                                    quizzes.totalResults) ||
+                                0
+                            }
                         />
                     </Card>
                 </Col>
@@ -52,7 +76,8 @@ const Dashboard: NextPage = () => {
                                 textAlign: "center",
                                 fontWeight: "bold",
                             }}
-                            value={videos?.totalResults}
+                            prefix={<NumberOutlined />}
+                            value={0}
                         />
                     </Card>
                 </Col>
@@ -63,7 +88,8 @@ const Dashboard: NextPage = () => {
                                 textAlign: "center",
                                 fontWeight: "bold",
                             }}
-                            value={videos?.totalResults}
+                            prefix={<NumberOutlined />}
+                            value={0}
                         />
                     </Card>
                 </Col>