migrate upload status to redux (#305)

* migrate upload status to redux * for setup: answer considered complete if upload in progress * finished answer uploads are reflected in mentor answers' * new configs: signup page header, welcome slide header/body, disable goal slide, disable followups * default api coverage for cypress * poll uploads on every page fix * test fixes --------- Co-authored-by: Aaron Shiel <[email protected]>
mentorpal · Sep 23, 2023 · a43a545 · a43a545
1 parent 657233c
commit a43a545
Show file tree

Hide file tree

Showing 30 changed files with 522 additions and 127 deletions.
diff --git a/client/src/api.ts b/client/src/api.ts
@@ -50,6 +50,7 @@ import {
   convertMentorGQL,
   convertUploadTaskGQL,
   convertUserQuestionGQL,
+  MentorConfig,
   MentorGQL,
   SubjectGQL,
   SubjectQuestionGQL,
@@ -1048,6 +1049,11 @@ export async function fetchMentorById(
               viewPermission
               editPermission
             }
+            loginHeaderText
+            welcomeSlideHeader
+            welcomeSlideText
+            disableMyGoalSlide
+            disableFollowups
           }
           orgPermissions {
             orgId
@@ -1198,6 +1204,39 @@ export async function fetchMentorById(
   return convertMentorGQL(gql);
 }
 
+export async function fetchMentorConfig(
+  mentorConfigId: string
+): Promise<MentorConfig> {
+  return await execGql<MentorConfig>(
+    {
+      query: `
+      query FetchMentorConfig($mentorConfigId: ID!) {
+        fetchMentorConfig(mentorConfigId:$mentorConfigId){
+            configId
+            subjects
+            publiclyVisible
+            mentorType
+            orgPermissions{
+              org
+              viewPermission
+              editPermission
+            }
+            loginHeaderText
+            welcomeSlideHeader
+            welcomeSlideText
+            disableMyGoalSlide
+            disableFollowups
+          }
+      }
+    `,
+      variables: {
+        mentorConfigId: mentorConfigId,
+      },
+    },
+    { dataPath: ["fetchMentorConfig"] }
+  );
+}
+
 export async function sbertEncodeSentences(
   sentences: string[],
   accessToken: string
@@ -1373,6 +1412,74 @@ export async function updateMentorPublicApproval(
   );
 }
 
+export async function queryAnswer(
+  mentorId: string,
+  questionId: string,
+  accessToken: string
+): Promise<Answer> {
+  const gql = await execGql<AnswerGQL>(
+    {
+      query: `
+      query Answer($mentor: ID!, $question: ID!) {
+        answer(mentor: $mentor, question: $question) {
+          _id
+          question {
+            _id
+            clientId
+            mentor
+          }
+          hasEditedTranscript
+          markdownTranscript
+          transcript
+          status
+          hasUntransferredMedia
+          webMedia {
+            type
+            tag
+            url
+            transparentVideoUrl
+            needsTransfer
+            hash
+            duration
+          }
+          mobileMedia{
+            type
+            tag
+            url
+            transparentVideoUrl
+            needsTransfer
+            hash
+            duration
+          }
+          vttMedia{
+            type
+            tag
+            url
+            needsTransfer
+            hash
+            duration
+            vttText
+          }
+          previousVersions{
+            transcript
+            dateVersioned
+            vttText
+            webVideoHash
+            videoDuration
+          }
+        }
+      }
+    `,
+      variables: {
+        mentor: mentorId,
+        question: questionId,
+      },
+    },
+    { accessToken, dataPath: ["answer"] }
+  );
+  return convertAnswerGQL(gql);
+}
+
 export async function updateAnswerUrl(
   accessToken: string,
   mentorId: string,

diff --git a/client/src/components/login.tsx b/client/src/components/login.tsx
@@ -19,6 +19,7 @@ import { useWithConfig } from "store/slices/config/useWithConfig";
 import { ConfigStatus } from "store/slices/config";
 import { useWithLogin } from "store/slices/login/useWithLogin";
 import { OverridableTokenClientConfig } from "@react-oauth/google";
+import { MentorConfig } from "types-gql";
 
 const useStyles = makeStyles({ name: { LoginPage } })((theme: Theme) => ({
   toolbar: {
@@ -44,7 +45,9 @@ function LoginPage(props: {
   onGoogleLogin: (
     overrideConfig?: OverridableTokenClientConfig | undefined
   ) => void;
+  mentorConfig?: MentorConfig;
 }): JSX.Element {
+  const { mentorConfig } = props;
   const { classes } = useStyles();
   const { state: configState, loadConfig } = useWithConfig();
   const { state: loginState, login } = useWithLogin();
@@ -95,7 +98,8 @@ function LoginPage(props: {
       </AppBar>
       <div className={classes.toolbar} /> {/* create space below app bar */}
       <Typography variant="h5" className={classes.title}>
-        Please sign in to access the Mentor Studio portal
+        {mentorConfig?.loginHeaderText ||
+          "Please sign in to access the Mentor Studio portal"}
       </Typography>
       {process.env.ACCESS_TOKEN ? (
         <Button

diff --git a/client/src/components/my-mentor-card/mentor-info.tsx b/client/src/components/my-mentor-card/mentor-info.tsx
@@ -4,7 +4,8 @@ Permission to use, copy, modify, and distribute this software and its documentat
 
 The full terms of this copyright and license should always be found in the root directory of this software deliverable as "license.txt" and if these terms are not found with this software, please contact the USC Stevens Center for the full license.
 */
-import { isAnswerComplete } from "helpers";
+import { getValueIfKeyExists, isAnswerComplete } from "helpers";
+import { QuestionState } from "store/slices/questions";
 import { Mentor, MentorType } from "types";
 interface Stage {
   name: string;
@@ -129,10 +130,17 @@ function StageSelect(value: number): Stage {
   };
 }
 
-export default function parseMentor(mentor: Mentor): MentorInfo {
+export default function parseMentor(
+  mentor: Mentor,
+  questions?: Record<string, QuestionState>
+): MentorInfo {
   const value =
     mentor?.answers.filter((a) =>
-      isAnswerComplete(a, undefined, mentor.mentorType)
+      isAnswerComplete(
+        a,
+        getValueIfKeyExists(a.question, questions || {})?.question?.name,
+        mentor.mentorType
+      )
     ).length || 0;
   return {
     mentorId: mentor?._id || "",

diff --git a/client/src/components/my-mentor-card/top-mentor-card/mentor-status.tsx b/client/src/components/my-mentor-card/top-mentor-card/mentor-status.tsx
@@ -7,6 +7,7 @@ import useActiveMentor from "store/slices/mentor/useActiveMentor";
 import parseMentor, { defaultMentorInfo } from "../mentor-info";
 import CloseIcon from "@mui/icons-material/Close";
 import { TooltipStep } from "components/home";
+import useQuestions from "store/slices/questions/useQuestions";
 
 const ColorTooltip = withStyles(Tooltip, {
   tooltip: {
@@ -26,9 +27,9 @@ function MentorStatus(props: {
   const { trainMentor, updateThumbnail } = props;
   const { getData } = useActiveMentor();
   const [statusTooltipOpen, setStatusTooltipOpen] = useState<boolean>(false);
-
+  const allQuestions = useQuestions((state) => state.questions);
   const mentorInfo = getData((ms) =>
-    ms.data ? parseMentor(ms.data) : defaultMentorInfo
+    ms.data ? parseMentor(ms.data, allQuestions) : defaultMentorInfo
   );
 
   const leftColumnAlign = "left";

diff --git a/client/src/components/setup/record-subject-slide.tsx b/client/src/components/setup/record-subject-slide.tsx
@@ -7,7 +7,7 @@ The full terms of this copyright and license should always be found in the root
 import { navigate } from "gatsby";
 import React from "react";
 import { Typography, Button } from "@mui/material";
-import { Subject, Answer, MentorType } from "types";
+import { Subject, Answer, MentorType, UploadTaskStatuses } from "types";
 import { Slide } from "./slide";
 import { getValueIfKeyExists, isAnswerComplete, urlBuild } from "helpers";
 import { useAppSelector } from "store/hooks";
@@ -21,14 +21,22 @@ export function RecordSubjectSlide(props: {
   customTitle?: string; // pass in optional slide title
 }): JSX.Element {
   const { classes, subject, answers, i } = props;
+  const uploads = useAppSelector(
+    (state) => state.uploadStatus.uploadsInProgress
+  );
   const mentorQuestions = useAppSelector((state) => state.questions.questions);
-
-  const recorded = answers.filter((a) =>
-    isAnswerComplete(
-      a,
-      getValueIfKeyExists(a.question, mentorQuestions)?.question?.name,
-      props.mentorType
-    )
+  const recorded = answers.filter(
+    (a) =>
+      isAnswerComplete(
+        a,
+        getValueIfKeyExists(a.question, mentorQuestions)?.question?.name,
+        props.mentorType
+      ) ||
+      uploads.some(
+        (u) =>
+          u.question === a.question &&
+          !u.taskList.some((t) => t.status === UploadTaskStatuses.FAILED)
+      )
   );
   const isRecorded = answers.length === recorded.length;
 

diff --git a/client/src/components/setup/welcome-slide.tsx b/client/src/components/setup/welcome-slide.tsx
@@ -7,25 +7,28 @@ The full terms of this copyright and license should always be found in the root
 import React from "react";
 import { Typography } from "@mui/material";
 import { Slide } from "./slide";
+import { MentorConfig } from "types-gql";
 
 export function WelcomeSlide(props: {
   classes: Record<string, string>;
   userName: string;
   docSetupUrl: string;
+  mentorConfig?: MentorConfig;
 }): JSX.Element {
-  const { classes, docSetupUrl } = props;
+  const { classes, docSetupUrl, mentorConfig } = props;
 
   return (
     <Slide
       classes={classes}
-      title="Welcome to MentorStudio!"
+      title={mentorConfig?.welcomeSlideHeader || "Welcome to MentorStudio!"}
       content={
         <div>
           <Typography variant="h6" className={classes.text}>
             It&apos;s nice to meet you, {props.userName}!
           </Typography>
           <Typography variant="h6" className={classes.text}>
-            Let&apos;s get started setting up your new mentor.
+            {mentorConfig?.welcomeSlideText ||
+              "Let's get started setting up your new mentor."}
           </Typography>
           <Typography
             data-cy="walkthrough-intro"

diff --git a/client/src/helpers.ts b/client/src/helpers.ts
@@ -170,6 +170,7 @@ export function getValueIfKeyExists<T>(
   key: string,
   dict: Record<string, T>
 ): T | null {
+  if (!dict || !key) return null;
   const result = dict[key];
   return typeof result !== "undefined" ? result : null;
 }

diff --git a/client/src/hooks/graphql/use-with-review-answer-state.tsx b/client/src/hooks/graphql/use-with-review-answer-state.tsx
@@ -140,6 +140,7 @@ export function useWithReviewAnswerState(
     }
     let _blocks: RecordingBlock[] = [];
     const subject = mentorSubjects?.find((s) => s._id === selectedSubject);
+
     if (subject) {
       subject.categories.forEach((c) => {
         const categoryQuestions = subject.questions
@@ -264,6 +265,7 @@ export function useWithReviewAnswerState(
     selectedSubject,
     configState,
     isMentorLoading,
+    mentorQuestions,
   ]);
 
   function clearError() {

diff --git a/client/src/hooks/graphql/use-with-setup.tsx b/client/src/hooks/graphql/use-with-setup.tsx
@@ -12,7 +12,6 @@ import {
   MentorType,
   SetupStatus,
   Subject,
-  UploadTaskStatuses,
   UtteranceName,
 } from "types";
 import { LoadingError } from "./loading-reducer";
@@ -88,7 +87,11 @@ export function useWithSetup(
     isSaving: isMentorSaving,
     error: mentorError,
   } = useActiveMentor();
-  const { uploads } = useWithUploadStatus(accessToken);
+  const { uploads, initialLoadComplete: uploadsPulled } = useWithUploadStatus(
+    accessToken,
+    undefined,
+    0
+  );
 
   const mentor: Mentor = getData((state) => state.data);
   useQuestions(
@@ -118,7 +121,8 @@ export function useWithSetup(
       isMentorSaving ||
       isMentorLoading ||
       !isConfigLoaded() ||
-      (!questionsFinishedLoading && mentor.answers.length > 0)
+      (!questionsFinishedLoading && mentor.answers.length > 0) ||
+      !uploadsPulled
     ) {
       return;
     }
@@ -153,7 +157,7 @@ export function useWithSetup(
                 ?.mentorType === mentor.mentorType) &&
             s.questions.map((q) => q.question).includes(a.question)
         );
-        return {
+        const returnValue = {
           subject: s,
           answers: answers,
           complete: answers.every(
@@ -163,18 +167,10 @@ export function useWithSetup(
                 getValueIfKeyExists(a.question, mentorQuestions)?.question
                   ?.name,
                 mentor.mentorType
-              ) ||
-              uploads.find(
-                (u) =>
-                  u.question ==
-                    (getValueIfKeyExists(a.question, mentorQuestions)?.question
-                      ?.question || "") &&
-                  !u.taskList.some(
-                    (t) => t.status === UploadTaskStatuses.FAILED
-                  )
-              )
+              ) || uploads.find((u) => u.question == a.question)
           ),
         };
+        return returnValue;
       });
     const isSetupComplete =
       isMentorInfoDone &&
@@ -207,7 +203,11 @@ export function useWithSetup(
       ...(mentorPrivacyLocked
         ? []
         : [{ type: SetupStepType.MENTOR_PRIVACY, complete: true }]),
-      { type: SetupStepType.MENTOR_GOAL, complete: Boolean(mentor.goal) },
+      ...(mentor.mentorConfig?.disableMyGoalSlide
+        ? []
+        : [
+            { type: SetupStepType.MENTOR_GOAL, complete: Boolean(mentor.goal) },
+          ]),
       { type: SetupStepType.SELECT_KEYWORDS, complete: true },
       ...(mentorSubjectsLocked
         ? []
@@ -230,7 +230,13 @@ export function useWithSetup(
       complete: isSetupComplete,
     });
     setSteps(status);
-  }, [mentor, configState.config, isMentorLoading, questionsLoadingStatus]);
+  }, [
+    mentor,
+    configState.config,
+    isMentorLoading,
+    questionsLoadingStatus,
+    uploadsPulled,
+  ]);
 
   function onLeave(cb: () => void): void {
     if (isMentorEdited) {