Move search to profile page (#29)

* Move search to profile page Display only on btn click * Fix bad search params * Remove friend search from search page * Fix styling issues
kimberlypn · Apr 19, 2018 · e5fd1ba · e5fd1ba
1 parent a851dd4
commit e5fd1ba
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 31 deletions.
diff --git a/travelpal/assets/css/app.scss b/travelpal/assets/css/app.scss
@@ -214,6 +214,15 @@ input[type=number]::-webkit-outer-spin-button {
 .profile-view button {
   margin-right: 10px;
 }
+
+#searchFriends {
+  display: none;
+}
+
+#viewBtn {
+  display: none;
+}
+
 /***************************** END OF PROFILE ****************************/
 
 /****************************** BOOKED TRIPS *****************************/

diff --git a/travelpal/assets/js/components/Main.jsx b/travelpal/assets/js/components/Main.jsx
@@ -32,7 +32,7 @@ export default function Main({ form, booked, travel, friends, travelDates,
         <Home />
       } />
       <Route path="/search" exact={true} render={() =>
-        <Search userId={userId} users={users} updateSearch={actions.updateSearch} search={search} />
+        <Search />
       } />
       <Route path="/travel/dates" exact={true} render={() =>
         <TravelDates travelDates={travelDates} form={travel} userId={token.id} />
@@ -59,6 +59,10 @@ export default function Main({ form, booked, travel, friends, travelDates,
           friends={friends}
           formOnChange={actions.updateFormAction}
           submitOnClick={apiCalls.submitProfileChanges}
+          userId={userId}
+          users={users}
+          updateSearch={actions.updateSearch}
+          search={search}
         />
       } />
     </Fragment>

diff --git a/travelpal/assets/js/components/Profile.jsx b/travelpal/assets/js/components/Profile.jsx
@@ -4,10 +4,69 @@ import PropTypes from 'prop-types';
 import api from '../api';
 import ProfileInfo from './ProfileInfo';
 import ProfileFriends from './ProfileFriends';
+import { FormGroup, Label, Input, Button, Row, Col } from 'reactstrap';
+import SearchResults from './SearchResults';
 
 // Renders the user's profile
-export default function Profile({ userInfo, friends, formOnChange,
-  submitOnClick }) {
+export default function Profile({
+  userInfo,
+  friends,
+  formOnChange,
+  submitOnClick,
+  userId,
+  users,
+  search,
+  updateSearch
+}) {
+  // Updates the form with the query
+  function update(ev) {
+    const query = $(ev.target).val().toLowerCase();
+    updateSearch(query);
+  }
+
+  function myToggle() {
+    $("#searchFriends").toggle();
+    $("#profileFriends").toggle();
+    $("#searchBtn").toggle();
+    $("#viewBtn").toggle();
+  }
+
+  // the same row as the "Friends" header? And change the search label to 
+  // be a h3 and make the "View Friends" button on the same row as it as well.
+
+
+  const viewBtn = (
+    <Button id={"viewBtn"} type="button" onClick={() => myToggle()}>
+      View Friends
+    </Button>
+  );
+
+  const friendViewArea = (
+    <div id={"profileFriends"}>
+      <ProfileFriends userId={userInfo.id} friends={friends} myToggle={myToggle} />
+    </div>
+  );
+  const friendSearchArea = (
+    <div id={"searchFriends"} className="page-content">
+      <Row md="12">
+        <Col md="6">
+          <h3>Search for Friends</h3>
+        </Col>
+        <Col md="6">
+          <div className="friend-btn">
+            {viewBtn}
+          </div>
+        </Col>
+      </Row>
+      <br />
+      <FormGroup>
+        <Input onChange={update} value={search} type="search" name="search"
+          placeholder="Enter name or username" />
+      </FormGroup>
+      <SearchResults userId={userId} users={users} search={search} />
+    </div>
+  );
+
   return (
     <div className="page-content" id="profile">
       <ProfileInfo
@@ -16,7 +75,8 @@ export default function Profile({ userInfo, friends, formOnChange,
         submitOnClick={submitOnClick}
       />
       <br />
-      <ProfileFriends userId={userInfo.id} friends={friends} />
+      {friendViewArea}
+      {friendSearchArea}
     </div>
   );
 };

diff --git a/travelpal/assets/js/components/ProfileFriends.jsx b/travelpal/assets/js/components/ProfileFriends.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'reactstrap';
+import { Row, Col, Button } from 'reactstrap';
 
 import api from '../api';
 import FriendCard from './FriendCard';
 
 // Renders the user's friends
-export default function ProfileFriends({ userId, friends }) {
+export default function ProfileFriends({ userId, friends, myToggle }) {
   var btnTxt; // Displays "Unfriend", "Cancel Request", or "Accept Request"
   // Renders each friend's details as a card
   friends = _.map(friends, function (ff) {
@@ -38,7 +38,18 @@ export default function ProfileFriends({ userId, friends }) {
 
   return (
     <div id="profile-friends">
-      <h3>Friends</h3>
+      <Row md="12">
+        <Col md="6">
+          <h3>Friends</h3>
+        </Col>
+        <Col md="6">
+          <div className="friend-btn">
+            <Button id={"searchBtn"} type="button" onClick={() => myToggle()}>
+              Find Friends
+        </Button>
+          </div>
+        </Col>
+      </Row>
       <Row>{friends}</Row>
     </div>
   );

diff --git a/travelpal/assets/js/components/Search.jsx b/travelpal/assets/js/components/Search.jsx
@@ -1,34 +1,13 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { FormGroup, Label, Input } from 'reactstrap';
-import SearchResults from './SearchResults';
 
-import api from '../api';
 
 // Renders the search page
-export default function Search({ userId, users, search, updateSearch }) {
-
-  // Updates the form with the query
-  function update(ev) {
-    const query = $(ev.target).val().toLowerCase();
-    updateSearch(query);
-  }
+export default function Search(props) {
 
   return (
     <div className="page-content">
-      <FormGroup>
-        <Label>Search for Friends</Label>
-        <Input onChange={update} value={search} type="search" name="search"
-          placeholder="Enter name or username" />
-      </FormGroup>
-      <SearchResults userId={userId} users={users} search={search} />
+      Search
     </div>
   );
 };
-
-Search.propTypes = {
-  userId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  users: PropTypes.array.isRequired,
-  search: PropTypes.string.isRequired
-};
diff --git a/travelpal/assets/js/components/SearchResults.jsx b/travelpal/assets/js/components/SearchResults.jsx
@@ -25,7 +25,7 @@ export default function SearchResults({ userId, users, search }) {
   // Determines if the query results are a full match, a partial match to the
   // beginning, or a match to some part of the name/username
   const query = search.toLowerCase();
-  if (query == null || query == "") {
+  if (query == null || query == "" || query == " ") {
     let fullMatch = [];
     let begMatch = [];
     let partialMatch = [];