upgrade version of amplify to v5

.eslintignore

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

amplify/backend/backend-config.json

@@ -1,25 +1,25 @@
 {
   "api": {
     "community": {
-      "service": "AppSync",
-      "providerPlugin": "awscloudformation",
       "dependsOn": [],
       "output": {
         "authConfig": {
-          "defaultAuthentication": {
-            "authenticationType": "API_KEY",
-            "apiKeyConfig": {
-              "apiKeyExpirationDays": 30,
-              "description": "api key description"
-            }
-          },
           "additionalAuthenticationProviders": [
             {
               "authenticationType": "AWS_IAM"
             }
-          ]
+          ],
+          "defaultAuthentication": {
+            "apiKeyConfig": {
+              "apiKeyExpirationDays": 30,
+              "description": "api key description"
+            },
+            "authenticationType": "API_KEY"
+          }
         }
-      }
+      },
+      "providerPlugin": "awscloudformation",
+      "service": "AppSync"
     }
   },
   "auth": {},

next.config.js

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

package.json

@@ -4,17 +4,17 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build && next export",
+    "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "prepare": "husky install",
     "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/components/CardLayout/CardLayout.tsx

@@ -79,7 +79,7 @@ export function CardLayout({
               borderRadius="8px"
               padding="0px 0px 0px 0px"
               overflow="hidden"
-              src={course?.image}
+              src={course?.image.substring(6)}
               alt={course?.imageAltText || ""}
             ></Image>
           </View>

src/components/ContributorCollection/ContributorComponents/ContributorLargeCustom.jsx

@@ -103,7 +103,7 @@ export default function ContributorLargeCustom(props) {
           style={{
             borderRadius: "50%",
           }}
-          src={contributor?.profilePic}
+          src={contributor?.profilePic.substring(6)}
           alt={`Profile picture`}
           {...getOverrideProps(overrides, "Ellipse 15")}
         />

src/components/ContributorCollection/ContributorComponents/ContributorVerticalCustom.jsx

@@ -103,7 +103,7 @@ export default function ContributorVerticalCustom(props) {
           style={{
             borderRadius: "50%",
           }}
-          src={contributor?.profilePic}
+          src={contributor?.profilePic.substring(6)}
           alt={`Profile picture`}
           {...getOverrideProps(overrides, "Ellipse 15")}
         />

src/components/CourseContributors/ContributorHorizontalCustom.jsx

@@ -103,7 +103,7 @@ export default function ContributorHorizontal(props) {
           style={{
             borderRadius: "50%",
           }}
-          src={contributor?.profilePic}
+          src={contributor?.profilePic.substring(6)}
           alt={`Profile picture`}
           {...getOverrideProps(overrides, "Ellipse 15")}
         />

src/components/HeroCourse/HeroCourse.tsx

@@ -89,7 +89,7 @@ export function HeroCourse({ course, tags }: HeroCourseProps) {
             width={{ base: "100%", large: "", xl: "100%" }}
             height={{ base: "100%", large: "", xl: "100%" }}
             objectFit={{ base: "cover", large: "contain", xl: "cover" }}
-            src={course.image}
+            src={course?.image.substring(6)}
             alt={course.imageAltText || ""}
             borderRadius="8px"
             overflow="hidden"

src/components/LessonLayout/LessonLayout.tsx

@@ -47,150 +47,145 @@ export function LessonLayout({
 
   return (
     <>
-      <Banner
-        columnStart={{
-          base: 1,
-          small: 1,
-          medium: 1,
-          large: 2,
-        }}
-      />
-      <Grid
-        columnStart={{
-          base: "1",
-          small: "1",
-          medium: "1",
-          large: "2",
-        }}
-        columnGap="60px"
-        templateColumns={{
-          base: "minmax(0, 1fr)",
-          small: "minmax(0, 1fr)",
-          medium: "minmax(0, 1fr)",
-          large: "70% 1fr",
-        }}
-      >
-        {mainChildren}
-        <Flex
-          display={{
-            base: "none",
-            small: "none",
-            medium: "none",
-            large: "flex",
+      <View columnStart={{ base: "1", small: "1", medium: "1", large: "2" }}>
+      <Banner />
+        <Grid
+          columnStart={{
+            base: "1",
+            small: "1",
+            medium: "1",
+            large: "2",
           }}
-          direction={{
-            base: "column",
-            small: "column",
-            medium: "row",
-            large: "column",
-            xl: "column",
+          columnGap="60px"
+          templateColumns={{
+            base: "minmax(0, 1fr)",
+            small: "minmax(0, 1fr)",
+            medium: "minmax(0, 1fr)",
+            large: "70% 1fr",
           }}
-          rowStart="1"
-          columnStart="2"
         >
-          {showInSidebarBreakpoint && (
-            <Flex direction="column">
-              {sidebarChildren}
-              <View marginTop="40px">
+          {mainChildren}
+          <Flex
+            display={{
+              base: "none",
+              small: "none",
+              medium: "none",
+              large: "flex",
+            }}
+            direction={{
+              base: "column",
+              small: "column",
+              medium: "row",
+              large: "column",
+              xl: "column",
+            }}
+            rowStart="1"
+            columnStart="2"
+          >
+            {showInSidebarBreakpoint && (
+              <Flex direction="column">
+                {sidebarChildren}
+                <View marginTop="40px">
+                  <CourseContributors contributors={contributors} />
+                </View>
+                <View marginTop="40px">
+                  <ShareThis />
+                </View>
+              </Flex>
+            )}
+          </Flex>
+          {!showInSidebarBreakpoint && (
+            <Flex direction="column" columnStart={1}>
+              <View marginTop="64px">
                 <CourseContributors contributors={contributors} />
               </View>
-              <View marginTop="40px">
+              <View marginTop="64px">
                 <ShareThis />
               </View>
             </Flex>
           )}
-        </Flex>
-        {!showInSidebarBreakpoint && (
-          <Flex direction="column" columnStart={1}>
-            <View marginTop="64px">
-              <CourseContributors contributors={contributors} />
-            </View>
-            <View marginTop="64px">
-              <ShareThis />
-            </View>
-          </Flex>
-        )}
-        <Grid
-          marginTop={{
-            base: "64px",
-            small: "64px",
-            medium: "64px",
-            large: "64px",
-            xl: "128px",
-          }}
-          templateRows={{
-            small: "auto",
-            medium: "auto 1fr",
-          }}
-          templateColumns={{
-            base: "1fr",
-            small: "1fr",
-            medium: "1fr 1fr",
-          }}
-          rowGap="32px"
-          columnStart={1}
-          columnEnd={{
-            base: 1,
-            small: 1,
-            medium: 1,
-            large: -1,
-            xl: -1,
-          }}
-        >
-          <Text
-            fontFamily="'Amazon Ember Display'"
-            fontWeight="100"
-            fontSize="2rem"
-          >
-            More Courses
-          </Text>
-          <View
-            order={{
+          <Grid
+            marginTop={{
+              base: "64px",
+              small: "64px",
+              medium: "64px",
+              large: "64px",
+              xl: "128px",
+            }}
+            templateRows={{
+              small: "auto",
+              medium: "auto 1fr",
+            }}
+            templateColumns={{
+              base: "1fr",
+              small: "1fr",
+              medium: "1fr 1fr",
+            }}
+            rowGap="32px"
+            columnStart={1}
+            columnEnd={{
               base: 1,
               small: 1,
-              medium: 0,
+              medium: 1,
+              large: -1,
+              xl: -1,
             }}
-            alignSelf="center"
-            className={sectionButtonClassNames}
           >
-            <Button
-              aria-label="All Courses"
-              width="100%"
-              gap="10px"
-              onClick={() => {
-                router.push("/courses");
-              }}
+            <Text
+              fontFamily="'Amazon Ember Display'"
+              fontWeight="100"
+              fontSize="2rem"
             >
-              All courses
-              <ArrowRightIconCustom />
-            </Button>
-          </View>
-          <View columnStart={1} columnEnd={-1}>
-            <CardLayoutCollection
-              cardLayouts={cardLayoutData}
-              type="grid"
-              templateColumns={{
-                base: "1fr",
-                small: "1fr",
-                medium: "1fr 1fr",
-                large: "1fr 1fr",
-                xl: "1fr 1fr 1fr",
+              More Courses
+            </Text>
+            <View
+              order={{
+                base: 1,
+                small: 1,
+                medium: 0,
               }}
-              gap="64px 20px"
-              limit={
-                useBreakpointValue({
-                  base: 1,
-                  small: 1,
-                  medium: 2,
-                  large: 2,
-                  xl: 3,
-                }) as number
-              }
-              filter={(e: CardLayoutData) => e.course.id !== course.id}
-            />
-          </View>
+              alignSelf="center"
+              className={sectionButtonClassNames}
+            >
+              <Button
+                aria-label="All Courses"
+                width="100%"
+                gap="10px"
+                onClick={() => {
+                  router.push("/courses");
+                }}
+              >
+                All courses
+                <ArrowRightIconCustom />
+              </Button>
+            </View>
+            <View columnStart={1} columnEnd={-1}>
+              <CardLayoutCollection
+                cardLayouts={cardLayoutData}
+                type="grid"
+                templateColumns={{
+                  base: "1fr",
+                  small: "1fr",
+                  medium: "1fr 1fr",
+                  large: "1fr 1fr",
+                  xl: "1fr 1fr 1fr",
+                }}
+                gap="64px 20px"
+                limit={
+                  useBreakpointValue({
+                    base: 1,
+                    small: 1,
+                    medium: 2,
+                    large: 2,
+                    xl: 3,
+                  }) as number
+                }
+                filter={(e: CardLayoutData) => e.course.id !== course.id}
+              />
+            </View>
+          </Grid>
         </Grid>
-      </Grid>
+      </View>
     </>
   );
 }