125 create semester course components

amplify/data/resource.ts

@@ -1,4 +1,4 @@
-import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
+import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
 
 /*== STEP 1 ===============================================================
 The section below creates a Todo database table with a "content" field. Try
@@ -8,49 +8,58 @@ specify that owners, authenticated via your Auth resource can "create",
 authenticated via an API key, can only "read" records.
 =========================================================================*/
 const schema = a.schema({
-    Organization: a.model({
-        name: a.string(),
-        courses: a.hasMany('Course'),
-        pathways: a.hasMany('Pathway'),
-        admins: a.hasMany('User')
-    }).authorization([a.allow.owner(), a.allow.public().to(['read'])]),
-    User: a.model({
-        name: a.string(),
-        courses: a.hasMany('Course'),
-        pathways: a.hasMany('Pathway')
-    }).authorization([a.allow.owner(), a.allow.public().to(['read'])]),
-    Course: a.model({
-        name: a.string(),
-        code: a.string(),
-        credits: a.integer(),
-        grade: a.string()
-    }).authorization([a.allow.owner(), a.allow.public().to(['read'])]),
-    Pathway: a.model({
-        name: a.string(),
-        degree: a.string(),
-        yog: a.string(),
-        institution: a.string(),
-        degreeLevel: a.string(),
-        semesters: a.hasMany('Semester')
-    }).authorization([a.allow.owner(), a.allow.public().to(['read'])]),
-    Semester: a.model({
-        name: a.string(),
-        courses: a.hasMany('Course')
-    }).authorization([a.allow.owner(), a.allow.public().to(['read'])])
+  Organization: a
+    .model({
+      name: a.string(),
+      courses: a.hasMany("Course"),
+      pathways: a.hasMany("Pathway"),
+      admins: a.hasMany("User"),
+    })
+    .authorization([a.allow.owner(), a.allow.public().to(["read"])]),
+  User: a
+    .model({
+      name: a.string(),
+      courses: a.hasMany("Course"),
+      pathways: a.hasMany("Pathway"),
+    })
+    .authorization([a.allow.owner(), a.allow.public().to(["read"])]),
+  Course: a
+    .model({
+      name: a.string(),
+      code: a.string(),
+      credits: a.integer(),
+      grade: a.string(),
+    })
+    .authorization([a.allow.owner(), a.allow.public().to(["read"])]),
+  Pathway: a
+    .model({
+      name: a.string(),
+      degree: a.string(),
+      yog: a.string(),
+      institution: a.string(),
+      degreeLevel: a.string(),
+      semesters: a.hasMany("Semester"),
+    })
+    .authorization([a.allow.owner(), a.allow.public().to(["read"])]),
+  Semester: a
+    .model({
+      name: a.string(),
+      courses: a.hasMany("Course"),
+    })
+    .authorization([a.allow.owner(), a.allow.public().to(["read"])]),
 });
 
-
 export type Schema = ClientSchema<typeof schema>;
 
 export const data = defineData({
-    schema,
-    authorizationModes: {
-        defaultAuthorizationMode: 'apiKey',
-        // API Key is used for a.allow.public() rules
-        apiKeyAuthorizationMode: {
-            expiresInDays: 30,
-        },
+  schema,
+  authorizationModes: {
+    defaultAuthorizationMode: "apiKey",
+    // API Key is used for a.allow.public() rules
+    apiKeyAuthorizationMode: {
+      expiresInDays: 30,
     },
+  },
 });
 
 /*== STEP 2 ===============================================================

next.config.js

@@ -1,23 +1,22 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    reactStrictMode: true,
-    swcMinify: true,
-    modularizeImports: {
-      '@mui/icons-material': {
-        transform: '@mui/icons-material/{{member}}',
-      },
-    },
-    images: {
-      remotePatterns: [
-        {
-          protocol: 'https',
-          hostname: 'source.unsplash.com',
-          port: '',
-          pathname: '/random',
-        },
-      ],
+  reactStrictMode: false,
+  swcMinify: true,
+  modularizeImports: {
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}',
     },
-  };
-
-  module.exports = nextConfig;
-
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'source.unsplash.com',
+        port: '',
+        pathname: '/random',
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -13,9 +13,12 @@
     "@aws-amplify/adapter-nextjs": "^1.0.21",
     "@aws-amplify/cli": "^12.7.1",
     "@aws-amplify/ui-react": "^6.0.3",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@hello-pangea/dnd": "^16.6.0",
     "@mui/icons-material": "^5.14.18",
     "@mui/material": "^5.14.18",
     "@mui/material-nextjs": "^5.15.7",
@@ -31,6 +34,7 @@
     "@aws-amplify/backend-cli": "^0.10.0",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18",
     "aws-cdk": "^2.126.0",
     "aws-cdk-lib": "^2.126.0",

src/app/(auth)/layout.js

@@ -1,6 +1,6 @@
 
 // React
-import React from 'react';
+import React, { Suspense } from 'react';
 
 // Material UI
 import Box from '@mui/material/Box';
@@ -17,7 +17,9 @@ export default function AuthLayout({ children }) {
                 p: 3,
             }}
         >
-            {children}
+            <Suspense>
+                {children}
+            </Suspense>
         </Box>
     );
 }

src/app/(home)/layout.js

@@ -98,7 +98,9 @@ export default function Layout({ children }) {
                 />
 
                 {/* Children */}
-                <Box sx={{ mt: "3.5em", mb: "3em", overflow: "auto !important", height: "94%", width: "100%" }}>{children}</Box>
+
+                <Box sx={{ mt: "3.5em", mb: "3em", height: "94%", width: "100%" }}>{children}</Box>
+
             </Box>
             <BottomNavigation />
         </Box>