Merge branch 'issue/41-FIXSearchBar' into 'development'

Issue/41: FIX SearchBar now display a not found message

See merge request !34

src/components/fieldsListForms/CardForm.jsx

@@ -65,7 +65,7 @@ const useStyles = makeStyles(theme => ({
 
   numberOfAnswers: {
     fontSize: 18,
-    textAlign: "left",
+    textAlign: "center",
     margin: "7px"
   }
 }));

src/pages/ListForms.js

@@ -9,6 +9,7 @@ import { useHistory } from "react-router-dom";
 // Components
 import CardForm from "../components/fieldsListForms/CardForm.jsx";
 import Tab from "../components/fieldsListForms/Tab.jsx";
+import { Typography } from "@material-ui/core";
 const useStyles = makeStyles(theme => ({
   body: {
     marginBottom: "15%"
@@ -70,9 +71,10 @@ export default function ListForms() {
    * @param string - the string value to be searched.
    */
   function searching(string) {
+    console.log(string);
     setAuxForms(
       [...forms].filter(value => {
-        return value.title.includes(string);
+        return value.title.toLowerCase().includes(string.toLowerCase());
       })
     );
   }
@@ -108,8 +110,9 @@ export default function ListForms() {
         <Tab sort={sort} searching={searching} />
         <Container>
           <Grid className={classes.Forms}>Seus Formulários:</Grid>
-          <Grid container spacing={3} className={classes.body}>
-            {auxForms.map(form => (
+          <Grid container justify="center" spacing={3} className={classes.body}>
+            {auxForms.length ? (
+              auxForms.map(form => (
                 <Grid item xl={4} lg={4} md={4} sm={6} xs={12} zeroMinWidth>
                   <CardForm
                     id={form.id}
@@ -119,7 +122,14 @@ export default function ListForms() {
                     date={form.date}
                   />
                 </Grid>
-            ))}
+              ))
+            ) : (
+              <Grid item>
+                <Typography variant="h4">
+                  Nenhum formulário foi encontrado!
+                </Typography>
+              </Grid>
+            )}
           </Grid>
         </Container>
       </div>