Merge pull request #4 from abraha2d/dev

Release v0.2.0

Author: abraha2d

src/containers/HomePage/index.js

@@ -8,6 +8,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { compose } from "redux";
+import { createStructuredSelector } from "reselect";
 import { Route, Switch } from "react-router-dom";
 import { push } from "connected-react-router/immutable";
 
@@ -33,9 +34,13 @@ import {
   Settings as SettingsIcon
 } from "@material-ui/icons";
 
+import makeSelectAuth from "containers/LoginPage/selectors";
+
 import Subscriptions from "containers/Subscriptions";
+import ProfilePage from "containers/ProfilePage";
 import Settings from "containers/Settings";
 import NotFoundPage from "containers/NotFoundPage";
+
 import LogoutButton from "containers/LoginPage/ConnectedLogoutButton";
 import UserListItem from "components/UserListItem";
 
@@ -182,6 +187,7 @@ class HomePage extends React.PureComponent {
           <div className={classes.toolbar} />
           <Switch>
             <Route exact path="/" component={Subscriptions} />
+            <Route exact path="/profile" component={ProfilePage} />
             <Route exact path="/settings" component={Settings} />
             <Route component={NotFoundPage} />
           </Switch>
@@ -198,14 +204,9 @@ HomePage.propTypes = {
   auth: PropTypes.object
 };
 
-const mapStateToProps = state => {
-  let location = state.getIn(["router", "location"]).toJS();
-  if (location.location) {
-    location = location.location;
-  }
-  const auth = state.get("auth").toJS();
-  return { location, auth };
-};
+const mapStateToProps = createStructuredSelector({
+  auth: makeSelectAuth()
+});
 
 const withConnect = connect(mapStateToProps);
 

src/containers/NotFoundPage/index.js

@@ -6,7 +6,6 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 
 import { Typography } from "@material-ui/core";
 
@@ -23,12 +22,4 @@ NotFoundPage.propTypes = {
   location: PropTypes.object.isRequired
 };
 
-const mapStateToProps = state => {
-  let location = state.getIn(["router", "location"]).toJS();
-  if (location.location) {
-    location = location.location;
-  }
-  return { location };
-};
-
-export default connect(mapStateToProps)(NotFoundPage);
+export default NotFoundPage;

src/containers/ProfilePage/index.js

@@ -0,0 +1,110 @@
+/**
+ *
+ * ProfilePage
+ *
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { compose } from "redux";
+import { createStructuredSelector } from "reselect";
+
+import {
+  Avatar,
+  Button,
+  TextField,
+  Typography,
+  withStyles
+} from "@material-ui/core";
+
+import makeSelectAuth from "containers/LoginPage/selectors";
+
+const styles = theme => ({
+  container: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  centerAvatar: {
+    width: "96px",
+    height: "96px",
+    alignSelf: "center"
+  },
+  content: {
+    padding: `${theme.spacing.unit}px`
+  },
+  actions: {
+    padding: `${theme.spacing.unit}px`,
+    textAlign: "end"
+  }
+});
+
+export class ProfilePage extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = { ...props.auth.user };
+  }
+
+  handleChange = name => event => {
+    const value = event.target.value;
+    this.setState({ [name]: value });
+  };
+
+  handleSave = event => {
+    event.preventDefault();
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.container}>
+        <Typography variant="title">Profile</Typography>
+        <Avatar
+          src={this.props.auth.user.picture}
+          className={classes.centerAvatar}
+        />
+        <form onSubmit={this.handleSave}>
+          <div className={classes.content}>
+            <TextField
+              label="Name"
+              required
+              fullWidth
+              margin="dense"
+              value={this.state.name}
+              onChange={this.handleChange("name")}
+            />
+            <TextField
+              label="Email"
+              type="email"
+              required
+              fullWidth
+              margin="dense"
+              value={this.state.email}
+              onChange={this.handleChange("email")}
+            />
+          </div>
+          <div className={classes.actions}>
+            <Button variant="contained" color="primary" type="submit">
+              Save
+            </Button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+ProfilePage.propTypes = {
+  auth: PropTypes.object.isRequired
+};
+
+const mapStateToProps = createStructuredSelector({
+  auth: makeSelectAuth()
+});
+
+const withConnect = connect(mapStateToProps);
+
+export default compose(
+  withConnect,
+  withStyles(styles)
+)(ProfilePage);