Merge pull request #1 from SRI-International/update-libs-to-latest

Update libs to latest

package.json

@@ -5,22 +5,30 @@
   "description": "Visualize graph network corresponding to a gremlin query",
   "license": "MIT",
   "dependencies": {
-    "@material-ui/core": "^4.7.0",
-    "@material-ui/icons": "^4.5.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.9",
+    "@mui/material": "^5.11.10",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^18.14.1",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "axios": "^0.21.1",
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "gremlin": "^3.4.4",
     "lodash": "^4.17.15",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-json-to-table": "^0.1.5",
-    "react-redux": "^7.1.3",
-    "react-scripts": "^3.2.0",
-    "redux": "^4.0.4",
+    "react-redux": "^8.0.5",
+    "react-scripts": "^5.0.1",
+    "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
-    "vis-network": "^6.4.4"
+    "vis-data": "^7.1.4",
+    "vis-network": "^9.1.2"
   },
   "proxy": "http://localhost:3001",
   "scripts": {
@@ -32,7 +40,9 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "concurrently": "^5.0.0"
+    "concurrently": "^5.0.0",
+    "typescript": "^4.9.5",
+    "typescript-plugin-css-modules": "^4.2.2"
   },
   "browserslist": {
     "production": [

src/App.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Grid } from '@mui/material';
+import { NetworkGraphComponent } from './components/NetworkGraph/NetworkGraphComponent';
+import { HeaderComponent } from './components/Header/HeaderComponent';
+import { DetailsComponent } from './components/Details/DetailsComponent';
+
+export const App = () => (
+  <div>
+    <Grid container spacing={1}>
+      <Grid item xs={12} sm={12} md={12}>
+        <HeaderComponent />
+      </Grid>
+      <Grid item xs={12} sm={9} md={9}>
+        <NetworkGraphComponent />
+      </Grid>
+      <Grid item xs={12} sm={3} md={3}>
+        <DetailsComponent />
+      </Grid>
+    </Grid>
+  </div>
+);

src/app/store.ts

@@ -0,0 +1,19 @@
+import { configureStore } from "@reduxjs/toolkit";
+import gremlinReducer from '../reducers/gremlinReducer';
+import graphReducer from '../reducers/graphReducer';
+import optionReducer from '../reducers/optionReducer';
+import { useDispatch } from "react-redux";
+
+
+
+// const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = configureStore({
+  reducer: { gremlin: gremlinReducer, graph: graphReducer, options: optionReducer },
+  // composeEnhancers(applyMiddleware(createLogger()))
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export default store;