126 lines
3.0 KiB
TypeScript
126 lines
3.0 KiB
TypeScript
import { useNavigate, useParams } from "react-router-dom";
|
|
import {
|
|
lessonContents,
|
|
lessonThumbnail,
|
|
setEditorActive,
|
|
} from "./lessonPageEditorSlice";
|
|
import { useEffect } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { LessonContent } from "../LessonPage";
|
|
import { Card, Flex } from "antd";
|
|
import { Constants } from "../../../core/utils/utils";
|
|
import HeaderBar from "../../../core/components/Header";
|
|
import Droppable from "./Droppable";
|
|
import LessonPreviewCard from "../../../shared/components/MyLessonPreviewCard";
|
|
import {
|
|
useGetLessonPreviewQuery,
|
|
useUpdateLessonPreviewTitleMutation,
|
|
} from "core/services/lessons";
|
|
import MyErrorResult from "shared/components/MyResult";
|
|
import styles from "./styles.module.css";
|
|
|
|
const PreviewCard: React.FC = () => {
|
|
const { lessonId } = useParams();
|
|
|
|
const { data, error, isLoading, refetch } = useGetLessonPreviewQuery(
|
|
lessonId as string,
|
|
{
|
|
refetchOnMountOrArgChange: true,
|
|
}
|
|
);
|
|
|
|
const [updateLessonPreviewTitle, {}] = useUpdateLessonPreviewTitleMutation();
|
|
|
|
if (error) return <MyErrorResult />;
|
|
|
|
return (
|
|
<LessonPreviewCard
|
|
mode="editable"
|
|
lessonId={lessonId as string}
|
|
loading={isLoading}
|
|
lessonPreview={{
|
|
Title: data?.Title || "",
|
|
ThumbnailUrl: data?.ThumbnailUrl || "",
|
|
}}
|
|
onEditTitle={async (newTitle) => {
|
|
try {
|
|
const res = await updateLessonPreviewTitle({
|
|
lessonId: lessonId as string,
|
|
newTitle: newTitle,
|
|
}).unwrap();
|
|
|
|
if (res) {
|
|
refetch();
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}}
|
|
onThumbnailChanged={refetch}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default function LessonPageEditor() {
|
|
const { lessonId } = useParams();
|
|
const navigate = useNavigate();
|
|
|
|
const dispatch = useDispatch();
|
|
const lnContents = useSelector(lessonContents);
|
|
const lnThumbnail = useSelector(lessonThumbnail);
|
|
|
|
useEffect(() => {
|
|
dispatch(setEditorActive(true));
|
|
|
|
return () => {
|
|
dispatch(setEditorActive(false));
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<HeaderBar
|
|
theme="light"
|
|
backTo={Constants.ROUTE_PATHS.LESSIONS.PAGE.replace(
|
|
":lessonId",
|
|
lessonId as string
|
|
)}
|
|
onView={() =>
|
|
navigate(
|
|
Constants.ROUTE_PATHS.LESSIONS.PAGE.replace(
|
|
":lessonId",
|
|
lessonId as string
|
|
)
|
|
)
|
|
}
|
|
/>
|
|
|
|
<Flex justify="center" style={{ paddingTop: 24 }}>
|
|
<Flex
|
|
justify="center"
|
|
vertical
|
|
gap={16}
|
|
className={styles.cardContainer}
|
|
>
|
|
<PreviewCard />
|
|
|
|
<Card>
|
|
<Flex vertical gap={16}>
|
|
<Droppable items={lnContents} />
|
|
</Flex>
|
|
</Card>
|
|
</Flex>
|
|
</Flex>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function StandardEditorCompontent(type: number): LessonContent {
|
|
return {
|
|
id: Math.floor(Math.random() * 10000).toString(),
|
|
position: 1,
|
|
type: type,
|
|
data: "Some data",
|
|
};
|
|
}
|