diff --git a/src/generic/Loading.jsx b/src/generic/Loading.jsx
new file mode 100644
index 000000000..2e12d2b18
--- /dev/null
+++ b/src/generic/Loading.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Spinner } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+export default function Loading() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages-and-resources/discussions/DiscussionsSettings.jsx b/src/pages-and-resources/discussions/DiscussionsSettings.jsx
index e2c11c9a6..aa51f5d09 100644
--- a/src/pages-and-resources/discussions/DiscussionsSettings.jsx
+++ b/src/pages-and-resources/discussions/DiscussionsSettings.jsx
@@ -1,5 +1,5 @@
import React, {
- useCallback, useContext,
+ useCallback, useContext, useEffect,
} from 'react';
import PropTypes from 'prop-types';
import {
@@ -7,6 +7,7 @@ import {
useLocation,
useRouteMatch,
} from 'react-router';
+import { useDispatch } from 'react-redux';
import { history } from '@edx/frontend-platform';
import { PageRoute } from '@edx/frontend-platform/react';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -16,18 +17,24 @@ import { Check } from '@edx/paragon/icons';
import FullScreenModal from '../../generic/full-screen-modal';
import Stepper from '../../generic/stepper';
import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
-import AppList from './app-list';
-import AppConfigForm from './app-config-form';
+
import messages from './messages';
import DiscussionsProvider from './DiscussionsProvider';
+import { fetchApps } from './data/thunks';
+import AppList from './app-list';
+import AppConfigForm from './app-config-form';
function DiscussionsSettings({ courseId, intl }) {
+ const dispatch = useDispatch();
const { path } = useRouteMatch();
const { pathname } = useLocation();
-
const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
- const discussionsPath = `${pagesAndResourcesPath}/discussions`;
+ useEffect(() => {
+ dispatch(fetchApps(courseId));
+ }, [courseId]);
+
+ const discussionsPath = `${pagesAndResourcesPath}/discussions`;
const isFirstStep = pathname === discussionsPath;
const steps = [{
@@ -65,9 +72,7 @@ function DiscussionsSettings({ courseId, intl }) {
-
+
{
- dispatch(fetchAppConfig(courseId, routeAppId));
- }, [courseId]);
+ const { formRef } = useContext(AppConfigFormContext);
+ const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
+ const { params: { appId: routeAppId } } = useRouteMatch();
+ const { selectedAppId, status } = useSelector(state => state.discussions);
+ const app = useModel('apps', selectedAppId);
+ // appConfigs have no ID of their own, so we use the active app ID to reference them.
+ // This appConfig may come back as null if the selectedAppId is not the activeAppId, i.e.,
+ // if we're configuring a new app.
+ const appConfig = useModel('appConfigs', selectedAppId);
- const { appId, appConfigId } = useSelector(state => state.discussions.appConfigForm);
+ useEffect(() => {
+ if (status === LOADED) {
+ if (routeAppId !== selectedAppId) {
+ dispatch(selectApp({ appId: routeAppId }));
+ }
+ }
+ }, [selectedAppId, routeAppId, status]);
// This is a callback that gets called after the form has been submitted successfully.
const handleSubmit = useCallback((values) => {
- dispatch(saveAppConfig(courseId, appId, values)).then(() => {
+ dispatch(saveAppConfig(courseId, selectedAppId, values)).then(() => {
history.push(pagesAndResourcesPath);
});
- }, [courseId, appId, courseId]);
+ }, [courseId, selectedAppId, courseId]);
- const app = useModel('apps', appId);
- const appConfig = useModel('appConfigs', appConfigId);
-
- if (!appConfig || !app) {
+ if (!selectedAppId || status !== LOADED) {
return null;
}
let form = null;
-
if (app.id === 'legacy') {
form = (
state.discussions.appConfigForm.status);
+ const saveStatus = useSelector(state => state.discussions.saveStatus);
const { formRef } = useContext(AppConfigFormContext);
- const submitButtonState = status === SAVING ? 'pending' : 'default';
+ const submitButtonState = saveStatus === SAVING ? 'pending' : 'default';
// This causes the form to be submitted from a button outside the form.
const handleApply = useCallback(() => {
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx
index c9911cf93..b75df9a44 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx
@@ -70,7 +70,7 @@ LegacyConfigForm.propTypes = {
allowAnonymousPosts: PropTypes.bool.isRequired,
allowAnonymousPostsPeers: PropTypes.bool.isRequired,
blackoutDates: PropTypes.string.isRequired,
- }).isRequired,
+ }),
onSubmit: PropTypes.func.isRequired,
// eslint-disable-next-line react/forbid-prop-types
formRef: PropTypes.object.isRequired,
@@ -78,4 +78,17 @@ LegacyConfigForm.propTypes = {
title: PropTypes.string.isRequired,
};
+LegacyConfigForm.defaultProps = {
+ appConfig: {
+ divideByCohorts: false,
+ allowDivisionByUnit: false,
+ divideCourseWideTopics: false,
+ divideGeneralTopic: false,
+ divideQuestionsForTAs: false,
+ allowAnonymousPosts: false,
+ allowAnonymousPostsPeers: false,
+ blackoutDates: '[]',
+ },
+};
+
export default injectIntl(LegacyConfigForm);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx b/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx
index f0fea3a8b..79d61bcc8 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx
@@ -16,6 +16,20 @@ const defaultAppConfig = {
};
describe('LegacyConfigForm', () => {
+ test('title rendering', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container.querySelector('h3')).toHaveTextContent('Test Legacy edX Discussions');
+ });
test('calls onSubmit when the formRef is submitted', async () => {
const formRef = createRef();
const handleSubmit = jest.fn();
@@ -23,6 +37,7 @@ describe('LegacyConfigForm', () => {
render(
{
const { container } = render(
{
const { container } = render(