update ra-data-hasura

package.json

@@ -3,27 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.10.1",
-    "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
     "apollo-client": "^2.6.10",
-    "ra-data-hasura": "^0.2.0",
-    "react": "^16.13.1",
-    "react-admin": "^3.6.0",
-    "react-dom": "^16.13.1",
+    "ra-data-hasura": "^0.3.0",
+    "react": "^17.0.2",
+    "react-admin": "^3.19.10",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts --openssl-legacy-provider build",
+    "test": "react-scripts --openssl-legacy-provider test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
     "production": [
@@ -38,9 +42,9 @@
     ]
   },
   "devDependencies": {
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-router-dom": "^5.3.2",
-    "typescript": "^3.9.5"
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.13",
+    "@types/react-router-dom": "^5.3.3",
+    "typescript": "^4.6.2"
   }
 }

src/App.tsx

@@ -1,36 +1,27 @@
-
-import React from 'react';
-import { Admin, Resource } from 'react-admin';
-import { TodoList, TodoEdit, TodoCreate } from './todos';
-import { UserList, UserShow } from './users';
-import PostIcon from '@material-ui/icons/Book';
-import UserIcon from '@material-ui/icons/Group';
-
+import React from "react";
+import { Admin, DataProvider, Resource } from "react-admin";
+import { TodoList, TodoEdit, TodoCreate } from "./todos";
+import { UserList, UserShow } from "./users";
+import PostIcon from "@material-ui/icons/Book";
+import UserIcon from "@material-ui/icons/Group";
 
 type AppProps = {
-    dataProvider: Function
-}
-function App(props: AppProps) {
-
-    return (
-        <Admin
-            dataProvider={props.dataProvider}
-        >
-            <Resource
-                name="todos"
-                icon={PostIcon}
-                list={TodoList}
-                edit={TodoEdit}
-                create={TodoCreate}
-            />
-            <Resource
-                name="users"
-                icon={UserIcon}
-                list={UserList}
-                show={UserShow}
-            />
-        </Admin>
-    );
+  dataProvider: DataProvider;
 };
 
+function App(props: AppProps) {
+  return (
+    <Admin dataProvider={props.dataProvider}>
+      <Resource
+        name="todos"
+        icon={PostIcon}
+        list={TodoList}
+        edit={TodoEdit}
+        create={TodoCreate}
+      />
+      <Resource name="users" icon={UserIcon} list={UserList} show={UserShow} />
+    </Admin>
+  );
+}
+
 export default App;

src/get-app.tsx

@@ -1,13 +1,12 @@
-import React from 'react'
-import App from './App'
-import buildHasuraProvider from 'ra-data-hasura';
+import React from "react";
+import App from "./App";
+import buildHasuraProvider from "ra-data-hasura";
 
 const uri = "https://react-admin-low-code.hasura.app/v1/graphql";
 
 export default async function getApp() {
   const provider = await buildHasuraProvider({
-    clientOptions: { uri: uri }
-  });  return () => (
-    <App dataProvider={provider} />
-  )
+    clientOptions: { uri: uri },
+  });
+  return () => <App dataProvider={provider} />;
 }

src/index.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import './index.css';
-import getApp from './get-app'
-import * as serviceWorker from './service-worker';
-import ReactDOM from 'react-dom'
-import { BrowserRouter } from 'react-router-dom';
+import React from "react";
+import "./index.css";
+import getApp from "./get-app";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+import reportWebVitals from "./reportWebVitals";
 
 getApp().then((App: React.FC) =>
   ReactDOM.render(
     <React.StrictMode>
-        <BrowserRouter><App/></BrowserRouter>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </React.StrictMode>,
-    document.getElementById('root')
+    document.getElementById("root")
   )
 );
 
-
-
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+reportWebVitals();

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;