more work

frontend/components/header.js

@@ -6,12 +6,15 @@ const Header = props => (
     <Logo />
     <Search />
 
-    <style jsx>{`
-header {
-  display: grid;
-  grid-template-columns: 150px 1fr
-}
-    `}</style>
+    <style jsx>
+      {`
+        header {
+          display: grid;
+          grid-template-columns: 150px 1fr;
+          padding: 5px 20px;
+        }
+      `}
+    </style>
   </header>
 )
 

frontend/components/search.js

@@ -1,102 +1,138 @@
 import fuse from 'fuse.js'
+import theme from '../styles/theme'
 
-const dummyResults = [{
+const dummyResults = [
+  {
     title: 'good :-)',
     text: 'a good text.',
     link: 'good'
-}, {
+  },
+  {
     title: 'bad :-(',
     text: 'a bad text.',
     link: 'bad'
-}]
+  }
+]
 
 class Search extends React.Component {
-    state = {
-        active: false,
-        query: '',
-        results: []
-    }
+  state = {
+    active: false,
+    query: '',
+    results: []
+  }
 
-    focus = ev => {
-        this.setState({ active: true })
-    }
+  focus = ev => {
+    this.setState({ active: true })
+  }
 
-    blur = ev => {
-        this.setState({ active: false })
-    }
+  blur = ev => {
+    this.setState({ active: false })
+  }
 
-    change = ev => {
-        const { value } = ev.target
-        this.setState({ query: ev.target.value })
-        const fuseOptions = {
-            shouldSort: true,
-            includeMatches: true,
-            threshold: 0.3,
-            location: true,
-            keys: ['title', 'text', 'link']
-        }
-        const fuseInst = new fuse(dummyResults, fuseOptions)
-        const searchResults = fuseInst.search(value)
-        console.log(dummyResults, searchResults)
-        if (value) {
-            this.setState({
-                results: searchResults
-            })
-        } else {
-            this.setState({ results: [] })
-        }
+  change = ev => {
+    const { value } = ev.target
+    this.setState({ query: ev.target.value })
+    const fuseOptions = {
+      shouldSort: true,
+      includeMatches: true,
+      threshold: 0.3,
+      location: true,
+      keys: ['title', 'text', 'link']
+    }
+    const fuseInst = new fuse(dummyResults, fuseOptions)
+    const searchResults = fuseInst.search(value)
+    console.log(dummyResults, searchResults)
+    if (value) {
+      this.setState({
+        results: searchResults
+      })
+    } else {
+      this.setState({ results: [] })
     }
+  }
 
-    render() {
-        return (
-            <>
-                <div id='searchbar'>
-                    <input
-                        type="text"
-                        placeholder="Search.."
-                        onFocus={this.focus}
-                        onBlur={this.blur}
-                        onChange={this.change}
-                    />
-                    <button type="submit">Search</button>
-                    {(this.state.active && this.state.query) && (this.state.results ?
-                        (
-                            <ul id='searchresults'>
-                                {this.state.results.map(result => <Result key={result.title} {...result} />)}
-                            </ul>
-                        ) : (
-                            <p>Nothing found.</p>
-                        )
-                    )}
-                </div>
+  clear = ev => {
+    this.setState({ query: '' })
+  }
 
-                <style jsx>
-                    {`
-                        input[type=text] {
-                            float: right;
-                            padding: 6px;
-                            border: none;
-                            margin-top: 8px;
-                            margin-right: 16px;
-                            font-size: 17px;
-                        }
-                        `}
-                </style>
-            </>
-        )
-    }
+  render () {
+    return (
+      <>
+        <div id='searchbar'>
+          <input
+            type='text'
+            placeholder='Search..'
+            onFocus={this.focus}
+            onBlur={this.blur}
+            onChange={this.change}
+            value={this.state.query}
+          />
+          <button
+            style={{ display: this.state.query ? 'block' : 'none' }}
+            onClick={this.clear}
+          >
+            x
+          </button>
+          <button type='submit' disabled={!this.state.query}>
+            <span>Search</span>
+          </button>
+          {this.state.active &&
+            this.state.query &&
+            (this.state.results ? (
+              <ul id='searchresults'>
+                {this.state.results.map(result => (
+                  <Result key={result.title} {...result} />
+                ))}
+              </ul>
+            ) : (
+              <p>Nothing found.</p>
+            ))}
+        </div>
+
+        <style jsx>
+          {`
+            #searchbar {
+              border: 1px solid ${theme.colors.lightgrey};
+            }
+
+            input[type='text'] {
+              border: none;
+            }
+
+            button {
+              font-weight: 900;
+              background: transparent;
+              color: ${theme.colors.darkgrey};
+              border: none;
+              padding: 0.3em 1.8em;
+              cursor: pointer;
+              box-shadow: none;
+            }
+
+            button[type='submit'] {
+              content: '';
+            }
+
+            button > span {
+              display: none;
+            }
+          `}
+        </style>
+      </>
+    )
+  }
 }
 
 const Result = props => {
-    const { item, matches } = props
-    return (
-        <li>
-            <a href={item.link}>
-                <h3>{item.title}</h3>
-                <p>{item.text}</p>
-            </a>
-        </li>
-    )
+  const { item, matches } = props
+  return (
+    <li>
+      <a href={item.link}>
+        <h3>{item.title}</h3>
+        <p>{item.text}</p>
+      </a>
+    </li>
+  )
 }
 
-export default Search
+export default Search

frontend/components/training.js

@@ -1,4 +1,4 @@
-function calculateRating(ratings) {
+function calculateRating (ratings) {
   const numberOfRatings = ratings.length
   const sumOfRatings = ratings.reduce(
     (accumulator, rating) => accumulator + rating.value,
@@ -79,6 +79,12 @@ const Training = props => (
 
     <style jsx>
       {`
+        article {
+          display: grid;
+          grid-template-columns: 1fr 3fr;
+          padding: 5px 20px;
+        }
+
         article > h2 {
           font-weight: 900;
           font-size: 120%;
@@ -97,15 +103,17 @@ const Training = props => (
 const Youtube = props => {
   const { link, rest } = props
   const [crap, src] = props.link.match(/\?v=(.*)/)
-  return <iframe
-    width='285'
-    height='160'
-    src={`https://www.youtube.com/embed/${src}`}
-    frameBorder='0'
-    allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
-    allowFullScreen
-    {...rest}
-  />
+  return (
+    <iframe
+      width='285'
+      height='160'
+      src={`https://www.youtube.com/embed/${src}`}
+      frameBorder='0'
+      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
+      allowFullScreen
+      {...rest}
+    />
+  )
 }
 
 const Block = props => (
@@ -135,13 +143,17 @@ const Block = props => (
     <section>
       <h2>Tracks</h2>
       <ol>
-        {props.tracks.map(track => <Track key={track.id} {...track} />)}
+        {props.tracks.map(track => (
+          <Track key={track.id} {...track} />
+        ))}
       </ol>
     </section>
     <section>
       <h2>Exercises</h2>
       <ol>
-        {props.exercises.map(exercise => <Exercise key={exercise.id} {...exercise} />)}
+        {props.exercises.map(exercise => (
+          <Exercise key={exercise.id} {...exercise} />
+        ))}
       </ol>
     </section>
 
@@ -156,19 +168,27 @@ const Block = props => (
 )
 
 const Track = props => {
-  return <section>
-    <p>Track {props.id}: {props.title} ({props.artist})</p>
-    <Youtube link={props.link} />
-  </section>
+  return (
+    <section>
+      <p>
+        Track {props.id}: {props.title} ({props.artist})
+      </p>
+      <Youtube link={props.link} />
+    </section>
+  )
 }
 
 const Exercise = props => {
-  return <section>
-    <p>Exercise {props.id}: {props.name}</p>
-  </section>
+  return (
+    <section>
+      <p>
+        Exercise {props.id}: {props.name}
+      </p>
+    </section>
+  )
 }
 class TrainingCreateForm extends React.Component {
-  render() {
+  render () {
     return (
       <form>
         <label htmlFor='title'>

frontend/pages/index.js

@@ -1,9 +1,10 @@
 import Training from '../components/training'
 import data from '../initial-data.js'
+import theme from '../styles/theme'
 
 console.log(data)
 
-const Home = () =>
+const Home = () => (
   <>
     <section>
       <h1>Stay in Shape with u-fit</h1>
@@ -20,10 +21,27 @@ const Home = () =>
       </aside>
     </section>
 
-    <section>
+    <section id='nextTraining'>
       <h1>Your Next Training</h1>
       <Training {...data.trainings[data.trainings.length - 1]} />
     </section>
+
+    <style jsx>
+      {`
+        #nextTraining {
+          background: no-repeat top/100% url('media/man_working_out.jpg');
+          display: grid;
+          grid-template-rows: 48px 1fr;
+        }
+
+        #nextTraining > h1 {
+          background: rgba(32, 35, 40, 0.8);
+          padding: 5px 20px;
+          color: ${theme.colors.offWhite};
+        }
+      `}
+    </style>
   </>
+)
 
 export default Home

frontend/styles/global.js

@@ -49,6 +49,7 @@ textarea {
   border: 1px solid ${theme.colors.lightgrey};
   padding: 6px;
   margin: 0 8px;
+  background: transparent;
 }
 
 pre {
@@ -56,4 +57,4 @@ pre {
 }
 `
 
-export default GlobalStyle
+export default GlobalStyle