rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-18 11:59:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: init coursechapter + elements interface

Browse source
This commit is contained in:
swve 2022-10-22 23:03:36 +02:00
parent f492baf276
commit 19b7dd650e
16 changed files with 542 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

70
front/components/auth/HeaderProfileBox.tsx
View file

@ -2,53 +2,57 @@ import React from "react";
import styled from "styled-components";
import Link from "next/link";
import { AuthContext } from "../security/AuthProvider";
import { getBackendUrl } from "../../services/config";
export const HeaderProfileBox = () => {
const auth: any = React.useContext(AuthContext);
return (
<ProfileArea>
{" "}
<span>
HeaderProfileBox <br /> isLogged : {String(auth.isAuthenticated)} <br /> user : {String(auth.userInfo.username)}
</span>{" "}
<UnidentifiedArea>
<ul>
<li>
<Link href="/login">
<a>Login</a>
</Link>
</li>
<li>
<Link href="/signup">
<a>Sign up</a>
</Link>
</li>
</ul>
</UnidentifiedArea>
{!auth.isAuthenticated && (
<UnidentifiedArea>
<ul>
<li>
<Link href="/login">
<a>Login</a>
</Link>
</li>
<li>
<Link href="/signup">
<a>Sign up</a>
</Link>
</li>
</ul>
</UnidentifiedArea>
)}
{auth.isAuthenticated && <AccountArea>
<div>{auth.userInfo.username}</div>
<div><img src={`${getBackendUrl()}content/uploads/img/${auth.userInfo.avatar_url}`} alt="" /></div>
</AccountArea>}
</ProfileArea>
);
};
const AccountArea = styled.div`
padding-right: 20px;
display: flex;
place-items: center;
div{
margin-right: 10px;
}
img{
width: 29px;
border-radius: 19px;
}
`;
const ProfileArea = styled.div`
display: flex;
place-items: stretch;
place-items: center;
span {
position: relative;
display: block;
top: 32px;
right: -20px;
padding: 6px;
font-size: 12px;
margin: 3px;
// blur
background-color: #19191960;
border-radius: 5px;
color: white;
width: auto;
}
`;
const UnidentifiedArea = styled.div`

47
front/components/drags/chapter.tsx Normal file
View file

@ -0,0 +1,47 @@
import React from "react";
import styled from "styled-components";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import Element, { ElementWrapper } from "./element";
const ChapterWrapper = styled.div`
margin-bottom: 5px;
padding: 11px;
background-color: #00000010;
width: 310px;
display: block;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.19);
box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%);
transition: all 0.2s ease;
`;
function Chapter(props: any) {
return (
<Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
{(provided, snapshot) => (
<ChapterWrapper {...provided.dragHandleProps} {...provided.draggableProps} ref={provided.innerRef} isDragging={snapshot.isDragging} key={props.info.list.chapter.id}>
<h3>{props.info.list.chapter.title}</h3>
<Droppable droppableId={props.info.list.chapter.id} type="element">
{(provided) => (
<ElementsList {...provided.droppableProps} ref={provided.innerRef}>
{props.info.list.elements.map((element: any, index: any) => (
<Element key={element.id} element={element} index={index}></Element>
))}
{provided.placeholder}
</ElementsList>
)}
</Droppable>
</ChapterWrapper>
)}
</Draggable>
);
}
const ElementsList = styled.div`
padding: 10px;
`;
export default Chapter;

16
front/components/drags/data.ts Normal file
View file

@ -0,0 +1,16 @@
export const initialData = {
elements: {
"element-1": { id: "element-1", content: "First element" },
"element-2": { id: "element-2", content: "Second element" },
"element-3": { id: "element-3", content: "Third element" },
"element-4": { id: "element-4", content: "Fourth element" },
"element-5": { id: "element-5", content: "Fifth element" },
},
chapters: {
"chapter-1": { id: "chapter-1", title: "Chapter 1", elementIds: ["element-1", "element-2", "element-3", ] },
"chapter-2": { id: "chapter-2", title: "Chapter 2", elementIds: ["element-4"] },
"chapter-3": { id: "chapter-3", title: "Chapter 3", elementIds: ["element-5"] },
},
chapterOrder: ["chapter-1", "chapter-2", "chapter-3"],
};

31
front/components/drags/element.tsx Normal file
View file

@ -0,0 +1,31 @@
import React from "react";
import { Draggable } from "react-beautiful-dnd";
import styled from "styled-components";
function Element(props: any) {
return (
<Draggable draggableId={props.element.id} index={props.index}>
{(provided) => (
<ElementWrapper {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
{props.element.content}
</ElementWrapper>
)}
</Draggable>
);
}
export const ElementWrapper = styled.div`
padding: 10px;
padding-left: 17px;
list-style: none;
/* padding-left: 2px; */
background-color: #8c949c33;
border-radius: 28px;
margin: 15px;
&:hover {
background-color: #8c949c7b;
}
`;
export default Element;

8
front/components/security/AuthProvider.tsx
View file

@ -34,11 +34,15 @@ const AuthProvider = (props: any) => {
}
}
// TODO(mvp) : fix performance issues > no need to check auth on every render
useEffect(() => {
if (!auth.isAuthenticated) {
if (auth.isLoading) {
checkAuth();
}
return () => {
auth.isLoading = false;
}
}, []);
return <AuthContext.Provider value={auth}>{props.children}</AuthContext.Provider>;

2
front/next.config.js
View file

@ -1,6 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
reactStrictMode: false,
swcMinify: true,
compiler: {
styledComponents: true,

247
front/package-lock.json generated
View file

@ -8,15 +8,18 @@
"name": "learnhouse",
"version": "0.1.0",
"dependencies": {
"crypto": "^1.0.1",
"framer-motion": "^7.3.6",
"next": "12.3.1",
"react": "18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "18.2.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"@types/node": "18.7.18",
"@types/react": "18.0.20",
"@types/react-beautiful-dnd": "^13.1.2",
"@types/react-dom": "18.0.6",
"@types/styled-components": "^5.1.26",
"autoprefixer": "^10.4.12",
@ -221,7 +224,6 @@
"version": "7.19.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
"integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
"dev": true,
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
@ -748,7 +750,6 @@
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dev": true,
"dependencies": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
@ -769,20 +770,27 @@
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"node_modules/@types/react": {
"version": "18.0.20",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.20.tgz",
"integrity": "sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-beautiful-dnd": {
"version": "13.1.2",
"resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz",
"integrity": "sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-dom": {
"version": "18.0.6",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
@ -792,11 +800,21 @@
"@types/react": "*"
}
},
"node_modules/@types/react-redux": {
"version": "7.1.24",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz",
"integrity": "sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==",
"dependencies": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/styled-components": {
"version": "5.1.26",
@ -1291,6 +1309,20 @@
"node": ">= 8"
}
},
"node_modules/crypto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/crypto/-/crypto-1.0.1.tgz",
"integrity": "sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig==",
"deprecated": "This package is no longer supported. It's now a built-in Node module. If you've depended on crypto, you should switch to the one that's built-in."
},
"node_modules/css-box-model": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
"integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
"dependencies": {
"tiny-invariant": "^1.0.6"
}
},
"node_modules/css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
@ -1312,8 +1344,7 @@
"node_modules/csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
"dev": true
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
},
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
@ -2728,6 +2759,11 @@
"node": ">=10"
}
},
"node_modules/memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@ -2884,7 +2920,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -3166,7 +3201,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@ -3202,6 +3236,11 @@
}
]
},
"node_modules/raf-schd": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
"integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
},
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@ -3213,6 +3252,24 @@
"node": ">=0.10.0"
}
},
"node_modules/react-beautiful-dnd": {
"version": "13.1.1",
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
"integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
"dependencies": {
"@babel/runtime": "^7.9.2",
"css-box-model": "^1.2.0",
"memoize-one": "^5.1.1",
"raf-schd": "^4.0.2",
"react-redux": "^7.2.0",
"redux": "^4.0.4",
"use-memo-one": "^1.1.1"
},
"peerDependencies": {
"react": "^16.8.5 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -3230,11 +3287,47 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-redux": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
"integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
"dependencies": {
"@babel/runtime": "^7.15.4",
"@types/react-redux": "^7.1.20",
"hoist-non-react-statics": "^3.3.2",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
},
"peerDependencies": {
"react": "^16.8.3 || ^17 || ^18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
}
}
},
"node_modules/react-redux/node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/redux": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
"dev": true
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"node_modules/regexp.prototype.flags": {
"version": "1.4.3",
@ -3606,6 +3699,11 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true
},
"node_modules/tiny-invariant": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
"integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
},
"node_modules/to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@ -3751,6 +3849,14 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-memo-one": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
"integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@ -3969,7 +4075,6 @@
"version": "7.19.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
"integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
@ -4325,7 +4430,6 @@
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dev": true,
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
@ -4346,20 +4450,27 @@
"@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"@types/react": {
"version": "18.0.20",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.20.tgz",
"integrity": "sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==",
"dev": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/react-beautiful-dnd": {
"version": "13.1.2",
"resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz",
"integrity": "sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/react-dom": {
"version": "18.0.6",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz",
@ -4369,11 +4480,21 @@
"@types/react": "*"
}
},
"@types/react-redux": {
"version": "7.1.24",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz",
"integrity": "sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==",
"requires": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/styled-components": {
"version": "5.1.26",
@ -4698,6 +4819,19 @@
"which": "^2.0.1"
}
},
"crypto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/crypto/-/crypto-1.0.1.tgz",
"integrity": "sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig=="
},
"css-box-model": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
"integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
"requires": {
"tiny-invariant": "^1.0.6"
}
},
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
@ -4716,8 +4850,7 @@
"csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
"dev": true
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
},
"damerau-levenshtein": {
"version": "1.0.8",
@ -5782,6 +5915,11 @@
"yallist": "^4.0.0"
}
},
"memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
},
"merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@ -5882,8 +6020,7 @@
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
},
"object-inspect": {
"version": "1.12.2",
@ -6080,7 +6217,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@ -6099,6 +6235,11 @@
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
"dev": true
},
"raf-schd": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
"integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
},
"react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@ -6107,6 +6248,20 @@
"loose-envify": "^1.1.0"
}
},
"react-beautiful-dnd": {
"version": "13.1.1",
"resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
"integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
"requires": {
"@babel/runtime": "^7.9.2",
"css-box-model": "^1.2.0",
"memoize-one": "^5.1.1",
"raf-schd": "^4.0.2",
"react-redux": "^7.2.0",
"redux": "^4.0.4",
"use-memo-one": "^1.1.1"
}
},
"react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -6121,11 +6276,38 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-redux": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
"integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
"requires": {
"@babel/runtime": "^7.15.4",
"@types/react-redux": "^7.1.20",
"hoist-non-react-statics": "^3.3.2",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
},
"dependencies": {
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
}
}
},
"redux": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
"requires": {
"@babel/runtime": "^7.9.2"
}
},
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
"dev": true
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
},
"regexp.prototype.flags": {
"version": "1.4.3",
@ -6371,6 +6553,11 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true
},
"tiny-invariant": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
"integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
},
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@ -6471,6 +6658,12 @@
"punycode": "^2.1.0"
}
},
"use-memo-one": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
"integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
"requires": {}
},
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

2
front/package.json
View file

@ -12,12 +12,14 @@
"framer-motion": "^7.3.6",
"next": "12.3.1",
"react": "18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "18.2.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"@types/node": "18.7.18",
"@types/react": "18.0.20",
"@types/react-beautiful-dnd": "^13.1.2",
"@types/react-dom": "18.0.6",
"@types/styled-components": "^5.1.26",
"autoprefixer": "^10.4.12",

9
front/pages/login.tsx
View file

@ -1,3 +1,4 @@
import Router from "next/router";
import React from "react";
import { Header } from "../components/ui/header";
import Layout from "../components/ui/layout";
@ -12,7 +13,13 @@ const Login = () => {
e.preventDefault();
console.log({ email, password });
alert(JSON.stringify({ email, password }));
loginAndGetToken(email, password);
try {
loginAndGetToken(email, password);
Router.push("/");
}
catch (e) {
console.log(e);
}
};
const handleEmailChange = (e: any) => {

160
front/pages/org/[orgslug]/course/[courseid]/edit/index.tsx Normal file
View file

@ -0,0 +1,160 @@
import React from "react";
import { useState, useEffect } from "react";
import styled from "styled-components";
import { Header } from "../../../../../../components/ui/header";
import Layout from "../../../../../../components/ui/layout";
import { Title } from "../../../../../../components/ui/styles/title";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { initialData } from "../../../../../../components/drags/data";
import Chapter from "../../../../../../components/drags/chapter";
function CourseEdit() {
const [data, setData] = useState(initialData) as any;
const [winReady, setwinReady] = useState(false);
useEffect(() => {
setwinReady(true);
}, []);
// get a list of chapters order by chapter order
const getChapters = () => {
return data.chapterOrder.map((chapterId: any) => {
const chapter = data.chapters[chapterId];
const elements = chapter.elementIds.map((elementId: any) => data.elements[elementId]);
return {
list: {
chapter: chapter,
elements: elements,
},
};
});
};
const onDragEnd = (result: any) => {
const { destination, source, draggableId, type } = result;
console.log(result);
// check if the element is dropped outside the droppable area
if (!destination) {
return;
}
// check if the element is dropped in the same place
if (destination.droppableId === source.droppableId && destination.index === source.index) {
return;
}
//////////////////////////// CHAPTERS ////////////////////////////
if (type === "chapter") {
const newChapterOrder = Array.from(data.chapterOrder);
newChapterOrder.splice(source.index, 1);
newChapterOrder.splice(destination.index, 0, draggableId);
const newState = {
...data,
chapterOrder: newChapterOrder,
};
console.log(newState);
setData(newState);
return;
}
//////////////////////// ELEMENTS IN SAME CHAPTERS ////////////////////////////
// check if the element is dropped in the same chapter
const start = data.chapters[source.droppableId];
const finish = data.chapters[destination.droppableId];
// check if the element is dropped in the same chapter
if (start === finish) {
// create new arrays for chapters and elements
const chapter = data.chapters[source.droppableId];
const newElementIds = Array.from(chapter.elementIds);
// remove the element from the old position
newElementIds.splice(source.index, 1);
// add the element to the new position
newElementIds.splice(destination.index, 0, draggableId);
const newChapter = {
...chapter,
elementIds: newElementIds,
};
const newState = {
...data,
chapters: {
...data.chapters,
[newChapter.id]: newChapter,
},
};
setData(newState);
return;
}
//////////////////////// ELEMENTS IN DIFF CHAPTERS ////////////////////////////
// check if the element is dropped in a different chapter
if (start !== finish) {
// create new arrays for chapters and elements
const startChapterElementIds = Array.from(start.elementIds);
// remove the element from the old position
startChapterElementIds.splice(source.index, 1);
const newStart = {
...start,
elementIds: startChapterElementIds,
};
// add the element to the new position within the chapter
const finishChapterElementIds = Array.from(finish.elementIds);
finishChapterElementIds.splice(destination.index, 0, draggableId);
const newFinish = {
...finish,
elementIds: finishChapterElementIds,
};
const newState = {
...data,
chapters: {
...data.chapters,
[newStart.id]: newStart,
[newFinish.id]: newFinish,
},
};
setData(newState);
return;
}
};
return (
<Layout>
<Header></Header>
<Title>Edit Course Chapters</Title>
<br />
{winReady && (
<ChapterlistWrapper>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="chapters" type="chapter">
{(provided) => (
<div key={"chapters"} {...provided.droppableProps} ref={provided.innerRef}>
{getChapters().map((info: any, index: any) => (
<Chapter key={index} info={info} index={index}></Chapter>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</ChapterlistWrapper>
)}
</Layout>
);
}
const ChapterlistWrapper = styled.div`
display: flex;
padding-left: 30px;
`;
export default CourseEdit;

11
front/pages/org/[orgslug]/course/[courseid].tsx → front/pages/org/[orgslug]/course/[courseid]/index.tsx
View file

@ -1,10 +1,10 @@
import { useRouter } from "next/router";
import React from "react";
import styled from "styled-components";
import Layout from "../../../../components/ui/layout";
import { getAPIUrl, getBackendUrl } from "../../../../services/config";
import { getCourse } from "../../../../services/courses";
import { getOrganizationContextInfo } from "../../../../services/orgs";
import Layout from "../../../../../components/ui/layout";
import { getAPIUrl, getBackendUrl } from "../../../../../services/config";
import { getCourse } from "../../../../../services/courses";
import { getOrganizationContextInfo } from "../../../../../services/orgs";
const CourseIdPage = () => {
const router = useRouter();
@ -26,7 +26,8 @@ const CourseIdPage = () => {
if (router.isReady) {
fetchCourseInfo();
}
}, [isLoading, router.isReady]);
return () => {};
}, [router.isReady]);
return (
<Layout>

0
front/pages/org/[orgslug]/course/[courseid]/new/chapters.tsx Normal file
View file

7
front/pages/org/[orgslug]/courses/index.tsx
View file

@ -72,7 +72,12 @@ const CoursesIndexPage = () => {
</a>
</Link>
<button onClick={() => deleteCourses(course.course_id)}>Delete</button>
<button style={{backgroundColor:"red" , border:"none"}} onClick={() => deleteCourses(course.course_id)}>Delete</button>
<Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
<a>
<button >Edit</button>
</a>
</Link>
</div>
))}
</div>

2
front/styles/globals.css
View file

@ -19,7 +19,7 @@ a {
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
body {
color: black;

2
front/tsconfig.json
View file

@ -15,6 +15,6 @@
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "components/drags/chapter.stsx"],
"exclude": ["node_modules"]
}

3
src/services/courses.py
View file

@ -37,15 +37,12 @@ class CourseElement(BaseModel):
element_id: str
content: str
content_type: str
position: int
class CourseChapter(BaseModel):
name: str
description: str
course: str
elements: List[CourseElement]
position: int
class CourseChapterInDB(CourseChapter):