Data fetching on client-side directly from GitHub API

components/errors/ErrorNotificationDisplay.tsx

@@ -17,12 +17,14 @@ export function ErrorNotificationDisplay ({ errorsState, issueDataState }: Error
   const [isExpanded, setIsExpanded] = useState(true);
 
   const viewMode = useViewMode();
+  // @ts-ignore (TODO: fix types below and remove this)
   const filteredErrors: StarMapsIssueErrorsGrouped[] = useMemo(() => {
     if (errorsState.ornull == null) {
       return [];
     }
     const errors = errorsState.ornull.value;
     if (viewMode != null && issueDataState.ornull != null) {
+      // @ts-ignore (TODO: fix types below and remove this)
       return errorFilters[viewMode](errors, issueDataState.ornull.value)
     }
     return errors;

components/roadmap-grid/RoadmapDetailedView.tsx

@@ -1,34 +1,35 @@
-import { Box, Spinner } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+
+import { Box, Skeleton, Spinner, Stack } from '@chakra-ui/react';
 import { useHookstate } from '@hookstate/core';
+
 import type { Dayjs } from 'dayjs';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { DEFAULT_TICK_COUNT } from '../../config/constants';
+import { useGlobalLoadingState } from '../../hooks/useGlobalLoadingState';
+import { usePrevious } from '../../hooks/usePrevious';
+import { useShowTodayMarker } from '../../hooks/useShowTodayMarker';
+import { useViewMode } from '../../hooks/useViewMode';
+import { globalTimeScaler } from '../../lib/client/TimeScaler';
+import { convertIssueDataStateToDetailedViewGroupOld } from '../../lib/client/convertIssueDataToDetailedViewGroup';
+import { dayjs } from '../../lib/client/dayjs';
 import { getTicks } from '../../lib/client/getTicks';
+import getUniqIdForGroupedIssues from '../../lib/client/getUniqIdForGroupedIssues';
 import { ViewMode } from '../../lib/enums';
 import { DetailedViewGroup, IssueDataViewInput } from '../../lib/types';
-import { useViewMode } from '../../hooks/useViewMode';
+import { ErrorBoundary } from '../errors/ErrorBoundary';
+import NumSlider from '../inputs/NumSlider';
 import styles from './Roadmap.module.css';
 import { Grid } from './grid';
 import { GridHeader } from './grid-header';
 import { GridRow } from './grid-row';
 import { GroupHeader } from './group-header';
 import { GroupWrapper } from './group-wrapper';
 import { Headerline } from './headerline';
-import NumSlider from '../inputs/NumSlider';
-import { dayjs } from '../../lib/client/dayjs';
-import { DEFAULT_TICK_COUNT } from '../../config/constants';
-import { globalTimeScaler } from '../../lib/client/TimeScaler';
-import { convertIssueDataStateToDetailedViewGroupOld } from '../../lib/client/convertIssueDataToDetailedViewGroup';
-import { useRouter } from 'next/router';
-import { ErrorBoundary } from '../errors/ErrorBoundary';
-import { usePrevious } from '../../hooks/usePrevious';
-import getUniqIdForGroupedIssues from '../../lib/client/getUniqIdForGroupedIssues';
-import { useShowTodayMarker } from '../../hooks/useShowTodayMarker';
 
-export function RoadmapDetailed({
-  issueDataState
-}: IssueDataViewInput) {
+export function RoadmapDetailed({ issueDataState }: IssueDataViewInput) {
   /**
    * Don't commit setting this to true.. just a simple toggle so we can debug things.
    */
@@ -37,15 +38,16 @@ export function RoadmapDetailed({
   const router = useRouter();
 
   const issuesGroupedState = useHookstate<DetailedViewGroup[]>([]);
-  const groupedIssuesId = getUniqIdForGroupedIssues(issuesGroupedState.value)
+  // @ts-ignore (TODO: fix types below and remove this)
+  const groupedIssuesId = getUniqIdForGroupedIssues(issuesGroupedState.value);
   const groupedIssuesIdPrev = usePrevious(groupedIssuesId);
-  const query = router.query
+  const query = router.query;
   const showTodayMarker = useShowTodayMarker();
 
-  const setIssuesGroupedState = issuesGroupedState.set
+  const setIssuesGroupedState = issuesGroupedState.set;
   useEffect(() => {
     if (viewMode && groupedIssuesIdPrev !== groupedIssuesId) {
-      setIssuesGroupedState(() => convertIssueDataStateToDetailedViewGroupOld(issueDataState, viewMode, query))
+      setIssuesGroupedState(() => convertIssueDataStateToDetailedViewGroupOld(issueDataState, viewMode, query));
     }
   }, [viewMode, query, setIssuesGroupedState, issueDataState, groupedIssuesIdPrev, groupedIssuesId]);
 
@@ -62,6 +64,7 @@ export function RoadmapDetailed({
    */
   const [numHeaderTicks, setNumHeaderTicks] = useState(5);
   const [numGridCols, setNumGridCols] = useState(45);
+  const globalLoadingState = useGlobalLoadingState();
 
   // for preventing dayjsDates from being recalculated if it doesn't need to be
   const issuesGroupedId = issuesGroupedState.value.map((g) => g.groupName).join(',');
@@ -70,13 +73,13 @@ export function RoadmapDetailed({
    */
   const dayjsDates: Dayjs[] = useMemo(() => {
     const today = dayjs();
-    let innerDayjsDates: Dayjs[] = []
+    let innerDayjsDates: Dayjs[] = [];
     try {
       innerDayjsDates = issuesGroupedState.value
         .flatMap((group) => group.items.map((item) => dayjs(item.due_date).utc()))
         .filter((d) => d.isValid());
     } catch {
-      innerDayjsDates = []
+      innerDayjsDates = [];
     }
     /**
      * Add today
@@ -88,13 +91,13 @@ export function RoadmapDetailed({
      */
     let minDate = dayjs.min([...innerDayjsDates, today.subtract(1, 'month')]);
     let maxDate = dayjs.max([...innerDayjsDates, today.add(1, 'month')]);
-    let incrementMax = false
+    let incrementMax = false;
 
     /**
      * This is a hack to make sure that the first and last ticks are always visible.
      * TODO: Perform in constant time based on current DateGranularity
      */
-    while (maxDate.diff(minDate, 'months') < (3 * DEFAULT_TICK_COUNT)) {
+    while (maxDate.diff(minDate, 'months') < 3 * DEFAULT_TICK_COUNT) {
       if (incrementMax) {
         maxDate = maxDate.add(1, 'quarter');
       } else {
@@ -106,36 +109,51 @@ export function RoadmapDetailed({
     /**
      * Add minDate and maxDate so that the grid is not cut off.
      */
-    innerDayjsDates.push(minDate)
-    innerDayjsDates.push(maxDate)
+    innerDayjsDates.push(minDate);
+    innerDayjsDates.push(maxDate);
 
     return innerDayjsDates;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [issuesGroupedState.length, issuesGroupedId]);
 
   /**
    *  * Ensure that the dates are
    *  * converted back to JS Date objects.
    *  * sorted - d3 timescale requires it to function properly
    */
-  const dates = useMemo(() => dayjsDates
-    .map((date) => date.toDate())
-    .sort((a, b) => a.getTime() - b.getTime()),  [dayjsDates]);
+  const dates = useMemo(
+    () => dayjsDates.map((date) => date.toDate()).sort((a, b) => a.getTime() - b.getTime()),
+    [dayjsDates],
+  );
 
   useEffect(() => {
     globalTimeScaler.setScale(dates, numGridCols * 1.09);
   }, [dates, numGridCols]);
 
-  const invalidGroups = issuesGroupedState.filter((group) => group.ornull == null || group.items.ornull == null)
+  const invalidGroups = issuesGroupedState.filter((group) => group.ornull == null || group.items.ornull == null);
   if (issuesGroupedState.value.length === 0 || invalidGroups.length > 0) {
     if (invalidGroups.length > 0) {
       invalidGroups.forEach((g) => {
         console.warn('Found an invalid group: ', g.value);
       });
     }
+    // @ts-ignore (TODO: fix types below and remove this)
     return <Spinner />;
   }
 
+  // return early while loading.
+  if (globalLoadingState.get()) {
+    return (
+      <Stack pt={'20px'}>
+        <Skeleton height='60px' />
+        <Skeleton height='150px' />
+        <Skeleton height='150px' />
+        <Skeleton height='150px' />
+        <Skeleton height='150px' />
+      </Stack>
+    );
+  }
+
   /**
    * Current getTicks function returns 1 less than the number of ticks we want.
    */
@@ -144,27 +162,55 @@ export function RoadmapDetailed({
 
   return (
     <>
-      {isDevMode && <NumSlider msg="how many header ticks" value={numHeaderTicks} min={5} max={60} setValue={setNumHeaderTicks}/>}
-      {isDevMode && <NumSlider msg="how many grid columns" value={numGridCols} min={20} max={60} step={numHeaderTicks} setValue={setNumGridCols}/>}
-
-      <Box className={`${styles.timelineBox} ${ viewMode=='detail' ? styles.detailView : '' }`} >
+      {isDevMode && (
+        <NumSlider msg='how many header ticks' value={numHeaderTicks} min={5} max={60} setValue={setNumHeaderTicks} />
+      )}
+      {isDevMode && (
+        <NumSlider
+          msg='how many grid columns'
+          value={numGridCols}
+          min={20}
+          max={60}
+          step={numHeaderTicks}
+          setValue={setNumGridCols}
+        />
+      )}
+
+      <Box className={`${styles.timelineBox} ${viewMode == 'detail' ? styles.detailView : ''}`}>
         <Grid ticksLength={numGridCols}>
           {ticksHeader.map((tick, index) => (
-
-            <GridHeader key={index} tick={tick} index={index} numHeaderTicks={numHeaderTicks} numGridCols={numGridCols}/>
+            <GridHeader
+              key={index}
+              tick={tick}
+              index={index}
+              numHeaderTicks={numHeaderTicks}
+              numGridCols={numGridCols}
+            />
           ))}
 
-          <Headerline numGridCols={numGridCols} ticksRatio={3}/>
+          <Headerline numGridCols={numGridCols} ticksRatio={3} />
         </Grid>
-        <Grid ticksLength={numGridCols} scroll={true}  renderTodayLine={showTodayMarker} >
+        <Grid ticksLength={numGridCols} scroll={true} renderTodayLine={showTodayMarker}>
           {issuesGroupedState.map((group, index) => (
-              <ErrorBoundary key={`Fragment-${index}`} >
-                <GroupHeader group={group} key={`GroupHeader-${index}`} issueDataState={issueDataState}/><GroupWrapper key={`GroupWrapper-${index}`}>
-                  {group.ornull != null && group.items.ornull != null &&
-                    _.sortBy(group.items.ornull, ['title']).map((item, index) => <GridRow key={index} milestone={item} index={index} timelineTicks={ticks} numGridCols={numGridCols} numHeaderItems={numHeaderTicks} issueDataState={issueDataState} />)}
-                </GroupWrapper>
-              </ErrorBoundary>
-            ))}
+            <ErrorBoundary key={`Fragment-${index}`}>
+              <GroupHeader group={group} key={`GroupHeader-${index}`} issueDataState={issueDataState} />
+              <GroupWrapper key={`GroupWrapper-${index}`}>
+                {group.ornull != null &&
+                  group.items.ornull != null &&
+                  _.sortBy(group.items.ornull, ['title']).map((item, index) => (
+                    <GridRow
+                      key={index}
+                      milestone={item}
+                      index={index}
+                      timelineTicks={ticks}
+                      numGridCols={numGridCols}
+                      numHeaderItems={numHeaderTicks}
+                      issueDataState={issueDataState}
+                    />
+                  ))}
+              </GroupWrapper>
+            </ErrorBoundary>
+          ))}
         </Grid>
       </Box>
     </>

components/roadmap-grid/grid-row.tsx

@@ -39,6 +39,7 @@ export function GridRow({
   }, [milestone.due_date, globalTimeScaler.getDomain()]);
   const span = Math.max(4, numGridCols / timelineTicks.length);
   const closest = span * (closestDateIdx - 1);
+  // @ts-ignore (TODO: fix types below and remove this)
   const childLink = useMemo(() => getLinkForRoadmapChild({ viewMode, issueData: milestone.get(), query: routerQuery, currentRoadmapRoot: issueDataState.value }), [issueDataState.value, milestone, routerQuery, viewMode]);
   const clickable = milestone.children.length > 0;
 
@@ -88,6 +89,7 @@ export function GridRow({
       }}
       className={`${styles.item} ${styles.issueItem} ${clickable && styles.wrapperLink} js-milestoneCard ${clickable && className}`}
     >
+      {/* @ts-ignore (TODO: fix types below and remove this) */}
       <Flex direction={{ base:"column" }} justify="space-between" position="relative" w="100%">
         <Flex direction="column" w="100%">
           <Text as="b" className={`${styles.milestoneTitleWrapper} ${clickable && styles.milestoneTitleWrapperLink}`}>{milestone.title.value}</Text>

components/roadmap-grid/group-header.tsx

@@ -20,10 +20,12 @@ export function GroupHeader({ group, issueDataState }: GroupHeaderProps) {
   let groupNameElement: JSX.Element | null = null;
   const issueData: Parameters<typeof getLinkForRoadmapChild>[0]['issueData'] = {
     html_url: group.url.value.replace('/roadmap/', ''),
+    // @ts-ignore (TODO: fix types below and remove this)
     children: group.items.value,
   };
   if (viewMode === ViewMode.Detail) {
     if (isEmpty(group.url)) {
+      // @ts-ignore (TODO: fix types below and remove this)
       groupNameElement = <Text color="black">{group.groupName.value}</Text>
     } else {
       const groupHeaderLink = getLinkForRoadmapChild({

lib/backend/issue.ts

@@ -4,17 +4,18 @@ import { getOctokit } from './octokit';
 
 const cache = new Map<string, GithubIssueData>();
 
-export async function getIssue ({ owner, repo, issue_number }): Promise<GithubIssueData> {
+export async function getIssue({ owner, repo, issue_number }): Promise<GithubIssueData> {
   const cacheKey = `${owner}${repo}${issue_number}`;
   if (process.env.IS_LOCAL === 'true') {
     if (cache.has(cacheKey)) {
+      console.log('getIssue() cache');
       return cache.get(cacheKey) as GithubIssueData;
     }
   }
   try {
     const { data } = await getOctokit().rest.issues.get({
       mediaType: {
-        format: 'full',
+        format: 'html',
       },
       owner,
       repo,
@@ -27,16 +28,15 @@ export async function getIssue ({ owner, repo, issue_number }): Promise<GithubIs
       state: data.state as IssueStates,
       node_id: data.node_id,
       body_html: data.body_html || '',
-      labels: data.labels
-        .map((label) => (typeof label !== 'string' ? label.name : label)) as string[],
+      labels: data.labels.map((label) => (typeof label !== 'string' ? label.name : label)) as string[],
     };
 
     if (process.env.IS_LOCAL === 'true') {
-      cache.set(cacheKey, result)
+      // cache.set(cacheKey, result);
     }
     return result;
   } catch (err) {
     console.error('error:', err);
     throw new Error(`Error getting issue: ${err}`);
   }
-};
+}