Fix types

.eslintrc.js

@@ -7,9 +7,13 @@ module.exports = {
     {
       files: ['*.ts', '*.tsx'],
       rules: {
-        '@typescript-eslint/no-shadow': ['error'],
+        'no-spaced-func': 'off',
         'no-shadow': 'off',
         'no-undef': 'off',
+        '@typescript-eslint/no-unused-vars': ['warn', {varsIgnorePattern: '_'}],
+        'react/jsx-uses-react': 'off',
+        'react/react-in-jsx-scope': 'off',
+        'react-native/no-inline-styles': 'off',
       },
     },
   ],

package.json

@@ -9,7 +9,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "lint": "eslint . --ext .ts,.tsx",
-    "typecheck": "tsc --noUnusedLocals",
+    "typecheck": "tsc",
     "prettier": "prettier --write src/**/*",
     "release": "appcenter codepush release-react -a robertying/learnX-iOS && appcenter codepush release-react -a robertying/learnX-Android"
   },
@@ -67,7 +67,7 @@
     "path": "0.12.7",
     "postinstall-postinstall": "2.1.0",
     "prettier": "2.6.2",
-    "react": "18.1.0",
+    "react": "17.0.2",
     "react-native": "0.68.1",
     "react-native-code-push": "7.0.4",
     "react-native-device-info": "8.7.0",

src/App.tsx

@@ -30,7 +30,7 @@ import {
   DarkTheme as PaperDarkTheme,
 } from 'react-native-paper';
 import codePush from 'react-native-code-push';
-import {Provider as StoreProvider, useDispatch} from 'react-redux';
+import {Provider as StoreProvider} from 'react-redux';
 import {PersistGate} from 'redux-persist/integration/react';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import dayjs from 'dayjs';
@@ -71,7 +71,7 @@ import Styles from 'constants/Styles';
 import Colors from 'constants/Colors';
 import DeviceInfo from 'constants/DeviceInfo';
 import {setSetting} from 'data/actions/settings';
-import {persistor, store, useTypedSelector} from 'data/store';
+import {persistor, store, useAppDispatch, useAppSelector} from 'data/store';
 import {Notice, Assignment, File, Course} from 'data/types/state';
 import {login} from 'data/actions/auth';
 import {getAllSemesters, getCurrentSemester} from 'data/actions/semesters';
