Ga topic status with localstorage

.changeset/chilled-houses-study.md

@@ -0,0 +1,8 @@
+---
+'@commercetools-docs/gatsby-theme-learning': minor
+'@commercetools-docs/gatsby-theme-docs': minor
+'@commercetools-website/docs-smoke-test': minor
+'@commercetools-website/documentation': minor
+---
+
+Added status indicator for course and course topics

packages/gatsby-theme-docs/gatsby-node.mjs

@@ -218,6 +218,7 @@ export const createSchemaCustomization = ({ actions, schema }) => {
           }),
         },
         courseId: { type: 'Int' },
+        topicName: { type: 'String' },
       },
       interfaces: ['Node'],
     }),
@@ -352,6 +353,9 @@ export const onCreateNode = async (
       courseId: node.frontmatter.courseId
         ? Number(node.frontmatter.courseId)
         : null,
+      topicName: node.frontmatter.topicName
+        ? String(node.frontmatter.topicName)
+        : null,
     };
 
     actions.createNode({
@@ -410,7 +414,8 @@ async function createContentPages(
       allContentPage {
         nodes {
           slug
-          courseId
+          courseId,
+          topicName,
         }
       }
       allReleaseNotePage(sort: { date: DESC }) {
@@ -447,7 +452,7 @@ async function createContentPages(
       (pageLinks, node) => [...pageLinks, ...(node.pages || [])],
       []
     );
-  pages.forEach(({ slug, courseId }) => {
+  pages.forEach(({ slug, courseId, topicName }) => {
     const matchingNavigationPage = navigationPages.find(
       (page) => trimTrailingSlash(page.path) === trimTrailingSlash(slug)
     );
@@ -492,6 +497,8 @@ async function createContentPages(
         }
         if (courseId) {
           contentPageData = {...contentPageData, context: {...contentPageData.context, courseId}}
+        }if (topicName) {
+          contentPageData = {...contentPageData, context: {...contentPageData.context, topicName}}
         }
         actions.createPage(contentPageData);
 

packages/gatsby-theme-docs/src/hooks/use-course-pages.js

@@ -8,6 +8,7 @@ export const useCoursePages = () => {
           nodes {
             slug
             courseId
+            topicName
           }
         }
       }
@@ -25,17 +26,33 @@ var isIndexed = false;
 const courseMapToPages = (coursePagesData) => {
   if (!isIndexed) {
     coursePagesData.forEach((element) => {
-      coursePageMap.set(element.slug, { courseId: element.courseId });
+      const { courseId, topicName } = element;
+      coursePageMap.set(element.slug, { courseId, topicName });
     });
   }
   isIndexed = true;
 };
 
 /**
- * Given a page slug, it returns the courseId where the page belongs
+ * Given an array of page slugs, it returns an array with course info
  * if exists, otherwise undefined
  */
-export const useCourseInfoByPageSlug = (pageSlug) => {
+export const useCourseInfoByPageSlugs = (pageSlugs) => {
   courseMapToPages(useCoursePages());
-  return coursePageMap.get(pageSlug);
+  const courseInfo = pageSlugs.reduce(
+    (prev, curr) => ({ ...prev, [curr]: coursePageMap.get(curr) }),
+    {}
+  );
+  // sanity check: all the pages should belong to the same course, therefore have the same courseId
+  const isOk = Object.values(courseInfo)?.every(
+    (info, _, theArray) => info?.courseId === theArray[0]?.courseId
+  );
+  if (!isOk) {
+    // TODO: decide if we want to make this blocker
+    console.warn(
+      'pages belonging to the same course have different courseId metadata',
+      courseInfo
+    );
+  }
+  return courseInfo;
 };

packages/gatsby-theme-docs/src/layouts/content.js

@@ -22,7 +22,6 @@ import LayoutPageNavigation from './internals/layout-page-navigation';
 import LayoutPageContent from './internals/layout-page-content';
 import PageContentInset from './internals/page-content-inset';
 import PageReadTime from './internals/page-read-time-estimation';
-import { PageCourseStatus } from '@commercetools-docs/gatsby-theme-learning';
 
 const LayoutContent = (props) => {
   const { ref, inView, entry } = useInView();
@@ -82,9 +81,6 @@ const LayoutContent = (props) => {
               {props.pageData.showTimeToRead && (
                 <PageReadTime data={props.pageData} />
               )}
-              {props.pageContext.courseId && (
-                <PageCourseStatus courseId={props.pageContext.courseId} />
-              )}
             </LayoutPageHeader>
             <LayoutPageHeaderSide>
               <SpacingsStack scale="m">

packages/gatsby-theme-docs/src/layouts/internals/layout-application.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { SWRConfig } from 'swr';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { designSystem } from '@commercetools-docs/ui-kit';
+import useIsClientSide from '../../hooks/use-is-client-side';
 
 /* NOTE: `overflow` shorthand is only supported is Chrome and FF */
 const Root = styled.div`
@@ -41,18 +43,55 @@ const Container = styled.div`
   }
 `;
 
-const LayoutApplication = (props) => (
-  <>
-    <Root
-      role="application"
-      id="application"
-      isGlobalNotificationVisible={Boolean(props.globalNotification)}
-    >
-      <Container {...props} />
-    </Root>
-    <div id="modal-portal" />
-  </>
-);
+const localStorageProvider = () => {
+  // When initializing, we restore the data from `localStorage` into a map.
+  const map = new Map(JSON.parse(localStorage.getItem('app-cache') || '[]'));
+
+  const handleBeforUnload = (event) => {
+    const appCache = JSON.stringify(Array.from(map.entries()));
+    localStorage.setItem('app-cache', appCache);
+  };
+
+  const handleBeforeAuth0LoginRedirect = (event) => {
+    // I'm about to redirect to auth0, I want to disable the set cache logic
+    window.removeEventListener(handleBeforUnload);
+    // and ensure the cache is clean
+    localStorage.removeItem('app-cache');
+  };
+
+  // Before unloading the app, we write back all the data into `localStorage`.
+  window.addEventListener('beforeunload', handleBeforUnload);
+
+  window.addEventListener(
+    'beforeAuth0LoginRedirect',
+    handleBeforeAuth0LoginRedirect
+  );
+
+  // We still use the map for write & read for performance.
+  return map;
+};
+
+const LayoutApplication = (props) => {
+  const { isClientSide } = useIsClientSide();
+  return (
+    <>
+      <Root
+        role="application"
+        id="application"
+        isGlobalNotificationVisible={Boolean(props.globalNotification)}
+      >
+        {isClientSide ? (
+          <SWRConfig value={{ provider: localStorageProvider }}>
+            <Container {...props} />
+          </SWRConfig>
+        ) : (
+          <Container {...props} />
+        )}
+      </Root>
+      <div id="modal-portal" />
+    </>
+  );
+};
 LayoutApplication.propTypes = {
   globalNotification: PropTypes.shape({
     notificationType: PropTypes.oneOf(['info', 'warning']).isRequired,

packages/gatsby-theme-docs/src/layouts/internals/sidebar.js

@@ -16,8 +16,11 @@ import SiteIcon from '../../overrides/site-icon';
 import useScrollPosition from '../../hooks/use-scroll-position';
 import { BetaFlag } from '../../components';
 import LayoutHeaderLogo from './layout-header-logo';
-import { useCourseInfoByPageSlug } from '../../hooks/use-course-pages';
-import { PageCourseStatus } from '@commercetools-docs/gatsby-theme-learning';
+import { useCourseInfoByPageSlugs } from '../../hooks/use-course-pages';
+import {
+  SidebarCourseStatus,
+  SidebarTopicStatus,
+} from '@commercetools-docs/gatsby-theme-learning';
 
 const ReleaseNotesIcon = createStyledIcon(Icons.ReleaseNotesSvgIcon);
 
@@ -91,6 +94,19 @@ const LinkItem = styled.div`
   display: flex;
   flex-direction: row;
   align-items: flex-end;
+  vertical-align: middle;
+`;
+const LinkItemWithIcon = styled.div`
+  padding: 0 0 0 ${designSystem.dimensions.spacings.m};
+  display: flex;
+  flex-direction: row;
+  vertical-align: middle;
+  svg {
+    margin-right: 2px;
+  }
+  div {
+    line-height: ${designSystem.typography.lineHeights.cardSmallTitle};
+  }
 `;
 const linkStyles = css`
   border-left: ${designSystem.dimensions.spacings.xs} solid
@@ -121,6 +137,24 @@ const activeLinkStyles = css`
   color: ${designSystem.colors.light.linkNavigation} !important;
 `;
 
+const StatusIconWrapper = styled.span`
+  display: flex;
+  vertical-align: middle;
+  padding-left: 10px; // change this setting to remove the indentation
+  svg {
+    margin-right: 5px;
+  }
+`;
+
+const LinkSubtitleWithIcon = (props) => (
+  <LinkSubtitle>
+    <StatusIconWrapper>{props.children}</StatusIconWrapper>
+  </LinkSubtitle>
+);
+LinkSubtitleWithIcon.propTypes = {
+  children: PropTypes.any,
+};
+
 const SidebarLink = (props) => {
   const { locationPath, customStyles, customActiveStyles, ...forwardProps } =
     props;
@@ -234,7 +268,10 @@ SidebarLinkWrapper.propTypes = {
 };
 
 const SidebarChapter = (props) => {
-  const courseInfo = useCourseInfoByPageSlug(props.chapter.pages[0].path);
+  const courseInfo = useCourseInfoByPageSlugs(
+    props.chapter.pages.map((page) => page.path)
+  );
+  const courseId = Object.values(courseInfo)[0]?.courseId;
   const elemId = `sidebar-chapter-${props.index}`;
   const getChapterDOMElement = React.useCallback(
     () => document.getElementById(elemId),
@@ -244,26 +281,48 @@ const SidebarChapter = (props) => {
   return (
     <div role="sidebar-chapter" id={elemId}>
       <SpacingsStack scale="s">
-        <LinkItem>
-          <LinkTitle>{props.chapter.chapterTitle}</LinkTitle>
-          {courseInfo?.courseId && (
-            <PageCourseStatus courseId={courseInfo.courseId} />
-          )}
-        </LinkItem>
+        {courseId ? (
+          <LinkItemWithIcon>
+            <SidebarCourseStatus courseId={courseId} />
+            <LinkTitle>{props.chapter.chapterTitle}</LinkTitle>
+          </LinkItemWithIcon>
+        ) : (
+          <LinkItem>
+            <LinkTitle>{props.chapter.chapterTitle}</LinkTitle>
+          </LinkItem>
+        )}
+
         <SpacingsStack scale="s">
           {props.chapter.pages &&
-            props.chapter.pages.map((pageLink, pageIndex) => (
-              <SidebarLinkWrapper
-                key={`${props.index}-${pageIndex}-${pageLink.path}`}
-                to={pageLink.path}
-                onClick={props.onLinkClick}
-                location={props.location}
-                nextScrollPosition={props.nextScrollPosition}
-                getChapterDOMElement={getChapterDOMElement}
-              >
-                <LinkSubtitle>{pageLink.title}</LinkSubtitle>
-              </SidebarLinkWrapper>
-            ))}
+            props.chapter.pages.map((pageLink, pageIndex) => {
+              const currTopicName = courseInfo[pageLink.path]?.topicName;
+              const TopicIcon =
+                courseId && currTopicName ? (
+                  <SidebarTopicStatus
+                    courseId={courseId}
+                    pageTitle={currTopicName}
+                  />
+                ) : null;
+              return (
+                <SidebarLinkWrapper
+                  key={`${props.index}-${pageIndex}-${pageLink.path}`}
+                  to={pageLink.path}
+                  onClick={props.onLinkClick}
+                  location={props.location}
+                  nextScrollPosition={props.nextScrollPosition}
+                  getChapterDOMElement={getChapterDOMElement}
+                >
+                  {TopicIcon ? (
+                    <LinkSubtitleWithIcon>
+                      {TopicIcon}
+                      {pageLink.title}
+                    </LinkSubtitleWithIcon>
+                  ) : (
+                    <LinkSubtitle>{pageLink.title}</LinkSubtitle>
+                  )}
+                </SidebarLinkWrapper>
+              );
+            })}
         </SpacingsStack>
       </SpacingsStack>
     </div>

packages/gatsby-theme-learning/README.md

@@ -11,8 +11,8 @@ Works against the learning-api.
 
 - `auth0Domain`: the auth0 application domain url (it is defined in the auth0 management app)
 - `learnApiBaseUrl`: the learn API base url. It can be omitted if the host running the site matches the api host.
-- `features`: a list of feature flags (boolean values) to enable/disable specific functionalities
-  - `courseStatusIndicator`: feature flag to toggle the course status indicator.
+- `features`: an array of strings representing feature flags used to enable/disable specific functionalities. Expected values:
+  - `status-indicator`: feature flag to toggle the course and topics status indicator.
 
 In order to enable the plugin, at least the following configuration should be added to the `gatsby-config.js` plugin section:
 

packages/gatsby-theme-learning/gatsby-browser.js

@@ -6,10 +6,7 @@ export const wrapRootElement = ({ element }, pluginOptions) => {
       value={{
         learnApiBaseUrl: pluginOptions.learnApiBaseUrl,
         auth0Domain: pluginOptions.auth0Domain,
-        features: {
-          courseStatusIndicator:
-            pluginOptions?.features?.courseStatusIndicator || false,
-        },
+        features: pluginOptions?.features || [],
       }}
     >
       {element}

packages/gatsby-theme-learning/gatsby-node.mjs

@@ -5,8 +5,6 @@ export const pluginOptionsSchema = ({ Joi }) => {
       .allow('')
       .default('')
       .description(`Learn API base url`),
-    features: Joi.object({
-      courseStatusIndicator: Joi.boolean().default(false),
-    })
+    features: Joi.array().items(Joi.string()),
   });
 };

packages/gatsby-theme-learning/gatsby-ssr.js

@@ -0,0 +1,15 @@
+import ConfigContext from './src/components/config-context';
+
+export const wrapRootElement = ({ element }, pluginOptions) => {
+  return (
+    <ConfigContext.Provider
+      value={{
+        learnApiBaseUrl: pluginOptions.learnApiBaseUrl,
+        auth0Domain: pluginOptions.auth0Domain,
+        features: pluginOptions?.features || [],
+      }}
+    >
+      {element}
+    </ConfigContext.Provider>
+  );
+};

packages/gatsby-theme-learning/index.ts

@@ -3,3 +3,4 @@ export {
   useFetchCourses,
   getCourseStatusByCourseId,
 } from './src/hooks/use-course-status';
+export { useFetchCourseDetails } from './src/hooks/use-course-details';