fix: layout updates

front/app/_orgs/[orgslug]/collections/new/page.tsx

@@ -57,7 +57,7 @@ function NewCollection(params : any) {
   }, [params.params.orgslug]);
 
   return (
-    <Layout>
+    <>
       <Title>Add new</Title>
       <br />
       <input type="text" placeholder="Name" value={name} onChange={handleNameChange} />
@@ -90,7 +90,7 @@ function NewCollection(params : any) {
       <input type="text" placeholder="Description" value={description} onChange={handleDescriptionChange} />
       <br />
       <button onClick={handleSubmit}>Submit</button>
-    </Layout>
+    </>
   );
 }
 

front/app/_orgs/[orgslug]/collections/page.tsx

@@ -35,7 +35,7 @@ function Collections(params:any) {
   }, []);
 
   return (
-    <Layout>
+    <>
       <Title>
         {orgslug} Collections :{" "}
         <Link href={"/collections/new"}>
@@ -61,7 +61,7 @@ function Collections(params:any) {
           ))}
         </div>
       )}
-    </Layout>
+    </>
   );
 }
 

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

@@ -225,7 +225,7 @@ function CourseEdit(params: any) {
   };
 
   return (
-    <Layout>
+    <>
       <Header></Header>
       <Title>
         Edit Course Chapters{" "}
@@ -283,7 +283,7 @@ function CourseEdit(params: any) {
           </DragDropContext>
         </ChapterlistWrapper>
       )}
-    </Layout>
+    </>
   );
 }
 

front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx

@@ -42,7 +42,7 @@ function ElementPage(params: any) {
   }, [elementid]);
 
   return (
-    <Layout>
+    <>
       {isLoading ? (
         <div>Loading...</div>
       ) : (
@@ -88,7 +88,7 @@ function ElementPage(params: any) {
           </CourseContent>
         </LectureLayout>
       )}
-    </Layout>
+    </>
   );
 }
 

front/app/_orgs/[orgslug]/course/[courseid]/page.tsx

@@ -33,7 +33,7 @@ const CourseIdPage = (params: any) => {
   }, [courseid && orgslug]);
 
   return (
-    <Layout>
+    <>
       {isLoading ? (
         <div>Loading...</div>
       ) : (
@@ -106,7 +106,7 @@ const CourseIdPage = (params: any) => {
           </BoxWrapper>
         </CoursePageLayout>
       )}
-    </Layout>
+    </>
   );
 };
 

front/app/_orgs/[orgslug]/courses/new/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useRouter } from "next/navigation";
 import React from "react";
 import { Header } from "../../../../../components/UI/Header";
@@ -55,8 +56,7 @@ const NewCoursePage = (params: any) => {
 
 
   return (
-    <Layout title="New course">
+    <>
-      <Header></Header>
       <Title>New Course </Title>
       <hr />
       Name : <input onChange={handleNameChange} type="text" /> <br />
@@ -64,7 +64,7 @@ const NewCoursePage = (params: any) => {
       Cover Photo : <input onChange={handleThumbnailChange} type="file" /> <br />
       Learnings (empty for now) (separated by ; ) : <textarea id="story" name="story" rows={5} cols={33} /> <br />
       <button onClick={handleSubmit}>Create</button>
-    </Layout>
+    </>
   );
 };
 

front/app/_orgs/[orgslug]/courses/page.tsx

@@ -1,4 +1,4 @@
-"use client"; 
+"use client";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -10,7 +10,7 @@ import { getBackendUrl } from "../../../../services/config";
 import { deleteCourseFromBackend, getOrgCourses } from "../../../../services/courses/courses";
 import { getOrganizationContextInfo } from "../../../../services/orgs";
 
-const CoursesIndexPage = (params : any) => {
+const CoursesIndexPage = (params: any) => {
   const router = useRouter();
   const orgslug = params.params.orgslug;
 
@@ -46,14 +46,11 @@ const CoursesIndexPage = (params : any) => {
   }, [isLoading, orgslug]);
 
   return (
-    <Layout title="Courses">
+    <>
-      <Header></Header>
       <Title>
         {orgslug} Courses :{" "}
         <Link href={"/courses/new"}>
-
           <button>+</button>
-
         </Link>{" "}
       </Title>
 
@@ -65,26 +62,22 @@ const CoursesIndexPage = (params : any) => {
           {courses.map((course: any) => (
             <div key={course.course_id}>
               <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}>
-
                 <h2>{course.name}</h2>
                 <CourseWrapper>
                   <img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
                 </CourseWrapper>
-
               </Link>
               <button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
                 Delete
               </button>
               <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
-
                 <button>Edit Chapters</button>
-
               </Link>
             </div>
           ))}
         </div>
       )}
-    </Layout>
+    </>
   );
 };
 

front/app/_orgs/[orgslug]/layout.tsx

