Merge branch 'vscode/next' of https://github.com/source-academy/frontend into vscode/next

Author: shirsho-12

src/commons/application/Application.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';
 import Messages, {
   MessageType,
   MessageTypeNames,
@@ -18,6 +18,7 @@ import VscodeActions from './actions/VscodeActions';
 const Application: React.FC = () => {
   const dispatch = useDispatch();
   const { isLoggedIn } = useSession();
+  const navigate = useNavigate();
 
   // Used in the mobile/PWA experience (e.g. separate handling of orientation changes on Andriod & iOS due to unique browser behaviours)
   const isMobile = /iPhone|iPad|Android/.test(navigator.userAgent);
@@ -123,6 +124,9 @@ const Application: React.FC = () => {
         case MessageTypeNames.EvalEditor:
           dispatch(WorkspaceActions.evalEditor(message.workspaceLocation));
           break;
+        case MessageTypeNames.Navigate:
+          navigate(message.route);
+          break;
         case MessageTypeNames.McqQuestion:
           dispatch(
             WorkspaceActions.showMcqPane(

src/commons/assessment/Assessment.tsx

@@ -20,11 +20,12 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { sortBy } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Navigate, useLoaderData, useParams } from 'react-router';
 import { NavLink } from 'react-router-dom';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
+import Messages, { sendToWebview } from 'src/features/vscode/messages';
 import classes from 'src/styles/Academy.module.scss';
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg';
@@ -61,6 +62,24 @@ const Assessment: React.FC = () => {
   const { courseId, role, assessmentOverviews: assessmentOverviewsUnfiltered } = useSession();
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    console.log('Iam in Assessment');
+    console.log(assessmentOverviewsUnfiltered);
+    if (assessmentOverviewsUnfiltered) {
+      sendToWebview(
+        Messages.NotifyAssessmentsOverview(
+          assessmentOverviewsUnfiltered.map(oa => ({
+            type: oa.type,
+            closeAt: oa.closeAt,
+            id: oa.id,
+            isPublished: oa.isPublished,
+            title: oa.title
+          }))
+        )
+      );
+    }
+  }, [assessmentOverviewsUnfiltered]);
+
   const toggleClosedAssessments = () => setShowClosedAssessments(!showClosedAssessments);
   const toggleOpenAssessments = () => setShowOpenedAssessments(!showOpenedAssessments);
   const toggleUpcomingAssessments = () => setShowUpcomingAssessments(!showUpcomingAssessments);

src/features/vscode/messages.ts

@@ -9,6 +9,14 @@ const VscWorkspaceLocationArray = ['assessment', 'playground'];
 export const isVscWorkspaceLocation = (s: any) => VscWorkspaceLocationArray.includes(s);
 export type VscWorkspaceLocation = 'assessment' | 'playground';
 
+export type VscAssessmentOverview = {
+  type: string;
+  closeAt: string;
+  id: number;
+  isPublished?: boolean;
+  title: string;
+};
+
 // ================================================================================
 // Message type definitions
 // ================================================================================
@@ -41,6 +49,9 @@ const Messages = createMessages({
   EvalEditor: (workspaceLocation: VscWorkspaceLocation) => ({
     workspaceLocation: workspaceLocation
   }),
+  NotifyAssessmentsOverview: (assessmentOverviews: VscAssessmentOverview[]) => ({
+    assessmentOverviews
+  }),
   Navigate: (route: string) => ({
     route
   }),