Created components MenuBar, SearchBar and prototype of page Search

package.json

@@ -8,6 +8,7 @@
     "@material-ui/styles": "^4.0.0",
     "axios": "^0.19.0",
     "binary-extensions": "^2.0.0",
+    "material-design-icons": "^3.0.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-grid-system": "^4.4.2",
@@ -15,7 +16,16 @@
     "react-responsive-carousel": "^3.1.47",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.3",
-    "react-star-ratings": "^2.3.0"
+    "react-star-ratings": "^2.3.0",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "eslint": "^5.6.0",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "prettier": "1.18.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

+import React, { useContext, useEffect } from 'react';
+import Home from './Pages/Home';
+import Search from './Pages/Search'
+import Header from './Components/Header'
+import EcFooter from './Components/EcFooter';
+import GNUAGPLfooter from './Components/AGPLFooter';
+import UserPage from './Pages/UserPage';
+import {BrowserRouter, Switch, Route} from 'react-router-dom';
+import { Store } from './Store'
+
+export default function App(){
+  // eslint-disable-next-line
+  const { state, dispatch } = useContext(Store)
+
+  useEffect(()=>{
+      dispatch({
+        type: 'WINDOW_SIZE',
+        innerWindow: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        }
+      })
+  },[])
+
+  useEffect(()=>{
+    const setWindowSize = () => {
+      dispatch({
+        type: 'WINDOW_SIZE',
+        innerWindow: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        }
+      })
+    }
+
+    window.addEventListener('resize',setWindowSize)
+
+    return () => window.removeEventListener('resize',setWindowSize)
+  },[window.innerWidth,window.innerHeight])
+
+  return(
+    <BrowserRouter>
+      <Header />
+      <div style={{backgroundImage: "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)", height:"5px"}}></div>
+      <Switch>
+        <Route path="/" exact={true} component={Home}/>
+        <Route path="/busca" component={Search} />
+        <Route path="/usuario" component={UserPage} />
+      </Switch>
+      <EcFooter/>
+      <GNUAGPLfooter/>
+    </BrowserRouter>
+  )
+}
\ No newline at end of file

src/Components/Dropdown.js

