fix: Migrate to React-Redux 8.x

Types are now internal, so removing the `@types` package.  Fixes the types of `useDispatch` per this comment: reduxjs/react-redux#1918 (comment)

packages/frontend/package.json

@@ -83,7 +83,6 @@
     "@types/react-datepicker": "4.4.1",
     "@types/react-dom": "17.0.14",
     "@types/react-linkify": "1.0.1",
-    "@types/react-redux": "7.1.24",
     "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "5.23.0",
     "@typescript-eslint/parser": "5.23.0",

packages/frontend/src/components/auth/github-auth-provider/github-auth-provider.tsx

@@ -20,7 +20,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Routes, Route, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 import { gql } from 'urql';
 
-import type { RootState } from '../../../store/store';
+import type { AppDispatch, RootState } from '../../../store/store';
 import { userSlice, login } from '../../../store/user.slice';
 import { urqlClient } from '../../../urql';
 
@@ -34,7 +34,7 @@ interface Props {
 }
 
 const LoginCallback = () => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { loggedIn } = useSelector((state: RootState) => state.user);
@@ -117,7 +117,7 @@ const AuthWrapper = ({ children }: Props) => {
   const { accessToken, loggedIn, requestingLogin } = useSelector((state: RootState) => state.user);
   const location = useLocation();
   const navigate = useNavigate();
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   useEffect(() => {
     if (requestingLogin === true) {

packages/frontend/src/components/auth/okta-auth-provider/okta-auth-provider.tsx

@@ -21,7 +21,7 @@ import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Routes, Route, useNavigate } from 'react-router-dom';
 
-import type { RootState } from '../../../store/store';
+import type { AppDispatch, RootState } from '../../../store/store';
 import { userSlice, login } from '../../../store/user.slice';
 
 export const AUTH_CALLBACK_PATH = '/auth/callback';
@@ -34,7 +34,7 @@ interface Props {
 const AuthWrapper = ({ children }: Props) => {
   const { authState, oktaAuth } = useOktaAuth();
   const { requestingLogin } = useSelector((state: RootState) => state.user);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   const loggingIn = useRef(false);
 

packages/frontend/src/components/insight-tag/insight-tag.tsx

@@ -19,6 +19,7 @@ import { Tag, TagLabel } from '@chakra-ui/react';
 import { useDispatch } from 'react-redux';
 
 import { searchSlice } from '../../store/search.slice';
+import type { AppDispatch } from '../../store/store';
 import { Link } from '../link/link';
 
 interface Props {
@@ -27,7 +28,7 @@ interface Props {
 }
 
 export const InsightTag = ({ tag, dispatchSearch = false, ...tagProps }: Props & TagProps) => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   let onClick = (e) => {
     return;

packages/frontend/src/components/team-tag/team-tag.tsx

@@ -19,6 +19,7 @@ import { Tag, TagLabel } from '@chakra-ui/react';
 import { useDispatch } from 'react-redux';
 
 import { searchSlice } from '../../store/search.slice';
+import type { AppDispatch } from '../../store/store';
 import { Link } from '../link/link';
 
 interface Props {
@@ -27,7 +28,7 @@ interface Props {
 }
 
 export const TeamTag = ({ team, dispatchSearch = false, ...tagProps }: Props & TagProps) => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   let onClick = (e) => {
     return;

packages/frontend/src/pages/activity-page/activity-page.tsx

@@ -26,14 +26,14 @@ import { Alert } from '../../components/alert/alert';
 import { generateSearchUrl } from '../../shared/search-url';
 import { useActivities } from '../../shared/useActivities';
 import { activitySlice } from '../../store/activity.slice';
-import type { RootState } from '../../store/store';
+import type { AppDispatch, RootState } from '../../store/store';
 
 import { ActivityFilterSidebar } from './components/activity-filter-sidebar/activity-filter-sidebar';
 import { ActivitySearchBar } from './components/activity-search-bar/activity-search-bar';
 
 export const ActivityPage = () => {
   const initialized = useRef(false);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const { query, sort, showFilters, options } = useSelector((state: RootState) => state.activity);
 
   // Load query from params

packages/frontend/src/pages/activity-page/components/activity-filter-sidebar/activity-filter-sidebar.tsx

@@ -33,7 +33,7 @@ import {
   toSearchQuery
 } from '../../../../shared/search';
 import { activitySlice } from '../../../../store/activity.slice';
-import type { RootState } from '../../../../store/store';
+import type { AppDispatch, RootState } from '../../../../store/store';
 
 import { ActivityTypeStack } from './components/activity-type-stack/activity-type-stack';
 import { DateStack } from './components/date-stack/date-stack';
@@ -61,7 +61,7 @@ interface Props {
 }
 
 export const ActivityFilterSidebar = ({ suggestedFilters, ...boxProps }: Props & BoxProps): ReactElement => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const { query, isFiltered } = useSelector((state: RootState) => state.activity);
 
   const [searchClauses, setSearchClauses] = useState<SearchClause[]>([]);

packages/frontend/src/pages/activity-page/components/activity-search-bar/activity-search-bar.tsx

@@ -34,7 +34,7 @@ import { useDispatch } from 'react-redux';
 import { iconFactoryAs } from '../../../../shared/icon-factory';
 import { useDebounce } from '../../../../shared/useDebounce';
 import { activitySlice } from '../../../../store/activity.slice';
-import type { RootState } from '../../../../store/store';
+import type { AppDispatch, RootState } from '../../../../store/store';
 import { ActivitySearchBox } from '../activity-search-box/activity-search-box';
 
 import { ActivitySearchSyntax } from './activity-search-syntax';
@@ -45,7 +45,7 @@ const availableSortFields = [
 ];
 
 export const ActivitySearchBar = (): ReactElement => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   const { query, sort, showFilters, isFiltered, options } = useSelector((state: RootState) => state.activity);
 

packages/frontend/src/pages/main-page/components/global-errors/global-errors.tsx

@@ -19,11 +19,11 @@ import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { appSlice } from '../../../../store/app.slice';
-import type { RootState } from '../../../../store/store';
+import type { AppDispatch, RootState } from '../../../../store/store';
 
 export const GlobalErrors = () => {
   const { globalErrorMessages } = useSelector((state: RootState) => state.app);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const toast = useToast();
 
   // Whenever global error messages are added, this component

packages/frontend/src/pages/main-page/components/header/components/news-drawer/components/news-drawer-contents/news-drawer-contents.tsx

@@ -31,13 +31,14 @@ import type { News } from '../../../../../../../../models/generated/graphql';
 import { useLikedBy } from '../../../../../../../../shared/useLikedBy';
 import { useNews } from '../../../../../../../../shared/useNews';
 import { appSlice } from '../../../../../../../../store/app.slice';
+import type { AppDispatch } from '../../../../../../../../store/store';
 import { NewsItem } from '../news-item/news-item';
 
 export const NewsDrawerContents = () => {
   const backgroundColor = useColorModeValue('nord.100', 'polar.100');
 
   const toast = useToast();
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   const { data, fetching, onLikeNews } = useNews({ active: true });
   const { onFetchLikedBy } = useLikedBy('news');

packages/frontend/src/pages/main-page/components/header/components/news-drawer/news-drawer.tsx

@@ -21,7 +21,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { IexMenuItem } from '../../../../../../components/iex-menu-item/iex-menu-item';
 import { iconFactory } from '../../../../../../shared/icon-factory';
 import { appSlice } from '../../../../../../store/app.slice';
-import type { RootState } from '../../../../../../store/store';
+import type { AppDispatch, RootState } from '../../../../../../store/store';
 
 import { NewsDrawerContents } from './components/news-drawer-contents/news-drawer-contents';
 
@@ -35,7 +35,7 @@ import { NewsDrawerContents } from './components/news-drawer-contents/news-drawe
 export const NewsDrawer = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const { isNewsUnread } = useSelector((state: RootState) => state.app);
 
   useEffect(() => {

packages/frontend/src/pages/main-page/components/header/components/user-menu/user-menu.tsx

@@ -19,12 +19,12 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { IexMenuItem } from '../../../../../../components/iex-menu-item/iex-menu-item';
 import { iconFactory, iconFactoryAs } from '../../../../../../shared/icon-factory';
-import type { RootState } from '../../../../../../store/store';
+import type { AppDispatch, RootState } from '../../../../../../store/store';
 import { LoginState, userSlice } from '../../../../../../store/user.slice';
 
 export const UserMenu = () => {
   const { userInfo, loginState } = useSelector((state: RootState) => state.user);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   const requestLogin = () => dispatch(userSlice.actions.requestLogin(true));
 

packages/frontend/src/pages/main-page/components/user-health-check/user-health-check.tsx

@@ -23,11 +23,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Alert } from '../../../../components/alert/alert';
 import { ExternalLink } from '../../../../components/external-link/external-link';
 import { Link as RouterLink } from '../../../../components/link/link';
-import type { RootState } from '../../../../store/store';
+import type { AppDispatch, RootState } from '../../../../store/store';
 import { executeHealthCheck } from '../../../../store/user.slice';
 
 const HealthCheckAlert = ({ children, allowRecheck = true }) => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   const onRecheck = () => dispatch(executeHealthCheck());
 
@@ -59,7 +59,7 @@ export const UserHealthCheck = ({
   showPositiveChecks = false,
   ...boxProps
 }: { showPositiveChecks?: boolean } & BoxProps) => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const { loggedIn, healthCheck } = useSelector((state: RootState) => state.user);
   const { appSettings } = useSelector((state: RootState) => state.app);
 

packages/frontend/src/pages/search-page/components/filter-sidebar/filter-sidebar.tsx

@@ -33,7 +33,7 @@ import {
   toSearchQuery
 } from '../../../../shared/search';
 import { searchSlice } from '../../../../store/search.slice';
-import type { RootState } from '../../../../store/store';
+import type { AppDispatch, RootState } from '../../../../store/store';
 
 import { DateStack } from './components/date-stack/date-stack';
 import { FilterStack } from './components/filter-stack/filter-stack';
@@ -65,7 +65,7 @@ interface Props {
 }
 
 export const FilterSidebar = ({ suggestedFilters, ...boxProps }: Props & BoxProps): ReactElement => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const { query, isFiltered } = useSelector((state: RootState) => state.search);
 
   const [searchClauses, setSearchClauses] = useState<SearchClause[]>([]);

packages/frontend/src/pages/search-page/components/search-bar/search-bar.tsx

@@ -34,7 +34,7 @@ import { useDispatch } from 'react-redux';
 import { iconFactoryAs } from '../../../../shared/icon-factory';
 import { useDebounce } from '../../../../shared/useDebounce';
 import { searchSlice } from '../../../../store/search.slice';
-import type { RootState } from '../../../../store/store';
+import type { AppDispatch, RootState } from '../../../../store/store';
 import { SearchBox } from '../search-box/search-box';
 
 import { SearchSyntax } from './search-syntax';
@@ -48,7 +48,7 @@ const availableSortFields = [
 ];
 
 export const SearchBar = (): ReactElement => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
 
   const { query, sort, showFilters, isFiltered, options } = useSelector((state: RootState) => state.search);
 

packages/frontend/src/pages/search-page/search-page.tsx

@@ -27,14 +27,14 @@ import { generateSearchUrl } from '../../shared/search-url';
 import { useDebounce } from '../../shared/useDebounce';
 import { useSearch } from '../../shared/useSearch';
 import { searchSlice } from '../../store/search.slice';
-import type { RootState } from '../../store/store';
+import type { AppDispatch, RootState } from '../../store/store';
 
 import { FilterSidebar } from './components/filter-sidebar/filter-sidebar';
 import { SearchBar } from './components/search-bar/search-bar';
 
 export const SearchPage = () => {
   const initialized = useRef(false);
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const { query, sort, showFilters, options } = useSelector((state: RootState) => state.search);
 
   // Load query from params

packages/frontend/src/pages/settings-page/settings-page.tsx

@@ -26,7 +26,7 @@ import { Link } from '../../components/link/link';
 import type { SettingsSection } from '../../components/settings-sidebar/settings-sidebar';
 import { SettingsSidebar } from '../../components/settings-sidebar/settings-sidebar';
 import { iconFactory } from '../../shared/icon-factory';
-import type { RootState } from '../../store/store';
+import type { AppDispatch, RootState } from '../../store/store';
 import { executeHealthCheck, userSlice } from '../../store/user.slice';
 import { ErrorPage } from '../error-page/error-page';
 
@@ -84,7 +84,7 @@ const settingSections: SettingsSection[] = [
 ];
 
 export const SettingsPage = () => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch<AppDispatch>();
   const { userInfo } = useSelector((state: RootState) => state.user);
 
   const [{ data, fetching, error }] = useQuery({

packages/frontend/src/store/store.ts

@@ -31,9 +31,7 @@ export const rootReducer = combineReducers({
   user: userSlice.reducer
 });
 
-export type RootState = ReturnType<typeof rootReducer>;
-
-const persistedReducer = persistReducer<RootState>(
+const persistedReducer = persistReducer<ReturnType<typeof rootReducer>>(
   {
     key: 'root',
     version: 1,
@@ -52,6 +50,8 @@ export const store = configureStore({
     }
   })
 });
+
+export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 
 export const persistor = persistStore(store);