+
- }>
- Finish lesson
-
-
-
-
- );
+
+ }>
+ Finish lesson
+
+
+
+
+ );
}
diff --git a/src/features/Lessons/LessonPage/lessonPageSlice.ts b/src/features/Lessons/LessonPage/lessonPageSlice.ts
new file mode 100644
index 0000000..40fd8a5
--- /dev/null
+++ b/src/features/Lessons/LessonPage/lessonPageSlice.ts
@@ -0,0 +1,63 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { LessonContent } from "core/types/lesson";
+
+export const lessonPageSlice = createSlice({
+ name: "lessonPage",
+ initialState: {
+ currentLessonId: "",
+ lessonContents: [] as LessonContent[],
+ },
+ reducers: {
+ setLessonPageCurrentLessonId: (state, action) => {
+ state.currentLessonId = action.payload;
+ },
+ setLessonPageContents: (state, action) => {
+ state.lessonContents = action.payload;
+ },
+ addLessonPageContent: (state, action) => {
+ state.lessonContents.push(action.payload);
+ },
+ deleteLessonPageContent: (state, action) => {
+ state.lessonContents = state.lessonContents.filter(
+ (content) => content.Id !== action.payload
+ );
+ },
+ updateLessonPageContent: (state, action) => {
+ const index = state.lessonContents.findIndex(
+ (content) => content.Id === action.payload.id
+ );
+
+ if (index !== -1) {
+ state.lessonContents[index].Data = action.payload.data;
+ }
+ },
+ updateLessonPageContentPosition: (state, action) => {
+ // change only by contentId and new position
+ const content = state.lessonContents.find(
+ (content) => content.Id === action.payload.contentId
+ );
+
+ if (content) {
+ const index = state.lessonContents.indexOf(content);
+ state.lessonContents.splice(index, 1);
+ state.lessonContents.splice(action.payload.position - 1, 0, content);
+ }
+ },
+ },
+ selectors: {
+ lessonPageCurrentLessonId: (state) => state.currentLessonId,
+ lessonPageContents: (state) => state.lessonContents,
+ },
+});
+
+export const {
+ setLessonPageCurrentLessonId,
+ setLessonPageContents,
+ addLessonPageContent,
+ deleteLessonPageContent,
+ updateLessonPageContent,
+ updateLessonPageContentPosition,
+} = lessonPageSlice.actions;
+
+export const { lessonPageCurrentLessonId, lessonPageContents } =
+ lessonPageSlice.selectors;
diff --git a/src/features/Lessons/LessonPageEditor/SortableEditorItem.tsx b/src/features/Lessons/LessonPageEditor/SortableEditorItem.tsx
index e6b9a73..b8e6c48 100644
--- a/src/features/Lessons/LessonPageEditor/SortableEditorItem.tsx
+++ b/src/features/Lessons/LessonPageEditor/SortableEditorItem.tsx
@@ -1,94 +1,118 @@
-import { defaultAnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { HolderOutlined, DeleteOutlined, CameraOutlined, FolderOpenOutlined } from '@ant-design/icons';
-import { Flex } from 'antd';
-import { currentLessonId, deleteLessonContent, updateLessonContent } from './lessonPageEditorSlice';
-import { useDispatch, useSelector } from 'react-redux';
-import { getComponentByType } from '../components';
-import { LessonContent } from 'core/types/lesson';
-import './styles.module.css';
-import { Converter } from '../converter';
-import { useDeleteLessonContentMutation } from 'core/services/lessons';
+import { defaultAnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+ HolderOutlined,
+ DeleteOutlined,
+ CameraOutlined,
+ FolderOpenOutlined,
+} from "@ant-design/icons";
+import { Flex } from "antd";
+import {
+ currentLessonId,
+ deleteLessonContent,
+ updateLessonContent,
+} from "./lessonPageEditorSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { getComponentByType } from "../components";
+import { LessonContent } from "core/types/lesson";
+import "./styles.module.css";
+import { Converter } from "../converter";
+import { useDeleteLessonContentMutation } from "core/services/lessons";
-const animateLayoutChanges = (args: any) => (args.isSorting || args.wasDragging ? defaultAnimateLayoutChanges(args) : true);
+const animateLayoutChanges = (args: any) =>
+ args.isSorting || args.wasDragging ? defaultAnimateLayoutChanges(args) : true;
const SortableEditorItem = (props: { item: LessonContent }) => {
- const lnContent = props.item;
- const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: lnContent.Id });
+ const lnContent = props.item;
+ const {
+ attributes,
+ listeners,
+ setNodeRef,
+ transform,
+ transition,
+ isDragging,
+ } = useSortable({ id: lnContent.Id });
- const dispatch = useDispatch();
+ const dispatch = useDispatch();
- const component = getComponentByType(lnContent.Type);
+ const component = getComponentByType(lnContent.Type);
- const [reqDeleteLessonContent] = useDeleteLessonContentMutation();
- const currentLnId = useSelector(currentLessonId);
+ const [reqDeleteLessonContent] = useDeleteLessonContentMutation();
+ const currentLnId = useSelector(currentLessonId);
- if (!component) {
- return null;
- }
+ if (!component) {
+ return null;
+ }
- return (
-
+ );
};
/*
diff --git a/src/features/Lessons/LessonPageEditor/index.tsx b/src/features/Lessons/LessonPageEditor/index.tsx
index 9c4ee46..b12a587 100644
--- a/src/features/Lessons/LessonPageEditor/index.tsx
+++ b/src/features/Lessons/LessonPageEditor/index.tsx
@@ -1,120 +1,169 @@
-import { useNavigate, useParams } from 'react-router-dom';
-import { lessonContents, lessonThumbnail, setCurrentLessonId, setEditorActive, setLessonContents, setLessonState } from './lessonPageEditorSlice';
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-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 { useGetLessonContentsQuery, useGetLessonSettingsQuery, useUpdateLessonPreviewTitleMutation } from 'core/services/lessons';
-import MyErrorResult from 'shared/components/MyResult';
-import styles from './styles.module.css';
-import MyEmpty from 'shared/components/MyEmpty';
+import { useNavigate, useParams } from "react-router-dom";
+import {
+ lessonContents,
+ lessonThumbnail,
+ setCurrentLessonId,
+ setEditorActive,
+ setLessonContents,
+ setLessonThumbnailTitle,
+ setLessonThumbnailUrl,
+ setPageEditorLessonState,
+} from "./lessonPageEditorSlice";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+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 {
+ useGetLessonContentsQuery,
+ useGetLessonSettingsQuery,
+ useUpdateLessonPreviewTitleMutation,
+} from "core/services/lessons";
+import MyErrorResult from "shared/components/MyResult";
+import styles from "./styles.module.css";
+import MyEmpty from "shared/components/MyEmpty";
+import {
+ addWebSocketReconnectListener,
+ removeWebSocketReconnectListener,
+} from "core/services/websocketService";
const PreviewCard: React.FC = () => {
- const dispatch = useDispatch();
- const { lessonId } = useParams();
+ const dispatch = useDispatch();
+ const { lessonId } = useParams();
- const { data, error, isLoading, refetch } = useGetLessonSettingsQuery(lessonId as string, {
- refetchOnMountOrArgChange: true,
- });
+ const dataLessonThumbnail = useSelector(lessonThumbnail);
- const [updateLessonPreviewTitle] = useUpdateLessonPreviewTitleMutation();
+ const { data, error, isLoading, refetch } = useGetLessonSettingsQuery(
+ lessonId as string,
+ {
+ refetchOnMountOrArgChange: true,
+ }
+ );
- useEffect(() => {
- if (data?.State) dispatch(setLessonState(data.State));
- }, [data]);
+ const [updateLessonPreviewTitle] = useUpdateLessonPreviewTitleMutation();
- if (error) return
{group.category}
-
+
{group.components.map((component, i) => (
{
const store = configureStore({
@@ -15,6 +17,8 @@ const makeStore = (/* preloadedState */) => {
lessonPageEditor: lessonPageEditorSlice.reducer,
teamSlice: teamSlice.reducer,
[lessonsApi.reducerPath]: lessonsApi.reducer,
+ [lessonsSlice.reducerPath]: lessonsSlice.reducer,
+ [lessonPageSlice.reducerPath]: lessonPageSlice.reducer,
[organizationApi.reducerPath]: organizationApi.reducer,
[teamSlice.reducerPath]: teamSlice.reducer,
},
diff --git a/src/core/utils/webSocket.ts b/src/core/utils/webSocket.ts
index 6ef2078..9a33933 100644
--- a/src/core/utils/webSocket.ts
+++ b/src/core/utils/webSocket.ts
@@ -10,6 +10,15 @@ enum WebSocketReceivedMessagesCmds {
TeamAddedMember = 5,
TeamUpdatedMemberRole = 6,
TeamDeletedMember = 7,
+ LessonCreated = 8,
+ LessonPreviewTitleUpdated = 9,
+ LessonPreviewThumbnailUpdated = 10,
+ LessonStateUpdated = 11,
+ LessonAddedContent = 12,
+ LessonDeletedContent = 13,
+ LessonContentUpdated = 14,
+ LessonContentUpdatedPosition = 15,
+ LessonContentFileUpdated = 16,
}
export { WebSocketSendMessagesCmds, WebSocketReceivedMessagesCmds };
diff --git a/src/features/Lessons/LessonPage/index.tsx b/src/features/Lessons/LessonPage/index.tsx
index b519540..d0e1b66 100644
--- a/src/features/Lessons/LessonPage/index.tsx
+++ b/src/features/Lessons/LessonPage/index.tsx
@@ -1,63 +1,96 @@
-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 from 'react';
-import MySpin from 'shared/components/MySpin';
-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 { 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";
const LessonContents: React.FC = () => {
- const { lessonId } = useParams();
+ const dispatch = useDispatch();
+ const { lessonId } = useParams();
- const { data, error, isLoading } = useGetLessonContentsQuery(lessonId as string, {
- refetchOnMountOrArgChange: true,
- });
+ const lessonContents = useSelector(lessonPageContents);
- if (isLoading) return navigate(`${location.pathname}/editor`)} />
+ return (
+ <>
+ navigate(`${location.pathname}/editor`)}
+ />
-
-
- }
- >
-
+
+ }
+ >
+
-
- ))}
-
- );
+ return () => removeWebSocketReconnectListener(refetch);
+ }, []);
+
+ useEffect(() => {
+ if (!data) return;
+
+ dispatch(setLessonPageContents(data));
+ }, [data]);
+
+ if (isLoading) return
+
+ ))}
+
+ );
};
export default function LessonPage() {
- const location = useLocation();
- const navigate = useNavigate();
+ const location = useLocation();
+ const navigate = useNavigate();
- return (
- <>
-
+
+
+
+
-
-
-
-
- {
- console.log('edit', lnContent.Id, data);
+ {
+ console.log("edit", lnContent.Id, data);
- dispatch(
- updateLessonContent({
- id: lnContent.Id,
- data: data,
- })
- );
- }}
- />
-
+ dispatch(
+ updateLessonContent({
+ id: lnContent.Id,
+ data: data,
+ })
+ );
+ }}
+ />
+
-
-
+
+
+
- {
- console.log('delete', lnContent.Id);
- dispatch(deleteLessonContent(lnContent.Id));
+
+
-
-
- );
+ try {
+ reqDeleteLessonContent({
+ lessonId: currentLnId,
+ contentId: lnContent.Id,
+ });
+ } catch (err) {
+ console.error(err);
+ }
+ }}
+ />
+
+ {
+ console.log("delete", lnContent.Id);
+ dispatch(deleteLessonContent(lnContent.Id));
- try {
- reqDeleteLessonContent({
- lessonId: currentLnId,
- contentId: lnContent.Id,
- });
- } catch (err) {
- console.error(err);
- }
- }}
- />
-
-