functional components 🤖

Signed-off-by: mashaal <omar@teacups.io>
mashaal · Jan 4, 2017 · a1c60fb · a1c60fb
1 parent a987154
commit a1c60fb
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 58 deletions.
diff --git a/components/app/index.jsx b/components/app/index.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Loading from '../loading'
 import Admin from '../admin'
 import Bar from '../bar'
@@ -10,32 +10,26 @@ import Showcase from '../showcase'
 import Playbar from '../playbar'
 import Radium, {StyleRoot, Style} from 'radium'
 
+const App = props =>
+  <StyleRoot>
+    <Style rules={styles} />
+    <Bar />
+    <Admin admin={props.admin} />
+    <Metadata metadata={props.metadata} library={props.library} />
+    <Library library={props.library} />
+    <Showcase showcase={props.showcase} player={props.player} />
+    <Status status={props.status} />
+    <Loading loading={props.loading} />
+    <Playbar playbar={props.playbar} player={props.player} />
+    <Search search={props.search} admin={props.admin} metadata={props.metadata} />
+  </StyleRoot>
 
-@Radium
-export default class App extends Component {
-  render () {
-    return (
-      <StyleRoot>
-        <Style rules={styles} />
-        <Bar />
-        <Admin admin={this.props.admin} />
-        <Library library={this.props.library} />
-        <Showcase showcase={this.props.showcase} />
-        <Status status={this.props.status} />
-        <Loading loading={this.props.loading} />
-        <Playbar playbar={this.props.playbar} />
-        <Search search={this.props.search} />
-      </StyleRoot>
-    )
-  }
-}
+export default Radium(App)
 
 const styles = {
   html: {
     textSizeAdjust: '100%',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    WebkitTapHighlightColor: 'transparent'
+    WebkitFontSmoothing: 'antialiased'
   },
   body: {
     margin: 0,
@@ -45,6 +39,12 @@ const styles = {
     color: 'white',
     backgroundColor: '#212121'
   },
+  input: {
+    fontFamily: 'averia-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif'
+  },
+  button: {
+    fontFamily: 'averia-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif'
+  },
   '::selection': {
     backgroundColor: 'rgba(92, 67, 232, 1)',
     opacity: 0

diff --git a/components/bar/index.jsx b/components/bar/index.jsx
@@ -1,14 +1,10 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Radium from 'radium'
 
-@Radium
-export default class Bar extends Component {
-  render () {
-    return (
-      <nav style={styles.base} />
-    )
-  }
-}
+const Bar = () =>
+  <nav style={styles.base} />
+
+export default Radium(Bar)
 
 const styles = {
   base: {

diff --git a/components/loading/index.jsx b/components/loading/index.jsx
@@ -1,16 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Radium from 'radium'
 
-@Radium
-export default class Loading extends Component {
-  render () {
-    return (
-      <section style={[styles.base, this.props.loading.display ? styles.show : styles.hide]}>
-        <span style={styles.span}>{this.props.loading.message}</span>
-      </section>
-    )
-  }
-}
+const Loading = props =>
+  <section style={[styles.base, props.loading.display ? styles.show : styles.hide]}>
+    <span style={styles.span}>{props.loading.message}</span>
+  </section>
+
+export default Radium(Loading)
 
 const styles = {
   base: {

diff --git a/components/status/index.jsx b/components/status/index.jsx
@@ -1,21 +1,17 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Radium from 'radium'
 
-@Radium
-export default class Status extends Component {
-  render () {
-    return (
-      <figure style={[styles.status, this.props.status.display ? styles.show : styles.hide]}>
-        <div>
-          <h1 style={styles.h1}>{this.props.status.artist}</h1>
-          <h2 style={styles.h2}>{this.props.status.title}</h2>
-          <h3 style={styles.h3}>{this.props.status.album}</h3>
-          <h4 style={styles.h4}>- 00:00:00</h4>
-        </div>
-      </figure>
-    )
-  }
-}
+const Status = props =>
+  <figure style={[styles.status, props.status.display ? styles.show : styles.hide]}>
+    <div>
+      <h1 style={styles.h1}>{props.status.artist}</h1>
+      <h2 style={styles.h2}>{props.status.title}</h2>
+      <h3 style={styles.h3}>{props.status.album}</h3>
+      <h4 style={styles.h4}>- 00:00:00</h4>
+    </div>
+  </figure>
+
+export default Radium(Status)
 
 const styles = {
   status: {