feat: refactor the entire learnhouse project

2025-12-19 04:19:25 +00:00 · 2023-10-13 20:03:27 +02:00 · 2023-10-13 20:03:27 +02:00 · 4c215e91d5
commit 4c215e91d5
parent f556e41dda
247 changed files with 7716 additions and 1013 deletions
--- a/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
+++ b/apps/web/components/Pages/CourseEdit/Draggables/Chapter.tsx
@ -0,0 +1,130 @@
+import React from "react";
+import styled from "styled-components";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import Activity from "./Activity";
+import { Folders, Hexagon, MoreVertical, Pencil, PlusSquare, Save, Sparkle, Sparkles, Trash, Trash2, X } from "lucide-react";
+import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
+import { useRouter } from "next/navigation";
+import { updateChapter } from "@services/courses/chapters";
+import { mutate } from "swr";
+import { getAPIUrl } from "@services/config/config";
+import { revalidateTags } from "@services/utils/ts/requests";
+
+interface ModifiedChapterInterface {
+  chapterId: string;
+  chapterName: string;
+}
+
+function Chapter(props: any) {
+  const router = useRouter();
+  const [modifiedChapter, setModifiedChapter] = React.useState<ModifiedChapterInterface | undefined>(undefined);
+  const [selectedChapter, setSelectedChapter] = React.useState<string | undefined>(undefined);
+
+  async function updateChapterName(chapterId: string) {
+    if (modifiedChapter?.chapterId === chapterId) {
+      setSelectedChapter(undefined);
+      let modifiedChapterCopy = {
+        name: modifiedChapter.chapterName,
+        description: '',
+        activities: props.info.list.chapter.activityIds,
+      }
+      await updateChapter(chapterId, modifiedChapterCopy)
+      await mutate(`${getAPIUrl()}chapters/meta/course_${props.courseid}`)
+      await revalidateTags(['courses'], props.orgslug)
+      router.refresh();
+    }
+  }
+
+  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}
+          className="max-w-screen-2xl mx-auto bg-white px-5"
+          key={props.info.list.chapter.id}
+        >
+          <div className="flex pt-3 pr-3 font-bold text-md items-center space-x-2">
+            <div className="flex grow text-lg space-x-3 items-center rounded-md px-3 py-1">
+              <div className="bg-neutral-100 rounded-md p-2">
+                <Hexagon strokeWidth={3} size={16} className="text-neutral-600 " />
+              </div>
+
+              <div className="flex space-x-2 items-center">
+
+                {selectedChapter === props.info.list.chapter.id ?
+                  (<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
+                    <input type="text" className="bg-transparent outline-none text-sm text-neutral-700" placeholder="Chapter name" value={modifiedChapter ? modifiedChapter?.chapterName : props.info.list.chapter.name} onChange={(e) => setModifiedChapter({ chapterId: props.info.list.chapter.id, chapterName: e.target.value })} />
+                    <button onClick={() => updateChapterName(props.info.list.chapter.id)} className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900">
+                      <Save size={15} onClick={() => updateChapterName(props.info.list.chapter.id)} />
+                    </button>
+                  </div>) : (<p className="text-neutral-700 first-letter:uppercase">{props.info.list.chapter.name}</p>)}
+                <Pencil size={15} className="text-neutral-600 hover:cursor-pointer" onClick={() => setSelectedChapter(props.info.list.chapter.id)} />
+              </div>
+            </div>
+            <MoreVertical size={15} className="text-gray-300" />
+            <ConfirmationModal
+              confirmationButtonText="Delete Chapter"
+              confirmationMessage="Are you sure you want to delete this chapter?"
+              dialogTitle={"Delete " + props.info.list.chapter.name + " ?"}
+              dialogTrigger={
+                <div
+                  className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow flex space-x-1 items-center text-rose-100 text-sm"
+                  rel="noopener noreferrer">
+                  <X size={15} className="text-rose-200 font-bold" />
+                  <p>Delete Chapter</p>
+                </div>}
+              functionToExecute={() => props.deleteChapter(props.info.list.chapter.id)}
+              status='warning'
+            ></ConfirmationModal>
+
+          </div>
+          <Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity">
+            {(provided) => (
+              <ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
+                <div className="flex flex-col">
+                  {props.info.list.activities.map((activity: any, index: any) => (
+                    <Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
+                  ))}
+                  {provided.placeholder}
+
+                  <div onClick={() => {
+                    props.openNewActivityModal(props.info.list.chapter.id);
+                  }} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white  bg-black  hover:cursor-pointer">
+                    <Sparkles className="" size={17} />
+                    <div className="text-sm mx-auto my-auto  items-center font-bold">Add Activity + </div>
+                  </div>
+                </div>
+              </ActivitiesList>
+
+            )}
+          </Droppable>
+
+        </ChapterWrapper>
+      )}
+    </Draggable>
+  );
+}
+
+const ChapterWrapper = styled.div`
+  margin-bottom: 20px;
+  padding: 12px;
+  font-size: 15px;
+  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;
+  h3{
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+`;
+
+const ActivitiesList = styled.div`
+  padding: 10px;
+`;
+
+export default Chapter;