From 60632230526ea248a17d006082ad6145b3a4aa62 Mon Sep 17 00:00:00 2001
From: Davide Iadeluca <davide.iadeluca@glowingblue.com>
Date: Mon, 29 Jan 2024 15:52:40 +0100
Subject: [PATCH] refactor: break down logic

---
 js/src/forum/components/Poll/PollOption.tsx   | 10 ++-----
 .../forum/components/Poll/PollOptionInput.tsx | 26 +++++++++++++++++++
 js/src/forum/components/Poll/PollResult.tsx   | 16 ++++--------
 .../components/Poll/PollResultNumber.tsx      | 12 +++++++++
 resources/less/forum.less                     |  3 +++
 5 files changed, 48 insertions(+), 19 deletions(-)
 create mode 100644 js/src/forum/components/Poll/PollOptionInput.tsx
 create mode 100644 js/src/forum/components/Poll/PollResultNumber.tsx

diff --git a/js/src/forum/components/Poll/PollOption.tsx b/js/src/forum/components/Poll/PollOption.tsx
index b3b4a118..5b69223c 100644
--- a/js/src/forum/components/Poll/PollOption.tsx
+++ b/js/src/forum/components/Poll/PollOption.tsx
@@ -2,19 +2,13 @@ import * as Mithril from 'mithril';
 import Component from 'flarum/common/Component';
 import PollOptionLabel from './PollOptionLabel';
 import PollOptionDescription from './PollOptionDescription';
+import PollOptionInput from './PollOptionInput';
 
 export default class PollOption extends Component {
   view(): Mithril.Children {
     return (
       <label className="PollOption-tmp">
-        <input
-          type="radio"
-          name="privacy-setting"
-          value="Private to Project Members"
-          className="PollOption-input"
-          aria-labelledby="privacy-setting-1-label"
-          aria-describedby="privacy-setting-1-description"
-        />
+        <PollOptionInput id={1} isResult={false} name="privacy-setting" value="Private to Project Members Nice" />
         <span className="PollOption-information">
           <PollOptionLabel text="Poll Option Label" />
           <PollOptionDescription text="Poll Option Description" />
diff --git a/js/src/forum/components/Poll/PollOptionInput.tsx b/js/src/forum/components/Poll/PollOptionInput.tsx
new file mode 100644
index 00000000..430e53bd
--- /dev/null
+++ b/js/src/forum/components/Poll/PollOptionInput.tsx
@@ -0,0 +1,26 @@
+import * as Mithril from 'mithril';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
+
+interface PollOptionInputAttrs extends ComponentAttrs {
+  id: Number; // for example 1
+  name: String; // for example privacy-setting
+  value: String; // for example Private to Project Members
+  isResult?: Boolean;
+}
+
+export default class PollOptionInput extends Component<PollOptionInputAttrs> {
+  view(): Mithril.Children {
+    const { isResult } = this.attrs;
+    return (
+      <input
+        type="radio"
+        name={this.attrs.name}
+        value={this.attrs.value}
+        style={{ opacity: isResult ? 0 : 1 }}
+        className="PollOption-input"
+        aria-labelledby={`${this.attrs.name}-${this.attrs.id}-label`}
+        aria-describedby={`${this.attrs.name}-${this.attrs.id}-description`}
+      />
+    );
+  }
+}
diff --git a/js/src/forum/components/Poll/PollResult.tsx b/js/src/forum/components/Poll/PollResult.tsx
index 02b2b882..649bf94c 100644
--- a/js/src/forum/components/Poll/PollResult.tsx
+++ b/js/src/forum/components/Poll/PollResult.tsx
@@ -1,27 +1,21 @@
 import * as Mithril from 'mithril';
 import Component from 'flarum/common/Component';
 import PollOptionLabel from './PollOptionLabel';
+import PollResultsNumber from './PollResultNumber';
+import PollOptionInput from './PollOptionInput';
 
 export default class PollResults extends Component {
   view(): Mithril.Children {
     return (
       <label className="PollResult">
-        <input
-          type="radio"
-          name="privacy-setting"
-          value="Private to Project Members"
-          className="PollOption-input"
-          style="opacity: 0;"
-          aria-labelledby="privacy-setting-1-label"
-          aria-describedby="privacy-setting-1-description"
-        />
+        <PollOptionInput id={1} isResult={true} name="privacy-setting" value="Private to Project Members Nice" />
         <span className="PollResult-information">
           <div className="PollResults-row">
             <PollOptionLabel text="Poll Option Label" />
-            <span className="PollResult-number">76 %</span>
+            <PollResultsNumber number={64} />
           </div>
 
-          <input type="range" min="0" max="100" value="76" step="1" className="PollResult-input" />
+          <input type="range" min="0" max="100" value="64" step="1" className="PollResult-input" />
         </span>
       </label>
     );
diff --git a/js/src/forum/components/Poll/PollResultNumber.tsx b/js/src/forum/components/Poll/PollResultNumber.tsx
new file mode 100644
index 00000000..073e7ba1
--- /dev/null
+++ b/js/src/forum/components/Poll/PollResultNumber.tsx
@@ -0,0 +1,12 @@
+import * as Mithril from 'mithril';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
+
+interface PollResultsNumberAttrs extends ComponentAttrs {
+  number: Number;
+}
+
+export default class PollResultsNumber extends Component<PollResultsNumberAttrs> {
+  view(): Mithril.Children {
+    return <span className="PollResult-number">{this.attrs.number} %</span>;
+  }
+}
diff --git a/resources/less/forum.less b/resources/less/forum.less
index e1bdc75d..5e78be51 100755
--- a/resources/less/forum.less
+++ b/resources/less/forum.less
@@ -451,6 +451,9 @@
   accent-color: var(--poll-option-accent-color);
 }
 
+.PollResults-input {
+  pointer-events: none;
+}
 .PollOption-information {
   display: flex;
   margin-left: 10px;