dashboard

mail@pastecode.io avatar
unknown
jsx
2 years ago
18 kB
3
Indexable
Never
import { ExperimentOutlined } from "@ant-design/icons";
import { Box, ProgressCard } from "@components";
import { redirectTo } from "@lib";
import { ChartDonut, ChartLabel } from "@patternfly/react-charts";
import { welcome } from "@redux/actions";
import { colors } from "@styles/colors";
import useBreakpoint from "antd/lib/grid/hooks/useBreakpoint";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import Masonry from "react-masonry-css";
import { useDispatch, useSelector } from "react-redux";
import { useCurrentContext } from "src/hooks/useCurrentContext";
import { $axios } from "src/lib/axios";
import { fadeInAnimation } from "src/lib/sharedProps";
import ButtonNavigation from "src/components/ButtonNavigation/ButtonNavigation";

import dynamic from "next/dynamic";
import Skeleton from "antd/lib/skeleton";
import { Tag } from "antd";
const Text = dynamic(() => import("antd/lib/typography/Text"));
const Button = dynamic(() => import("antd/lib/button"));
const Tooltip = dynamic(() => import("antd/lib/tooltip"));

const Modal = dynamic(() => import("antd/lib/modal"));
const Dashboard = () => {
    const { user, displayWelcomeMessage } = useSelector(
        (state: any) => state.auth,
    );
    const [loading, setLoading] = useState(true);
    const [progress, setProgress]: any = useState({
        student_time_spent: {},
        subject_progress: [],
    });
    const dispatch = useDispatch();
    const breakpoints = useBreakpoint();
    const breakpointColumnsObj = {
        default: 4,
        1100: 3,
        700: 2,
        500: 1,
    };

    const { subjectId, chapterId } = useCurrentContext();

    const getProgress = async () => {
        try {
            setLoading(true);
            const progress = await $axios.get("/progress/dashboard/");
            setProgress(progress);
        } catch (error) {
            console.log(error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        getProgress();
    }, []);

    return (
        <>
            {breakpoints.xs && <ButtonNavigation />}
            <div className={`content-padding ${fadeInAnimation} mb-10`}>
                <Modal
                    title=""
                    footer=""
                    visible={displayWelcomeMessage}
                    onCancel={() => dispatch(welcome())}
                    width={breakpoints.lg ? "70%" : "100%"}
                >
                    <img src="/images/welcome.png" />
                </Modal>

                <h2 className="font-black text-xl my-5">
                    🙏 Welcome {user?.name}
                </h2>

                {loading ? (
                    <Masonry
                        breakpointCols={breakpointColumnsObj}
                        className="my-masonry-grid"
                        columnClassName="my-masonry-grid_column"
                    >
                        <Skeleton.Button
                            active
                            className="bg-light w-full h-52"
                        />
                        <Skeleton.Button
                            active
                            className="bg-light w-full h-52"
                        />
                        <Skeleton.Button
                            active
                            className="bg-light w-full h-80"
                        />
                        <Skeleton.Button
                            active
                            className="bg-light w-full h-52"
                        />
                        <Skeleton.Button
                            active
                            className="bg-light w-full h-52"
                        />
                        <Skeleton.Button
                            active
                            className="bg-light w-full h-52"
                        />
                        <Skeleton.Button
                            active
                            className="bg-light w-full h-52"
                        />
                        <Skeleton.Button
                            active
                            className="bg-light w-full h-52"
                        />
                    </Masonry>
                ) : (
                    <Masonry
                        breakpointCols={breakpointColumnsObj}
                        className="my-masonry-grid"
                        columnClassName="my-masonry-grid_column"
                    >
                        <Box
                            type="primary"
                            title="Study Notes"
                            subTitle="Study notes prepared by our expert tutors to revise for long term memory"
                            onClick={() =>
                                redirectTo(
                                    `/study/notes/${subjectId}/${
                                        chapterId || 0
                                    }`,
                                )
                            }
                        />
                        <div className="h-50 rounded-md w-full shadow-xl p-6 bg-white mb-5">
                            <div className="flex flex-row space-x-3 items-center my-2">
                                <h3 className="text-base my-2">Time Spent</h3>
                                <Text type="success">
                                    {progress?.student_time_spent.today} today
                                </Text>
                            </div>
                            <div className="flex justify-center items-center my-6 mb-6">
                                <div
                                    style={{ height: "230px", width: "350px" }}
                                >
                                    <ChartDonut
                                        constrainToVisibleArea={true}
                                        data={
                                            progress?.student_time_spent
                                                .courses_percentage === 0 &&
                                            progress?.student_time_spent
                                                .quizz_percentage === 0 &&
                                            progress?.student_time_spent
                                                .other_percentage === 0
                                                ? [
                                                      {
                                                          x: "Courses",
                                                          y: 30,
                                                      },
                                                      {
                                                          x: "Quizzes",
                                                          y: 30,
                                                      },
                                                      {
                                                          x: "Others",
                                                          y: 30,
                                                      },
                                                  ]
                                                : [
                                                      {
                                                          x: "Courses",
                                                          y:
                                                              progress
                                                                  ?.student_time_spent
                                                                  .courses_percentage,
                                                      },
                                                      {
                                                          x: "Quizzes",
                                                          y:
                                                              progress
                                                                  ?.student_time_spent
                                                                  .quizz_percentage,
                                                      },
                                                      {
                                                          x: "Others",
                                                          y:
                                                              progress
                                                                  ?.student_time_spent
                                                                  .other_percentage,
                                                      },
                                                  ]
                                        }
                                        colorScale={[
                                            colors.primary,
                                            colors.error,
                                            colors.success,
                                        ]}
                                        animate
                                        domainPadding={40}
                                        // labels={({ datum }) =>
                                        //     `${datum.x}: ${datum.y}%`
                                        // }
                                        // subTitle="Total Hours"
                                        title={
                                            progress?.student_time_spent.total
                                        }
                                        // subTitleComponent={
                                        //     <ChartLabel
                                        //         y={220}
                                        //         style={{
                                        //             fill: "black",
                                        //             fontSize: 20,
                                        //         }}
                                        //     />
                                        // }
                                        titleComponent={
                                            <ChartLabel
                                                y={200}
                                                style={{
                                                    fill: "black",
                                                    fontSize: 40,
                                                }}
                                            />
                                        }
                                        innerRadius={100}
                                        themeColor={colors.primary}
                                        height={400}
                                        width={350}
                                    />
                                </div>
                            </div>

                            <div className="text-sm">
                                <div className="flex justify-between my-2">
                                    <div className="flex space-x-2">
                                        <p className="text-primary">&#9679;</p>
                                        <p className="text-primary">Courses</p>
                                    </div>
                                    <p>
                                        {progress?.student_time_spent.courses}
                                    </p>
                                </div>
                                <div className="flex justify-between my-2">
                                    <div className="flex space-x-2">
                                        <p className="text-error">&#9679;</p>
                                        <p className="text-error">Quizzes</p>
                                    </div>
                                    <p>{progress?.student_time_spent.quizz}</p>
                                </div>
                                <div className="flex justify-between my-2">
                                    <div className="flex space-x-2">
                                        <Text type="success">&#9679;</Text>
                                        <Text type="success">Others</Text>
                                    </div>
                                    <p>{progress?.student_time_spent.other}</p>
                                </div>
                            </div>
                        </div>
                        <div className="h-50 rounded-md w-full shadow-xl p-6 bg-white mb-5">
                            <div className="flex flex-row space-x-3 items-center my-2">
                                <div>
                                    <h3 className="text-base my-2">
                                        Get Help From An Expert
                                    </h3>

                                    <p>
                                        Stuck in your homework or have any
                                        confusion in any subjects?
                                    </p>
                                </div>
                                <Image
                                    height={100}
                                    width={100}
                                    src="/images/man.png"
                                />
                            </div>
                            <p className="my-2">
                                Our experts can help you solve your doubts on 1
                                on 1 Call. Request a tutor now.
                            </p>
                            <Button
                                size="large"
                                type="primary"
                                className="w-full mt-3"
                                onClick={() => {
                                    window.open(
                                        "https://forms.gle/LZEoHBjynWGXK6Zp7",
                                        "_blank",
                                    );
                                }}
                            >
                                Request A Tutor
                            </Button>
                        </div>

                        <div className="h-50 rounded-md w-full shadow-xl p-6 bg-white mb-5">
                            <div className="flex justify-between">
                                <span className="text-xl font-bold">
                                    Test Results and Progress Analysis
                                    <br />
                                    <Tag
                                        className="text-xs"
                                        color={colors.secondary}
                                    >
                                        Under development
                                    </Tag>
                                </span>
                                <Tooltip title="Content Releasing Soon. Contact us on social media to get updates.">
                                    <ExperimentOutlined className="text-xl" />
                                </Tooltip>
                            </div>
                            <p className="my-2">
                                Check your practice results, see how you have
                                perfomed and what you can work more on.
                            </p>
                            <Image
                                className="h-48 rounded-lg"
                                alt="example"
                                src="/images/test-results.png"
                                width="100%"
                                height={80}
                                layout="responsive"
                            />
                        </div>
                        {progress?.subject_progress?.map(
                            ({
                                chapter_name,
                                completed_chapters,
                                subject_name,
                                total_chapters,
                                subject_id,
                                chapter_id,
                                subject_image,
                            }) => (
                                <ProgressCard
                                    key={chapter_id}
                                    tag={subject_name}
                                    percent={
                                        +(
                                            (completed_chapters /
                                                total_chapters) *
                                            100
                                        ).toFixed()
                                    }
                                    progress={`${completed_chapters}/${total_chapters}`}
                                    image={subject_image}
                                    chapterName={chapter_name}
                                    subjectId={subject_id}
                                    chapterId={chapter_id}
                                />
                            ),
                        )}
                    </Masonry>
                )}
            </div>
        </>
    );
};

export default Dashboard;