feat: implement render props pokemon pattern

Author: code-mattclaffey

src/course/01-introduction/01-Welcome.mdx

@@ -50,6 +50,8 @@ Each lesson is broken down in an exercise file and a final file. The exercise fi
 
 - [Compound components pattern](?path=/docs/lessons-🥈-Silver-compound-components-pattern-01-lesson--docs)
 - [Controlled component pattern](?path=/docs/lessons-🥈-Silver-controlled-components-pattern-01-lesson--docs)
+- [FACC pattern](?path=/docs/lessons-🥈-silver-facc-pattern-01-lesson--docs)
+- [Render children pattern](?path=/docs/lessons-🥈-silver-render-children-pattern-01-lesson--docs)
 - [Render props pattern](?path=/docs/lessons-🥈-Silver-render-props-pattern-01-lesson--docs)
 - [The Provider pattern](?path=/docs/lessons-🥈-Silver-provider-pattern-01-lesson--docs)
 - [The State Reducer pattern](?path=/docs/lessons-🥈-Silver-state-reducer-pattern-01-lesson--docs)

src/course/02-lessons/02-Silver/RenderProps/exercise/exercise.tsx

@@ -1,106 +1,106 @@
-import { ChangeEvent, useState } from 'react';
-import { Input } from '@shared/components/Input/Input.component';
-import { Label } from '@shared/components/Label/Label.component';
-import { ErrorMessage } from '@shared/components/ErrorMessage/ErrorMessage.component';
-
-export interface ITextInputFieldProps {
-  name: string;
-  id: string;
-  label: string;
-  required?: boolean;
-  errorMessage?: string;
+interface ITypeEffectiveness {
+  attacking: string;
+  defending: string;
+  effectiveness: number;
+  description: string;
 }
 
 /*
   * Observations
-  * 💅 The current implementation uses the Controlled Component Pattern
-  * The UI is already split into small components
+  * 💅 Type effectiveness calculator is tightly coupled with table display
+  * Logic and presentation are mixed together
 
   * Tasks
-  * 1A 👨🏻‍💻 - Refactor the UI layer into its own component and setup the interface for its types to be:
-  * hasError: boolean;
-  * errorMessage?: string;
-  * id: string;
-  * name: string;
-  * label: string;
-  * input: HTMLAttributes<HTMLInputElement> & { required?: boolean };
-  *
-  * 1B 👨🏻‍💻 - Add these new types to the TextInputField
-  * validate?: (value: string) => boolean;
-  * children: (props: ITextFieldProps) => React.ReactNode;
-  *
-  * 1C 👨🏻‍💻 - Replace the return of TextInput field with the children prop we have defined.
-  * 💅 You need to call children and pass down the props you need (the types above are the hint)
+  * 1A 💻 - Add render prop to IPokemonTypeCalculatorProps:
+  * render: (effectiveness: ITypeEffectiveness[]) => React.ReactNode;
   *
-  * 1D 👨🏻‍💻 - In the Exercise component you want to add the UI component in as children.
-  * 💅 - The children should look like this {(props) => <UIComponent {...props} />}
+  * 1B 💻 - Replace the hardcoded table JSX with render prop call
+  * 1C 💻 - In Exercise component, use render prop to display results
 */
 
-const validateTextString = (value: string) =>
-  value.trim().length === 0;
-
-export const TextInputField = ({
-  name,
-  label,
-  id,
-  required,
-  errorMessage
-}: ITextInputFieldProps) => {
-  const [value, setValue] = useState('');
-  const [hasError, setHasError] = useState(false);
-  const [isTouched, setIsTouched] = useState(false);
-
-  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (required) {
-      setHasError(validateTextString(event.target.value));
-    }
+interface IPokemonTypeCalculatorProps {
+  attackingType: string;
+}
 
-    setValue(event.target.value);
-  };
+const typeChart: Record<string, Record<string, number>> = {
+  Fire: { Grass: 2, Water: 0.5, Fire: 0.5, Electric: 1, Ice: 2 },
+  Water: { Fire: 2, Grass: 0.5, Water: 0.5, Electric: 1, Ice: 1 },
+  Grass: { Water: 2, Fire: 0.5, Grass: 0.5, Electric: 1, Ice: 1 },
+  Electric: { Water: 2, Fire: 1, Grass: 0.5, Electric: 0.5, Ice: 1 },
+  Ice: { Grass: 2, Fire: 0.5, Water: 0.5, Electric: 1, Ice: 0.5 }
+};
 
-  const onFocus = () => {
-    if (isTouched) {
-      setHasError(false);
-    }
+const getEffectivenessDescription = (value: number): string => {
+  if (value === 2) return 'Super Effective';
+  if (value === 0.5) return 'Not Very Effective';
+  return 'Normal Damage';
+};
 
-    setIsTouched(true);
-  };
+export const PokemonTypeCalculator = ({
+  attackingType
+}: IPokemonTypeCalculatorProps) => {
+  const defendingTypes = Object.keys(typeChart);
 
-  const onBlur = () => {
-    if (value && validateTextString(value)) {
-      setHasError(true);
-    }
-  };
+  const effectiveness: ITypeEffectiveness[] = defendingTypes.map(
+    (defendingType) => ({
+      attacking: attackingType,
+      defending: defendingType,
+      effectiveness: typeChart[attackingType]?.[defendingType] ?? 1,
+      description: getEffectivenessDescription(
+        typeChart[attackingType]?.[defendingType] ?? 1
+      )
+    })
+  );
 
   return (
-    <div className="flex flex-col gap-2">
-      <Label htmlFor={id}>{label}</Label>
-      <Input
-        name={name}
-        id={id}
-        required={required}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        hasError={hasError}
-      />
-      {errorMessage && hasError && (
-        <ErrorMessage message={errorMessage} />
-      )}
+    <div className="bg-blue-50 p-6 rounded-lg">
+      <h3 className="text-xl font-bold mb-4">
+        {attackingType} Type Effectiveness
+      </h3>
+      <div className="bg-white rounded-lg overflow-hidden">
+        <table className="w-full">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-2 text-left">Defending Type</th>
+              <th className="px-4 py-2 text-left">Multiplier</th>
+              <th className="px-4 py-2 text-left">Effectiveness</th>
+            </tr>
+          </thead>
+          <tbody>
+            {effectiveness.map((item, index) => (
+              <tr key={index} className="border-t">
+                <td className="px-4 py-2 font-medium">
+                  {item.defending}
+                </td>
+                <td className="px-4 py-2">
+                  <span
+                    className={`font-bold ${
+                      item.effectiveness === 2
+                        ? 'text-green-600'
+                        : item.effectiveness === 0.5
+                          ? 'text-red-600'
+                          : 'text-gray-600'
+                    }`}
+                  >
+                    {item.effectiveness}x
+                  </span>
+                </td>
+                <td className="px-4 py-2 text-sm text-gray-600">
+                  {item.description}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };
 
 export const Exercise = () => {
   return (
-    <form noValidate name="form">
-      <TextInputField
-        name="input"
-        id="input"
-        label="Enter your name"
-        required
-        errorMessage="Please enter your name"
-      />
-    </form>
+    <div className="space-y-6">
+      <PokemonTypeCalculator attackingType="Fire" />
+    </div>
   );
 };