Merge pull request #88 from ClaytonWWilson/user_page

User page

functions/handlers/topic.js

@@ -58,3 +58,16 @@ exports.deleteTopic = (req, res) => {
       return res.status(500).json({ error: "Failed to delete topic." });
     });
 };
+
+exports.getUserTopics = (req, res) => {
+  let data = [];
+  db.doc(`/users/${req.body.handle}`)
+    .get()
+    .then(doc => {
+      data = doc.data().followedTopics;
+      return res.status(200).json({ data });
+    })
+    .catch(err => {
+      return res.status(500).json({ err });
+    });
+};

functions/handlers/users.js

@@ -450,6 +450,7 @@ exports.addSubscription = (req, res) => {
       .catch(err => {
         return res.status(500).json({ err });
       });
+    return res.status(500).json({ error: "shouldn't execute" });
   });
 };
 
@@ -489,5 +490,6 @@ exports.removeSub = (req, res) => {
       .catch(err => {
         return res.status(500).json({ err });
       });
+    return res.status(500).json({ error: "shouldn't execute" });
   });
 };

functions/index.js

@@ -37,7 +37,7 @@ app.post("/login", login);
 //Deletes user account
 app.delete("/delete", fbAuth, deleteUser);
 
-app.get("/getUser", fbAuth, getUserDetails);
+app.post("/getUserDetails", fbAuth, getUserDetails);
 
 // Returns all profile data of the currently logged in user
 app.get("/getProfileInfo", fbAuth, getProfileInfo);
@@ -65,7 +65,7 @@ app.get("/getSubs", fbAuth, getSubs);
 app.post("/addSubscription", fbAuth, addSubscription);
 
 // remove one subscription
-app.delete("/removeSub", fbAuth, removeSub);
+app.post("/removeSub", fbAuth, removeSub);
 
 /*------------------------------------------------------------------*
  *  handlers/post.js                                                *
@@ -82,7 +82,12 @@ app.post("/putPost", fbAuth, putPost);
 /*------------------------------------------------------------------*
  *  handlers/topic.js                                                *
  *------------------------------------------------------------------*/
-const { putTopic, getAllTopics, deleteTopic } = require("./handlers/topic");
+const {
+  putTopic,
+  getAllTopics,
+  deleteTopic,
+  getUserTopics
+} = require("./handlers/topic");
 
 // add topic to database
 app.post("/putTopic", fbAuth, putTopic);
@@ -93,4 +98,7 @@ app.get("/getAllTopics", fbAuth, getAllTopics);
 // delete a specific topic
 app.delete("/deleteTopic/:topicId", fbAuth, deleteTopic);
 
+// get topic for this user
+app.post("/getUserTopics", fbAuth, getUserTopics);
+
 exports.api = functions.https.onRequest(app);

twistter-frontend/src/App.js

@@ -19,8 +19,6 @@ import { logoutUser, getUserData } from "./redux/actions/userActions";
 // Components
 import AuthRoute from "./util/AuthRoute";
 
-// axios.defaults.baseURL = 'http://localhost:5006/twistter-e4649/us-central1/api';
-
 // Pages
 import home from "./pages/Home";
 import signup from "./pages/Signup";
@@ -33,6 +31,7 @@ import editProfile from "./pages/editProfile";
 import userLine from "./Userline.js";
 import verify from "./pages/verify";
 import Search from "./pages/Search.js";
+import otherUser from "./pages/otherUser";
 
 const theme = createMuiTheme(themeObject);
 
