brian-react-test submission

package.json

@@ -13,12 +13,14 @@
     "debug": "^2.2.0",
     "evil-icons": "^1.8.0",
     "express": "^4.13.4",
+    "prop-types": "^15.5.10",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
     "react-evil-icons": "^0.4.0",
     "react-redux": "^5.0.5",
     "redux": "^3.5.2",
     "sancus": "^1.0.3",
+    "universal-cookie": "^2.0.8",
     "webpack": "^3.3.0",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-dev-server": "^2.5.1",

src/actions/contact.js

@@ -0,0 +1,31 @@
+import * as types from './types';
+
+export const addContact = (name, phone, email) => ({
+  type: types.ADD_CONTACT,
+  name,
+  phone,
+  email
+});
+
+export const deleteContact = id => ({
+  type: types.DELETE_CONTACT,
+  id
+});
+
+export const saveContact = (id, name, phone, email) => ({
+  type: types.SAVE_CONTACT,
+  id,
+  name,
+  phone,
+  email
+});
+
+export const addFavourite = id => ({
+  type: types.ADD_FAVOURITE,
+  id
+});
+
+export const deleteFavourite = id => ({
+  type: types.DELETE_FAVOURITE,
+  id
+});

src/actions/types.js

@@ -0,0 +1,5 @@
+export const ADD_CONTACT = 'ADD_CONTACT';
+export const DELETE_CONTACT = 'DELETE_CONTACT';
+export const SAVE_CONTACT = 'SAVE_CONTACT';
+export const ADD_FAVOURITE = 'ADD_FAVOURITE';
+export const DELETE_FAVOURITE = 'DELETE_FAVOURITE';

src/app/app.jsx

@@ -1,16 +1,40 @@
 import React from 'react';
 
 import './app.scss';
-import { Column, Row, Title, Button } from '../components';
+import { Column, Row, Title, ContactEdit, Modal, Button } from '../components';
+import { Contacts, Favourites } from '../containers';
 
-const onAddClick = (event) => {
-};
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      editModalVisible: false
+    };
+  }
 
-const App = () => (
-  <Column className="app">
-    <Row><Title>Contact Book</Title></Row>
-    <Row><Button label="Add Contact" onClick={onAddClick} /></Row>
-  </Column>
-);
+  onClick = () => {
+    this.setState({ editModalVisible: true });
+  }
+
+  render = () => (
+    <Column className="app">
+      <Row><Title>Contact Book</Title></Row>
+      <Row><Button label="Add Contact" onClick={this.onClick} /></Row>
+      <Contacts />
+      <div className="blank" />
+      <Favourites />
+      <Modal
+        className="contact-edit-modal"
+        onClickOverlay={() => { this.setState({ editModalVisible: false }); }}
+        visible={this.state.editModalVisible}
+      >
+        <ContactEdit
+          close={() => { this.setState({ editModalVisible: false }); }}
+          contact={{ id: -1, name: '', phone: '', email: '' }}
+        />
+      </Modal>
+    </Column>
+  )
+}
 
 export default App;

src/app/app.scss

@@ -4,3 +4,42 @@
   align-items: center;
   width: 100%;
 }
+
+.contact-margin {
+  margin: 10px;
+}
+
+.modal {
+  width: 50%;
+  height: 50%;
+  background-color: white;
+}
+
+.contact-edit-modal {
+  width: 50%;
+  min-width: 900px;
+  height: 50px;
+  background-color: white;
+}
+
+.blank {
+  height: 50px;
+}
+
+.name-width {
+  width: 300px;
+}
+
+.phone-width {
+  width: 200px;
+}
+
+.email-width {
+  width: 300px;
+}
+
+.button {
+  width: 100px;
+  height: 30px;
+  margin: auto 10px;
+}

src/components/controls/button.jsx

@@ -10,19 +10,21 @@ const resolveButtonLabel = (children, label) => {
   return 'Label';
 };
 
