Refactor

compendium-frontend/src/components/ScrollableMatrix.tsx

@@ -28,32 +28,28 @@ export function ScrollableMatrix({ dataLookup, rowInfo, categoryLookup, isTickIc
     }
 
     const categoryContainers = Object.entries(categoryLookup).map(([categoryKey, categoryTitle]) => {
-        let rows;
-        rows = Object.entries(rowInfo).map(([title, field]) => {
+        const rows = Object.entries(rowInfo).map(([title, field]) => {
 
             const dataForRow: (string | number | React.JSX.Element)[] = [];
 
             dataLookup.forEach((nrenData) => {
                 nrenData.forEach((yearData) => {
                     const valuesForCategory = yearData.get(categoryKey);
-                    let fieldValue;
-                    if (valuesForCategory) {
-                        const _value = valuesForCategory[field];
-                        if (_value == null) {
-                            fieldValue = null;
-                        } else {
-                            // it's an object with a single value, so use the key directly
-                            fieldValue = Object.values(_value)[0];
-                        }
-
-                        const value = fieldValue != null && isTickIcon ? TICK_ICON : fieldValue;
-                        dataForRow.push(value);
+                    if (!valuesForCategory) return;
+
+                    let fieldValue = valuesForCategory[field];
+                    if (fieldValue != null) {
+                        // it's an object with a single value, so use the value directly
+                        fieldValue = Object.values(fieldValue)[0];
                     }
 
+                    const value = fieldValue != null && isTickIcon ? TICK_ICON : fieldValue;
+                    dataForRow.push(value);
                 })
             });
 
-            if (dataForRow.every((value) => value === null)) {
+            if (!dataForRow.length) {
+                // don't show the row if there's no data
                 return null;
             }
             return (<tr key={title}>
@@ -64,9 +60,21 @@ export function ScrollableMatrix({ dataLookup, rowInfo, categoryLookup, isTickIc
             </tr>)
         });
 
-        if (rows && rows.every((row) => row === null)) {
-            rows = null;
-        }
+
+        const nrenYears: { [key: string]: number[] } = Array.from(dataLookup.entries()).reduce((nrenYears, [nren, nrenData]) => {
+
+            Array.from(nrenData.entries()).forEach(([year, yearData]) => {
+                const has_category = yearData.get(categoryKey)
+                if (has_category) {
+                    if (!nrenYears[nren]) {
+                        nrenYears[nren] = []
+                    }
+                    nrenYears[nren].push(year)
+                }
+            })
+
+            return nrenYears;
+        }, {});
 
         const categoryContent = (
             <CollapsibleBox title={categoryTitle} startCollapsed key={categoryKey}>
@@ -75,53 +83,29 @@ export function ScrollableMatrix({ dataLookup, rowInfo, categoryLookup, isTickIc
                         <div className="table-responsive">
                             <Table className="matrix-table" bordered>
                                 <thead>
-                                    <tr>
-                                        <th className="fixed-column"></th>
-                                        {Array.from(dataLookup.entries()).map(([nren, nrenData]) => {
-
-                                            const yearsWithData: number[] = []
-
-                                            Array.from(nrenData.entries()).forEach(([year, yearData]) => {
-                                                const has_category = yearData.get(categoryKey)
-                                                if (has_category) {
-                                                    yearsWithData.push(year)
-                                                }
-                                            })
-
-                                            if (!yearsWithData.length) {
-                                                return null
-                                            }
-
-                                            return (
-                                                <th key={nren} colSpan={yearsWithData.length} style={{ width: `${yearsWithData.length * CELL_SIZE}rem` }}>
-                                                    {nren}
-                                                </th>
-                                            )
-                                        })}
-                                    </tr>
-                                    <tr>
-                                        <th className="fixed-column"></th>
-                                        {Array.from(dataLookup.values()).map((nrenData) => {
-                                            const yearsWithData: number[] = []
-
-                                            Array.from(nrenData.entries()).forEach(([year, yearData]) => {
-                                                const has_category = yearData.get(categoryKey)
-                                                if (has_category) {
-                                                    yearsWithData.push(year)
-                                                }
-                                            })
-
-                                            if (!yearsWithData.length) {
-                                                return null
-                                            }
-                                            return (
-                                                yearsWithData.map((year) => (
-                                                    <th key={year}>{year}</th>
-                                                ))
-                                            )
-                                        }
-                                        )}
-                                    </tr>
+                                    {(() => {
+                                        const nrenEntries = Object.entries(nrenYears);
+                                        return (
+                                            <>
+                                                <tr>
+                                                    <th className="fixed-column"></th>
+                                                    {nrenEntries.map(([nren, years]) => (
+                                                        <th key={nren} colSpan={years.length} style={{ width: `${years.length * CELL_SIZE}rem` }}>
+                                                            {nren}
+                                                        </th>
+                                                    ))}
+                                                </tr>
+                                                <tr>
+                                                    <th className="fixed-column"></th>
+                                                    {nrenEntries.flatMap(([nren, years]) =>
+                                                        years.map((year) => (
+                                                            <th key={`${nren}-${year}`}>{year}</th>
+                                                        ))
+                                                    )}
+                                                </tr>
+                                            </>
+                                        );
+                                    })()}
                                 </thead>
                                 <tbody>
                                     {rows}