resolve apollo-client errors

Author: benkeen

apps/client/package.json

@@ -65,7 +65,7 @@
 		"@date-io/date-fns": "^1.3.13",
 		"@mui/material": "^7.3.1",
 		"@mui/icons-material": "^7.3.1",
-		"@mui/lab": "^7.0.0-beta.16",
+		"@mui/x-date-pickers": "^8.10.2",
 		"@react-hook/throttle": "^2.2.0",
 		"@reduxjs/toolkit": "^2.8.2",
 		"@types/randomcolor": "^0.5.9",
@@ -100,6 +100,7 @@
 		"redux": "^5.0.1",
 		"redux-persist": "^6.0.0",
 		"rollup": "^2.31.0",
+		"rxjs": "^7.3.0",
 		"sass": "^1.49.9",
 		"styled-components": "^4.0.0",
 		"terser-webpack-plugin": "^3.0.3",
@@ -135,7 +136,6 @@
 		"@types/sinon": "^7.5.1",
 		"@typescript-eslint/eslint-plugin": "^5.54.0",
 		"@typescript-eslint/parser": "^5.54.0",
-		"@welldone-software/why-did-you-render": "^6.0.5",
 		"autoprefixer": "6.7.2",
 		"babel-eslint": "^10.0.3",
 		"babel-loader": "^8.0.6",

apps/client/src/app.tsx

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 import React, { useEffect } from 'react';
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router, Switch, Route, withRouter } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, useNavigation } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client/react';
 import * as codemirror from 'codemirror';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -22,13 +22,6 @@ import { getLocaleMap } from '@generatedata/utils/lang';
 import '~store/generator/generator.reducer';
 import './styles/global.scss';
 
-// if (process.env.NODE_ENV === 'development') {
-// 	const whyDidYouRender = require('@welldone-software/why-did-you-render');
-// 	whyDidYouRender(React, {
-// 		trackAllPureComponents: true,
-// 	});
-// }
-
 window.CodeMirror = codemirror;
 
 const checkState = async (state: any): Promise<any> => {
@@ -59,25 +52,29 @@ const LocalizationWrapper = (args: any) => {
 	}
 
 	return (
-		<Switch>
+		<Routes>
 			{localizedRoutes.map(({ path, component: Component }, index) => (
 				<Route key={index} path={path}>
 					<Component />
 				</Route>
 			))}
-		</Switch>
+		</Routes>
 	);
 };
 
