Rework to fix dashboard pagination

package.json

@@ -3,9 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@patternfly/react-core": "^3.129.3",
+    "@patternfly/react-table": "^2.24.64",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/user-event": "^7.2.1",
+    "apollo-boost": "^0.4.7",
+    "bootstrap": "^4.4.1",
+    "graphql": "^14.5.8",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.16",
+    "react-bootstrap-validation": "^0.1.11",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.2.0"
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,13 +1,21 @@
 .App {
   text-align: center;
+  background-color: grey: 
 }
 
 .App-logo {
   height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: black;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -18,5 +26,14 @@
 }
 
 .App-link {
-  color: #09d3ac;
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/App.js

@@ -1,25 +1,11 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
+import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';
+import ShowComponents from './index.jsx';
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Route exact path="/" component={ ShowComponents }/>
+    </Router>
   );
 }
 

src/App.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import App from './App';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
 });

src/ReactServices.js

@@ -0,0 +1,100 @@
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    window.location.hostname === '[::1]' ||
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'ReactService' in navigator) {
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/ReactService.js`;
+
+      if (isLocalhost) {
+        checkValidReactService(swUrl, config);
+        navigator.ReactService.ready.then(() => {
+          console.log(
+            'webapp is running'
+          );
+        });
+      } else {
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.ReactService
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const rservice = registration.installing;
+        if (rservice == null) {
+          return;
+        }
+        rservice.onstatechange = () => {
+          if (rservice.state === 'installed') {
+            if (navigator.ReactService.controller) {
+              console.log(
+                'Test in console'
+              );
+
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              console.log('Content is cached');
+
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error in ReactService:', error);
+    });
+}
+
+function checkValidReactService(swUrl, config) {
+  fetch(swUrl, {
+    headers: { 'ReactService': 'script' }
+  })
+    .then(response => {
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        navigator.ReactService.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'App not working'
+      );
+    });
+}
+
+export function unregister() {
+  if ('ReactService' in navigator) {
+    navigator.ReactService.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

src/components/Film.js

@@ -0,0 +1,116 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
+import { withStyles } 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 TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+const styles = theme=> ({
+    card:{
+        margin: '10px',
+        color: '#FFE81F',
+        backgroundColor: 'black'
+    },
+    name:{
+
+        borderBottom: '2px white'
+    },
+    root:{
+        color: '#FFE81F'
+    },
+    table:{
+
+        backgroundColor:'white',
+        color: 'grey'
+    },
+    loading:{
+        flexGrow: 1,
+        textAlign:"center",
+
+    },
+    tableHead:{
+        padding: '20x',
+        backgroundColor: 'white'
+    },
+    thead: {
+        fontSize: '20px',
+        textAlign:'center',
+        color:'black'
+    },
+    tcell: {
+        "&:hover":{
+            color: '#FFE81F'
+        },
+        fontSize: '18px',
+        textAlign: 'center',
+        color: 'grey'
+    },
+    row:{
+        "&:hover":{
+            boxShadow: '10px 10px 10px',
+        },
+    }
+
+});
+
+
+export class Film extends Component {
+
+    render() {
+
+        let { classes } = this.props;
+
+        return (
+            <div>
+
+                <Paper className={classes.root}>
+                <Table className={classes.table} aria-label="simple table">
+
+                    <TableHead className={classes.tableHead}>
+                        <TableRow style={{color:'white'}}>
+                            <TableCell className={classes.thead}>Title</TableCell>
+                            <TableCell className={classes.thead} align="right">Director</TableCell>
+                            <TableCell className={classes.thead} align="right">Release Date</TableCell>
+                            <TableCell className={classes.thead} align="right">Producer</TableCell>  
+                        </TableRow>
+                    </TableHead>
+
+                    <TableBody>
+                        {(() => {
+                            if(this.props.film == null){
+                                return (
+                                    <h1 className={classes.loading}>Loading</h1>
+                                )
+                                }else{
+                                    return(
+                                        this.props.film.map(film => (
+                                        <TableRow row={film.title} className={classes.row}>
+
+                                            <TableCell className={classes.tcell} align="right">{film.title}</TableCell>
+                                            <TableCell className={classes.tcell} align="right">{film.director}</TableCell>
+                                            <TableCell className={classes.tcell} align="right">{film.release_date}</TableCell>
+                                            <TableCell className={classes.tcell} align="right">{film.producer}</TableCell>
+
+                                        </TableRow>
+                                    ))
+                                    )
+                                }
+                        })()}
+                    </TableBody>
+
+                </Table>
+                </Paper>
+
+            </div>
+        )
+    }
+}
+
+Film.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Film);