From 73fd013e07e89b941617f6573864f5b20b22dabc Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Wed, 14 Dec 2022 18:22:24 +0100
Subject: [PATCH] chore: adapt <Image> & <Link> to next.js 13

---
 front/components/Drags/Element.tsx            | 13 +++-
 front/components/Editor/Editor.tsx            |  2 +-
 .../components/Security/HeaderProfileBox.tsx  |  4 +-
 front/components/UI/Elements/Menu.tsx         | 10 +--
 front/pages/index.tsx                         | 14 ++--
 .../org/[orgslug]/course/[courseid]/index.tsx | 78 +++++++++----------
 front/pages/org/[orgslug]/courses/index.tsx   | 24 +++---
 front/pages/org/[orgslug]/index.tsx           |  6 +-
 front/pages/organizations/index.tsx           | 13 ++--
 9 files changed, 83 insertions(+), 81 deletions(-)

diff --git a/front/components/Drags/Element.tsx b/front/components/Drags/Element.tsx
index 3d5d30d0..319dd6ca 100644
--- a/front/components/Drags/Element.tsx
+++ b/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>
       )}
diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx
index c5ba7ea6..f4f6c5d7 100644
--- a/front/components/Editor/Editor.tsx
+++ b/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";
diff --git a/front/components/Security/HeaderProfileBox.tsx b/front/components/Security/HeaderProfileBox.tsx
index 29a1bc0c..b5f27952 100644
--- a/front/components/Security/HeaderProfileBox.tsx
+++ b/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>
diff --git a/front/components/UI/Elements/Menu.tsx b/front/components/UI/Elements/Menu.tsx
index e07ec65a..ff741359 100644
--- a/front/components/UI/Elements/Menu.tsx
+++ b/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>
+
+            <Image width={108} height={28} src={learnhouseLogo} alt="" />
+
           </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>
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index cf64a4ae..5c40c3c5 100644
--- a/front/pages/index.tsx
+++ b/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>
+
+            <OrgsButton>See Organizations</OrgsButton>
+
           </Link>
           <br /><br />
           <Link href={"/login"}>
-            <a>
-              <OrgsButton>Login</OrgsButton>
-            </a>
+
+            <OrgsButton>Login</OrgsButton>
+
           </Link>
         </div>
       </motion.div>
diff --git a/front/pages/org/[orgslug]/course/[courseid]/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/index.tsx
index 4531e916..8b7dfb18 100644
--- a/front/pages/org/[orgslug]/course/[courseid]/index.tsx
+++ b/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 (
-                <>
-                  {chapter.elements.map((element: any) => {
-                    return (
-                      <>
-                        <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
-                          <a>
-                            <ChapterIndicator />
-                          </a>
-                        </Link>{" "}
-                      </>
-                    );
-                  })}
-                  &nbsp;&nbsp;&nbsp;&nbsp;
-                </>
-              );
+              return <>
+                {chapter.elements.map((element: any) => {
+                  return <>
+                    <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
+
+                      <ChapterIndicator />
+
+                    </Link>{" "}
+                  </>;
+                })}
+                &nbsp;&nbsp;&nbsp;&nbsp;
+              </>;
             })}
           </ChaptersWrapper>
 
@@ -82,26 +81,25 @@ const CourseIdPage = () => {
           <h2>Course Lessons</h2>
 
           {courseInfo.chapters.map((chapter: any) => {
-            return (
-              <>
-                <h3>Chapter : {chapter.name}</h3>
-                {chapter.elements.map((element: any) => {
-                  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>{" "}
-                      </p>
-                    </>
-                  );
-                })}
-                &nbsp;&nbsp;&nbsp;&nbsp;
-              </>
-            );
+            return <>
+              <h3>Chapter : {chapter.name}</h3>
+              {chapter.elements.map((element: any) => {
+                return <>
+                  <p>
+                    Element {element.name}
+                    <Link
+                      href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}
+                      
+                      rel="noopener noreferrer">
+
+                      <EyeOpenIcon />
+
+                    </Link>{" "}
+                  </p>
+                </>;
+              })}
+              &nbsp;&nbsp;&nbsp;&nbsp;
+            </>;
           })}
         </CoursePageLayout>
       )}
diff --git a/front/pages/org/[orgslug]/courses/index.tsx b/front/pages/org/[orgslug]/courses/index.tsx
index 711dc6f7..fb862feb 100644
--- a/front/pages/org/[orgslug]/courses/index.tsx
+++ b/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>
+
+          <button>+</button>
+
         </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>
+
+                <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"}>
-                <a>
-                  <button>Edit Chapters</button>
-                </a>
+
+                <button>Edit Chapters</button>
+
               </Link>
             </div>
           ))}
diff --git a/front/pages/org/[orgslug]/index.tsx b/front/pages/org/[orgslug]/index.tsx
index 67521df1..8ba5b3da 100644
--- a/front/pages/org/[orgslug]/index.tsx
+++ b/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>
+
+          <button>See Courses </button>
+
         </Link>
       </Layout>
     </div>
diff --git a/front/pages/organizations/index.tsx b/front/pages/organizations/index.tsx
index b8485cbd..3cd1f6d7 100644
--- a/front/pages/organizations/index.tsx
+++ b/front/pages/organizations/index.tsx
@@ -30,14 +30,13 @@ const Organizations = () => {
 
 
   return (
-    
     <Layout>
       <Title>
         Your Organizations{" "}
         <Link href={"/organizations/new"}>
-          <a>
-            <button>+</button>
-          </a>
+
+          <button>+</button>
+
         </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>
+
+                <h3>{org.name}</h3>
+
               </Link>
               <button onClick={() => deleteOrganization(org.org_id)}>
                 Delete