From 535cff8612835af701342003a8ad5b732768b5b3 Mon Sep 17 00:00:00 2001
From: Dominic Zimmer <s8dozimm@stud.uni-saarland.de>
Date: Fri, 28 Oct 2022 18:18:38 +0200
Subject: [PATCH] Add logic

---
 frontend/src/TVMode.css |  4 ++++
 frontend/src/TVMode.tsx | 30 +++++++++++-------------------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/frontend/src/TVMode.css b/frontend/src/TVMode.css
index d030d6a..67b7707 100644
--- a/frontend/src/TVMode.css
+++ b/frontend/src/TVMode.css
@@ -56,4 +56,8 @@ span {
 }
 .voting {
     margin: 15%;
+}
+
+pre {
+    color: white;
 }
\ No newline at end of file
diff --git a/frontend/src/TVMode.tsx b/frontend/src/TVMode.tsx
index e94c276..a4f0637 100644
--- a/frontend/src/TVMode.tsx
+++ b/frontend/src/TVMode.tsx
@@ -1,23 +1,12 @@
-import { CSSProperties, useEffect, useState } from 'react';
-import './TVMode.css';
+import { useEffect, useMemo, useState } from 'react';
 import './Client.css';
+import './TVMode.css';
 import { ButtonType, buttonTypeList, WGPPState } from './types';
 
 const TVMode = () => {
 
   const [state, setState] = useState<Partial<WGPPState>>({});
   const [socket, setSocket] = useState<WebSocket>();
-  const [endTime, setEndTime] =  useState(0);
-  const [secondsRemaining, setSecondsRemaining] =useState(0);
-
-  useEffect(() => {
-    setEndTime(Date.now() + (state?.timeUntilNextMode??15) * 1000);
-    const interval = setInterval(() => {
-      const remaining = Math.round((endTime - Date.now())/1000);
-      setSecondsRemaining(remaining < 0 ? 0 : remaining);
-    }, 500);
-    return () => clearInterval(interval);
-  }, [endTime, state?.timeUntilNextMode]);
 
   useEffect(() => {
     const url = new URL(`api/client`, window.location.href);
@@ -37,8 +26,8 @@ const TVMode = () => {
     };
   }, [])
 
-  const totalCount = buttonTypeList.reduce((acc, v) => (state?.votes?.[v]??0) + acc, 0);
-  const voteList = buttonTypeList.map(b => [b, state?.votes?.[b] ?? 0] as [ButtonType, number]);
+  const totalCount = useMemo(() => buttonTypeList.reduce((acc, v) => (state?.votes?.[v] ?? 0) + acc, 0), [state]);
+  const voteList = useMemo(() => buttonTypeList.map(b => [b, state?.votes?.[b] ?? 0] as [ButtonType, number]).sort((a, b) => a[1] < b[1] ? -1 : 1), [state]);
 
   return <div className="stream">
     {state === undefined ?
@@ -50,10 +39,13 @@ const TVMode = () => {
           <span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
         </div>
         <div className="voting">
-          {voteList.map(([b, numVotes], index) =>
-            <div className="vote" key={index}>
-              <span>{b}</span><span> {numVotes ? Math.round(numVotes / totalCount * 100) + "%" : ""} </span>
-            </div>
+          {voteList.flatMap(([b, numVotes], index) => numVotes === 0
+            ? []
+            : [
+              <div className="vote" key={index}>
+                <span>{b}</span><span> {Math.round(numVotes / totalCount * 100) + "%"} </span>
+              </div>
+            ]
           )}
         </div>
         <div>