From 041c656c673b9cc96908d2e0a6aeaa18b18dd13d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Sat, 21 Jan 2017 00:13:45 +0100
Subject: [PATCH] Refactor navbar in modules

---
 src/public/js/components/navbar.js | 202 ++++++++++++++++-------------
 1 file changed, 114 insertions(+), 88 deletions(-)

diff --git a/src/public/js/components/navbar.js b/src/public/js/components/navbar.js
index a21ec94..3f9bbab 100644
--- a/src/public/js/components/navbar.js
+++ b/src/public/js/components/navbar.js
@@ -6,102 +6,128 @@ import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
 import { LinkContainer } from 'react-router-bootstrap'
 import { Control, Form } from 'react-redux-form';
 
-export default class NavBar extends React.Component {
+export default function NavBar(props) {
+  return (
+    <div>
+      <Navbar fluid fixedTop collapseOnSelect>
+        <Navbar.Header>
+          <LinkContainer to="/">
+            <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
+          </LinkContainer>
+          <Navbar.Toggle />
+        </Navbar.Header>
+        <Navbar.Collapse>
+          <MoviesDropdown />
+          <ShowsDropdown />
+          <UserDropdown
+            username={props.userStore.username}
+            logout={props.userLogout}
+          />
+          <Search
+            model="movieStore"
+            model="movieStore.search"
+            placeholder="Search movies"
+            router={props.router}
+            search={props.movieStore.search}
+            path='/movies/search'
+            pathMatch='movies'
+          />
+          <Search
+            model="showStore"
+            model="showStore.search"
+            placeholder="Search shows"
+            router={props.router}
+            search={props.showStore.search}
+            path='/shows/search'
+            pathMatch='shows'
+          />
+        </Navbar.Collapse>
+      </Navbar>
+    </div>
+  );
+}
+
+class Search extends React.Component {
   constructor(props) {
     super(props);
-    this.handleMovieSearch = this.handleMovieSearch.bind(this);
-    this.handleShowSearch = this.handleShowSearch.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
   }
-  handleMovieSearch() {
-    this.props.router.push(`/movies/search/${encodeURI(this.props.movieStore.search)}`)
-  }
-  handleShowSearch() {
-    this.props.router.push(`/shows/search/${encodeURI(this.props.showStore.search)}`)
+  handleSearch() {
+    this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`)
   }
   render() {
-    const username = this.props.userStore.username;
-    const isLoggedIn = username !== "" ? true : false;
     const location = this.props.router.getCurrentLocation().pathname;
-    let displayMovieSearch = false;
-    let displayShowSearch = false;
-    if (isLoggedIn && location.indexOf("movies") > -1)
+    if (location.indexOf(this.props.pathMatch) === -1)
     {
-      displayMovieSearch = true;
+      return null;
     }
-    if (isLoggedIn && location.indexOf("shows") > -1)
-    {
-      displayShowSearch = true;
-    }
-    return (
-      <div>
-        <Navbar fluid fixedTop collapseOnSelect>
-          <Navbar.Header>
-            <LinkContainer to="/">
-              <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
-            </LinkContainer>
-            <Navbar.Toggle />
-          </Navbar.Header>
-          <Navbar.Collapse>
-            <Nav>
-              <LinkContainer to="/movies/popular">
-                <NavItem>Popular movies</NavItem>
-              </LinkContainer>
-              <LinkContainer to="/movies/polochon">
-                <NavItem>Polochon movies</NavItem>
-              </LinkContainer>
-              <LinkContainer to="/shows/popular">
-                <NavItem>Polochon shows</NavItem>
-              </LinkContainer>
-            </Nav>
-            <Nav pullRight>
-              {isLoggedIn ||
-                <LinkContainer to="/users/signup">
-                  <NavItem>Sign up</NavItem>
-                </LinkContainer>
-              }
-              {isLoggedIn ||
-                <LinkContainer to="/users/login">
-                  <NavItem>Login</NavItem>
-                </LinkContainer>
-              }
-              {isLoggedIn &&
-                  <NavDropdown title={username} id="navbar-dropdown-right">
-                    <LinkContainer to="/users/edit">
-                      <MenuItem>Edit</MenuItem>
-                    </LinkContainer>
-                    <LinkContainer to="/users/logout" onClick={this.props.userLogout}>
-                      <MenuItem>Logout</MenuItem>
-                    </LinkContainer>
-                  </NavDropdown>
-              }
-            </Nav>
-            {displayMovieSearch &&
-              <Navbar.Form pullRight>
-                <Form model="movieStore" className="input-group" onSubmit={() => this.handleMovieSearch()}>
-                  <Control.text
-                    model="movieStore.search"
-                    className="form-control"
-                    placeholder="Search movies"
-                    updateOn="change"
-                  />
-                </Form>
-              </Navbar.Form>
-            }
-            {displayShowSearch &&
-              <Navbar.Form pullRight>
-                <Form model="showStore" className="input-group" onSubmit={() => this.handleShowSearch()}>
-                  <Control.text
-                    model="showStore.search"
-                    className="form-control"
-                    placeholder="Search shows"
-                    updateOn="change"
-                  />
-                </Form>
-              </Navbar.Form>
-            }
-          </Navbar.Collapse>
-        </Navbar>
-      </div>
+
+    return(
+      <Navbar.Form pullRight>
+        <Form model={this.props.model} className="input-group" onSubmit={this.handleSearch}>
+          <Control.text
+            model={this.props.model}
+            className="form-control"
+            placeholder={this.props.placeholder}
+            updateOn="change"
+          />
+        </Form>
+      </Navbar.Form>
+    );
+  }
+}
+
+function MoviesDropdown(props) {
+  return(
+    <Nav>
+      <NavDropdown title="Movies" id="navbar-movies-dropdown">
+        <LinkContainer to="/movies/popular">
+          <MenuItem>Popular</MenuItem>
+        </LinkContainer>
+        <LinkContainer to="/movies/polochon">
+          <MenuItem>Polochon</MenuItem>
+        </LinkContainer>
+      </NavDropdown>
+    </Nav>
+  );
+}
+
+function ShowsDropdown(props) {
+  return(
+    <Nav>
+      <NavDropdown title="Shows" id="navbar-shows-dropdown">
+        <LinkContainer to="/shows/popular">
+          <NavItem>Popular</NavItem>
+        </LinkContainer>
+      </NavDropdown>
+    </Nav>
+  );
+}
+
+function UserDropdown(props) {
+  if (props.username !== "") {
+    return (
+      <Nav pullRight>
+        <NavDropdown title={props.username} id="navbar-dropdown-right">
+          <LinkContainer to="/users/edit">
+            <MenuItem>Edit</MenuItem>
+          </LinkContainer>
+          <LinkContainer to="/users/logout" onClick={props.logout}>
+            <MenuItem>Logout</MenuItem>
+          </LinkContainer>
+        </NavDropdown>
+      </Nav>
+    );
+  } else {
+    return(
+      <Nav pullRight>
+        <LinkContainer to="/users/signup">
+          <NavItem>Sign up</NavItem>
+        </LinkContainer>
+        <LinkContainer to="/users/login">
+          <NavItem>Login</NavItem>
+        </LinkContainer>
+      </Nav>
     );
   }
 }