From 81749c19ce9593230c80023c189a03c963845c5e Mon Sep 17 00:00:00 2001 From: Leon Liang Date: Tue, 19 Nov 2019 22:30:15 -0500 Subject: [PATCH] completed search page and redirect to user profile page --- functions/handlers/users.js | 17 ++- functions/index.js | 2 +- .../src/components/layout/NavBar.js | 125 ++++++++++-------- twistter-frontend/src/pages/Search.js | 56 ++++---- 4 files changed, 109 insertions(+), 91 deletions(-) diff --git a/functions/handlers/users.js b/functions/handlers/users.js index 84463c2..283b97b 100644 --- a/functions/handlers/users.js +++ b/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); diff --git a/functions/index.js b/functions/index.js index eb87142..df44c82 100644 --- a/functions/index.js +++ b/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); diff --git a/twistter-frontend/src/components/layout/NavBar.js b/twistter-frontend/src/components/layout/NavBar.js index 9c720b0..f1e1b4a 100644 --- a/twistter-frontend/src/components/layout/NavBar.js +++ b/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 ( - - - - {authenticated && } - {!authenticated && } - {!authenticated && } - {authenticated && } - - - ) - } + render() { + const authenticated = this.props.user.authenticated; + return ( + + + + {authenticated && ( + + )} + {!authenticated && ( + + )} + {!authenticated && ( + + )} + {authenticated && ( + + )} + {authenticated && ( + + )} + + + ); + } } -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)); diff --git a/twistter-frontend/src/pages/Search.js b/twistter-frontend/src/pages/Search.js index 657a654..14cbc52 100644 --- a/twistter-frontend/src/pages/Search.js +++ b/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 => ( - -
- {result} -
- - )) + +
+ + {this.state.searchResult} + +
+ ) : ( // console.log(this.state.searchResult) -

searching...

+

No result

); return ( @@ -65,6 +66,11 @@ export class Search extends Component { onChange={event => this.handleInput(event)} /> + + + {resultMarkup} );