From e83113cdd7893c16bde90152f837ecfe045d5c72 Mon Sep 17 00:00:00 2001 From: Moriarty Date: Sun, 12 Jan 2020 11:50:03 +0100 Subject: [PATCH 1/4] searchBar added --- client/NavBar.jsx | 125 +++++++++++++++++ client/Posts.jsx | 5 +- client/Profile.jsx | 11 +- client/home.jsx | 128 +++++++++--------- client/item.jsx | 73 +++++----- client/searchArea.jsx | 67 +++++++++ package-lock.json | 3 +- package.json | 1 + public/bundle.js | 54 +++++++- public/index.html | 2 + routes/items.js | 7 + server.js | 17 +++ ...-komplet-skateboard-spin-white-80640_2.jpg | Bin 0 -> 156322 bytes ...00HTB1bjpDJFXXXXb2XpXXq6xXFXXXc_grande.jpg | Bin 0 -> 43912 bytes uploads/157875273145341443.jpg | Bin 0 -> 24255 bytes 15 files changed, 384 insertions(+), 109 deletions(-) create mode 100644 client/NavBar.jsx create mode 100644 client/searchArea.jsx create mode 100644 uploads/1578685456428ambassadors-komplet-skateboard-spin-white-80640_2.jpg create mode 100644 uploads/1578688511400HTB1bjpDJFXXXXb2XpXXq6xXFXXXc_grande.jpg create mode 100644 uploads/157875273145341443.jpg diff --git a/client/NavBar.jsx b/client/NavBar.jsx new file mode 100644 index 0000000..9aabcf7 --- /dev/null +++ b/client/NavBar.jsx @@ -0,0 +1,125 @@ +import React, { useState } from "react"; +import { + BrowserRouter as Router, + Link, + Route, + Switch, + Redirect + } from "react-router-dom"; +import { + Collapse, + Button, + Form, + FormGroup, + Label, + Input, + FormText, + Navbar, + NavbarToggler, + NavbarBrand, + Nav, + NavItem, + Modal, + ModalHeader, + ModalBody, + ModalFooter, + NavLink, + Col, + Row + } from "reactstrap"; +const NavBar = props => { + const [isOpen, setIsOpen] = useState(false); + const [usedFor, setUsedFor] = useState("People"); + + const toggle = () => setIsOpen(!isOpen); + const { buttonLabel, className } = props; + function search(){ + + } + + + + + function logOut() { + localStorage.removeItem("token"); + props.rerender(); + } + +return ( + + + + Max + + + + + + + {/* Simple Text */} + +) +} + +export default NavBar; \ No newline at end of file diff --git a/client/Posts.jsx b/client/Posts.jsx index d957184..a032097 100644 --- a/client/Posts.jsx +++ b/client/Posts.jsx @@ -17,7 +17,7 @@ var Posts = (props)=> ( {props.items?props.items.map(one => (
{/* {one.user.firstname} {one.user.lastname} */} - ( />
- {one.name} + {one.name} +
{one.user.firstname} {one.user.lastname} diff --git a/client/Profile.jsx b/client/Profile.jsx index c69dcf1..4e47fbb 100644 --- a/client/Profile.jsx +++ b/client/Profile.jsx @@ -18,6 +18,10 @@ class Profile extends React.Component { } componentDidMount() { + this.handleState() + } + + handleState(){ if (this.props.user) { http.get( `/api/users/${this.props.user.username}/items`, @@ -36,6 +40,7 @@ class Profile extends React.Component { } } } + follow() { http.get(`/api/users/${this.state.user._id}/follow`, (err, data) => { this.componentDidMount(); @@ -49,6 +54,10 @@ class Profile extends React.Component { }else this.setState({ modal: !this.state.modal, modalFor: title, modalUsers : []}); } + componentWillReceiveProps(){ + setTimeout(()=>this.handleState(), 0) + + } render() { return (
@@ -113,7 +122,7 @@ class Profile extends React.Component { {this.state.modalUsers.map(one =>{ var element = one[this.state.modalFor == "Followers"? "follower" : "followed"] - return {element.firstname + " " + element.lastname} + return
{element.firstname + " " + element.lastname}
})} diff --git a/client/home.jsx b/client/home.jsx index ad9b3c6..bec27d1 100644 --- a/client/home.jsx +++ b/client/home.jsx @@ -1,8 +1,14 @@ import React, { useState } from "react"; import Profile from "./Profile.jsx"; +import NavBar from "./NavBar.jsx"; +import Item from "./item.jsx"; +import http from "./http.jsx"; +import SearchArea from "./searchArea.jsx"; +import {debounce} from "lodash"; import Feed from "./Feed.jsx"; import { BrowserRouter as Router, + withRouter, Link, Route, Switch, @@ -29,87 +35,83 @@ import { Col, Row } from "reactstrap"; +import item from "./item.jsx"; const Home = props => { const [isOpen, setIsOpen] = useState(false); + const [searchProducts, setSearchProducts] = useState(null) + const [searchUsers, setSearchUsers] = useState(null) const toggle = () => setIsOpen(!isOpen); const { buttonLabel, className } = props; const [modal, setModal] = useState(false); + const [searchArea , setSearchArea] = useState("") const toggleModel = () => setModal(!modal); - function logOut() { - localStorage.removeItem("token"); - props.rerender(); - } + const keyup = debounce((usedFor)=>{ + var input = document.getElementById("barInput").value + + if(input != ""){ + http.get("/api/search" , `?keyword=${input}&usedfor=${usedFor}`, (err,data)=>{ + setSearchUsers(data.users) + setSearchProducts(data.products) + setSearchArea("/search") + setSearchArea("") + }) + + http + }else { + setSearchArea("/") + setSearchArea("") + + } +} , 500) + return ( - - - Max - - - - - - {/* Simple Text */} - - +
{/*

List Based

*/}
+ { searchArea? : null} } /> } /> - + + - - - - + } /> + +
{/*
*/} @@ -162,11 +164,7 @@ const Home = props => {

available

 @@ -185,9 +183,9 @@ const Home = props => { */} - - - + + + @@ -195,21 +193,21 @@ const Home = props => { color="primary" onClick={() => { toggleModel(); - var available = document.getElementById("addProductForm").elements.available - available.value = available.checked + var available = document.getElementById("addProductForm") + .elements.available; + available.value = available.checked; // console.log([].slice.call(document.getElementById("addProductForm").elements).map(one =>{ // return {[one.name] : one.value} // })) - console.log(document.getElementById("photo").files[0]) - // fetch("/api/items", { - // method : "POST", - // body : new FormData(document.getElementById("addProductForm")), - // headers: {"authorization" : localStorage.getItem("token")} - // }) - + // console.log(document.getElementById("photo").files[0]) + fetch("/api/items", { + method: "POST", + body: new FormData(document.getElementById("addProductForm")), + headers: { authorization: localStorage.getItem("token") } + }); }} > - Submit + Submit {" "} + -
+
); } } From 68795c9c15b0c612598b773676459f0f2d51c1a1 Mon Sep 17 00:00:00 2001 From: Abdlrrahman Date: Sun, 12 Jan 2020 14:56:58 +0100 Subject: [PATCH 3/4] log in Button --- client/login.jsx | 15 ++++++++++----- client/signup.jsx | 2 +- public/bundle.js | 4 ++-- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/client/login.jsx b/client/login.jsx index 6d21166..f607a05 100644 --- a/client/login.jsx +++ b/client/login.jsx @@ -29,12 +29,12 @@ class Login extends React.Component { }); http.post("/api/users/authenticate", json, data => { if (data.success) { - localStorage.setItem("token" , data.token); + localStorage.setItem("token", data.token); this.props.rerender() } else { - this.setState({ msg: data.msg, alert : true }); + this.setState({ msg: data.msg, alert: true }); setTimeout(() => { - this.setState({ alert: false, msg : null }); + this.setState({ alert: false, msg: null }); }, 3000); } }); @@ -50,7 +50,7 @@ class Login extends React.Component { return (
{this.state.alert ? ( - {this.state.msg?this.state.msg:"Please fill all fields"} + {this.state.msg ? this.state.msg : "Please fill all fields"} ) : null}
@@ -81,7 +81,12 @@ class Login extends React.Component {
diff --git a/client/signup.jsx b/client/signup.jsx index 12e2f27..60e172f 100644 --- a/client/signup.jsx +++ b/client/signup.jsx @@ -160,7 +160,7 @@ class Signup extends React.Component { -