@@ -370,16 +370,16 @@ const SettingStack = () => (
 const MainTab = () => {
   const theme = useTheme();
 
-  const dispatch = useDispatch();
-  const loggedIn = useTypedSelector(state => state.auth.loggedIn);
-  const auth = useTypedSelector(state => state.auth);
-  const currentSemester = useTypedSelector(state => state.semesters.current);
-  const semesters = useTypedSelector(state => state.semesters.items);
-  const newChangelog = useTypedSelector(
+  const dispatch = useAppDispatch();
+  const loggedIn = useAppSelector(state => state.auth.loggedIn);
+  const auth = useAppSelector(state => state.auth);
+  const currentSemester = useAppSelector(state => state.semesters.current);
+  const semesters = useAppSelector(state => state.semesters.items);
+  const newChangelog = useAppSelector(
     state => state.settings.lastShowChangelogVersion !== packageJson.version,
   );
-  const newUpdate = useTypedSelector(state => state.settings.newUpdate);
-  const courseInformationSharingBadgeShown = useTypedSelector(
+  const newUpdate = useAppSelector(state => state.settings.newUpdate);
+  const courseInformationSharingBadgeShown = useAppSelector(
     state => state.settings.courseInformationSharingBadgeShown,
   );
 
@@ -638,11 +638,11 @@ const Container = () => {
   const colorScheme = useColorScheme();
   const toast = useToast();
 
-  const dispatch = useDispatch();
-  const loggingIn = useTypedSelector(state => state.auth.loggingIn);
-  const loggedIn = useTypedSelector(state => state.auth.loggedIn);
-  const loginError = useTypedSelector(state => state.auth.error);
-  const auth = useTypedSelector(state => state.auth);
+  const dispatch = useAppDispatch();
+  const loggingIn = useAppSelector(state => state.auth.loggingIn);
+  const loggedIn = useAppSelector(state => state.auth.loggedIn);
+  const loginError = useAppSelector(state => state.auth.error);
+  const auth = useAppSelector(state => state.auth);
   const windowSize = useWindowDimensions();
 
   const [appState, setAppState] = useState(AppState.currentState);

src/components/AssignmentCard.tsx

@@ -21,7 +21,9 @@ export interface AssignmentCardProps extends CardWrapperProps {
   hideCourseName?: boolean;
 }
 
-const AssignmentCard: React.FC<AssignmentCardProps> = ({
+const AssignmentCard: React.FC<
+  React.PropsWithChildren<AssignmentCardProps>
+> = ({
   data: {
     courseName,
     courseTeacherName,

src/components/AutoHeightWebView.tsx

@@ -6,7 +6,9 @@ import {
   WebViewNavigation,
 } from 'react-native-webview/lib/WebViewTypes';
 
-const AutoHeightWebView: React.FC<WebViewProps> = props => {
+const AutoHeightWebView: React.FC<
+  React.PropsWithChildren<WebViewProps>
+> = props => {
   const [height, setHeight] = useState(0);
 
   const webViewRef = useRef<WebView>(null);

src/components/CardWrapper.tsx

@@ -21,7 +21,9 @@ export interface CardWrapperProps {
 
 const buttonWidth = 80;
 
-const CardWrapper: React.FC<PropsWithChildren<CardWrapperProps>> = ({
+const CardWrapper: React.FC<
+  React.PropsWithChildren<PropsWithChildren<CardWrapperProps>>
+> = ({
   fav,
   onFav,
   archived,

src/components/CourseCard.tsx

@@ -14,7 +14,7 @@ export interface CourseCardProps extends CardWrapperProps {
   };
 }
 
-const CourseCard: React.FC<CourseCardProps> = ({
+const CourseCard: React.FC<React.PropsWithChildren<CourseCardProps>> = ({
   data: {
     name,
     englishName,

src/components/Empty.tsx

@@ -4,7 +4,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import Styles from 'constants/Styles';
 import {t} from 'helpers/i18n';
 
-const Empty: React.FC = () => {
+const Empty: React.FC<React.PropsWithChildren<unknown>> = () => {
   const theme = useTheme();
 
   return (

src/components/FileCard.tsx

@@ -19,7 +19,7 @@ export interface FileCardProps extends CardWrapperProps {
   hideCourseName?: boolean;
 }
 
-const FileCard: React.FC<FileCardProps> = ({
+const FileCard: React.FC<React.PropsWithChildren<FileCardProps>> = ({
   data: {
     title,
     description,

src/components/Filter.tsx

@@ -26,7 +26,7 @@ export interface FilterProps {
   unfinishedCount?: number;
 }
 
-const Filter: React.FC<FilterProps> = ({
+const Filter: React.FC<React.PropsWithChildren<FilterProps>> = ({
   visible,
   selected,
   onSelectionChange,
@@ -70,13 +70,15 @@ const Filter: React.FC<FilterProps> = ({
     }
   }, [visible, position]);
 
-  const ListItem: React.FC<{
-    name: FilterSelection;
-    text: string;
-    count?: number;
-    color?: string;
-    badgeColor?: string;
-  }> = ({name, text, count, color, badgeColor}) => (
+  const ListItem: React.FC<
+    React.PropsWithChildren<{
+      name: FilterSelection;
+      text: string;
+      count?: number;
+      color?: string;
+      badgeColor?: string;
+    }>
+  > = ({name, text, count, color, badgeColor}) => (
     <List.Item
       style={styles.listItem}
       titleStyle={styles.title}
@@ -124,7 +126,7 @@ const Filter: React.FC<FilterProps> = ({
 
   return (
     <Surface style={styles.root}>
-      <Animated.View style={{height}} />
+      <Animated.View style={{height: height as any}} />
       <Animated.View
         onLayout={handleLayout}
         style={[

src/components/FilterList.tsx

@@ -1,6 +1,5 @@
 import {useCallback, useLayoutEffect, useState} from 'react';
 import {View, FlatList, RefreshControl} from 'react-native';
-import {useDispatch} from 'react-redux';
 import {IconButton} from 'react-native-paper';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {StackActions} from '@react-navigation/native';
@@ -15,7 +14,7 @@ import {
 import {setArchiveFiles, setFavFile} from 'data/actions/files';
 import {setHideCourse} from 'data/actions/courses';
 import {setSetting} from 'data/actions/settings';
-import {useTypedSelector} from 'data/store';
+import {useAppDispatch, useAppSelector} from 'data/store';
 import useToast from 'hooks/useToast';
 import useDetailNavigator from 'hooks/useDetailNavigator';
 import {ScreenParams} from 'screens/types';
@@ -43,7 +42,7 @@ export interface FilterListProps<T> {
   fav?: T[];
   archived?: T[];
   hidden: T[];
-  itemComponent: React.FC<ItemComponentProps<T>>;
+  itemComponent: React.FC<React.PropsWithChildren<ItemComponentProps<T>>>;
   navigation: NativeStackNavigationProp<
     ScreenParams,
     'Notices' | 'Assignments' | 'Files' | 'Courses'
@@ -71,16 +70,16 @@ const FilterList = <T extends Notice | Assignment | File | Course>({
   refreshing,
   onRefresh,
 }: FilterListProps<T>) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const toast = useToast();
 
   const detailNavigator = useDetailNavigator();
 
-  const tabFilterSelections = useTypedSelector(
+  const tabFilterSelections = useAppSelector(
     state => state.settings.tabFilterSelections,
   );
-  const filterSelected = useTypedSelector(
+  const filterSelected = useAppSelector(
     state =>
       state.settings.tabFilterSelections[type] ?? defaultSelected ?? 'all',
   );

src/components/HeaderTitle.tsx

@@ -6,7 +6,10 @@ export interface HeaderTitleProps {
   subtitle?: string;
 }
 
-const HeaderTitle: React.FC<HeaderTitleProps> = ({title, subtitle}) => {
+const HeaderTitle: React.FC<React.PropsWithChildren<HeaderTitleProps>> = ({
+  title,
+  subtitle,
+}) => {
   return (
     <View
       style={{

src/components/NoticeCard.tsx

@@ -19,7 +19,7 @@ export interface NoticeCardProps extends CardWrapperProps {
   hideCourseName?: boolean;
 }
 
-const NoticeCard: React.FC<NoticeCardProps> = ({
+const NoticeCard: React.FC<React.PropsWithChildren<NoticeCardProps>> = ({
   data: {
     title,
     content,

src/components/SafeArea.tsx

@@ -1,7 +1,9 @@
 import {SafeAreaView, SafeAreaViewProps} from 'react-native-safe-area-context';
 import Styles from 'constants/Styles';
 
-const SafeArea: React.FC<SafeAreaViewProps> = props => {
+const SafeArea: React.FC<
+  React.PropsWithChildren<SafeAreaViewProps>
+> = props => {
   return (
     <SafeAreaView style={Styles.flex1} edges={['left', 'right']} {...props} />
   );

src/components/Skeleton.tsx

@@ -2,7 +2,7 @@ import {useEffect, useCallback, useRef} from 'react';
 import {StyleSheet, View, Animated} from 'react-native';
 import {useTheme} from 'react-native-paper';
 
-const Skeleton: React.FC = () => {
+const Skeleton: React.FC<React.PropsWithChildren<unknown>> = () => {
   const theme = useTheme();
 
   const opacity = useRef(new Animated.Value(1));

src/components/Splash.tsx

@@ -1,6 +1,6 @@
 import {Image, StyleSheet, useColorScheme, View} from 'react-native';
 
-const Splash: React.FC = () => {
+const Splash: React.FC<React.PropsWithChildren<unknown>> = () => {
   const colorScheme = useColorScheme();
 
   return (

src/components/SplitView.tsx

@@ -25,7 +25,7 @@ export interface SplitViewProps {
   showDetail: boolean;
 }
 
-const SplitViewProvider: React.FC<SplitViewProps> = ({
+const SplitViewProvider: React.FC<React.PropsWithChildren<SplitViewProps>> = ({
   splitEnabled,
   detailNavigationContainerRef,
   showDetail,

src/components/TableCell.tsx

@@ -28,7 +28,7 @@ export interface TableCellProps extends ViewProps {
   badge?: boolean;
 }
 
-const TableCell: React.FC<TableCellProps> = ({
+const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({
   type,
   onPress,
   primaryText,

src/components/TextButton.tsx

@@ -8,7 +8,7 @@ export interface TextButtonProps extends TextProps {
   onPress?: TouchableOpacityProps['onPress'];
 }
 
-const TextButton: React.FC<TextButtonProps> = ({
+const TextButton: React.FC<React.PropsWithChildren<TextButtonProps>> = ({
   containerStyle,
   onPress,
   style,

src/components/Toast.tsx

@@ -15,7 +15,9 @@ const ToastContext = createContext<{
   toggleToast: () => {},
 });
 
-const ToastProvider: React.FC = ({children}) => {
+const ToastProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const [toastText, setToastText] = useState('');
   const [toastDuration, setToastDuration] = useState(3000);
 

src/data/store.ts

@@ -1,28 +1,41 @@
-import {applyMiddleware, compose, createStore} from 'redux';
-import {TypedUseSelectorHook, useSelector} from 'react-redux';
-import {PersistConfig, persistReducer, persistStore} from 'redux-persist';
+import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+  PersistConfig,
+} from 'redux-persist';
 import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import thunk from 'redux-thunk';
+import {configureStore} from '@reduxjs/toolkit';
 import {rootReducer} from 'data/reducers/root';
 import {AppState, PersistAppState} from 'data/types/state';
 
-declare const window: any;
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-
 const rootPersistConfig: PersistConfig<AppState> = {
   key: 'root',
   storage: AsyncStorage,
   stateReconciler: autoMergeLevel2,
   blacklist: ['auth', 'settings'],
 };
 
-const store = createStore(
-  persistReducer(rootPersistConfig, rootReducer),
-  composeEnhancers(applyMiddleware(thunk)),
-);
-const persistor = persistStore(store);
-
-const useTypedSelector: TypedUseSelectorHook<PersistAppState> = useSelector;
+export const store = configureStore<PersistAppState>({
+  reducer: persistReducer(rootPersistConfig, rootReducer),
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }) as any,
+});
+export const persistor = persistStore(store);
 
-export {store, persistor, useTypedSelector};
+export type AppDispatch = typeof store.dispatch;
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<
+  ReturnType<typeof store.getState>
+> = useSelector;

src/screens/About.tsx

@@ -10,7 +10,7 @@ import {ScreenParams} from './types';
 import packageJson from '../../package.json';
 
 const About: React.FC<
-  NativeStackScreenProps<ScreenParams, 'About'>
+  React.PropsWithChildren<NativeStackScreenProps<ScreenParams, 'About'>>
 > = props => {
   useNavigationAnimation(props);