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,17 +1,17 @@
 /* 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: {
@@ -30,7 +30,7 @@ const styles = {
   progress: {
     position: "absolute"
   }
-  };
+};
 
 export class Navbar extends Component {
   render() {
@@ -38,34 +38,47 @@ export class Navbar extends Component {
     return (
       <AppBar>
         <ToolBar>
-                    <Button component={ Link } to='/'>
+          <Button component={Link} to="/">
             Home
           </Button>
-                    {authenticated && <Button component={ Link } to='/user'>
+          {authenticated && (
+            <Button component={Link} to="/user">
               Profile
-                    </Button>}
-                    {!authenticated && <Button component={ Link } to='/login'>
+            </Button>
+          )}
+          {!authenticated && (
+            <Button component={Link} to="/login">
               Login
-                    </Button>}
-                    {!authenticated && <Button component={ Link } to='/signup'>
+            </Button>
+          )}
+          {!authenticated && (
+            <Button component={Link} to="/signup">
               Sign Up
-                    </Button>}
-                    {authenticated && <Button component={ Link } to='/logout'>
+            </Button>
+          )}
+          {authenticated && (
+            <Button component={Link} to="/search">
+              Search
+            </Button>
+          )}
+          {authenticated && (
+            <Button component={Link} to="/logout">
               Logout
-                    </Button>}
+            </Button>
+          )}
         </ToolBar>
       </AppBar>
-        )
+    );
   }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   user: state.user
-})
+});
 
 Navbar.propTypes = {
   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 => {
+  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);
       });
-    console.log(this.state.searchPhase);
-  }
+  };
 
   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>
+          <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>
     );