Cleanup state

tweedegolf · May 26, 2024 · b62ff89 · b62ff89
1 parent 68999dc
commit b62ff89
Show file tree

Hide file tree

Showing 6 changed files with 513 additions and 206 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,11 @@
-import rawData from './data.json';
 import Table from './Table';
-import usePersistence, { PersistenceContext } from './usePersistence';
-
-const data = rawData as unknown as {
-  [theme: string]: {
-    color: string;
-    items: string[];
-  };
-};
-
-const levels = [
-  'nog geen ervaring',
-  'meegekeken',
-  'een beetje ervaring',
-  'zelfstandig uitgevoerd',
-  'meermaals zelfstandig uitgevoerd',
-];
+import usePersistence from './usePersistence';
 
 export default  function App(): JSX.Element {
-  const persistence = usePersistence();
+  const { state, select } = usePersistence();
 
   return (
-    <PersistenceContext.Provider value={persistence}>
+    <div>
       <h1>Ervaringskompas</h1>
       <p>
         Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk
@@ -30,12 +14,12 @@ export default  function App(): JSX.Element {
       <div className="legenda">
         <h2>Legenda</h2>
         <ol>
-          {levels.map((level) => (
+          {state.levels.map((level) => (
             <li key={level}>{level}</li>
           ))}
         </ol>
       </div>
-      <Table levels={levels} themes={Object.entries(data)} />
-    </PersistenceContext.Provider>
+      <Table state={state} select={select} />
+    </div>
   );
 }
diff --git a/src/Item.tsx → src/ExperienceRow.tsx b/src/Item.tsx → src/ExperienceRow.tsx
@@ -1,21 +1,22 @@
-interface ItemProps {
+interface ExperienceRowProps {
   name: string;
+  themeIndex: number,
   index: number;
   color: string;
   levels: string[];
   selected: number;
   onSelect: (level: number) => void;
 }
 
-export default function Item({ name, index, color, levels, selected, onSelect }: ItemProps): JSX.Element {
+export default function ExperienceRow({ name, themeIndex, index, color, levels, selected, onSelect }: ExperienceRowProps): JSX.Element {
   return (
     <tr className="selectable">
       <td style={{ borderBottomColor: color, borderLeftColor: color }}>
-        <label htmlFor={`check-${index}`} title="markeren">
+        <label htmlFor={`check-${themeIndex}-${index}`} title="markeren">
           <input
             type="checkbox"
-            id={`check-${index}`}
-            name={`check-${index}`}
+            id={`check-${themeIndex}-${index}`}
+            name={`check-${themeIndex}-${index}`}
           />
         </label>
       </td>
@@ -25,7 +26,7 @@ export default function Item({ name, index, color, levels, selected, onSelect }:
       {levels
         .map((level, levelIndex) => ({
           level,
-          key: `option-${index}-${levelIndex}`,
+          key: `option-${themeIndex}-${index}-${levelIndex}`,
         }))
         .map(({ level, key }, levelIndex) => (
           <td
@@ -37,11 +38,11 @@ export default function Item({ name, index, color, levels, selected, onSelect }:
             <label htmlFor={key} title={level}>
               <input
                 type="radio"
-                name={`option-${index}`}
+                name={`option-${themeIndex}-${index}`}
                 id={key}
-                value={levelIndex}
-                onChange={() => onSelect(levelIndex)}
-                checked={levelIndex === selected}
+                value={levelIndex + 1}
+                onChange={() => onSelect(levelIndex + 1)}
+                checked={levelIndex + 1 === selected}
               />
             </label>
           </td>

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -1,27 +1,27 @@
-import Theme from './Theme';
+import ThemeSection from './ThemeSection';
+import { PersistenceState } from './usePersistence';
 
-interface TableProps {
-  themes: [string, { color: string; items: string[] }][];
-  levels: string[];
-}
-
-export default function Table({ levels, themes }: TableProps): JSX.Element {
+export default function Table({ state, select }: PersistenceState): JSX.Element {
   return (
       <table>
         <thead>
           <tr>
             <th colSpan={2} style={{ border: 'none' }}></th>
-            {levels.map((level, levelIndex) => (
+            {state.levels.map((level, levelIndex) => (
               <th key={level}>{levelIndex + 1}</th>
             ))}
           </tr>
         </thead>
         <tbody>
-          {themes
-            .map(([name, { color, items }], index) => ({ name, color, items, index }))
-            .map((theme) => (
-              <Theme key={theme.name} theme={theme} levels={levels} />
-            ))}
+          {state.themes.map((theme, index) => (
+            <ThemeSection
+              key={theme.name}
+              theme={theme}
+              index={index}
+              levels={state.levels}
+              select={select}
+            />
+          ))}
         </tbody>
       </table>
   );

diff --git a/src/Theme.tsx → src/ThemeSection.tsx b/src/Theme.tsx → src/ThemeSection.tsx
@@ -1,23 +1,20 @@
-import { Fragment, useContext } from 'react';
-import Item from './Item';
-import { PersistenceContext } from './usePersistence';
+import { Fragment } from 'react';
+import { Theme } from './usePersistence';
+import ExperienceRow from './ExperienceRow';
 
 interface ThemeProps {
-  theme: {
-    name: string;
-    color: string;
-    items: string[];
-    index: number;
-  };
-  levels: string[];
+  theme: Theme;
+  index: number,
+  levels: string[],
+  select: (theme: number, item: number, level: number) => void;
 }
 
-export default function Theme({
-  theme: { name, color, items, index: themeIndex },
+export default function ThemeSection({
+  theme: { name, color, experiences },
+  index: themeIndex,
   levels,
+  select,
 }: ThemeProps): JSX.Element {
-  const { getLevel, select } = useContext(PersistenceContext);
-
   return (
     <Fragment>
       <tr>
@@ -34,14 +31,15 @@ export default function Theme({
           </h3>
         </th>
       </tr>
-      {items.map((item, index) => (
-        <Item
-          key={item}
-          name={item}
+      {experiences.map((experience, index) => (
+        <ExperienceRow
+          key={experience.name}
+          name={experience.name}
+          themeIndex={themeIndex}
           index={index}
           levels={levels}
           color={color}
-          selected={getLevel(themeIndex, index)}
+          selected={experience.level}
           onSelect={(level: number) => select(themeIndex, index, level)}
         />
       ))}