Merge pull request #18 from learnhouse/feat/next13

Feat/next13

front/components/Drags/Element.tsx

@@ -11,11 +11,16 @@ function Element(props: any) {
       {(provided) => (
         <ElementWrapper key={props.element.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
           <p>{props.element.name} </p>
-          <Link href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}`}>
-            <a  target="_blank" rel="noopener noreferrer">&nbsp; <EyeOpenIcon/></a>
+          <Link
+            href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}`}
+            
+            rel="noopener noreferrer">
+            &nbsp; <EyeOpenIcon/>
           </Link>
-          <Link href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}/edit`}>
-            <a  rel="noopener noreferrer">&nbsp; <Pencil2Icon/></a>
+          <Link
+            href={`/org/${props.orgslug}/course/${props.courseid}/element/${props.element.id.replace("element_", "")}/edit`}
+            rel="noopener noreferrer">
+            &nbsp; <Pencil2Icon/>
           </Link>
         </ElementWrapper>
       )}

front/components/Editor/Editor.tsx

@@ -7,7 +7,7 @@ import { AuthContext } from "../Security/AuthProvider";
 import learnhouseIcon from "public/learnhouse_icon.png";
 import { ToolbarButtons } from "./Toolbar/ToolbarButtons";
 import { motion, AnimatePresence } from "framer-motion";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styled from "styled-components";
 import { getBackendUrl } from "../../services/config";
 import { SlashIcon } from "@radix-ui/react-icons";

front/components/Security/HeaderProfileBox.tsx

@@ -14,12 +14,12 @@ export const HeaderProfileBox = () => {
           <ul>
             <li>
               <Link href="/login">
-                <a>Login</a>
+                Login
               </Link>
             </li>
             <li>
               <Link href="/signup">
-                <a>Sign up</a>
+                Sign up
               </Link>
             </li>
           </ul>

front/components/UI/Elements/Menu.tsx

@@ -4,7 +4,7 @@ import { HeaderProfileBox } from "../../Security/HeaderProfileBox";
 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 Image from "next/legacy/image";
 import { useRouter } from "next/router";
 
 export const Menu = () => {
@@ -17,9 +17,9 @@ export const Menu = () => {
         <Logo>
           <Image width={25} height={25} src={learnhouseIcon} alt="" />
           <Link href={"/"}>
-            <a>
+
             <Image width={108} height={28} src={learnhouseLogo} alt="" />
-            </a>
+
           </Link>
         </Logo>
         <div id="accounts"></div>
@@ -33,7 +33,7 @@ export const Menu = () => {
         <ul>
           <li>
             <Link href={"/org/" + orgslug + "/courses"}>
-              <a>Courses</a>
+              Courses
             </Link>
           </li>
           <li>Collections</li>

front/package.json

@@ -20,10 +20,10 @@
     "avvvatars-react": "^0.4.2",
     "framer-motion": "^7.3.6",
     "lucide-react": "^0.104.1",
-    "next": "12.3.1",
-    "react": "18.2.0",
+    "next": "^13.0.6",
+    "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "styled-components": "^5.3.5",
     "y-indexeddb": "^9.0.9",
     "y-webrtc": "^10.2.3",
@@ -37,7 +37,7 @@
     "@types/styled-components": "^5.1.26",
     "autoprefixer": "^10.4.12",
     "eslint": "8.23.1",
-    "eslint-config-next": "12.3.1",
+    "eslint-config-next": "^13.0.6",
     "typescript": "4.8.3"
   }
 }

front/pages/index.tsx

@@ -2,7 +2,7 @@ import type { NextPage } from "next";
 import { motion } from "framer-motion";
 import styled from "styled-components";
 import learnhouseBigIcon from "public/learnhouse_bigicon.png";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import Link from "next/link";
 
 const Home: NextPage = () => {
@@ -38,15 +38,15 @@ const Home: NextPage = () => {
       >
         <div>
           <Link href={"/organizations"}>
-            <a>
+
             <OrgsButton>See Organizations</OrgsButton>
-            </a>
+
           </Link>
           <br /><br />
           <Link href={"/login"}>
-            <a>
+
             <OrgsButton>Login</OrgsButton>
-            </a>
+
           </Link>
         </div>
       </motion.div>

front/pages/org/[orgslug]/course/[courseid]/index.tsx

@@ -41,31 +41,30 @@ const CourseIdPage = () => {
           <p>Course</p>
           <h1>
             {courseInfo.course.name}{" "}
-            <Link href={`/org/${orgslug}/course/${courseid}/edit`}>
-              <a target="_blank" rel="noopener noreferrer">
-                &nbsp; <Pencil2Icon />
-              </a>
+            <Link
+              href={`/org/${orgslug}/course/${courseid}/edit`}
+              
+              rel="noopener noreferrer">
+
+              <Pencil2Icon />
+
             </Link>{" "}
           </h1>
           <br />
           <ChaptersWrapper>
             {courseInfo.chapters.map((chapter: any) => {
-              return (
-                <>
+              return <>
                 {chapter.elements.map((element: any) => {
-                    return (
-                      <>
+                  return <>
                     <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
-                          <a>
+
                       <ChapterIndicator />
-                          </a>
+
                     </Link>{" "}
-                      </>
-                    );
+                  </>;
                 })}
                 &nbsp;&nbsp;&nbsp;&nbsp;
-                </>
-              );
+              </>;
             })}
           </ChaptersWrapper>
 
@@ -82,26 +81,25 @@ const CourseIdPage = () => {
           <h2>Course Lessons</h2>
 
           {courseInfo.chapters.map((chapter: any) => {
-            return (
-              <>
+            return <>
               <h3>Chapter : {chapter.name}</h3>
               {chapter.elements.map((element: any) => {
-                  return (
-                    <>
+                return <>
                   <p>
                     Element {element.name}
-                        <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
-                          <a target="_blank" rel="noopener noreferrer">
-                            &nbsp; <EyeOpenIcon />
-                          </a>
+                    <Link
+                      href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}
+                      
+                      rel="noopener noreferrer">
+
+                      <EyeOpenIcon />
+
                     </Link>{" "}
                   </p>
-                    </>
-                  );
+                </>;
               })}
               &nbsp;&nbsp;&nbsp;&nbsp;
-              </>
-            );
+            </>;
           })}
         </CoursePageLayout>
       )}

front/pages/org/[orgslug]/courses/index.tsx

@@ -50,9 +50,9 @@ const CoursesIndexPage = () => {
       <Title>
         {orgslug} courses :{" "}
         <Link href={"/org/" + orgslug + "/courses/new"}>
-          <a>
+
           <button>+</button>
-          </a>
+
         </Link>{" "}
       </Title>
 
@@ -64,20 +64,20 @@ const CoursesIndexPage = () => {
           {courses.map((course: any) => (
             <div key={course.course_id}>
               <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}>
-                <a>
+
                 <h2>{course.name}</h2>
                 <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>
               <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
-                <a>
+
                 <button>Edit Chapters</button>
-                </a>
+
               </Link>
             </div>
           ))}

front/pages/org/[orgslug]/index.tsx

@@ -15,9 +15,9 @@ const OrgHomePage = () => {
         <Header></Header>
         <Title>Welcome {orgslug} 👋🏻</Title>
         <Link href={orgslug + "/courses"}>
-          <a>
+
           <button>See Courses </button>
-          </a>
+
         </Link>
       </Layout>
     </div>

front/pages/organizations/index.tsx

@@ -30,14 +30,13 @@ const Organizations = () => {
 
 
   return (
-    
     <Layout>
       <Title>
         Your Organizations{" "}
         <Link href={"/organizations/new"}>
-          <a>
+
           <button>+</button>
-          </a>
+
         </Link>
       </Title>
       <hr />
@@ -48,9 +47,9 @@ const Organizations = () => {
           {userOrganizations.map((org: any) => (
             <div key={org.org_id}>
               <Link href={`/org/${org.slug}`}>
-                <a>
+
                 <h3>{org.name}</h3>
-                </a>
+
               </Link>
               <button onClick={() => deleteOrganization(org.org_id)}>
                 Delete