Merge pull request #90 from ClaytonWWilson/auto_complete

completed search page and redirect to user profile page

functions/handlers/users.js

@@ -415,16 +415,15 @@ exports.unverifyUser = (req, res) => {
     });
 };
 exports.getUserHandles = (req, res) => {
-  admin
-    .firestore()
-    .collection("users")
+  db.doc(`/users/${req.body.userHandle}`)
     .get()
-    .then(data => {
-      let users = [];
-      data.forEach(function(doc) {
-        users.push(doc.data().handle);
-      });
-      return res.status(200).json(users);
+    .then(doc => {
+      if (doc.exists) {
+        let userHandle = doc.data().handle;
+        return res.status(200).json(userHandle);
+      } else {
+        return res.status(404).json({ error: "user not found" });
+      }
     })
     .catch(err => {
       console.error(err);

functions/index.js

@@ -56,7 +56,7 @@ app.post("/verifyUser", fbAuth, verifyUser);
 app.post("/unverifyUser", fbAuth, unverifyUser);
 
 // get user handles with search phase
-app.get("/getUserHandles", fbAuth, getUserHandles);
+app.post("/getUserHandles", fbAuth, getUserHandles);
 
 // get user's subscription
 app.get("/getSubs", fbAuth, getSubs);

twistter-frontend/src/components/layout/NavBar.js

@@ -1,71 +1,84 @@
 /* eslint-disable */
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
 
 // Material UI stuff
-import AppBar from '@material-ui/core/AppBar';
-import ToolBar from '@material-ui/core/Toolbar';
-import Button from '@material-ui/core/Button';
+import AppBar from "@material-ui/core/AppBar";
+import ToolBar from "@material-ui/core/Toolbar";
+import Button from "@material-ui/core/Button";
 import withStyles from "@material-ui/core/styles/withStyles";
 
 // Redux stuff
-import { logoutUser } from '../../redux/actions/userActions';
-import { connect } from 'react-redux';
+import { logoutUser } from "../../redux/actions/userActions";
+import { connect } from "react-redux";
 
 const styles = {
-    form: {
-      textAlign: "center"
-    },
-    textField: {
-      marginBottom: 30
-    },
-    pageTitle: {
-      marginBottom: 40
-    },
-    button: {
-      positon: "relative",
-      marginBottom: 30
-    },
-    progress: {
-      position: "absolute"
-    }
-  };
-  
+  form: {
+    textAlign: "center"
+  },
+  textField: {
+    marginBottom: 30
+  },
+  pageTitle: {
+    marginBottom: 40
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
+  },
+  progress: {
+    position: "absolute"
+  }
+};
+
 export class Navbar extends Component {
-    render() {
-        const authenticated = this.props.user.authenticated;
-        return (
-            <AppBar>
-                <ToolBar>
-                    <Button component={ Link } to='/'>
-                        Home
-                    </Button>
-                    {authenticated && <Button component={ Link } to='/user'>
-                        Profile
-                    </Button>}
-                    {!authenticated && <Button component={ Link } to='/login'>
-                        Login
-                    </Button>}
-                    {!authenticated && <Button component={ Link } to='/signup'>
-                        Sign Up
-                    </Button>}
-                    {authenticated && <Button component={ Link } to='/logout'>
-                        Logout
-                    </Button>}
-                </ToolBar>
-            </AppBar>
-        )
-    }
+  render() {
+    const authenticated = this.props.user.authenticated;
+    return (
+      <AppBar>
+        <ToolBar>
+          <Button component={Link} to="/">
+            Home
+          </Button>
+          {authenticated && (
+            <Button component={Link} to="/user">
+              Profile
+            </Button>
+          )}
+          {!authenticated && (
+            <Button component={Link} to="/login">
+              Login
+            </Button>
+          )}
+          {!authenticated && (
+            <Button component={Link} to="/signup">
+              Sign Up
+            </Button>
+          )}
+          {authenticated && (
+            <Button component={Link} to="/search">
+              Search
+            </Button>
+          )}
+          {authenticated && (
+            <Button component={Link} to="/logout">
+              Logout
+            </Button>
+          )}
+        </ToolBar>
+      </AppBar>
+    );
+  }
 }
 
-const mapStateToProps = (state) => ({
-    user: state.user
-})
+const mapStateToProps = state => ({
+  user: state.user
+});
 
 Navbar.propTypes = {
-    user: PropTypes.object.isRequired,
-    classes: PropTypes.object.isRequired
-}
+  user: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
+};
 
 export default connect(mapStateToProps)(withStyles(styles)(Navbar));

twistter-frontend/src/pages/Search.js

@@ -1,17 +1,10 @@
 import React, { Component } from "react";
 // import props
-import { TextField, Paper } from "@material-ui/core";
+import { TextField, Button } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import Axios from "axios";
-import user from "./user.js";
 
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Link,
-  useRouteMatch
-} from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 
 export class Search extends Component {
   state = {
@@ -19,20 +12,28 @@ export class Search extends Component {
     searchResult: null
   };
 
-  handleSearch(event) {
-    Axios.get("/getUserHandles").then(res => {
-      this.setState({
-        searchResult: res.data
-      });
-    });
+  handleSearch = () => {
     console.log(this.state.searchPhase);
-  }
+    Axios.post("/getUserHandles", {
+      userHandle: this.state.searchPhase
+    })
+      .then(res => {
+        console.log(res);
+
+        this.setState({
+          searchResult: res.data
+        });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  };
 
   handleInput(event) {
     this.setState({
       searchPhase: event.target.value
     });
-    this.handleSearch();
+    console.log(this.state.searchPhase);
   }
 
   handleRedirect() {
@@ -41,16 +42,16 @@ export class Search extends Component {
 
   render() {
     let resultMarkup = this.state.searchResult ? (
-      this.state.searchResult.map(result => (
-        <Router>
-          <div>
-            <Link to={`/user`}>{result}</Link>
-          </div>
-        </Router>
-      ))
+      <Router>
+        <div>
+          <a href={`/user/${this.state.searchResult}`}>
+            {this.state.searchResult}
+          </a>
+        </div>
+      </Router>
     ) : (
       //   console.log(this.state.searchResult)
-      <p> searching... </p>
+      <p> No result </p>
     );
 
     return (
@@ -65,6 +66,11 @@ export class Search extends Component {
             onChange={event => this.handleInput(event)}
           />
         </Grid>
+        <Grid>
+          <Button color="primary" onClick={this.handleSearch}>
+            Search
+          </Button>
+        </Grid>
         <Grid>{resultMarkup}</Grid>
       </Grid>
     );