From a889bf4fbde273dd06fd4cd6f879325e48bf5b0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jehu=CC=81?= <jehu.sagardoy@gmail.com>
Date: Tue, 22 Dec 2020 17:20:48 +0100
Subject: [PATCH 1/3] initial version

---
 .../common-app/components/define-trend.tsx    | 130 ++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 front/src/common-app/components/define-trend.tsx

diff --git a/front/src/common-app/components/define-trend.tsx b/front/src/common-app/components/define-trend.tsx
new file mode 100644
index 0000000..ba2b003
--- /dev/null
+++ b/front/src/common-app/components/define-trend.tsx
@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { cx } from 'emotion';
+import * as classes from './table-player.styles';
+import Typography from '@material-ui/core/Typography';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import { PlayerVotingStatus } from 'core';
+
+interface Props {
+  playersCollection: PlayerVotingStatus[];
+  headingLevel?: React.ElementType;
+}
+
+export const TablePlayerTrendComponent: React.FC<Props> = (props: Props) => {
+  const { playersCollection, headingLevel } = props;
+  const [trend, setTrend] = React.useState<number>(0);
+  const [valueArray, setValueArray] = React.useState<number[]>([]);
+
+  React.useEffect(() =>setValueArray([...playersCollection.map((elem)=>mapToNumber(elem.vote))]));
+
+  const mapToNumber = (vote: string): number => {
+    switch (vote) {
+      case 'XS':
+        return 1;
+        break;
+      case 'S':
+        return 2;
+        break;
+      case 'M':
+        return 3;
+        break;
+      case 'L':
+        return 4;
+        break;
+      case 'XL':
+        return 5;
+        break;
+      case 'XXL':
+        return 6;
+        break;
+    }
+  };
+
+  const newValues = playersCollection.map((elem:PlayerVotingStatus) => mapToNumber(elem.vote));
+
+  const mapToLabel = (): string => {
+    getTrend();
+    switch (trend) {
+      case 1:
+        return 'XS';
+        break;
+      case 2:
+        return 'S';
+        break;
+      case 3:
+        return 'M';
+        break;
+      case 4:
+        return 'L';
+        break;
+      case 5:
+        return 'XL';
+        break;
+      case 6:
+        return 'XXL';
+        break;
+    }
+  };
+
+  const getTrend = (): void => {
+
+    let numItem: number = 0;
+    valueArray.map((value: number) => {
+      const arrayLength = valueArray.filter(elem => elem === value).length;
+      if (numItem < arrayLength) {
+        numItem = arrayLength;
+         setTrend(value);
+      }
+    });
+  };
+
+  const calculateTrend = (): string => mapToLabel();
+
+  return (
+    <div className={classes.container}>
+      <Typography
+        className={classes.subtitle}
+        variant="h6"
+        component={headingLevel}
+      >
+        Players connected:
+      </Typography>
+      <TableContainer className={classes.table}>
+        <Table aria-label="customized table">
+          <TableHead>
+            <TableRow>
+              <TableCell className={cx(classes.head, classes.cell)}>
+                Vote Trend
+              </TableCell>
+              <TableCell
+                className={cx(classes.head, classes.cell)}
+                align="right"
+              >
+                Result
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody className={classes.body}>
+            <TableRow key={1}>
+              <TableCell className={classes.cell} component="th" scope="row">
+                Trend result
+              </TableCell>
+              <TableCell className={classes.cell} align="right">
+                {calculateTrend()}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};
+
+TablePlayerTrendComponent.defaultProps = {
+  headingLevel: 'h2',
+};

From 17f19e70b5806175786fa084eeddd21b834e7025 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jehu=CC=81?= <jehu.sagardoy@gmail.com>
Date: Wed, 23 Dec 2020 08:55:38 +0100
Subject: [PATCH 2/3] Includes vote trend

---
 .../common-app/components/define-trend.tsx    | 80 +++----------------
 front/src/pods/master/master.component.tsx    |  7 ++
 2 files changed, 16 insertions(+), 71 deletions(-)

diff --git a/front/src/common-app/components/define-trend.tsx b/front/src/common-app/components/define-trend.tsx
index ba2b003..d254c12 100644
--- a/front/src/common-app/components/define-trend.tsx
+++ b/front/src/common-app/components/define-trend.tsx
@@ -17,83 +17,21 @@ interface Props {
 
 export const TablePlayerTrendComponent: React.FC<Props> = (props: Props) => {
   const { playersCollection, headingLevel } = props;
-  const [trend, setTrend] = React.useState<number>(0);
-  const [valueArray, setValueArray] = React.useState<number[]>([]);
 
-  React.useEffect(() =>setValueArray([...playersCollection.map((elem)=>mapToNumber(elem.vote))]));
+  const getTrend = (): string => {
+    const result = playersCollection.map((elem: PlayerVotingStatus) =>
+      playersCollection.filter(
+        (player: PlayerVotingStatus) => player.vote === elem.vote
+      ).length
+    );
 
-  const mapToNumber = (vote: string): number => {
-    switch (vote) {
-      case 'XS':
-        return 1;
-        break;
-      case 'S':
-        return 2;
-        break;
-      case 'M':
-        return 3;
-        break;
-      case 'L':
-        return 4;
-        break;
-      case 'XL':
-        return 5;
-        break;
-      case 'XXL':
-        return 6;
-        break;
-    }
-  };
-
-  const newValues = playersCollection.map((elem:PlayerVotingStatus) => mapToNumber(elem.vote));
-
-  const mapToLabel = (): string => {
-    getTrend();
-    switch (trend) {
-      case 1:
-        return 'XS';
-        break;
-      case 2:
-        return 'S';
-        break;
-      case 3:
-        return 'M';
-        break;
-      case 4:
-        return 'L';
-        break;
-      case 5:
-        return 'XL';
-        break;
-      case 6:
-        return 'XXL';
-        break;
-    }
-  };
-
-  const getTrend = (): void => {
+    const foundIndex = result.indexOf(Math.max(...result));
 
-    let numItem: number = 0;
-    valueArray.map((value: number) => {
-      const arrayLength = valueArray.filter(elem => elem === value).length;
-      if (numItem < arrayLength) {
-        numItem = arrayLength;
-         setTrend(value);
-      }
-    });
+    return playersCollection[foundIndex].vote;
   };
 
-  const calculateTrend = (): string => mapToLabel();
-
   return (
     <div className={classes.container}>
-      <Typography
-        className={classes.subtitle}
-        variant="h6"
-        component={headingLevel}
-      >
-        Players connected:
-      </Typography>
       <TableContainer className={classes.table}>
         <Table aria-label="customized table">
           <TableHead>
@@ -115,7 +53,7 @@ export const TablePlayerTrendComponent: React.FC<Props> = (props: Props) => {
                 Trend result
               </TableCell>
               <TableCell className={classes.cell} align="right">
-                {calculateTrend()}
+                { getTrend()}
               </TableCell>
             </TableRow>
           </TableBody>
diff --git a/front/src/pods/master/master.component.tsx b/front/src/pods/master/master.component.tsx
index 8d175b5..bd3377d 100644
--- a/front/src/pods/master/master.component.tsx
+++ b/front/src/pods/master/master.component.tsx
@@ -10,6 +10,7 @@ import { DefineStoryComponent } from './components';
 import { VoteOptionsComponent } from 'common-app/components';
 import { PlayerVotingStatus } from 'core';
 import { Button } from '@material-ui/core';
+import { TablePlayerTrendComponent } from 'common-app/components/define-trend';
 
 interface Props {
   room: string;
@@ -180,6 +181,12 @@ const ShowVotingResultsComponent: React.FC<ShowVotingResultsProps> = props => {
         <div className={classes.containerComponent}>
           <TablePlayerComponent playersCollection={playerVotingStatus} />
         </div>
+        <div className={classes.containerComponent}>
+          <h2 className={classes.title}>Trend</h2>
+        </div>
+        <div className={classes.containerComponent}>
+         <TablePlayerTrendComponent playersCollection={playerVotingStatus} />
+        </div>
         <div className={classes.containerComponent}>
           <Button
             variant="contained"

From 2924ab0cb5582faac0b15e3fd89bf6cff37c3984 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jehu=CC=81?= <jehu.sagardoy@gmail.com>
Date: Wed, 23 Dec 2020 09:05:49 +0100
Subject: [PATCH 3/3] table adjustments

---
 front/src/common-app/components/define-trend.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/front/src/common-app/components/define-trend.tsx b/front/src/common-app/components/define-trend.tsx
index d254c12..77626d7 100644
--- a/front/src/common-app/components/define-trend.tsx
+++ b/front/src/common-app/components/define-trend.tsx
@@ -49,9 +49,7 @@ export const TablePlayerTrendComponent: React.FC<Props> = (props: Props) => {
           </TableHead>
           <TableBody className={classes.body}>
             <TableRow key={1}>
-              <TableCell className={classes.cell} component="th" scope="row">
-                Trend result
-              </TableCell>
+              <TableCell className={classes.cell} component="th" scope="row"/>
               <TableCell className={classes.cell} align="right">
                 { getTrend()}
               </TableCell>