Build new folder to store files + modifying the routers

src/Admin/Components/Components/DataCards/InstitutionsCard.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useEffect } from "react";
+// Maerial ui components
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import ListRoundedIcon from "@material-ui/icons/ListRounded";
+import ButtonGroup from "@material-ui/core/ButtonGroup";
+import { useStyles } from "../../Styles/DataCard";
+// Icons
+import EditRoundedIcon from "@material-ui/icons/EditRounded";
+//imports from local files
+import { GetAData } from "../../../Filters";
+import { Link } from 'react-router-dom'
+
+const DataCard = ({ match }) => {
+    console.log(match);
+    const classes = useStyles();
+
+    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+    const [item, setItem] = useState({}); //Necessary to consult the API, data
+
+    useEffect(() => {
+        fetch(GetAData("institutions", match.params.id))
+            .then((res) => res.json())
+            .then(
+                (result) => {
+                    setIsLoaded(true);
+                    setItem(result);
+                },
+                (error) => {
+                    setIsLoaded(true);
+                    setError(error);
+                }
+            );
+    }, []);
+
+    if (error) {
+        return <div>Houve um erro</div>;
+    } else if (!isLoaded) {
+        return <div>Loading...</div>;
+    } else {
+        const DATA = [
+            {
+                subTitle: "ID",
+                prop: item.id,
+            },
+            {
+                subTitle: "Nome",
+                prop: item.name,
+            },
+            {
+                subTitle: "Descrição",
+                prop: item.description,
+            },
+            {
+                subTitle: "Endereço",
+                prop: item.address,
+            },
+            {
+                subTitle: "Cidade",
+                prop: item.city,
+            },
+            {
+                subTitle: "País",
+                prop: item.country,
+            },
+        ];
+
+        return (
+            <Card className={classes.root} variant="outlined">
+                <CardContent>
+                    <div className={classes.displayRow}>
+                        <Typography className={classes.title} color="inherit" gutterBottom>
+                            {item.name}
+                        </Typography>
+                        <ButtonGroup
+                            color="primary"
+                            aria-label="outlined primary button group"
+                        >
+                            <Link to={`/admin/intitutions`}>
+                                <Button
+                                    startIcon={<ListRoundedIcon />}
+                                    color="primary"
+                                    variant="outlined"
+                                >
+                                    Listar
+                                </Button>
+                            </Link>
+
+                            <Link to={`/admin/intitutionEdit/${item.id}`}>
+                                <Button
+                                    startIcon={<EditRoundedIcon/>}
+                                    color="primary"
+                                    variant="outlined"
+                                >
+                                    Editar
+                                </Button>
+                            </Link>
+                        </ButtonGroup>
+                    </div>
+                    {DATA.map((info, index) => (
+                        <div className={classes.displayColumn} key={index}>
+                            <Typography color="initial" className={classes.subTitle}>
+                                {info.subTitle}
+                            </Typography>
+                            <Typography color="textSecondary">
+                                {info.prop === null ? "Sem dados" : info.prop}
+                            </Typography>
+                        </div>
+                    ))}
+                </CardContent>
+            </Card>
+        );
+    }
+};
+
+export default DataCard;