init project
commit
5b19897740
|
|
@ -0,0 +1 @@
|
|||
https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-grid--basic-setup
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.6",
|
||||
"@dnd-kit/core": "^6.1.0",
|
||||
"@reduxjs/toolkit": "^2.2.7",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^16.18.106",
|
||||
"@types/react": "^18.3.4",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"antd": "^5.20.3",
|
||||
"i18next": "^23.7.6",
|
||||
"i18next-browser-languagedetector": "^7.2.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-i18next": "^13.5.0",
|
||||
"react-redux": "^9.1.2",
|
||||
"react-router-dom": "^6.19.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "BROWSER=none PORT=50261 react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from "react";
|
||||
import logo from "./logo.svg";
|
||||
import "./App.css";
|
||||
import { Button, ConfigProvider, Layout, theme } from "antd";
|
||||
import DashboardLayout from "./core/components/DashboardLayout";
|
||||
import { darkMode } from "./core/store/appSlice";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const { defaultAlgorithm, darkAlgorithm } = theme;
|
||||
|
||||
function App() {
|
||||
const isDarkMode = useSelector(darkMode)
|
||||
|
||||
console.info(
|
||||
"\n %c LMS %c v0.1.0 %c \n",
|
||||
"background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 3px 0 0 3px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)",
|
||||
"background-color: #bc81e0;background-image: linear-gradient(90deg, #e67e22, #9b59b6);color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 3px 3px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)",
|
||||
"background-color: transparent"
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: "100vh" }}>
|
||||
<ConfigProvider theme={{
|
||||
algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
|
||||
}}>
|
||||
<DashboardLayout />
|
||||
</ConfigProvider>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import { Route, Routes } from "react-router-dom";
|
||||
import { MySupsenseFallback } from "../../../shared/components/MySupsenseFallback";
|
||||
import { Constants } from "../../utils/utils";
|
||||
import Team from "../../../features/Team";
|
||||
import Roles from "../../../features/Roles";
|
||||
import WhatsNew from "../../../features/WhatsNew";
|
||||
import SuggestFeature from "../../../features/SuggestFeature";
|
||||
import ContactSupport from "../../../features/ContactSupport";
|
||||
import Lessons from "../../../features/Lessons";
|
||||
import Settings from "../../../features/Settings";
|
||||
import PageNotFound from "../../../features/PageNotFound";
|
||||
import LessonPage from "../../../features/Lessons/LessonPage";
|
||||
import LessonPageEditor from "../../../features/Lessons/LessonPageEditor";
|
||||
|
||||
export default function AppRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.LESSIONS.ROOT}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<Lessons />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.LESSIONS.PAGE}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<LessonPage />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.LESSIONS.PAGE_EDITOR}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<LessonPageEditor />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.ORGANIZATION_TEAM}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<Team />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.ORGANIZATION_ROLES}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<Roles />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.ORGANIZATION_SETTINGS}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<Settings />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.WHATS_NEW}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<WhatsNew />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.SUGGEST_FEATURE}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<SuggestFeature />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path={Constants.ROUTE_PATHS.CONTACT_SUPPORT}
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<ContactSupport />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="*"
|
||||
element={
|
||||
<MySupsenseFallback>
|
||||
<PageNotFound />
|
||||
</MySupsenseFallback>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import { Grid, Layout } from "antd";
|
||||
import PageContent from "../PageContent";
|
||||
import SideMenuDesktop from "../SideMenu/Desktop";
|
||||
import SideMenuMobile from "../SideMenu/Mobile";
|
||||
import { SideMenuContent, SideMenuEditorContent } from "../SideMenu";
|
||||
import { useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setIsSideMenuCollapsed } from "../SideMenu/sideMenuSlice";
|
||||
import { editorActive } from "../../../features/Lessons/LessonPageEditor/lessonPageEditorSlice";
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
export function SideMenu() {
|
||||
const screenBreakpoint = useBreakpoint();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const isEditorActive = useSelector(editorActive);
|
||||
|
||||
console.log("isEditorActive", isEditorActive);
|
||||
|
||||
const Content = () => {
|
||||
return isEditorActive ? <SideMenuEditorContent /> : <SideMenuContent />;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setIsSideMenuCollapsed(!screenBreakpoint.lg));
|
||||
}, [screenBreakpoint]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{screenBreakpoint.lg ? (
|
||||
<SideMenuDesktop>
|
||||
<Content />
|
||||
</SideMenuDesktop>
|
||||
) : (
|
||||
<SideMenuMobile>
|
||||
<Content />
|
||||
</SideMenuMobile>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardLayout() {
|
||||
return (
|
||||
<Layout style={{ minHeight: "100vh" }}>
|
||||
<Layout>
|
||||
<SideMenu />
|
||||
|
||||
<PageContent />
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
import { Avatar, Flex } from "antd";
|
||||
import {
|
||||
isSideMenuCollapsed,
|
||||
setIsSideMenuCollapsed,
|
||||
} from "../SideMenu/sideMenuSlice";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
EditOutlined,
|
||||
EyeOutlined,
|
||||
LeftOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MoonOutlined,
|
||||
SunOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { editorActive } from "../../../features/Lessons/LessonPageEditor/lessonPageEditorSlice";
|
||||
import { Link } from "react-router-dom";
|
||||
import { darkMode, setDarkMode } from "../../store/appSlice";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
type HeaderBarProps = {
|
||||
theme?: "light" | "dark";
|
||||
onView?: () => void;
|
||||
onEdit?: () => void;
|
||||
backTo?: string;
|
||||
};
|
||||
|
||||
export default function HeaderBar(props: HeaderBarProps = { theme: "light" }) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const isCollpased = useSelector(isSideMenuCollapsed);
|
||||
const isDarkMode = useSelector(darkMode);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
style={{
|
||||
paddingTop: 12,
|
||||
paddingLeft: 12,
|
||||
paddingRight: 12,
|
||||
}}
|
||||
>
|
||||
<Flex align="center" gap={16}>
|
||||
<div
|
||||
className={
|
||||
props.theme === "light"
|
||||
? styles.containerLight
|
||||
: styles.containerDark
|
||||
}
|
||||
style={{ borderRadius: 28, padding: 4 }}
|
||||
>
|
||||
{isCollpased ? (
|
||||
<div
|
||||
className={styles.iconContainer}
|
||||
onClick={() => dispatch(setIsSideMenuCollapsed(false))}
|
||||
>
|
||||
<MenuUnfoldOutlined className={styles.icon} />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={styles.iconContainer}
|
||||
onClick={() => dispatch(setIsSideMenuCollapsed(true))}
|
||||
>
|
||||
<MenuFoldOutlined className={styles.icon} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{props.backTo && (
|
||||
<Link to={props.backTo}>
|
||||
<Flex gap={4}>
|
||||
<LeftOutlined />
|
||||
<span>Back</span>
|
||||
</Flex>
|
||||
</Link>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
align="center"
|
||||
className={
|
||||
props.theme === "light" ? styles.containerLight : styles.containerDark
|
||||
}
|
||||
style={{
|
||||
borderRadius: 28,
|
||||
paddingLeft: 6,
|
||||
paddingRight: 6,
|
||||
paddingTop: 4,
|
||||
paddingBottom: 4,
|
||||
}}
|
||||
gap={8}
|
||||
>
|
||||
{props.onView && (
|
||||
<div className={styles.iconContainer} onClick={props.onView}>
|
||||
<EyeOutlined className={styles.icon} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.onEdit && (
|
||||
<div className={styles.iconContainer} onClick={props.onEdit}>
|
||||
<EditOutlined className={styles.icon} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isDarkMode ? (
|
||||
<div
|
||||
className={styles.iconContainer}
|
||||
onClick={() => dispatch(setDarkMode(false))}
|
||||
>
|
||||
<SunOutlined className={styles.icon} />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={styles.iconContainer}
|
||||
onClick={() => dispatch(setDarkMode(true))}
|
||||
>
|
||||
<MoonOutlined className={styles.icon} />
|
||||
</div>
|
||||
)}
|
||||
<Avatar size="default" icon={<UserOutlined />} />
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
/* return (
|
||||
<Header
|
||||
style={{
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: 0,
|
||||
background: "#fff",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
icon={isCollpased ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
onClick={() =>
|
||||
dispatch(setIsSideMenuCollapsed(!isCollpased))
|
||||
}
|
||||
style={{ fontSize: 16, width: 64, height: 64 }}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Link to={Constants.ROUTE_PATHS.LESSIONS.PAGE_EDITOR}>
|
||||
<EditOutlined
|
||||
style={{
|
||||
fontSize: 20,
|
||||
width: 64,
|
||||
height: 64,
|
||||
justifyContent: "center",
|
||||
}}
|
||||
onClick={() => dispatch(setEditorActive(!isEditorActive))}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{isDarkMode ? (
|
||||
<SunOutlined
|
||||
style={{
|
||||
fontSize: 20,
|
||||
width: 64,
|
||||
height: 64,
|
||||
justifyContent: "center",
|
||||
}}
|
||||
onClick={() => dispatch(setDarkMode(false))}
|
||||
/>
|
||||
) : (
|
||||
<MoonOutlined
|
||||
style={{
|
||||
fontSize: 20,
|
||||
width: 64,
|
||||
height: 64,
|
||||
justifyContent: "center",
|
||||
}}
|
||||
onClick={() => {
|
||||
dispatch(setDarkMode(true));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Header>
|
||||
); */
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
.containerLight {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.containerDark {
|
||||
background-color: rgba(0, 0, 0, 0.22);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: 6px;
|
||||
border-radius: 28px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.iconContainer:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { Layout } from "antd";
|
||||
import { Content } from "antd/es/layout/layout";
|
||||
import HeaderMenu from "../Header";
|
||||
import AppRoutes from "../AppRoutes";
|
||||
import { useSelector } from "react-redux";
|
||||
import { isSideMenuCollapsed } from "../SideMenu/sideMenuSlice";
|
||||
import { BreakpointLgWidth } from "../../utils/utils";
|
||||
|
||||
export default function PageContent() {
|
||||
const isCollpased = useSelector(isSideMenuCollapsed);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
style={{
|
||||
marginLeft:
|
||||
isCollpased || window.document.body.clientWidth < BreakpointLgWidth
|
||||
? 0
|
||||
: 200,
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
<AppRoutes />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import Sider from "antd/es/layout/Sider";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { isSideMenuCollapsed, setIsSideMenuCollapsed } from "../sideMenuSlice";
|
||||
|
||||
export default function SideMenuDesktop({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const dispatch = useDispatch();
|
||||
const isCollpased = useSelector(isSideMenuCollapsed);
|
||||
|
||||
return (
|
||||
<Sider
|
||||
theme="light"
|
||||
style={{
|
||||
overflow: "auto",
|
||||
height: "100vh",
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
breakpoint="lg"
|
||||
collapsedWidth={1}
|
||||
collapsed={isCollpased}
|
||||
onCollapse={(collapsed) => dispatch(setIsSideMenuCollapsed(collapsed))}
|
||||
>
|
||||
{children}
|
||||
</Sider>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { Drawer } from "antd";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { isSideMenuCollapsed, setIsSideMenuCollapsed } from "../sideMenuSlice";
|
||||
|
||||
export default function SideMenuMobile({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const dispatch = useDispatch();
|
||||
const isCollpased = useSelector(isSideMenuCollapsed);
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
open={!isCollpased}
|
||||
onClose={() => dispatch(setIsSideMenuCollapsed(true))}
|
||||
placement="left"
|
||||
styles={{ body: { padding: 0 } }}
|
||||
width={200}
|
||||
>
|
||||
{children}
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
import {
|
||||
ControlOutlined,
|
||||
GroupOutlined,
|
||||
MessageOutlined,
|
||||
PieChartOutlined,
|
||||
QuestionCircleOutlined,
|
||||
SettingOutlined,
|
||||
SnippetsOutlined,
|
||||
TeamOutlined,
|
||||
WalletOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Divider, Flex, Menu } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
setIsSideMenuCollapsed,
|
||||
setSideMenuComponentFirstRender,
|
||||
sideMenuComponentFirstRender,
|
||||
} from "./sideMenuSlice";
|
||||
import { ItemType, MenuItemType } from "antd/es/menu/interface";
|
||||
import { BreakpointLgWidth, Constants } from "../../utils/utils";
|
||||
import { useDraggable, useDroppable } from "@dnd-kit/core";
|
||||
import Search from "antd/es/input/Search";
|
||||
import { MyContainer } from "../../../shared/components/MyContainer";
|
||||
import { addLessonContent } from "../../../features/Lessons/LessonPageEditor/lessonPageEditorSlice";
|
||||
|
||||
export function SideMenuContent() {
|
||||
const location = useLocation();
|
||||
const [selectedKeys, setSelectedKeys] = useState("/");
|
||||
const [openKeys, setOpenKeys] = useState([""]);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const componentFirstRender = useSelector(sideMenuComponentFirstRender);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const getFirstMenuItems = (): ItemType<MenuItemType>[] => {
|
||||
let items: ItemType<MenuItemType>[] = [];
|
||||
|
||||
// overview
|
||||
|
||||
let overviewGroup: ItemType<MenuItemType> = {
|
||||
key: "overviewGroup",
|
||||
label: "OVERVIEW",
|
||||
type: "group",
|
||||
children: [],
|
||||
};
|
||||
|
||||
if (overviewGroup.children) {
|
||||
overviewGroup.children.push({
|
||||
key: Constants.ROUTE_PATHS.LESSIONS.ROOT,
|
||||
label: "Lessons",
|
||||
icon: <SnippetsOutlined />,
|
||||
});
|
||||
}
|
||||
|
||||
items.push(overviewGroup);
|
||||
|
||||
// organization
|
||||
|
||||
let organizationGroup: ItemType<MenuItemType> = {
|
||||
key: "organizationGroup",
|
||||
label: "ORGANIZATION",
|
||||
type: "group",
|
||||
children: [],
|
||||
};
|
||||
|
||||
if (organizationGroup.children) {
|
||||
organizationGroup.children.push({
|
||||
key: Constants.ROUTE_PATHS.ORGANIZATION_TEAM,
|
||||
label: "Team",
|
||||
icon: <TeamOutlined />,
|
||||
});
|
||||
|
||||
organizationGroup.children.push({
|
||||
key: Constants.ROUTE_PATHS.ORGANIZATION_ROLES,
|
||||
label: "Roles",
|
||||
icon: <ControlOutlined />,
|
||||
});
|
||||
|
||||
organizationGroup.children.push({
|
||||
key: Constants.ROUTE_PATHS.ORGANIZATION_SETTINGS,
|
||||
label: "Settings",
|
||||
icon: <SettingOutlined />,
|
||||
});
|
||||
}
|
||||
|
||||
items.push(organizationGroup);
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
const getSecondMenuItems = (): ItemType<MenuItemType>[] => {
|
||||
let items: ItemType<MenuItemType>[] = [];
|
||||
|
||||
// support
|
||||
|
||||
items.push({
|
||||
key: Constants.ROUTE_PATHS.WHATS_NEW,
|
||||
label: "What's New",
|
||||
icon: <QuestionCircleOutlined />,
|
||||
});
|
||||
|
||||
// feedback
|
||||
|
||||
items.push({
|
||||
key: Constants.ROUTE_PATHS.SUGGEST_FEATURE,
|
||||
label: "Suggest a Feature",
|
||||
icon: <MessageOutlined />,
|
||||
});
|
||||
|
||||
// payment plan
|
||||
|
||||
items.push({
|
||||
key: Constants.ROUTE_PATHS.CONTACT_SUPPORT,
|
||||
label: "Contact Support",
|
||||
icon: <WalletOutlined />,
|
||||
});
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const pathname = location.pathname;
|
||||
|
||||
setSelectedKeys(pathname);
|
||||
|
||||
let path = pathname.split("/");
|
||||
|
||||
if (path.length > 2) {
|
||||
// /store/:storeId/:subPage - open the store menu
|
||||
setOpenKeys([`/${path[1]}/${path[2]}`]);
|
||||
}
|
||||
|
||||
// auto close sideMenu on mobile
|
||||
// this will prevent to auto close sideMenu on first render as the useEffects will be called after the first render
|
||||
if (componentFirstRender) {
|
||||
dispatch(setSideMenuComponentFirstRender(false));
|
||||
} else if (document.body.clientWidth < BreakpointLgWidth) {
|
||||
dispatch(setIsSideMenuCollapsed(true));
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
overflowY: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
padding: 10,
|
||||
}}
|
||||
></div>
|
||||
|
||||
<div style={{ overflowY: "scroll" }}>
|
||||
<Menu
|
||||
mode="inline"
|
||||
onClick={(item) => navigate(item.key)}
|
||||
theme="light"
|
||||
selectedKeys={[selectedKeys]}
|
||||
items={getFirstMenuItems()}
|
||||
openKeys={openKeys}
|
||||
onOpenChange={(openKeys) =>
|
||||
setOpenKeys(
|
||||
openKeys[openKeys.length - 1]
|
||||
? [openKeys[openKeys.length - 1]]
|
||||
: []
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Divider style={{ margin: 0 }} />
|
||||
|
||||
<Menu
|
||||
selectable={true}
|
||||
selectedKeys={[selectedKeys]}
|
||||
mode="vertical"
|
||||
onClick={(item) => navigate(item.key)}
|
||||
items={getSecondMenuItems()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type ComponentGroup = {
|
||||
category: string;
|
||||
components: Component[];
|
||||
};
|
||||
|
||||
type Component = {
|
||||
type: number;
|
||||
name: string;
|
||||
thumbnail?: string;
|
||||
};
|
||||
|
||||
const componentsGroups: ComponentGroup[] = [
|
||||
{
|
||||
category: "General",
|
||||
components: [
|
||||
{
|
||||
type: 0,
|
||||
name: "Header",
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
name: "Text",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export function SideMenuEditorContent() {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<MyContainer>
|
||||
<Search
|
||||
placeholder="What would you like to insert?"
|
||||
style={{ paddingBottom: 16 }}
|
||||
/>
|
||||
|
||||
{componentsGroups.map((group, i) => (
|
||||
<div key={i}>
|
||||
<span>{group.category}</span>
|
||||
|
||||
<Flex gap={16} wrap style={{ paddingTop: 16 }}>
|
||||
{group.components.map((component, i) => (
|
||||
<Flex
|
||||
key={i}
|
||||
vertical
|
||||
align="center"
|
||||
justify="center"
|
||||
style={{
|
||||
backgroundColor: "#EBEBEB",
|
||||
height: 80,
|
||||
width: 80,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => {
|
||||
console.log("insert component", component.type);
|
||||
dispatch(addLessonContent(component.type));
|
||||
}}
|
||||
>
|
||||
<div>Thumbnail</div>
|
||||
<div>{component.name}</div>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
))}
|
||||
</MyContainer>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import { BreakpointLgWidth } from "../../utils/utils";
|
||||
|
||||
export const sideMenuSlice = createSlice({
|
||||
name: "sideMenu",
|
||||
initialState: {
|
||||
isSideMenuCollapsed: window.innerWidth < BreakpointLgWidth,
|
||||
sideMenuComponentFirstRender: true,
|
||||
},
|
||||
reducers: {
|
||||
setIsSideMenuCollapsed: (state, action) => {
|
||||
state.isSideMenuCollapsed = action.payload;
|
||||
},
|
||||
setSideMenuComponentFirstRender: (state, action) => {
|
||||
state.sideMenuComponentFirstRender = action.payload;
|
||||
},
|
||||
},
|
||||
selectors: {
|
||||
isSideMenuCollapsed: (state) => state.isSideMenuCollapsed,
|
||||
sideMenuComponentFirstRender: (state) => state.sideMenuComponentFirstRender,
|
||||
},
|
||||
});
|
||||
|
||||
export const { setIsSideMenuCollapsed, setSideMenuComponentFirstRender } =
|
||||
sideMenuSlice.actions;
|
||||
|
||||
export const { isSideMenuCollapsed, sideMenuComponentFirstRender } =
|
||||
sideMenuSlice.selectors;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
export const appSlice = createSlice({
|
||||
name: "app",
|
||||
initialState: {
|
||||
darkMode: false,
|
||||
},
|
||||
reducers: {
|
||||
setDarkMode: (state, action) => {
|
||||
state.darkMode = action.payload;
|
||||
},
|
||||
},
|
||||
selectors: {
|
||||
darkMode: (state) => state.darkMode,
|
||||
},
|
||||
})
|
||||
|
||||
export const { setDarkMode } = appSlice.actions;
|
||||
|
||||
export const { darkMode } = appSlice.selectors;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import { setupListeners } from "@reduxjs/toolkit/query";
|
||||
import { sideMenuSlice } from "../components/SideMenu/sideMenuSlice";
|
||||
import { lessonPageEditorSlice } from "../../features/Lessons/LessonPageEditor/lessonPageEditorSlice";
|
||||
import { appSlice } from "./appSlice";
|
||||
|
||||
export const makeStore = (/* preloadedState */) => {
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
app: appSlice.reducer,
|
||||
sideMenu: sideMenuSlice.reducer,
|
||||
lessonPageEditor: lessonPageEditorSlice.reducer,
|
||||
// counter: counterSlice.reducer,
|
||||
},
|
||||
// preloadedState,
|
||||
});
|
||||
|
||||
setupListeners(store.dispatch);
|
||||
return store;
|
||||
};
|
||||
|
||||
export const store = makeStore();
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
export const Constants = {
|
||||
ROUTE_PATHS: {
|
||||
LESSIONS: {
|
||||
ROOT: "/lessons",
|
||||
PAGE: "/lessons/:lessonId",
|
||||
PAGE_EDITOR: "/lessons/:lessonId/editor",
|
||||
},
|
||||
ORGANIZATION_TEAM: "/team",
|
||||
ORGANIZATION_ROLES: "/roles",
|
||||
ORGANIZATION_SETTINGS: "/organization",
|
||||
WHATS_NEW: "/whats-new",
|
||||
SUGGEST_FEATURE: "/suggest-feature",
|
||||
CONTACT_SUPPORT: "/contact-support",
|
||||
},
|
||||
};
|
||||
|
||||
// used for sideMenu
|
||||
export const BreakpointLgWidth = 992;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default function ContactSupport() {
|
||||
return (
|
||||
<>
|
||||
<h1>ContactSupport</h1>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
import { Button, Card, Flex, Typography } from "antd";
|
||||
|
||||
import img from "./pexels-photo-302902.webp";
|
||||
import { MyContainer } from "../../../shared/components/MyContainer";
|
||||
import { CheckOutlined } from "@ant-design/icons";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { lessonContents } from "../LessonPageEditor/lessonPageEditorSlice";
|
||||
import HeaderBar from "../../../core/components/Header";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { Constants } from "../../../core/utils/utils";
|
||||
|
||||
export type LessonContent = {
|
||||
id: string;
|
||||
position: number;
|
||||
type: number;
|
||||
data: string;
|
||||
};
|
||||
|
||||
const LessonContents = [
|
||||
{
|
||||
id: "0",
|
||||
position: 1,
|
||||
type: 0,
|
||||
data: "How to clean the coffee machine",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
position: 1,
|
||||
type: 2,
|
||||
data: img,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
position: 2,
|
||||
type: 1,
|
||||
data: "The proper cleaning of the coffee machine",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
position: 3,
|
||||
type: 1,
|
||||
data: "Think a moment in silence. What makes you really happy? Are you the only one with this? Probably you could sell this knowledge to others! Think about it",
|
||||
},
|
||||
] as LessonContent[];
|
||||
|
||||
export function Converter({
|
||||
mode,
|
||||
lessonContent,
|
||||
onEdit,
|
||||
}: {
|
||||
mode: "view" | "edititable";
|
||||
lessonContent: LessonContent;
|
||||
onEdit?: (newData: string) => void;
|
||||
}) {
|
||||
// const dispatch = useDispatch();
|
||||
// const contents = useSelector(lessonContents);
|
||||
|
||||
switch (lessonContent.type) {
|
||||
case 0:
|
||||
return mode === "view" ? (
|
||||
<div style={{ fontWeight: "bold", fontSize: 24 }}>
|
||||
{lessonContent.data}
|
||||
</div>
|
||||
) : (
|
||||
<Typography.Title
|
||||
editable={{
|
||||
triggerType: "text" as any,
|
||||
onChange: (event) => onEdit?.(event),
|
||||
}}
|
||||
level={1}
|
||||
style={{
|
||||
margin: 0,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{lessonContent.data}
|
||||
</Typography.Title>
|
||||
);
|
||||
case 1:
|
||||
return mode === "view" ? (
|
||||
<div style={{ fontSize: 16 }}>{lessonContent.data}</div>
|
||||
) : (
|
||||
<Typography.Text
|
||||
editable={{
|
||||
triggerType: "text" as any,
|
||||
onChange: (event) => onEdit?.(event),
|
||||
}}
|
||||
style={{
|
||||
margin: 0,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{lessonContent.data}
|
||||
</Typography.Text>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<img src={lessonContent.data} alt="img" style={{ width: "100%" }} />
|
||||
);
|
||||
case 3:
|
||||
return (
|
||||
<div style={{ fontWeight: "700", fontSize: 20 }}>
|
||||
{lessonContent.data}
|
||||
</div>
|
||||
);
|
||||
case 3:
|
||||
return <div style={{ fontSize: 14 }}>{lessonContent.data}</div>;
|
||||
default:
|
||||
return <div>Unknown type</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default function LessonPage() {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeaderBar
|
||||
theme="light"
|
||||
backTo={Constants.ROUTE_PATHS.LESSIONS.ROOT}
|
||||
onEdit={() =>
|
||||
navigate(`${location.pathname}/editor`)}
|
||||
/>
|
||||
|
||||
<MyContainer>
|
||||
<Flex justify="center">
|
||||
<Card
|
||||
style={{
|
||||
width: 800,
|
||||
maxWidth: 800,
|
||||
}}
|
||||
>
|
||||
{LessonContents.map((lessonContent) => (
|
||||
<div key={lessonContent.id} style={{ paddingBottom: 6 }}>
|
||||
<Converter mode="view" lessonContent={lessonContent} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Flex justify="right">
|
||||
<Button type="primary" icon={<CheckOutlined />}>
|
||||
Finish lesson
|
||||
</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Flex>
|
||||
</MyContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
|
|
@ -0,0 +1,128 @@
|
|||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
deleteLessonContent,
|
||||
lessonContents,
|
||||
lessonThumbnail,
|
||||
setEditorActive,
|
||||
setLessonContent,
|
||||
setLessonThumbnailTitle,
|
||||
} from "./lessonPageEditorSlice";
|
||||
import { useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Converter, LessonContent } from "../LessonPage";
|
||||
import { Card, Flex, Typography } from "antd";
|
||||
import { DeleteOutlined } from "@ant-design/icons";
|
||||
import { Constants } from "../../../core/utils/utils";
|
||||
import HeaderBar from "../../../core/components/Header";
|
||||
import img from "../LessonPage/pexels-photo-302902.webp";
|
||||
|
||||
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}>
|
||||
<Card
|
||||
style={{
|
||||
width: 800,
|
||||
maxWidth: 800,
|
||||
}}
|
||||
>
|
||||
<Flex vertical={false} style={{ gap: 16 }}>
|
||||
<img src={img} alt="img1" style={{ height: 140 }} />
|
||||
|
||||
<Flex align="center" style={{ width: "100%" }}>
|
||||
<Typography.Title
|
||||
level={2}
|
||||
editable={{
|
||||
triggerType: "text" as any,
|
||||
tooltip: "click to edit text",
|
||||
onChange: (event) =>
|
||||
dispatch(setLessonThumbnailTitle(event)),
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{lnThumbnail.title}
|
||||
</Typography.Title>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
style={{
|
||||
width: 800,
|
||||
maxWidth: 800,
|
||||
}}
|
||||
>
|
||||
<Flex vertical gap={16}>
|
||||
{lnContents.map((lnContent) => (
|
||||
<Flex key={lnContent.id}>
|
||||
<Converter
|
||||
mode="edititable"
|
||||
lessonContent={lnContent}
|
||||
onEdit={(data) =>
|
||||
dispatch(
|
||||
setLessonContent({
|
||||
id: lnContent.id,
|
||||
data: data,
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<DeleteOutlined
|
||||
onClick={() => {
|
||||
console.log("delete", lnContent.id);
|
||||
dispatch(deleteLessonContent(lnContent.id));
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
</Card>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function StandardEditorCompontent(type: number): LessonContent {
|
||||
return {
|
||||
id: Math.floor(Math.random() * 100).toString(),
|
||||
position: 1,
|
||||
type: type,
|
||||
data: "Some data",
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import { LessonContent } from "../LessonPage";
|
||||
import { StandardEditorCompontent } from ".";
|
||||
|
||||
export const lessonPageEditorSlice = createSlice({
|
||||
name: "lessonPageEditor",
|
||||
initialState: {
|
||||
editorActive: false,
|
||||
lessonThumbnail: {
|
||||
img: "",
|
||||
title: "Test",
|
||||
},
|
||||
lessonContents: [] as LessonContent[],
|
||||
},
|
||||
reducers: {
|
||||
setEditorActive: (state, action) => {
|
||||
state.editorActive = action.payload;
|
||||
},
|
||||
addLessonContent: (state, action) => {
|
||||
state.lessonContents.push(StandardEditorCompontent(action.payload));
|
||||
},
|
||||
deleteLessonContent: (state, action) => {
|
||||
state.lessonContents = state.lessonContents.filter(
|
||||
(content) => content.id !== action.payload
|
||||
);
|
||||
},
|
||||
setLessonContent: (state, action) => {
|
||||
const index = state.lessonContents.findIndex(
|
||||
(content) => content.id === action.payload.id
|
||||
);
|
||||
|
||||
state.lessonContents[index].data = action.payload.data;
|
||||
},
|
||||
setLessonThumbnailTitle: (state, action) => {
|
||||
state.lessonThumbnail.title = action.payload;
|
||||
},
|
||||
},
|
||||
selectors: {
|
||||
editorActive: (state) => state.editorActive,
|
||||
lessonContents: (state) => state.lessonContents,
|
||||
lessonThumbnail: (state) => state.lessonThumbnail,
|
||||
},
|
||||
});
|
||||
|
||||
export const {
|
||||
setEditorActive,
|
||||
addLessonContent,
|
||||
deleteLessonContent,
|
||||
setLessonContent,
|
||||
setLessonThumbnailTitle,
|
||||
} = lessonPageEditorSlice.actions;
|
||||
|
||||
export const { editorActive, lessonContents, lessonThumbnail } =
|
||||
lessonPageEditorSlice.selectors;
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import { Button, Card, Flex, Segmented } from "antd";
|
||||
import MyBanner from "../../shared/components/MyBanner";
|
||||
import { MyContainer } from "../../shared/components/MyContainer";
|
||||
|
||||
import img1 from "./pexels-photo-1181625.webp";
|
||||
import img2 from "./pexels-photo-302894.webp";
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
BarsOutlined,
|
||||
CommentOutlined,
|
||||
PlusOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import Search, { SearchProps } from "antd/es/input/Search";
|
||||
import { Link } from "react-router-dom";
|
||||
import HeaderBar from "../../core/components/Header";
|
||||
|
||||
function ListItem({ img, title }: { img: string; title: string }) {
|
||||
return (
|
||||
<Link to={"/lessons/aksdmaskdmsad"}>
|
||||
<Card>
|
||||
<Flex vertical={false} style={{ gap: 16 }}>
|
||||
<img src={img} alt="img1" style={{ height: 140 }} />
|
||||
|
||||
<Flex vertical justify="center">
|
||||
<div
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
fontSize: 36,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div>
|
||||
<CommentOutlined /> 12 comments
|
||||
</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
img: img1,
|
||||
title: "How to clean the coffee machine",
|
||||
},
|
||||
{
|
||||
img: img2,
|
||||
title: "How to clean the coffee machine",
|
||||
},
|
||||
{
|
||||
img: img1,
|
||||
title: "How to clean the coffee machine",
|
||||
},
|
||||
{
|
||||
img: img2,
|
||||
title: "How to clean the coffee machine",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Lessons() {
|
||||
const onSearch: SearchProps["onSearch"] = (value, _e, info) =>
|
||||
console.log(info?.source, value);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MyBanner title="Lessons" headerBar={<HeaderBar />} />
|
||||
|
||||
<MyContainer>
|
||||
<Flex justify="right" gap={16} style={{ paddingBottom: 16 }}>
|
||||
<Segmented
|
||||
options={[
|
||||
{ value: "List", icon: <BarsOutlined /> },
|
||||
{ value: "Kanban", icon: <AppstoreOutlined /> },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Button icon={<PlusOutlined />}>Create</Button>
|
||||
|
||||
<Search
|
||||
placeholder="Search..."
|
||||
onSearch={onSearch}
|
||||
style={{ width: 300 }}
|
||||
allowClear
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
<Flex vertical gap={16}>
|
||||
{data.map((item, index) => (
|
||||
<ListItem key={index} img={item.img} title={item.title} />
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
</MyContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
export default function PageNotFound() {
|
||||
return (
|
||||
<>
|
||||
<h1>PageNotFound</h1>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import HeaderBar from "../../core/components/Header";
|
||||
import MyBanner from "../../shared/components/MyBanner";
|
||||
import { MyContainer } from "../../shared/components/MyContainer";
|
||||
|
||||
export default function Roles() {
|
||||
return (
|
||||
<>
|
||||
<MyBanner title="Roles" subtitle="MANAGE" headerBar={
|
||||
<HeaderBar />
|
||||
} />
|
||||
|
||||
<MyContainer>
|
||||
<h1>Roles</h1>
|
||||
</MyContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import HeaderBar from "../../core/components/Header";
|
||||
import MyBanner from "../../shared/components/MyBanner";
|
||||
import { MyContainer } from "../../shared/components/MyContainer";
|
||||
|
||||
export default function Settings() {
|
||||
return (
|
||||
<>
|
||||
<MyBanner title="Settings" subtitle="MANAGE" headerBar={
|
||||
<HeaderBar />
|
||||
} />
|
||||
|
||||
<MyContainer>
|
||||
<h1>Settings</h1>
|
||||
</MyContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default function SuggestFeature() {
|
||||
return (
|
||||
<>
|
||||
<h1>SuggestFeature</h1>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import HeaderBar from "../../core/components/Header";
|
||||
import MyBanner from "../../shared/components/MyBanner";
|
||||
import { MyContainer } from "../../shared/components/MyContainer";
|
||||
|
||||
export default function Team() {
|
||||
return (
|
||||
<>
|
||||
<MyBanner title="Team" subtitle="MANAGE" headerBar={
|
||||
<HeaderBar />
|
||||
} />
|
||||
|
||||
<MyContainer>
|
||||
<h1>Team</h1>
|
||||
</MyContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default function WhatsNew() {
|
||||
return (
|
||||
<>
|
||||
<h1>WhatsNew</h1>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "./core/store/store";
|
||||
// import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<Provider store={store}>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
// reportWebVitals();
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { ReportHandler } from 'web-vitals';
|
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import img from "./pexels-photo-269077.jpeg";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
export default function MyBanner({
|
||||
title,
|
||||
subtitle,
|
||||
headerBar,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
headerBar?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={img}
|
||||
alt="banner"
|
||||
style={{
|
||||
height: 228,
|
||||
width: "100%",
|
||||
objectFit: "cover",
|
||||
userSelect: "none",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className={styles.gradientContainer}></div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
width: "100%",
|
||||
height: 228,
|
||||
}}
|
||||
>
|
||||
{headerBar}
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
paddingLeft: 24,
|
||||
paddingRight: 24,
|
||||
bottom: 24,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{subtitle && (
|
||||
<div style={{ fontSize: 12, color: "#A4A4A4" }}>{subtitle}</div>
|
||||
)}
|
||||
<div style={{ fontWeight: "bold", fontSize: 36, color: "#fff" }}>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 2,
|
||||
marginTop: 16,
|
||||
background: "rgba(253, 253, 253, 0.3)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
.gradientContainer {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
background: -moz-linear-gradient(
|
||||
56deg,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 0.8) 22%,
|
||||
rgba(0, 0, 0, 0.2) 100%
|
||||
);
|
||||
background: -webkit-linear-gradient(
|
||||
56deg,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 0.8) 22%,
|
||||
rgba(0, 0, 0, 0.2) 100%
|
||||
);
|
||||
background: linear-gradient(
|
||||
56deg,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 0.8) 22%,
|
||||
rgba(0, 0, 0, 0.2) 100%
|
||||
);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 228px;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Spin } from "antd";
|
||||
import { MyCenteredContainer } from "../MyContainer";
|
||||
|
||||
export default function MyCenteredSpin({ fullHeight = false }) {
|
||||
return (
|
||||
<MyCenteredContainer fullHeight>
|
||||
<Spin size="large" />
|
||||
</MyCenteredContainer>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { Content } from "antd/es/layout/layout";
|
||||
|
||||
export function MyContainer({ children }: { children: React.ReactNode }) {
|
||||
return <Content style={{ padding: 12 }}>{children}</Content>;
|
||||
}
|
||||
|
||||
export function MyCenteredContainer({
|
||||
children,
|
||||
fullHeight = false,
|
||||
height = "100vh",
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
fullHeight?: boolean;
|
||||
height?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
height: fullHeight ? height : "85.3vh",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { Spin } from "antd";
|
||||
import { Suspense } from "react";
|
||||
import MyCenteredSpin from "../MyCenteredSpin";
|
||||
|
||||
export function MySupsenseFallback({
|
||||
children,
|
||||
spinnerCentered = true,
|
||||
}: {
|
||||
children: any;
|
||||
spinnerCentered?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
spinnerCentered ? (
|
||||
<MyCenteredSpin fullHeight />
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingTop: 50,
|
||||
}}
|
||||
>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue