Feature/anvil message forward

src/IsaacApiTypes.tsx

@@ -880,6 +880,11 @@ export interface MisuseStatisticDTO {
     currentCounter: number;
 }
 
+export interface AnvilMarkingRequestDTO {
+    payload: string;
+    hmac: string;
+}
+
 export type GameboardCreationMethod = "FILTER" | "BUILDER";
 
 export type EventStatus = "OPEN" | "FULLY_BOOKED" | "CANCELLED" | "CLOSED" | "WAITING_LIST_ONLY" | "RESERVATION_ONLY";

src/app/components/content/AnvilApp.tsx

@@ -1,6 +1,6 @@
 import React, {RefObject, useContext, useEffect} from 'react';
 import {AnvilAppDTO} from "../../../IsaacApiTypes";
-import {selectors, useAppSelector} from "../../state";
+import {selectors, useAppSelector, usePostSkillsAnswerMutation} from "../../state";
 import {AccordionSectionContext, QuestionContext} from "../../../IsaacAppTypes";
 import {selectQuestionPart} from "../../services";
 import { AnvilCookieHandler } from '../handlers/InterstitialCookieHandler';
@@ -67,26 +67,29 @@ export const AnvilApp = ({doc}: AnvilAppProps) => {
     }).join('&');
 
     const iframeSrc = `${baseURL}#?${queryParams}`;
-
-    const onMessage = function(e: any) {
-        if (iframeRef.current && e.source !== (iframeRef.current as HTMLIFrameElement).contentWindow) {
-            return;
-        }
-
-        const data = e.data;
-
-        if (iframeRef.current && (data.fn == "newAppHeight")) {
-            (iframeRef.current as HTMLIFrameElement).height = data.newHeight + 15;
-        }
-    };
+    const [postSkillsAnswer] = usePostSkillsAnswerMutation();
 
     useEffect(() => {
+        const onMessage = function(e: any) {
+            if (iframeRef.current && e.source !== (iframeRef.current as HTMLIFrameElement).contentWindow) {
+                return;
+            }
+
+            const data = e.data;
+
+            if (iframeRef.current && (data.fn == "newAppHeight")) {
+                (iframeRef.current as HTMLIFrameElement).height = data.newHeight + 15;
+            } else if (iframeRef.current && user?.loggedIn && e.origin === `https://${doc.appId?.toLowerCase()}.anvil.app` && data.type === 'SUBMISSION_MARKED') {
+                void postSkillsAnswer({ appId: `${typeof page === 'object' && page?.id}`, body: { hmac: data.hmac, payload: data.payload } });
+            }
+        };
+
         window.addEventListener("message", onMessage);
 
         return () => {
             window.removeEventListener("message", onMessage);
         };
-    }, [onMessage]);
+    }, [postSkillsAnswer, doc.appId, page, user?.loggedIn]);
 
     return <AnvilCookieHandler afterAcceptedElement={
         <iframe ref={iframeRef} src={iframeSrc} title={title} className="anvil-app"/>

src/app/state/index.ts

@@ -37,6 +37,7 @@ export * from "./slices/api/accountApi";
 export * from "./slices/api/gameboardApi";
 export * from "./slices/api/assignmentsApi";
 export * from "./slices/api/bookmarksApi";
+export * from "./slices/api/skillsApi";
 export * from "./slices/api/contentApi";
 export * from "./slices/api/groupsApi";
 export * from "./slices/api/emailApi";

src/app/state/slices/api/skillsApi.ts

@@ -0,0 +1,20 @@
+import { AnvilMarkingRequestDTO } from "../../../../IsaacApiTypes";
+import {isaacApi} from "./baseApi";
+import { onQueryLifecycleEvents } from "./utils";
+
+export const skillsApi = isaacApi.injectEndpoints({
+    endpoints: (build) => ({
+        postSkillsAnswer: build.mutation<void, { appId: string, body: AnvilMarkingRequestDTO}>({
+            query: ({ appId, body }) => ({
+                url: `skills/${appId}/answer`,
+                method: "POST",
+                body,
+            }),
+            onQueryStarted: onQueryLifecycleEvents({
+                errorTitle: "Couldn't save answer.",
+            }),
+        }),
+    })
+});
+
+export const { usePostSkillsAnswerMutation } = skillsApi;