From 4d359c8e7aeb91b4e6fefe03656076cffc12f06a Mon Sep 17 00:00:00 2001 From: Gael Flores Date: Wed, 2 Aug 2017 19:44:16 +0200 Subject: [PATCH 1/6] backup --- package.json | 1 + src/app/app.jsx | 41 +++++++++++----- src/app/app.scss | 44 +++++++++++++++-- .../contacts/manage-contacts.js} | 0 src/client/setup.js | 7 +++ src/client/state/manage-state.js | 34 +++++++++++++ src/client/state/setup-state.js | 11 +++++ src/components/controls/button.jsx | 28 ----------- src/components/controls/icon-button.jsx | 17 ------- src/components/controls/index.js | 4 -- src/components/grid/box.jsx | 20 -------- src/components/grid/column.jsx | 20 -------- src/components/grid/grid.scss | 15 ------ src/components/grid/index.js | 7 --- src/components/grid/row.jsx | 20 -------- src/components/index.js | 5 -- src/components/resets.scss | 33 ------------- src/components/typography/description.jsx | 16 ------ src/components/typography/index.js | 8 --- src/components/typography/label.jsx | 16 ------ src/components/typography/subtitle.jsx | 16 ------ src/components/typography/title.jsx | 16 ------ src/components/typography/typography.scss | 17 ------- src/index.html | 5 +- src/index.jsx | 6 ++- src/ui/Content/ContactList/ContactList.jsx | 34 +++++++++++++ src/ui/Content/ContactList/ContactList.scss | 19 +++++++ .../ContactListItem/ContactListItem.jsx | 21 ++++++++ .../ContactListItem/ContactListItem.scss | 0 src/ui/Content/Content.jsx | 16 ++++++ src/ui/Content/Content.scss | 9 ++++ src/ui/Header/Header.jsx | 13 +++++ src/ui/Header/Header.scss | 3 ++ src/ui/Main.jsx | 29 +++++++++++ src/ui/Main.scss | 40 +++++++++++++++ src/ui/NavBar/NavBar.jsx | 49 +++++++++++++++++++ src/ui/NavBar/NavBar.scss | 25 ++++++++++ tools/webpack/development.js | 9 +++- 38 files changed, 393 insertions(+), 281 deletions(-) rename src/{components/typography/paragraph.jsx => client/contacts/manage-contacts.js} (100%) create mode 100644 src/client/setup.js create mode 100644 src/client/state/manage-state.js create mode 100644 src/client/state/setup-state.js delete mode 100644 src/components/controls/button.jsx delete mode 100644 src/components/controls/icon-button.jsx delete mode 100644 src/components/controls/index.js delete mode 100644 src/components/grid/box.jsx delete mode 100644 src/components/grid/column.jsx delete mode 100644 src/components/grid/grid.scss delete mode 100644 src/components/grid/index.js delete mode 100644 src/components/grid/row.jsx delete mode 100644 src/components/index.js delete mode 100644 src/components/resets.scss delete mode 100644 src/components/typography/description.jsx delete mode 100644 src/components/typography/index.js delete mode 100644 src/components/typography/label.jsx delete mode 100644 src/components/typography/subtitle.jsx delete mode 100644 src/components/typography/title.jsx delete mode 100644 src/components/typography/typography.scss create mode 100644 src/ui/Content/ContactList/ContactList.jsx create mode 100644 src/ui/Content/ContactList/ContactList.scss create mode 100644 src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx create mode 100644 src/ui/Content/ContactList/ContactListItem/ContactListItem.scss create mode 100644 src/ui/Content/Content.jsx create mode 100644 src/ui/Content/Content.scss create mode 100644 src/ui/Header/Header.jsx create mode 100644 src/ui/Header/Header.scss create mode 100644 src/ui/Main.jsx create mode 100644 src/ui/Main.scss create mode 100644 src/ui/NavBar/NavBar.jsx create mode 100644 src/ui/NavBar/NavBar.scss diff --git a/package.json b/package.json index c6d9612..7eacdeb 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "eslint-plugin-import": "^2.7.0", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-react": "^7.1.0", + "file-loader": "^0.11.2", "node-sass": "^4.5.3", "react-hot-loader": "^1.3.0", "react-render": "^1.1.0", diff --git a/src/app/app.jsx b/src/app/app.jsx index b1474ec..eed7b6a 100644 --- a/src/app/app.jsx +++ b/src/app/app.jsx @@ -1,16 +1,33 @@ -import React from 'react'; - import './app.scss'; -import { Column, Row, Title, Button } from '../components'; -const onAddClick = (event) => { -}; +import React, { Component } from 'react'; + +import { setup } from '../client/setup.js'; +import { Main } from '../ui/Main.jsx'; + +var app = null; + +export const getApp = () => { + return app; +} -const App = () => ( - - Contact Book - -); - -Button.propTypes = { - children: PropTypes.string, - label: PropTypes.string, - onClick: PropTypes.func.isRequired -}; - -Button.defaultProps = { - label: null, - children: null -}; - -export default Button; diff --git a/src/components/controls/icon-button.jsx b/src/components/controls/icon-button.jsx deleted file mode 100644 index 72692e6..0000000 --- a/src/components/controls/icon-button.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { PropTypes } from 'react'; -import Icon from 'react-evil-icons'; - -const IconButton = ({ icon, onClick }) => ( - -); - -IconButton.propTypes = { - icon: PropTypes.oneOf([ - 'plus', - 'heart', - 'clock' - ]).isRequired, - onClick: PropTypes.func.isRequired -}; - -export default IconButton; diff --git a/src/components/controls/index.js b/src/components/controls/index.js deleted file mode 100644 index 36d4bc7..0000000 --- a/src/components/controls/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import IconButton from './icon-button'; -import Button from './button'; - -export { IconButton, Button }; diff --git a/src/components/grid/box.jsx b/src/components/grid/box.jsx deleted file mode 100644 index 27a1fa7..0000000 --- a/src/components/grid/box.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, { PropTypes } from 'react'; - -const Box = ({ children, className }) => ( -
{children}
-); - -Box.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.arrayOf(PropTypes.element) - ]), - className: PropTypes.string -}; - -Box.defaultProps = { - className: '', - children: null -}; - -export default Box; diff --git a/src/components/grid/column.jsx b/src/components/grid/column.jsx deleted file mode 100644 index 294ec56..0000000 --- a/src/components/grid/column.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, { PropTypes } from 'react'; - -const Column = ({ children, className }) => ( -
{children}
-); - -Column.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.arrayOf(PropTypes.element) - ]), - className: PropTypes.string -}; - -Column.defaultProps = { - className: '', - children: null -}; - -export default Column; diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss deleted file mode 100644 index 1c238ae..0000000 --- a/src/components/grid/grid.scss +++ /dev/null @@ -1,15 +0,0 @@ -.grid { - &.box { - display: flex; - } - - &.vbox { - display: flex; - flex-direction: column; - } - - &.hbox { - display: flex; - flex-direction: row; - } -} diff --git a/src/components/grid/index.js b/src/components/grid/index.js deleted file mode 100644 index 1036bca..0000000 --- a/src/components/grid/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import './grid.scss'; - -import Box from './box'; -import Column from './column'; -import Row from './row'; - -export { Box, Column, Row }; diff --git a/src/components/grid/row.jsx b/src/components/grid/row.jsx deleted file mode 100644 index 36a4f2d..0000000 --- a/src/components/grid/row.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, { PropTypes } from 'react'; - -const Row = ({ children, className }) => ( -
{children}
-); - -Row.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.arrayOf(PropTypes.element) - ]), - className: PropTypes.string -}; - -Row.defaultProps = { - className: '', - children: null -}; - -export default Row; diff --git a/src/components/index.js b/src/components/index.js deleted file mode 100644 index ddadfeb..0000000 --- a/src/components/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import './resets.scss'; - -export { IconButton, Button } from './controls'; -export { Box, Column, Row } from './grid'; -export { Title, Subtitle, Label, Description } from './typography'; diff --git a/src/components/resets.scss b/src/components/resets.scss deleted file mode 100644 index a4a7089..0000000 --- a/src/components/resets.scss +++ /dev/null @@ -1,33 +0,0 @@ -html, -body { - font-family: "Aktiv Grotesk", "Arial", sans-serif; -} - -body, -html, -div, -article, -nav, -footer, -aside, -h1, -h2, -h3, -h4, -h5, -h6, -p, -span { - margin: 0; - border: 0; - padding: 0; - font-size: 100%; -} - -div, -article, -nav, -footer, -aside { - display: flex; -} diff --git a/src/components/typography/description.jsx b/src/components/typography/description.jsx deleted file mode 100644 index 1c1c394..0000000 --- a/src/components/typography/description.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { PropTypes } from 'react'; - -const Description = ({ children, className }) => ( - {children} -); - -Description.propTypes = { - children: PropTypes.string.isRequired, - className: PropTypes.string -}; - -Description.defaultProps = { - className: '' -}; - -export default Description; diff --git a/src/components/typography/index.js b/src/components/typography/index.js deleted file mode 100644 index 52a45b4..0000000 --- a/src/components/typography/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import './typography.scss'; - -import Title from './title'; -import Subtitle from './subtitle'; -import Label from './label'; -import Description from './description'; - -export { Title, Subtitle, Label, Description }; diff --git a/src/components/typography/label.jsx b/src/components/typography/label.jsx deleted file mode 100644 index c9b2a25..0000000 --- a/src/components/typography/label.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { PropTypes } from 'react'; - -const Label = ({ children, className }) => ( - -); - -Label.propTypes = { - children: PropTypes.string.isRequired, - className: PropTypes.string -}; - -Label.defaultProps = { - className: '' -}; - -export default Label; diff --git a/src/components/typography/subtitle.jsx b/src/components/typography/subtitle.jsx deleted file mode 100644 index 0c95ec8..0000000 --- a/src/components/typography/subtitle.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { PropTypes } from 'react'; - -const Subtitle = ({ children, className }) => ( -

{children}

-); - -Subtitle.propTypes = { - children: PropTypes.string.isRequired, - className: PropTypes.string -}; - -Subtitle.defaultProps = { - className: '' -}; - -export default Subtitle; diff --git a/src/components/typography/title.jsx b/src/components/typography/title.jsx deleted file mode 100644 index 2019925..0000000 --- a/src/components/typography/title.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { PropTypes } from 'react'; - -const Title = ({ children, className }) => ( -

{children}

-); - -Title.propTypes = { - children: PropTypes.string.isRequired, - className: PropTypes.string -}; - -Title.defaultProps = { - className: '' -}; - -export default Title; diff --git a/src/components/typography/typography.scss b/src/components/typography/typography.scss deleted file mode 100644 index f23fe48..0000000 --- a/src/components/typography/typography.scss +++ /dev/null @@ -1,17 +0,0 @@ -.typography { - &.title { - font-size: 16pt; - } - - &.subtitle { - font-size: 14pt; - } - - &.label { - font-size: 9pt; - } - - &.description { - font-size: 9pt; - } -} diff --git a/src/index.html b/src/index.html index 6de1522..7a9cb13 100644 --- a/src/index.html +++ b/src/index.html @@ -3,9 +3,10 @@ Web App - + -
This must be World Wide Web!
+
+
This must be World Wide Web!
diff --git a/src/index.jsx b/src/index.jsx index 3930082..6480884 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,9 +1,11 @@ import React from 'react'; import { render } from 'react-dom'; -import App from './app/app'; +import { App } from './app/app'; + +import 'font-awesome/scss/font-awesome.scss'; try { - const appContainer = document.getElementById('app'); + const appContainer = document.getElementById('render-target'); render(, appContainer); } catch (e) { /* eslint-disable no-console */ diff --git a/src/ui/Content/ContactList/ContactList.jsx b/src/ui/Content/ContactList/ContactList.jsx new file mode 100644 index 0000000..3c08552 --- /dev/null +++ b/src/ui/Content/ContactList/ContactList.jsx @@ -0,0 +1,34 @@ +import './ContactList.scss'; +import React, { Component } from 'react'; + +import { ContactListItem } from './ContactListItem/ContactListItem.jsx'; + +export class ContactList extends Component { + render() { + return ( +
+

+ Contact List +

+
+ + + + + + + + + + +
Full NameEmailPhone
+ { [0, 1, 2].map((a) => ( +
{a + 10}
+ )) } + +
+
+ ); + } +} + diff --git a/src/ui/Content/ContactList/ContactList.scss b/src/ui/Content/ContactList/ContactList.scss new file mode 100644 index 0000000..2efccac --- /dev/null +++ b/src/ui/Content/ContactList/ContactList.scss @@ -0,0 +1,19 @@ +.contact-list { + table { + border-collapse: collapse; + width: 100%; + th, td { + text-align: left; + padding: 8px; + } + + tr:nth-child(even){background-color: #f2f2f2} + + th { + background-color: hsla(171,72%,22%,1); + color: white; + } + + } +} + diff --git a/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx b/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx new file mode 100644 index 0000000..3821788 --- /dev/null +++ b/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx @@ -0,0 +1,21 @@ +import './ContactListItem.scss'; +import React, { Component } from 'react'; + +export class ContactListItem extends Component { + render() { + return ( + + { this.props.fullName } + { this.props.email } + { this.props.phone } + { console.log('Editing: ' + this.props.index); } }> + Edit + + { console.log('deleting: ' + this.props.index); } }> + Remove + + + ); + } +} + diff --git a/src/ui/Content/ContactList/ContactListItem/ContactListItem.scss b/src/ui/Content/ContactList/ContactListItem/ContactListItem.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/ui/Content/Content.jsx b/src/ui/Content/Content.jsx new file mode 100644 index 0000000..02da09f --- /dev/null +++ b/src/ui/Content/Content.jsx @@ -0,0 +1,16 @@ +import './Content.scss'; +import React, { Component } from 'react'; + +import { ContactList } from './ContactList/ContactList.jsx'; + +export class Content extends Component { + render() { + return ( +
+ + +
+ ); + } +} + diff --git a/src/ui/Content/Content.scss b/src/ui/Content/Content.scss new file mode 100644 index 0000000..5d6e484 --- /dev/null +++ b/src/ui/Content/Content.scss @@ -0,0 +1,9 @@ +.content { + background-color: hsla(0,0%,80%,1); + + .main-page { + h1 { + text-align: center; + } + } +} diff --git a/src/ui/Header/Header.jsx b/src/ui/Header/Header.jsx new file mode 100644 index 0000000..05eb8e6 --- /dev/null +++ b/src/ui/Header/Header.jsx @@ -0,0 +1,13 @@ +import './Header.scss'; + +import React, { Component } from 'react'; + +export class Header extends Component { + render() { + return ( +
+
+ ); + } +} + diff --git a/src/ui/Header/Header.scss b/src/ui/Header/Header.scss new file mode 100644 index 0000000..5823c11 --- /dev/null +++ b/src/ui/Header/Header.scss @@ -0,0 +1,3 @@ +.header { + background-color: #18917E; +} diff --git a/src/ui/Main.jsx b/src/ui/Main.jsx new file mode 100644 index 0000000..674f910 --- /dev/null +++ b/src/ui/Main.jsx @@ -0,0 +1,29 @@ +import './Main.scss' + +import React, { Component } from 'react'; + +import { NavBar } from './NavBar/NavBar.jsx'; +import { Header } from './Header/Header.jsx'; +import { Content } from './Content/Content.jsx'; + + +export class Main extends Component { + render() { + return ( +
+
+
+ KKVESPER +
+ +
+ +
+
+ +
+
+ ); + } +} + diff --git a/src/ui/Main.scss b/src/ui/Main.scss new file mode 100644 index 0000000..9fe753a --- /dev/null +++ b/src/ui/Main.scss @@ -0,0 +1,40 @@ +.main { + display: flex; + flex-direction: row; + justify-content: space-between; + + .side-part { + display: flex; + flex-direction: column; + flex-basis: 250px; + + .logo { + flex-basis: 50px; + background-color: #18917E; + color: #FEFCFA; + display: flex; + justify-content: center; + align-items: center; + font-size: 26px; + font-weight: bold; + } + .nav-bar { + flex-grow: 1; + } + + } + + .central-part { + display: flex; + flex-direction: column; + flex-grow: 1; + + .header { + flex-basis: 50px; + } + .content { + flex-grow: 1; + } + } +} + diff --git a/src/ui/NavBar/NavBar.jsx b/src/ui/NavBar/NavBar.jsx new file mode 100644 index 0000000..3c98876 --- /dev/null +++ b/src/ui/NavBar/NavBar.jsx @@ -0,0 +1,49 @@ +import './NavBar.scss'; + +import React, { Component } from 'react'; + +export class NavBar extends Component { + + render() { + return ( +
+
+ Navigation +
+
+ +
setCurrentPage('contacts') } > +
+ +
+
+ Contacts +
+
+ + +
setCurrentPage('add-contact') } > +
+ +
+
+ New Contact +
+
+ + +
setCurrentPage('favorites') } > +
+ +
+
+ Favorites +
+
+ +
+
+ ); + } +} + diff --git a/src/ui/NavBar/NavBar.scss b/src/ui/NavBar/NavBar.scss new file mode 100644 index 0000000..52426b0 --- /dev/null +++ b/src/ui/NavBar/NavBar.scss @@ -0,0 +1,25 @@ +.nav-bar { + background-color: #1D1D1B; + color: #FEFCFA; + + .description { + color: hsla(171,72%,23%,1); + margin: 22px 22px; + font-size: 24px; + } + .nav-list { + .nav-item { + display: flex; + flex-direction: row; + padding: 12px 0; + + .icon-part { + flex-basis: 66px; + + i { + margin-left: 22px; + } + } + } + } +} diff --git a/tools/webpack/development.js b/tools/webpack/development.js index e08bbbb..e1dd815 100644 --- a/tools/webpack/development.js +++ b/tools/webpack/development.js @@ -31,8 +31,7 @@ const devConfig = { enforce: 'pre', test: /\.js(x|)$/, loaders: [ - 'babel-loader', - 'eslint-loader' + 'babel-loader' ], exclude: /node_modules/ }, @@ -40,6 +39,12 @@ const devConfig = { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' }, + { + test: /\.css$/, + loaders: ['style-loader', 'css-loader'] + }, + { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader' }, + { test: /\.js(x|)$/, loaders: [ From 6dd9d1a6ce3c2d806f0833e783a340e2fd873ea2 Mon Sep 17 00:00:00 2001 From: Gael Flores Date: Thu, 3 Aug 2017 11:55:56 +0200 Subject: [PATCH 2/6] add, edit, remove --- src/app/app.jsx | 6 +-- src/client/contacts/manage-contacts.js | 21 ++++++++++ src/client/router/change-page.js | 19 +++++++++ src/client/state/manage-state.js | 17 +++++++- src/client/state/setup-state.js | 1 - src/ui/Contact/ContactForm.jsx | 42 +++++++++++++++++++ src/ui/Contact/ContactForm.scss | 30 +++++++++++++ src/ui/Content/ContactList/ContactList.jsx | 34 +++++++++------ src/ui/Content/ContactList/ContactList.scss | 3 ++ .../ContactListItem/ContactListItem.jsx | 11 ++++- src/ui/Content/Content.jsx | 19 ++++++++- src/ui/Content/Content.scss | 5 ++- src/ui/Content/EditContact/EditContact.jsx | 30 +++++++++++++ src/ui/Content/EditContact/EditContact.scss | 4 ++ src/ui/Content/NewContact/NewContact.jsx | 32 ++++++++++++++ src/ui/Content/NewContact/NewContact.scss | 0 src/ui/NavBar/NavBar.jsx | 6 ++- 17 files changed, 255 insertions(+), 25 deletions(-) create mode 100644 src/client/router/change-page.js create mode 100644 src/ui/Contact/ContactForm.jsx create mode 100644 src/ui/Contact/ContactForm.scss create mode 100644 src/ui/Content/EditContact/EditContact.jsx create mode 100644 src/ui/Content/EditContact/EditContact.scss create mode 100644 src/ui/Content/NewContact/NewContact.jsx create mode 100644 src/ui/Content/NewContact/NewContact.scss diff --git a/src/app/app.jsx b/src/app/app.jsx index eed7b6a..188676c 100644 --- a/src/app/app.jsx +++ b/src/app/app.jsx @@ -22,12 +22,12 @@ export class App extends Component { this.setState({isAppMounted: true}); } render() { - return ( this.state.isAppMounted == false ? + return ( this.state.isAppMounted == true ? +
+ :
not mounted bro
- : -
); } } \ No newline at end of file diff --git a/src/client/contacts/manage-contacts.js b/src/client/contacts/manage-contacts.js index e69de29..ae53247 100644 --- a/src/client/contacts/manage-contacts.js +++ b/src/client/contacts/manage-contacts.js @@ -0,0 +1,21 @@ +export const addNewContact = function(contact){ + var contactList = getContactList(); + contactList.push(contact); + setContactList(contactList); +} + +export const editContact = function(index, contact){ + var contactList = getContactList(); + contactList[index] = contact; + setContactList(contactList); +} +export const getContactFromIndex = function(index){ + var contactList = getContactList(); + return contactList[index]; +} + +export const removeContact = function(index){ + var contactList = getContactList(); + contactList.splice(index, 1) + setContactList(contactList); +} \ No newline at end of file diff --git a/src/client/router/change-page.js b/src/client/router/change-page.js new file mode 100644 index 0000000..aaffbea --- /dev/null +++ b/src/client/router/change-page.js @@ -0,0 +1,19 @@ +export const goToHome = function(){ + setCurrentPage('home'); +} + +export const goToContactList = function(){ + setCurrentPage('contact-list'); +} +export const goToEditContact = function(contactIndex){ + setCurrentPage('edit-contact'); + setCurrentlyViewedContact(contactIndex); +} + +export const goToFavoriteList = function(){ + setCurrentPage('favorite-list'); +} + +export const goToAddNewContact = function(){ + setCurrentPage('add-new-contact'); +} diff --git a/src/client/state/manage-state.js b/src/client/state/manage-state.js index ae46d4c..00d06e4 100644 --- a/src/client/state/manage-state.js +++ b/src/client/state/manage-state.js @@ -20,10 +20,20 @@ export const setContactList = function(contactList){ setState({ contactList: contactList }); } -export const getcontactList = function(){ +export const getContactList = function(){ return getState()['contactList']; } +export const setCurrentlyViewedContact = function(index){ + return setState({currentlyViewedContact: index}); +} + +export const getCurrentlyViewedContact = function(){ + return getState()['currentlyViewedContact']; +} + + + window.getState = getState; window.setState = setState; @@ -31,4 +41,7 @@ window.setCurrentPage = setCurrentPage; window.getCurrentPage = getCurrentPage; window.setContactList = setContactList; -window.getcontactList = getcontactList; \ No newline at end of file +window.getContactList = getContactList; + +window.setCurrentlyViewedContact = setCurrentlyViewedContact; +window.getCurrentlyViewedContact = getCurrentlyViewedContact; \ No newline at end of file diff --git a/src/client/state/setup-state.js b/src/client/state/setup-state.js index 67101f0..22da747 100644 --- a/src/client/state/setup-state.js +++ b/src/client/state/setup-state.js @@ -1,7 +1,6 @@ import { setState, getState } from './manage-state.js'; export const setupState = function(){ - setState({}); setCurrentPage('home'); setContactList([ {firstName: "Gael", lastName: "Flores", email: "flores.gael@gmail.com", phone: "0123456789"}, diff --git a/src/ui/Contact/ContactForm.jsx b/src/ui/Contact/ContactForm.jsx new file mode 100644 index 0000000..9b1a3d2 --- /dev/null +++ b/src/ui/Contact/ContactForm.jsx @@ -0,0 +1,42 @@ +import './ContactForm.scss'; +import React, { Component } from 'react'; + +export class ContactForm extends Component { + onSubmit(){ + var newContact = { + firstName: this.refs["firstName"].value, + lastName: this.refs["lastName"].value, + email: this.refs["email"].value, + phone: this.refs["phone"].value + }; + this.props.submitFunc(newContact); + } + + render() { + return ( +
+
+ + + + + + + + + + + + +
+ +
+ ); + } +} + + diff --git a/src/ui/Contact/ContactForm.scss b/src/ui/Contact/ContactForm.scss new file mode 100644 index 0000000..7c962b3 --- /dev/null +++ b/src/ui/Contact/ContactForm.scss @@ -0,0 +1,30 @@ +.contact-form { + + form { + input[type=text] { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + } + label { + color: #106054; + font-weight: bold; + } + } + button.submit { + font-weight: bold; + width: 100%; + background-color: #18917E; + color: white; + padding: 14px 0; + margin-top: 30px; + border: none; + border-radius: 4px; + } + +} + diff --git a/src/ui/Content/ContactList/ContactList.jsx b/src/ui/Content/ContactList/ContactList.jsx index 3c08552..ff0c76d 100644 --- a/src/ui/Content/ContactList/ContactList.jsx +++ b/src/ui/Content/ContactList/ContactList.jsx @@ -4,6 +4,10 @@ import React, { Component } from 'react'; import { ContactListItem } from './ContactListItem/ContactListItem.jsx'; export class ContactList extends Component { + getListItems() { + return getContactList(); + } + render() { return (
@@ -12,23 +16,27 @@ export class ContactList extends Component {
- - - - - - - - - -
Full NameEmailPhone
- { [0, 1, 2].map((a) => ( -
{a + 10}
- )) } + + + Full Name + Email + Phone + + + + + + { this.getListItems().map((contact, index) => ( + + )) } + +
); } } + diff --git a/src/ui/Content/ContactList/ContactList.scss b/src/ui/Content/ContactList/ContactList.scss index 2efccac..92f2660 100644 --- a/src/ui/Content/ContactList/ContactList.scss +++ b/src/ui/Content/ContactList/ContactList.scss @@ -8,6 +8,9 @@ } tr:nth-child(even){background-color: #f2f2f2} + tr:nth-child(odd){background-color: hsla(0,0%,80%,1)} + + th { background-color: hsla(171,72%,22%,1); diff --git a/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx b/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx index 3821788..f1c528f 100644 --- a/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx +++ b/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx @@ -1,17 +1,24 @@ import './ContactListItem.scss'; import React, { Component } from 'react'; +import { removeContact } from '../../../../client/contacts/manage-contacts.js'; +import { goToEditContact } from '../../../../client/router/change-page.js'; + export class ContactListItem extends Component { + removeItem() { + removeContact(this.props.index); + } + render() { return ( { this.props.fullName } { this.props.email } { this.props.phone } - { console.log('Editing: ' + this.props.index); } }> + { goToEditContact(this.props.index); console.log('Editing: ' + this.props.index); } }> Edit - { console.log('deleting: ' + this.props.index); } }> + { this.removeItem(); } }> Remove diff --git a/src/ui/Content/Content.jsx b/src/ui/Content/Content.jsx index 02da09f..15f2364 100644 --- a/src/ui/Content/Content.jsx +++ b/src/ui/Content/Content.jsx @@ -2,13 +2,30 @@ import './Content.scss'; import React, { Component } from 'react'; import { ContactList } from './ContactList/ContactList.jsx'; +import { EditContact } from './EditContact/EditContact.jsx'; +import { NewContact } from './NewContact/NewContact.jsx'; + +import { getContactFromIndex } from '../../client/contacts/manage-contacts.js'; export class Content extends Component { + + getMainContent(){ + switch (getCurrentPage()) { + case "home": + return ; + case "contact-list": + return ; + case "add-new-contact": + return ; + case "edit-contact": + return ; + } + } render() { return (
- + { this.getMainContent() }
); } diff --git a/src/ui/Content/Content.scss b/src/ui/Content/Content.scss index 5d6e484..6ffb937 100644 --- a/src/ui/Content/Content.scss +++ b/src/ui/Content/Content.scss @@ -1,9 +1,12 @@ .content { - background-color: hsla(0,0%,80%,1); + background-color: hsla(0,0%,90%,1); .main-page { h1 { text-align: center; } + .body { + margin: 0 calc(7% - 10px); + } } } diff --git a/src/ui/Content/EditContact/EditContact.jsx b/src/ui/Content/EditContact/EditContact.jsx new file mode 100644 index 0000000..4fe367b --- /dev/null +++ b/src/ui/Content/EditContact/EditContact.jsx @@ -0,0 +1,30 @@ +import './EditContact.scss'; +import React, { Component } from 'react'; + +import { removeContact, getContactFromIndex, editContact } from '../../../client/contacts/manage-contacts.js'; +import { ContactForm } from '../../Contact/ContactForm.jsx'; +import { goToContactList } from '../../../client/router/change-page.js'; + +export class EditContact extends Component { + submitFunc(savedContact) { + editContact(this.props.index, savedContact); + goToContactList(); + } + render() { + return ( +
+

+ { this.props.contact.firstName + ' ' + this.props.contact.lastName } +

+
+ + this.submitFunc(savedContact) } /> +
+
+ ); + } +} + + diff --git a/src/ui/Content/EditContact/EditContact.scss b/src/ui/Content/EditContact/EditContact.scss new file mode 100644 index 0000000..b35a48b --- /dev/null +++ b/src/ui/Content/EditContact/EditContact.scss @@ -0,0 +1,4 @@ +.edit-contact { + +} + diff --git a/src/ui/Content/NewContact/NewContact.jsx b/src/ui/Content/NewContact/NewContact.jsx new file mode 100644 index 0000000..4ac2598 --- /dev/null +++ b/src/ui/Content/NewContact/NewContact.jsx @@ -0,0 +1,32 @@ +import './NewContact.scss'; +import React, { Component } from 'react'; + +import { addNewContact } from '../../../client/contacts/manage-contacts.js'; +import { ContactForm } from '../../Contact/ContactForm.jsx'; +import { goToContactList } from '../../../client/router/change-page.js'; + +export class NewContact extends Component { + submitFunc(savedContact) { + addNewContact(savedContact) + goToContactList(); + console.log('toto'); + } + + render() { + return ( +
+

+ Add New Contact +

+
+ + this.submitFunc(savedContact) } /> + +
+
+ ); + } +} + + diff --git a/src/ui/Content/NewContact/NewContact.scss b/src/ui/Content/NewContact/NewContact.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/ui/NavBar/NavBar.jsx b/src/ui/NavBar/NavBar.jsx index 3c98876..301a9bc 100644 --- a/src/ui/NavBar/NavBar.jsx +++ b/src/ui/NavBar/NavBar.jsx @@ -2,6 +2,8 @@ import './NavBar.scss'; import React, { Component } from 'react'; +import { goToContactList, goToAddNewContact} from '../../client/router/change-page.js'; + export class NavBar extends Component { render() { @@ -12,7 +14,7 @@ export class NavBar extends Component {
-
setCurrentPage('contacts') } > +
goToContactList() } >
@@ -22,7 +24,7 @@ export class NavBar extends Component {
-
setCurrentPage('add-contact') } > +
goToAddNewContact() } >
From 88c53b0cd5653f70a18f713d79ae5bdc72a18161 Mon Sep 17 00:00:00 2001 From: Gael Flores Date: Thu, 3 Aug 2017 12:31:21 +0200 Subject: [PATCH 3/6] can toggle favorites --- src/client/contacts/manage-contacts.js | 19 ++++++++++++++----- src/client/state/setup-state.js | 6 +++--- src/ui/Content/ContactList/ContactList.jsx | 4 ++-- .../ContactListItem/ContactListItem.jsx | 13 ++++++++++--- .../ContactListItem/ContactListItem.scss | 9 +++++++++ 5 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/client/contacts/manage-contacts.js b/src/client/contacts/manage-contacts.js index ae53247..cf910f1 100644 --- a/src/client/contacts/manage-contacts.js +++ b/src/client/contacts/manage-contacts.js @@ -1,21 +1,30 @@ export const addNewContact = function(contact){ - var contactList = getContactList(); + var contactList = getState()['contactList']; contactList.push(contact); setContactList(contactList); } export const editContact = function(index, contact){ - var contactList = getContactList(); + var contactList = getState()['contactList']; contactList[index] = contact; setContactList(contactList); } export const getContactFromIndex = function(index){ - var contactList = getContactList(); + var contactList = getState()['contactList']; return contactList[index]; } export const removeContact = function(index){ - var contactList = getContactList(); + var contactList = getState()['contactList']; contactList.splice(index, 1) setContactList(contactList); -} \ No newline at end of file +} + +export const toggleContactFavorite = function(index){ + var contactList = getState()['contactList']; + var contact = contactList[index]; + + contact.isFavorite = !contact.isFavorite; + contactList[index] = contact; + setContactList(contactList); +} diff --git a/src/client/state/setup-state.js b/src/client/state/setup-state.js index 22da747..56336b5 100644 --- a/src/client/state/setup-state.js +++ b/src/client/state/setup-state.js @@ -3,8 +3,8 @@ import { setState, getState } from './manage-state.js'; export const setupState = function(){ setCurrentPage('home'); setContactList([ - {firstName: "Gael", lastName: "Flores", email: "flores.gael@gmail.com", phone: "0123456789"}, - {firstName: "Alberto", lastName: "Ronaldo", email: "alberto@gmail.com", phone: "17176789"}, - {firstName: "Toto", lastName: "Tata", email: "toto@gmail.com", phone: "0101010101"} + {firstName: "Gael", lastName: "Flores", email: "flores.gael@gmail.com", phone: "0123456789", isFavorite: true}, + {firstName: "Alberto", lastName: "Ronaldo", email: "alberto@gmail.com", phone: "17176789", isFavorite: false}, + {firstName: "Toto", lastName: "Tata", email: "toto@gmail.com", phone: "0101010101", isFavorite: true} ]); }; \ No newline at end of file diff --git a/src/ui/Content/ContactList/ContactList.jsx b/src/ui/Content/ContactList/ContactList.jsx index ff0c76d..41be34b 100644 --- a/src/ui/Content/ContactList/ContactList.jsx +++ b/src/ui/Content/ContactList/ContactList.jsx @@ -5,7 +5,7 @@ import { ContactListItem } from './ContactListItem/ContactListItem.jsx'; export class ContactList extends Component { getListItems() { - return getContactList(); + return getState()['contactList']; } render() { @@ -28,7 +28,7 @@ export class ContactList extends Component { { this.getListItems().map((contact, index) => ( + phone={ contact.phone } index={ index } isFavorite={ contact.isFavorite } key={ index }/> )) } diff --git a/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx b/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx index f1c528f..02970b9 100644 --- a/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx +++ b/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx @@ -1,7 +1,7 @@ import './ContactListItem.scss'; import React, { Component } from 'react'; -import { removeContact } from '../../../../client/contacts/manage-contacts.js'; +import { removeContact, toggleContactFavorite } from '../../../../client/contacts/manage-contacts.js'; import { goToEditContact } from '../../../../client/router/change-page.js'; export class ContactListItem extends Component { @@ -11,8 +11,15 @@ export class ContactListItem extends Component { render() { return ( - - { this.props.fullName } + + + { this.props.isFavorite ? + + : + + } + { this.props.fullName } + { this.props.email } { this.props.phone } { goToEditContact(this.props.index); console.log('Editing: ' + this.props.index); } }> diff --git a/src/ui/Content/ContactList/ContactListItem/ContactListItem.scss b/src/ui/Content/ContactList/ContactListItem/ContactListItem.scss index e69de29..2fec75a 100644 --- a/src/ui/Content/ContactList/ContactListItem/ContactListItem.scss +++ b/src/ui/Content/ContactList/ContactListItem/ContactListItem.scss @@ -0,0 +1,9 @@ +.contact-list-item { + .favorite-icon { + color: #106054; + font-size: 20px; + margin-right: 4px; + cursor: pointer; + } +} + From 7ec57e0d1e4edaf718dbbc8a708cc701fa892225 Mon Sep 17 00:00:00 2001 From: Gael Flores Date: Thu, 3 Aug 2017 12:53:41 +0200 Subject: [PATCH 4/6] list favorite --- .../ContactListItem/ContactListItem.jsx | 10 +++-- src/ui/Content/Content.jsx | 3 ++ src/ui/Content/FavoriteList/FavoriteList.jsx | 41 +++++++++++++++++++ src/ui/NavBar/NavBar.jsx | 4 +- 4 files changed, 53 insertions(+), 5 deletions(-) create mode 100644 src/ui/Content/FavoriteList/FavoriteList.jsx diff --git a/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx b/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx index 02970b9..87f7f99 100644 --- a/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx +++ b/src/ui/Content/ContactList/ContactListItem/ContactListItem.jsx @@ -13,10 +13,14 @@ export class ContactListItem extends Component { return ( - { this.props.isFavorite ? - + { this.props.noFavoriteIcon == true ? + null : - + ( this.props.isFavorite ? + + : + + ) } { this.props.fullName } diff --git a/src/ui/Content/Content.jsx b/src/ui/Content/Content.jsx index 15f2364..5bdc345 100644 --- a/src/ui/Content/Content.jsx +++ b/src/ui/Content/Content.jsx @@ -4,6 +4,7 @@ import React, { Component } from 'react'; import { ContactList } from './ContactList/ContactList.jsx'; import { EditContact } from './EditContact/EditContact.jsx'; import { NewContact } from './NewContact/NewContact.jsx'; +import { FavoriteList } from './FavoriteList/FavoriteList.jsx'; import { getContactFromIndex } from '../../client/contacts/manage-contacts.js'; @@ -19,6 +20,8 @@ export class Content extends Component { return ; case "edit-contact": return ; + case "favorite-list": + return ; } } render() { diff --git a/src/ui/Content/FavoriteList/FavoriteList.jsx b/src/ui/Content/FavoriteList/FavoriteList.jsx new file mode 100644 index 0000000..e38a04c --- /dev/null +++ b/src/ui/Content/FavoriteList/FavoriteList.jsx @@ -0,0 +1,41 @@ +import React, { Component } from 'react'; + +import { ContactListItem } from '../ContactList/ContactListItem/ContactListItem.jsx'; + +export class FavoriteList extends Component { + getListItems() { + return getState()['contactList'].filter((contact) => contact.isFavorite == true); + } + + render() { + return ( +
+

+ My Favorites +

+
+ + + + + + + + + + + + { this.getListItems().map((contact, index) => ( + + )) } + + +
Full NameEmailPhone
+
+
+ ); + } +} + + diff --git a/src/ui/NavBar/NavBar.jsx b/src/ui/NavBar/NavBar.jsx index 301a9bc..016871d 100644 --- a/src/ui/NavBar/NavBar.jsx +++ b/src/ui/NavBar/NavBar.jsx @@ -2,7 +2,7 @@ import './NavBar.scss'; import React, { Component } from 'react'; -import { goToContactList, goToAddNewContact} from '../../client/router/change-page.js'; +import { goToContactList, goToAddNewContact, goToFavoriteList } from '../../client/router/change-page.js'; export class NavBar extends Component { @@ -34,7 +34,7 @@ export class NavBar extends Component {
-
setCurrentPage('favorites') } > +
goToFavoriteList() } >
From 30b7ded0a9f7ad30dfb009725d47d30ba6fe1d31 Mon Sep 17 00:00:00 2001 From: Gael Flores Date: Thu, 3 Aug 2017 13:05:47 +0200 Subject: [PATCH 5/6] finished --- package.json | 3 ++- src/client/setup.js | 2 -- src/index.html | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 7eacdeb..4150c2d 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "webpack": "^3.3.0", "webpack-dev-middleware": "^1.6.1", "webpack-dev-server": "^2.5.1", - "webpack-hot-middleware": "^2.10.0" + "webpack-hot-middleware": "^2.10.0", + "font-awesome": "^4.7.0" }, "devDependencies": { "babel-eslint": "^7.2.3", diff --git a/src/client/setup.js b/src/client/setup.js index 36eb96a..797a8c5 100644 --- a/src/client/setup.js +++ b/src/client/setup.js @@ -1,7 +1,5 @@ import { setupState } from './state/setup-state.js'; -import { setupData } from './data/setup-data.js'; export const setup = function(){ setupState(); - setupData(); } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 7a9cb13..1a542ff 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,6 @@
-
This must be World Wide Web!
+
From bc2fb867f7f86b81fdfeaed2e529ea70c4bc078e Mon Sep 17 00:00:00 2001 From: Gael Flores Date: Thu, 3 Aug 2017 22:50:58 +0200 Subject: [PATCH 6/6] oops ! favorite list bug fixed --- src/ui/Content/FavoriteList/FavoriteList.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/ui/Content/FavoriteList/FavoriteList.jsx b/src/ui/Content/FavoriteList/FavoriteList.jsx index e38a04c..09b8c24 100644 --- a/src/ui/Content/FavoriteList/FavoriteList.jsx +++ b/src/ui/Content/FavoriteList/FavoriteList.jsx @@ -4,7 +4,10 @@ import { ContactListItem } from '../ContactList/ContactListItem/ContactListItem. export class FavoriteList extends Component { getListItems() { - return getState()['contactList'].filter((contact) => contact.isFavorite == true); + return getState()['contactList'].map((contact, index) => { + contact.index = index; + return contact; + }).filter((contact) => contact.isFavorite == true); } render() { @@ -25,9 +28,9 @@ export class FavoriteList extends Component { - { this.getListItems().map((contact, index) => ( + { this.getListItems().map((contact) => ( + phone={ contact.phone } index={ contact.index } noFavoriteIcon={ true } key={ contact.index }/> )) }