From fc51965086f83543484c007368b7223d0abc08f2 Mon Sep 17 00:00:00 2001 From: "Dilan R. Ramirez" <47306089+DilanRamirez@users.noreply.github.com> Date: Wed, 6 Oct 2021 16:37:43 -0600 Subject: [PATCH] show mentor's answer (#101) * show mentor's answer * double licence removed from history.spec.ts --- client/src/components/video.tsx | 16 +++++++-- client/src/store/actions.ts | 36 +++++++++++-------- client/src/store/reducer.ts | 10 ++++-- client/src/styles/video.css | 1 - cypress/cypress/integration/chat.spec.ts | 2 -- cypress/cypress/integration/history.spec.ts | 36 ++++++++++--------- cypress/cypress/integration/questions.spec.ts | 2 -- cypress/cypress/integration/video.spec.ts | 1 - 8 files changed, 61 insertions(+), 43 deletions(-) diff --git a/client/src/components/video.tsx b/client/src/components/video.tsx index fe227b06..1dca9a47 100644 --- 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) => { + return Object.keys(state.mentorsById).length; + }); const curMentor = useSelector((state) => state.curMentor); const video = useSelector((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} /> @@ -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 ( -
+
1 ? { marginTop: 0 } : { marginTop: 50 }} + > {!hideLinkLabel && shouldDiplayWebLinks ? answerLinkCard : null} {mentorName ? mentorNameCard : null} +export const onMentorDisplayAnswer = + (isVideoInProgress: boolean, curMentor: string) => async (dispatch: ThunkDispatch) => { 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 index 1faa698a..18556d3b 100644 --- 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 index 3988a266..835ad898 100644 --- 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 index b110e8b4..457d0015 100644 --- 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 index 9626a0d1..53a09852 100644 --- 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 index 17c137f6..da9398a2 100644 --- 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 index 7b861c90..c5f915f8 100644 --- 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");