FInish to build de activity section + finish to improve the navigation

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";
+// 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";
+//imports from local files
+import { GetAData } from "../../../Filters";
+import { GetSpecificData } from '../../../Services';
+import { Link } from 'react-router-dom'
+
+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 
+    
+     //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 <div>Loading...</div>;
+    } 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: item["created_at"],
+            },
+            {
+                subTitle: "Recipient type",
+                prop: item["recipient_type"],
+            },
+            
+        ];
+
+        return (
+            <Card className={classes.root} variant="outlined">
+                <CardContent>
+                    <div className={classes.displayRow}>
+                        <Typography className={classes.title} color="inherit" gutterBottom>
+                            {item.id}
+                        </Typography>
+                        <ButtonGroup
+                            color="primary"
+                            aria-label="outlined primary button group"
+                        >
+                            <Link to={`/admin/activities`}>
+                                <Button
+                                    startIcon={<ListRoundedIcon />}
+                                    color="primary"
+                                    variant="outlined"
+                                >
+                                    Listar
+                                </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 ActivityCard;

src/Admin/Pages/Pages/SubPages/Activity.js

@@ -37,6 +37,8 @@ import AddRoundedIcon from "@material-ui/icons/AddRounded";
 import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
 import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
 import VisibilityIcon from "@material-ui/icons/Visibility";
+//routers
+import {Link} from 'react-router-dom';
 
 let currPage = 0;
 let viewItem = {};
@@ -240,6 +242,7 @@ const Activity = () => {
     } else if (!isLoaded) {
         return <div>Loading...</div>;
     } else {
+
         return showDataActivity ? (
             <EditLanguage
                 editInfo={viewItem}
@@ -344,7 +347,7 @@ const Activity = () => {
                         <TableBody>
                             {items.map((row, index) =>
                                 index === items.length - 1 ? (
-                                    <div style={{ padding: "1em" }}>
+                                    <StyledTableRow style={{ padding: "1em" }}>
                                         {/* Button to load more data */}
                                         <Button
                                             color="primary"
@@ -371,7 +374,7 @@ const Activity = () => {
                                                     "Carregar mais itens"
                                                 )}
                                         </Button>
-                                    </div>
+                                    </StyledTableRow>
                                 ) : (
                                         <StyledTableRow key={index}>
                                             <StyledTableCell component="th" scope="row">
@@ -379,7 +382,7 @@ const Activity = () => {
                                             </StyledTableCell>
                                             <StyledTableCell align="right">
                                                 {
-                                                    row.owner.name === null ? '' :  row.owner.name
+                                                    row.owner === null ? '' : row.owner.name
                                                 }
                                             </StyledTableCell>
                                             <StyledTableCell align="right">
@@ -387,14 +390,11 @@ const Activity = () => {
                                             </StyledTableCell>
                                             <StyledTableCell align="right">{row.privacy}</StyledTableCell>
                                             <StyledTableCell align="right">
-                                                <IconButton
-                                                    onClick={() => {
-                                                        currPage = 0;
-                                                        HandleButtonViewClicked(index);
-                                                    }}
-                                                >
-                                                    <VisibilityIcon style={{ fill: "#00bcd4" }} />
-                                                </IconButton>
+                                                <Link to={`/admin/activity/${row.id}`}>
+                                                    <IconButton>
+                                                        <VisibilityIcon style={{ fill: "#00bcd4" }} />
+                                                    </IconButton>
+                                                </Link>
                                             </StyledTableCell>
                                         </StyledTableRow>
                                     )