diff --git a/src/components/fieldsListForms/Tab.jsx b/src/components/fieldsListForms/Tab.jsx index 721bf7e45c5f8600b6f6a588a29e54d2dcb94dc5..50a2fecdc9e69437f941e7de72609692c30c7f1e 100644 --- a/src/components/fieldsListForms/Tab.jsx +++ b/src/components/fieldsListForms/Tab.jsx @@ -2,11 +2,11 @@ import React, { useState, useEffect } from "react"; import Button from "@material-ui/core/Button"; import FormControl from "@material-ui/core/FormControl"; import Grid from "@material-ui/core/Grid"; -import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/core/Select"; import FormHelperText from "@material-ui/core/FormHelperText"; import SearchBar from "./SearchBar.jsx"; +import { useHistory } from "react-router-dom"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(theme => ({ @@ -68,6 +68,7 @@ const useStyles = makeStyles(theme => ({ function Tab(props) { const classes = useStyles(); + const history = useHistory(); const [seletectedValue, setseletectedValue] = React.useState(""); /** Function to handle event */ @@ -110,4 +111,4 @@ function Tab(props) { ); } -export default Tab; \ No newline at end of file +export default Tab; diff --git a/src/pages/ListForms.js b/src/pages/ListForms.js index 92d90d469fb2812c7dbba239140da0355fa0b35d..a09fc5bbad9fcf1cc648c447590d96e364deac5f 100644 --- a/src/pages/ListForms.js +++ b/src/pages/ListForms.js @@ -8,8 +8,13 @@ import { makeStyles } from "@material-ui/core/styles"; // Components import CardForm from "../components/fieldsListForms/CardForm.jsx"; import Tab from "../components/fieldsListForms/Tab.jsx"; - +const useStyles = makeStyles(theme => ({ + body: { + marginBottom: "15%" + } +})); export default function ListForms() { + const classes = useStyles(); // Get the ID from the URL const { id } = useParams(); @@ -21,7 +26,7 @@ export default function ListForms() { /** * Sorting function to sort the forms by some especified type. - * @param type - the type of the sorting that was selected. + * @param type - the type of the sorting that was selected. */ function sort(type) { setAuxForms([]); @@ -38,20 +43,23 @@ export default function ListForms() { const tmp = [...forms].sort((a, b) => a.answersNumber < b.answersNumber); setAuxForms(tmp); } else if (type === 4) { - let tmp = [...forms].filter(value => { - return value.date; - }).sort((a, b) => a.date > b.date).concat( - [...forms].filter(value => { - return value.date === ""; + let tmp = [...forms] + .filter(value => { + return value.date; }) - ); + .sort((a, b) => a.date > b.date) + .concat( + [...forms].filter(value => { + return value.date === ""; + }) + ); setAuxForms(tmp); } } /** * Function to search for a form title. - * @param string - the string value to be searched. + * @param string - the string value to be searched. */ function searching(string) { setAuxForms( @@ -66,7 +74,7 @@ export default function ListForms() { * @param id - the user's id to have the forms listed. */ async function fetchData(id) { - const res = await api.get(`/user/list/${id}`).then(function (res) { + const res = await api.get(`/user/list/${id}`).then(function(res) { setForms(res.data.sort((a, b) => a.id > b.id)); setAuxForms(res.data.sort((a, b) => a.id > b.id)); setisLoaded(true); @@ -81,7 +89,7 @@ export default function ListForms() { <div> <Tab sort={sort} searching={searching} /> <Container> - <Grid container spacing={3}> + <Grid container spacing={3} className={classes.body}> {auxForms.map(form => ( <Grid item xl={4} lg={4} md={4} sm={6} xs={12} zeroMinWidth> <CardForm @@ -97,8 +105,8 @@ export default function ListForms() { </Container> </div> ) : ( - <Grid justify="center"> - <p>loading...</p> - </Grid> - ); -} \ No newline at end of file + <Grid justify="center"> + <p>loading...</p> + </Grid> + ); +}