Merge pull request #49 from aws-samples/feature/class_creation

add class feature creation

Author: renyz0525

.gitignore

@@ -32,4 +32,9 @@ node_modules
 amplify_outputs.json
 amplify/.DS_Store
 dist
-.DS_Store
+.DS_Store
+amplify/
+
+# amplify
+amplify_outputs*
+amplifyconfiguration*

package-lock.json

@@ -15,33 +15,33 @@
     "@cloudscape-design/components": "^3.0.611",
     "@cloudscape-design/design-tokens": "^3.0.35",
     "@cloudscape-design/global-styles": "^1.0.27",
-    "aws-amplify": "^6.5.1",
+    "aws-amplify": "^6.15.7",
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-player": "^2.16.0",
     "react-router-dom": "^6.22.0"
   },
   "devDependencies": {
-    "@aws-amplify/backend": "^1.1.1",
-    "@aws-amplify/backend-cli": "^1.2.4",
+    "@aws-amplify/backend": "^1.16.1",
+    "@aws-amplify/backend-cli": "^1.8.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
     "aws-cdk": "^2.153.0",
-    "aws-cdk-lib": "^2.153.0",
-    "constructs": "^10.3.0",
+    "aws-cdk-lib": "^2.204.0",
+    "constructs": "^10.4.2",
     "esbuild": "^0.20.2",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.35",
     "sass": "^1.70.0",
-    "tsx": "^4.17.0",
-    "typescript": "^5.5.4",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.3",
     "vite": "^5.4.11"
   }
 }

package.json

@@ -19,7 +19,7 @@ const Class = ({
   return (
     <>
       <SpaceBetween size="l">
-        <Player classId={activeClass.id} title={activeClass.name} desc={activeClass.description} author={activeClass.author} url={activeClass.url} user={userName} uid={userId} />
+        <Player classId={activeClass.id} title={activeClass.name} desc={activeClass.description} author={activeClass.author} url={activeClass.url} user={userName} uid={userId} subtitle={activeClass.subtitle} />
 
         <Bot transcript={activeClass.transcript}></Bot>
 

src/components/Class.tsx

@@ -1,25 +1,31 @@
 import { useEffect, useState } from "react";
 import {
-  Cards, Link, StatusIndicator, Box, Pagination, Header
+  Cards, Link, StatusIndicator, Box, Pagination, Header, Button, Modal
 } from "@cloudscape-design/components";
 
 // api
 import { generateClient } from 'aws-amplify/data';
 import { Schema } from '../../amplify/data/resource';
+import { CreateClassWizard } from './CreateClassWizard';
 
 const client = generateClient<Schema>();
 
 const ClassCatalog = ({
   activeCourse,
   setActiveClass,
+  userProfile,
 }: { 
   activeCourse: any, 
-  setActiveClass: any 
+  setActiveClass: any,
+  userProfile: any
 }) => {
   const [classes, setClasses] = useState<Array<Schema["Class"]["type"]>>([]);
   const [loading, setLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 4; 
+  const itemsPerPage = 4;
+  
+  // Wizard state
+  const [showWizard, setShowWizard] = useState(false); 
 
   useEffect(() => {
     const fetchClasses = async () => {
@@ -43,8 +49,13 @@ const ClassCatalog = ({
 
   const pagesCount = Math.ceil(classes.length / itemsPerPage);
 
+  const handleClassCreated = (newClass: Schema["Class"]["type"]) => {
+    setClasses([...classes, newClass]);
+  };
+
   return (
-    <Cards
+    <>
+      <Cards
       ariaLabels={{
         itemSelectionLabel: (_, n) => `select ${n.name}`,
         selectionGroupLabel: "Item selection"
@@ -103,7 +114,19 @@ const ClassCatalog = ({
         </Box>
       }
       header={activeCourse && activeCourse != null ? (
-        <Header>{activeCourse.name}</Header>
+        <Header
+          actions={
+            <Button
+              variant="primary"
+              iconName="add-plus"
+              onClick={() => setShowWizard(true)}
+            >
+              Add Class
+            </Button>
+          }
+        >
+          {activeCourse.name}
+        </Header>
       ) : (
         <div />
       )}
@@ -117,6 +140,22 @@ const ClassCatalog = ({
         />
       }
     />
+
+      <Modal
+        visible={showWizard}
+        onDismiss={() => setShowWizard(false)}
+        size="max"
+        header="Create New Class"
+      >
+        <CreateClassWizard
+          visible={showWizard}
+          onDismiss={() => setShowWizard(false)}
+          activeCourse={activeCourse}
+          onComplete={handleClassCreated}
+          userProfile={userProfile}
+        />
+      </Modal>
+    </>
   );
 }
 

src/components/ClassCatalog.tsx

@@ -89,9 +89,10 @@ export const CommentForm = ({
       Format your response as follows:
 
       📚 Summary:
-      [Provide a concise summary of the overall sentiment and main points]
+      [Provide a concise summary of the positive and negative sentiment]
 
-      ⭐️ Overall Score : [_/5]
+      ⭐️ Number of positive comment :
+      ⭐️ Number of Negative comment :
 
       💫 Key Reason:
       [Main reason for the score]`;