-const Button = ({ children, label, onClick }) => (
-  <button onClick={onClick}>{resolveButtonLabel(children, label)}</button>
+const Button = ({ className, children, label, onClick }) => (
+  <button className={className} onClick={onClick}>{resolveButtonLabel(children, label)}</button>
 );
 
 Button.propTypes = {
   children: PropTypes.string,
   label: PropTypes.string,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string.isRequired
 };
 
 Button.defaultProps = {
   label: null,
-  children: null
+  children: null,
+  className: 'button'
 };
 
 export default Button;

src/components/controls/contact-edit.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import '../../app/app.scss';
+import { Column, Row } from '../grid';
+import { Button } from '../controls';
+import { ContactSaveButton, ContactDeleteButton } from '../../containers';
+
+class ContactEdit extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: this.props.contact.name,
+      phone: this.props.contact.phone,
+      email: this.props.contact.email
+    };
+  }
+
+  render = () => (
+    <Column className="app">
+      <Row>
+        <Column className="contact-margin">
+          <input
+            className="typography label"
+            placeholder="full name"
+            value={this.state.name}
+            onChange={(e) => { this.setState({ name: e.target.value }); }}
+          />
+        </Column>
+        <Column className="contact-margin">
+          <input
+            className="typography label"
+            placeholder="phone number"
+            value={this.state.phone}
+            onChange={(e) => { this.setState({ phone: e.target.value }); }}
+          />
+        </Column>
+        <Column className="contact-margin">
+          <input
+            className="typography label"
+            placeholder="email"
+            value={this.state.email}
+            onChange={(e) => { this.setState({ email: e.target.value }); }}
+          />
+        </Column>
+        <Button onClick={() => { this.props.close(); }} label={'Cancel'} />
+        <ContactSaveButton
+          contact={{
+            id: this.props.contact.id,
+            name: this.state.name,
+            phone: this.state.phone,
+            email: this.state.email
+          }}
+          onClick={() => { this.props.close(); }}
+        />
+        {this.props.contact.id > -1
+          ? <ContactDeleteButton
+            id={this.props.contact.id}
+            onClick={() => { this.props.close(); }}
+          />
+          : null
+        }
+      </Row>
+    </Column>
+  )
+}
+
+ContactEdit.propTypes = {
+  contact: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    phone: PropTypes.string,
+    email: PropTypes.string }).isRequired,
+  close: PropTypes.func.isRequired
+};
+
+export default ContactEdit;

src/components/controls/contact-list.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import '../../app/app.scss';
+import Contact from './contact';
+import { Column, Row } from '../grid';
+
+const ContactList = ({ contacts, defaultText, defaultEmptyText }) => (
+  <Row className="app">
+    {
+      contacts.length > 0
+        ? <Column className="app">
+          <Row>{defaultText}</Row>
+          {contacts.map(contact => (
+            <Contact key={contact.id} contact={contact} />
+          ))}
+        </Column>
+        : defaultEmptyText
+    }
+  </Row>
+);
+
+ContactList.propTypes = {
+  contacts: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    phone: PropTypes.string,
+    email: PropTypes.string,
+    favourite: PropTypes.bool
+  })).isRequired,
+  defaultText: PropTypes.string.isRequired,
+  defaultEmptyText: PropTypes.string.isRequired
+};
+
+export default ContactList;

src/components/controls/contact.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, ContactEdit, Modal } from '../controls';
+import { ContactFavouriteButton, ContactUnfavouriteButton } from '../../containers';
+import '../../app/app.scss';
+import { Column, Row } from '../grid';
+import { Label } from '../typography';
+
+class Contact extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      editModalVisible: false
+    };
+  }
+
+  render = () => (
+    <Row>
+      <Column className="contact-margin name-width"><Label>{this.props.contact.name}</Label></Column>
+      <Column className="contact-margin phone-width"><Label>{this.props.contact.phone}</Label></Column>
+      <Column className="contact-margin email-width"><Label>{this.props.contact.email}</Label></Column>
+      <Button onClick={() => { this.setState({ editModalVisible: true }); }} label={'Edit'} />
+      {
+        this.props.contact.favourite
+          ? <ContactUnfavouriteButton id={this.props.contact.id} />
+          : <ContactFavouriteButton id={this.props.contact.id} />
+      }
+      <Modal
+        className="contact-edit-modal"
+        onClickOverlay={() => { this.setState({ editModalVisible: false }); }}
+        visible={this.state.editModalVisible}
+      >
+        <ContactEdit
+          close={() => { this.setState({ editModalVisible: false }); }}
+          contact={this.props.contact}
+        />
+      </Modal>
+    </Row>
+  )
+}
+
+Contact.propTypes = {
+  contact: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    phone: PropTypes.string,
+    email: PropTypes.string,
+    favourite: PropTypes.bool
+  }).isRequired
+};
+
+export default Contact;

src/components/controls/index.js

@@ -1,4 +1,8 @@
 import IconButton from './icon-button';
 import Button from './button';
+import ContactEdit from './contact-edit';
+import ContactList from './contact-list';
+import Contact from './contact';
+import Modal from './modal';
 
-export { IconButton, Button };
+export { Button, ContactEdit, ContactList, Contact, IconButton, Modal };