upgrade to v5

.eslintignore

@@ -1 +1,2 @@
-src/models
+src/models
+src/models/models

next.config.js

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: 'export',
   reactStrictMode: true,
   basePath: process.env.BASEPATH,
   typescript: {

package.json

@@ -11,10 +11,10 @@
     "pre-commit": "next lint"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "3.5",
-    "aws-amplify": "^4.3.34",
+    "@aws-amplify/ui-react": "^5.3.3",
+    "aws-amplify": "^5.3.19",
     "mapbox-gl": "1.13.1",
-    "next": "^13.5.6",
+    "next": "^14.2.4",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",

src/lib/getData.ts

@@ -1,6 +1,6 @@
 import { Amplify, withSSRContext } from "aws-amplify";
 import { GetStaticPropsContext } from "next";
-import awsmobile from "../aws-exports";
+import amplifyconfig from "../amplifyconfiguration.json";
 import {
   Contributor,
   ContributorCourse,
@@ -12,7 +12,7 @@ import {
 import { CardLayoutData, Context, CoursePageParams } from "../types/models";
 
 export function configureAmplify() {
-  Amplify.configure({ ...awsmobile, ssr: true });
+  Amplify.configure({ ...amplifyconfig, ssr: true });
 }
 
 configureAmplify();
@@ -23,13 +23,13 @@ export async function getFeaturedCourseData(
   const { DataStore } = withSSRContext(context);
 
   const courses: Course[] = await DataStore.query(Course, (c: any) =>
-    c.published("eq", true)
+    c.published.eq(true)
   );
 
   if (courses.length > 0) {
     const featuredCourses: Course[] = await DataStore.query(Course, (c: any) =>
-      c.published("eq", true).isFeatured("eq", true)
-    );
+      c.published.eq(true) && c.isFeatured.eq(true)
+  );
 
     const course =
       featuredCourses.length === 1 ? featuredCourses[0] : courses[0];
@@ -38,7 +38,6 @@ export async function getFeaturedCourseData(
 
     return { course, tags };
   }
-
   return null;
 }
 
@@ -49,9 +48,8 @@ export async function getCourseTags(
   const { DataStore } = withSSRContext(context);
 
   const courseTags: CourseTag[] = await DataStore.query(CourseTag);
-
   const filteredCourseTags = courseTags.filter(
-    (e) => e.course.published && e.course.id === courseId
+   async (e) => (await (e.course)).published && (await (e.course)).id === courseId
   );
 
   return filteredCourseTags.map((e) => e.tag);
@@ -64,33 +62,33 @@ export async function getCardLayoutData(
 
   let courseTags: CourseTag[] = await DataStore.query(CourseTag);
 
-  const groupedCourseTags: Record<string, CardLayoutData> = {};
 
   // Go through and group up the tags to their respective courses
-  courseTags.forEach((courseTag) => {
-    if (courseTag.course.published) {
-      if (!groupedCourseTags.hasOwnProperty(courseTag.course.id)) {
-        const tags = [courseTag.tag];
-
-        groupedCourseTags[courseTag.course.id] = {
-          course: courseTag.course,
-          tags,
-        };
-      } else {
-        const cardLayout = groupedCourseTags[courseTag.course.id];
-
-        const tags = cardLayout.tags;
-        tags.push(courseTag.tag);
-
-        groupedCourseTags[courseTag.course.id] = {
-          course: courseTag.course,
-          tags,
-        };
+    const groupedCourseTags: Record<string, CardLayoutData> = {};
+    for (const courseTag of courseTags) {
+      const course = await courseTag.course;
+      const tag = await courseTag.tag;
+      if (course.published) {
+        if (!groupedCourseTags.hasOwnProperty(course.id)) {
+
+          groupedCourseTags[course.id] = {
+            course: course,
+            tags: [tag],
+          };
+        } else {
+          const cardLayout = groupedCourseTags[course.id];
+          const tags = cardLayout.tags;
+          tags.push(tag);
+
+          groupedCourseTags[course.id] = {
+            course: course,
+            tags,
+          };
+        }
       }
-    }
-  });
+    };
 
-  return Object.values(groupedCourseTags);
+  return Object.values(groupedCourseTags)
 }
 
 export async function getCourseAndLessonData(
@@ -114,17 +112,16 @@ export async function getCourseAndLessonData(
   );
 
   const courseResults: Course[] = await DataStore.query(Course, (c: any) =>
-    c
-      .published("eq", true)
-      .id("beginsWith", courseIdPrefix)
-      .courseUrlTitle("eq", originalCourseUrlTitle)
+    c.published.eq(true) &&
+    c.id.beginsWith(courseIdPrefix) &&
+    c.courseUrlTitle.eq(originalCourseUrlTitle)
   );
 
   const courseResult = courseResults[0];
 
   if (courseResult) {
     const lessons: Lesson[] = await DataStore.query(Lesson, (l: any) =>
-      l.lessonCourseLessonId("eq", courseResult.id)
+      l.lessonCourseLessonId.eq(courseResult.id)
     );
 
     const lessonsSorted = lessons.sort(

src/pages/about/[contributor].tsx

@@ -384,7 +384,7 @@ export async function getStaticProps(
 
     let contributorResults: Contributor[] = await DataStore.query(
       Contributor,
-      (c: any) => c.username("eq", username)
+      (c: any) => c.username.eq(username)
     );
 
     const contributorCoursesRelationships: ContributorCourse[] =
@@ -401,7 +401,7 @@ export async function getStaticProps(
     );
 
     const otherContributors = await DataStore.query(Contributor, (c: any) =>
-      c.username("ne", username)
+      c.username.ne(username)
     );
 
     if (contributorResults.length > 0) {

src/pages/courses/[courseurltitle]/index.tsx

@@ -331,7 +331,7 @@ export async function getStaticPaths(
 ): Promise<GetStaticPathsResult<CoursePageParams>> {
   const { DataStore } = withSSRContext(context);
   const courses: Course[] = await DataStore.query(Course, (c: any) =>
-    c.published("eq", true)
+    c.published.eq(true)
   );
 
   return {

src/pages/courses/[courseurltitle]/lessons/[lesson].tsx

@@ -167,7 +167,7 @@ export async function getStaticPaths(
   const { DataStore } = withSSRContext(context);
   const lessons: Lesson[] = await DataStore.query(Lesson);
   const courses: Course[] = await DataStore.query(Course, (c: any) =>
-    c.published("eq", true)
+    c.published.eq(true)
   );
 
   // Create object that contains course title, course Id, and the lesson number

src/pages/index.tsx

@@ -19,16 +19,12 @@ export default function Home(data: {
 }) {
   let content = <></>;
   if (data.featuredCourse && data.featuredCourseTags && data.cardLayoutData) {
-    const featuredCourse: Course = deserializeModel(
-      Course,
-      data.featuredCourse
-    );
-    const featuredCourseTags: Tag[] = deserializeModel(
-      Tag,
-      data.featuredCourseTags
-    );
+
+    const featuredCourse: Course = data.featuredCourse;
+    const featuredCourseTags: Tag[] = data.featuredCourseTags;
     const cardLayoutData: CardLayoutData[] = JSON.parse(data.cardLayoutData);
 
+
     content = (
       <Flex
         direction="column"
@@ -66,14 +62,8 @@ export default function Home(data: {
 
   return (
     <MetaLayout metaInfo={metaInfo}>
-      <Banner
-        columnStart={{
-          base: 2,
-          small: 2,
-          medium: 2,
-          large: 2,
-        }}
-      />
+      <View columnStart={{ base: "1", small: "1", medium: "1", large: "2" }}>
+      <Banner />
       <View
         columnStart="2"
         marginTop={{ base: "0px", small: "0px", medium: "0px", large: "64px" }}
@@ -110,6 +100,7 @@ export default function Home(data: {
           </Button>
         </View>
       </ActionLayout>
+      </View>
     </MetaLayout>
   );
 }

src/pages/tags/[tagname].tsx

@@ -152,7 +152,7 @@ export async function getStaticProps(
     const { tagname } = context.params;
 
     const tags: Tag[] = await DataStore.query(Tag, (t: any) =>
-      t.name("eq", tagname)
+      t.name.eq(tagname)
     );
 
     if (tags.length > 0) {

src/ui-components/LearnFooter.jsx

@@ -201,8 +201,8 @@ export default function LearnFooter(props) {
           borderRadius="4px"
           padding="7px 19px 7px 19px"
           backgroundColor="rgba(255,255,255,1)"
-          isHover={false}
-          isActive={false}
+          ishover="false"
+          isactive="false"
           {...getOverrideProps(overrides, "MadeLabel")}
         ></MadeLabel>
       </Flex>
@@ -232,8 +232,8 @@ export default function LearnFooter(props) {
             position="relative"
             borderRadius="100px"
             padding="0px 0px 0px 0px"
-            isHover={false}
-            isActive={false}
+            ishover="false"
+            isactive="false"
             {...getOverrideProps(overrides, "LearnSocialBorderless31472969")}
           ></LearnSocialBorderless>
           <LearnSocialBorderless
@@ -243,8 +243,8 @@ export default function LearnFooter(props) {
             position="relative"
             borderRadius="100px"
             padding="0px 0px 0px 0px"
-            isHover={false}
-            isActive={false}
+            ishover="false"
+            isactive="false"
             {...getOverrideProps(overrides, "LearnSocialBorderless31472970")}
           ></LearnSocialBorderless>
           <LearnSocialBorderless
@@ -254,8 +254,8 @@ export default function LearnFooter(props) {
             position="relative"
             borderRadius="100px"
             padding="0px 0px 0px 0px"
-            isHover={false}
-            isActive={false}
+            ishover="false"
+            isactive="false"
             {...getOverrideProps(overrides, "LearnSocialBorderless31472971")}
           ></LearnSocialBorderless>
           <LearnSocialBorderless
@@ -265,8 +265,8 @@ export default function LearnFooter(props) {
             position="relative"
             borderRadius="100px"
             padding="0px 0px 0px 0px"
-            isHover={false}
-            isActive={false}
+            ishover="false"
+            isactive="false"
             {...getOverrideProps(overrides, "LearnSocialBorderless31472972")}
           ></LearnSocialBorderless>
         </Flex>

src/ui-components/LearnFooterCustom.jsx

@@ -223,8 +223,8 @@ export default function LearnFooterCustom(props) {
               borderRadius="4px"
               padding="7px 19px 7px 19px"
               backgroundColor="rgba(255,255,255,1)"
-              isHover={false}
-              isActive={false}
+              ishover="false"
+              isactive="false"
               {...getOverrideProps(overrides, "MadeLabel")}
             ></MadeLabel>
           </Flex>

src/ui-components/LearnFooterMobile.jsx

@@ -503,8 +503,8 @@ export default function LearnFooterMobile(props) {
           position="relative"
           borderRadius="100px"
           padding="0px 0px 0px 0px"
-          isHover={false}
-          isActive={false}
+          ishover="false"
+          isactive="false"
           {...getOverrideProps(overrides, "LearnSocialBorderless33513269")}
         ></LearnSocialBorderless>
         <LearnSocialBorderless
@@ -514,8 +514,8 @@ export default function LearnFooterMobile(props) {
           position="relative"
           borderRadius="100px"
           padding="0px 0px 0px 0px"
-          isHover={false}
-          isActive={false}
+          ishover="false"
+          isactive="false"
           {...getOverrideProps(overrides, "LearnSocialBorderless33513270")}
         ></LearnSocialBorderless>
         <LearnSocialBorderless
@@ -525,8 +525,8 @@ export default function LearnFooterMobile(props) {
           position="relative"
           borderRadius="100px"
           padding="0px 0px 0px 0px"
-          isHover={false}
-          isActive={false}
+          ishover="false"
+          isactive="false"
           {...getOverrideProps(overrides, "LearnSocialBorderless33513271")}
         ></LearnSocialBorderless>
         <LearnSocialBorderless
@@ -536,8 +536,8 @@ export default function LearnFooterMobile(props) {
           position="relative"
           borderRadius="100px"
           padding="0px 0px 0px 0px"
-          isHover={false}
-          isActive={false}
+          ishover="false"
+          isactive="false"
           {...getOverrideProps(overrides, "LearnSocialBorderless33513272")}
         ></LearnSocialBorderless>
       </Flex>

src/ui-components/NavBar.jsx

@@ -90,7 +90,7 @@ export default function NavBar(props) {
             position="relative"
             padding="0px 0px 0px 0px"
             isDisabled={false}
-            isHover={false}
+            ishover="false"
             {...getOverrideProps(overrides, "LearnMenuItem31473021")}
           ></LearnMenuItem>
         </Flex>
@@ -118,7 +118,7 @@ export default function NavBar(props) {
             position="relative"
             padding="0px 0px 0px 0px"
             isDisabled={false}
-            isHover={false}
+            ishover="false"
             {...getOverrideProps(overrides, "LearnMenuItem31473022")}
           ></LearnMenuItem>
         </Flex>
@@ -149,7 +149,7 @@ export default function NavBar(props) {
             position="relative"
             padding="0px 0px 0px 0px"
             isDisabled={false}
-            isHover="false"
+            ishover="false"
             {...getOverrideProps(overrides, "LearnMenuItem31473023")}
           ></LearnMenuItem>
         </Flex>