File that display a table with the informations of the API

src/Admin/Components/Components/NoteVariables.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, { useEffect, useState } from 'react';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
+import BlockRoundedIcon from "@material-ui/icons/BlockRounded";
+import IconButton from '@material-ui/core/IconButton';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import { apiUrl } from '../../../env';
+import DataCard from '../Components/DataCard';
+
+const StyledTableCell = withStyles((theme) => ({
+    head: {
+        backgroundColor: theme.palette.common.black,
+        color: theme.palette.common.white,
+    },
+    body: {
+        fontSize: 14,
+    },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+    root: {
+        '&:nth-of-type(odd)': {
+            backgroundColor: theme.palette.action.hover,
+        },
+    },
+}))(TableRow);
+
+//Function that returns an object with the content of the api 
+function createData(id, name, code, weight, active, scoreType, createdAt, updateAt) {
+    return { id, name, code, weight, active, scoreType, createdAt, updateAt};
+}
+
+const useStyles = makeStyles({
+    table: {
+        minWidth: 700,
+    },
+    root: {
+        minWidth: 275, 
+        boxShadow : '2px 2px 1px #A9A9A9'
+    },
+    bullet: {
+        display: 'inline-block',
+        margin: '0 2px',
+        transform: 'scale(0.8)',
+    },
+    title: {
+        fontSize: 28, 
+        fontWeight : "500"
+    },
+    pos: {
+        marginBottom: 12,
+    },
+});
+
+
+const NoteVariables = () => {
+    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 [items, setItems] = useState([]); //Necessary to consult the API, data
+    const [itemsSecondPage, setItemSecondPage] = useState([]); //Necessary to consult the API, data 
+
+    const [data , setData] = useState({}); // Data that will be used to display the content of the row in full screen, when its clicked
+    const [viewData, setViewData] = useState(false); //Controlls the state, if someone wants to see the data
+
+    const productionRoute = 'scores?filter=%7B%7D&page=0&range=%5B0%2C9%5D&results_per_page=10&sort=%5B"id"%2C"DESC"%5D';
+    const productinRouteSecondPage = 'scores?filter=%7B%7D&page=1&range=%5B10%2C19%5D&results_per_page=10&sort=%5B"id"%2C"DESC"%5D';
+
+    useEffect(() => {
+        fetch(apiUrl + '/' + productionRoute)
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    setIsLoaded(true);
+                    setItems(result);
+                },
+                (error) => {
+                    setIsLoaded(true);
+                    setError(error);
+                }
+            )
+    }, []);
+
+    useEffect(() => {
+        fetch(apiUrl + '/' + productinRouteSecondPage)
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    setIsLoaded(true);
+                    setItemSecondPage(result);
+                },
+                (error) => {
+                    setIsLoaded(true);
+                    setError(error);
+                }
+            )
+    }, [])
+
+
+    if (error) {
+        return <div>Error: {error.message}</div>;
+    } else if (!isLoaded) {
+        return <div>Loading...</div>;
+    } else {
+
+        // Begin of the processing data 
+        const rows = []; // Rows of the table
+        for (var i = 0; i < items.length; i++) {
+            const item = { ...items[i] };
+            rows.push(createData(item.id, item.name, item.code, item.weight, item.active, item.score_type[0], item.created_at, item.updated_at))
+        }
+
+        for (i = 0; i < itemsSecondPage.length; i++) {
+            const item = { ...itemsSecondPage[i] };
+            rows.push(createData(item.id, item.name, item.code, item.weight, item.active, item.score_type[0], item.created_at, item.updated_at))
+        }
+        // End of processing data 
+
+        // i = index of the array of the table
+        const viewDataHandler = (i) => {
+            const item = { ...rows[i] };  
+            setData(item);
+            setViewData(!viewData)
+        };
+
+
+        return (
+            !viewData ?
+                <TableContainer component={Paper}>
+                    <Table className={classes.table} aria-label="customized table">
+                        <TableHead>
+                            <TableRow>
+                                <StyledTableCell>ID</StyledTableCell>
+                                <StyledTableCell align="right">Nome</StyledTableCell>
+                                <StyledTableCell align="right">Código</StyledTableCell>
+                                <StyledTableCell align="right">Peso</StyledTableCell>
+                                <StyledTableCell align="right">Ativo</StyledTableCell>
+                                <StyledTableCell align="right">Score Type</StyledTableCell>
+                                <StyledTableCell align="right">Visualizar</StyledTableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {rows.map((row, index) => (
+                                <StyledTableRow key={index}>
+                                    <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
+                                    <StyledTableCell align="right">{row.name}</StyledTableCell>
+                                    <StyledTableCell align="right">{row.code}</StyledTableCell>
+                                    <StyledTableCell align="right">{row.weight}</StyledTableCell>
+                                    <StyledTableCell align="right">
+                                        {
+                                            row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+                                        }
+                                    </StyledTableCell>
+                                    <StyledTableCell align="right">{row.scoreType}</StyledTableCell>
+                                    <StyledTableCell align="right">
+                                        <IconButton onClick={() => viewDataHandler(index)}>
+                                            <VisibilityIcon style={{ fill: '#8A2BE2' }} />
+                                        </IconButton>
+                                    </StyledTableCell>
+                                </StyledTableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+
+                :
+                
+                // When the user wanna see the data of a row in full screen
+                <DataCard data={data} viewData={() => setViewData(!viewData)}/>
+        )
+    }
+}
+
+
+export default NoteVariables;
\ No newline at end of file