show mentor's answer (#101)

* show mentor's answer * double licence removed from history.spec.ts
mentorpal · Oct 6, 2021 · fc51965 · fc51965
1 parent f3c3632
commit fc51965
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 43 deletions.
diff --git a/client/src/components/video.tsx b/client/src/components/video.tsx
@@ -18,7 +18,7 @@ import {
   faveMentor,
   mentorAnswerPlaybackStarted,
   playIdleAfterReplay,
-  onVideoFinished,
+  onMentorDisplayAnswer,
 } from "store/actions";
 import { State, WebLink } from "types";
 import "styles/video.css";
@@ -33,6 +33,9 @@ export interface VideoData {
 function Video(args: { playing?: boolean }): JSX.Element {
   const { playing = false } = args;
   const dispatch = useDispatch();
+  const numberMentors = useSelector<State, number>((state) => {
+    return Object.keys(state.mentorsById).length;
+  });
   const curMentor = useSelector<State, string>((state) => state.curMentor);
   const video = useSelector<State, VideoData | null>((state) => {
     if (state.chat.replay) {
@@ -149,11 +152,12 @@ function Video(args: { playing?: boolean }): JSX.Element {
     setHideLinkLabel(true);
     dispatch(playIdleAfterReplay(false));
     dispatch(answerFinished());
-    dispatch(onVideoFinished(false));
   }
 
   function onPlay() {
     setHideLinkLabel(false);
+    dispatch(onMentorDisplayAnswer(false, curMentor));
+
     if (isIdle) {
       setHideLinkLabel(true);
       dispatch(answerFinished());
@@ -188,6 +192,7 @@ function Video(args: { playing?: boolean }): JSX.Element {
         webLinks={webLinks}
         hideLinkLabel={hideLinkLabel}
         mentorName={mentorName ? mentorName?.name : ""}
+        numberMentors={numberMentors}
       />
       <LoadingSpinner mentor={curMentor} />
       <MessageStatus mentor={curMentor} />
@@ -207,6 +212,7 @@ interface VideoPlayerParams {
   webLinks: WebLink[] | undefined;
   hideLinkLabel: boolean;
   mentorName: string;
+  numberMentors: number;
 }
 
 function VideoPlayer(args: VideoPlayerParams) {
@@ -222,6 +228,7 @@ function VideoPlayer(args: VideoPlayerParams) {
     webLinks,
     hideLinkLabel,
     mentorName,
+    numberMentors,
   } = args;
 
   const webLinkJSX = webLinks?.map((wl, i) => {
@@ -265,7 +272,10 @@ function VideoPlayer(args: VideoPlayerParams) {
     : false;
 
   return (
-    <div className="video-player-wrapper">
+    <div
+      className="video-player-wrapper"
+      style={numberMentors > 1 ? { marginTop: 0 } : { marginTop: 50 }}
+    >
       {!hideLinkLabel && shouldDiplayWebLinks ? answerLinkCard : null}
       {mentorName ? mentorNameCard : null}
       <ReactPlayer

diff --git a/client/src/store/actions.ts b/client/src/store/actions.ts
@@ -170,6 +170,7 @@ export interface VideoFinishedAction {
   type: typeof VIDEO_FINISHED;
   payload: {
     isVideoInProgress: boolean;
+    curMentor: string;
   };
 }
 
@@ -247,13 +248,14 @@ export type MentorClientAction =
 export const MENTOR_SELECTION_TRIGGER_AUTO = "auto";
 export const MENTOR_SELECTION_TRIGGER_USER = "user";
 
-export const onVideoFinished =
-  (isVideoInProgress: boolean) =>
+export const onMentorDisplayAnswer =
+  (isVideoInProgress: boolean, curMentor: string) =>
   async (dispatch: ThunkDispatch<State, void, VideoFinishedAction>) => {
     dispatch({
       type: VIDEO_FINISHED,
       payload: {
-        isVideoInProgress: isVideoInProgress,
+        isVideoInProgress,
+        curMentor,
       },
     });
   };
@@ -282,14 +284,16 @@ export const feedbackSend =
       });
     } catch (err) {
       console.error(err);
-      return dispatch({
-        type: FEEDBACK_SEND_FAILED,
-        payload: {
-          errors: [err.message],
-          feedback,
-          feedbackId,
-        },
-      });
+      if (err instanceof Error) {
+        return dispatch({
+          type: FEEDBACK_SEND_FAILED,
+          payload: {
+            errors: [err.message],
+            feedback,
+            feedbackId,
+          },
+        });
+      }
     }
   };
 
@@ -306,10 +310,12 @@ export const loadConfig =
       });
     } catch (err) {
       console.error(err);
-      return dispatch({
-        type: CONFIG_LOAD_FAILED,
-        errors: [err.message],
-      });
+      if (err instanceof Error) {
+        return dispatch({
+          type: CONFIG_LOAD_FAILED,
+          errors: [err.message],
+        });
+      }
     }
   };
 

diff --git a/client/src/store/reducer.ts b/client/src/store/reducer.ts
@@ -432,13 +432,17 @@ function findAskLinks(text: string): AskLink[] {
   return askLinks;
 }
 
-function onVideoFinished(state: State, action: VideoFinishedAction): State {
+function onMentorDisplayAnswer(
+  state: State,
+  action: VideoFinishedAction
+): State {
   return {
     ...state,
     chat: {
       ...state.chat,
       messages: state.chat.messages.map((m) => {
-        return m.isVideoInProgress !== action.payload.isVideoInProgress
+        return m.isVideoInProgress !== action.payload.isVideoInProgress &&
+          m.mentorId === action.payload.curMentor
           ? {
               ...m,
               isVideoInProgress: action.payload.isVideoInProgress,
@@ -610,7 +614,7 @@ export default function reducer(
     case PLAY_IDLE_AFTER_REPLAY_VIDEO:
       return onPlayIdleAfterReplay(state, action);
     case VIDEO_FINISHED:
-      return onVideoFinished(state, action);
+      return onMentorDisplayAnswer(state, action);
     case QUESTION_ERROR:
       return {
         ...state,

diff --git a/client/src/styles/video.css b/client/src/styles/video.css
@@ -74,7 +74,6 @@
 .video-player-wrapper {
   position: relative;
   display: inline-block;
-  margin-top: 50px;
 }
 
 @media only screen and (max-width: 1200px) {

diff --git a/cypress/cypress/integration/chat.spec.ts b/cypress/cypress/integration/chat.spec.ts
@@ -71,7 +71,6 @@ describe("Chat", () => {
     cy.intercept("**/questions/?mentor=*&query=*", {
       fixture: "response_with_markdown.json",
     });
-    cy.viewport("iphone-x");
     cy.visit("/");
     cy.get("[data-cy=chat-thread]").should("exist");
     cy.get("[data-cy=input-field]").type("test");
@@ -97,7 +96,6 @@ describe("Chat", () => {
     cy.intercept("**/questions/?mentor=covid&query=*", {
       fixture: "response_with_feedback.json",
     });
-    cy.viewport("iphone-x");
     cy.visit("/");
     cy.get("[data-cy=chat-thread]").should("exist");
     cy.get("[data-cy=input-field]").type("test");

diff --git a/cypress/cypress/integration/history.spec.ts b/cypress/cypress/integration/history.spec.ts
@@ -4,6 +4,7 @@ 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 {
   visitAsGuestWithDefaultSetup,
   mockDefaultSetup,
@@ -388,7 +389,7 @@ describe("Chat History (Video Mentors)", () => {
       fixture: "video_response.mp4",
     });
     cy.visit("/");
-
+    cy.viewport(1200, 800);
     cy.get("[data-cy=history-tab]").trigger("mouseover").click();
     cy.get("[data-cy=history-chat]").should("exist");
 
@@ -428,22 +429,26 @@ describe("Chat History (Video Mentors)", () => {
         cy.get("[data-cy=chat-msg-3]").should("not.be.visible");
         // the answers for the last question are visible by default
         // even if the show-all toggle is left unchecked
-        cy.get("[data-cy=chat-msg-5]").scrollIntoView().should("be.visible");
-        cy.get("[data-cy=chat-msg-6]").scrollIntoView().should("be.visible");
-
-        // show answers toggle
-        cy.get("[data-cy=visibility-switch]").find("input").check();
-        cy.get("[data-cy=chat-msg-2]").scrollIntoView().should("be.visible");
-        cy.get("[data-cy=chat-msg-3]").scrollIntoView().should("be.visible");
-        cy.get("[data-cy=chat-msg-5]").scrollIntoView().should("be.visible");
-        cy.get("[data-cy=chat-msg-6]").scrollIntoView().should("be.visible");
-
-        // the answers for the last question are visible by default
-        // even if the show-all toggle is left unchecked
-        cy.get("[data-cy=chat-msg-5]").scrollIntoView().should("be.visible");
-        cy.get("[data-cy=chat-msg-6]").scrollIntoView().should("be.visible");
+        // cy.get("[data-cy=chat-msg-5]").scrollIntoView();
+        cy.get("[data-cy=chat-msg-5]").should("be.visible");
+        cy.get("[data-cy=chat-msg-6]")
+          .scrollIntoView()
+          .should("not.be.visible");
       });
     });
+    cy.get("[data-cy=history-chat]").within(($hc) => {
+      // show answers toggle
+      cy.get("[data-cy=visibility-switch]").find("input").check();
+      cy.get("[data-cy=chat-msg-2]").scrollIntoView().should("be.visible");
+      cy.get("[data-cy=chat-msg-3]").scrollIntoView().should("be.visible");
+      cy.get("[data-cy=chat-msg-5]").scrollIntoView().should("be.visible");
+      cy.get("[data-cy=chat-msg-6]").scrollIntoView().should("be.visible");
+
+      // the answers for the last question are visible by default
+      // even if the show-all toggle is left unchecked
+      cy.get("[data-cy=chat-msg-5]").scrollIntoView().should("be.visible");
+      cy.get("[data-cy=chat-msg-6]").scrollIntoView().should("be.visible");
+    });
   });
 
   it("Question's answers can be toggled individually", () => {
@@ -770,7 +775,6 @@ describe("Chat History (Video Mentors)", () => {
       fixture: "video_response.mp4",
     });
     cy.visit("/");
-    cy.viewport("macbook-11");
     cy.get("[data-cy=history-tab]").trigger("mouseover").click();
     cy.get("[data-cy=history-chat]").should("exist");
     cy.get("[data-cy=history-chat]").should("exist");

diff --git a/cypress/cypress/integration/questions.spec.ts b/cypress/cypress/integration/questions.spec.ts
@@ -209,7 +209,6 @@ describe("Questions list", () => {
       apiResponse: "response_with_feedback.json",
     });
     cy.visit("/");
-    cy.viewport("macbook-11");
   });
 
   it("Do not show unanswered questions (subject)", () => {
@@ -219,6 +218,5 @@ describe("Questions list", () => {
       apiResponse: "response_with_feedback.json",
     });
     cy.visit("/");
-    cy.viewport("macbook-11");
   });
 });
diff --git a/cypress/cypress/integration/video.spec.ts b/cypress/cypress/integration/video.spec.ts
@@ -178,7 +178,6 @@ describe("Video Mentor", () => {
     });
 
     cy.visit("/");
-    cy.viewport("macbook-11");
 
     cy.get("[data-cy=header]").should("have.attr", "data-mentor", "carlos");
     cy.get("[data-cy=header]").contains("Carlos Rios: Marine Logistician");