From f5d00fe4e7ae3007bec8556380f025b159ce0ad5 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 1 Jun 2023 14:09:21 +0200
Subject: [PATCH] Add passing options to test suite

---
 test/PassingOptions.tsx |  51 ++++++++++++++++++++
 test/Test.tsx           | 101 +++++++++++++++++++++++-----------------
 test/index.tsx          |   6 +--
 test/shared/types.ts    |   1 +
 4 files changed, 111 insertions(+), 48 deletions(-)
 create mode 100644 test/PassingOptions.tsx
 create mode 100644 test/shared/types.ts

diff --git a/test/PassingOptions.tsx b/test/PassingOptions.tsx
new file mode 100644
index 0000000..ddc0738
--- /dev/null
+++ b/test/PassingOptions.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import type { PassMethod } from './shared/types';
+
+type PassingOptionsProps = {
+  passMethod: PassMethod;
+  setPassMethod: (value: PassMethod) => void;
+};
+
+export default function PassingOptions({ passMethod, setPassMethod }: PassingOptionsProps) {
+  function onPassMethodChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const nextPassMethod = event.target.value;
+
+    setPassMethod(nextPassMethod as PassMethod);
+  }
+
+  return (
+    <fieldset>
+      <legend>Passing options</legend>
+
+      <div>
+        <input
+          checked={passMethod === 'attribute'}
+          id="passAttribute"
+          name="passMethod"
+          onChange={onPassMethodChange}
+          type="radio"
+          value="attribute"
+        />
+        <label htmlFor="passAttribute">Pass as an HTML attribute</label>
+      </div>
+      <div>
+        <input
+          checked={passMethod === 'prop'}
+          id="passProp"
+          name="passMethod"
+          onChange={onPassMethodChange}
+          type="radio"
+          value="prop"
+        />
+        <label htmlFor="passProp">Pass as a prop</label>
+      </div>
+    </fieldset>
+  );
+}
+
+PassingOptions.propTypes = {
+  passMethod: PropTypes.oneOf(['attribute', 'prop']),
+  setPassMethod: PropTypes.func.isRequired,
+};
diff --git a/test/Test.tsx b/test/Test.tsx
index 7ecb2fb..1631bb3 100644
--- a/test/Test.tsx
+++ b/test/Test.tsx
@@ -1,11 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import T, { useTranslation } from '@wojtekmaj/react-t/src';
+import T, { TProvider, useTranslation } from '@wojtekmaj/react-t/src';
 import { useTick } from '@wojtekmaj/react-hooks';
 
 import LocaleOptions from './LocaleOptions';
+import PassingOptions from './PassingOptions';
 
 import './Test.css';
 
+import { languageFiles } from './i18n';
+
+import type { PassMethod } from './shared/types';
+
 function FancyJohn() {
   const tick = useTick();
   const oneTwo = tick % 2 === 0;
@@ -17,9 +22,7 @@ function FancyJohn() {
   );
 }
 
-export default function Test() {
-  const [locale, setLocale] = useState<string>();
-
+function TestContent() {
   const stringOne = useTranslation('Hello world!');
   const stringTwo = useTranslation('Hello {name}!', { name: 'John' });
   const stringThree = useTranslation('Hello {name} and {other}!', {
@@ -31,54 +34,66 @@ export default function Test() {
   });
   const stringFive = useTranslation('Hello {name}!', { name: <FancyJohn /> });
 
+  return (
+    <main className="Test__container__content">
+      <h2>
+        Using <code>T</code> component
+      </h2>
+      <p>
+        <T>Hello world!</T>
+      </p>
+      <p>
+        <T name="John">{`Hello {name}!`}</T>
+      </p>
+      <p>
+        <T name="John" other="Elisabeth">{`Hello {name} and {other}!`}</T>
+      </p>
+      <p>
+        <T name="John">{`Hello {name}! Nice to meet you {name}!`}</T>
+      </p>
+      <p>
+        <T name={<FancyJohn />}>{`Hello {name}!`}</T>
+      </p>
+      <h2>
+        Using <code>useTranslation</code> hook
+      </h2>
+      <p>{stringOne}</p>
+      <p>{stringTwo}</p>
+      <p>{stringThree}</p>
+      <p>{stringFour}</p>
+      <p>{stringFive}</p>
+    </main>
+  );
+}
+
+export default function Test() {
+  const [locale, setLocale] = useState<string>();
+  const [passMethod, setPassMethod] = useState<PassMethod>('attribute');
+
   useEffect(() => {
     const html = document.documentElement;
 
-    if (locale) {
+    if (locale && passMethod === 'attribute') {
       html.setAttribute('lang', locale);
     } else {
       html.removeAttribute('lang');
     }
-  });
+  }, [locale, passMethod]);
 
   return (
-    <div className="Test">
-      <header>
-        <h1>react-t test page</h1>
-      </header>
-      <div className="Test__container">
-        <aside className="Test__container__options">
-          <LocaleOptions locale={locale} setLocale={setLocale} />
-        </aside>
-        <main className="Test__container__content">
-          <h2>
-            Using <code>T</code> component
-          </h2>
-          <p>
-            <T>Hello world!</T>
-          </p>
-          <p>
-            <T name="John">{`Hello {name}!`}</T>
-          </p>
-          <p>
-            <T name="John" other="Elisabeth">{`Hello {name} and {other}!`}</T>
-          </p>
-          <p>
-            <T name="John">{`Hello {name}! Nice to meet you {name}!`}</T>
-          </p>
-          <p>
-            <T name={<FancyJohn />}>{`Hello {name}!`}</T>
-          </p>
-          <h2>
-            Using <code>useTranslation</code> hook
-          </h2>
-          <p>{stringOne}</p>
-          <p>{stringTwo}</p>
-          <p>{stringThree}</p>
-          <p>{stringFour}</p>
-          <p>{stringFive}</p>
-        </main>
+    <TProvider locale={passMethod === 'prop' ? locale : undefined} languageFiles={languageFiles}>
+      <div className="Test">
+        <header>
+          <h1>react-t test page</h1>
+        </header>
+        <div className="Test__container">
+          <aside className="Test__container__options">
+            <LocaleOptions locale={locale} setLocale={setLocale} />
+            <PassingOptions passMethod={passMethod} setPassMethod={setPassMethod} />
+          </aside>
+          <TestContent />
+        </div>
       </div>
-    </div>
+    </TProvider>
   );
 }
diff --git a/test/index.tsx b/test/index.tsx
index 903a252..4a67864 100644
--- a/test/index.tsx
+++ b/test/index.tsx
@@ -1,14 +1,10 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { TProvider } from '@wojtekmaj/react-t/src';
-import { languageFiles } from './i18n';
 
 import Test from './Test';
 
 createRoot(document.getElementById('react-root') as HTMLDivElement).render(
   <StrictMode>
-    <TProvider languageFiles={languageFiles}>
-      <Test />
-    </TProvider>
+    <Test />
   </StrictMode>,
 );
diff --git a/test/shared/types.ts b/test/shared/types.ts
new file mode 100644
index 0000000..f22e60f
--- /dev/null
+++ b/test/shared/types.ts
@@ -0,0 +1 @@
+export type PassMethod = 'attribute' | 'prop';
-- 
2.51.2