diff --git a/src/discussions/data/hooks.js b/src/discussions/data/hooks.js index dbd2e0ec..443547c0 100644 --- a/src/discussions/data/hooks.js +++ b/src/discussions/data/hooks.js @@ -4,7 +4,6 @@ import { useContext, useEffect, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory, useLocation, useRouteMatch } from 'react-router'; -import { getConfig } from '@edx/frontend-platform'; import { AppContext } from '@edx/frontend-platform/react'; import { breakpoints, useWindowSize } from '@edx/paragon'; @@ -13,7 +12,7 @@ import { fetchCourseBlocks } from '../../data/thunks'; import { clearRedirect } from '../posts/data'; import { selectTopics } from '../topics/data/selectors'; import { fetchCourseTopics } from '../topics/data/thunks'; -import { discussionsPath } from '../utils'; +import { discussionsPath, postMessageToParent } from '../utils'; import { selectAreThreadsFiltered, selectPostThreadCount } from './selectors'; import { fetchCourseConfig } from './thunks'; @@ -111,12 +110,7 @@ function getOuterHeight(element) { */ export function useContainerSizeForParent(refContainer) { function postResizeMessage(height) { - window.parent.postMessage({ - type: 'plugin.resize', - payload: { - height, - }, - }, getConfig().LEARNING_BASE_URL); + postMessageToParent('plugin.resize', { height }); } const location = useLocation(); diff --git a/src/discussions/data/hooks.test.jsx b/src/discussions/data/hooks.test.jsx index 796a3e17..545c79c5 100644 --- a/src/discussions/data/hooks.test.jsx +++ b/src/discussions/data/hooks.test.jsx @@ -5,7 +5,7 @@ import { IntlProvider } from 'react-intl'; import { Context as ResponsiveContext } from 'react-responsive'; import { MemoryRouter } from 'react-router'; -import { initializeMockApp } from '@edx/frontend-platform'; +import { getConfig, initializeMockApp } from '@edx/frontend-platform'; import { AppProvider } from '@edx/frontend-platform/react'; import { initializeStore } from '../../store'; @@ -50,13 +50,14 @@ describe('Hooks', () => { delete window.parent; window.parent = { ...window, postMessage: jest.fn() }; const { unmount } = renderComponent(); - await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(1)); + // Once for LMS and one for learning MFE + await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(2)); // Test that size is reset on unmount unmount(); - await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(2)); + await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(4)); expect(window.parent.postMessage).toHaveBeenLastCalledWith( { type: 'plugin.resize', payload: { height: null } }, - 'http://localhost:2000', + getConfig().LMS_BASE_URL, ); }); test('useContainerSizeForParent disabled', async () => { diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx index 85c9f1f4..863ee5cc 100644 --- a/src/discussions/discussions-home/DiscussionsHome.jsx +++ b/src/discussions/discussions-home/DiscussionsHome.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useSelector } from 'react-redux'; import { @@ -9,15 +9,13 @@ import { PostActionsBar } from '../../components'; import { ALL_ROUTES, DiscussionProvider, Routes } from '../../data/constants'; import { DiscussionContext } from '../common/context'; import { - useCourseDiscussionData, - useIsOnDesktop, - useRedirectToThread, - useSidebarVisible, + useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useSidebarVisible, } from '../data/hooks'; import { selectDiscussionProvider } from '../data/selectors'; import { EmptyPosts, EmptyTopics } from '../empty-posts'; import messages from '../messages'; import { BreadcrumbMenu, LegacyBreadcrumbMenu, NavigationBar } from '../navigation'; +import { postMessageToParent } from '../utils'; import DiscussionContent from './DiscussionContent'; import DiscussionSidebar from './DiscussionSidebar'; @@ -29,6 +27,7 @@ export default function DiscussionsHome() { const { params: { page }, } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`); + const { params: { path } } = useRouteMatch(`${Routes.DISCUSSIONS.PATH}/:path*`); const { params } = useRouteMatch(ALL_ROUTES); const { courseId, @@ -42,8 +41,7 @@ export default function DiscussionsHome() { // Display the content area if we are currently viewing/editing a post or creating one. const displayContentArea = postId || postEditorVisible || learnerUsername; - const isSidebarVisible = useSidebarVisible(); - let displaySidebar = isSidebarVisible; + let displaySidebar = useSidebarVisible(); const isOnDesktop = useIsOnDesktop(); @@ -56,6 +54,11 @@ export default function DiscussionsHome() { const provider = useSelector(selectDiscussionProvider); useCourseDiscussionData(courseId); useRedirectToThread(courseId); + useEffect(() => { + if (path && path !== 'undefined') { + postMessageToParent('discussions.navigate', { path }); + } + }, [path]); return ( { - if (window.parent !== window) { - window.parent.postMessage({ type: 'learning.events.sidebar.close' }, getConfig().LEARNING_BASE_URL); - } + postMessageToParent('learning.events.sidebar.close'); }; return (
diff --git a/src/discussions/utils.js b/src/discussions/utils.js index 433d925d..9d90ce26 100644 --- a/src/discussions/utils.js +++ b/src/discussions/utils.js @@ -2,6 +2,7 @@ import { getIn } from 'formik'; import { generatePath, useRouteMatch } from 'react-router'; +import { getConfig } from '@edx/frontend-platform'; import { Delete, Edit, Flag, Pin, QuestionAnswer, VerifiedBadge, } from '@edx/paragon/icons'; @@ -200,3 +201,26 @@ export const discussionsPath = (path, params) => { const pathname = generatePath(path, params); return (location) => ({ ...location, pathname }); }; + +/** + * Helper function to make a postMessage call + * @param {string} type message type + * @param {object} payload data to send in message + */ +export function postMessageToParent(type, payload = {}) { + if (window.parent !== window) { + const messageTargets = [ + getConfig().LEARNING_BASE_URL, + getConfig().LMS_BASE_URL, + ]; + messageTargets.forEach(target => { + window.parent.postMessage( + { + type, + payload, + }, + target, + ); + }); + } +}