Move creating pagePanel, pageNav to TimesSquareApp

This makes sure these components are create *inside* the TimesSquareUrlParametersContext. Using that context, the TimesSquareApp is able to determine what panels and navs are appropriate.
lsst-sqre · Mar 28, 2024 · 3c26a90 · 3c26a90
1 parent b10e887
commit 3c26a90
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 152 deletions.
diff --git a/apps/squareone/src/components/TimesSquareApp/TimesSquareApp.js b/apps/squareone/src/components/TimesSquareApp/TimesSquareApp.js
@@ -8,7 +8,10 @@ import React from 'react';
 import styled from 'styled-components';
 
 import Sidebar from './Sidebar';
-import { TimesSquareParametersContext } from '../TimesSquareParametersProvider';
+import { TimesSquareUrlParametersContext } from '../TimesSquareUrlParametersProvider';
+import TimesSquareMainGitHubNav from '../TimesSquareMainGitHubNav';
+import TimesSquarePrGitHubNav from '../TimesSquarePrGitHubNav';
+import TimesSquareGitHubPagePanel from '../TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel';
 
 const StyledLayout = styled.div`
   display: flex;
@@ -22,9 +25,19 @@ const StyledLayout = styled.div`
   }
 `;
 
-export default function TimesSquareApp({ children, pageNav, pagePanel }) {
-  const paramsContext = React.useContext(TimesSquareParametersContext);
-  console.log('paramsContext in TimesSquareApp:', paramsContext);
+export default function TimesSquareApp({ children }) {
+  const { tsSlug, owner, repo, commit, githubSlug } = React.useContext(
+    TimesSquareUrlParametersContext
+  );
+
+  const pageNav = commit ? (
+    <TimesSquarePrGitHubNav owner={owner} repo={repo} commitSha={commit} />
+  ) : (
+    <TimesSquareMainGitHubNav pagePath={githubSlug} />
+  );
+
+  const pagePanel = tsSlug ? <TimesSquareGitHubPagePanel /> : null;
+
   return (
     <StyledLayout>
       <Sidebar pageNav={pageNav} pagePanel={pagePanel} />

diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js
@@ -12,11 +12,11 @@ import Error from 'next/error';
 
 import useTimesSquarePage from '../../hooks/useTimesSquarePage';
 import TimesSquareParameters from '../TimesSquareParameters';
-import TimesSquareParametersContext from '../TimesSquareParametersProvider';
+import TimesSquareUrlParametersContext from '../TimesSquareUrlParametersProvider';
 
 export default function TimesSquareGitHubPagePanel({}) {
   const { publicRuntimeConfig } = getConfig();
-  const { tsPageUrl } = React.useContext(TimesSquareParametersContext);
+  const { tsPageUrl } = React.useContext(TimesSquareUrlParametersContext);
   const pageData = useTimesSquarePage(tsPageUrl);
 
   if (pageData.loading) {

diff --git a/apps/squareone/src/components/TimesSquareNotebookViewer/TimesSquareNotebookViewer.js b/apps/squareone/src/components/TimesSquareNotebookViewer/TimesSquareNotebookViewer.js
@@ -7,7 +7,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import useHtmlStatus from './useHtmlStatus';
-import { TimesSquareParametersContext } from '../TimesSquareParametersProvider';
+import { TimesSquareUrlParametersContext } from '../TimesSquareUrlParametersProvider';
 
 const StyledIframe = styled.iframe`
   /* --shadow-color: 0deg 0% 74%;
@@ -23,7 +23,7 @@ const StyledIframe = styled.iframe`
 
 export default function TimesSquareNotebookViewer({}) {
   const { tsPageUrl, notebookParameters, displaySettings } = React.useContext(
-    TimesSquareParametersContext
+    TimesSquareUrlParametersContext
   );
   const htmlStatus = useHtmlStatus(
     tsPageUrl,

diff --git a/apps/squareone/src/components/TimesSquareParameters/TimesSquareParameters.js b/apps/squareone/src/components/TimesSquareParameters/TimesSquareParameters.js
@@ -7,7 +7,7 @@ import Button, { RedGhostButton } from '../Button';
 import StringInput from './StringInput';
 import ParameterInput from './ParameterInput';
 
-import { TimesSquareParametersContext } from '../TimesSquareParametersProvider';
+import { TimesSquareUrlParametersContext } from '../TimesSquareUrlParametersProvider';
 import useTimesSquarePage from '../../hooks/useTimesSquarePage';
 
 // Create input components based on the parameter's JSON schema
@@ -38,7 +38,7 @@ export default function TimesSquareParameters({}) {
     tsPageUrl,
     displaySettings,
     notebookParameters: userParameters,
-  } = React.useContext(TimesSquareParametersContext);
+  } = React.useContext(TimesSquareUrlParametersContext);
   const { parameters } = useTimesSquarePage(tsPageUrl);
 
   const ajv = new Ajv({ coerceTypes: true });

diff --git a/apps/squareone/src/components/TimesSquareParametersProvider/index.js b/apps/squareone/src/components/TimesSquareParametersProvider/index.js
diff --git a/...Provider/TimesSquareParametersProvider.js → ...vider/TimesSquareUrlParametersProvider.js b/...Provider/TimesSquareParametersProvider.js → ...vider/TimesSquareUrlParametersProvider.js
@@ -1,25 +1,23 @@
 /*
- * Context provider for the current page's notebook and display parameters.
+ * Context provider for the current page's notebook and display parameters
+ * that come from the URL path and query parameters.
  */
 
 import React from 'react';
 import getConfig from 'next/config';
 import { useRouter } from 'next/router';
 
