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
+  db.doc(`/users/${req.body.userHandle}`)
-    .firestore()
-    .collection("users")
     .get()
-    .then(data => {
+    .then(doc => {
-      let users = [];
+      if (doc.exists) {
-      data.forEach(function(doc) {
+        let userHandle = doc.data().handle;
-        users.push(doc.data().handle);
+        return res.status(200).json(userHandle);
-      });
+      } else {
-      return res.status(200).json(users);
+        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 React, { Component } from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
 // Material UI stuff
-import AppBar from '@material-ui/core/AppBar';
+import AppBar from "@material-ui/core/AppBar";
-import ToolBar from '@material-ui/core/Toolbar';
+import ToolBar from "@material-ui/core/Toolbar";
-import Button from '@material-ui/core/Button';
+import Button from "@material-ui/core/Button";
 import withStyles from "@material-ui/core/styles/withStyles";
 
 // Redux stuff
-import { logoutUser } from '../../redux/actions/userActions';
+import { logoutUser } from "../../redux/actions/userActions";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
 
 const styles = {
-    form: {
+  form: {
-      textAlign: "center"
+    textAlign: "center"
-    },
+  },
-    textField: {
+  textField: {
-      marginBottom: 30
+    marginBottom: 30
-    },
+  },
-    pageTitle: {
+  pageTitle: {
-      marginBottom: 40
+    marginBottom: 40
-    },
+  },
-    button: {
+  button: {
-      positon: "relative",
+    positon: "relative",
-      marginBottom: 30
+    marginBottom: 30
-    },
+  },
-    progress: {
+  progress: {
-      position: "absolute"
+    position: "absolute"
-    }
+  }
-  };
+};
-  
+
 export class Navbar extends Component {
-    render() {
+  render() {
-        const authenticated = this.props.user.authenticated;
+    const authenticated = this.props.user.authenticated;
-        return (
+    return (
-            <AppBar>
+      <AppBar>
-                <ToolBar>
+        <ToolBar>
-                    <Button component={ Link } to='/'>
+          <Button component={Link} to="/">
-                        Home
+            Home
-                    </Button>
+          </Button>
-                    {authenticated && <Button component={ Link } to='/user'>
+          {authenticated && (
-                        Profile
+            <Button component={Link} to="/user">
-                    </Button>}
+              Profile
-                    {!authenticated && <Button component={ Link } to='/login'>
+            </Button>
-                        Login
+          )}
-                    </Button>}
+          {!authenticated && (
-                    {!authenticated && <Button component={ Link } to='/signup'>
+            <Button component={Link} to="/login">
-                        Sign Up
+              Login
-                    </Button>}
+            </Button>
-                    {authenticated && <Button component={ Link } to='/logout'>
+          )}
-                        Logout
+          {!authenticated && (
-                    </Button>}
+            <Button component={Link} to="/signup">
-                </ToolBar>
+              Sign Up
-            </AppBar>
+            </Button>
-        )
+          )}
-    }
+          {authenticated && (
+            <Button component={Link} to="/search">
+              Search
+            </Button>
+          )}
+          {authenticated && (
+            <Button component={Link} to="/logout">
+              Logout
+            </Button>
+          )}
+        </ToolBar>
+      </AppBar>
+    );
+  }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
-    user: state.user
+  user: state.user
-})
+});
 
 Navbar.propTypes = {
-    user: PropTypes.object.isRequired,
+  user: PropTypes.object.isRequired,
-    classes: 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 {
+import { BrowserRouter as Router } from "react-router-dom";
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Link,
-  useRouteMatch
-} from "react-router-dom";
 
 export class Search extends Component {
   state = {
@@ -19,20 +12,28 @@ export class Search extends Component {
     searchResult: null
   };
 
-  handleSearch(event) {
+  handleSearch = () => {
-    Axios.get("/getUserHandles").then(res => {
-      this.setState({
-        searchResult: res.data
-      });
-    });
     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>
-        <Router>
+        <div>
-          <div>
+          <a href={`/user/${this.state.searchResult}`}>
-            <Link to={`/user`}>{result}</Link>
+            {this.state.searchResult}
-          </div>
+          </a>
-        </Router>
+        </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>
     );