BrandEmbassy interview PR

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": ["es2015", "stage-2", "react"],
+  "plugins": [
+    "transform-decorators-legacy",
+    "add-module-exports",
+    "react-html-attrs",
+    "transform-class-properties"
+  ],
+  "env": {
+    "test": {
+      "presets": ["es2015", "stage-2", "react"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,5 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2

.eslintcache

@@ -0,0 +1 @@
+{"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/__mocks__/fileMock.js":{"size":43,"mtime":1506065307272,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/__mocks__/fileMock.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/__mocks__/styleMock.js":{"size":43,"mtime":1506065314353,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/__mocks__/styleMock.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/__tests__/App.test.js":{"size":242,"mtime":1506065294606,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/__tests__/App.test.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/__tests__/util.test.js":{"size":509,"mtime":1506065299414,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/__tests__/util.test.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/actions/constants.js":{"size":133,"mtime":1506065243963,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/actions/constants.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/actions/contactActions.js":{"size":385,"mtime":1506065235084,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/actions/contactActions.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/reducers/index.js":{"size":43,"mtime":1505856755194,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/reducers/index.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/utils/formUtils.js":{"size":546,"mtime":1506066015463,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/utils/formUtils.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/registerServiceWorker.js":{"size":4045,"mtime":1506067186234,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/registerServiceWorker.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/index.js":{"size":265,"mtime":1506067423592,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/index.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/reducers/contactsReducer.js":{"size":1849,"mtime":1506067383955,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/reducers/contactsReducer.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/components/contact/ContactForm.js":{"size":4152,"mtime":1506067651566,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/components/contact/ContactForm.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/views/app/App.js":{"size":4550,"mtime":1506067483953,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/views/app/App.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/utils/util.js":{"size":484,"mtime":1506067521912,"hashOfConfig":"15gt41v","results":{"filePath":"/Users/edgar/Work/Javascript2017/brandEmbassy/interview/src/utils/util.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}}}

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  "extends": "airbnb",
+  "plugins": [
+   "react",
+   "flowtype"
+  ],
+  "parser": "babel-eslint",
+  "rules": {
+    "strict": 2,
+    "quotes": 2,
+    "no-unused-vars": 2,
+    "camelcase": 2,
+    "no-underscore-dangle": 2,
+    "no-console": 0,
+    "no-plusplus": 0,
+    "no-debugger": 0,
+//    "comma-dangle": ["error", "always"],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/no-unknown-property": [2, { "ignore": ["class", "for"] }],
+    "react/require-default-props": 0,
+    "react/forbid-prop-types": [0, { "forbid": ['array', 'object'] }],
+    "jsx-a11y/no-static-element-interactions": [0, { handlers: [],},],
+    "jsx-a11y/interactive-supports-focus": [0, { handlers: [],},],
+    "class-methods-use-this": 0
+  }
+};

.flowconfig

@@ -0,0 +1,9 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]

.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

package.json

@@ -2,15 +2,75 @@
   "name": "javascript-homework",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-scripts": "1.0.10"
-  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "testAll": "jest CI=true --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src --cache --ignore-pattern .gitignore"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./__mocks__/fileMock.js",
+      "\\.(css|less)$": "identity-obj-proxy"
+    }
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "identity-obj-proxy": "3.0.0",
+    "lodash": "^4.17.4",
+    "prop-types": "15.5.10",
+    "react": "15.6.1",
+    "react-dom": "15.6.1",
+    "react-redux": "5.0.6",
+    "react-router": "3.0.2",
+    "react-scripts": "1.0.10",
+    "redux": "3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0",
+    "shortid": "2.2.8"
+  },
+  "devDependencies": {
+    "babel-eslint": "8.0.0",
+    "babel-plugin-add-module-exports": "0.2.1",
+    "babel-plugin-react-html-attrs": "2.0.0",
+    "babel-plugin-transform-class-properties": "6.22.0",
+    "babel-plugin-transform-decorators-legacy": "1.3.4",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-react": "6.24.1",
+    "babel-preset-stage-0": "6.24.1",
+    "babel-preset-stage-1": "6.24.1",
+    "babel-preset-stage-2": "6.24.1",
+    "eslint": "4.6.1",
+    "eslint-config-airbnb": "15.1.0",
+    "eslint-plugin-flowtype": "2.35.1",
+    "eslint-plugin-import": "2.7.0",
+    "eslint-plugin-jsx-a11y": "5.1.1",
+    "eslint-plugin-react": "7.3.0",
+    "flow-babel-webpack-plugin": "1.1.0",
+    "flow-bin": "0.54.1"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "stage-1",
+      "react"
+    ],
+    "plugins": [
+      "transform-decorators-legacy",
+      "add-module-exports",
+      "react-html-attrs",
+      "transform-class-properties"
+    ],
+    "env": {
+      "test": {
+        "presets": [
+          "es2015",
+          "stage-1",
+          "react"
+        ]
+      }
+    }
   }
 }

src/__mocks__/fileMock.js

@@ -0,0 +1,4 @@
+
+/* eslint-disable */
+
+module.exports = {};

src/__mocks__/styleMock.js

@@ -0,0 +1,4 @@
+
+/* eslint-disable */
+
+module.exports = {};

src/App.test.js → src/__tests__/App.test.js

@@ -1,6 +1,9 @@
+
+/* eslint-disable */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from '../views/app/App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

src/util.test.js → src/__tests__/util.test.js

@@ -1,4 +1,7 @@
-const util = require('../src/util');
+
+/* eslint-disable */
+
+import util from '../utils/util';
 
 describe('util', function() {
 

src/actions/constants.js

@@ -0,0 +1,7 @@
+export const START_EDITING_CONTACT = 'startEditingContact';
+export const SET_SORTING_MODE = 'setSortingMode';
+export const SAVE_CONTACT = 'saveContact';
+export const EDIT_CONTACT = 'editContact';
+export const DELETE_CONTACT = 'deleteContact';
+export const SEARCH_CONTACT = 'searchContact';
+export const SEARCH_CONTACT_RESULTS = 'searchContactResults';

src/actions/contactActions.js

@@ -0,0 +1,59 @@
+
+import * as CONTACT from './constants';
+
+export const startEditingContact = contact => ({
+  type: CONTACT.START_EDITING_CONTACT,
+  payload: contact,
+});
+
+export const setSortingMode = index => ({
+  type: CONTACT.SET_SORTING_MODE,
+  payload: index,
+});
+
+export function saveContact(contact) {
+  return {
+    type: CONTACT.SAVE_CONTACT,
+    payload: contact,
+  };
+}
+
+export function editContact(contact) {
+  return {
+    type: CONTACT.EDIT_CONTACT,
+    payload: contact,
+  };
+}
+
+export function deleteContact(contactId) {
+  return {
+    type: CONTACT.DELETE_CONTACT,
+    payload: contactId,
+  };
+}
+
+export function searchContact(query, contacts) {
+  return (dispatch) => {
+    dispatch({
+      type: CONTACT.SEARCH_CONTACT,
+      payload: query,
+    });
+    // simulate async call
+    setTimeout(() => {
+      const searchedContacts = contacts.filter(
+        contact => contact.name.toLocaleLowerCase().indexOf(
+          query.toLocaleLowerCase()) > -1);
+      dispatch({
+        type: CONTACT.SEARCH_CONTACT_RESULTS,
+        payload: searchedContacts,
+      });
+    }, 1000);
+  };
+}
+
+export function searchContactResults(results) {
+  return {
+    type: CONTACT.SEARCH_CONTACT_RESULTS,
+    payload: results,
+  };
+}

src/components/contact/ContactItem.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export default function ContactItem(props) {
+  const { name } = props.contact;
+  const { onClick, active } = props;
+  return (
+    <div role="menuitem" onClick={onClick} className={classNames('item', { 'item--active': active })}>
+      <div className="in">
+        <div className="profile-pic" />
+        {name}
+      </div>
+    </div>
+  );
+}
+
+ContactItem.propTypes = {
+  contact: PropTypes.object,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+};