@@ -65,11 +64,10 @@ class App extends Component {
             </div>
             <div className="app">
               <Switch>
-
                 {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
                 <AuthRoute exact path="/signup" component={signup} />
                 <AuthRoute exact path="/login" component={login} />
-                <AuthRoute exact path="/" component={home}/>
+                <AuthRoute exact path="/" component={home} />
 
                 <Route exact path="/logout" component={logout} />
                 <Route exact path="/delete" component={Delete} />
@@ -77,11 +75,11 @@ class App extends Component {
                 <Route exact path="/home" component={home} />
                 <Route exact path="/user" component={user} />
                 <Route exact path="/edit" component={editProfile} />
-                <Route exact path="/verify" component={verify}/>
+                <Route exact path="/verify" component={verify} />
                 <Route exact path="/search" component={Search} />
+                <Route exact path="/user/:userhandle" component={otherUser} />
 
                 <AuthRoute exact path="/" component={home} />
-
               </Switch>
             </div>
           </Router>

twistter-frontend/src/pages/otherUser.js

@@ -0,0 +1,158 @@
+/* eslint-disable */
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import axios from "axios";
+//import '../App.css';
+
+// Material UI and React Router
+import { makeStyles, styled } from "@material-ui/core/styles";
+import { Link } from "react-router-dom";
+import Card from "@material-ui/core/Card";
+import CardMedia from "@material-ui/core/CardMedia";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Grid from "@material-ui/core/Grid";
+
+import Chip from "@material-ui/core/Chip";
+import Typography from "@material-ui/core/Typography";
+import AddCircle from "@material-ui/icons/AddCircle";
+import TextField from "@material-ui/core/TextField";
+import VerifiedIcon from "@material-ui/icons/CheckSharp";
+
+// component
+import "../App.css";
+import noImage from "../images/no-img.png";
+import Writing_Microblogs from "../Writing_Microblogs";
+
+const MyChip = styled(Chip)({
+  margin: 2,
+  color: "primary"
+});
+
+class user extends Component {
+  state = {
+    profile: window.location.pathname.split("/").pop(),
+    imageUrl: null,
+    topics: null,
+    user: null,
+    following: null
+  };
+
+  handleSub = () => {
+    if (this.state.following === true) {
+      axios
+        .post("/removeSub", {
+          unfollow: this.state.profile
+        })
+        .then(res => {
+          console.log("removed sub");
+          this.setState({
+            following: false
+          });
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    } else {
+      axios
+        .post("/addSubscription", {
+          following: this.state.profile
+        })
+        .then(res => {
+          console.log("adding sub");
+          this.setState({
+            following: true
+          });
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    }
+  };
+
+  componentDidMount() {
+    axios
+      .post("/getUserDetails", {
+        handle: this.state.profile
+      })
+      .then(res => {
+        this.setState({
+          imageUrl: res.data.userData.imageUrl,
+          topics: res.data.userData.followedTopics
+        });
+      })
+      .catch(err => console.log(err));
+
+    axios
+      .get("/user")
+      .then(res => {
+        this.setState({
+          following: res.data.credentials.following.includes(this.state.profile)
+        });
+      })
+      .catch(err => console.log(err));
+  }
+
+  render() {
+    let profileMarkup = this.state.profile ? (
+      <div>
+        <Typography variant="h5">
+          @{this.state.profile}{" "}
+          {this.state.verified ? (
+            <VerifiedIcon style={{ fill: "#1397D5" }} />
+          ) : null}
+        </Typography>
+      </div>
+    ) : (
+      <p>loading username...</p>
+    );
+    let topicsMarkup = this.state.topics ? (
+      this.state.topics.map(
+        topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
+      )
+    ) : (
+      <p> loading topics...</p>
+    );
+
+    let imageMarkup = this.state.imageUrl ? (
+      <img src={this.state.imageUrl} height="150" width="150" />
+    ) : (
+      <img src={noImage} height="150" width="150" />
+    );
+
+    let followMarkup = this.state.following ? (
+      <Button variant="contained" color="primary" onClick={this.handleSub}>
+        unfollow
+      </Button>
+    ) : (
+      <Button variant="contained" color="primary" onClick={this.handleSub}>
+        follow
+      </Button>
+    );
+
+    console.log(this.state.following);
+
+    return (
+      <Grid container spacing={24}>
+        <Grid item sm={4} xs={8}>
+          {imageMarkup}
+          {profileMarkup}
+          {followMarkup}
+          {topicsMarkup}
+          <br />
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.user
+});
+
+user.propTypes = {
+  user: PropTypes.object.isRequired
+};
+
+export default connect(mapStateToProps)(user);