Merge pull request #1252 from Arnei/useAppDispatch-and-useAppSelector

Declare project-wide useAppDispatch and useAppSelector

src/main/Body.tsx

@@ -9,15 +9,15 @@ import Lock from "./Lock";
 
 import { css } from '@emotion/react'
 
-import { useSelector } from 'react-redux';
+import { useAppSelector } from "../redux/store";
 import { selectIsEnd } from '../redux/endSlice'
 import { selectIsError } from "../redux/errorSlice";
 import { settings } from '../config';
 
 const Body: React.FC = () => {
 
-  const isEnd = useSelector(selectIsEnd)
-  const isError = useSelector(selectIsError)
+  const isEnd = useAppSelector(selectIsEnd)
+  const isError = useAppSelector(selectIsError)
 
   // If we're in a special state, display a special page
   // Otherwise display the normal page

src/main/Cutting.tsx

@@ -18,8 +18,7 @@ import {
   setIsPlayPreview
 } from '../redux/videoSlice';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch } from '../redux/store';
+import { useAppDispatch, useAppSelector } from "../redux/store";
 import { httpRequestState } from '../types';
 import { useTheme } from "../themes";
 import { setError } from '../redux/errorSlice';
@@ -35,13 +34,13 @@ const Cutting: React.FC = () => {
   const { t } = useTranslation();
 
   // Init redux variables
-  const dispatch = useDispatch<AppDispatch>()
-  const videoURLStatus = useSelector((state: { videoState: { status: httpRequestState["status"] } }) =>
+  const dispatch = useAppDispatch();
+  const videoURLStatus = useAppSelector((state: { videoState: { status: httpRequestState["status"] } }) =>
     state.videoState.status);
-  const error = useSelector((state: { videoState: { error: httpRequestState["error"] } }) => state.videoState.error)
-  const duration = useSelector(selectDuration)
+  const error = useAppSelector((state: { videoState: { error: httpRequestState["error"] } }) => state.videoState.error)
+  const duration = useAppSelector(selectDuration)
   const theme = useTheme();
-  const errorReason = useSelector((state: { videoState: { errorReason: httpRequestState["errorReason"] } }) =>
+  const errorReason = useAppSelector((state: { videoState: { errorReason: httpRequestState["errorReason"] } }) =>
     state.videoState.errorReason)
 
   // Try to fetch URL from external API
@@ -117,8 +116,8 @@ const Cutting: React.FC = () => {
 
 const CuttingHeader: React.FC = () => {
 
-  const title = useSelector(selectTitle)
-  const metadataTitle = useSelector(selectTitleFromEpisodeDc)
+  const title = useAppSelector(selectTitle)
+  const metadataTitle = useAppSelector(selectTitleFromEpisodeDc)
   const theme = useTheme();
 
   return (

src/main/CuttingActions.tsx

@@ -8,7 +8,7 @@ import { ReactComponent as TrashRestore } from '../img/trash-restore.svg';
 
 import { css } from '@emotion/react'
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
   cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll
 } from '../redux/videoSlice'
@@ -28,7 +28,7 @@ const CuttingActions: React.FC = () => {
   const { t } = useTranslation();
 
   // Init redux variables
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   /**
    * General action callback for cutting actions
@@ -201,7 +201,7 @@ const MarkAsDeletedButton : React.FC<markAsDeleteButtonInterface> = ({
   hotKeyName
 }) => {
   const { t } = useTranslation();
-  const isCurrentSegmentAlive = useSelector(selectIsCurrentSegmentAlive)
+  const isCurrentSegmentAlive = useAppSelector(selectIsCurrentSegmentAlive)
   const ref = React.useRef<HTMLDivElement>(null)
 
   const theme = useTheme();

src/main/Discard.tsx

@@ -5,7 +5,7 @@ import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle, flexGapRe
 
 import { LuChevronLeft, LuXCircle } from "react-icons/lu";
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useAppDispatch, useAppSelector } from "../redux/store";
 import { selectFinishState } from '../redux/finishSlice'
 import { setEnd } from '../redux/endSlice'
 
@@ -22,7 +22,7 @@ const Discard : React.FC = () => {
 
   const { t } = useTranslation();
 
-  const finishState = useSelector(selectFinishState)
+  const finishState = useAppSelector(selectFinishState)
 
   const cancelStyle = css({
     display: finishState !== "Discard changes" ? 'none' : 'flex',
@@ -53,7 +53,7 @@ const DiscardButton : React.FC = () => {
   const { t } = useTranslation();
 
   // Initialize redux variables
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch();
   const theme = useTheme();
 
   const discard = () => {

src/main/Error.tsx

@@ -4,7 +4,7 @@ import { css } from '@emotion/react'
 
 import { LuFrown } from "react-icons/lu";
 
-import { useSelector } from 'react-redux';
+import { useAppSelector } from "../redux/store";
 import { selectErrorDetails, selectErrorIcon, selectErrorMessage, selectErrorTitle } from '../redux/errorSlice'
 import { flexGapReplacementStyle } from "../cssStyles";
 
@@ -19,10 +19,10 @@ const Error : React.FC = () => {
   const { t } = useTranslation();
 
   // Init redux variables
-  const errorTitle = useSelector(selectErrorTitle)
-  const errorMessage = useSelector(selectErrorMessage)
-  const errorDetails = useSelector(selectErrorDetails)
-  const ErrorIcon = useSelector(selectErrorIcon)
+  const errorTitle = useAppSelector(selectErrorTitle)
+  const errorMessage = useAppSelector(selectErrorMessage)
+  const errorDetails = useAppSelector(selectErrorDetails)
+  const ErrorIcon = useAppSelector(selectErrorIcon)
 
   const detailsStyle = css({
     display: 'flex',

src/main/Finish.tsx

@@ -13,7 +13,7 @@ import { basicButtonStyle, navigationButtonStyle } from '../cssStyles'
 
 import { IconType } from "react-icons";
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useAppDispatch, useAppSelector } from "../redux/store";
 import { selectPageNumber, setPageNumber } from '../redux/finishSlice';
 import { useTheme } from "../themes";
 import { settings } from "../config";
@@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next";
  */
 const Finish : React.FC = () => {
 
-  const pageNumber = useSelector(selectPageNumber)
+  const pageNumber = useAppSelector(selectPageNumber)
 
   const pageZeroStyle = css({
     display: pageNumber !== 0 ? 'none' : 'block',
@@ -71,7 +71,7 @@ export const PageButton : React.FC<{
   const theme = useTheme();
 
   // Initialize redux variables
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch();
 
   const onPageChange = () => {
     dispatch(setPageNumber(pageNumber))

src/main/FinishMenu.tsx

@@ -6,7 +6,7 @@ import { basicButtonStyle, flexGapReplacementStyle, tileButtonStyle } from '../c
 import { IconType } from "react-icons";
 import { LuSave, LuDatabase, LuXCircle } from "react-icons/lu";
 
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from "../redux/store";
 import { setState, setPageNumber, finish } from '../redux/finishSlice'
 
 import { useTranslation } from 'react-i18next';
@@ -41,7 +41,7 @@ const FinishMenuButton: React.FC<{Icon: IconType, stateName: finish["value"]}> =
 
   const { t } = useTranslation();
   const theme = useTheme()
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const finish = () => {
     dispatch(setState(stateName));

src/main/Header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useSelector } from "react-redux"
+import { useAppSelector } from "../redux/store";
 import { useTheme } from "../themes";
 
 import { css } from '@emotion/react'
@@ -22,7 +22,7 @@ function Header() {
   const { scheme } = useColorScheme();
   const { t } = useTranslation()
 
-  const isEnd = useSelector(selectIsEnd)
+  const isEnd = useAppSelector(selectIsEnd)
 
   const headerStyle = css({
     display: 'flex',

src/main/Lock.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { LuLock } from "react-icons/lu";
 
-import { useDispatch, useSelector } from "react-redux";
+import { useAppDispatch, useAppSelector } from "../redux/store";
 import { settings } from "../config";
 import { setLock, video } from "../redux/videoSlice";
 import { selectIsEnd } from '../redux/endSlice'
@@ -13,15 +13,15 @@ import { useBeforeunload } from 'react-beforeunload';
 const Lock: React.FC = () => {
   const endpoint = `${settings.opencast.url}/editor/${settings.id}/lock`
 
-  const dispatch = useDispatch();
-  const lockingActive = useSelector((state: { videoState: { lockingActive: video["lockingActive"] } }) =>
+  const dispatch = useAppDispatch();
+  const lockingActive = useAppSelector((state: { videoState: { lockingActive: video["lockingActive"] } }) =>
     state.videoState.lockingActive);
-  const lockRefresh = useSelector((state: { videoState: { lockRefresh: video["lockRefresh"] } }) =>
+  const lockRefresh = useAppSelector((state: { videoState: { lockRefresh: video["lockRefresh"] } }) =>
     state.videoState.lockRefresh);
-  const lockState = useSelector((state: { videoState: { lockState: video["lockState"] } }) =>
+  const lockState = useAppSelector((state: { videoState: { lockState: video["lockState"] } }) =>
     state.videoState.lockState);
-  const lock = useSelector((state: { videoState: { lock: video["lock"] } }) => state.videoState.lock);
-  const isEnd = useSelector(selectIsEnd)
+  const lock = useAppSelector((state: { videoState: { lock: video["lock"] } }) => state.videoState.lock);
+  const isEnd = useAppSelector(selectIsEnd)
 
   function requestLock() {
     const form = `user=${lock.user}&uuid=${lock.uuid}`;

src/main/MainContent.tsx

@@ -10,7 +10,7 @@ import { LuWrench } from "react-icons/lu";
 
 import { css } from '@emotion/react'
 
-import { useSelector } from 'react-redux'
+import { useAppSelector } from "../redux/store";
 import { selectMainMenuState } from '../redux/mainMenuSlice'
 
 import { MainMenuStateNames } from '../types'
@@ -30,10 +30,10 @@ import Cutting from "./Cutting";
  */
 const MainContent: React.FC = () => {
 
-  const mainMenuState = useSelector(selectMainMenuState)
-  const videoChanged = useSelector(videoSelectHasChanges)
-  const metadataChanged = useSelector(metadataSelectHasChanges)
-  const subtitleChanged = useSelector(selectSubtitleHasChanges)
+  const mainMenuState = useAppSelector(selectMainMenuState)
+  const videoChanged = useAppSelector(videoSelectHasChanges)
+  const metadataChanged = useAppSelector(metadataSelectHasChanges)
+  const subtitleChanged = useAppSelector(selectSubtitleHasChanges)
   const theme = useTheme()
 
   // Display warning when leaving the page if there are unsaved changes

src/main/MainMenu.tsx

@@ -7,7 +7,7 @@ import { LuScissors, LuFilm, LuFileText, LuCheckSquare } from "react-icons/lu";
 import { LuImage } from "react-icons/lu";
 import { ReactComponent as SubtitleIcon } from '../img/subtitle.svg';
 
-import { useDispatch, useSelector } from 'react-redux'
+import { useAppDispatch, useAppSelector } from "../redux/store";
 import { setState, selectMainMenuState, mainMenu } from '../redux/mainMenuSlice'
 import { setPageNumber } from '../redux/finishSlice'
 
@@ -109,8 +109,8 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
   iconCustomCSS,
 }) => {
 
-  const dispatch = useDispatch();
-  const activeState = useSelector(selectMainMenuState)
+  const dispatch = useAppDispatch();
+  const activeState = useAppSelector(selectMainMenuState)
   const theme = useTheme();
 
   const onMenuItemClicked = () => {

src/main/Metadata.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import { css } from '@emotion/react'
 import { calendarStyle, errorBoxStyle, selectFieldStyle, titleStyle, titleStyleBold } from '../cssStyles'
 
-import { useSelector, useDispatch } from 'react-redux';
+import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
   fetchMetadata,
   postMetadata,
@@ -26,7 +26,6 @@ import { useTranslation } from 'react-i18next';
 import { DateTime as LuxonDateTime} from "luxon";
 
 import { configureFieldsAttributes, settings } from '../config'
-import { AppDispatch } from "../redux/store";
 import { useTheme } from "../themes";
 import { ThemeProvider } from "@mui/material/styles";
 import { cloneDeep } from "lodash";
@@ -46,12 +45,12 @@ const Metadata: React.FC = () => {
   const { t, i18n } = useTranslation();
 
   // Init redux variables
-  const dispatch = useDispatch<AppDispatch>()
-  const catalogs = useSelector(selectCatalogs);
-  const getStatus = useSelector(selectGetStatus);
-  const getError = useSelector(selectGetError);
-  const postStatus = useSelector(selectPostStatus);
-  const postError = useSelector(selectPostError);
+  const dispatch = useAppDispatch();
+  const catalogs = useAppSelector(selectCatalogs);
+  const getStatus = useAppSelector(selectGetStatus);
+  const getError = useAppSelector(selectGetError);
+  const postStatus = useAppSelector(selectPostStatus);
+  const postError = useAppSelector(selectPostError);
   const theme = useTheme();
 
   // Try to fetch URL from external API

src/main/Save.tsx

@@ -6,7 +6,7 @@ import { basicButtonStyle, backOrContinueStyle, ariaLive, errorBoxStyle,
 
 import { LuLoader, LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck} from "react-icons/lu";
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useAppDispatch, useAppSelector } from "../redux/store";
 import { selectFinishState } from '../redux/finishSlice'
 import {
   selectHasChanges,
@@ -19,7 +19,6 @@ import { postVideoInformation, selectStatus, selectError } from '../redux/workfl
 import { CallbackButton, PageButton } from './Finish'
 
 import { useTranslation } from 'react-i18next';
-import { AppDispatch } from "../redux/store";
 import { postMetadata, selectPostError, selectPostStatus, setHasChanges as metadataSetHasChanges,
   selectHasChanges as metadataSelectHasChanges } from "../redux/metadataSlice";
 import { selectSubtitles, selectHasChanges as selectSubtitleHasChanges,
@@ -36,16 +35,16 @@ const Save : React.FC = () => {
 
   const { t } = useTranslation();
 
-  const finishState = useSelector(selectFinishState)
+  const finishState = useAppSelector(selectFinishState)
 
-  const postWorkflowStatus = useSelector(selectStatus);
-  const postError = useSelector(selectError)
-  const postMetadataStatus = useSelector(selectPostStatus);
-  const postMetadataError = useSelector(selectPostError);
+  const postWorkflowStatus = useAppSelector(selectStatus);
+  const postError = useAppSelector(selectError)
+  const postMetadataStatus = useAppSelector(selectPostStatus);
+  const postMetadataError = useAppSelector(selectPostError);
   const theme = useTheme();
-  const metadataHasChanges = useSelector(metadataSelectHasChanges)
-  const hasChanges = useSelector(selectHasChanges)
-  const subtitleHasChanges = useSelector(selectSubtitleHasChanges)
+  const metadataHasChanges = useAppSelector(metadataSelectHasChanges)
+  const hasChanges = useAppSelector(selectHasChanges)
+  const subtitleHasChanges = useAppSelector(selectSubtitleHasChanges)
 
   const saveStyle = css({
     height: '100%',
@@ -108,13 +107,13 @@ export const SaveButton: React.FC = () => {
   const { t } = useTranslation();
 
   // Initialize redux variables
-  const dispatch = useDispatch<AppDispatch>()
+  const dispatch = useAppDispatch();
 
-  const segments = useSelector(selectSegments)
-  const tracks = useSelector(selectTracks)
-  const subtitles = useSelector(selectSubtitles)
-  const workflowStatus = useSelector(selectStatus);
-  const metadataStatus = useSelector(selectPostStatus);
+  const segments = useAppSelector(selectSegments)
+  const tracks = useAppSelector(selectTracks)
+  const subtitles = useAppSelector(selectSubtitles)
+  const workflowStatus = useAppSelector(selectStatus);
+  const metadataStatus = useAppSelector(selectPostStatus);
   const theme = useTheme();
   const [metadataSaveStarted, setMetadataSaveStarted] = useState(false);
 

src/main/Subtitle.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import SubtitleEditor from "./SubtitleEditor";
 import SubtitleSelect from "./SubtitleSelect";
-import { useSelector } from "react-redux";
+import { useAppSelector } from "../redux/store";
 import { selectIsDisplayEditView } from "../redux/subtitleSlice";
 
 /**
  * A container for the various subtitle views
  */
 const Subtitle : React.FC = () => {
 
-  const displayEditView = useSelector(selectIsDisplayEditView)
+  const displayEditView = useAppSelector(selectIsDisplayEditView)
 
   const render = () => {
     return displayEditView ? <SubtitleEditor /> : <SubtitleSelect />;