Merge pull request #14 from BCIT-SSD-2020-21/13Search

13 search

client/src/components/sidebar/Sidebar.css

@@ -76,7 +76,7 @@
   color: #f3f4f6 !important;
 }
 
-.sidebar__link > a {
+.sidebar__link  a {
   text-decoration: none;
   color: #a5aaad;
   font-weight: 700;

client/src/components/sidebar/Sidebar.js

@@ -1,11 +1,20 @@
 import "./Sidebar.css";
 import logo from "../../assets/logo.png";
 import { useHistory, Link, } from "react-router-dom"
+import CollapsiblePanel from './collapsiblePanel/CollapsiblePanel'
+import {useState} from 'react'
+import Search from './search/Search'
 
 const Sidebar = ({ sidebarOpen, closeSidebar, user, setUserFunc }) => {
 
     const history = useHistory()
 
+    const text =
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit.Nihil earum illo ipsa velit facilis provident qui eligendi, quia ut magnam tenetur. Accusantium nisi quos delectus in necessitatibus ad. Ducimus, id!";
+    const [collapse, setCollapse] = useState(true);
+
+    const [icon, setIcon] = useState("fa fa-chevron-right");   
+
   return (
     <div className={sidebarOpen ? "sidebar_responsive" : ""} id="sidebar" style={{  background: `linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url('/images/sidebar.jpg')`, backgroundRepeat: 'no-repeat', backgroundPosition: "center", backgroundSize: 'cover'  }}>
       <div className="sidebar__title">
@@ -27,11 +36,16 @@ const Sidebar = ({ sidebarOpen, closeSidebar, user, setUserFunc }) => {
           <Link to="/" exact>Dashboard</Link>
         </div>
         <h2>MNG</h2>
-        <div className="sidebar__link">
+        {/* <div className="sidebar__link">
           <i className="fa fa-user-secret" aria-hidden="true"></i>
           <Link to="/posts" exact>Search Paws</Link>
-        </div>
+        </div> */}
 
+        <div className="sidebar__link">
+            <CollapsiblePanel leftIcon="fa fa-search" title="Search Paws" collapse={collapse}>
+               <Search />
+            </CollapsiblePanel>
+        </div>
         {!!user && <h2>Add Your Paws</h2> }
         {!!user && 
 

client/src/components/sidebar/collapsiblePanel/CollapsiblePanel.css

@@ -0,0 +1,25 @@
+.coll-panel-btn  {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+}
+
+.coll-panel-btn:focus {
+    outline: 0;
+    box-shadow: none;
+}
+
+.leftIcon > i {
+    margin-right: 5px;
+}
+
+.leftIcon {
+    width: 70%;    
+}
+
+
+
+

client/src/components/sidebar/collapsiblePanel/CollapsiblePanel.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import './CollapsiblePanel.css'
+
+function CollapsiblePanel({ children, ...props }) {
+  const { title, collapse, leftIcon } = props;
+  const [isCollapse, setIsCollapse] = useState(collapse);
+  const [icon, setIcon] = useState("fa fa-chevron-down");
+  const toggle = () => {
+    setIsCollapse(!isCollapse);
+    setIcon(state => {
+      return state === "fa fa-chevron-down"
+        ? "fa fa-chevron-right"
+        : "fa fa-chevron-down";
+    });
+  };
+
+  const animate = collapse => {
+    setIsCollapse(collapse);
+    setIcon(state => {
+      return state === "fa fa-chevron-down"
+        ? "fa fa-chevron-right"
+        : "fa fa-chevron-down";
+    });
+  };
+
+  useEffect(() => {
+    animate(!collapse);
+  }, [collapse]);
+
+  return (
+    <div className="coll-panel">
+      <div
+        className="coll-panel-btn"
+        onClick={() => toggle()}
+        style={{color: 'white'}}
+      >
+        <div className="leftIcon"><i className={leftIcon} /><a href="#"> {title} </a> </div>
+        <div className="rightIcon"><i className={icon} /></div>
+      </div>
+      { isCollapse && children}
+    </div>
+  );
+}
+
+CollapsiblePanel.defaultProps = {
+  children: "Add node as a child",
+  title: "Collapsible Panel",
+  collapse: true
+};
+
+export default CollapsiblePanel;

client/src/components/sidebar/search/Search.css

@@ -0,0 +1,52 @@
+.search-root {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+  background-color:transparent;  
+  margin: 0 10px;
+  padding: 0px;
+  border: 1px solid #FFFFFF66;
+  width: 100%;
+}
+
+.search-form { 
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color:transparent;
+  margin: 0; 
+    padding: 0 10px;
+      border: 1px solid #FFFFFF66;
+  width: 100%;
+
+}
+
+.search_string {
+  font-size: 1rem;  
+  width: 100%;
+  margin: 10px 0;
+  padding: 0 5px;
+}
+
+#cropperform-species {
+  font-size: 0.7rem;  
+}
+
+.search_submitButton {
+  width: 100%;
+	height: 1.5rem;  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+  padding: 0 20px;
+  border-radius: 5px;
+  text-align: center;
+  cursor: pointer;
+  color: #00000099;
+  font-size: 0.7rem;  
+}
+

client/src/components/sidebar/search/Search.js

@@ -0,0 +1,45 @@
+import React, {useState} from 'react'
+import './Search.css'
+import { BsForward, BsCameraVideo } from 'react-icons/bs';
+import { useHistory } from 'react-router-dom' 
+
+export default function Search() {
+    const history = useHistory();
+
+    const [search, setSearch] = useState('')
+	const [species, setSpecies] = useState('')
+
+ const handleSubmit = e => {
+	e.preventDefault()
+    history.push(`/posts/?search=${search}`)
+
+  }
+
+    return (
+	<div className="search-root"  >
+        <div className="search-form">
+
+            <input type="text" className=" search_string" name="search" placeholder="pet name, etc." value={search} onChange={(e)=>setSearch(e.target.value)}></input>		
+
+            <select id="cropperform-species" className="form-control" name="species" aria-required="true"  onChange={(e)=>setSpecies(e.target.value)}>
+            <option value="">Choose Species...</option>
+            <option value="Dog">Dog</option>
+            <option value="Cat">Cat</option>
+            <option value="Bird">Bird</option>
+            <option value="Horse">Horse</option>
+            <option value="Rabbit">Rabbit</option>
+            <option value="Reptile">Reptile</option>
+            <option value="Ferret">Ferret</option>
+            <option value="Other">Other</option>
+            </select>
+
+            <button className="search_submitButton" onClick={handleSubmit}>
+                <BsForward style={{marginRight: '0.5rem'}} size={25} />
+                <span>Update</span>
+            </button>            
+        </div>			
+    </div>            
+
+    )
+}
+

client/src/index.css

@@ -64,7 +64,7 @@ body {
   background-color: #E5E5E5;
   display: grid;
   min-height: 100vh;
-  grid-template-columns: 0.5fr 1fr 1fr 1fr;
+  grid-template-columns: 0.7fr 1fr 1fr 1fr;
   grid-template-rows: 0.2fr 3fr;
   grid-template-areas:
     "sidebar nav nav nav"

client/src/layouts/PostsPage/index.js

@@ -1,12 +1,12 @@
 import React, {useState, useEffect} from 'react'
-import { useHistory } from "react-router-dom"
+import { useHistory, useLocation } from "react-router-dom"
 import Posts from '../../components/posts/Posts'
-import {getPosts} from '../../network'
-
+import {getPosts, getSearchPosts} from '../../network'
 
 export default function PostsPage() {
   const [posts, setPosts] = useState([])
   const history = useHistory()
+    let location = useLocation()  
 
   useEffect(() => {
     (async () => {
@@ -16,6 +16,19 @@ export default function PostsPage() {
     })()
   }, [])
 
+  useEffect(() => {
+
+  const queryString = require('query-string');
+
+  const search = queryString.parse(location.search);
+
+    (async () => {
+      const result = await getSearchPosts(search)
+      console.log(result?.posts)
+      setPosts(result?.posts)
+    })()      
+  }, [location])  
+
   const likeClicked = async data => {
     console.log("like clicked", data)
   }