@@ -0,0 +1,14 @@
+import "../../../styles/globals.css";
+import { Menu } from "../../../components/UI/Elements/Menu";
+import AuthProvider from "../../../components/Security/AuthProvider";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AuthProvider>
+        <Menu></Menu>
+        {children}
+      </AuthProvider>
+    </>
+  );
+}

front/app/_orgs/[orgslug]/page.tsx

@@ -4,7 +4,7 @@ import Layout from "../../../components/UI/Layout";
 import { Title } from "../../../components/UI/Elements/Styles/Title";
 import { Header } from "../../../components/UI/Header";
 import Link from "next/link";
-import { usePathname } from 'next/navigation';
+import { usePathname } from "next/navigation";
 
 const OrgHomePage = (params: any) => {
   const orgslug = params.params.orgslug;
@@ -12,13 +12,10 @@ const OrgHomePage = (params: any) => {
 
   return (
     <div>
-      <Layout orgslug={orgslug} title={"Org " + orgslug}>
+      <Title>Welcome {orgslug} 👋🏻</Title>
-        
+      <Link href={pathname + "/courses"}>
-        <Title>Welcome {orgslug} 👋🏻</Title>
+        <button>See Courses </button>
-        <Link href={pathname + "/courses"}>
+      </Link>
-          <button>See Courses </button>
-        </Link>
-      </Layout>
     </div>
   );
 };

front/app/_orgs/[orgslug]/template.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { motion } from "framer-motion";
+export default function Template({ children }: { children: React.ReactNode }) {
+   
+  const variants = {
+    hidden: { opacity: 0, x: 0, y: 0 },
+    enter: { opacity: 1, x: 0, y: 0 },
+    exit: { opacity: 0, x: 0, y: 0 },
+  };
+
+  return (
+    <div>
+      <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=""
+      >
+        {children}
+      </motion.main>
+    </div>
+  );
+}

front/app/layout.tsx

@@ -1,13 +1,31 @@
-
+"use client";
 import "../styles/globals.css";
 import StyledComponentsRegistry from "../services/lib/styled-registry";
+import { Menu } from "../components/UI/Elements/Menu";
+import { motion } from "framer-motion";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const variants = {
+    hidden: { opacity: 0, x: 0, y: 0 },
+    enter: { opacity: 1, x: 0, y: 0 },
+    exit: { opacity: 0, x: 0, y: 0 },
+  };
   return (
     <html className="" lang="en">
       <head />
       <body>
-        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        <StyledComponentsRegistry>
+          <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=""
+          >
+            {children}
+          </motion.main>
+        </StyledComponentsRegistry>
       </body>
     </html>
   );

front/app/login/page.tsx

@@ -34,7 +34,7 @@ const Login = () => {
 
   return (
     <div>
-      <Layout title="Login">
+      < >
       <Header></Header>
         <Title>Login</Title>
 
@@ -45,7 +45,7 @@ const Login = () => {
             Login
           </button>
         </form>
-      </Layout>
+      </>
     </div>
   );
 };

front/app/page.tsx

@@ -6,7 +6,7 @@ import learnhouseBigIcon from "public/learnhouse_bigicon.png";
 import Image from "next/legacy/image";
 import Link from "next/link";
 
-const Home: NextPage = () => {
+export default function Home() {
   return (
     <HomePage>
       <motion.div
@@ -89,4 +89,3 @@ const HomePage = styled.div`
   }
 `;
 
-export default Home;

front/app/signup/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { Header } from "../../components/UI/Header";
 import Layout from "../../components/UI/Layout";

front/components/Security/AuthProvider.tsx

@@ -34,10 +34,7 @@ const AuthProvider = ({ children }: any) => {
         userInfo = await getUserInfo(access_token);
         setAuth({ access_token, isAuthenticated: true, userInfo, isLoading });
 
-        // if user is authenticated and tries to access login or signup page, redirect to home
+        
-        if (NON_AUTHENTICATED_ROUTES.includes(router.pathname)) {
-          router.push("/");
-        }
       } else {
         setAuth({ access_token, isAuthenticated: false, userInfo, isLoading });
         //router.push("/login");

front/package.json

@@ -24,7 +24,7 @@
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.0.0-beta.9",
     "y-indexeddb": "^9.0.9",
     "y-webrtc": "^10.2.3",
     "yjs": "^13.5.42"

front/services/auth/auth.ts

@@ -19,7 +19,7 @@ export async function loginAndGetToken(username: string, password: string): Prom
     body: urlencoded,
     redirect: "follow",
     credentials: "include",
-  };
+  };  
 
   // fetch using await and async
   const response = await fetch(`${getAPIUrl()}auth/login`, requestOptions);
@@ -76,3 +76,5 @@ export async function signup(body: NewAccountBody): Promise<any> {
     .then((result) => result.json())
     .catch((error) => console.log("error", error));
 }
+
+