requestDetailsPage

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from "react-redux";
import classes from './request-details.module.css';
import Paper from "@material-ui/core/Paper";
import Table from "@material-ui/core/Table";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
import TableBody from "@material-ui/core/TableBody";
import TableContainer from "@material-ui/core/TableContainer";
import { fetchPendingRequestsAction } from "../../state/actions/request-actions";
import Loading from "../../loading/loading";

export const RequestDetails = props => {

    // state data
    const loading = useSelector(state => state.requests.loading);
    const pendingRequests = useSelector(state => state.requests.pendingRequests);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchPendingRequestsAction());
        console.log(pendingRequests);
        // eslint-disable-next-line
    }, []);

    const { id } = useParams();
    const [request, setRequest] = useState([]);

    const requestDetails = (

        <TableContainer component={Paper} className={`shadow-md`}>
            <Table>
                <TableHead className={`bg-gray-200`}>
                    <TableRow>
                        <TableCell><span className={`font-bold`}>worker</span></TableCell>
                        <TableCell><span className={`font-bold`}>action</span></TableCell>
                        <TableCell><span className={`font-bold`}>admin</span></TableCell>
                        <TableCell><span className={`font-bold`}>requestor</span></TableCell>
                        <TableCell><span className={`font-bold`}>name</span></TableCell>
                        <TableCell><span className={`font-bold`}>task_id</span></TableCell>
                        <TableCell><span className={`font-bold`}>path</span></TableCell>
                        <TableCell><span className={`font-bold`}>table_name</span></TableCell>
                    </TableRow>
                </TableHead>

                {/*<TableBody>*/}
                {/*    <TableRow className={`hover:bg-gray-200`}>*/}
                {/*        <TableCell>{ request.worker }</TableCell>*/}
                {/*        <TableCell>{ request.action }</TableCell>*/}
                {/*        <TableCell>{ request.admin }</TableCell>*/}
                {/*        <TableCell>{ request.requestor }</TableCell>*/}
                {/*        <TableCell>{ request.name }</TableCell>*/}
                {/*        <TableCell>{ request.task_id }</TableCell>*/}
                {/*        <TableCell>{ request.path }</TableCell>*/}
                {/*        <TableCell>{ request.table_name }</TableCell>*/}
                {/*    </TableRow>*/}
                {/*</TableBody>*/}

            </Table>
        </TableContainer>
    );


    if(loading) return (<Loading />);

    return (
        <div className={`${classes.adminPageContainer} mt-4`}>
            <h2 className={`my-2`}>Hi, Kwaku</h2>
            <h6 className={`my-2`}>Below are the request parameters</h6>
            <h3 className={`my-2`}>
                {/*{ request.admin }*/}
            </h3>
            <div className={`${classes.buttons} my-2`}>
                <button className={`mr-2 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full`}>
                    APPROVE
                </button>
                <button className={`ml-2 bg-red-700 hover:bg-red-900 text-white font-bold py-2 px-8 rounded-full`}>
                    DENY
                </button>
            </div>
        </div>
    );

};