Add footer, style card hover

Author: alexpanov

client/App.js

@@ -5,10 +5,12 @@ import {Container} from '/client/components/layout';
 import {BrowserRouter, Route} from 'react-router-dom';
 import {about} from '/imports/paths';
 import Menu from '/client/components/Menu';
+import Footer from '/client/components/Footer';
 import {createStore} from 'redux';
 import reducer from './state';
 import {Provider} from 'react-redux';
 import 'semantic-ui-css/semantic.min.css';
+import './app.styl';
 
 const links = [
   {href: '/', label: 'Home'},
@@ -26,6 +28,7 @@ const App = () => (
           <Route exact path="/" component={VinNumbers} />
           <Route exact path={about} component={About} />
         </div>
+        <Footer />
       </Container>
     </BrowserRouter>
   </Provider>

client/app.styl

@@ -0,0 +1,7 @@
+#app-container
+  min-height: 750px
+  display: flex
+  flex-direction: column
+
+#main-screen
+  flex: 1

client/components/Footer/footer.styl

@@ -0,0 +1,2 @@
+#footer
+  margin-top 2rem

client/components/Footer/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Menu} from 'semantic-ui-react';
+
+export default class Footer extends React.Component {
+  render() {
+    return (
+      <Menu id="footer" attached="bottom">
+        Footer
+      </Menu>
+    );
+  }
+}

client/components/Hover.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Hover extends React.Component {
+  state = {
+    hovered: false
+  };
+
+  render() {
+    const {hovered} = this.state;
+    const {children} = this.props;
+    return (
+      <span
+        onMouseOver={() => this.setState({hovered: true})}
+        onFocus={() => this.setState({hovered: true})}
+        onMouseOut={() => this.setState({hovered: false})}
+        onBlur={() => this.setState({hovered: false})}
+      >
+        {children(hovered)}
+      </span>
+    );
+  }
+}
+
+Hover.propTypes = {
+  children: PropTypes.func.isRequired,
+};

client/main.styl

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Button, Card} from 'semantic-ui-react';
 import {removeVin} from '/imports/api/vinNumbers/methods';
+import Hover from '/client/components/Hover';
 
 export default class VinNumberCard extends React.Component {
   onRemove() {
@@ -17,18 +18,22 @@ export default class VinNumberCard extends React.Component {
   render() {
     const {vin} = this.props;
     return (
-      <Card>
-        <Card.Content>
-          <Card.Header>VIN {vin.value}</Card.Header>
-          <Card.Meta>{vin.friendlyCreationDate()}</Card.Meta>
-        </Card.Content>
-        <Card.Content extra>
-          <Button.Group fluid>
-            <Button basic positive>Approve</Button>
-            <Button basic negative onClick={() => this.onRemove()}>Remove</Button>
-          </Button.Group>
-        </Card.Content>
-      </Card>
+      <Hover>
+        {hovered => (
+          <Card raised={hovered}>
+            <Card.Content>
+              <Card.Header>VIN # {vin.value}</Card.Header>
+              <Card.Meta>{vin.friendlyCreationDate()}</Card.Meta>
+            </Card.Content>
+            <Card.Content extra>
+              <Button.Group fluid>
+                <Button basic positive>Approve</Button>
+                <Button basic negative onClick={() => this.onRemove()}>Remove</Button>
+              </Button.Group>
+            </Card.Content>
+          </Card>
+        )}
+      </Hover>
     );
   }
 }

client/pages/VinNumbers/VinNumberCard.js

@@ -3,6 +3,12 @@ import {addVin} from '/imports/api/vinNumbers/methods';
 
 const isSeededAlready = () => VinNumbers.find().count() > 1;
 
+const dummyVins = [
+  {value: 'Vin1', notes: 'Note1'},
+  {value: 'Vin2', notes: 'Note2'},
+  {value: 'Vin3', notes: 'Note3'},
+];
+
 const seedVinNumbers = () => {
   if (isSeededAlready()) {
     console.log('Server is seeded');
@@ -11,7 +17,7 @@ const seedVinNumbers = () => {
 
   console.log('Running seed function');
 
-  const vinInserts = ['Vin1', 'Vin2', 'Vin3'].map(value => addVin.callPromise({value}));
+  const vinInserts = dummyVins.map(vin => addVin.callPromise(vin));
   Promise.all(vinInserts)
     .catch(err => console.error('Seeding the server failed', err))
     .then(() => console.log(`Successfully seeded the server with ${vinInserts.length} vin numbers`));