From 21a94d88a9f69b95ebaf72fcc5b7536a0db1b932 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 9 Jan 2018 16:39:16 +0100
Subject: [PATCH] Added a seperate component for the info button.

---
 client/app/components/buttons/InfoButton.jsx | 52 ++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 client/app/components/buttons/InfoButton.jsx

diff --git a/client/app/components/buttons/InfoButton.jsx b/client/app/components/buttons/InfoButton.jsx
new file mode 100644
index 0000000..fa8f4f4
--- /dev/null
+++ b/client/app/components/buttons/InfoButton.jsx
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import Interactive from 'react-interactive';
+
+import buttonsCSS from '../styles/buttons.jsx';
+
+
+class InfoButton extends Component {
+   constructor(props) {
+      super(props);
+
+      if (props) {
+         this.state = {
+            id: props.id,
+            type: props.type,
+         }
+      }
+   }
+
+   componentWillReceiveProps(props) {
+      this.setState({
+         id: props.id,
+         type: props.type,
+      })
+   }
+
+   getTMDBLink() {
+      const id = this.state.id;
+      const type = this.state.type;
+
+      if (type === 'movie') 
+         return 'https://www.themoviedb.org/movie/' + id
+      else if (type === 'show')  
+         return 'https://www.themoviedb.org/tv/' + id
+   }
+
+   render() {
+      return (
+         <a href={this.getTMDBLink()}>
+            <Interactive 
+               as='button'
+               hover={buttonsCSS.info_hover}
+               focus={buttonsCSS.info_hover}
+               style={buttonsCSS.info}>
+
+               <span>More info</span>
+            </Interactive>
+         </a>
+      );
+   }
+}
+
+export default InfoButton;
\ No newline at end of file