the styling would not connect

client/EntranceItems.jsx

@@ -33,12 +33,12 @@ class EntranceItems extends React.Component {
 
   render() {
     return (
-      <Row className="m-4 p-4">
+      <Row className="m-4 p-4 ">
         {this.state.products.map(one => {
           return (
             <Col key={one._id} sm="3">
               <Card className="my-2">
-                <CardImg
+                <CardImg className="border"
                   top
                   width="100%"
                   src={"http://127.0.0.1:3000/api/uploads/" + one.photo}

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 (
+
+<Navbar fixed={"top"} color="light" light expand="md">
+<NavbarBrand tag={Link} to="">
+  Max
+</NavbarBrand>
+<NavbarToggler onClick={toggle} />
+<Collapse isOpen={isOpen} navbar>
+  <Nav className="mr-auto" navbar>
+    {/* <NavItem>
+      <NavLink tag={Link} to="signup">signup</NavLink>
+    </NavItem> */}
+
+    <NavItem>
+      <NavLink tag={Link} to="profile">
+        Profile
+      </NavLink>
+    </NavItem>
+  </Nav>
+  <Nav className="mx-auto" navbar>
+
+    <div className="input-group">
+      <div className="input-group-prepend">
+
+        <button
+          className="btn btn-outline-secondary dropdown-toggle"
+          type="button"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+        >
+          {usedFor}
+        </button>
+        <div className="dropdown-menu">
+          <p style={{cursor : "pointer"}} onClick={()=> setUsedFor("People")} className="dropdown-item">People</p>
+          <p style={{cursor : "pointer"}} onClick={()=> setUsedFor("Products")} className="dropdown-item">Products</p>
+        </div>
+      </div>
+      <input
+        onKeyUp={()=>props.keyup(usedFor)}
+        className=" barInput mr-sm-2"
+        type="text"
+        placeholder="  Search..."
+        id="barInput"
+        aria-label="Search"
+        aria-label="Text input with dropdown button"
+      />
+    </div>
+    {/* <NavItem>
+      <Button>changeMe</Button>
+    </NavItem>
+    <NavItem>
+      <Form class="form-inline">
+        <Input
+          class="form-control mr-sm-2"
+          type="search"
+          placeholder="Search"
+          aria-label="Search"
+        />
+      </Form>
+    </NavItem> */}
+  </Nav>
+  <Nav className="rightNav ml-auto" navbar>
+    {/* <NavItem>
+      <NavLink tag={Link} to="signup">signup</NavLink>
+    </NavItem> */}
+    <NavItem>
+      <NavLink tag={Link} to="" onClick={logOut}>
+        Logout
+      </NavLink>
+    </NavItem>
+  </Nav>
+  {/* <NavbarText>Simple Text</NavbarText> */}
+</Collapse>
+</Navbar>)
+}
+
+export default NavBar;

client/Posts.jsx

@@ -12,38 +12,39 @@ import {
   Button
 } from "reactstrap";
 
-var Posts = (props)=> (
-    <div>
-    {props.items?props.items.map(one => (
-    <div key={one._id}>
-      {/* <CardText tag={Link} to={"/" + one.user.username}>{one.user.firstname} {one.user.lastname}</CardText> */}
-      <Card tag={Link} to={"items/" + one._id }
-        key={one._id}
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          marginBottom: "8px"
-        }}
-      >
-        <div style={{ flex: 4 }}>
-          <img
-            width="100%"
-            src={"http://127.0.0.1:3000/api/uploads/" + one.photo}
-            alt="Card image cap"
-          />
-        </div>
-        <div style={{ flex: 6, marginLeft: "7px" }}>
-          <CardTitle className="mb-1">{one.name}</CardTitle>
-          <small className="text-muted">
-          <CardText tag={Link} to={"/users/" + one.user.username}>{one.user.firstname} {one.user.lastname}</CardText>
-          </small>
-          <CardText>Description: {one.description}</CardText>
-          <small className="text-muted">
-            <span>Price: ${one.price}</span> &nbsp;&nbsp; <span>Availability: {one.available?"✔":"❌" }</span> &nbsp;&nbsp; <span>Quantity: {one.quantity}</span>
-          </small>
-        </div>
-      </Card>
-    </div>
-  )): null}
+var Posts = (props) => (
+  <div >
+    {props.items ? props.items.map(one => (
+      <div key={one._id} >
+        {/* <CardText tag={Link} to={"/" + one.user.username}>{one.user.firstname} {one.user.lastname}</CardText> */}
+        <Card
+          key={one._id}
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            marginBottom: "8px"
+          }}
+        >
+          <div style={{ flex: 4 }}>
+            <img
+              width="100%"
+              src={"http://127.0.0.1:3000/api/uploads/" + one.photo}
+              alt="Card image cap"
+            />
+          </div>
+          <div style={{ flex: 6, marginLeft: "7px" }}>
+            <CardTitle tag={Link} to={"items/" + one._id} className="mb-1">{one.name}</CardTitle>
+            <br />
+            <small className="text-muted">
+              <CardText tag={Link} to={"/users/" + one.user.username}>{one.user.firstname} {one.user.lastname}</CardText>
+            </small>
+            <CardText>Description: {one.description}</CardText>
+            <small className="text-muted">
+              <span>Price: ${one.price}</span> &nbsp;&nbsp; <span>Availability: {one.available ? "✔" : "❌"}</span> &nbsp;&nbsp; <span>Quantity: {one.quantity}</span>
+            </small>
+          </div>
+        </Card>
+      </div>
+    )) : null}
   </div>)
 export default Posts

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 (
       <div>
@@ -113,7 +122,7 @@ class Profile extends React.Component {
           <ModalBody>
             {this.state.modalUsers.map(one =>{
               var element = one[this.state.modalFor == "Followers"? "follower" : "followed"]
-              return <Link to={element.username} key={element._id}>{element.firstname + " " + element.lastname}</Link>
+              return <div key={element._id}><hr /><Link onClick={this.toggleModel.bind(this, null)} to={"/users/" + element.username} >{element.firstname + " " + element.lastname}</Link></div>
             })}
           </ModalBody>
           <ModalFooter>