Remove a few hooks (mozilla#563)

src/components/Search/FrameworkDropdown.tsx

@@ -7,8 +7,8 @@ import Tooltip from '@mui/material/Tooltip';
 import { style, cssRule } from 'typestyle';
 
 import { frameworkMap } from '../../common/constants';
-import { useAppSelector } from '../../hooks/app';
-import useHandleChangeFrameworkDropdown from '../../hooks/useHandleFrameworkDropdown';
+import { useAppDispatch, useAppSelector } from '../../hooks/app';
+import { updateFramework } from '../../reducers/FrameworkSlice';
 import { Strings } from '../../resources/Strings';
 import {
   Spacing,
@@ -78,15 +78,19 @@ function FrameworkDropdown({ mode }: FrameworkDropdownProps) {
     }),
   };
 
+  const dispatch = useAppDispatch();
   const frameworkId = useAppSelector((state) => state.framework.id);
 
-  const { handleChangeFrameworkDropdown } = useHandleChangeFrameworkDropdown();
-
   const handleFrameworkSelect = async (event: SelectChangeEvent) => {
     const id = +event.target.value as Framework['id'];
     const name = frameworkMap[id];
 
-    await handleChangeFrameworkDropdown({ id, name });
+    dispatch(
+      updateFramework({
+        id,
+        name,
+      }),
+    );
   };
 
   return (

src/components/Search/SearchDropdown.tsx

@@ -6,15 +6,18 @@ import { style, cssRule } from 'typestyle';
 import { repoMap } from '../../common/constants';
 import { compareView } from '../../common/constants';
 import { useAppSelector } from '../../hooks/app';
-import useHandleChangeDropdown from '../../hooks/useHandleChangeDropdown';
+import { useAppDispatch } from '../../hooks/app';
+import { updateRepository } from '../../reducers/SearchSlice';
 import {
   ButtonsLightRaw,
   ButtonsDarkRaw,
   TooltipRaw,
   FontsRaw,
   Colors,
 } from '../../styles';
+import { fetchRecentRevisions } from '../../thunks/searchThunk';
 import { InputType, ThemeMode, View } from '../../types/state';
+import type { Repository } from '../../types/state';
 
 interface SearchDropdownProps {
   view: View;
@@ -31,13 +34,27 @@ function SearchDropdown({
   searchType,
 }: SearchDropdownProps) {
   const size = view == compareView ? 'small' : undefined;
-  const { handleChangeDropdown } = useHandleChangeDropdown();
-  const searchState = useAppSelector((state) => state.search[searchType]);
-  const { repository } = searchState;
+  const repository = useAppSelector(
+    (state) => state.search[searchType].repository,
+  );
+  const dispatch = useAppDispatch();
 
   const handleRepoSelect = async (event: SelectChangeEvent) => {
-    const selectedRepository = event.target.value;
-    await handleChangeDropdown({ selectedRepository, searchType });
+    const selectedRepository = event.target.value as Repository['name'];
+    dispatch(
+      updateRepository({
+        repository: selectedRepository,
+        searchType: searchType,
+      }),
+    );
+
+    // Fetch 10 most recent revisions when repository changes
+    await dispatch(
+      fetchRecentRevisions({
+        repository: selectedRepository,
+        searchType: searchType,
+      }),
+    );
   };
 
   cssRule('.MuiTooltip-popper', {