Refactor PollResults component to use real data and add overallVoteCo…

…unt method to PollState

js/src/forum/components/Poll/PollOptions.tsx

@@ -26,7 +26,7 @@ export default class PollOptions extends Component<PollOptionsAttrs> {
       });
     } else {
       this.attrs.options.forEach((option: PollOptionModel): void => {
-        items.add('result' + option.id(), <PollResult option={option} state={this.attrs.state.hasVoted()} />);
+        items.add('result' + option.id(), <PollResult option={option} state={state} />);
       });
     }
 

js/src/forum/components/Poll/PollResult.tsx

@@ -1,21 +1,39 @@
 import * as Mithril from 'mithril';
-import Component from 'flarum/common/Component';
+import Component, {ComponentAttrs} from 'flarum/common/Component';
 import PollOptionLabel from './PollOptionLabel';
 import PollResultsNumber from './PollResultNumber';
 import PollOptionInput from './PollOptionInput';
+import PollOptionModel from "../../models/PollOption";
+import PollState from "../../states/PollState";
+import abbreviateNumber from "flarum/common/utils/abbreviateNumber";
 
-export default class PollResults extends Component {
+interface PollResultsAttrs extends ComponentAttrs {
+    option: PollOptionModel;
+    state: PollState;
+}
+
+export default class PollResults extends Component<PollResultsAttrs> {
   view(): Mithril.Children {
+    const option = this.attrs.option;
+    const state = this.attrs.state;
+    let voteCount = option.voteCount();
+    if(!voteCount){
+        voteCount = 0;
+    }
+    else {
+        voteCount = voteCount * 100 / state.overallVoteCount();
+    }
+
     return (
       <label className="PollResult">
-        <PollOptionInput id={1} isResult={true} name="privacy-setting" value="Private to Project Members Nice" />
+          <PollOptionInput id={option.id()} isResult={false} name="vote" value="Vote for this option" />
         <span className="PollResult-information">
           <div className="PollResult-row">
-            <PollOptionLabel text="Poll Option Label" />
-            <PollResultsNumber number={64} />
+            <PollOptionLabel text={option.answer()} />
+            <PollResultsNumber number={abbreviateNumber(voteCount)} />
           </div>
 
-          <progress type="range" min="0" max="100" value="64" className="PollResult-bar" />
+          <progress type="range" min="0" max={state.overallVoteCount()} value={voteCount} className="PollResult-bar" />
         </span>
       </label>
     );

js/src/forum/states/PollState.ts

@@ -26,6 +26,11 @@ export default class PollState {
     return this.poll.myVotes().length > 0;
   }
 
+  overallVoteCount() {
+    const options = this.poll.options();
+    return Math.max(100, (options ? options : []).reduce((max, option) => max + option!.voteCount(), 0));
+  }
+
   showButton() {
     return this.useSubmitUI && this.pendingSubmit;
   }

resources/locale/en.yml

@@ -34,6 +34,9 @@ fof-polls:
       edit_label: Edit
       delete_label: Delete
       view_label: View
+      delete_confirmation: Are you sure you want to delete this poll?
+      delete_success_message: Poll deleted successfully.
+      delete_error_message: There went something wrong while deleting the poll.
 
     poll_form:
       delete: Delete Poll