105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
import { Button, Flex } from "antd";
|
|
import { CheckOutlined } from "@ant-design/icons";
|
|
import HeaderBar from "core/components/Header";
|
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
|
import { Constants } from "core/utils/utils";
|
|
import React, { useEffect } from "react";
|
|
import MyErrorResult from "shared/components/MyResult";
|
|
import MyEmpty from "shared/components/MyEmpty";
|
|
import { useGetLessonContentsQuery } from "core/services/lessons";
|
|
import MyMiddleCard from "shared/components/MyMiddleCard";
|
|
import { Converter } from "../converter";
|
|
import Questions from "../Questions";
|
|
import {
|
|
addWebSocketReconnectListener,
|
|
removeWebSocketReconnectListener,
|
|
} from "core/services/websocketService";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import {
|
|
lessonPageContents,
|
|
setLessonPageContents,
|
|
setLessonPageCurrentLessonId,
|
|
} from "./lessonPageSlice";
|
|
import MyCenteredSpin from "shared/components/MyCenteredSpin";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const LessonContents: React.FC = () => {
|
|
const dispatch = useDispatch();
|
|
const { lessonId } = useParams();
|
|
|
|
const lessonContents = useSelector(lessonPageContents);
|
|
|
|
const { data, error, isLoading, refetch } = useGetLessonContentsQuery(
|
|
lessonId as string,
|
|
{
|
|
refetchOnMountOrArgChange: true,
|
|
}
|
|
);
|
|
|
|
useEffect(() => {
|
|
dispatch(setLessonPageCurrentLessonId(lessonId as string));
|
|
addWebSocketReconnectListener(refetch);
|
|
|
|
return () => removeWebSocketReconnectListener(refetch);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!data) return;
|
|
|
|
dispatch(setLessonPageContents(data));
|
|
}, [data]);
|
|
|
|
if (isLoading) return <MyCenteredSpin height="140px" />;
|
|
if (error) return <MyErrorResult />;
|
|
|
|
if (!lessonContents || lessonContents.length === 0) return <MyEmpty />;
|
|
|
|
return (
|
|
<>
|
|
{lessonContents.map((lessonContent) => (
|
|
<div key={lessonContent.Id} style={{ paddingBottom: 6 }}>
|
|
<Converter mode="view" lessonContent={lessonContent} />
|
|
</div>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default function LessonPage() {
|
|
const { t } = useTranslation();
|
|
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<>
|
|
<HeaderBar
|
|
theme="light"
|
|
backTo={Constants.ROUTE_PATHS.LESSIONS.ROOT}
|
|
onEdit={() => navigate(`${location.pathname}/editor`)}
|
|
sticky
|
|
/>
|
|
|
|
<MyMiddleCard
|
|
outOfCardChildren={
|
|
<div style={{ marginTop: 24 }}>
|
|
<Questions />
|
|
</div>
|
|
}
|
|
>
|
|
<LessonContents />
|
|
|
|
<Flex justify="right">
|
|
<Button
|
|
type="primary"
|
|
icon={<CheckOutlined />}
|
|
onClick={() => navigate(Constants.ROUTE_PATHS.LESSIONS.ROOT)}
|
|
>
|
|
{t("lessonPage.finishLessonButton")}
|
|
</Button>
|
|
</Flex>
|
|
</MyMiddleCard>
|
|
</>
|
|
);
|
|
}
|