Frontend MVP for Source Academy Rook (#1878)

Co-authored-by: YaleChen299 <[email protected]>

Author: chownces

.env.example

@@ -1,8 +1,8 @@
+REACT_APP_DEPLOYMENT_NAME=Source Academy
+
 REACT_APP_BACKEND_URL=http://localhost:4000
 REACT_APP_USE_BACKEND=TRUE
 REACT_APP_PLAYGROUND_ONLY=FALSE
-REACT_APP_ENABLE_GAME=TRUE
-REACT_APP_ENABLE_ACHIEVEMENTS=TRUE
 REACT_APP_ENABLE_GITHUB_ASSESSMENTS=TRUE
 
 REACT_APP_URL_SHORTENER_SIGNATURE=
@@ -24,7 +24,7 @@ REACT_APP_OAUTH2_PROVIDER3_ENDPOINT=http://localhost:8000/login?provider=test&co
 
 ## LumiNUS example
 ## the provider ID, must be URL-friendly (must match the backend configuration)
-# REACT_APP_OAUTH2_PROVIDER1=nusnet_id
+# REACT_APP_OAUTH2_PROVIDER1=luminus
 ## the name shown on the login screen: "Log in with ..."
 # REACT_APP_OAUTH2_PROVIDER1_NAME=LumiNUS
 ## the OAuth2 endpoint (which must include a client_id, as part of the OAuth2 specification)

README.md

@@ -83,9 +83,8 @@ The frontend can be configured to disable itself (based on user's system time) d
 
 #### Other configuration
 
+1. `REACT_APP_DEPLOYMENT_NAME`: The name of the Source Academy deployment. This will be shown in the `/welcome` route. Defaults to 'Source Academy'.
 1. `REACT_APP_PLAYGROUND_ONLY`: Whether to build the "playground-only" version, which disables the Academy components, so only the Playground is available. This is what we deploy onto [GitHub Pages](https://source-academy.github.io).
-1. `REACT_APP_ENABLE_GAME`: Whether to enable the game. Off by default.
-1. `REACT_APP_ENABLE_ACHIEVEMENTS`: Whether to enable the incentives/achievements system. Off by default.
 1. `REACT_APP_ENABLE_GITHUB_ASSESSMENTS`: Whether to enable the GitHub Assessments feature. Off by default.
 
 ## Development

package.json

@@ -68,6 +68,7 @@
     "react-konva": "^17.0.2-4",
     "react-latex-next": "^2.0.0",
     "react-mde": "^11.5.0",
+    "react-papaparse": "^3.16.1",
     "react-redux": "^7.2.4",
     "react-responsive": "^8.2.0",
     "react-router": "^5.2.0",

src/commons/XMLParser/XMLParserHelper.ts

@@ -3,9 +3,9 @@ import { Builder } from 'xml2js';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
 import {
   Assessment,
-  AssessmentCategories,
   AssessmentOverview,
   AssessmentStatuses,
+  AssessmentType,
   BaseQuestion,
   GradingStatuses,
   IMCQQuestion,
@@ -60,24 +60,18 @@ export const storeLocalAssessmentOverview = (overview: AssessmentOverview): void
 
 export const makeEntireAssessment = (result: any): [AssessmentOverview, Assessment] => {
   const assessmentArr = makeAssessment(result);
-  const overview = makeAssessmentOverview(result, assessmentArr[1], assessmentArr[2]);
+  const overview = makeAssessmentOverview(result, assessmentArr[1]);
   return [overview, assessmentArr[0]];
 };
 
-const makeAssessmentOverview = (
-  result: any,
-  maxGradeVal: number,
-  maxXpVal: number
-): AssessmentOverview => {
+const makeAssessmentOverview = (result: any, maxXpVal: number): AssessmentOverview => {
   const task: XmlParseStrTask = result.CONTENT.TASK[0];
   const rawOverview: XmlParseStrOverview = task.$;
   return {
-    category: capitalizeFirstLetter(rawOverview.kind) as AssessmentCategories,
+    type: capitalizeFirstLetter(rawOverview.kind) as AssessmentType,
     closeAt: rawOverview.duedate,
     coverImage: rawOverview.coverimage,
-    grade: 1,
     id: EDITING_ID,
-    maxGrade: maxGradeVal,
     maxXp: maxXpVal,
     number: rawOverview.number || '',
     openAt: rawOverview.startdate,
@@ -91,13 +85,13 @@ const makeAssessmentOverview = (
   };
 };
 
-const makeAssessment = (result: any): [Assessment, number, number] => {
+const makeAssessment = (result: any): [Assessment, number] => {
   const task: XmlParseStrTask = result.CONTENT.TASK[0];
   const rawOverview: XmlParseStrOverview = task.$;
   const questionArr = makeQuestions(task);
   return [
     {
-      category: capitalizeFirstLetter(rawOverview.kind) as AssessmentCategories,
+      type: capitalizeFirstLetter(rawOverview.kind) as AssessmentType,
       id: EDITING_ID,
       globalDeployment: makeLibrary(task.DEPLOYMENT),
       graderDeployment: makeLibrary(task.GRADERDEPLOYMENT),
@@ -106,8 +100,7 @@ const makeAssessment = (result: any): [Assessment, number, number] => {
       questions: questionArr[0],
       title: rawOverview.title
     },
-    questionArr[1],
-    questionArr[2]
+    questionArr[1]
   ];
 };
 
@@ -147,8 +140,7 @@ const makeLibrary = (deploymentArr: XmlParseStrDeployment[] | undefined): Librar
   }
 };
 
-const makeQuestions = (task: XmlParseStrTask): [Question[], number, number] => {
-  let maxGrade = 0;
+const makeQuestions = (task: XmlParseStrTask): [Question[], number] => {
   let maxXp = 0;
   const questions: Array<IProgrammingQuestion | IMCQQuestion> = [];
   task.PROBLEMS[0].PROBLEM.forEach((problem: XmlParseStrProblem, curId: number) => {
@@ -161,11 +153,8 @@ const makeQuestions = (task: XmlParseStrTask): [Question[], number, number] => {
       graderLibrary: makeLibrary(problem.GRADERDEPLOYMENT),
       type: problem.$.type,
       xp: 0,
-      grade: 0,
-      maxGrade: parseInt(problem.$.maxgrade, 10),
       maxXp: localMaxXp
     };
-    maxGrade += parseInt(problem.$.maxgrade, 10);
     maxXp += localMaxXp;
     if (question.type === 'programming') {
       questions.push(makeProgramming(problem as XmlParseStrPProblem, question));
@@ -174,7 +163,7 @@ const makeQuestions = (task: XmlParseStrTask): [Question[], number, number] => {
       questions.push(makeMCQ(problem as XmlParseStrCProblem, question));
     }
   });
-  return [questions, maxGrade, maxXp];
+  return [questions, maxXp];
 };
 
 const makeMCQ = (problem: XmlParseStrCProblem, question: BaseQuestion): IMCQQuestion => {
@@ -306,7 +295,7 @@ export const assessmentToXml = (
   const rawOverview: XmlParseStrOverview = {
     coverimage: overview.coverImage,
     duedate: overview.closeAt,
-    kind: overview.category.toLowerCase(),
+    kind: overview.type.toLowerCase(),
     number: overview.number || '',
     startdate: overview.openAt,
     story: overview.story,
@@ -331,8 +320,7 @@ export const assessmentToXml = (
   assessment.questions.forEach((question: Question) => {
     const problem = {
       $: {
-        type: question.type,
-        maxgrade: question.maxGrade
+        type: question.type
       },
       SNIPPET: {
         SOLUTION: question.answer

src/commons/achievement/AchievementManualEditor.tsx

@@ -12,7 +12,7 @@ type AchievementManualEditorProps = {
   studio: string;
   users: AchievementUser[];
   getUsers: () => void;
-  updateGoalProgress: (studentId: number, progress: GoalProgress) => void;
+  updateGoalProgress: (studentCourseRegId: number, progress: GoalProgress) => void;
 };
 
 const GoalSelect = Select.ofType<AchievementGoal>();
@@ -24,10 +24,13 @@ function AchievementManualEditor(props: AchievementManualEditorProps) {
   const { studio, getUsers, updateGoalProgress } = props;
   const users =
     studio === 'Staff'
-      ? [...props.users].sort((user1, user2) => user1.name.localeCompare(user2.name))
+      ? // The name can be null for users who have yet to log in. We push these to the back of the array.
+        [...props.users].sort((user1, user2) =>
+          user1.name ? user1.name.localeCompare(user2.name) : 1
+        )
       : props.users
           .filter(user => user.group === studio)
-          .sort((user1, user2) => user1.name.localeCompare(user2.name));
+          .sort((user1, user2) => (user1.name ? user1.name.localeCompare(user2.name) : 1));
 
   useEffect(getUsers, [getUsers]);
 
@@ -42,7 +45,7 @@ function AchievementManualEditor(props: AchievementManualEditorProps) {
 
   const UserSelect = Select.ofType<AchievementUser>();
   const userRenderer: ItemRenderer<AchievementUser> = (user, { handleClick }) => (
-    <MenuItem key={user.userId} onClick={handleClick} text={user.name} />
+    <MenuItem key={user.courseRegId} onClick={handleClick} text={user.name} />
   );
 
   const updateGoal = () => {
@@ -53,7 +56,7 @@ function AchievementManualEditor(props: AchievementManualEditorProps) {
         targetCount: goal.targetCount,
         completed: count >= goal.targetCount
       };
-      updateGoalProgress(selectedUser.userId, progress);
+      updateGoalProgress(selectedUser.courseRegId, progress);
     }
   };
 

src/commons/achievement/utils/InsertFakeAchievements.ts

@@ -24,7 +24,7 @@ function insertFakeAchievements(
     inferencer.insertFakeGoalDefinition(
       {
         uuid: idString + '0',
-        text: `Submitted ${assessmentOverview.category.toLowerCase()}`,
+        text: `Submitted ${assessmentOverview.type}`,
         achievementUuids: [idString],
         meta: {
           type: GoalType.ASSESSMENT,
@@ -38,7 +38,7 @@ function insertFakeAchievements(
     inferencer.insertFakeGoalDefinition(
       {
         uuid: idString + '1',
-        text: `Graded ${assessmentOverview.category.toLowerCase()}`,
+        text: `Graded ${assessmentOverview.type}`,
         achievementUuids: [idString],
         meta: {
           type: GoalType.ASSESSMENT,
@@ -53,7 +53,7 @@ function insertFakeAchievements(
       uuid: idString,
       title: assessmentOverview.title,
       ability:
-        assessmentOverview.category === 'Mission' || assessmentOverview.category === 'Path'
+        assessmentOverview.type === 'Missions' || assessmentOverview.type === 'Paths'
           ? AchievementAbility.CORE
           : AchievementAbility.EFFORT,
       xp:
@@ -71,7 +71,7 @@ function insertFakeAchievements(
       view: {
         coverImage: `${coverImageUrl}/default.png`,
         description: assessmentOverview.shortSummary,
-        completionText: `Grade: ${assessmentOverview.grade} / ${assessmentOverview.maxGrade}`
+        completionText: `XP: ${assessmentOverview.xp} / ${assessmentOverview.maxXp}`
       }
     });
   }