hmfe · linusklingzell · Dec 21, 2018 · Dec 21, 2018
diff --git a/1: CSS-wizardry/index.html b/1: CSS-wizardry/index.html
@@ -0,0 +1,31 @@
+<style>
+    .button {
+        background-color: #ee953f;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 10px;
+        font-weight: 900;
+        font-size: 18px;
+        border: 2px solid #888;
+        cursor: pointer;
+    }
+
+    .button:after {
+        content: '\00d7';
+        display: flex;
+        margin-left: 10px;
+        background-color: #fff;
+        padding: 10px;
+        border-radius: 100%;
+        font-weight: normal;
+        font-size: 40px;
+        width: 40px;
+        height: 40px;
+        align-items: flex-end;
+        justify-content: center;
+    }
+</style>
+
+<button class="button" type="button">Delete</button>
diff --git a/3.implement-a-simplesearch-application/.gitignore b/3.implement-a-simplesearch-application/.gitignore
@@ -0,0 +1,23 @@
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.idea
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/3.implement-a-simplesearch-application/README.md b/3.implement-a-simplesearch-application/README.md
@@ -0,0 +1,15 @@
+## Hi
+I was using `create-react-app` for this task
+
+run `yarn`
+and then `yarn start`
+
+Node version `9.10.0`
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
diff --git a/3.implement-a-simplesearch-application/package.json b/3.implement-a-simplesearch-application/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "moment": "2.23.0",
+    "prop-types": "15.6.2",
+    "ramda": "0.26.1",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-scripts": "2.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/3.implement-a-simplesearch-application/public/favicon.ico b/3.implement-a-simplesearch-application/public/favicon.ico
diff --git a/3.implement-a-simplesearch-application/public/index.html b/3.implement-a-simplesearch-application/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web 3.implement-a-simplesearch-application is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/3.implement-a-simplesearch-application/public/manifest.json b/3.implement-a-simplesearch-application/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/3.implement-a-simplesearch-application/src/components/Header/Header.js b/3.implement-a-simplesearch-application/src/components/Header/Header.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import StarWarsLogo from '../../static/star-wars-logo.svg'
+import './style.css'
+
+const Header = () => (
+  <header className='header'>
+    <img className='header__img' src={StarWarsLogo} alt=''/>
+    <h1 className='header__title'>A simple search application for HM</h1>
+  </header>
+)
+
+export default Header
diff --git a/3.implement-a-simplesearch-application/src/components/Header/index.js b/3.implement-a-simplesearch-application/src/components/Header/index.js
@@ -0,0 +1 @@
+export {default} from './Header'
diff --git a/3.implement-a-simplesearch-application/src/components/Header/style.css b/3.implement-a-simplesearch-application/src/components/Header/style.css
@@ -0,0 +1,16 @@
+.header {
+    margin-top: 60px;
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.header__img {
+    max-width: 200px;
+}
+
+.header__title {
+    margin-top: 30px;
+    padding: 0 10px;
+    font-size: 30px;
+    font-weight: lighter;
+}
diff --git a/3.implement-a-simplesearch-application/src/components/Results/Results.js b/3.implement-a-simplesearch-application/src/components/Results/Results.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import Proptypes from 'prop-types'
+import './style.css'
+
+const Results = ({searchResult, setToSearchHistory}) => {
+  return (
+    <div className='search-list'>
+      <div className='search-list__title-wrapper'>
+        <h3 className='search-list__title'>Results</h3>
+        <span>search length: {searchResult.count}</span>
+      </div>
+      <ul>
+        {searchResult.results.map((item) => (
+          <li className='search-list__item' key={'search-list-' + item.created}>
+            {item.name}
+            <button className='search-list__item-button' type='button' onClick={() => setToSearchHistory(item)}>
+              Save
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+Results.propTypes = {
+  searchResult: Proptypes.object.isRequired,
+  setToSearchHistory: Proptypes.func.isRequired,
+}
+
+export default Results
diff --git a/3.implement-a-simplesearch-application/src/components/Results/index.js b/3.implement-a-simplesearch-application/src/components/Results/index.js
@@ -0,0 +1 @@
+export {default} from './Results'
diff --git a/3.implement-a-simplesearch-application/src/components/Results/style.css b/3.implement-a-simplesearch-application/src/components/Results/style.css
@@ -0,0 +1,34 @@
+.results {
+    width: 100%;
+    margin-top: 30px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+}
+
+.results__title-wrapper {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #c5c5c5;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+}
+
+.results__title {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.results__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0;
+    border-bottom: 1px solid #c5c5c5;
+}
+
+.results__item-button {
+    padding: 4px;
+    border: 1px solid #c5c5c5;
+    border-radius: 3px;
+}
diff --git a/3.implement-a-simplesearch-application/src/components/Search/Search.js b/3.implement-a-simplesearch-application/src/components/Search/Search.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import './style.css'
+
+const Search = ({children}) => (
+  <section className='search'>
+    {children}
+  </section>
+)
+
+export default Search
diff --git a/3.implement-a-simplesearch-application/src/components/Search/index.js b/3.implement-a-simplesearch-application/src/components/Search/index.js
@@ -0,0 +1 @@
+export {default} from './Search'
diff --git a/3.implement-a-simplesearch-application/src/components/Search/style.css b/3.implement-a-simplesearch-application/src/components/Search/style.css
@@ -0,0 +1,10 @@
+.search {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    background-color: #f2f2f2;
+    max-width: 600px;
+    padding: 10px;
+    margin-bottom: 60px;
+}
diff --git a/3.implement-a-simplesearch-application/src/components/SearchHistory/SearchHistory.js b/3.implement-a-simplesearch-application/src/components/SearchHistory/SearchHistory.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const SearchHistory = ({clearSearchHistory, removeFromSearchHistory, searchHistory}) => (
+  <div className='search-list'>
+    <div className='search-list__title-wrapper'>
+      <h3 className='search-list__title'>Search history</h3>
+      <button className='search-list__title-link' onClick={clearSearchHistory}>
+        Clear search history
+      </button>
+    </div>
+    <ul>
+      {searchHistory.map(item => (
+        <li className='search-list__item' key={'searchHistory-' + item.created}>
+          {item.name}
+          <div>
+            <span className='search-list__item-time'>{item.savedToSearchHistory}</span>
+            <button className='search-list__item-button' type='button' onClick={() => removeFromSearchHistory(item.created)}>X</button>
+          </div>
+        </li>
+      ))}
+    </ul>
+  </div>
+)
+
+SearchHistory.propTypes = {
+  clearSearchHistory: PropTypes.func.isRequired,
+  removeFromSearchHistory: PropTypes.func.isRequired,
+  searchHistory: PropTypes.array.isRequired,
+}
+
+export default SearchHistory
diff --git a/3.implement-a-simplesearch-application/src/components/SearchHistory/index.js b/3.implement-a-simplesearch-application/src/components/SearchHistory/index.js
@@ -0,0 +1 @@
+export {default} from './SearchHistory'
diff --git a/3.implement-a-simplesearch-application/src/components/SearchInput/SearchInput.js b/3.implement-a-simplesearch-application/src/components/SearchInput/SearchInput.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import Proptypes from 'prop-types'
+import { pathOr } from 'ramda'
+import './style.css'
+
+const Results = ({handleChange, handleSubmit, handleSuggestionClick, inputValue, isInputFocus, onFocus, searchSuggestion}) => {
+  const searchSuggestionResults = pathOr([], ['results'], searchSuggestion)
+  return (
+    <div className='search-input'>
+      <form onSubmit={handleSubmit}>
+        <label className='search-input__label'>
+          <input
+            className='search-input__input'
+            type='text'
+            value={inputValue}
+            onChange={handleChange}
+            onFocus={onFocus}
+          />
+        </label>
+        <label>
+          <input className='search-input__label search-input__label--hide' type='submit' value='Submit' />
+        </label>
+      </form>
+      {searchSuggestionResults.length && isInputFocus ? (
+        <ul className='search-input__suggestion-list'>
+          {searchSuggestionResults.map((item, index) => (
+            <li key={'search-input-item-' + index}>
+              <button type='button' className='search-input__suggestion-item' onClick={() => handleSuggestionClick(item.name)}>
+                {item.name}
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
+
+Results.propTypes = {
+  handleChange: Proptypes.func.isRequired,
+  handleSubmit: Proptypes.func.isRequired,
+  handleSuggestionClick: Proptypes.func.isRequired,
+  inputValue: Proptypes.string,
+  isInputFocus: Proptypes.bool.isRequired,
+  onFocus: Proptypes.func.isRequired,
+  searchSuggestion: Proptypes.object,
+}
+
+export default Results