feat: courses refactor

This commit is contained in:
swve 2022-11-05 18:24:54 +01:00
parent 0572368a32
commit 34e0413ee7
11 changed files with 17 additions and 18 deletions

View file

@ -23,11 +23,11 @@ function Chapter(props: any) {
{(provided, snapshot) => (
<ChapterWrapper {...provided.dragHandleProps} {...provided.draggableProps} ref={provided.innerRef} isDragging={snapshot.isDragging} key={props.info.list.chapter.id}>
<h3>{props.info.list.chapter.name} <button onClick={() => {props.deleteChapter(props.info.list.chapter.id)}}>X</button></h3>
<Droppable droppableId={props.info.list.chapter.id} type="element">
<Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="element">
{(provided) => (
<ElementsList {...provided.droppableProps} ref={provided.innerRef}>
{props.info.list.elements.map((element: any, index: any) => (
<div key={element.id}> <Element key={element.id} element={element} index={index}></Element></div>
<Element key={element.id} element={element} index={index}></Element>
))}
{provided.placeholder}
</ElementsList>

View file

@ -4,9 +4,9 @@ import styled from "styled-components";
function Element(props: any) {
return (
<Draggable draggableId={props.element.id} index={props.index}>
<Draggable key={props.element.id} draggableId={props.element.id} index={props.index}>
{(provided) => (
<ElementWrapper {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<ElementWrapper key={props.element.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
{props.element.content}
</ElementWrapper>
)}

View file

@ -182,7 +182,7 @@ function CourseEdit() {
{winReady && (
<ChapterlistWrapper>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="chapters" type="chapter">
<Droppable key="chapters" droppableId="chapters" type="chapter">
{(provided) => (
<div key={"chapters"} {...provided.droppableProps} ref={provided.innerRef}>
{getChapters().map((info: any, index: any) => (

View file

@ -67,15 +67,16 @@ const CoursesIndexPage = () => {
<a>
<h2>{course.name}</h2>
<CourseWrapper>
<img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
</CourseWrapper>
<img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
</CourseWrapper>
</a>
</Link>
<button style={{backgroundColor:"red" , border:"none"}} 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 Chapters</button>
<button>Edit Chapters</button>
</a>
</Link>
</div>
@ -91,10 +92,8 @@ export default CoursesIndexPage;
const CourseWrapper = styled.div`
display: flex;
img {
width: 269px;
height: 151px;
background: url(), #d9d9d9;
border: 1px solid rgba(255, 255, 255, 0.19);