dashboard
unknown
jsx
3 years ago
18 kB
4
Indexable
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">●</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">●</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">●</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;
Editor is loading...