From 08c9bc9881f8cf2ee62e56ca096ecff6f9fc9c2e Mon Sep 17 00:00:00 2001
From: muhammadbilalali1799 <bsef17m043@pucit.edu.pk>
Date: Sat, 19 Jun 2021 10:10:09 +0500
Subject: [PATCH] search bar added, filteration not applied, card view again
 change to list

---
 MernApp/client/package-lock.json              |   3 +-
 MernApp/client/src/App.js                     |  14 +-
 .../RestaurantListShow.jsx                    | 235 ++++++++++--------
 MernApp/client/src/css/restaurantlistshow.css |  92 ++++++-
 4 files changed, 233 insertions(+), 111 deletions(-)

diff --git a/MernApp/client/package-lock.json b/MernApp/client/package-lock.json
index 5bdaffa..3a9c6d1 100644
--- a/MernApp/client/package-lock.json
+++ b/MernApp/client/package-lock.json
@@ -15039,7 +15039,8 @@
         },
         "ssri": {
           "version": "6.0.1",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
           "requires": {
             "figgy-pudding": "^3.5.1"
           }
diff --git a/MernApp/client/src/App.js b/MernApp/client/src/App.js
index f84d1de..763967a 100644
--- a/MernApp/client/src/App.js
+++ b/MernApp/client/src/App.js
@@ -1,19 +1,17 @@
-import { Route, Switch} from "react-router-dom";
-import ComponentA from "./Components/Test/ComponentA";
-import Driver from './Driver'
-import React, { Component } from 'react';
+import { Route, Switch } from "react-router-dom";
+import Driver from "./Driver";
+import React, { Component } from "react";
 
 class App extends Component {
-  
   render() {
     // console.log("A render")
     return (
       <div>
-         <Driver/>
-      {/* <ComponentA/> */}
+        <Driver />
+        {/* <ComponentA/> */}
       </div>
     );
   }
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/MernApp/client/src/Components/frontend-components/RestaurantListShow.jsx b/MernApp/client/src/Components/frontend-components/RestaurantListShow.jsx
index 3baf92b..faef7af 100644
--- a/MernApp/client/src/Components/frontend-components/RestaurantListShow.jsx
+++ b/MernApp/client/src/Components/frontend-components/RestaurantListShow.jsx
@@ -1,112 +1,153 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import "../../css/restaurantlistshow.css";
-import axios from 'axios'
-import SelectBranch from '../frontend-components/FilterBranch';
-import WaiterImage from '../../images/waiter.png';
+import axios from "axios";
+import SelectBranch from "../frontend-components/FilterBranch";
+import WaiterImage from "../../images/waiter.png";
 
 class Rest extends Component {
-  
-    constructor(props) {
-      super(props);
-      this.state = {
-          isParent :false ,
-          isChild :false ,
-          branchesdetails:[] , 
-          restaurantData:[] , 
-          restaurantId:null,
-          isLoaded:false,
-          button:'<button type="btn" class="btn btn-info">Click</button>'
-      }
-      this.goBack = this.goBack.bind(this);
+  constructor(props) {
+    super(props);
+    this.state = {
+      isParent: false,
+      isChild: false,
+      branchesdetails: [],
+      restaurantData: [],
+      restaurantId: null,
+      isLoaded: false,
+      button: '<button type="btn" class="btn btn-info">Click</button>',
+    };
+    this.goBack = this.goBack.bind(this);
   }
-  goBack(){
+  goBack() {
     this.setState({
-      isParent :true ,
-      isChild :false 
-  })
+      isParent: true,
+      isChild: false,
+    });
   }
-showHome(id){
-  
-  this.setState({
-      isParent :false ,
-      isChild :true ,
-      restaurantId:id
-  })
-}
-componentDidMount=()=>{
-  this.goBack();
-  this.setState({
-    resData:[]
-  })
+  showHome(id) {
+    this.setState({
+      isParent: false,
+      isChild: true,
+      restaurantId: id,
+    });
+  }
+  componentDidMount = () => {
+    this.goBack();
+    this.setState({
+      resData: [],
+    });
     try {
-        //FETCHING RESTAURANTS
-        axios.get('/restaurant/get')
-        .then((data)=>{
-            if(data.data.status == "error")
-            {
-                // alert(data.data.message);
-                console.log(data.data.message);
-            }
-            else if(data.data.status == "ok" && data.data.resData.length)
-            {
-                this.setState({
-                    restaurantData:data.data.resData,
-                    isLoaded:true,
-                    isParent:true
-                })
-                console.log(this.state.restaurantData)
-                // alert("Restaurant fetched successfully!");
-            }
+      //FETCHING RESTAURANTS
+      axios
+        .get("/restaurant/get")
+        .then((data) => {
+          if (data.data.status == "error") {
+            // alert(data.data.message);
+            console.log(data.data.message);
+          } else if (data.data.status == "ok" && data.data.resData.length) {
+            this.setState({
+              restaurantData: data.data.resData,
+              isLoaded: true,
+              isParent: true,
+            });
+            console.log(this.state.restaurantData);
+            // alert("Restaurant fetched successfully!");
+          }
         })
-        .catch((e)=>{
-            alert(e);
-            console.log(e);
+        .catch((e) => {
+          alert(e);
+          console.log(e);
         });
-     } 
-     catch (error) {
-        console.log(error);
-      }
-}
-render() {
-  const {isChild , isParent , isLoaded} = this.state;
-  if(isParent && isLoaded){
-    return (
-      <div className="container mt-4 mb-4 p-2 bg-light"> <div className="d-flex justify-content-center mb-4"><span style={{letterSpacing:2,fontFamily:'sans-serif',fontSize:40,color:'darkslategrey',fontWeight:'bold'}}>Restaurant Cards</span></div>
-        <div className="row justify-content-around">
-          {this.state.restaurantData.map((rs) => (
-            <div class="col-md-3 p-2 m-2 shadow bg-dark text-white card rounded" style={{width:'30rem'}} style={{cursor:'pointer'}}>
-              <img class="card-img-top border-dark" src={`/Images/Restaurants/${rs.fName}`} alt="Card image cap" id={rs._id} onClick={this.showHome.bind(this , rs._id)}/>
-              <div class="card-body">
-                <h2 className="res-name-hover" style={{letterSpacing:2,fontFamily:'sans-serif'}}>{rs.name}</h2>
-                <p className="small" style={{letterSpacing:1,fontFamily:'sans-serif',color:'blue'}}>branches{rs.branches}</p>
-                <p class="card-text" style={{letterSpacing:1}}>{rs.description}</p>
-              </div>
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  render() {
+    const { isChild, isParent, isLoaded } = this.state;
+    if (isParent && isLoaded) {
+      return (
+        <div className="container">
+          <div class="wrapper">
+            <div class="searchBar">
+              <input
+                id="searchQueryInput"
+                type="text"
+                name="searchQueryInput"
+                placeholder="Search"
+                value=""
+              />
+              <button
+                id="searchQuerySubmit"
+                type="submit"
+                name="searchQuerySubmit"
+              >
+                <i class="fas fa-search"></i>
+              </button>
             </div>
-          ))}
-      </div>
-      </div>
-    );
-  }else if(isChild && isLoaded){
-   return(
-     <div>
-       <SelectBranch
-      resId = {this.state.restaurantId} />
-     </div>
-   ) 
-  }
-  else if(!isLoaded){
-    return(
-      <div className=" mx-auto d-flex flex-row justify-content-center mt-4 mb-4 pt-4 pb-4">
-        <div className="d-flex align-items-center">
-          <h2 className="p-2 m-2" style={{fontFamily:'sans-serif',letterSpacing:2,fontWeight:'bold'}}>Your restaurant data will load here.</h2>
+          </div>
+
+          <div className="row justify-content-around mb-5">
+            {this.state.restaurantData.map((rs) => (
+              <div
+                className="single-restaurant-list mt-1 mb-1"
+                id={rs._id}
+                onClick={this.showHome.bind(this, rs._id)}
+              >
+                <div className="d-flex restaurant-flex flex-row">
+                  <div className="restaurant-list-photo p-3">
+                    <div className="restaurant-image-box">
+                      <img
+                        class="restaurant-list-img"
+                        src={`/Images/Restaurants/${rs.fName}`}
+                      />
+                    </div>
+                  </div>
+                  <div className="restaurant-list-details p-3">
+                    <div className="d-flex flex-column ">
+                      <div className="d-flex flex-row align-items-center">
+                        <div className="name p2">
+                          <h2>{rs.name}</h2>
+                          <hr />
+                        </div>
+                      </div>
+                      <div className="mt-0">
+                        <p className="text-muted pt-2">{rs.description}</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
-        <div className="p-2 m-2">
-          <img src={WaiterImage} style={{width:'22vw',height:'48vh'}}/>
+      );
+    } else if (isChild && isLoaded) {
+      return (
+        <div>
+          <SelectBranch resId={this.state.restaurantId} />
         </div>
-      </div>
-    )
-  }
-    
+      );
+    } else if (!isLoaded) {
+      return (
+        <div className=" mx-auto d-flex flex-row justify-content-center mt-4 mb-4 pt-4 pb-4">
+          <div className="d-flex align-items-center">
+            <h2
+              className="p-2 m-2"
+              style={{
+                fontFamily: "sans-serif",
+                letterSpacing: 2,
+                fontWeight: "bold",
+              }}
+            >
+              Your restaurant data will load here.
+            </h2>
+          </div>
+          <div className="p-2 m-2">
+            <img src={WaiterImage} style={{ width: "22vw", height: "48vh" }} />
+          </div>
+        </div>
+      );
+    }
   }
 }
 export default Rest;
diff --git a/MernApp/client/src/css/restaurantlistshow.css b/MernApp/client/src/css/restaurantlistshow.css
index 0b90a52..243c6e6 100644
--- a/MernApp/client/src/css/restaurantlistshow.css
+++ b/MernApp/client/src/css/restaurantlistshow.css
@@ -1,6 +1,88 @@
-.res-name-hover:hover{
-color:aqua
+.restaurant-list-holder {
+  overflow: hidden;
+}
+.single-restaurant-list {
+  background-color: #26272b;
+  width: 80vw;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+}
+.single-restaurant-list:hover {
+  transform: scale(1.01);
+  /* opacity: 0.85; */
+}
+
+.restaurant-image-box {
+  position: relative;
+  background-color: white;
+  width: 100%;
+  height: auto;
+}
+.restaurant-list-img {
+  position: relative;
+  height: 150px;
+  width: 150px;
+  border: 0.001rem solid white;
+}
+.restaurant-list-para {
+  font-size: 15px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.restaurant-list-details div {
+  color: white;
+  font-size: 15px;
+}
+.name {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  letter-spacing: 0.3vw;
+}
+.p2 h2 {
+  color: rgb(27, 184, 184);
+  text-decoration: none;
+}
+.single-restaurant-list:hover {
+  cursor: pointer;
+}
+
+button {
+  font-family: "Times New Roman", Times, serif;
+  letter-spacing: 3px;
+}
+
+.wrapper {
+  width: 100%;
+  max-width: 25.25rem;
+  margin: 1rem auto;
+}
+
+.searchBar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+#searchQueryInput {
+  width: 100%;
+  height: 2.8rem;
+  background: #f5f5f5;
+  outline: none;
+  border: none;
+  border-radius: 1.625rem;
+  padding: 0 3.5rem 0 1.5rem;
+  font-size: 1rem;
+}
+
+#searchQuerySubmit {
+  width: 3.5rem;
+  height: 2.8rem;
+  margin-left: -3.5rem;
+  background: none;
+  border: none;
+  outline: none;
+}
+
+#searchQuerySubmit:hover {
+  cursor: pointer;
 }
-.res-name-hover{
-  color:bisque;
-}
\ No newline at end of file