Merge branch 'feature/searchResults' into 'master'

Feature/search results

See merge request yannis.huber/dieguete_voisipartage!6

frontend/package.json

@@ -3,13 +3,17 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.7.0",
+    "@material-ui/core": "^4.7.1",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/lab": "^4.0.0-alpha.34",
+
+    "@material-ui/pickers": "^3.2.8",
     "avant": "^0.2.0",
+    "@material-ui/pickers": "^3.2.8",
     "infinite-react-carousel": "^1.2.1",
     "material-ui-chip-input": "^2.0.0-beta.2",
     "react": "^16.12.0",
+    "react-calendar": "^2.19.2",
     "react-dom": "^16.12.0",
     "react-responsive": "^8.0.1",
     "react-router-dom": "^5.1.2",

frontend/src/App.js

@@ -4,6 +4,7 @@ import Homepage from "./components/Homepage";
 import NavigationBar from "./components/toolbar/NavigationBar";
 import AddItem from "./components/AddItem";
 import ModifyItem from "./components/ModifyItem";
+import SearchItem from "./components/SearchPage";
 
 import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
 import { ThemeProvider } from "@material-ui/core/styles";
@@ -52,7 +53,10 @@ function App() {
           <Route path="/additem">
             <AddItem />
           </Route>
-          <Route path="/modifyitem/:id" component={ModifyItem} />
+          <Route path="/searchitem">
+            <SearchItem />
+          </Route>
+          <Route path="/modifyitem/:id" component={ModifyItem}></Route>
           <Route path="/">
             <Homepage />
           </Route>

frontend/src/components/SearchPage.js

+import React from 'react';
+import ObjectList from './objectList/ObjectList'
+import Categories from './searchList/Categories'
+import { Grid, Box, Container } from '@material-ui/core'
+import Calendar from 'react-calendar'
+import Tags from '../data/categories'
+import Tmp from '../data/searchObjectDummy'
+import NavigationBar from './toolbar/NavigationBar'
+
+const tags = Tags
+const tmp = Tmp
+
+class SearchPage extends React.Component {
+
+    render() {
+        const {ObjectData} = this.props;
+
+
+
+        return (
+            <div style={{ padding: 20 }}>
+
+                <Box mx="auto">
+                <Grid
+                  container
+                  direction="row"
+                  justify="center"
+                  spacing = {0}
+                  alignItems="flex-start"
+                >
+                    <Grid item xs={4}>
+
+                        <Box mx="auto" style={{ padding: 10 }}>
+
+                            <Container maxWidth="sm">
+                            <Calendar />
+
+                            <h3>Filtre:</h3>
+                            <div style={{ width: '100%', height: '2px' }}>
+                                <Categories data={tags} />
+                            </div>
+                            </Container>
+
+                        </Box>
+                    </Grid>
+
+                    <Grid item xs={8}>
+                   <Container maxWidth="sm">
+                        <h3>Resultat de votre recherche:</h3>
+                        <Box component="div" mx="auto" overflow="auto">
+                            <div style={{ width: '100%', height: '260px' }}>
+                                <ObjectList data={tmp} logged={false} horizontally={false}/>
+                            </div>
+                        </Box>
+                    </Container>
+                    </Grid>
+
+                 </Grid>
+                 </Box>
+            </div>
+        );
+    }
+}
+export default (SearchPage);

frontend/src/components/searchList/Categories.js

+import React from 'react';
+import { Grid, FormControlLabel, Checkbox } from '@material-ui/core'
+
+
+class Categories extends React.Component {
+	render() {
+            const {data} = this.props;
+
+            return (
+                <Grid>
+                    {data.map(tag => (
+$
+                        <FormControlLabel
+                          control={<Checkbox />
+                        }
+                     label={tag}
+                     />
+                    ))}
+                </Grid>
+            );
+        }
+}
+export default Categories;
\ No newline at end of file

frontend/src/components/toolbar/search/SearchBar.js

@@ -3,10 +3,12 @@ import Autocomplete from "@material-ui/lab/Autocomplete";
 import { Paper, IconButton, Divider, TextField } from "@material-ui/core";
 import SearchIcon from "@material-ui/icons/Search";
 import { withRouter } from "react-router";
+import { Link } from "react-router-dom";
 
 import { withStyles } from "@material-ui/styles";
 import SearchEntry from "./SearchEntry";
 import data from "../../../data/objects";
+import sdata from "../../../data/searchObjectDummy";
 
 class SearchBar extends React.Component {
   static styles = {
@@ -38,10 +40,16 @@ class SearchBar extends React.Component {
   state = { searchText: "" };
 
   handleSearch = e => {
+
     const {
       target: { value }
     } = e;
+
     this.setState({ searchText: value });
+
+    if (e.key === 'Enter'){
+        this.context.router.push('/searchitem');
+    }
   };
 
   render() {
@@ -80,9 +88,13 @@ class SearchBar extends React.Component {
           renderOption={option => <SearchEntry data={option} />}
         />
         <Divider orientation="vertical" className={classes.divider} />
-        <IconButton aria-label="search" className={classes.iconButton}>
-          <SearchIcon />
-        </IconButton>
+
+        <Link to={'/searchitem'}>
+            <IconButton aria-label="search" className={classes.iconButton}>
+                <SearchIcon />
+            </IconButton>
+        </Link>
+
       </Paper>
     );
   }

frontend/src/data/searchObjectDummy.json

+[
+  {
+    "id": "1",
+    "imageUrl": ["https://picsum.photos/150/100","https://picsum.photos/150/100"],
+    "title": "Tondeuse à gazon",
+    "description": "Super tondeuse à gazon à prêter à qui veut faire une coupe à son herbe. N'a été utilisée que peu de fois. Très bon état.",
+    "categories": ["divers", "jardin"],
+    "availability": {
+      "isAvailable": true,
+      "startDate": "2019-08-11",
+      "endDate": "2019-12-12"
+    },
+    "isBorrowed": false,
+    "owner": {
+      "firstName": "Carl",
+      "lastName": "Buntschette"
+    }
+  },
+  {
+    "id": "3",
+    "imageUrl": ["https://picsum.photos/150/100","https://picsum.photos/150/100"],
+    "title": "Lawn mower3",
+    "description": "lorem ipsum lore am tde dkj da lkje asdlk n",
+    "categories": ["divers", "garden"],
+    "availability": {
+      "isAvailable": false,
+      "startDate": "2019-08-11",
+      "endDate": "2019-12-12"
+    },
+    "isBorrowed": false,
+    "owner": {
+      "firstName": "Carl",
+      "lastName": "Buntschette"
+    }
+  },{
+  "id": "7",
+  "imageUrl": ["https://picsum.photos/150/100"],
+  "title": "Lawn mower7",
+  "description": "a super coole lawn mower",
+  "categories": ["divers", "garden"],
+  "availability": {
+    "isAvailable": true,
+    "startDate": "2019-08-11",
+    "endDate": "2019-12-12"
+  },
+  "isBorrowed": false,
+  "owner": {
+    "firstName": "Carl",
+    "lastName": "Buntschette"
+  }
+}
+]