Issue #11: Criar Header

Signed-off-by: Gabriel_S <gash18@inf.ufpr.br>

src/App.js

-import React from 'react';
-import { HashRouter, Route } from 'react-router-dom';
-
-import CreateForm from './pages/CreateForm';
-import AnswerForm from './pages/AnswerForm';
+import React from "react";
+import { HashRouter, Route } from "react-router-dom";
+import "./global.css";
+import CreateForm from "./pages/CreateForm";
+import AnswerForm from "./pages/AnswerForm";
+import Header from "./components/header/header";
 
 function App() {
   return (
     <HashRouter>
+      <Header />
       <Route path="/create" component={CreateForm} />
       <Route path="/answer/:id" component={AnswerForm} />
     </HashRouter>

src/components/FormFieldSelect.js

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    padding: theme.spacing(3),
+    width: theme.spacing(100),
+    height: theme.spacing(16),
+    margin: theme.spacing(2)
+  },
+  questionsGrid: {
+    marginBottom: '20px'
+  },
+}));
+
+function FormFieldSelect(props) {
+  const classes = useStyles();
+
+  return (
+    <Paper className={classes.paper}>
+      <Grid container>
+        <Grid item xs={12} className={classes.questionsGrid}>
+          <TextField value={props.question} label="sua pergunta" onChange={e => props.setTextField(e.target.value, props.idq)}/>
+        </Grid>
+        <Grid item xs={11} className={classes.questionsGrid}>
+        <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            // value={age}
+            // onChange={handleChange}
+        >
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+        </Grid>
+        <Grid item xs={1}>
+          <IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
+            <DeleteOutlinedIcon />
+          </IconButton>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+
+}
+
+export default FormFieldSelect;
+
+{/* <InputLabel id="demo-simple-select-label">Age</InputLabel>
+<Select
+    labelId="demo-simple-select-label"
+    id="demo-simple-select"
+    value={age}
+    onChange={handleChange}
+>
+    <MenuItem value={10}>Ten</MenuItem>
+    <MenuItem value={20}>Twenty</MenuItem>
+    <MenuItem value={30}>Thirty</MenuItem>
+</Select> */}
\ No newline at end of file

src/components/header/header.jsx

+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import logo from "./header_imgs/imgsimmc-01.png";
+import { makeStyles } from "@material-ui/core";
+import MenuListComposition from "./header_components/MenuList";
+import { Avatar } from "@material-ui/core";
+
+import MenuItem from "@material-ui/core/MenuItem";
+import MenuList from "@material-ui/core/MenuList";
+import Button from "@material-ui/core/Button";
+import Popper from "@material-ui/core/Popper";
+import Grow from "@material-ui/core/Grow";
+import Paper from "@material-ui/core/Paper";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+
+const useStyles = makeStyles(theme => ({
+  barraBrasil: {
+    background: "#7F7F7F",
+    height: "20px",
+    padding: "0 0 0 10px",
+    display: "block"
+  },
+  menuBarraTemp: {
+    listStyle: "none"
+  },
+  menuBarraTempInterno: {
+    display: "inline",
+    float: "left",
+    paddingRight: "10px",
+    marginRight: "10px",
+    borderRight: "1px solid #EDEDED"
+  },
+  header: {
+    background: "#05a5dd",
+    width: "auto",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    height: "13%"
+  },
+  simmc: {
+    marginTop: "5%",
+    fontSize: "15px",
+    color: "#ffffff",
+    marginLeft: "2%",
+    ["@media (max-width:1040px)"]: {
+      display: "none"
+    },
+    ["@media (max-height:681px)"]: {
+      display: "none"
+    }
+  },
+  form_creator: {
+    color: "#ffffff",
+    marginTop: "10%",
+    ["@media (max-width:599px)"]: {
+      fontSize: "21px",
+      ["@media (max-width:525px)"]: {
+        marginTop: "5%",
+        marginLeft: "10%"
+      },
+      ["@media (max-width:337px)"]: {
+        fontSize: "19px"
+      }
+    },
+    ["@media (max-height:681px)"]: {
+      marginTop: "5%"
+    }
+  },
+  link: {
+    textDecoration: "none"
+  },
+  logo: {
+    marginLeft: "2.5%",
+    marginTop: "4%",
+    width: "85px",
+    ["@media (max-width:525px)"]: {
+      width: "65px",
+      ["@media (max-width:338px)"]: {
+        marginTop: "3%"
+      }
+    },
+    ["@media (max-height:681px)"]: {
+      width: "65px"
+    }
+  },
+  userImgContainer: {
+    display: "flex",
+    flexDirection: "column"
+  }
+}));
+
+export default function Header() {
+  const classes = useStyles();
+
+  return (
+    <Grid>
+      <header className={classes.header} alignItems="center ">
+        <Grid container item>
+          <Grid container item xs={3} sm={3} md={4}>
+            <a
+              href="https://simmc.c3sl.ufpr.br/"
+              title="Ir para a página inicial do SIMMC"
+            >
+              <img
+                src={logo}
+                alt="logo"
+                href="localhost3000/#/signup"
+                className={classes.logo}
+                maxWidth="100px"
+              />
+            </a>
+            <Grid
+              container
+              item
+              xs={5}
+              sm={6}
+              md={7}
+              alignContent="flexstart"
+              alignItems="start"
+            >
+              <a
+                href="https://simmc.c3sl.ufpr.br/"
+                title="Ir para a página inicial do SIMMC"
+                className={classes.link}
+              >
+                <h2 className={classes.simmc}>
+                  Sistema Integrado de Monitoramento do Ministério da Ciência,
+                  Tecnologia, Inovações e Comunicações
+                </h2>
+              </a>
+            </Grid>
+          </Grid>
+          <Grid container item xs={6} sm={6} md={4} justify="center">
+            <a
+              href="https://google.com.br"
+              title="Ir para a página inicial do Gerenciador de Formulários"
+              className={classes.link}
+            >
+              <h2 className={classes.form_creator}>
+                Gerenciador de Formulários
+              </h2>
+            </a>
+          </Grid>
+          <Grid
+            container
+            item
+            xs={3}
+            sm={3}
+            md={4}
+            className={classes.userImgContainer}
+            justify="center"
+            alignContent="flex-end"
+          >
+            <MenuListComposition />
+          </Grid>
+        </Grid>
+      </header>
+    </Grid>
+  );
+}

src/components/header/header_components/MenuList.jsx

+import React from "react";
+import Button from "@material-ui/core/Button";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import Grow from "@material-ui/core/Grow";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import MenuItem from "@material-ui/core/MenuItem";
+import MenuList from "@material-ui/core/MenuList";
+import { makeStyles } from "@material-ui/core/styles";
+import UserImg from "./../header_imgs/user.png";
+
+import { Avatar } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+  menuPopUp: {
+    alignContent: "start",
+    ["@media (max-width:346px)"]: {
+      width: "23%"
+    }
+  },
+  menuPopUpText: {
+    ["@media (max-width:525px)"]: {
+      fontSize: "13px"
+    }
+  },
+  popUpPaper: {
+    marginRight: "14%",
+    ["@media (max-width:525px)"]: {
+      marginRight: "0"
+    }
+  },
+  menuList: {
+    alignItems: "flex-start"
+  }
+}));
+
+/**
+ * Para fazer com que o componente não apareça em telas em que o usuário não está logado, basta fazer uma função de verificação para tal e retornar o componente,
+ * caso logado, ou NULL, caso não-logado.
+ */
+
+function MenuListComposition(props) {
+  const [open, setOpen] = React.useState(false);
+
+  const prevOpen = React.useRef(open);
+
+  const anchorRef = React.useRef(null);
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  function handleListKeyDown(event) {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+  React.useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Button
+        ref={anchorRef}
+        aria-controls={open ? "menu-list-grow" : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <Avatar alt="user_avatar" src={UserImg} className={classes.userImg} />{" "}
+      </Button>
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        className={classes.menuPopUp}
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "center top" : "center bottom"
+            }}
+          >
+            <Paper className={classes.popUpPaper}>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList
+                  className={classes.menuList}
+                  autoFocusItem={open}
+                  id="menu-list-grow"
+                  onKeyDown={handleListKeyDown}
+                  alignContent="flex-start"
+                >
+                  <MenuItem
+                    onClick={handleClose}
+                    className={classes.menuPopUpText}
+                  >
+                    Perfil
+                  </MenuItem>
+                  <MenuItem
+                    onClick={handleClose}
+                    className={classes.menuPopUpText}
+                  >
+                    Logout
+                  </MenuItem>
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </div>
+  );
+}
+
+export default MenuListComposition;

src/global.css

+@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  background: #eceff3;
+  -webkit-font-smoothing: antialiased;
+}
+
+body,
+input,
+button {
+  font-family: Roboto, sans-serif;
+}

src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
+
 serviceWorker.unregister();