chore: refactor components

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx

@@ -5,10 +5,10 @@ import React, { useMemo } from "react";
 import Layout from "@components/UI/Layout";
 import { getActivity } from "@services/courses/activities";
 import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
-import Canva from "@components/ActivityViews/DynamicCanva/DynamicCanva";
+import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva";
 import styled from "styled-components"; 
 import { getCourse } from "@services/courses/courses";
-import VideoActivity from "@components/ActivityViews/Video/Video";
+import VideoActivity from "@components/Pages/Activities/Video/Video";
 import useSWR, { mutate } from "swr";
 import { Check } from "lucide-react";
 import { swrFetcher } from "@services/utils/requests";

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx

@@ -2,23 +2,19 @@
 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/Elements/Styles/Title";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
-import { initialData, initialData2 } from "@components/Drags/data";
-import Chapter from "@components/Drags/Chapter";
+import { initialData, initialData2 } from "@components/Pages/CourseEdit/Draggables/data";
+import Chapter from "@components/Pages/CourseEdit/Draggables/Chapter";
 import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "@services/courses/chapters";
 import { useRouter } from "next/navigation";
-import NewChapterModal from "@components/Modals/CourseEdit/NewChapter";
-import NewActivityModal from "@components/Modals/CourseEdit/NewActivity";
+import NewChapterModal from "@components/Pages/CourseEdit/NewChapter";
+import NewActivityModal from "@components/Pages/CourseEdit/NewActivity";
 import { createActivity, createFileActivity } from "@services/courses/activities";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
 import Modal from "@components/UI/Modal/Modal";
 
 function CourseEdit(params: any) {
-  const router = useRouter();
-
   // Initial Course State
   const [data, setData] = useState(initialData2) as any;
 
@@ -33,8 +29,6 @@ function CourseEdit(params: any) {
   const courseid = params.params.courseid;
   const orgslug = params.params.orgslug;
 
-
-
   async function getCourseChapters() {
     const courseChapters = await getCourseChaptersMetadata(courseid);
     setData(courseChapters);
@@ -107,9 +101,7 @@ function CourseEdit(params: any) {
   };
 
   /* 
-  
   Modals
-
   */
 
   const openNewActivityModal = async (chapterId: any) => {

front/app/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 import "../styles/globals.css";
-import StyledComponentsRegistry from "../components/lib/styled-registry";
+import StyledComponentsRegistry from "../components/UI/libs/styled-registry";
 import { motion } from "framer-motion";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

front/app/organizations/new/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 import React from "react";
-import Layout from "../../../components/UI/Layout";
 import { Title } from "../../../components/UI/Elements/Styles/Title";
 import { createNewOrganization } from "../../../services/organizations/orgs";
 
@@ -34,7 +33,7 @@ const Organizations = () => {
   };
 
   return (
-    <Layout>
+    <div>
       <Title>New Organization</Title>
       Name: <input onChange={handleNameChange} type="text" />
       <br />
@@ -45,7 +44,7 @@ const Organizations = () => {
       Email Address: <input onChange={handleEmailChange} type="text" />
       <br />
       <button onClick={handleSubmit}>Create</button>
-    </Layout>
+    </div>
   );
 };
 

front/app/signup/page.tsx

@@ -1,7 +1,5 @@
 "use client";
 import React from "react";
-import { Header } from "../../components/UI/Header";
-import Layout from "../../components/UI/Layout";
 import { Title } from "../../components/UI/Elements/Styles/Title";
 import { signup } from "../../services/auth/auth";
 
@@ -31,8 +29,7 @@ const SignUp = () => {
 
   return (
     <div>
-      <Layout title="Sign up">
-      <Header></Header>
+      <div title="Sign up">
         <Title>Sign up </Title>
 
         <form>
@@ -43,7 +40,7 @@ const SignUp = () => {
             Sign up
           </button>
         </form>
-      </Layout>
+      </div>
     </div>
   );
 };

front/components/Modals/Modal.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { motion, AnimatePresence } from "framer-motion";
-
-function Modal(props: any) {
-  return (
-    <div>
-      <Overlay>
-        <AnimatePresence>
-          <motion.div
-            initial={{ opacity: 0, left: "50%", top: "50%", scale: 0.9, backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
-            animate={{ opacity: 1, left: "50%", top: "50%", scale: 1, backdropFilter: "blur(10px)", y: 0, position: "absolute" }}
-            key="modal"
-            transition={{
-              type: "spring",
-              stiffness: 360,
-              damping: 70,
-              delay: 0.02,
-            }}
-            exit={{ opacity: 0, left: "50%", top: "46%", backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
-          >
-            <Content>{props.children}</Content>
-          </motion.div>
-        </AnimatePresence>
-      </Overlay>
-    </div>
-  );
-}
-
-const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-  background-color: #00000029;
-  backdrop-filter: blur(1px);
-
-`;
-
-const Content = styled.div`
-  background-color: white;
-  border-radius: 5px;
-  padding: 20px;
-  width: 500px;
-  height: 500px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0px 64px 84px 15px rgb(0 0 0 / 10%);
-`;
-export default Modal;

front/components/Pages/CourseEdit/NewActivity.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
-import Modal from "../Modal";
 import styled from "styled-components";
 import DynamicCanvaModal from "./NewActivityModal/DynamicCanva";
 import VideoModal from "./NewActivityModal/Video";

front/components/Pages/CourseEdit/NewChapter.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import Modal from "../Modal";
 
 function NewChapterModal({ submitChapter , closeModal }: any) {
   const [chapterName, setChapterName] = useState("");

front/components/UI/Elements/Menu.tsx

@@ -6,13 +6,9 @@ import learnhouseIcon from "public/learnhouse_icon.png";
 import learnhouseLogo from "public/learnhouse_logo.png";
 import Link from "next/link";
 import Image from "next/image";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { headers } from "next/headers";
-import { getOrgFromUri, getUriWithOrg } from "@services/config/config";
+import { getUriWithOrg } from "@services/config/config";
 
 export const Menu = (props : any ) => {
-  const router = useRouter();
-  const pathname = usePathname();
   const orgslug = props.orgslug;
   
   

front/components/UI/Header.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import Link from 'next/link'
-import styled from "styled-components";
-
-
-export const Header = () => {
-  return (
-    <div>
-    </div>
-  );
-};
-
-

front/components/UI/Layout.tsx

@@ -1,66 +0,0 @@
-"use client";
-import React from "react";
-import Head from "next/head";
-import styled from "styled-components";
-import AuthProvider from "../Security/AuthProvider";
-import { motion } from "framer-motion";
-import { Menu } from "./Elements/Menu";
-
-const Layout = (props: any) => {
-  const variants = {
-    hidden: { opacity: 0, x: 0, y: 0 },
-    enter: { opacity: 1, x: 0, y: 0 },
-    exit: { opacity: 0, x: 0, y: 0 },
-  };
-
-  return (
-      <AuthProvider>
-        <ProjectPhaseLabel>🚧 Dev Phase</ProjectPhaseLabel>
-        <Menu orgslug={props.orgslug}></Menu>
-        <motion.main
-          variants={variants} // Pass the variant object into Framer Motion
-          initial="hidden" // Set the initial state to variants.hidden
-          animate="enter" // Animated state to variants.enter
-          exit="exit" // Exit state (used later) to variants.exit
-          transition={{ type: "linear" }} // Set the transition to linear
-          className=""
-        >
-          <Main className="min-h-screen">{props.children}</Main>
-        </motion.main>
-        <Footer>
-          <p>LearnHouse © 2021 - {new Date().getFullYear()} - All rights reserved</p>
-        </Footer>
-      </AuthProvider>
-  );
-};
-
-const Main = styled.main`
-  min-height: 100vh;
-`;
-
-const Footer = styled.footer`
-  display: flex;
-  justify-content: center;
-  margin: 20px;
-  font-size: 16px;
-
-  img {
-    width: 20px;
-    opacity: 0.4;
-    display: inline;
-  }
-`;
-
-export const ProjectPhaseLabel = styled.div`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  padding: 9px;
-  background-color: #080501;
-  color: white;
-  font-size: 19px;
-  font-weight: bold;
-  border-radius: 5px 0 0 0px;
-`;
-
-export default Layout;

front/components/UI/Modal/Modal.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { styled, keyframes } from '@stitches/react';
 import { violet, blackA, mauve, green } from '@radix-ui/colors';
-import { Cross2Icon } from '@radix-ui/react-icons';
 
 type ModalParams = {
     dialogTitle: string;

front/services/courses/chapters.ts

@@ -1,4 +1,4 @@
-import { initialData } from "../../components/Drags/data";
+import { initialData } from "../../components/Pages/CourseEdit/Draggables/data";
 import { getAPIUrl } from "@services/config/config";
 import { RequestBody } from "@services/utils/requests";