fix: Sort out Ring enum typing issues

src/components/Chart/Axes.tsx

@@ -1,11 +1,10 @@
-// TODO remove faux-dom and start using the React hook approach
 import React, { useRef, useLayoutEffect } from 'react';
 import * as d3 from "d3";
 
 export const YAxis: React.FC<{
     scale: d3.ScaleLinear
 }> = ({ scale }) => {
-    
+
     const ref = useRef<SVGSVGElement>(null);
 
     useLayoutEffect(() => {

src/components/Chart/BlipPoints.tsx

@@ -77,9 +77,7 @@ const BlipPoints: React.FC<{
 
         let blip: Blip = { ...item,
             quadrantPosition: quadrantConfig.position,
-            // TODO get to the bottom of this
-            // @ts-ignore
-            ringPosition: Ring[item.ring],
+            ringPosition: item.ring,
             colour: quadrantConfig.colour,
             txtColour: quadrantConfig.txtColour
         };

src/components/ItemRevision/ItemRevision.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import Badge from '../Badge/Badge';
 import { formatRelease } from '../../date';
-import { Revision } from '../../model';
+import { Revision, Ring } from '../../model';
 
 export default function ItemRevision({ revision }: { revision: Revision }) {
   return (
     <div className='item-revision'>
       <div>
         <Badge type={revision.ring}>
-          {revision.ring} | {formatRelease(revision.release)}
+          {Ring[revision.ring]} | {formatRelease(revision.release)}
         </Badge>
       </div>
       <div className='markdown' dangerouslySetInnerHTML={{ __html: revision.body }} />

src/components/PageItem/PageItem.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../animation';
 import './item-page.scss';
 import {quadrantsMap} from '../../config';
-import {groupByQuadrants, Item} from '../../model';
+import {groupByQuadrants, Item, Ring} from '../../model';
 
 const getItem = (pageName: string, items: Item[]) => {
     const [quadrantName, itemName] = pageName.split('/');
@@ -199,7 +199,7 @@ export default function PageItem({pageName, items, leaving, onLeave}: PageItemPr
                             <div className='split'>
                                 <div className='split__left'>
                                     <Badge big type={item.ring}>
-                                        {item.ring}
+                                        {Ring[item.ring]}
                                     </Badge>
                                 </div>
                                 <div className='split__right'>
@@ -221,7 +221,7 @@ export default function PageItem({pageName, items, leaving, onLeave}: PageItemPr
                                 </div>
                                 <div className='split__right'>
                                     <Badge big type={item.ring}>
-                                        {item.ring}
+                                        {Ring[item.ring]}
                                     </Badge>
                                 </div>
                             </div>

src/components/PageItemMobile/PageItemMobile.tsx

@@ -7,7 +7,7 @@ import SetTitle from '../SetTitle';
 import ItemRevisions from '../ItemRevisions/ItemRevisions';
 
 import { quadrantsMap } from '../../config';
-import { groupByQuadrants, Item } from '../../model';
+import { groupByQuadrants, Item, Ring } from '../../model';
 
 type PageItemMobileProps = {
   pageName: string;
@@ -45,7 +45,7 @@ export default function PageItemMobile({ pageName, items, leaving, onLeave }: Pa
                 </div>
                 <div className='split__right'>
                   <Badge big type={item.ring}>
-                    {item.ring}
+                    {Ring[item.ring]}
                   </Badge>
                 </div>
               </div>

src/components/PageOverview/PageOverview.tsx

@@ -37,8 +37,7 @@ export default function PageOverview({ rings, search: searchProp, items, leaving
 
   const isRingActive = (ring: Ring) => selectedRing === ring;
 
-  // TODO get to the bottom of this
-  const itemMatchesRing = (item: Item) => selectedRing === Ring.all || Ring[item.ring] === selectedRing;
+  const itemMatchesRing = (item: Item) => selectedRing === Ring.all || item.ring === selectedRing;
 
   const itemMatchesSearch = (item: Item) => {
     return search.trim() === '' || containsSearchTerm(item.title, search) || containsSearchTerm(item.body, search) || containsSearchTerm(item.info, search);
@@ -109,8 +108,7 @@ export default function PageOverview({ rings, search: searchProp, items, leaving
                           <div className='nav nav--relations'>
                             <div className='nav__item'>{quadrantsMap.get(item.quadrant).displayName}</div>
                             <div className='nav__item'>
-                              {/* TODO get to the bottom of this */}
-                              <Badge type={Ring[item.ring]}>{item.ring}</Badge>
+                              <Badge type={item.ring}>{Ring[item.ring]}</Badge>
                             </div>
                           </div>
                         </div>

src/components/QuadrantSection/QuadrantSection.tsx

@@ -7,14 +7,14 @@ import ItemList from '../ItemList/ItemList';
 import Flag from '../Flag/Flag';
 import { Group, Ring } from '../../model';
 import './quadrant-section.scss';
-const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => {
-  const itemsInRing = groups[quadrantName][ringName] || [];
+const renderList = (ring: Ring, quadrantName: string, groups: Group, big: boolean) => {
+  const itemsInRing = groups[quadrantName][ring] || [];
 
   if (big) {
     return (
       <ItemList items={itemsInRing} noLeadingBorder>
-        <Badge type={ringName} big={big}>
-          {ringName}
+        <Badge type={ring} big={big}>
+          {Ring[ring]}
         </Badge>
       </ItemList>
     );
@@ -23,7 +23,7 @@ const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: bo
   return (
     <div className='ring-list'>
       <div className='ring-list__header'>
-        <Badge type={ringName}>{ringName}</Badge>
+        <Badge type={ring}>{Ring[ring]}</Badge>
       </div>
       {itemsInRing.map((item) => (
         <span key={item.name} className='ring-list__item'>
@@ -37,13 +37,13 @@ const renderList = (ringName: Ring, quadrantName: string, groups: Group, big: bo
   );
 };
 
-const renderRing = (ringName: Ring, quadrantName: string, groups: Group, big: boolean) => {
-  if (!showEmptyRings && (!groups[quadrantName] || !groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0)) {
+const renderRing = (ring: Ring, quadrantName: string, groups: Group, big: boolean) => {
+  if (!showEmptyRings && (!groups[quadrantName] || !groups[quadrantName][ring] || groups[quadrantName][ring].length === 0)) {
     return null;
   }
   return (
-    <div key={ringName} className='quadrant-section__ring'>
-      {renderList(ringName, quadrantName, groups, big)}
+    <div key={ring} className='quadrant-section__ring'>
+      {renderList(ring, quadrantName, groups, big)}
     </div>
   );
 };
@@ -65,7 +65,7 @@ export default function QuadrantSection({ quadrantName, groups, big = false, sho
           )}
         </div>
       </div>
-      <div className='quadrant-section__rings'>{Object.keys(Ring).map((key) => renderRing(Ring[key], quadrantName, groups, big))}</div>
+      <div className='quadrant-section__rings'>{[Ring.adopt, Ring.trial, Ring.assess, Ring.hold].map((ring) => renderRing(ring, quadrantName, groups, big))}</div>
     </div>
   );
 }

src/config.ts

@@ -43,7 +43,7 @@ export const quadrantsMap: Map<string, QuadrantConfig> = new Map([
 
 export const chartConfig = {
     size: 800, //in px
-    scale: [-16, 16],
+    scale: [-16, 16], // arbitrary scale, could have any summetric values. 16 is good for dividing the chart into rings of proportional sizes/radius
     blipSize: 12, // in px, be careful when increasing this value as it may cause a lot of calculations during placing the blips on the chart
     ringsAttributes: [ // order from the centre outwards
       { radius: 8, arcWidth: 6 }, // radius values are based on the scale (not px!), arc width is in px