Front: Override redux functions for type safety

front/App.tsx

@@ -5,7 +5,7 @@ import { Provider } from 'react-redux';
 import store from './state/Store';
 import { Router } from './Navigation';
 import './i18n/i18n';
-import { NativeBaseProvider, extendTheme } from "native-base";
+import { NativeBaseProvider } from "native-base";
 
 const queryClient = new QueryClient();
 

front/Navigation.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import AuthenticationView from './views/AuthenticationView';
 import HomeView from './views/HomeView';
 import { NavigationContainer } from '@react-navigation/native';
-import { useSelector } from 'react-redux';
+import { useSelector } from './state/Store';
 import SongLobbyView from './views/SongLobbyView';
 import { translate } from './i18n/i18n';
 

front/state/Store.ts

@@ -1,10 +1,21 @@
 import userReducer from '../state/UserSlice';
 import { configureStore } from '@reduxjs/toolkit';
 import languageReducer from './LanguageSlice';
+import { TypedUseSelectorHook, useDispatch as reduxDispatch, useSelector as reduxSelector } from 'react-redux'
 
-export default configureStore({
+const store = configureStore({
 	reducer: {
 		user: userReducer,
 		language: languageReducer
 	},
-})
+})
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useDispatch: () => AppDispatch = reduxDispatch
+export const useSelector: TypedUseSelectorHook<RootState> = reduxSelector
+
+export default store

front/views/AuthenticationView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch } from '../state/Store';
 import { translate } from "../i18n/i18n";
 import { setUserToken } from "../state/UserSlice";
 import { Center, Button, Text } from 'native-base';

front/views/HomeView.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { Center, Button, Text } from "native-base";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch, useSelector } from "../state/Store";
 import { AvailableLanguages, DefaultLanguage, translate } from "../i18n/i18n";
 import { useLanguage } from "../state/LanguageSlice";
 import { unsetUserToken } from "../state/UserSlice";

front/views/SongLobbyView.tsx

@@ -1,5 +1,5 @@
 import { useRoute } from "@react-navigation/native";
-import { Button, Divider, Box, Center, Image, Text, VStack, HStack, PresenceTransition, Icon } from "native-base";
+import { Button, Divider, Box, Center, Image, Text, VStack, PresenceTransition, Icon } from "native-base";
 import API from "../API";
 import { useQuery } from 'react-query';
 import LoadingComponent from "../components/loading";
@@ -7,7 +7,7 @@ import React, { useEffect, useState } from "react";
 import logo from '../assets/cover.png';
 import { translate } from "../i18n/i18n";
 import formatDuration from "format-duration";
-import { Ionicons, FontAwesome } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons';
 
 interface SongLobbyProps {
 	// The unique identifier to find a song