fix: Ensure issuesGroupedState is up to date (#348)

* fix: react warnings

* fix: Ensure issuesGroupedState is up to date

fixes #347

components/icons/svgr/SvgListViewIcon.tsx

@@ -5,7 +5,7 @@ const SvgDetailViewIcon = () => (
    * From https://www.iconfinder.com/icons/326721/list_view_icon#svg
    */
   <svg width="19" height="14" viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg" version="1.1">
-    <g fill="none" fill-rule="evenodd" id="Page-1" stroke="#fff" stroke-width="1">
+    <g fill="none" fillRule="evenodd" id="Page-1" stroke="#fff" strokeWidth="1">
       <g fill="#000" id="Core" transform="translate(-87.000000, -509.000000)">
         <g id="view-list" transform="translate(87.500000, 509.000000)">
           <path d="M0,9 L4,9 L4,5 L0,5 L0,9 L0,9 Z M0,14 L4,14 L4,10 L0,10 L0,14 L0,14 Z M0,4 L4,4 L4,0 L0,0 L0,4 L0,4 Z M5,9 L17,9 L17,5 L5,5 L5,9 L5,9 Z M5,14 L17,14 L17,10 L5,10 L5,14 L5,14 Z M5,0 L5,4 L17,4 L17,0 L5,0 L5,0 Z" id="Shape"/>

components/roadmap-grid/RoadmapDetailedView.tsx

@@ -1,5 +1,5 @@
 import { Box, Spinner, Stack, Skeleton } from '@chakra-ui/react';
-import { useHookstate } from '@hookstate/core';
+import { hookstate, useHookstateMemo } from '@hookstate/core';
 import type { Dayjs } from 'dayjs';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -22,8 +22,6 @@ 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';
 import { useGlobalLoadingState } from '../../hooks/useGlobalLoadingState';
 
@@ -36,19 +34,14 @@ export function RoadmapDetailed({
   const [isDevMode, _setIsDevMode] = useState(false);
   const viewMode = useViewMode() as ViewMode;
   const router = useRouter();
-
-  const issuesGroupedState = useHookstate<DetailedViewGroup[]>([]);
-  const groupedIssuesId = getUniqIdForGroupedIssues(issuesGroupedState.value)
-  const groupedIssuesIdPrev = usePrevious(groupedIssuesId);
+  const globalLoadingState = useGlobalLoadingState();
   const query = router.query
   const showTodayMarker = useShowTodayMarker();
-
-  const setIssuesGroupedState = issuesGroupedState.set
-  useEffect(() => {
-    if (viewMode && groupedIssuesIdPrev !== groupedIssuesId) {
-      setIssuesGroupedState(() => convertIssueDataStateToDetailedViewGroupOld(issueDataState, viewMode, query))
-    }
-  }, [viewMode, query, setIssuesGroupedState, issueDataState, groupedIssuesIdPrev, groupedIssuesId]);
+  const memoGrouped = useHookstateMemo(
+    () => convertIssueDataStateToDetailedViewGroupOld(issueDataState, viewMode, query),
+    [viewMode, query, issueDataState]
+  )
+  const issuesGroupedState = hookstate<DetailedViewGroup[]>(memoGrouped)
 
   /**
    * Magic numbers that just seem to work are:
@@ -63,15 +56,13 @@ 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(',');
   /**
    * Collect all due dates from all issues, as DayJS dates.
    */
-  const dayjsDates: Dayjs[] = useMemo(() => {
+  const dayjsDates: Dayjs[] = useHookstateMemo(() => {
     const today = dayjs();
     let innerDayjsDates: Dayjs[] = []
     try {
@@ -114,7 +105,7 @@ export function RoadmapDetailed({
 
     return innerDayjsDates;
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [issuesGroupedState.length, issuesGroupedId]);
+  }, [issuesGroupedState, issuesGroupedId]);
 
   /**
    *  * Ensure that the dates are
@@ -129,15 +120,6 @@ export function RoadmapDetailed({
     globalTimeScaler.setScale(dates, numGridCols * 1.09);
   }, [dates, numGridCols]);
 
-  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);
-      });
-    }
-    return <Spinner />;
-  }
 
   // return early while loading.
   if (globalLoadingState.get()) {
@@ -151,6 +133,15 @@ export function RoadmapDetailed({
       </Stack>
     )
   }
+  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);
+      });
+    }
+    return <Spinner />;
+  }
 
   /**
    * Current getTicks function returns 1 less than the number of ticks we want.

components/roadmap-grid/RoadmapTabbedView.tsx

@@ -71,10 +71,9 @@ export function RoadmapTabbedView({
     }
 
     return (
-      <Skeleton isLoaded={!globalLoadingState.get()}>
+      <Skeleton isLoaded={!globalLoadingState.get()} key={index}>
         <Tab
           className={styles.gridViewTab}
-          key={index}
         >
           <Center>
             <TabIcon />

components/roadmap-grid/grid-row.tsx

@@ -1,7 +1,7 @@
 import NextLink from 'next/link';
 import { Flex, Text, Box, Center } from '@chakra-ui/react';
-import React, { useEffect, useMemo, useState } from 'react';
-import type { State } from '@hookstate/core'
+import React, { useState } from 'react';
+import { State, useHookstateEffect, useHookstateMemo } from '@hookstate/core'
 
 import { dayjs } from '../../lib/client/dayjs';
 import { IssueData, IssueDataViewInput } from '../../lib/types';
@@ -33,13 +33,12 @@ export function GridRow({
   const viewMode = useViewMode();
   const routerQuery = useRouter().query;
   const [closestDateIdx, setClosestDateIdx] = useState(Math.round(globalTimeScaler.getColumn(dayjs.utc(milestone.due_date.get()).toDate())));
-  useEffect(() => {
+  useHookstateEffect(() => {
     setClosestDateIdx(Math.round(globalTimeScaler.getColumn(dayjs.utc(milestone.due_date.get()).toDate())));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [milestone.due_date, globalTimeScaler.getDomain()]);
+  }, [milestone.due_date, ...globalTimeScaler.getDomain()]);
   const span = Math.max(4, numGridCols / timelineTicks.length);
   const closest = span * (closestDateIdx - 1);
-  const childLink = useMemo(() => getLinkForRoadmapChild({ viewMode, issueData: milestone.get(), query: routerQuery, currentRoadmapRoot: issueDataState.value }), [issueDataState.value, milestone, routerQuery, viewMode]);
+  const childLink = useHookstateMemo(() => getLinkForRoadmapChild({ viewMode, issueData: milestone.get(), query: routerQuery, currentRoadmapRoot: issueDataState.value }), [issueDataState, milestone, routerQuery, viewMode]);
   const clickable = milestone.children.length > 0;
 
   if (milestone == null || milestone.ornull == null) {