Initial set up

derdela · May 1, 2017 · 91b562e · 91b562e
commit 91b562e
Show file tree

Hide file tree

Showing 28 changed files with 1,010 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "foobar",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.9.5"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.8",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-router": "^4.1.1",
+    "react-router-dom": "^4.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag 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>
+    <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`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/src/CompleteProps/User.js b/src/CompleteProps/User.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const User = (props) => (
+  <p>
+    {props.preferredName || props.name}: <a href={`mailto:${props.email}`}>{props.email}</a>
+  </p>
+)
+
+// https://facebook.github.io/react/docs/typechecking-with-proptypes.html
+User.propTypes = {
+  name: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  preferredName: PropTypes.string
+}
+
+export default User
diff --git a/src/CompleteProps/UserList.js b/src/CompleteProps/UserList.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import User from './User'
+
+const UserList = (props) => (
+  <ul>
+    {props.users.map((user) => (
+      <li key={user.email}>
+        <User {...user} />
+      </li>
+    ))}
+  </ul>
+)
+
+// https://facebook.github.io/react/docs/typechecking-with-proptypes.html
+UserList.propTypes = {
+  users: PropTypes.array.isRequired
+}
+
+export default UserList
diff --git a/src/CompleteProps/index.js b/src/CompleteProps/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import UserList from './UserList'
+
+const users = [
+  { name: 'Michael', preferredName: 'Mike', email: '[email protected]' },
+  { name: 'Hugo', email: '[email protected]' }
+]
+
+const UserIndex = () => (
+  <div>
+    <h2>Users:</h2>
+    <UserList users={users} />
+  </div>
+)
+
+export default UserIndex
diff --git a/src/Forms/container.js b/src/Forms/container.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import UserList from '../CompleteProps/UserList'
+
+class Search extends React.Component {
+  static propTypes = {
+    users: PropTypes.arrayOf(PropTypes.object).isRequired,
+    search: PropTypes.string
+  }
+
+  getFilteredUsers = () => {
+    if (!this.props.search) {
+      return this.props.users
+    }
+
+    return this.props.users.filter(this.isUserMatching)
+  }
+
+  isUserMatching = (user) => {
+    return user.name.toLowerCase().indexOf(this.props.search.toLowerCase()) > -1
+  }
+
+  render () {
+    return (
+      <UserList users={this.getFilteredUsers()} />
+    )
+  }
+}
+
+export default Search