From 724e6d955749735d13c05905e22e973713061bb2 Mon Sep 17 00:00:00 2001
From: samkahchiin <samkahchiin@gmail.com>
Date: Fri, 10 Apr 2020 16:06:30 +0800
Subject: [PATCH] [Finishes] Added display and media control

---
 package.json                                  |  3 +++
 src/components/Display/Display.js             |  4 +--
 src/components/MediaControl/MediaControl.js   | 20 ++++++++++++++
 .../MediaControl/MediaControl.module.css      |  3 +++
 src/containers/ControlPanel/ControlPanel.js   |  2 ++
 yarn.lock                                     | 26 +++++++++++++++++++
 6 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MediaControl/MediaControl.module.css

diff --git a/package.json b/package.json
index 33393e2..bd6d183 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
diff --git a/src/components/Display/Display.js b/src/components/Display/Display.js
index 248a0ba..431b0f1 100644
--- a/src/components/Display/Display.js
+++ b/src/components/Display/Display.js
@@ -4,8 +4,8 @@ import classes from './Display.module.css'
 const display = (props) => {
   return (
     <div className={classes.Display}>
-      <h2>{props.type}</h2>
-      <h1>{props.duration}</h1>
+      <h2 id="timer-label">{props.type}</h2>
+      <h1 id="time-left">{props.duration}</h1>
     </div>
   )
 }
diff --git a/src/components/MediaControl/MediaControl.js b/src/components/MediaControl/MediaControl.js
index e69de29..f6d56be 100644
--- a/src/components/MediaControl/MediaControl.js
+++ b/src/components/MediaControl/MediaControl.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlay, faPause, faSync } from '@fortawesome/free-solid-svg-icons';
+import classes from './MediaControl.module.css';
+
+const mediaControl = () => {
+  return (
+    <div className={classes.MediaControl}>
+      <span id="start_stop">
+        <FontAwesomeIcon className="fa-2x" icon={faPlay} />
+        <FontAwesomeIcon className="fa-2x" icon={faPause} />
+      </span>
+      <span id="reset">
+        <FontAwesomeIcon className="fa-2x" icon={faSync} />
+      </span>
+    </div>
+  )
+}
+
+export default mediaControl;
diff --git a/src/components/MediaControl/MediaControl.module.css b/src/components/MediaControl/MediaControl.module.css
new file mode 100644
index 0000000..1bdeed2
--- /dev/null
+++ b/src/components/MediaControl/MediaControl.module.css
@@ -0,0 +1,3 @@
+.MediaControl span {
+  margin: 0 10px;
+}
diff --git a/src/containers/ControlPanel/ControlPanel.js b/src/containers/ControlPanel/ControlPanel.js
index 108fa92..69aea73 100644
--- a/src/containers/ControlPanel/ControlPanel.js
+++ b/src/containers/ControlPanel/ControlPanel.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import BreakControl from '../../components/TimeControl/BreakControl/BreakControl';
 import SessionControl from '../../components/TimeControl/SessionControl/SessionControl';
 import Display from '../../components/Display/Display';
+import MediaControl from '../../components/MediaControl/MediaControl';
 
 const BREAK = 'break';
 const SESSION = 'session';
@@ -55,6 +56,7 @@ class ControlPanel extends Component {
           decrease={this.decreaseSessionHandler}
         />
         <Display type={this.state.type} duration={this.state.sessionLength}/>
+        <MediaControl />
       </div>
     );
   }
diff --git a/yarn.lock b/yarn.lock
index 473b781..d1c1868 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -963,6 +963,32 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@fortawesome/fontawesome-common-types@^0.2.28":
+  version "0.2.28"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
+  integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.28":
+  version "1.2.28"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
+  integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.28"
+
+"@fortawesome/free-solid-svg-icons@^5.13.0":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739"
+  integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.28"
+
+"@fortawesome/react-fontawesome@^0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz#c865b9286c707407effcec99958043711367cd02"
+  integrity sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"