From 5bb386e16aea5c47858ce60836333f3380cb8723 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 28 Nov 2016 14:25:30 -0300
Subject: [PATCH] Structure

---
 .../coral-embed-stream/src/CommentStream.js   |  3 +-
 client/coral-framework/actions/embedStream.js | 15 +++++++
 client/coral-settings/components/Bio.css      | 21 +++++++++
 client/coral-settings/components/Bio.js       | 16 +++++++
 .../components/SettingsHeader.css             |  8 ++++
 .../components/SettingsHeader.js              | 10 +++++
 .../containers/SettingsContainer.js           | 45 +++++++++++++++++++
 client/coral-settings/index.js                |  0
 client/coral-settings/translations.js         |  0
 .../coral-sign-in/components/ForgotContent.js |  2 +-
 .../coral-sign-in/components/SignInContent.js |  4 +-
 .../coral-sign-in/components/SignUpContent.js |  4 +-
 .../containers/SignInContainer.js             |  2 +-
 client/coral-ui/components/Button.css         | 35 +++++++++++++--
 client/coral-ui/components/Button.js          | 10 ++++-
 client/coral-ui/components/Tab.css            | 20 ++-------
 client/coral-ui/components/Tab.js             |  4 +-
 client/coral-ui/components/TabBar.css         | 37 +++++++++++++++
 client/coral-ui/components/TabBar.js          | 20 ++++-----
 client/coral-ui/index.js                      |  1 +
 20 files changed, 217 insertions(+), 40 deletions(-)
 create mode 100644 client/coral-settings/components/Bio.css
 create mode 100644 client/coral-settings/components/Bio.js
 create mode 100644 client/coral-settings/components/SettingsHeader.css
 create mode 100644 client/coral-settings/components/SettingsHeader.js
 create mode 100644 client/coral-settings/containers/SettingsContainer.js
 create mode 100644 client/coral-settings/index.js
 create mode 100644 client/coral-settings/translations.js

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index 89e5e82c6..b78e15492 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -21,6 +21,7 @@ import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
 import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
 import UserBox from '../../coral-sign-in/components/UserBox';
 import {TabBar, Tab, ContentBox} from '../../coral-ui';
+import SettingsContainer from '../../coral-settings/containers/SettingsContainer';
 
 const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions;
 const {addNotification, clearNotification} = notificationActions;
@@ -232,7 +233,7 @@ class CommentStream extends Component {
             />
           </ContentBox>
           <ContentBox>
-            Bio!
+            <SettingsContainer/>
           </ContentBox>
         </div>
         : 'Loading'
diff --git a/client/coral-framework/actions/embedStream.js b/client/coral-framework/actions/embedStream.js
index 0452d8a9c..d474b0af0 100644
--- a/client/coral-framework/actions/embedStream.js
+++ b/client/coral-framework/actions/embedStream.js
@@ -1,3 +1,4 @@
+import {base, handleResp, getInit} from '../helpers/response';
 import * as actions from '../constants/embedStream';
 
 export const changeTab = view => dispatch =>
@@ -5,3 +6,17 @@ export const changeTab = view => dispatch =>
     type: actions.CHANGE_TAB,
     view
   });
