From 7e81839da5e29ae16144acc68982a473f9ac5fa4 Mon Sep 17 00:00:00 2001
From: beatrice-acasandrei
 <69891317+beatrice-acasandrei@users.noreply.github.com>
Date: Fri, 27 Oct 2023 21:01:24 +0300
Subject: [PATCH] Remove a few hooks (#563)

---
 src/__tests__/hooks/useQueryParams.test.ts  | 19 ------------
 src/components/Search/FrameworkDropdown.tsx | 14 +++++----
 src/components/Search/SearchDropdown.tsx    | 29 ++++++++++++++----
 src/hooks/useHandleChangeDropdown.ts        | 33 ---------------------
 src/hooks/useHandleFrameworkDropdown.ts     | 23 --------------
 src/hooks/useQueryParams.ts                 | 15 ----------
 6 files changed, 32 insertions(+), 101 deletions(-)
 delete mode 100644 src/__tests__/hooks/useQueryParams.test.ts
 delete mode 100644 src/hooks/useHandleChangeDropdown.ts
 delete mode 100644 src/hooks/useHandleFrameworkDropdown.ts
 delete mode 100644 src/hooks/useQueryParams.ts

diff --git a/src/__tests__/hooks/useQueryParams.test.ts b/src/__tests__/hooks/useQueryParams.test.ts
deleted file mode 100644
index 2fb3e7603..000000000
--- a/src/__tests__/hooks/useQueryParams.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useQuery } from '../../hooks/useQueryParams';
-import { createRouterWrapper } from '../utils/test-utils';
-
-describe('Tests useQueryParams hook', () => {
-  const { RouterWrapper } = createRouterWrapper(
-    '/?testParam1=test1&testParam2=test2',
-  );
-  it('should has search params contained in the route', () => {
-    const {
-      result: { current: urlParams },
-    } = renderHook(() => useQuery(), {
-      wrapper: RouterWrapper,
-    });
-    expect(urlParams.get('testParam1')).toBe('test1');
-    expect(urlParams.get('testParam2')).toBe('test2');
-  });
-});
diff --git a/src/components/Search/FrameworkDropdown.tsx b/src/components/Search/FrameworkDropdown.tsx
index c980c37f3..684b3c6d6 100644
--- a/src/components/Search/FrameworkDropdown.tsx
+++ b/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 (
diff --git a/src/components/Search/SearchDropdown.tsx b/src/components/Search/SearchDropdown.tsx
index 3591b46fb..4fb1936c7 100644
--- a/src/components/Search/SearchDropdown.tsx
+++ b/src/components/Search/SearchDropdown.tsx
@@ -6,7 +6,8 @@ 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,
@@ -14,7 +15,9 @@ import {
   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', {
diff --git a/src/hooks/useHandleChangeDropdown.ts b/src/hooks/useHandleChangeDropdown.ts
deleted file mode 100644
index fa327bbea..000000000
--- a/src/hooks/useHandleChangeDropdown.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { updateRepository } from '../reducers/SearchSlice';
-import { fetchRecentRevisions } from '../thunks/searchThunk';
-import type { Repository, InputType } from '../types/state';
-import { useAppDispatch } from './app';
-
-interface DropdownProps {
-  searchType: InputType;
-  selectedRepository: string;
-}
-
-function useHandleChangeDropdown() {
-  const dispatch = useAppDispatch();
-
-  const handleChangeDropdown = async ({
-    selectedRepository,
-    searchType,
-  }: DropdownProps) => {
-    const repository = selectedRepository as Repository['name'];
-
-    dispatch(
-      updateRepository({
-        repository,
-        searchType,
-      }),
-    );
-
-    // Fetch 10 most recent revisions when repository changes
-    await dispatch(fetchRecentRevisions({ repository, searchType }));
-  };
-  return { handleChangeDropdown };
-}
-
-export default useHandleChangeDropdown;
diff --git a/src/hooks/useHandleFrameworkDropdown.ts b/src/hooks/useHandleFrameworkDropdown.ts
deleted file mode 100644
index 4c08a00a9..000000000
--- a/src/hooks/useHandleFrameworkDropdown.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { updateFramework } from '../reducers/FrameworkSlice';
-import { useAppDispatch } from './app';
-
-interface DropdownProps {
-  id: number;
-  name: string;
-}
-
-function useHandleChangeFrameworkDropdown() {
-  const dispatch = useAppDispatch();
-
-  const handleChangeFrameworkDropdown = async ({ id, name }: DropdownProps) => {
-    dispatch(
-      updateFramework({
-        id,
-        name,
-      }),
-    );
-  };
-  return { handleChangeFrameworkDropdown };
-}
-
-export default useHandleChangeFrameworkDropdown;
diff --git a/src/hooks/useQueryParams.ts b/src/hooks/useQueryParams.ts
deleted file mode 100644
index 25c8c9119..000000000
--- a/src/hooks/useQueryParams.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { useLocation } from 'react-router-dom';
-
-export function useQuery() {
-  const { search } = useLocation();
-
-  return React.useMemo(() => new URLSearchParams(search), [search]);
-}
-
-// How to use
-// In the component function initialize the hook like so
-// const query = useQuery();
-// This is how you can retrive the value of the query param.
-// const value = query.get('revision1');