Update admin system

src/Admin/Components/Components/DataCards/ActivityCard.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";
+import moment from 'moment';
+// 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";
+import Grid from "@material-ui/core/Grid";
+//imports from local files
+import { GetAData } from "../../../Filters";
+import { GetSpecificData } from '../../../Services';
+import { Link } from 'react-router-dom'
+import LoadingSpinner from '../../../../Components/LoadingSpinner';
+
+const ActivityCard = ({ 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 
+
+    const DisplayDate = (date) => {
+        const convertedData = moment.utc(date);
+        return moment(convertedData)
+            .format("LLL")
+            .toString();
+    };
+    
+     //getting data from server
+     useEffect(() => {
+        const headers = {
+            Accept: "application/json",
+            "Content-Type": "application/json; charset=utf-8",
+            "access-token": sessionStorage.getItem("@portalmec/accessToken"),
+            client: sessionStorage.getItem("@portalmec/clientToken"),
+            uid: sessionStorage.getItem("@portalmec/uid"),
+        };
+
+        GetSpecificData(GetAData("activities", match.params.id), headers).then(
+            (res) => {
+                if (res.state) {
+                    setItem(res.data);
+                    setIsLoaded(true);
+                    setError(false);
+                } else {
+                    setIsLoaded(true);
+                    setError(true);
+                }
+            }
+        );
+    }, []);
+
+    if (error) {
+        return <div>Houve um erro</div>;
+    } else if (!isLoaded) {
+        return <LoadingSpinner text="Carregando..."/>
+    } else {
+        console.log(item)
+        const DATA = [
+            {
+                subTitle: "ID",
+                prop: item.id,
+            },
+            {
+                subTitle: "DONO(A)",
+                prop: item.owner === null ? '' : item.owner.name
+            },
+            {
+                subTitle: "Trackable type",
+                prop: item["trackable_type"],
+            },
+            {
+                subTitle: "Atividade",
+                prop: item.activity,
+            },
+            {
+                subTitle: "Privacidade",
+                prop: item.privacy,
+            },
+            {
+                subTitle: "Criado em",
+                prop: DisplayDate(item["created_at"]),
+            },
+            {
+                subTitle: "Recipient type",
+                prop: item["recipient_type"],
+            },
+            
+        ];
+
+        return (
+            <Card>
+                <CardContent>
+                    <Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
+                        <Grid item>
+                            <Typography className={classes.title} color="inherit" gutterBottom>
+                                {item.id}
+                            </Typography>
+                        </Grid>
+                        <Grid item>
+                            <ButtonGroup
+                                color="primary"
+                                aria-label="outlined primary button group"
+                            >
+                                <Link style={{textDecoration: 'none'}} to={`/admin/activities`}>
+                                    <Button
+                                        startIcon={<ListRoundedIcon />}
+                                        color="primary"
+                                        variant="outlined"
+                                    >
+                                        Listar
+                                    </Button>
+                                </Link>
+                            </ButtonGroup>
+                        </Grid>
+                    </Grid>
+                    {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 ActivityCard;