feat(frontend): add typed Redux hooks and migrate components

CONTRIBUTING.md

@@ -38,7 +38,7 @@ Tech Stack Overview:
 ### 🌐 Frontend Contributions (⚛️ React, Vite)
 
 *   The updated Figma design can be found [here](https://www.figma.com/file/OXLtrl1EAy885to6S69554/DocsGPT?node-id=0%3A1&t=hjWVuxRg9yi5YkJ9-1).  Please try to follow the guidelines.
-*   **Coding Style:** We follow a strict coding style enforced by ESLint and Prettier. Please ensure your code adheres to the configuration provided in our repository's `fronetend/.eslintrc.js` file.  We recommend configuring your editor with ESLint and Prettier to help with this.
+*   **Coding Style:** We follow a strict coding style enforced by ESLint and Prettier. Please ensure your code adheres to the configuration provided in our repository's `frontend/.eslintrc.js` file.  We recommend configuring your editor with ESLint and Prettier to help with this.
 * **Component Structure:** Strive for small, reusable components.  Favor functional components and hooks over class components where possible.
 * **State Management** If you need to add stores, please use Redux.
 

frontend/src/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

frontend/src/settings/Sources.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from '../hooks';
 
 import userService from '../api/services/userService';
 
@@ -53,7 +54,7 @@ export default function Sources({
 }: DocumentsProps) {
   const { t } = useTranslation();
   const [isDarkTheme] = useDarkTheme();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const token = useSelector(selectToken);
 
   const [searchTerm, setSearchTerm] = useState<string>('');

frontend/src/upload/Upload.tsx

@@ -2,7 +2,8 @@ import { useCallback, useState } from 'react';
 import { nanoid } from '@reduxjs/toolkit';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from '../hooks';
 
 import userService from '../api/services/userService';
 import { getSessionToken } from '../utils/providerUtils';
@@ -61,6 +62,8 @@ function Upload({
   const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
   const [selectedFolders, setSelectedFolders] = useState<string[]>([]);
 
+  const dispatch = useAppDispatch();
+
   const renderFormFields = () => {
     if (!ingestor.type) return null;
     const ingestorSchema = getIngestorSchema(ingestor.type as IngestorType);