refactor: adding a provider for the pages and resources path (#70)

Cleans up a TODO from prior commits.

src/pages-and-resources/PagesAndResources.jsx

@@ -14,6 +14,7 @@ import ResourceList from './resources/ResourcesList';
 
 import { fetchPages } from './data/thunks';
 import { useModels } from '../generic/model-store';
+import PagesAndResourcesProvider from './PagesAndResourcesProvider';
 
 function PagesAndResources({ courseId, intl }) {
   const { path } = useRouteMatch();
@@ -29,23 +30,25 @@ function PagesAndResources({ courseId, intl }) {
   const pages = useModels('pages', pageIds);
 
   return (
-    <main>
-      <div className="container-fluid pb-3">
-        <div className="d-flex justify-content-between align-items-center border-bottom">
-          <h1 className="mt-3">{intl.formatMessage(messages.heading)}</h1>
-          <a className="btn btn-primary" href={lmsCourseURL} role="button">
-            {intl.formatMessage(messages['viewLive.button'])}
-          </a>
+    <PagesAndResourcesProvider courseId={courseId}>
+      <main>
+        <div className="container-fluid pb-3">
+          <div className="d-flex justify-content-between align-items-center border-bottom">
+            <h1 className="mt-3">{intl.formatMessage(messages.heading)}</h1>
+            <a className="btn btn-primary" href={lmsCourseURL} role="button">
+              {intl.formatMessage(messages['viewLive.button'])}
+            </a>
+          </div>
+          <PageGrid pages={pages} />
+          <ResourceList />
         </div>
-        <PageGrid pages={pages} />
-        <ResourceList />
-      </div>
-      <Switch>
-        <PageRoute path={`${path}/discussions`}>
-          <DiscussionsSettings courseId={courseId} />
-        </PageRoute>
-      </Switch>
-    </main>
+        <Switch>
+          <PageRoute path={`${path}/discussions`}>
+            <DiscussionsSettings courseId={courseId} />
+          </PageRoute>
+        </Switch>
+      </main>
+    </PagesAndResourcesProvider>
   );
 }
 

src/pages-and-resources/PagesAndResourcesProvider.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const PagesAndResourcesContext = React.createContext({});
+
+export default function PagesAndResourcesProvider({ courseId, children }) {
+  return (
+    <PagesAndResourcesContext.Provider
+      value={{
+        path: `/course/${courseId}/pages-and-resources`,
+      }}
+    >
+      {children}
+    </PagesAndResourcesContext.Provider>
+  );
+}
+
+PagesAndResourcesProvider.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};

src/pages-and-resources/discussions/DiscussionsSettings.jsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useEffect, useRef, useState,
+  useCallback, useContext, useEffect, useRef, useState,
 } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
@@ -22,6 +22,7 @@ import AppList from './AppList';
 import ConfigFormContainer from './ConfigFormContainer';
 import messages from './messages';
 import { fetchApps, saveAppConfig } from './data/thunks';
+import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
 
 function DiscussionsSettings({ courseId, intl }) {
   const [selectedAppId, setSelectedAppId] = useState(null);
@@ -32,9 +33,9 @@ function DiscussionsSettings({ courseId, intl }) {
   const dispatch = useDispatch();
   const app = useModel('apps', selectedAppId);
 
+  const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
+
   // Route paths
-  // TODO: pagesAndResourcesPath should probably be passed in.
-  const pagesAndResourcesPath = `/course/${courseId}/pages-and-resources`;
   const discussionsPath = `${pagesAndResourcesPath}/discussions`;
   const selectedAppConfigPath = `${discussionsPath}/configure/${selectedAppId}`;