-const App = withRouter(({ history }: any) => {
+const App = () => {
+	const navigation = useNavigation();
+	
 	useEffect(() => {
-		initRouteListener(history);
+		initRouteListener(navigation);
 	}, []);
 
 	return (
 		<ErrorBoundary>
 			<Page>
-				<Route path="/:lang?">{LocalizationWrapper}</Route>
+				<Route path="/:lang?">
+					<LocalizationWrapper />
+				</Route>
 				<Toast />
 				<SaveDataSetDialog />
 			</Page>

apps/client/src/components/TextField.tsx

@@ -13,6 +13,12 @@ type TextFieldProps = {
 	autoFocus?: boolean;
 	className?: string;
 	tooltipPlacement?: string;
+	name?: string;
+	style?: React.CSSProperties;
+	disabled?: boolean;
+	type?: string;
+	onPaste?: (e: any) => void;
+	onKeyDown?: (e: any) => void;
 };
 
 const TextField = ({ throttle, error, value, onChange, tooltipPlacement, className, ref, ...props }: TextFieldProps) => {

apps/client/src/components/datePicker/LocalizedDatePicker.component.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import DateFnsUtils from '@date-io/date-fns';
-import { DatePicker, MuiPickersUtilsProvider } from '@mui/lab';
+// import { DatePicker, MuiPickersUtilsProvider } from '@mui/lab';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { getLocale, getStrings } from '@generatedata/utils/lang';
 import { arDZ, de, enUS, es, fr, ja, hi, nl, pt, ru, ta, zhCN } from 'date-fns/locale';
 

apps/client/src/core/dialogs/tourIntro/TourIntro.component.tsx

@@ -12,7 +12,6 @@ type Tour = 'intro' | 'gridPanel' | 'previewPanel' | 'yourAccount';
 export type TourDialogProps = {
 	tourIntroDialogVisible: boolean;
 	showTourIntroDialog: () => void;
-	currentTour: Tour;
 	onClose: () => void;
 	tourBundleLoaded: boolean;
 	loadTourBundle: () => void;

apps/client/src/core/generationPanel/ActivePacketsList.component.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 import CheckCircle from '@mui/icons-material/CheckCircle';
 import Chip from '@mui/material/Chip';
 import styles from './ActivityPacketsList.scss';
@@ -17,11 +17,11 @@ export type ActivePacketList = {
 
 export type ActivePacketsListProps = {
 	packetList: ActivePacketList[];
-	openPacket: (packetId: string, history: any) => void;
+	openPacket: (packetId: string, navigate: any) => void;
 };
 
 const ActivePacketsList = ({ packetList, openPacket }: ActivePacketsListProps) => {
-	const history = useHistory();
+	const navigate = useNavigate();
 
 	const chips = packetList.map(({ packetId, label, percentage, numRowsToGenerate, isPaused }, index) => {
 		const color = isPaused ? 'default' : 'primary';
@@ -68,7 +68,7 @@ const ActivePacketsList = ({ packetList, openPacket }: ActivePacketsListProps) =
 					className={styles.chip}
 					clickable
 					color={color}
-					onClick={(): void => openPacket(packetId, history)}
+					onClick={(): void => openPacket(packetId, navigate)}
 					variant="outlined"
 					style={{ marginLeft: 10 }}
 				/>

apps/client/src/core/queries.ts

@@ -1,6 +1,6 @@
 import { gql, TypedDocumentNode } from '@apollo/client';
 
-type GetAccounts = {
+export type GetAccounts = {
 	accounts: {
 		totalCount: number;
 		results: {
@@ -42,7 +42,7 @@ export const GET_ACCOUNTS: TypedDocumentNode<GetAccounts> = gql`
 	}
 `;
 
-type DeleteAccount = {
+export type DeleteAccount = {
 	deleteAccount: {
 		success: boolean;
 		error: string;

apps/client/src/core/store/account/account.actions.ts

@@ -9,6 +9,7 @@ import { GDAction } from '~types/general';
 import { addToast } from '@generatedata/utils/general';
 import { getStrings } from '@generatedata/utils/lang';
 import * as queries from '~core/queries';
+import type { RenameDataSet } from '~core/queries';
 import { SET_ONE_TIME_PASSWORD } from '~store/main/main.actions';
 
 export const UPDATE_ACCOUNT = 'UPDATE_ACCOUNT';
@@ -256,7 +257,7 @@ export const renameDataSet =
 				}
 			});
 
-			if (data.renameDataSet.success) {
+			if ((data as RenameDataSet).renameDataSet.success) {
 				dispatch({
 					type: UPDATE_CURRENT_DATA_SET_NAME,
 					payload: {

apps/client/src/core/store/packets/packets.actions.ts

@@ -51,7 +51,7 @@ export const logDataBatch =
 
 			// if the packet has been fully generated track the generated row count
 			if (isLoggedIn && currentDataSetId !== null && numRowsToGenerate === numGeneratedRows) {
-				const resp = await apolloClient.mutate({
+				const { data } = await apolloClient.mutate({
 					mutation: gql`
 					mutation UpdateDataSetGenerationCount($dataSetId: ID!, $generatedRows: Int!) {
 						updateDataSetGenerationCount(dataSetId: $dataSetId, generatedRows: $generatedRows) {
@@ -66,7 +66,7 @@ export const logDataBatch =
 					}
 				});
 
-				if (resp.data.updateDataSetGenerationCount.success) {
+				if (data?.updateDataSetGenerationCount?.success) {
 					dispatch(updateTotalGenerationCount(numGeneratedRows));
 				}
 			}