-export const TimesSquareParametersContext = React.createContext();
-
-export default function TimesSquareParametersProvider({ children }) {
-  // const [displayParameters, setDisplayParameters] = React.useState({
-  //   ts_hide_code: '1',
-  // });
-  // const [notebookParameters, setNotebookParameters] = React.useState({});
+export const TimesSquareUrlParametersContext = React.createContext();
 
+export default function TimesSquareUrlParametersProvider({ children }) {
   const { publicRuntimeConfig } = getConfig();
   const { timesSquareUrl } = publicRuntimeConfig;
   const router = useRouter();
 
-  // Get components out of the URL path
-  const { tsSlug, owner = '', repo = '', commit = '' } = router.query;
+  // Get components out of the URL path. Only /github-pr/ pages have owner,
+  // repo, and commit components in the path. In /github/ pages the owner
+  // and repo are part of tsSlug.
+  const { tsSlug, owner = null, repo = null, commit = null } = router.query;
   console.log('tsSlug: ', tsSlug);
 
   // Since the page's path is a [...tsSlug], we need to join the parts of the
@@ -28,7 +26,9 @@ export default function TimesSquareParametersProvider({ children }) {
   // notebook name for /github-pr/ pages.
   const githubSlug = tsSlug.join('/');
 
-  // Construct the URL for the Times Square API endpoint
+  // Construct the URL for the Times Square API endpoint that gives information
+  // about the page. GitHub PR pages (github-pr) have different API URLs than
+  // regular GitHub pages.
   const tsPageUrl = router.pathname.startsWith('/times-square/github-pr')
     ? `${timesSquareUrl}/v1/github-pr/${owner}/${repo}/${commit}/${githubSlug}`
     : `${timesSquareUrl}/v1/github/${githubSlug}`;
@@ -55,10 +55,19 @@ export default function TimesSquareParametersProvider({ children }) {
   console.log('notebookParameters: ', notebookParameters);
 
   return (
-    <TimesSquareParametersContext.Provider
-      value={{ tsPageUrl, displaySettings, notebookParameters }}
+    <TimesSquareUrlParametersContext.Provider
+      value={{
+        tsPageUrl,
+        displaySettings,
+        notebookParameters,
+        owner,
+        repo,
+        commit,
+        tsSlug,
+        githubSlug,
+      }}
     >
       {children}
-    </TimesSquareParametersContext.Provider>
+    </TimesSquareUrlParametersContext.Provider>
   );
 }
diff --git a/apps/squareone/src/components/TimesSquareUrlParametersProvider/index.js b/apps/squareone/src/components/TimesSquareUrlParametersProvider/index.js
@@ -0,0 +1,2 @@
+export * from './TimesSquareUrlParametersProvider';
+export { default } from './TimesSquareUrlParametersProvider';
diff --git a/apps/squareone/src/pages/times-square/github-pr/[owner]/[repo]/[commit]/[...tsSlug].js b/apps/squareone/src/pages/times-square/github-pr/[owner]/[repo]/[commit]/[...tsSlug].js
@@ -1,29 +1,17 @@
 import getConfig from 'next/config';
-import { useRouter } from 'next/router';
 
 import TimesSquareApp from '../../../../../../components/TimesSquareApp';
 import WideContentLayout from '../../../../../../components/WideContentLayout';
-import TimesSquarePrGitHubNav from '../../../../../../components/TimesSquarePrGitHubNav';
 import TimesSquareNotebookViewer from '../../../../../../components/TimesSquareNotebookViewer';
-import TimesSquareGitHubPagePanel from '../../../../../../components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel';
-import TimesSquareParametersProvider from '../../../../../../components/TimesSquareParametersProvider';
+import TimesSquareUrlParametersProvider from '../../../../../../components/TimesSquareUrlParametersProvider';
 
 export default function GitHubPrNotebookViewPage({}) {
-  const router = useRouter();
-  const { owner, repo, commit } = router.query;
-
-  const pageNav = (
-    <TimesSquarePrGitHubNav owner={owner} repo={repo} commitSha={commit} />
-  );
-
-  const pagePanel = <TimesSquareGitHubPagePanel />;
-
   return (
-    <TimesSquareParametersProvider>
-      <TimesSquareApp pageNav={pageNav} pagePanel={pagePanel}>
+    <TimesSquareUrlParametersProvider>
+      <TimesSquareApp>
         <TimesSquareNotebookViewer />
       </TimesSquareApp>
-    </TimesSquareParametersProvider>
+    </TimesSquareUrlParametersProvider>
   );
 }
 

diff --git a/apps/squareone/src/pages/times-square/github/[...tsSlug].js b/apps/squareone/src/pages/times-square/github/[...tsSlug].js
@@ -1,26 +1,17 @@
 import getConfig from 'next/config';
-import { useRouter } from 'next/router';
 
 import TimesSquareApp from '../../../components/TimesSquareApp';
 import WideContentLayout from '../../../components/WideContentLayout';
-import TimesSquareMainGitHubNav from '../../../components/TimesSquareMainGitHubNav';
 import TimesSquareNotebookViewer from '../../../components/TimesSquareNotebookViewer';
-import TimesSquareGitHubPagePanel from '../../../components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel';
-import TimesSquareParametersProvider from '../../../components/TimesSquareParametersProvider';
+import TimesSquareUrlParametersProvider from '../../../components/TimesSquareUrlParametersProvider';
 
 export default function GitHubNotebookViewPage({}) {
-  const router = useRouter();
-  const { tsSlug } = router.query;
-  const githubSlug = tsSlug.join('/');
-
-  const pageNav = <TimesSquareMainGitHubNav pagePath={githubSlug} />;
-
   return (
-    <TimesSquareParametersProvider>
-      <TimesSquareApp pageNav={pageNav}>
+    <TimesSquareUrlParametersProvider>
+      <TimesSquareApp>
         <TimesSquareNotebookViewer />
       </TimesSquareApp>
-    </TimesSquareParametersProvider>
+    </TimesSquareUrlParametersProvider>
   );
 }
 
@@ -29,7 +20,7 @@ GitHubNotebookViewPage.getLayout = function getLayout(page) {
 };
 
 export async function getServerSideProps() {
-  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
+  const { publicRuntimeConfig } = getConfig();
 
   // Make the page return a 404 if Times Square is not configured
   const notFound = publicRuntimeConfig.timesSquareUrl ? false : true;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './TimesSquareUrlParametersProvider';
		export { default } from './TimesSquareUrlParametersProvider';