Trenity Perf + better separation of concerns (#103)

trenity/client/src/components/Emoji/index.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { withStyles } from "@material-ui/core";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+
+import { textToEmoji } from "../../helper";
+
+const styles = {
+  root: {
+    position: "absolute",
+    right: "15%",
+    zIndex: "2",
+    transition: "all 0.3s ease"
+  },
+  enter: {
+    opacity: "1 !important",
+    bottom: "calc(40% - 25px)"
+  },
+  enterActive: {
+    opacity: "1 !important",
+    bottom: "calc(70% - 25px)"
+  },
+  enterDone: {
+    bottom: "calc(150% - 25px)",
+    opacity: "0"
+  },
+  exit: {
+    bottom: "calc(150% - 25px)",
+    opacity: "0"
+  },
+  exitActive: {
+    bottom: "calc(150% - 25px)",
+    opacity: "0"
+  },
+  hack: {
+    position: "absolute",
+    opacity: "0"
+  }
+};
+
+const Emoji = ({ classes, emoji }) => {
+  const emojiAnimation = {
+    enter: ["enter", classes.root, classes.enter].join(" "),
+    enterActive: ["enter-active", classes.root, classes.enterActive].join(" "),
+    enterDone: ["enter-done", classes.root, classes.enterDone].join(" "),
+    exit: ["exit", classes.root, classes.exit].join(" "),
+    exitActive: ["exit-active", classes.root, classes.exitActive].join(" "),
+    exitDone: ["exit-done", classes.exitActive].join(" ")
+  };
+  return (
+    <TransitionGroup component={null}>
+      <CSSTransition
+        classNames={{
+          appear: emojiAnimation.enter,
+          appearActive: emojiAnimation.enterActive,
+          appearDone: emojiAnimation.enterDone,
+          enter: emojiAnimation.enter,
+          enterActive: emojiAnimation.enterActive,
+          enterDone: emojiAnimation.enterDone,
+          exit: emojiAnimation.exit,
+          exitActive: emojiAnimation.exitActive,
+          exitDone: emojiAnimation.exitDone
+        }}
+        key={emoji}
+        timeout={2000}
+      >
+        <span className={classes.hack}>{textToEmoji(emoji.split("-")[0])}</span>
+      </CSSTransition>
+    </TransitionGroup>
+  );
+};
+
+export default withStyles(styles)(Emoji);

trenity/client/src/components/Event/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import moment from "moment";
+import { withStyles } from "@material-ui/core/styles";
+import { eventsToEmoji } from "../../helper";
+
+const styles = {
+  root: {
+    textAlign: "center"
+  },
+  emoji: {
+    fontSize: "1.5em",
+    margin: "0 0 5px 0"
+  },
+  time: {
+    margin: 0
+  }
+};
+
+const Event = ({ classes, eventObj }) => (
+  <div className={classes.root}>
+    <div className={classes.emoji}>
+      {eventsToEmoji(eventObj.event.toUpperCase())}
+    </div>
+    <div className={classes.time}>
+      {moment.utc(eventObj.timeStamp).format("m")}'
+    </div>
+  </div>
+);
+
+export default withStyles(styles)(Event);

trenity/client/src/components/EventsTimeline/index.js

@@ -1,29 +1,8 @@
 import React, { Component } from "react";
-import moment from "moment";
 import { isEmpty } from "ramda";
-import { withStyles } from "@material-ui/core/styles";
 import Swiper from "react-id-swiper";
 
-import { eventsToEmoji } from "../../helper";
-
-const styles = {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    overflowX: "scroll",
-    whiteSpace: "nowrap"
-  },
-  eachEventContainer: {
-    textAlign: "center"
-  },
-  eventEmoji: {
-    fontSize: "1.5em",
-    margin: "0 0 5px 0"
-  },
-  eventTime: {
-    margin: 0
-  }
-};
+import Event from "../../components/Event";
 
 const PARAMS = {
   slidesPerView: 4,
@@ -36,7 +15,6 @@ const PARAMS = {
 class EventsTimeline extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
     this.eventsAnimation = null;
   }
 
@@ -68,7 +46,6 @@ class EventsTimeline extends Component {
   };
 
   render() {
-    const { classes, events } = this.props;
     return (
       <Swiper
         shouldSwiperUpdate
@@ -77,19 +54,14 @@ class EventsTimeline extends Component {
           if (node) this.swiper = node.swiper;
         }}
       >
-        {events.map(e => (
-          <div key={e._id} className={classes.eachEventContainer}>
-            <div className={classes.eventEmoji}>
-              {eventsToEmoji(e.event.toUpperCase())}
-            </div>
-            <div className={classes.eventTime}>
-              {moment.utc(e.timeStamp).format("m")}'
-            </div>
+        {this.props.events.map(eventObj => (
+          <div key={eventObj._id}>
+            <Event eventObj={eventObj} />
           </div>
         ))}
       </Swiper>
     );
   }
 }
 
-export default withStyles(styles)(EventsTimeline);
+export default EventsTimeline;

trenity/client/src/components/Headings/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { withStyles } from "@material-ui/core/styles";
 
 const styles = {
@@ -9,12 +9,8 @@ const styles = {
   }
 };
 
-class Headings extends Component {
-  render() {
-    const { classes, text } = this.props;
-
-    return <div className={classes.root}>{text}</div>;
-  }
-}
+const Headings = ({ classes, text }) => (
+  <div className={classes.root}>{text}</div>
+);
 
 export default withStyles(styles)(Headings);

trenity/client/src/components/MatchTile/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { withStyles } from "@material-ui/core/styles";
 
 const styles = {
@@ -13,19 +13,13 @@ const styles = {
   }
 };
 
-class MatchTile extends Component {
-  render() {
-    const { classes, image, index, handleClick } = this.props;
-
-    return (
-      <div
-        className={classes.root}
-        onClick={() => (handleClick ? handleClick(index) : null)}
-      >
-        <img src={image} className={classes.image} alt="" />
-      </div>
-    );
-  }
-}
+const MatchTile = ({ classes, image, index, handleClick }) => (
+  <div
+    className={classes.root}
+    onClick={() => (handleClick ? handleClick(index) : null)}
+  >
+    <img src={image} className={classes.image} alt="" />
+  </div>
+);
 
 export default withStyles(styles)(MatchTile);

trenity/client/src/components/Navbar/index.js

@@ -1,35 +1,21 @@
-import React, { Component } from "react";
-
-// import Typography from "@material-ui/core/Typography";
-// import ReactSwipe from "react-swipe";
-// import Grid from "@material-ui/core/Grid";
+import React from "react";
 import { withStyles } from "@material-ui/core/styles";
 
 const styles = {
   root: {
     width: "calc(100vw*0.8)",
-    maxWidth: "1000px",
     height: "calc(100vh*0.10)",
-    maxHeight: "60px",
+    maxWidth: "1000px",
+    maxHeight: "70px",
     margin: "0 auto",
     color: "white",
     display: "flex",
     alignItems: "center"
-  },
-  brand: {
-    fontSize: "1.5em"
   }
 };
 
-class Navbar extends Component {
-  render() {
-    const { classes, text } = this.props;
-    return (
-      <div className={classes.root}>
-        <div className={classes.brand}>{text}</div>
-      </div>
-    );
-  }
-}
+const Navbar = ({ classes, children }) => (
+  <div className={classes.root}>{children}</div>
+);
 
 export default withStyles(styles)(Navbar);

trenity/client/src/components/ScoreCard/index.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+
+const styles = {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "100%"
+  },
+  elements: {
+    flex: "1 0 33.33%"
+  },
+  textRight: {
+    textAlign: "right"
+  },
+  textCenter: {
+    textAlign: "center"
+  },
+  scoreAndTimeContainer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  score: {
+    fontSize: "2em"
+  },
+  timeInsideMatch: {
+    fontSize: "0.8em"
+  }
+};
+
+const ScoreCard = ({ classes, teamOne, score, teamTwo, timeInsideMatch }) => (
+  <div className={classes.root}>
+    <div className={[classes.elements, classes.textRight].join(" ")}>
+      {teamOne}
+    </div>
+    <div
+      className={[classes.elements, classes.scoreAndTimeContainer].join(" ")}
+    >
+      <span className={classes.score}> 0 - 0</span>
+      <span className={classes.timeInsideMatch}>
+        {timeInsideMatch.format("HH:mm:ss")}
+      </span>
+    </div>
+    <div className={classes.elements}>{teamTwo}</div>
+  </div>
+);
+
+export default withStyles(styles)(ScoreCard);