+
+const userBioRequest = () => ({type: actions.FETCH_USER_BIO_REQUEST});
+const userBioSuccess = userBio => ({type: actions.FETCH_USER_BIO_SUCCESS, userBio});
+const userBioFailure = error => ({type: actions.FETCH_USER_BIO_FAILURE, error});
+
+export const fetchUserBio = () => dispatch => {
+  dispatch(userBioRequest());
+  fetch(`${base}/bio`, getInit('GET'))
+    .then(handleResp)
+    .then(({bio}) => {
+      dispatch(userBioSuccess(bio));
+    })
+    .catch(() => dispatch(userBioFailure()));
+};
diff --git a/client/coral-settings/components/Bio.css b/client/coral-settings/components/Bio.css
new file mode 100644
index 000000000..8c36b989d
--- /dev/null
+++ b/client/coral-settings/components/Bio.css
@@ -0,0 +1,21 @@
+.bio textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 2px;
+  min-height: 100px;
+  margin: 10px 0;
+  border: solid 1px #d8d8d8;
+}
+
+.bio h1 {
+  font-size: 16px;
+  margin: 3px 0;
+}
+
+.bio p {
+  margin: 3px 0;
+}
+
+.actions {
+  text-align: right;
+}
diff --git a/client/coral-settings/components/Bio.js b/client/coral-settings/components/Bio.js
new file mode 100644
index 000000000..b82587322
--- /dev/null
+++ b/client/coral-settings/components/Bio.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './Bio.css';
+import {Button} from '../../coral-ui';
+
+export default () => (
+  <div className={styles.bio}>
+    <h1>Bio</h1>
+    <p>Tell the community about yourself</p>
+    <textarea />
+    <div className={styles.actions}>
+      <Button cStyle='cancel' raised>Cancel</Button>
+      <Button cStyle='success'>Save Changes</Button>
+    </div>
+  </div>
+);
+
diff --git a/client/coral-settings/components/SettingsHeader.css b/client/coral-settings/components/SettingsHeader.css
new file mode 100644
index 000000000..f97c4731e
--- /dev/null
+++ b/client/coral-settings/components/SettingsHeader.css
@@ -0,0 +1,8 @@
+.header h1 {
+  margin: 4px 0;
+}
+
+.header h2 {
+  font-size: 13px;
+}
+
diff --git a/client/coral-settings/components/SettingsHeader.js b/client/coral-settings/components/SettingsHeader.js
new file mode 100644
index 000000000..24d68af9a
--- /dev/null
+++ b/client/coral-settings/components/SettingsHeader.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './SettingsHeader.css';
+
+export default () => (
+  <div className={styles.header}>
+    <h1>Jackson</h1>
+    <h2>jackson_persona@gmail.com</h2>
+  </div>
+);
+
diff --git a/client/coral-settings/containers/SettingsContainer.js b/client/coral-settings/containers/SettingsContainer.js
new file mode 100644
index 000000000..2b2c3cd33
--- /dev/null
+++ b/client/coral-settings/containers/SettingsContainer.js
@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+
+import {} from '../../coral-framework/actions/embedStream';
+import {TabBar, Tab} from '../../coral-ui';
+
+import Bio from '../components/Bio';
+import SettingsHeader from '../components/SettingsHeader';
+
+class SignInContainer extends Component {
+  componentWillMount () {
+    // Get Bio
+    // Fetch commentHistory
+  }
+
+  render() {
+    //const {embedStream} = this.props;
+    return (
+      <div>
+        <SettingsHeader />
+        <TabBar cStyle='material'>
+          <Tab>All Comments (120)</Tab>
+          <Tab>Profile Settings</Tab>
+        </TabBar>
+        <Bio {...this.props}/>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  embedStream: state.embedStream.toJS()
+});
+
+const mapDispatchToProps = dispatch => ({
+  getBio: () => dispatch(),
+  getHistory: () => dispatch(),
+  handleSaveChanges: () => dispatch(),
+  handleCancel: () => dispatch()
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SignInContainer);
diff --git a/client/coral-settings/index.js b/client/coral-settings/index.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-settings/translations.js b/client/coral-settings/translations.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-sign-in/components/ForgotContent.js b/client/coral-sign-in/components/ForgotContent.js
index c9a99f6d7..bc06ae5f1 100644
--- a/client/coral-sign-in/components/ForgotContent.js
+++ b/client/coral-sign-in/components/ForgotContent.js
@@ -34,7 +34,7 @@ class ForgotContent extends React.Component {
               id="email"
               name="email" />
           </div>
-          <Button type="submit" cStyle="black" className={styles.signInButton}>
+          <Button type="submit" cStyle="black" className={styles.signInButton} full>
             {lang.t('signIn.recoverPassword')}
           </Button>
           {
diff --git a/client/coral-sign-in/components/SignInContent.js b/client/coral-sign-in/components/SignInContent.js
index 76a93f56c..395800e6c 100644
--- a/client/coral-sign-in/components/SignInContent.js
+++ b/client/coral-sign-in/components/SignInContent.js
@@ -16,7 +16,7 @@ const SignInContent = ({handleChange, formData, ...props}) => (
       </h1>
     </div>
     <div className={styles.socialConnections}>
-      <Button cStyle="facebook" onClick={props.fetchSignInFacebook}>
+      <Button cStyle="facebook" onClick={props.fetchSignInFacebook} full>
         {lang.t('signIn.facebookSignIn')}
       </Button>
     </div>
@@ -44,7 +44,7 @@ const SignInContent = ({handleChange, formData, ...props}) => (
       <div className={styles.action}>
         {
           !props.auth.isLoading ?
-          <Button type="submit" cStyle="black" className={styles.signInButton}>
+          <Button type="submit" cStyle="black" className={styles.signInButton} full>
             {lang.t('signIn.signIn')}
           </Button>
           :
diff --git a/client/coral-sign-in/components/SignUpContent.js b/client/coral-sign-in/components/SignUpContent.js
index 478971556..38fa554fe 100644
--- a/client/coral-sign-in/components/SignUpContent.js
+++ b/client/coral-sign-in/components/SignUpContent.js
@@ -17,7 +17,7 @@ const SignUpContent = ({handleChange, formData, ...props}) => (
       </h1>
     </div>
     <div className={styles.socialConnections}>
-      <Button cStyle="facebook" onClick={props.fetchSignInFacebook}>
+      <Button cStyle="facebook" onClick={props.fetchSignInFacebook} full>
         {lang.t('signIn.facebookSignUp')}
       </Button>
     </div>
@@ -69,7 +69,7 @@ const SignUpContent = ({handleChange, formData, ...props}) => (
       />
       <div className={styles.action}>
         { !props.auth.isLoading && !props.auth.successSignUp && (
-          <Button type="submit" cStyle="black" className={styles.signInButton}>
+          <Button type="submit" cStyle="black" className={styles.signInButton} full>
             {lang.t('signIn.signUp')}
           </Button>
         )}
diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js
index 3e666948a..c2b8c7836 100644
--- a/client/coral-sign-in/containers/SignInContainer.js
+++ b/client/coral-sign-in/containers/SignInContainer.js
@@ -132,7 +132,7 @@ class SignInContainer extends Component {
     const {auth, showSignInDialog} = this.props;
     return (
       <div>
-        <Button onClick={showSignInDialog}>
+        <Button onClick={showSignInDialog} full>
           Sign in to comment
         </Button>
         <SignDialog
diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css
index 150f1df7b..d03a34713 100644
--- a/client/coral-ui/components/Button.css
+++ b/client/coral-ui/components/Button.css
@@ -23,8 +23,7 @@
     text-align: center;
     line-height: 36px;
     vertical-align: middle;
-    width: 100%;
-    margin: 0;
+    margin: 2px;
 }
 
 .type--black {
@@ -46,4 +45,34 @@
 .type--facebook:hover {
     background-color: #365899;
     border-color: #365899;
-}
\ No newline at end of file
+}
+
+.type--success {
+  color: white;
+  background: #2376d8;
+}
+
+.type--success:hover {
+  color: white;
+  background: #2782ee;
+}
+
+.type--cancel {
+  color: white;
+  background: #2E343B;
+}
+
+.type--cancel:hover {
+  color: white;
+  background: #4f5c67;
+}
+
+.full {
+  width: 100%;
+  margin: 0;
+}
+
+.raised {
+  background: rgba(158,158,158,.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+}
diff --git a/client/coral-ui/components/Button.js b/client/coral-ui/components/Button.js
index 13ea46349..44e728f51 100644
--- a/client/coral-ui/components/Button.js
+++ b/client/coral-ui/components/Button.js
@@ -1,9 +1,15 @@
 import React from 'react';
 import styles from './Button.css';
 
-const Button = ({cStyle = 'local', children, className, ...props}) => (
+const Button = ({cStyle = 'local', children, className, raised, full, ...props}) => (
   <button
-    className={`${styles.button} ${styles[`type--${cStyle}`]} ${className}`}
+    className={`
+      ${styles.button}
+      ${styles[`type--${cStyle}`]}
+      ${className}
+      ${full && styles.full}
+      ${raised && styles.button}
+    `}
     {...props}
   >
     {children}
diff --git a/client/coral-ui/components/Tab.css b/client/coral-ui/components/Tab.css
index 4acff0333..dfd8d65f1 100644
--- a/client/coral-ui/components/Tab.css
+++ b/client/coral-ui/components/Tab.css
@@ -1,20 +1,8 @@
-.active {
-  background: #F0F0F0;
-}
-
-.base {
-  color: #4E5259;
-  border: solid 1px #D8D8D8;
+li.base--active {
   background: white;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  display: inline-block;
-  border-bottom: none;
-  padding: 8px 10px;
-  margin-right: -1px;
 }
 
-.base:hover {
-  background: #f3f3f3;
-  cursor: pointer;
+li.material--active {
+  font-weight: bold;
+  border-bottom: solid 2px black;
 }
diff --git a/client/coral-ui/components/Tab.js b/client/coral-ui/components/Tab.js
index baff8358a..09b4da4d3 100644
--- a/client/coral-ui/components/Tab.js
+++ b/client/coral-ui/components/Tab.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from './Tab.css';
 
-export default ({children, tabId, active, onTabClick}) => (
+export default ({children, tabId, active, onTabClick, cStyle = 'base'}) => (
   <li
     key={tabId}
-    className={`${styles.base} ${active && styles.active}`}
+    className={active ? styles[`${cStyle}--active`] : ''}
     onClick={onTabClick}
   >
     {children}
diff --git a/client/coral-ui/components/TabBar.css b/client/coral-ui/components/TabBar.css
index e006c8e31..bb00a22c5 100644
--- a/client/coral-ui/components/TabBar.css
+++ b/client/coral-ui/components/TabBar.css
@@ -3,3 +3,40 @@
   border-bottom: solid 1px #D8D8D8;
   padding: 0;
 }
+
+.base li {
+  color: #4E5259;
+  border: solid 1px #D8D8D8;
+  background: #F0F0F0;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  display: inline-block;
+  border-bottom: none;
+  padding: 8px 10px;
+  margin-right: -1px;
+}
+
+.base li:hover {
+  background: #f3f3f3;
+  cursor: pointer;
+}
+
+.material {
+  list-style: none;
+  border: none;
+  padding: 0;
+}
+
+.material li {
+  color: black;
+  border: none;
+  border-bottom: solid 2px white;
+  background: white;
+  padding: 8px 0;
+  margin-right: 40px;
+}
+
+.material li:hover {
+  background: white;
+  border-bottom: solid 2px grey;
+}
diff --git a/client/coral-ui/components/TabBar.js b/client/coral-ui/components/TabBar.js
index 759825c11..73abd7386 100644
--- a/client/coral-ui/components/TabBar.js
+++ b/client/coral-ui/components/TabBar.js
@@ -12,18 +12,18 @@ export class TabBar extends React.Component {
   }
 
   render() {
-    const {children, activeTab = 0} = this.props;
-
+    const {children, activeTab = 0, cStyle = 'base'} = this.props;
     return (
       <div>
-        <ul className={styles.base}>
-        {React.Children.map(children, (child, tabId) =>
-          React.cloneElement(child, {
-            tabId,
-            active: tabId === activeTab,
-            onTabClick: this.handleClickTab,
-          })
-        )}
+        <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''}`}>
+          {React.Children.map(children, (child, tabId) =>
+            React.cloneElement(child, {
+              tabId,
+              active: tabId === activeTab,
+              onTabClick: this.handleClickTab,
+              cStyle
+            })
+          )}
         </ul>
       </div>
     );
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 9d13057ce..95600ddfb 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -4,3 +4,4 @@ export {default as FabButton} from './components/FabButton';
 export {default as TabBar} from './components/TabBar';
 export {default as Tab} from './components/Tab';
 export {default as ContentBox} from './components/ContentBox';
+export {default as Button} from './components/Button';