+import React, { useState, useRef, useEffect, useContext } from 'react'
+import { Link } from 'react-router-dom'
+import { Button, Grow, Paper, Popper, MenuItem, MenuList } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
+import styled from 'styled-components'
+
+import { Store } from '../Store';
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    
+  },
+  paper: {
+    marginRight: '2px',  
+  },
+});
+
+const DropdownStyled = styled.div`
+  *{
+    margin: 0 !important;
+    text-decoration: none;
+  }
+  Button{
+    text-transform: capitalize;
+  }
+
+`
+
+
+function Dropdown(props) {
+  const [open, setOpen] = useState(false);
+
+
+  const innerDropdown = useRef(null)
+
+  const { state , dispatch } = useContext(Store)
+    
+  useEffect(()=>{
+    const handleClickOutside = (event) => {
+      innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
+    }
+      
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  
+  },[])
+
+
+  const handleToggle = () => {
+    setOpen(true)
+    if(state.searchOpen)
+      dispatch({
+        type: 'HANDLE_SEARCH_BAR',
+        opened: false
+      })
+  }
+
+  return (
+    <DropdownStyled ref={innerDropdown}>
+      <Button
+        aria-controls="menu-list-grow"
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        {props.name}
+      </Button>
+      { open &&
+        <Popper open={open} keepMounted transition disablePortal>
+          {({ TransitionProps, placement }) => (
+            <Grow
+              {...TransitionProps}
+              style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
+            >
+              <Paper id="menu-list-grow">
+                <MenuList>
+                  {
+                    props.items.map((item)=>
+                      <Link key={item.name} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
+                    )
+                  }
+                </MenuList>
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+      }
+    </DropdownStyled>
+  );
+}
+
+export default withStyles(styles)(Dropdown)

src/Components/Header.js

+import React, { useContext } from 'react'
+
+import AcessibilityBar from './AcessibilityBar'
+import MenuBar from './MenuBar'
+import SearchBar from './SearchBar'
+
+import { Store } from '../Store';
+
+export default function Header(props){
+
+  const { state, dispatch } = useContext(Store)
+
+  const handleClickSearch = (open) => { 
+    dispatch({
+      type: "HANDLE_SEARCH_BAR",
+      opened: !state.searchOpen
+    })
+  }
+
+  return(
+      <>
+          <AcessibilityBar />
+          <MenuBar openSearchBar={handleClickSearch} />
+          {   state.searchOpen &&
+              <SearchBar />
+          }
+      </>
+  )
+}
\ No newline at end of file

src/Components/MenuBar.js

-import React, {Component} from 'react';
-import {Row, Col, Container} from 'react-grid-system'
+import React from 'react';
+import { Link } from 'react-router-dom'
+import { Container } from 'react-grid-system'
+import logo from '../img/logo_small.svg'
 import '../App.css';
+import Dropdown from './Dropdown';
+import { Button } from '@material-ui/core';
+import IconSearch from '@material-ui/icons/Search'
 
-import tumbnail from '../img/logo_small.svg'
-import BT from './Button';
-import Menulist from './menulist';
-import { Link } from 'react-router-dom'
-import {IoIosMenu} from "react-icons/io";
-// const logosStyle={
-//   borderRight:"1px rgba(0,0,0,.1) solid",
-//   paddingTop:"20px",
-//   paddingBottom:"5px",
-//   paddingLeft: "0px",
-//   paddingRight: "0px",
-//   justifyContent:"left",
-//   display:"inline-flex"
-// };
-const rowStyle={
-  verticalAlign: "left"
-};
+import styled from 'styled-components'
+
+const ContainerStyled = styled(Container)`
+    *{ text-decoration: none }
+    display: flex;
+    align-items: center;
+    border-top: 1px rgba(0,0,0,.1) solid;
+    padding: 5px;
+    *{
+      margin-left: 10px;
+    }
+`
+const ButtonStyled = styled(Button)`
+    text-transform: capitalize !important;
+`
+const IconSearchStyled = styled(IconSearch)`
+  color: #16b8dd;
+`
+const ImageStyled = styled.img`
+    height: 50px;
+    width: auto;
+    cursor: pointer;
+    margin: 0 10px;
+`
+
+export default function MenuBar(props){
+  const menuSobre = [
+    { name: "Sobre a Plataforma", href: "" },
+    { name: "Portais Parceiros", href: "" },
+    { name: "Termos de Uso", href: "" },
+    { name: "Contato", href: "" }
+  ]
 
+  const menuAjuda = [
+    { name: "Central de Ajuda", href: ""},
+    { name: "Publicando Recursos", href: ""},
+    { name: "Encontrando Recursos", href: ""},
+    { name: "Participando da Rede", href: ""},
+    { name: "Gerenciando a Conta", href: ""}
+  ]
 
-class MenuBar extends Component{
-  render(){
   return(
-      <Container fluid={true} style={{borderTop:"1px rgba(0,0,0,.1) solid", textAlign: "center"}}>
-        <Row style={rowStyle}>
-          <Col sm={2} md={1}>
-          <Link to="/">  <img src={tumbnail} height="35" alt="Logo Plataforma MEC" style={{padding: "10px"}}/></Link>
-          </Col>
-          <Col sm={2} md={2} style={{padding:"0px", alingItens: "left", alignSelf:"center"}}><Menulist children={<IoIosMenu/>} label={"Menu"}/></Col>
-          <Col sm={2} md={2} style={{padding:"0px", paddingTop: "-5px", alignSelf:"center"}}><Menulist label={"Ajuda"}/></Col>
-          <Col sm={2} md={2} style={{padding:"0px", alignSelf:"center"}}>< Link to ="/usuario">Busca</Link></Col>
-          <Col sm={4} md={3}style={{paddingTop:"10px"}} justify="Right">
-            <BT name="Entrar"/>
-            <BT name="Cadastre-se"/>
-          </Col>
-        </Row>
-      </Container>
+    <ContainerStyled fluid={true} >
+      <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
+      <Dropdown name="Sobre" items={menuSobre}/>
+      <Dropdown name="Ajuda" items={menuAjuda}/>
+      <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
+        <ButtonStyled >Educação Conectada</ButtonStyled>
+      </a>
+      <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
+    </ContainerStyled>
   );
 }
\ No newline at end of file
-}
- export default MenuBar;

src/Components/SearchBar.js

-import React, {Component} from 'react';
-import '../App.css';
-import {Row, Col} from 'react-grid-system';
-import Button from '@material-ui/core/Button';
-import Select from './Select';
-import TextField from '@material-ui/core/TextField';
-import {IoIosSearch} from 'react-icons/io';
-// const barStyle={
-//   backgroundColor: "white",
-//   border: "none"
-// };
-// const searchButton={
-//   backgroundColor: "white",
-//   border: "none",
-//   borderRadius: "0"
-// };
-
-class SearchBar extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      content: '',
-      filter: "Recursos",
-      showMenu: false,
+import React, { useState, useEffect, useContext } from 'react'
+import { Redirect } from 'react-router-dom'
+
+import IconSearch from '@material-ui/icons/Search'
+
+import { RadioGroup, Radio, FormControl, Select, MenuItem, Button, FormControlLabel, TextField } from '@material-ui/core'
+import styled from 'styled-components'
+
+import { Store } from '../Store';
+
+
+const dividerStyled = {
+	background: '#e0e0e0',
+  width: '1px',
+  content: "",
+  display: 'block',
+  top: '0',
+  bottom: '0',
+  right: '0',
+	minHeight: '70px',
+	margin: '0 30px'
 }
-    this.handleChange = this.handleChange.bind(this);
+
+const DividerVertical = () => <em style={dividerStyled}></em>
+
+const ButtonStyled = styled(Button)`
+    text-transform: capitalize !important;
+`
+const IconSearchStyled = styled(IconSearch)`
+  color: #16b8dd;
+`
+
+const TextFieldStyled = styled(TextField) `
+		flex-grow: 2;
+		margin: 0 2vw !important;
+`
+
+const RadioGroupStyled = styled(RadioGroup) `
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+`
+
+const FormControlLabelStyled = styled(FormControlLabel)`
+  *{
+    text-transform: uppercase;
+    color: #ff8a17 !important;
+    fontWeight: bolder;
   }
+`
+
+const RadioStyled = styled(Radio)`
+		color: #ff8a17;
+`
 
-  handleSearch (e) {
-    alert("Busca: "+ this.state.content)
+const SelectStyled = styled(Select)`
+  margin-right: 2vw;
+  *{
+    text-transform: uppercase;
+    color: #ff8a17 !important;
+    fontWeight: bolder;
   }
+`
+const MenuItemStyled = styled(MenuItem)`
+    text-transform: uppercase;
+    color: #ff8a17 !important;
+    fontWeight: bolder;
+`
 
-  openMenu () {
-    console.log(this.state.showMenu)
-    if(this.setState === true)
-      this.setState({
-        showMenu: false
-      })
-    else {
-      this.setState({
-        showMenu: true
-      })
+const Bar = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px rgba(0,0,0,.1) solid;
+`
+const Flex = styled.span `
+  display: flex;
+  align-items: center;
+  color: #787380;
+`
+
+export default function SearchBar() {
+  const [ query, setQuery ] = useState('')
+  const [ searchClass, setSearchClass ] = useState('LearningObject')
+
+  const { state, dispatch } = useContext(Store)
+
+  const [ goSearch, setGoSearch ] = useState(false) 
+
+  useEffect(()=>{
+    if(window.location.pathname.includes('busca')){
+        const urlParams = new URLSearchParams(window.location.search)
+        const urlQuery = urlParams.get('query')
+        const urlSearchClass = urlParams.get('search_class')
+        if( searchClass !== urlSearchClass || query !== urlQuery){
+          setQuery(urlQuery)
+          setSearchClass(urlSearchClass)
         }
       }
+  },[])
+
+  useEffect(()=>setGoSearch(false),[goSearch])
 
-  handleChange(event){
-    this.setState({content: event.target.value});
+	const handleChange = ( event ) => {
+    setQuery(event.target.value)
+  }
+  
+  const handleKeyDown = (event) => {
+    if(event.key === 'Enter' || event.type === 'click'){
+      dispatch({
+        type: 'SAVE_SEARCH',
+        newSearch: {
+          query: query!==''?query:'*',
+          class: searchClass
+        }
+      })
+      setGoSearch(true)
+    } 
   }
 
-  render () {
   return (
-       <form onSubmit={e => e.preventDefault()}>
-       <Row>
-          <Col sm={5} md={6}>
-            <TextField
-              type='text'
-              placeholder='O que está buscando?'
-              value={this.state.content}
-              onChange={this.handleChange}
+    <Bar>
+      {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />}
+      <TextFieldStyled
+        id="standard-search"
+        label="O que você está buscando"
+        type="search"
+        margin="normal"
+        value={query}
+        onChange={handleChange}
+        onKeyPress={handleKeyDown}
       />
-          </Col>
-          <Col sm={4} md={4}>
-            <Select/>
-          </Col>
-          <Col sm={3} md={2}>
-            <Button
-              type='submit'
-              size="medium"
-              onClick={this.handleSearch.bind(this)}>
-              <IoIosSearch  size="30px"/>
-              </Button>
-          </Col>
-          </Row>
-          </form>
-    )
+      <Flex>
+        <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
+        <Flex style={{"justifyContent": 'middle', 'flexDirection':'column'}}>
+          <div>Pressione "Enter"</div>
+          <div>ou click na lupa</div>
+        </Flex>
+        <DividerVertical />
+        { state.windowSize.width >=900?
+          <RadioGroupStyled row={true} 
+                      aria-label="Tipo" 
+                      name="types" value={searchClass} 
+                      onChange={
+                        (event)=> setSearchClass(event.target.value)
                       }
+          >
+            <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos"/>
+            <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções"/>
+            <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
+          </RadioGroupStyled>
+        :
+          <FormControl>
+            <SelectStyled
+              value={searchClass}
+              onChange={(event)=> setSearchClass(event.target.value)}
+            >
+              <MenuItemStyled value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
+              <MenuItemStyled value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
+              <MenuItemStyled value="User" aria-label="Usuários">Usuários</MenuItemStyled>
+            </SelectStyled>
+          </FormControl>
         }
-export default SearchBar;
+      </Flex>
+    </Bar>
+  )
+}
+

src/Components/SearchSection.js

 import React, {Component} from 'react';
 import '../App.css';
 import banner from '../img/bannerBusca.jpg';
-import SearchBar from './SearchBar';
-import {Row, Container} from 'react-grid-system';
+// import SearchBar from './SearchBar';
+import {Row} from 'react-grid-system';
 import {MdInfoOutline} from "react-icons/md"
 import { FaRegPlayCircle} from "react-icons/fa";
 
@@ -50,9 +50,9 @@ class SearchSection extends Component{
           Encontre e compartilhe vídeos, animações e muitos outros Recursos
         </h3>
       </div>
-      <Container style={{backgroundColor: "white" ,width: "50%" ,float: "center", alignItems: "center", borderRadius: "5px", color: this.state.color}}>
+      {/* <Container style={{backgroundColor: "white" ,width: "50%" ,float: "center", alignItems: "center", borderRadius: "5px", color: this.state.color}}>
           <SearchBar/>
-      </Container>
+      </Container> */}
           <div style={{paddingBottom: "100px", color: "white"}}>
             <a href="#sobre"><MdInfoOutline size="30px"/>SOBRE A PLATAFORMA</a>
             <a href="#apresentacao"> <FaRegPlayCircle  size="25px"/>VÍDEO DE APRESENTAÇÃO</a>

src/Pages/Home.js

 import React, {Component} from 'react';
 import './Styles/Home.css';
 import SearchSection from '../Components/SearchSection';
-import SubPages from '../Components/AreasSubPages';
+// import SubPages from '../Components/AreasSubPages';
 import StatsBar from '../Components/StatsBar';
 import Funcionalities from '../Components/Funcionalities';
 class App extends Component {
@@ -23,7 +23,6 @@ class App extends Component {
       return (
         <React.Fragment>
           <SearchSection function={this.changeBanner} banner={this.state.bannerState}/>
-          <SubPages banner={this.state.bannerState}/>
 
           <StatsBar/>
           <Funcionalities/>

src/Pages/Search.js

+import React, { useEffect, useState, useContext } from 'react';
+import axios from 'axios';
+
+// import ResourceCard from '../Components/ResourceCard'
+// import CollectionCard from '../Components/CollectionCard'
+// import UserCard from '../Components/UserCard'
+
+import {apiUrl} from '../env';
+import './Styles/Home.css';
+import { Store } from '../Store';
+
+export default function Search(props){
+
+  const { state, dispatch } = useContext(Store)
+  const [ results, setResults ] = useState([])
+  const [ page, ] = useState(0)
+  const [ resultsPerPage,  ] = useState(12)
+  const [ order,  ] = useState('score')
+
+  useEffect(()=>{
+    dispatch({
+      type: 'HANDLE_SEARCH_BAR',
+      opened: true
+    })
+
+    const urlParams = new URLSearchParams(window.location.search)
+    const query = urlParams.get('query')
+    const searchClass = urlParams.get('search_class')
+
+    if(state.search.query !== query || state.search.class !== searchClass){
+      dispatch({
+        type: 'SAVE_SEARCH',
+        newSearch: {
+          query: query,
+          class: searchClass
+        }
+      }) 
+    }
+
+    return () => dispatch({
+      type: 'HANDLE_SEARCH_BAR',
+      opened: false
+    })
+  },[])
+
+  useEffect(()=>{
+    axios.get(`${apiUrl}/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}&search_class=${state.search.class}`)
+    .then( res => { 
+      setResults(res.data)
+    })
+  
+  },[state.search])
+
+
+  return (
+    <React.Fragment>
+      <h1>Search for {state.search.query!=='*'?state.search.query:'all'} in {state.search.class}</h1>
+      {
+        state.search.class === 'LearningObject' &&
+        <ul>
+          {results.map((res)=><li key={res.id}> {res.name} </li>)}
+        </ul>
+      }
+      {state.search.class === 'Collection' &&
+        <ul>
+          {results.map((res)=><li key={res.id}> {res.name} </li>)}
+        </ul>
+      }  
+      {state.search.class === 'User' &&
+        <ul>
+          {results.map((res)=><li key={res.id}> {res.name} </li>)}
+        </ul>
+      }
+    </React.Fragment>
+  )
+}

src/Pages/Untitled Document

-import React, {Component} from 'react';
-
-
-class UserPage extends Component {
-    render() {
-      return (
-        <h1> Página visulizar usuário</h1>
-      );
-    }
-  }
-
-export default UserPage;

src/Store.js

+import React from 'react'
+
+export const Store = React.createContext()
+
+const initialState = {
+  searchOpen: false,
+  search: {
+    query: '*',
+    class: 'LearningObject'
+  },
+  windowSize: {
+    width: 0,
+    height: 0 
+  }
+}
+
+function reducer(state, action) {
+  switch (action.type){
+    case 'SAVE_SEARCH':
+      return {
+        ...state,
+        search: action.newSearch
+      }
+    case 'HANDLE_SEARCH_BAR':
+      return {
+        ...state,
+        searchOpen: action.opened
+      }
+    case 'WINDOW_SIZE':
+      return {
+        ...state,
+        windowSize: action.innerWindow
+      }
+    default: 
+      return state
+  }
+}
+
+export function StoreProvider(props) {
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+  const value = { state, dispatch };
+  return (
+    <Store.Provider value={value}>
+      {props.children}
+    </Store.Provider>
+  )
+}
\ No newline at end of file

src/env.js

 
-var apiDomain = 'http://localhost:5000',
+var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
     apiVersion = 'v1',
     apiUrl = apiDomain + '/' + apiVersion;
 

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import Home from './Pages/Home';
-import MenuBar from './Components/MenuBar';
-import EcFooter from './Components/EcFooter';
-import GNUAGPLfooter from './Components/AGPLFooter';
-import AcessibilityBar from './Components/AcessibilityBar';
-import UserPage from './Pages/UserPage';
 import * as serviceWorker from './serviceWorker';
-import {BrowserRouter, Switch, Route} from 'react-router-dom';
+
+import './index.css';
+import App from './App.js'
+import { StoreProvider } from './Store';
+
 
 ReactDOM.render(
-    <BrowserRouter>
-    <AcessibilityBar/>
-    <MenuBar/>
-    <div style={{backgroundImage: "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)", height:"5px"}}></div>
-      <Switch>
-        <Route path="/" exact={true} component={Home}/>
-        <Route path="/usuario" component={UserPage} />
-      </Switch>
-      <EcFooter/>
-      <GNUAGPLfooter/>
-    </BrowserRouter>
+  <StoreProvider>
+    <App />
+  </StoreProvider>
   , document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change