Hide loading screen only after JS loaded

This improves performance when updating preferences

App.tsx

@@ -18,27 +18,36 @@
  */
 
 import React from 'react';
-import { LogBox, Platform, SafeAreaView, View } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { Provider as PaperProvider } from 'react-native-paper';
+import { LogBox, Platform } from 'react-native';
 import { setSafeBounceHeight } from 'react-navigation-collapsible';
 import SplashScreen from 'react-native-splash-screen';
-import { OverflowMenuProvider } from 'react-navigation-header-buttons';
-import AsyncStorageManager from './src/managers/AsyncStorageManager';
-import CustomIntroSlider from './src/components/Overrides/CustomIntroSlider';
-import ThemeManager from './src/managers/ThemeManager';
-import MainNavigator from './src/navigation/MainNavigator';
-import AprilFoolsManager from './src/managers/AprilFoolsManager';
-import Update from './src/constants/Update';
 import ConnectionManager from './src/managers/ConnectionManager';
 import type { ParsedUrlDataType } from './src/utils/URLHandler';
 import URLHandler from './src/utils/URLHandler';
-import { setupStatusBar } from './src/utils/Utils';
 import initLocales from './src/utils/Locales';
 import { NavigationContainerRef } from '@react-navigation/core';
-import GENERAL_STYLES from './src/constants/Styles';
-import CollapsibleProvider from './src/components/providers/CollapsibleProvider';
-import CacheProvider from './src/components/providers/CacheProvider';
+import {
+  defaultMascotPreferences,
+  defaultPlanexPreferences,
+  defaultPreferences,
+  defaultProxiwashPreferences,
+  GeneralPreferenceKeys,
+  GeneralPreferencesType,
+  MascotPreferenceKeys,
+  MascotPreferencesType,
+  PlanexPreferenceKeys,
+  PlanexPreferencesType,
+  ProxiwashPreferenceKeys,
+  ProxiwashPreferencesType,
+  retrievePreferences,
+} from './src/utils/asyncStorage';
+import {
+  GeneralPreferencesProvider,
+  MascotPreferencesProvider,
+  PlanexPreferencesProvider,
+  ProxiwashPreferencesProvider,
+} from './src/components/providers/PreferencesProvider';
+import MainApp from './src/screens/MainApp';
 
 // Native optimizations https://reactnavigation.org/docs/react-native-screens
 // Crashes app when navigating away from webview on android 9+
@@ -52,18 +61,20 @@ LogBox.ignoreLogs([
 
 type StateType = {
   isLoading: boolean;
-  showIntro: boolean;
-  showUpdate: boolean;
-  showAprilFools: boolean;
-  currentTheme: ReactNativePaper.Theme | undefined;
+  initialPreferences: {
+    general: GeneralPreferencesType;
+    planex: PlanexPreferencesType;
+    proxiwash: ProxiwashPreferencesType;
+    mascot: MascotPreferencesType;
+  };
 };
 
 export default class App extends React.Component<{}, StateType> {
   navigatorRef: { current: null | NavigationContainerRef };
 
-  defaultHomeRoute: string | null;
+  defaultHomeRoute: string | undefined;
 
-  defaultHomeData: { [key: string]: string };
+  defaultHomeData: { [key: string]: string } | undefined;
 
   urlHandler: URLHandler;
 
@@ -71,15 +82,17 @@ export default class App extends React.Component<{}, StateType> {
     super(props);
     this.state = {
       isLoading: true,
-      showIntro: true,
-      showUpdate: true,
-      showAprilFools: false,
-      currentTheme: undefined,
+      initialPreferences: {
+        general: defaultPreferences,
+        planex: defaultPlanexPreferences,
+        proxiwash: defaultProxiwashPreferences,
+        mascot: defaultMascotPreferences,
+      },
     };
     initLocales();
     this.navigatorRef = React.createRef();
-    this.defaultHomeRoute = null;
-    this.defaultHomeData = {};
+    this.defaultHomeRoute = undefined;
+    this.defaultHomeData = undefined;
     this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
     this.urlHandler.listen();
     setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
@@ -114,67 +127,27 @@ export default class App extends React.Component<{}, StateType> {
     }
   };
 
-  /**
-   * Updates the current theme
-   */
-  onUpdateTheme = () => {
-    this.setState({
-      currentTheme: ThemeManager.getCurrentTheme(),
-    });
-    setupStatusBar();
-  };
-
-  /**
-   * Callback when user ends the intro. Save in preferences to avoid showing back the introSlides
-   */
-  onIntroDone = () => {
-    this.setState({
-      showIntro: false,
-      showUpdate: false,
-      showAprilFools: false,
-    });
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.showIntro.key,
-      false
-    );
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.updateNumber.key,
-      Update.number
-    );
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key,
-      false
-    );
-  };
-
   /**
    * Async loading is done, finish processing startup data
    */
-  onLoadFinished = () => {
-    // Only show intro if this is the first time starting the app
-    ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme);
-    // Status bar goes dark if set too fast on ios
-    if (Platform.OS === 'ios') {
-      setTimeout(setupStatusBar, 1000);
-    } else {
-      setupStatusBar();
-    }
-
+  onLoadFinished = (
+    values: Array<
+      | GeneralPreferencesType
+      | PlanexPreferencesType
+      | ProxiwashPreferencesType
+      | MascotPreferencesType
+      | void
+    >
+  ) => {
+    const [general, planex, proxiwash, mascot] = values;
     this.setState({
       isLoading: false,
-      currentTheme: ThemeManager.getCurrentTheme(),
-      showIntro: AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.showIntro.key
-      ),
-      showUpdate:
-        AsyncStorageManager.getNumber(
-          AsyncStorageManager.PREFERENCES.updateNumber.key
-        ) !== Update.number,
-      showAprilFools:
-        AprilFoolsManager.getInstance().isAprilFoolsEnabled() &&
-        AsyncStorageManager.getBool(
-          AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key
-        ),
+      initialPreferences: {
+        general: general as GeneralPreferencesType,
+        planex: planex as PlanexPreferencesType,
+        proxiwash: proxiwash as ProxiwashPreferencesType,
+        mascot: mascot as MascotPreferencesType,
+      },
     });
     SplashScreen.hide();
   };
@@ -186,7 +159,22 @@ export default class App extends React.Component<{}, StateType> {
    */
   loadAssetsAsync() {
     Promise.all([
-      AsyncStorageManager.getInstance().loadPreferences(),
+      retrievePreferences(
+        Object.values(GeneralPreferenceKeys),
+        defaultPreferences
+      ),
+      retrievePreferences(
+        Object.values(PlanexPreferenceKeys),
+        defaultPlanexPreferences
+      ),
+      retrievePreferences(
+        Object.values(ProxiwashPreferenceKeys),
+        defaultProxiwashPreferences
+      ),
+      retrievePreferences(
+        Object.values(MascotPreferenceKeys),
+        defaultMascotPreferences
+      ),
       ConnectionManager.getInstance().recoverLogin(),
     ])
       .then(this.onLoadFinished)
@@ -201,43 +189,28 @@ export default class App extends React.Component<{}, StateType> {
     if (state.isLoading) {
       return null;
     }
-    if (state.showIntro || state.showUpdate || state.showAprilFools) {
-      return (
-        <CustomIntroSlider
-          onDone={this.onIntroDone}
-          isUpdate={state.showUpdate && !state.showIntro}
-          isAprilFools={state.showAprilFools && !state.showIntro}
-        />
-      );
-    }
     return (
-      <PaperProvider theme={state.currentTheme}>
-        <CollapsibleProvider>
-          <CacheProvider>
-            <OverflowMenuProvider>
-              <View
-                style={{
-                  backgroundColor: ThemeManager.getCurrentTheme().colors
-                    .background,
-                  ...GENERAL_STYLES.flex,
-                }}
-              >
-                <SafeAreaView style={GENERAL_STYLES.flex}>
-                  <NavigationContainer
-                    theme={state.currentTheme}
-                    ref={this.navigatorRef}
-                  >
-                    <MainNavigator
-                      defaultHomeRoute={this.defaultHomeRoute}
-                      defaultHomeData={this.defaultHomeData}
-                    />
-                  </NavigationContainer>
-                </SafeAreaView>
-              </View>
-            </OverflowMenuProvider>
-          </CacheProvider>
-        </CollapsibleProvider>
-      </PaperProvider>
+      <GeneralPreferencesProvider
+        initialPreferences={this.state.initialPreferences.general}
+      >
+        <PlanexPreferencesProvider
+          initialPreferences={this.state.initialPreferences.planex}
+        >
+          <ProxiwashPreferencesProvider
+            initialPreferences={this.state.initialPreferences.proxiwash}
+          >
+            <MascotPreferencesProvider
+              initialPreferences={this.state.initialPreferences.mascot}
+            >
+              <MainApp
+                ref={this.navigatorRef}
+                defaultHomeData={this.defaultHomeData}
+                defaultHomeRoute={this.defaultHomeRoute}
+              />
+            </MascotPreferencesProvider>
+          </ProxiwashPreferencesProvider>
+        </PlanexPreferencesProvider>
+      </GeneralPreferencesProvider>
     );
   }
 }

locales/en.json

@@ -463,6 +463,7 @@
     "badToken": "You are not logged in. Please login and try again.",
     "noConsent": "You did not give your consent for data processing to the Amicale.",
     "tokenSave": "Could not save session token. Please contact support.",
+    "tokenRetrieve": "Could not retrieve session token. Please contact support.",
     "badInput": "Invalid input. Please try again.",
     "forbidden": "You do not have access to this data.",
     "connectionError": "Network error. Please check your internet connection.",

locales/fr.json

@@ -463,6 +463,7 @@
     "badToken": "Tu n'est pas connecté. Merci de te connecter puis réessayes.",
     "noConsent": "Tu n'as pas donné ton consentement pour l'utilisation de tes données personnelles.",
     "tokenSave": "Impossible de sauvegarder le token de session. Merci de contacter le support.",
+    "tokenRetrieve": "Impossible de récupérer le token de session. Merci de contacter le support.",
     "badInput": "Entrée invalide. Merci de réessayer.",
     "forbidden": "Tu n'as pas accès à cette information.",
     "connectionError": "Erreur de réseau. Merci de vérifier ta connexion Internet.",

src/components/Collapsible/CollapsibleComponent.tsx

@@ -51,6 +51,7 @@ function CollapsibleComponent(props: Props) {
   const { paddedProps, headerColors } = props;
   const Comp = props.component;
   const theme = useTheme();
+
   const { setCollapsible } = useCollapsible();
 
   const collapsible = useCollapsibleHeader({
@@ -58,6 +59,11 @@ function CollapsibleComponent(props: Props) {
       collapsedColor: headerColors ? headerColors : theme.colors.surface,
       useNativeDriver: true,
     },
+    navigationOptions: {
+      headerStyle: {
+        backgroundColor: headerColors ? headerColors : theme.colors.surface,
+      },
+    },
   });
 
   useFocusEffect(

src/components/Lists/CardList/CardList.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 import { Animated, Dimensions, ViewStyle } from 'react-native';
 import ImageListItem from './ImageListItem';
 import CardListItem from './CardListItem';
-import type { ServiceItemType } from '../../../managers/ServicesManager';
+import { ServiceItemType } from '../../../utils/Services';
 
 type PropsType = {
   dataset: Array<ServiceItemType>;

src/components/Lists/CardList/CardListItem.tsx

@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { Caption, Card, Paragraph, TouchableRipple } from 'react-native-paper';
 import { StyleSheet, View } from 'react-native';
-import type { ServiceItemType } from '../../../managers/ServicesManager';
 import GENERAL_STYLES from '../../../constants/Styles';
+import { ServiceItemType } from '../../../utils/Services';
 
 type PropsType = {
   item: ServiceItemType;

src/components/Lists/CardList/ImageListItem.tsx

@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { Text, TouchableRipple } from 'react-native-paper';
 import { Image, StyleSheet, View } from 'react-native';
-import type { ServiceItemType } from '../../../managers/ServicesManager';
 import GENERAL_STYLES from '../../../constants/Styles';
+import { ServiceItemType } from '../../../utils/Services';
 
 type PropsType = {
   item: ServiceItemType;

src/components/Lists/DashboardEdit/DashboardEditAccordion.tsx

@@ -23,10 +23,7 @@ import { FlatList, Image, StyleSheet, View } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import DashboardEditItem from './DashboardEditItem';
 import AnimatedAccordion from '../../Animations/AnimatedAccordion';
-import type {
-  ServiceCategoryType,
-  ServiceItemType,
-} from '../../../managers/ServicesManager';
+import { ServiceCategoryType, ServiceItemType } from '../../../utils/Services';
 
 type PropsType = {
   item: ServiceCategoryType;

src/components/Lists/DashboardEdit/DashboardEditItem.tsx

@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { List, useTheme } from 'react-native-paper';
-import type { ServiceItemType } from '../../../managers/ServicesManager';
+import { ServiceItemType } from '../../../utils/Services';
 
 type PropsType = {
   item: ServiceItemType;

src/components/Mascot/MascotPopup.tsx

@@ -28,17 +28,17 @@ import {
   View,
 } from 'react-native';
 import Mascot from './Mascot';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import GENERAL_STYLES from '../../constants/Styles';
 import MascotSpeechBubble, {
   MascotSpeechBubbleProps,
 } from './MascotSpeechBubble';
 import { useMountEffect } from '../../utils/customHooks';
+import { useRoute } from '@react-navigation/core';
+import { useShouldShowMascot } from '../../context/preferencesContext';
 
 type PropsType = MascotSpeechBubbleProps & {
   emotion: number;
   visible?: boolean;
-  prefKey?: string;
 };
 
 const styles = StyleSheet.create({
@@ -61,13 +61,14 @@ const BUBBLE_HEIGHT = Dimensions.get('window').height / 3;
  * Component used to display a popup with the mascot.
  */
 function MascotPopup(props: PropsType) {
+  const route = useRoute();
+  const { shouldShow, setShouldShow } = useShouldShowMascot(route.name);
+
   const isVisible = () => {
     if (props.visible !== undefined) {
       return props.visible;
-    } else if (props.prefKey != null) {
-      return AsyncStorageManager.getBool(props.prefKey);
     } else {
-      return false;
+      return shouldShow;
     }
   };
 
@@ -164,10 +165,8 @@ function MascotPopup(props: PropsType) {
   };
 
   const onDismiss = (callback?: () => void) => {
-    if (props.prefKey != null) {
-      AsyncStorageManager.set(props.prefKey, false);
-      setDialogVisible(false);
-    }
+    setShouldShow(false);
+    setDialogVisible(false);
     if (callback) {
       callback();
     }

src/components/Overrides/CustomIntroSlider.tsx

@@ -32,7 +32,6 @@ import LinearGradient from 'react-native-linear-gradient';
 import * as Animatable from 'react-native-animatable';
 import { Card } from 'react-native-paper';
 import Update from '../../constants/Update';
-import ThemeManager from '../../managers/ThemeManager';
 import Mascot, { MASCOT_STYLE } from '../Mascot/Mascot';
 import MascotIntroWelcome from '../Intro/MascotIntroWelcome';
 import IntroIcon from '../Intro/IconIntro';
@@ -289,9 +288,6 @@ export default class CustomIntroSlider extends React.Component<
 
   onDone = () => {
     const { props } = this;
-    CustomIntroSlider.setStatusBarColor(
-      ThemeManager.getCurrentTheme().colors.surface
-    );
     props.onDone();
   };
 

src/components/Screens/PlanexWebview.tsx

@@ -3,11 +3,11 @@ import { StyleSheet, View } from 'react-native';
 import GENERAL_STYLES from '../../constants/Styles';
 import Urls from '../../constants/Urls';
 import DateManager from '../../managers/DateManager';
-import ThemeManager from '../../managers/ThemeManager';
 import { PlanexGroupType } from '../../screens/Planex/GroupSelectionScreen';
 import ErrorView from './ErrorView';
 import WebViewScreen from './WebViewScreen';
 import i18n from 'i18n-js';
+import { useTheme } from 'react-native-paper';
 
 type Props = {
   currentGroup?: PlanexGroupType;
@@ -67,6 +67,14 @@ calendar.option({
   }
 });`;
 
+export const JS_LOADED_MESSAGE = '1';
+
+const NOTIFY_JS_INJECTED = `
+function notifyJsInjected() {
+  window.ReactNativeWebView.postMessage('${JS_LOADED_MESSAGE}');
+}
+`;
+
 // Mobile friendly CSS
 const CUSTOM_CSS =
   'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
@@ -86,30 +94,35 @@ const INJECT_STYLE_DARK = `$('head').append('<style>${CUSTOM_CSS_DARK}</style>')
  *
  * @param groupID The current group selected
  */
-const generateInjectedJS = (group: PlanexGroupType | undefined) => {
+const generateInjectedJS = (
+  group: PlanexGroupType | undefined,
+  darkMode: boolean
+) => {
   let customInjectedJS = `$(document).ready(function() {
       ${OBSERVE_MUTATIONS_INJECTED}
       ${INJECT_STYLE}
-      ${FULL_CALENDAR_SETTINGS}`;
+      ${FULL_CALENDAR_SETTINGS}
+      ${NOTIFY_JS_INJECTED}`;
   if (group) {
     customInjectedJS += `displayAde(${group.id});`;
   }
   if (DateManager.isWeekend(new Date())) {
     customInjectedJS += `calendar.next();`;
   }
-  if (ThemeManager.getNightMode()) {
+  if (darkMode) {
     customInjectedJS += INJECT_STYLE_DARK;
   }
-  customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
+  customInjectedJS += `notifyJsInjected();});true;`; // Prevents crash on ios
   return customInjectedJS;
 };
 
 function PlanexWebview(props: Props) {
+  const theme = useTheme();
   return (
     <View style={GENERAL_STYLES.flex}>
       <WebViewScreen
         url={Urls.planex.planning}
-        initialJS={generateInjectedJS(props.currentGroup)}
+        initialJS={generateInjectedJS(props.currentGroup, theme.dark)}
         injectJS={props.injectJS}
         onMessage={props.onMessage}
         showAdvancedControls={false}

src/components/Screens/RequestScreen.tsx

@@ -41,7 +41,7 @@ export type RequestProps = {
 
 type Props<T> = RequestScreenProps<T>;
 
-const MIN_REFRESH_TIME = 5 * 1000;
+const MIN_REFRESH_TIME = 3 * 1000;
 
 export default function RequestScreen<T>(props: Props<T>) {
   const navigation = useNavigation<StackNavigationProp<any>>();
@@ -94,8 +94,7 @@ export default function RequestScreen<T>(props: Props<T>) {
           clearInterval(refreshInterval.current);
         }
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.cache, props.refreshOnFocus])
+    }, [props.cache, props.refreshOnFocus, props.autoRefreshTime, refreshData])
   );
 
   const isErrorCritical = (e: API_REQUEST_CODES | undefined) => {

src/components/Screens/WebSectionList.tsx

@@ -44,12 +44,7 @@ type Props<ItemT, RawData> = Omit<
 > &
   Omit<
     RequestScreenProps<RawData>,
-    | 'render'
-    | 'showLoading'
-    | 'showError'
-    | 'refresh'
-    | 'onFinish'
-    | 'onMajorError'
+    'render' | 'showLoading' | 'showError' | 'onMajorError'
   > &
   Omit<
     SectionListProps<ItemT>,
@@ -171,6 +166,8 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
       refreshOnFocus={props.refreshOnFocus}
       cache={props.cache}
       onCacheUpdate={props.onCacheUpdate}
+      refresh={props.refresh}
+      onFinish={props.onFinish}
     />
   );
 }

src/components/providers/PreferencesProvider.tsx

@@ -1,67 +1,173 @@
 import React, { useState } from 'react';
 import {
+  defaultMascotPreferences,
+  defaultPlanexPreferences,
   defaultPreferences,
+  defaultProxiwashPreferences,
+  GeneralPreferenceKeys,
+  GeneralPreferencesType,
+  MascotPreferenceKeys,
+  MascotPreferencesType,
+  PlanexPreferenceKeys,
+  PlanexPreferencesType,
   PreferenceKeys,
   PreferencesType,
+  ProxiwashPreferenceKeys,
+  ProxiwashPreferencesType,
   setPreference,
 } from '../../utils/asyncStorage';
 import {
+  MascotPreferencesContext,
+  PlanexPreferencesContext,
   PreferencesContext,
   PreferencesContextType,
+  ProxiwashPreferencesContext,
 } from '../../context/preferencesContext';
 
-type Props = {
-  children: React.ReactChild;
-  initialPreferences: PreferencesType;
-};
+function updateState<T extends Partial<PreferencesType>, K extends string>(
+  key: K,
+  value: number | string | boolean | object | Array<any>,
+  prevState: PreferencesContextType<T, K>
+) {
+  const prevPreferences = { ...prevState.preferences };
+  const newPrefs = setPreference(key as PreferenceKeys, value, prevPreferences);
+  const newSate = {
+    ...prevState,
+    preferences: { ...newPrefs },
+  };
+  return newSate;
+}
 
-export default function PreferencesProvider(props: Props) {
+function resetState<
+  T extends Partial<PreferencesType>,
+  K extends Partial<PreferenceKeys>
+>(
+  keys: Array<PreferenceKeys>,
+  defaults: T,
+  prevState: PreferencesContextType<T, K>
+) {
+  const prevPreferences = { ...prevState.preferences };
+  let newPreferences = { ...prevPreferences };
+  keys.forEach((key) => {
+    newPreferences = setPreference(key, defaults[key], prevPreferences);
+  });
+  const newSate = {
+    ...prevState,
+    preferences: { ...newPreferences },
+  };
+  return newSate;
+}
+
+function usePreferencesProvider<
+  T extends Partial<PreferencesType>,
+  K extends Partial<PreferenceKeys>
+>(initialPreferences: T, defaults: T, keys: Array<K>) {
   const updatePreferences = (
-    key: PreferenceKeys,
+    key: K,
     value: number | string | boolean | object | Array<any>
   ) => {
-    setPreferencesState((prevState) => {
-      const prevPreferences = { ...prevState.preferences };
-      const newPrefs = setPreference(key, value, prevPreferences);
-      const newSate = {
-        ...prevState,
-        preferences: { ...newPrefs },
-      };
-      return newSate;
-    });
+    setPreferencesState((prevState) => updateState(key, value, prevState));
   };
 
   const resetPreferences = () => {
-    setPreferencesState((prevState) => {
-      const prevPreferences = { ...prevState.preferences };
-      let newPreferences = { ...prevPreferences };
-      Object.values(PreferenceKeys).forEach((key) => {
-        newPreferences = setPreference(
-          key,
-          defaultPreferences[key],
-          prevPreferences
-        );
-      });
-      const newSate = {
-        ...prevState,
-        preferences: { ...newPreferences },
-      };
-      return newSate;
-    });
+    setPreferencesState((prevState) => resetState(keys, defaults, prevState));
   };
 
-  const [
-    preferencesState,
-    setPreferencesState,
-  ] = useState<PreferencesContextType>({
-    preferences: { ...props.initialPreferences },
+  const [preferencesState, setPreferencesState] = useState<
+    PreferencesContextType<T, K>
+  >({
+    preferences: { ...initialPreferences },
     updatePreferences: updatePreferences,
     resetPreferences: resetPreferences,
   });
+  return preferencesState;
+}
 
+type PreferencesProviderProps<
+  T extends Partial<PreferencesType>,
+  K extends Partial<PreferenceKeys>
+> = {
+  children: React.ReactChild;
+  initialPreferences: T;
+  defaults: T;
+  keys: Array<K>;
+  Context: React.Context<PreferencesContextType<T, K>>;
+};
+
+function PreferencesProvider<
+  T extends Partial<PreferencesType>,
+  K extends Partial<PreferenceKeys>
+>(props: PreferencesProviderProps<T, K>) {
+  const { Context } = props;
+  const preferencesState = usePreferencesProvider<T, K>(
+    props.initialPreferences,
+    props.defaults,
+    Object.values(props.keys)
+  );
   return (
-    <PreferencesContext.Provider value={preferencesState}>
+    <Context.Provider value={preferencesState}>
       {props.children}
-    </PreferencesContext.Provider>
+    </Context.Provider>
+  );
+}
+
+type Props<T> = {
+  children: React.ReactChild;
+  initialPreferences: T;
+};
+
+export function GeneralPreferencesProvider(
+  props: Props<GeneralPreferencesType>
+) {
+  return (
+    <PreferencesProvider
+      Context={PreferencesContext}
+      initialPreferences={props.initialPreferences}
+      defaults={defaultPreferences}
+      keys={Object.values(GeneralPreferenceKeys)}
+    >
+      {props.children}
+    </PreferencesProvider>
+  );
+}
+
+export function PlanexPreferencesProvider(props: Props<PlanexPreferencesType>) {
+  return (
+    <PreferencesProvider
+      Context={PlanexPreferencesContext}
+      initialPreferences={props.initialPreferences}
+      defaults={defaultPlanexPreferences}
+      keys={Object.values(PlanexPreferenceKeys)}
+    >
+      {props.children}
+    </PreferencesProvider>
+  );
+}
+
+export function ProxiwashPreferencesProvider(
+  props: Props<ProxiwashPreferencesType>
+) {
+  return (
+    <PreferencesProvider
+      Context={ProxiwashPreferencesContext}
+      initialPreferences={props.initialPreferences}
+      defaults={defaultProxiwashPreferences}
+      keys={Object.values(ProxiwashPreferenceKeys)}
+    >
+      {props.children}
+    </PreferencesProvider>
+  );
+}
+
+export function MascotPreferencesProvider(props: Props<MascotPreferencesType>) {
+  return (
+    <PreferencesProvider
+      Context={MascotPreferencesContext}
+      initialPreferences={props.initialPreferences}
+      defaults={defaultMascotPreferences}
+      keys={Object.values(MascotPreferenceKeys)}
+    >
+      {props.children}
+    </PreferencesProvider>
   );
 }

src/context/preferencesContext.ts

@@ -1,25 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  defaultPreferences,
-  PreferenceKeys,
-  PreferencesType,
-} from '../utils/asyncStorage';
-
-export type PreferencesContextType = {
-  preferences: PreferencesType;
-  updatePreferences: (
-    key: PreferenceKeys,
-    value: number | string | boolean | object | Array<any>
-  ) => void;
-  resetPreferences: () => void;
-};
-
-export const PreferencesContext = React.createContext<PreferencesContextType>({
-  preferences: defaultPreferences,
-  updatePreferences: () => undefined,
-  resetPreferences: () => undefined,
-});
-
-export function usePreferences() {
-  return useContext(PreferencesContext);
-}

src/context/preferencesContext.tsx

@@ -0,0 +1,160 @@
+import { useNavigation } from '@react-navigation/core';
+import React, { useContext } from 'react';
+import { Appearance } from 'react-native-appearance';
+import {
+  defaultMascotPreferences,
+  defaultPlanexPreferences,
+  defaultPreferences,
+  defaultProxiwashPreferences,
+  getPreferenceBool,
+  getPreferenceObject,
+  MascotPreferenceKeys,
+  MascotPreferencesType,
+  PlanexPreferenceKeys,
+  PlanexPreferencesType,
+  GeneralPreferenceKeys,
+  GeneralPreferencesType,
+  ProxiwashPreferenceKeys,
+  ProxiwashPreferencesType,
+  isValidMascotPreferenceKey,
+  PreferencesType,
+} from '../utils/asyncStorage';
+import {
+  getAmicaleServices,
+  getINSAServices,
+  getSpecialServices,
+  getStudentServices,
+} from '../utils/Services';
+
+const colorScheme = Appearance.getColorScheme();
+
+export type PreferencesContextType<
+  T extends Partial<PreferencesType>,
+  K extends string
+> = {
+  preferences: T;
+  updatePreferences: (
+    key: K,
+    value: number | string | boolean | object | Array<any>
+  ) => void;
+  resetPreferences: () => void;
+};
+
+// CONTEXTES
+// Preferences are separated into several contextes to improve performances
+
+export const PreferencesContext = React.createContext<
+  PreferencesContextType<GeneralPreferencesType, GeneralPreferenceKeys>
+>({
+  preferences: defaultPreferences,
+  updatePreferences: () => undefined,
+  resetPreferences: () => undefined,
+});
+
+export const PlanexPreferencesContext = React.createContext<
+  PreferencesContextType<PlanexPreferencesType, PlanexPreferenceKeys>
+>({
+  preferences: defaultPlanexPreferences,
+  updatePreferences: () => undefined,
+  resetPreferences: () => undefined,
+});
+
+export const ProxiwashPreferencesContext = React.createContext<
+  PreferencesContextType<ProxiwashPreferencesType, ProxiwashPreferenceKeys>
+>({
+  preferences: defaultProxiwashPreferences,
+  updatePreferences: () => undefined,
+  resetPreferences: () => undefined,
+});
+
+export const MascotPreferencesContext = React.createContext<
+  PreferencesContextType<MascotPreferencesType, MascotPreferenceKeys>
+>({
+  preferences: defaultMascotPreferences,
+  updatePreferences: () => undefined,
+  resetPreferences: () => undefined,
+});
+
+// Context Hooks
+
+export function usePreferences() {
+  return useContext(PreferencesContext);
+}
+
+export function usePlanexPreferences() {
+  return useContext(PlanexPreferencesContext);
+}
+
+export function useProxiwashPreferences() {
+  return useContext(ProxiwashPreferencesContext);
+}
+
+export function useMascotPreferences() {
+  return useContext(MascotPreferencesContext);
+}
+
+// Custom Hooks
+
+export function useShouldShowMascot(route: string) {
+  const { preferences, updatePreferences } = useMascotPreferences();
+  const key = route + 'ShowMascot';
+  let shouldShow = false;
+  if (isValidMascotPreferenceKey(key)) {
+    shouldShow = getPreferenceBool(key, preferences) !== false;
+  }
+
+  const setShouldShow = (show: boolean) => {
+    if (isValidMascotPreferenceKey(key)) {
+      updatePreferences(key, show);
+    } else {
+      console.log('Invalid preference key: ' + key);
+    }
+  };
+
+  return { shouldShow, setShouldShow };
+}
+
+export function useDarkTheme() {
+  const { preferences } = usePreferences();
+  return (
+    (getPreferenceBool(GeneralPreferenceKeys.nightMode, preferences) !==
+      false &&
+      (getPreferenceBool(
+        GeneralPreferenceKeys.nightModeFollowSystem,
+        preferences
+      ) === false ||
+        colorScheme === 'no-preference')) ||
+    (getPreferenceBool(
+      GeneralPreferenceKeys.nightModeFollowSystem,
+      preferences
+    ) !== false &&
+      colorScheme === 'dark')
+  );
+}
+
+export function useCurrentDashboard() {
+  const { preferences, updatePreferences } = usePreferences();
+  const navigation = useNavigation();
+  const dashboardIdList = getPreferenceObject(
+    GeneralPreferenceKeys.dashboardItems,
+    preferences
+  ) as Array<string>;
+
+  const updateCurrentDashboard = (newList: Array<string>) => {
+    updatePreferences(GeneralPreferenceKeys.dashboardItems, newList);
+  };
+
+  const allDatasets = [
+    ...getAmicaleServices(navigation.navigate),
+    ...getStudentServices(navigation.navigate),
+    ...getINSAServices(navigation.navigate),
+    ...getSpecialServices(navigation.navigate),
+  ];
+  return {
+    currentDashboard: allDatasets.filter((item) =>
+      dashboardIdList.includes(item.key)
+    ),
+    currentDashboardIdList: dashboardIdList,
+    updateCurrentDashboard: updateCurrentDashboard,
+  };
+}

src/managers/AsyncStorageManager.ts

@@ -1,269 +0,0 @@
-/*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { SERVICES_KEY } from './ServicesManager';
-
-/**
- * Singleton used to manage preferences.
- * Preferences are fetched at the start of the app and saved in an instance object.
- * This allows for a synchronous access to saved data.
- */
-
-export default class AsyncStorageManager {
-  static instance: AsyncStorageManager | null = null;
-
-  static PREFERENCES: { [key: string]: { key: string; default: string } } = {
-    debugUnlocked: {
-      key: 'debugUnlocked',
-      default: '0',
-    },
-    showIntro: {
-      key: 'showIntro',
-      default: '1',
-    },
-    updateNumber: {
-      key: 'updateNumber',
-      default: '0',
-    },
-    proxiwashNotifications: {
-      key: 'proxiwashNotifications',
-      default: '5',
-    },
-    nightModeFollowSystem: {
-      key: 'nightModeFollowSystem',
-      default: '1',
-    },
-    nightMode: {
-      key: 'nightMode',
-      default: '1',
-    },
-    defaultStartScreen: {
-      key: 'defaultStartScreen',
-      default: 'home',
-    },
-    servicesShowMascot: {
-      key: 'servicesShowMascot',
-      default: '1',
-    },
-    proxiwashShowMascot: {
-      key: 'proxiwashShowMascot',
-      default: '1',
-    },
-    homeShowMascot: {
-      key: 'homeShowMascot',
-      default: '1',
-    },
-    eventsShowMascot: {
-      key: 'eventsShowMascot',
-      default: '1',
-    },
-    planexShowMascot: {
-      key: 'planexShowMascot',
-      default: '1',
-    },
-    loginShowMascot: {
-      key: 'loginShowMascot',
-      default: '1',
-    },
-    voteShowMascot: {
-      key: 'voteShowMascot',
-      default: '1',
-    },
-    equipmentShowMascot: {
-      key: 'equipmentShowMascot',
-      default: '1',
-    },
-    gameStartMascot: {
-      key: 'gameStartMascot',
-      default: '1',
-    },
-    proxiwashWatchedMachines: {
-      key: 'proxiwashWatchedMachines',
-      default: '[]',
-    },
-    showAprilFoolsStart: {
-      key: 'showAprilFoolsStart',
-      default: '1',
-    },
-    planexCurrentGroup: {
-      key: 'planexCurrentGroup',
-      default: '',
-    },
-    planexFavoriteGroups: {
-      key: 'planexFavoriteGroups',
-      default: '[]',
-    },
-    dashboardItems: {
-      key: 'dashboardItems',
-      default: JSON.stringify([
-        SERVICES_KEY.EMAIL,
-        SERVICES_KEY.WASHERS,
-        SERVICES_KEY.PROXIMO,
-        SERVICES_KEY.TUTOR_INSA,
-        SERVICES_KEY.RU,
-      ]),
-    },
-    gameScores: {
-      key: 'gameScores',
-      default: '[]',
-    },
-    selectedWash: {
-      key: 'selectedWash',
-      default: 'washinsa',
-    },
-  };
-
-  private currentPreferences: { [key: string]: string };
-
-  constructor() {
-    this.currentPreferences = {};
-  }
-
-  /**
-   * Get this class instance or create one if none is found
-   * @returns {AsyncStorageManager}
-   */
-  static getInstance(): AsyncStorageManager {
-    if (AsyncStorageManager.instance == null) {
-      AsyncStorageManager.instance = new AsyncStorageManager();
-    }
-    return AsyncStorageManager.instance;
-  }
-
-  /**
-   * Saves the value associated to the given key to preferences.
-   *
-   * @param key
-   * @param value
-   */
-  static set(
-    key: string,
-    value: number | string | boolean | object | Array<any>
-  ) {
-    AsyncStorageManager.getInstance().setPreference(key, value);
-  }
-
-  /**
-   * Gets the string value of the given preference
-   *
-   * @param key
-   * @returns {string}
-   */
-  static getString(key: string): string {
-    const value = AsyncStorageManager.getInstance().getPreference(key);
-    return value != null ? value : '';
-  }
-
-  /**
-   * Gets the boolean value of the given preference
-   *
-   * @param key
-   * @returns {boolean}
-   */
-  static getBool(key: string): boolean {
-    const value = AsyncStorageManager.getString(key);
-    return value === '1' || value === 'true';
-  }
-
-  /**
-   * Gets the number value of the given preference
-   *
-   * @param key
-   * @returns {number}
-   */
-  static getNumber(key: string): number {
-    return parseFloat(AsyncStorageManager.getString(key));
-  }
-
-  /**
-   * Gets the object value of the given preference
-   *
-   * @param key
-   * @returns {{...}}
-   */
-  static getObject<T>(key: string): T {
-    return JSON.parse(AsyncStorageManager.getString(key));
-  }
-
-  /**
-   * Set preferences object current values from AsyncStorage.
-   * This function should be called at the app's start.
-   *
-   * @return {Promise<void>}
-   */
-  async loadPreferences() {
-    return new Promise((resolve: (val: void) => void) => {
-      const prefKeys: Array<string> = [];
-      // Get all available keys
-      Object.keys(AsyncStorageManager.PREFERENCES).forEach((key: string) => {
-        prefKeys.push(key);
-      });
-      // Get corresponding values
-      AsyncStorage.multiGet(prefKeys).then((resultArray) => {
-        // Save those values for later use
-        resultArray.forEach((item: [string, string | null]) => {
-          const key = item[0];
-          let val = item[1];
-          if (val === null) {
-            val = AsyncStorageManager.PREFERENCES[key].default;
-          }
-          this.currentPreferences[key] = val;
-        });
-        resolve();
-      });
-    });
-  }
-
-  /**
-   * Saves the value associated to the given key to preferences.
-   * This updates the preferences object and saves it to AsyncStorage.
-   *
-   * @param key
-   * @param value
-   */
-  setPreference(
-    key: string,
-    value: number | string | boolean | object | Array<any>
-  ) {
-    if (AsyncStorageManager.PREFERENCES[key] != null) {
-      let convertedValue;
-      if (typeof value === 'string') {
-        convertedValue = value;
-      } else if (typeof value === 'boolean' || typeof value === 'number') {
-        convertedValue = value.toString();
-      } else {
-        convertedValue = JSON.stringify(value);
-      }
-      this.currentPreferences[key] = convertedValue;
-      AsyncStorage.setItem(key, convertedValue);
-    }
-  }
-
-  /**
-   * Gets the value at the given key.
-   * If the key is not available, returns null
-   *
-   * @param key
-   * @returns {string|null}
-   */
-  getPreference(key: string): string | null {
-    return this.currentPreferences[key];
-  }
-}

src/managers/DashboardManager.ts

@@ -1,38 +0,0 @@
-/*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import type { ServiceItemType } from './ServicesManager';
-import ServicesManager from './ServicesManager';
-import { getSublistWithIds } from '../utils/Services';
-import AsyncStorageManager from './AsyncStorageManager';
-
-export default class DashboardManager extends ServicesManager {
-  getCurrentDashboard(): Array<ServiceItemType | null> {
-    const dashboardIdList = AsyncStorageManager.getObject<Array<string>>(
-      AsyncStorageManager.PREFERENCES.dashboardItems.key
-    );
-    const allDatasets = [
-      ...this.amicaleDataset,
-      ...this.studentsDataset,
-      ...this.insaDataset,
-      ...this.specialDataset,
-    ];
-    return getSublistWithIds(dashboardIdList, allDatasets);
-  }
-}

src/managers/ServicesManager.ts

@@ -1,371 +0,0 @@
-/*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import i18n from 'i18n-js';
-import { StackNavigationProp } from '@react-navigation/stack';
-import ConnectionManager from './ConnectionManager';
-import type { FullDashboardType } from '../screens/Home/HomeScreen';
-import getStrippedServicesList from '../utils/Services';
-import Urls from '../constants/Urls';
-
-const AMICALE_LOGO = require('../../assets/amicale.png');
-
-export const SERVICES_KEY = {
-  CLUBS: 'clubs',
-  PROFILE: 'profile',
-  EQUIPMENT: 'equipment',
-  AMICALE_WEBSITE: 'amicale_website',
-  VOTE: 'vote',
-  PROXIMO: 'proximo',
-  WIKETUD: 'wiketud',
-  ELUS_ETUDIANTS: 'elus_etudiants',
-  TUTOR_INSA: 'tutor_insa',
-  RU: 'ru',
-  AVAILABLE_ROOMS: 'available_rooms',
-  BIB: 'bib',
-  EMAIL: 'email',
-  ENT: 'ent',
-  INSA_ACCOUNT: 'insa_account',
-  WASHERS: 'washers',
-  DRYERS: 'dryers',
-};
-
-export const SERVICES_CATEGORIES_KEY = {
-  AMICALE: 'amicale',
-  STUDENTS: 'students',
-  INSA: 'insa',
-  SPECIAL: 'special',
-};
-
-export type ServiceItemType = {
-  key: string;
-  title: string;
-  subtitle: string;
-  image: string | number;
-  onPress: () => void;
-  badgeFunction?: (dashboard: FullDashboardType) => number;
-};
-
-export type ServiceCategoryType = {
-  key: string;
-  title: string;
-  subtitle: string;
-  image: string | number;
-  content: Array<ServiceItemType>;
-};
-
-export default class ServicesManager {
-  navigation: StackNavigationProp<any>;
-
-  amicaleDataset: Array<ServiceItemType>;
-
-  studentsDataset: Array<ServiceItemType>;
-
-  insaDataset: Array<ServiceItemType>;
-
-  specialDataset: Array<ServiceItemType>;
-
-  categoriesDataset: Array<ServiceCategoryType>;
-
-  constructor(nav: StackNavigationProp<any>) {
-    this.navigation = nav;
-    this.amicaleDataset = [
-      {
-        key: SERVICES_KEY.CLUBS,
-        title: i18n.t('screens.clubs.title'),
-        subtitle: i18n.t('screens.services.descriptions.clubs'),
-        image: Urls.images.clubs,
-        onPress: (): void => this.onAmicaleServicePress('club-list'),
-      },
-      {
-        key: SERVICES_KEY.PROFILE,
-        title: i18n.t('screens.profile.title'),
-        subtitle: i18n.t('screens.services.descriptions.profile'),
-        image: Urls.images.profile,
-        onPress: (): void => this.onAmicaleServicePress('profile'),
-      },
-      {
-        key: SERVICES_KEY.EQUIPMENT,
-        title: i18n.t('screens.equipment.title'),
-        subtitle: i18n.t('screens.services.descriptions.equipment'),
-        image: Urls.images.equipment,
-        onPress: (): void => this.onAmicaleServicePress('equipment-list'),
-      },
-      {
-        key: SERVICES_KEY.AMICALE_WEBSITE,
-        title: i18n.t('screens.websites.amicale'),
-        subtitle: i18n.t('screens.services.descriptions.amicaleWebsite'),
-        image: Urls.images.amicale,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.amicale,
-            title: i18n.t('screens.websites.amicale'),
-          }),
-      },
-      {
-        key: SERVICES_KEY.VOTE,
-        title: i18n.t('screens.vote.title'),
-        subtitle: i18n.t('screens.services.descriptions.vote'),
-        image: Urls.images.vote,
-        onPress: (): void => this.onAmicaleServicePress('vote'),
-      },
-    ];
-    this.studentsDataset = [
-      {
-        key: SERVICES_KEY.PROXIMO,
-        title: i18n.t('screens.proximo.title'),
-        subtitle: i18n.t('screens.services.descriptions.proximo'),
-        image: Urls.images.proximo,
-        onPress: (): void => nav.navigate('proximo'),
-        badgeFunction: (dashboard: FullDashboardType): number =>
-          dashboard.proximo_articles,
-      },
-      {
-        key: SERVICES_KEY.WIKETUD,
-        title: 'Wiketud',
-        subtitle: i18n.t('screens.services.descriptions.wiketud'),
-        image: Urls.images.wiketud,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.wiketud,
-            title: 'Wiketud',
-          }),
-      },
-      {
-        key: SERVICES_KEY.ELUS_ETUDIANTS,
-        title: 'Élus Étudiants',
-        subtitle: i18n.t('screens.services.descriptions.elusEtudiants'),
-        image: Urls.images.elusEtudiants,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.elusEtudiants,
-            title: 'Élus Étudiants',
-          }),
-      },
-      {
-        key: SERVICES_KEY.TUTOR_INSA,
-        title: "Tutor'INSA",
-        subtitle: i18n.t('screens.services.descriptions.tutorInsa'),
-        image: Urls.images.tutorInsa,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.tutorInsa,
-            title: "Tutor'INSA",
-          }),
-        badgeFunction: (dashboard: FullDashboardType): number =>
-          dashboard.available_tutorials,
-      },
-    ];
-    this.insaDataset = [
-      {
-        key: SERVICES_KEY.RU,
-        title: i18n.t('screens.menu.title'),
-        subtitle: i18n.t('screens.services.descriptions.self'),
-        image: Urls.images.menu,
-        onPress: (): void => nav.navigate('self-menu'),
-        badgeFunction: (dashboard: FullDashboardType): number =>
-          dashboard.today_menu.length,
-      },
-      {
-        key: SERVICES_KEY.AVAILABLE_ROOMS,
-        title: i18n.t('screens.websites.rooms'),
-        subtitle: i18n.t('screens.services.descriptions.availableRooms'),
-        image: Urls.images.availableRooms,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.availableRooms,
-            title: i18n.t('screens.websites.rooms'),
-          }),
-      },
-      {
-        key: SERVICES_KEY.BIB,
-        title: i18n.t('screens.websites.bib'),
-        subtitle: i18n.t('screens.services.descriptions.bib'),
-        image: Urls.images.bib,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.bib,
-            title: i18n.t('screens.websites.bib'),
-          }),
-      },
-      {
-        key: SERVICES_KEY.EMAIL,
-        title: i18n.t('screens.websites.mails'),
-        subtitle: i18n.t('screens.services.descriptions.mails'),
-        image: Urls.images.bluemind,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.bluemind,
-            title: i18n.t('screens.websites.mails'),
-          }),
-      },
-      {
-        key: SERVICES_KEY.ENT,
-        title: i18n.t('screens.websites.ent'),
-        subtitle: i18n.t('screens.services.descriptions.ent'),
-        image: Urls.images.ent,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.ent,
-            title: i18n.t('screens.websites.ent'),
-          }),
-      },
-      {
-        key: SERVICES_KEY.INSA_ACCOUNT,
-        title: i18n.t('screens.insaAccount.title'),
-        subtitle: i18n.t('screens.services.descriptions.insaAccount'),
-        image: Urls.images.insaAccount,
-        onPress: (): void =>
-          nav.navigate('website', {
-            host: Urls.websites.insaAccount,
-            title: i18n.t('screens.insaAccount.title'),
-          }),
-      },
-    ];
-    this.specialDataset = [
-      {
-        key: SERVICES_KEY.WASHERS,
-        title: i18n.t('screens.proxiwash.washers'),
-        subtitle: i18n.t('screens.services.descriptions.washers'),
-        image: Urls.images.washer,
-        onPress: (): void => nav.navigate('proxiwash'),
-        badgeFunction: (dashboard: FullDashboardType): number =>
-          dashboard.available_washers,
-      },
-      {
-        key: SERVICES_KEY.DRYERS,
-        title: i18n.t('screens.proxiwash.dryers'),
-        subtitle: i18n.t('screens.services.descriptions.washers'),
-        image: Urls.images.dryer,
-        onPress: (): void => nav.navigate('proxiwash'),
-        badgeFunction: (dashboard: FullDashboardType): number =>
-          dashboard.available_dryers,
-      },
-    ];
-    this.categoriesDataset = [
-      {
-        key: SERVICES_CATEGORIES_KEY.AMICALE,
-        title: i18n.t('screens.services.categories.amicale'),
-        subtitle: i18n.t('screens.services.more'),
-        image: AMICALE_LOGO,
-        content: this.amicaleDataset,
-      },
-      {
-        key: SERVICES_CATEGORIES_KEY.STUDENTS,
-        title: i18n.t('screens.services.categories.students'),
-        subtitle: i18n.t('screens.services.more'),
-        image: 'account-group',
-        content: this.studentsDataset,
-      },
-      {
-        key: SERVICES_CATEGORIES_KEY.INSA,
-        title: i18n.t('screens.services.categories.insa'),
-        subtitle: i18n.t('screens.services.more'),
-        image: 'school',
-        content: this.insaDataset,
-      },
-      {
-        key: SERVICES_CATEGORIES_KEY.SPECIAL,
-        title: i18n.t('screens.services.categories.special'),
-        subtitle: i18n.t('screens.services.categories.special'),
-        image: 'star',
-        content: this.specialDataset,
-      },
-    ];
-  }
-
-  /**
-   * Redirects the user to the login screen if he is not logged in
-   *
-   * @param route
-   * @returns {null}
-   */
-  onAmicaleServicePress(route: string) {
-    if (ConnectionManager.getInstance().isLoggedIn()) {
-      this.navigation.navigate(route);
-    } else {
-      this.navigation.navigate('login', { nextScreen: route });
-    }
-  }
-
-  /**
-   * Gets the list of amicale's services
-   *
-   * @param excludedItems Ids of items to exclude from the returned list
-   * @returns {Array<ServiceItemType>}
-   */
-  getAmicaleServices(excludedItems?: Array<string>): Array<ServiceItemType> {
-    if (excludedItems != null) {
-      return getStrippedServicesList(excludedItems, this.amicaleDataset);
-    }
-    return this.amicaleDataset;
-  }
-
-  /**
-   * Gets the list of students' services
-   *
-   * @param excludedItems Ids of items to exclude from the returned list
-   * @returns {Array<ServiceItemType>}
-   */
-  getStudentServices(excludedItems?: Array<string>): Array<ServiceItemType> {
-    if (excludedItems != null) {
-      return getStrippedServicesList(excludedItems, this.studentsDataset);
-    }
-    return this.studentsDataset;
-  }
-
-  /**
-   * Gets the list of INSA's services
-   *
-   * @param excludedItems Ids of items to exclude from the returned list
-   * @returns {Array<ServiceItemType>}
-   */
-  getINSAServices(excludedItems?: Array<string>): Array<ServiceItemType> {
-    if (excludedItems != null) {
-      return getStrippedServicesList(excludedItems, this.insaDataset);
-    }
-    return this.insaDataset;
-  }
-
-  /**
-   * Gets the list of special services
-   *
-   * @param excludedItems Ids of items to exclude from the returned list
-   * @returns {Array<ServiceItemType>}
-   */
-  getSpecialServices(excludedItems?: Array<string>): Array<ServiceItemType> {
-    if (excludedItems != null) {
-      return getStrippedServicesList(excludedItems, this.specialDataset);
-    }
-    return this.specialDataset;
-  }
-
-  /**
-   * Gets all services sorted by category
-   *
-   * @param excludedItems Ids of categories to exclude from the returned list
-   * @returns {Array<ServiceCategoryType>}
-   */
-  getCategories(excludedItems?: Array<string>): Array<ServiceCategoryType> {
-    if (excludedItems != null) {
-      return getStrippedServicesList(excludedItems, this.categoriesDataset);
-    }
-    return this.categoriesDataset;
-  }
-}

src/navigation/MainNavigator.tsx

@@ -46,16 +46,23 @@ import EquipmentConfirmScreen from '../screens/Amicale/Equipment/EquipmentConfir
 import DashboardEditScreen from '../screens/Other/Settings/DashboardEditScreen';
 import GameStartScreen from '../screens/Game/screens/GameStartScreen';
 import ImageGalleryScreen from '../screens/Media/ImageGalleryScreen';
+import { usePreferences } from '../context/preferencesContext';
+import {
+  getPreferenceBool,
+  GeneralPreferenceKeys,
+} from '../utils/asyncStorage';
+import IntroScreen from '../screens/Intro/IntroScreen';
 
 export enum MainRoutes {
   Main = 'main',
+  Intro = 'Intro',
   Gallery = 'gallery',
   Settings = 'settings',
   DashboardEdit = 'dashboard-edit',
   About = 'about',
   Dependencies = 'dependencies',
   Debug = 'debug',
-  GameStart = 'game-start',
+  GameStart = 'game',
   GameMain = 'game-main',
   Login = 'login',
   SelfMenu = 'self-menu',
@@ -66,11 +73,12 @@ export enum MainRoutes {
   ClubList = 'club-list',
   ClubInformation = 'club-information',
   ClubAbout = 'club-about',
-  EquipmentList = 'equipment-list',
+  EquipmentList = 'equipment',
   EquipmentRent = 'equipment-rent',
   EquipmentConfirm = 'equipment-confirm',
   Vote = 'vote',
   Feedback = 'feedback',
+  Website = 'website',
 }
 
 type DefaultParams = { [key in MainRoutes]: object | undefined };
@@ -96,15 +104,23 @@ export type MainStackParamsList = FullParamsList &
 
 const MainStack = createStackNavigator<MainStackParamsList>();
 
-function MainStackComponent(props: {
-  createTabNavigator: () => React.ReactElement;
-}) {
-  const { createTabNavigator } = props;
+function getIntroScreens() {
   return (
-    <MainStack.Navigator
-      initialRouteName={MainRoutes.Main}
-      headerMode={'screen'}
-    >
+    <>
+      <MainStack.Screen
+        name={MainRoutes.Intro}
+        component={IntroScreen}
+        options={{
+          headerShown: false,
+        }}
+      />
+    </>
+  );
+}
+
+function getRegularScreens(createTabNavigator: () => React.ReactElement) {
+  return (
+    <>
       <MainStack.Screen
         name={MainRoutes.Main}
         component={createTabNavigator}
@@ -183,7 +199,7 @@ function MainStackComponent(props: {
         }}
       />
       <MainStack.Screen
-        name={'website'}
+        name={MainRoutes.Website}
         component={WebsiteScreen}
         options={{
           title: '',
@@ -280,19 +296,48 @@ function MainStackComponent(props: {
           title: i18n.t('screens.feedback.title'),
         }}
       />
+    </>
+  );
+}
+
+function MainStackComponent(props: {
+  showIntro: boolean;
+  createTabNavigator: () => React.ReactElement;
+}) {
+  const { showIntro, createTabNavigator } = props;
+  return (
+    <MainStack.Navigator
+      initialRouteName={showIntro ? MainRoutes.Intro : MainRoutes.Main}
+      headerMode={'screen'}
+    >
+      {showIntro ? getIntroScreens() : getRegularScreens(createTabNavigator)}
     </MainStack.Navigator>
   );
 }
 
 type PropsType = {
-  defaultHomeRoute: string | null;
-  defaultHomeData: { [key: string]: string };
+  defaultHomeRoute?: string;
+  defaultHomeData?: { [key: string]: string };
 };
 
-export default function MainNavigator(props: PropsType) {
+function MainNavigator(props: PropsType) {
+  const { preferences } = usePreferences();
+  const showIntro = getPreferenceBool(
+    GeneralPreferenceKeys.showIntro,
+    preferences
+  );
+  const createTabNavigator = () => <TabNavigator {...props} />;
   return (
     <MainStackComponent
-      createTabNavigator={() => <TabNavigator {...props} />}
+      showIntro={showIntro !== false}
+      createTabNavigator={createTabNavigator}
     />
   );
 }
+
+export default React.memo(
+  MainNavigator,
+  (pp: PropsType, np: PropsType) =>
+    pp.defaultHomeRoute === np.defaultHomeRoute &&
+    pp.defaultHomeData === np.defaultHomeData
+);

src/navigation/TabNavigator.tsx

@@ -31,7 +31,6 @@ import PlanningDisplayScreen from '../screens/Planning/PlanningDisplayScreen';
 import ProxiwashScreen from '../screens/Proxiwash/ProxiwashScreen';
 import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
 import PlanexScreen from '../screens/Planex/PlanexScreen';
-import AsyncStorageManager from '../managers/AsyncStorageManager';
 import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen';
 import ScannerScreen from '../screens/Home/ScannerScreen';
 import FeedItemScreen from '../screens/Home/FeedItemScreen';
@@ -41,6 +40,11 @@ import WebsitesHomeScreen from '../screens/Services/ServicesScreen';
 import ServicesSectionScreen from '../screens/Services/ServicesSectionScreen';
 import AmicaleContactScreen from '../screens/Amicale/AmicaleContactScreen';
 import Mascot, { MASCOT_STYLE } from '../components/Mascot/Mascot';
+import { usePreferences } from '../context/preferencesContext';
+import {
+  getPreferenceString,
+  GeneralPreferenceKeys,
+} from '../utils/asyncStorage';
 
 const styles = StyleSheet.create({
   header: {
@@ -56,6 +60,20 @@ const styles = StyleSheet.create({
   },
 });
 
+type DefaultParams = { [key in TabRoutes]: object | undefined };
+
+export type FullParamsList = DefaultParams & {
+  [TabRoutes.Home]: {
+    nextScreen: string;
+    data: Record<string, object | undefined>;
+  };
+};
+
+// Don't know why but TS is complaining without this
+// See: https://stackoverflow.com/questions/63652687/interface-does-not-satisfy-the-constraint-recordstring-object-undefined
+export type TabStackParamsList = FullParamsList &
+  Record<string, object | undefined>;
+
 const ServicesStack = createStackNavigator();
 
 function ServicesStackComponent() {
@@ -121,8 +139,8 @@ function PlanningStackComponent() {
 const HomeStack = createStackNavigator();
 
 function HomeStackComponent(
-  initialRoute: string | null,
-  defaultData: { [key: string]: string }
+  initialRoute?: string,
+  defaultData?: { [key: string]: string }
 ) {
   let params;
   if (initialRoute) {
@@ -214,11 +232,11 @@ function PlanexStackComponent() {
   );
 }
 
-const Tab = createBottomTabNavigator();
+const Tab = createBottomTabNavigator<TabStackParamsList>();
 
 type PropsType = {
-  defaultHomeRoute: string | null;
-  defaultHomeData: { [key: string]: string };
+  defaultHomeRoute?: string;
+  defaultHomeData?: { [key: string]: string };
 };
 
 const ICONS: {
@@ -239,7 +257,7 @@ const ICONS: {
     normal: '',
     focused: '',
   },
-  planning: {
+  events: {
     normal: 'calendar-range-outline',
     focused: 'calendar-range',
   },
@@ -249,65 +267,77 @@ const ICONS: {
   },
 };
 
-export default class TabNavigator extends React.Component<PropsType> {
-  defaultRoute: string;
-  createHomeStackComponent: () => any;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.defaultRoute = 'home';
-    if (!props.defaultHomeRoute) {
-      this.defaultRoute = AsyncStorageManager.getString(
-        AsyncStorageManager.PREFERENCES.defaultStartScreen.key
-      ).toLowerCase();
-    }
-    this.createHomeStackComponent = () =>
-      HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
+function TabNavigator(props: PropsType) {
+  const { preferences } = usePreferences();
+  let defaultRoute = getPreferenceString(
+    GeneralPreferenceKeys.defaultStartScreen,
+    preferences
+  );
+  if (!defaultRoute) {
+    defaultRoute = 'home';
+  } else {
+    defaultRoute = defaultRoute.toLowerCase();
   }
 
-  render() {
-    const LABELS: {
-      [key: string]: string;
-    } = {
-      services: i18n.t('screens.services.title'),
-      proxiwash: i18n.t('screens.proxiwash.title'),
-      home: i18n.t('screens.home.title'),
-      planning: i18n.t('screens.planning.title'),
-      planex: i18n.t('screens.planex.title'),
-    };
-    return (
-      <Tab.Navigator
-        initialRouteName={this.defaultRoute}
-        tabBar={(tabProps) => (
-          <CustomTabBar {...tabProps} labels={LABELS} icons={ICONS} />
-        )}
-      >
-        <Tab.Screen
-          name={'services'}
-          component={ServicesStackComponent}
-          options={{ title: i18n.t('screens.services.title') }}
-        />
-        <Tab.Screen
-          name={'proxiwash'}
-          component={ProxiwashStackComponent}
-          options={{ title: i18n.t('screens.proxiwash.title') }}
-        />
-        <Tab.Screen
-          name={'home'}
-          component={this.createHomeStackComponent}
-          options={{ title: i18n.t('screens.home.title') }}
-        />
-        <Tab.Screen
-          name={'planning'}
-          component={PlanningStackComponent}
-          options={{ title: i18n.t('screens.planning.title') }}
-        />
-        <Tab.Screen
-          name={'planex'}
-          component={PlanexStackComponent}
-          options={{ title: i18n.t('screens.planex.title') }}
-        />
-      </Tab.Navigator>
-    );
-  }
+  const createHomeStackComponent = () =>
+    HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
+
+  const LABELS: {
+    [key: string]: string;
+  } = {
+    services: i18n.t('screens.services.title'),
+    proxiwash: i18n.t('screens.proxiwash.title'),
+    home: i18n.t('screens.home.title'),
+    events: i18n.t('screens.planning.title'),
+    planex: i18n.t('screens.planex.title'),
+  };
+  return (
+    <Tab.Navigator
+      initialRouteName={defaultRoute}
+      tabBar={(tabProps) => (
+        <CustomTabBar {...tabProps} labels={LABELS} icons={ICONS} />
+      )}
+    >
+      <Tab.Screen
+        name={'services'}
+        component={ServicesStackComponent}
+        options={{ title: i18n.t('screens.services.title') }}
+      />
+      <Tab.Screen
+        name={'proxiwash'}
+        component={ProxiwashStackComponent}
+        options={{ title: i18n.t('screens.proxiwash.title') }}
+      />
+      <Tab.Screen
+        name={'home'}
+        component={createHomeStackComponent}
+        options={{ title: i18n.t('screens.home.title') }}
+      />
+      <Tab.Screen
+        name={'events'}
+        component={PlanningStackComponent}
+        options={{ title: i18n.t('screens.planning.title') }}
+      />
+      <Tab.Screen
+        name={'planex'}
+        component={PlanexStackComponent}
+        options={{ title: i18n.t('screens.planex.title') }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default React.memo(
+  TabNavigator,
+  (pp: PropsType, np: PropsType) =>
+    pp.defaultHomeRoute === np.defaultHomeRoute &&
+    pp.defaultHomeData === np.defaultHomeData
+);
+
+export enum TabRoutes {
+  Services = 'services',
+  Proxiwash = 'proxiwash',
+  Home = 'home',
+  Planning = 'events',
+  Planex = 'planex',
 }

src/screens/About/DebugScreen.tsx

@@ -17,7 +17,7 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import {
   Button,
@@ -25,12 +25,17 @@ import {
   Subheading,
   TextInput,
   Title,
-  withTheme,
+  useTheme,
 } from 'react-native-paper';
 import { Modalize } from 'react-native-modalize';
 import CustomModal from '../../components/Overrides/CustomModal';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
+import { usePreferences } from '../../context/preferencesContext';
+import {
+  defaultPreferences,
+  GeneralPreferenceKeys,
+  isValidGeneralPreferenceKey,
+} from '../../utils/asyncStorage';
 
 type PreferenceItemType = {
   key: string;
@@ -38,15 +43,6 @@ type PreferenceItemType = {
   current: string;
 };
 
-type PropsType = {
-  theme: ReactNativePaper.Theme;
-};
-
-type StateType = {
-  modalCurrentDisplayItem: PreferenceItemType | null;
-  currentPreferences: Array<PreferenceItemType>;
-};
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -62,47 +58,35 @@ const styles = StyleSheet.create({
  * Class defining the Debug screen.
  * This screen allows the user to get and modify information on the app/device.
  */
-class DebugScreen extends React.Component<PropsType, StateType> {
-  modalRef: { current: Modalize | null };
+function DebugScreen() {
+  const theme = useTheme();
+  const { preferences, updatePreferences } = usePreferences();
+  const modalRef = useRef<Modalize>(null);
 
-  modalInputValue: string;
+  const [modalInputValue, setModalInputValue] = useState<string>('');
+  const [
+    modalCurrentDisplayItem,
+    setModalCurrentDisplayItem,
+  ] = useState<PreferenceItemType | null>(null);
 
-  /**
-   * Copies user preferences to state for easier manipulation
-   *
-   * @param props
-   */
-  constructor(props: PropsType) {
-    super(props);
-    this.modalRef = React.createRef<Modalize>();
-    this.modalInputValue = '';
-    const currentPreferences: Array<PreferenceItemType> = [];
-    Object.values(AsyncStorageManager.PREFERENCES).forEach((object: any) => {
-      const newObject: PreferenceItemType = { ...object };
-      newObject.current = AsyncStorageManager.getString(newObject.key);
-      currentPreferences.push(newObject);
-    });
-    this.state = {
-      modalCurrentDisplayItem: null,
-      currentPreferences,
+  const currentPreferences: Array<PreferenceItemType> = [];
+  Object.values(GeneralPreferenceKeys).forEach((key) => {
+    const newObject: PreferenceItemType = {
+      key: key,
+      current: preferences[key],
+      default: defaultPreferences[key],
     };
-  }
+    currentPreferences.push(newObject);
+  });
 
-  /**
-   * Gets the edit modal content
-   *
-   * @return {*}
-   */
-  getModalContent() {
-    const { props, state } = this;
+  const getModalContent = () => {
     let key = '';
     let defaultValue = '';
     let current = '';
-    if (state.modalCurrentDisplayItem) {
-      key = state.modalCurrentDisplayItem.key;
-      defaultValue = state.modalCurrentDisplayItem.default;
-      defaultValue = state.modalCurrentDisplayItem.default;
-      current = state.modalCurrentDisplayItem.current;
+    if (modalCurrentDisplayItem) {
+      key = modalCurrentDisplayItem.key;
+      defaultValue = modalCurrentDisplayItem.default;
+      current = modalCurrentDisplayItem.current;
     }
 
     return (
@@ -110,19 +94,14 @@ class DebugScreen extends React.Component<PropsType, StateType> {
         <Title>{key}</Title>
         <Subheading>Default: {defaultValue}</Subheading>
         <Subheading>Current: {current}</Subheading>
-        <TextInput
-          label="New Value"
-          onChangeText={(text: string) => {
-            this.modalInputValue = text;
-          }}
-        />
+        <TextInput label={'New Value'} onChangeText={setModalInputValue} />
         <View style={styles.buttonContainer}>
           <Button
             mode="contained"
             dark
-            color={props.theme.colors.success}
+            color={theme.colors.success}
             onPress={() => {
-              this.saveNewPrefs(key, this.modalInputValue);
+              saveNewPrefs(key, modalInputValue);
             }}
           >
             Save new value
@@ -130,9 +109,9 @@ class DebugScreen extends React.Component<PropsType, StateType> {
           <Button
             mode="contained"
             dark
-            color={props.theme.colors.danger}
+            color={theme.colors.danger}
             onPress={() => {
-              this.saveNewPrefs(key, defaultValue);
+              saveNewPrefs(key, defaultValue);
             }}
           >
             Reset to default
@@ -140,85 +119,46 @@ class DebugScreen extends React.Component<PropsType, StateType> {
         </View>
       </View>
     );
-  }
+  };
 
-  getRenderItem = ({ item }: { item: PreferenceItemType }) => {
+  const getRenderItem = ({ item }: { item: PreferenceItemType }) => {
     return (
       <List.Item
         title={item.key}
         description="Click to edit"
         onPress={() => {
-          this.showEditModal(item);
+          showEditModal(item);
         }}
       />
     );
   };
 
-  /**
-   * Shows the edit modal
-   *
-   * @param item
-   */
-  showEditModal(item: PreferenceItemType) {
-    this.setState({
-      modalCurrentDisplayItem: item,
-    });
-    if (this.modalRef.current) {
-      this.modalRef.current.open();
+  const showEditModal = (item: PreferenceItemType) => {
+    setModalCurrentDisplayItem(item);
+    if (modalRef.current) {
+      modalRef.current.open();
     }
-  }
+  };
 
-  /**
-   * Finds the index of the given key in the preferences array
-   *
-   * @param key THe key to find the index of
-   * @returns {number}
-   */
-  findIndexOfKey(key: string): number {
-    const { currentPreferences } = this.state;
-    let index = -1;
-    for (let i = 0; i < currentPreferences.length; i += 1) {
-      if (currentPreferences[i].key === key) {
-        index = i;
-        break;
-      }
+  const saveNewPrefs = (key: string, value: string) => {
+    if (isValidGeneralPreferenceKey(key)) {
+      updatePreferences(key, value);
     }
-    return index;
-  }
-
-  /**
-   * Saves the new value of the given preference
-   *
-   * @param key The pref key
-   * @param value The pref value
-   */
-  saveNewPrefs(key: string, value: string) {
-    this.setState((prevState: StateType): {
-      currentPreferences: Array<PreferenceItemType>;
-    } => {
-      const currentPreferences = [...prevState.currentPreferences];
-      currentPreferences[this.findIndexOfKey(key)].current = value;
-      return { currentPreferences };
-    });
-    AsyncStorageManager.set(key, value);
-    if (this.modalRef.current) {
-      this.modalRef.current.close();
+    if (modalRef.current) {
+      modalRef.current.close();
     }
-  }
+  };
 
-  render() {
-    const { state } = this;
-    return (
-      <View>
-        <CustomModal ref={this.modalRef}>{this.getModalContent()}</CustomModal>
-        <CollapsibleFlatList
-          data={state.currentPreferences}
-          extraData={state.currentPreferences}
-          renderItem={this.getRenderItem}
-        />
-      </View>
-    );
-  }
+  return (
+    <View>
+      <CustomModal ref={modalRef}>{getModalContent()}</CustomModal>
+      <CollapsibleFlatList
+        data={currentPreferences}
+        extraData={currentPreferences}
+        renderItem={getRenderItem}
+      />
+    </View>
+  );
 }
 
-export default withTheme(DebugScreen);
+export default DebugScreen;

src/screens/Amicale/Equipment/EquipmentListScreen.tsx

@@ -25,7 +25,6 @@ import i18n from 'i18n-js';
 import EquipmentListItem from '../../../components/Lists/Equipment/EquipmentListItem';
 import MascotPopup from '../../../components/Mascot/MascotPopup';
 import { MASCOT_STYLE } from '../../../components/Mascot/Mascot';
-import AsyncStorageManager from '../../../managers/AsyncStorageManager';
 import GENERAL_STYLES from '../../../constants/Styles';
 import ConnectionManager from '../../../managers/ConnectionManager';
 import { ApiRejectType } from '../../../utils/WebData';
@@ -36,7 +35,7 @@ type PropsType = {
 };
 
 type StateType = {
-  mascotDialogVisible: boolean;
+  mascotDialogVisible: boolean | undefined;
 };
 
 export type DeviceType = {
@@ -75,9 +74,7 @@ class EquipmentListScreen extends React.Component<PropsType, StateType> {
     super(props);
     this.userRents = null;
     this.state = {
-      mascotDialogVisible: AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.equipmentShowMascot.key
-      ),
+      mascotDialogVisible: undefined,
     };
   }
 
@@ -145,10 +142,6 @@ class EquipmentListScreen extends React.Component<PropsType, StateType> {
   };
 
   hideMascotDialog = () => {
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.equipmentShowMascot.key,
-      false
-    );
     this.setState({ mascotDialogVisible: false });
   };
 

src/screens/Amicale/LoginScreen.tsx

@@ -31,7 +31,6 @@ import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack';
 import LinearGradient from 'react-native-linear-gradient';
 import ConnectionManager from '../../managers/ConnectionManager';
 import ErrorDialog from '../../components/Dialogs/ErrorDialog';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
 import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
@@ -56,7 +55,7 @@ type StateType = {
   loading: boolean;
   dialogVisible: boolean;
   dialogError: ApiRejectType;
-  mascotDialogVisible: boolean;
+  mascotDialogVisible: boolean | undefined;
 };
 
 const ICON_AMICALE = require('../../../assets/amicale.png');
@@ -118,9 +117,7 @@ class LoginScreen extends React.Component<Props, StateType> {
       loading: false,
       dialogVisible: false,
       dialogError: { status: REQUEST_STATUS.SUCCESS },
-      mascotDialogVisible: AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.loginShowMascot.key
-      ),
+      mascotDialogVisible: undefined,
     };
   }
 
@@ -321,10 +318,6 @@ class LoginScreen extends React.Component<Props, StateType> {
   };
 
   hideMascotDialog = () => {
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.loginShowMascot.key,
-      false
-    );
     this.setState({ mascotDialogVisible: false });
   };
 
@@ -357,10 +350,11 @@ class LoginScreen extends React.Component<Props, StateType> {
   handleSuccess = () => {
     const { navigation } = this.props;
     // Do not show the home login banner again
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.homeShowMascot.key,
-      false
-    );
+    // TODO
+    // AsyncStorageManager.set(
+    //   AsyncStorageManager.PREFERENCES.homeShowMascot.key,
+    //   false
+    // );
     if (this.nextScreen == null) {
       navigation.goBack();
     } else {

src/screens/Amicale/ProfileScreen.tsx

@@ -36,13 +36,16 @@ import MaterialHeaderButtons, {
 } from '../../components/Overrides/CustomHeaderButton';
 import CardList from '../../components/Lists/CardList/CardList';
 import Mascot, { MASCOT_STYLE } from '../../components/Mascot/Mascot';
-import ServicesManager, { SERVICES_KEY } from '../../managers/ServicesManager';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
-import type { ServiceItemType } from '../../managers/ServicesManager';
 import GENERAL_STYLES from '../../constants/Styles';
 import Urls from '../../constants/Urls';
 import RequestScreen from '../../components/Screens/RequestScreen';
 import ConnectionManager from '../../managers/ConnectionManager';
+import {
+  getAmicaleServices,
+  ServiceItemType,
+  SERVICES_KEY,
+} from '../../utils/Services';
 
 type PropsType = {
   navigation: StackNavigationProp<any>;
@@ -100,8 +103,9 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
     super(props);
     this.data = undefined;
     this.flatListData = [{ id: '0' }, { id: '1' }, { id: '2' }, { id: '3' }];
-    const services = new ServicesManager(props.navigation);
-    this.amicaleDataset = services.getAmicaleServices([SERVICES_KEY.PROFILE]);
+    this.amicaleDataset = getAmicaleServices(props.navigation.navigate, [
+      SERVICES_KEY.PROFILE,
+    ]);
     this.state = {
       dialogVisible: false,
     };

src/screens/Amicale/VoteScreen.tsx

@@ -28,7 +28,6 @@ import VoteResults from '../../components/Amicale/Vote/VoteResults';
 import VoteWait from '../../components/Amicale/Vote/VoteWait';
 import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import VoteNotAvailable from '../../components/Amicale/Vote/VoteNotAvailable';
 import GENERAL_STYLES from '../../constants/Styles';
 import ConnectionManager from '../../managers/ConnectionManager';
@@ -118,7 +117,7 @@ type PropsType = {};
 
 type StateType = {
   hasVoted: boolean;
-  mascotDialogVisible: boolean;
+  mascotDialogVisible: boolean | undefined;
 };
 
 const styles = StyleSheet.create({
@@ -154,9 +153,7 @@ export default class VoteScreen extends React.Component<PropsType, StateType> {
     this.dates = undefined;
     this.state = {
       hasVoted: false,
-      mascotDialogVisible: AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.voteShowMascot.key
-      ),
+      mascotDialogVisible: undefined,
     };
     this.hasVoted = false;
     this.today = new Date();
@@ -328,10 +325,6 @@ export default class VoteScreen extends React.Component<PropsType, StateType> {
   };
 
   hideMascotDialog = () => {
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.voteShowMascot.key,
-      false
-    );
     this.setState({ mascotDialogVisible: false });
   };
 

src/screens/Game/components/FullGamePodium.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { GamePodium } from './GamePodium';
+
+type Props = {
+  scores: Array<number>;
+  isHighScore: boolean;
+};
+
+const styles = StyleSheet.create({
+  topScoreContainer: {
+    marginBottom: 20,
+    marginTop: 20,
+  },
+  topScoreSubcontainer: {
+    flexDirection: 'row',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+});
+
+export default function FullGamePodium(props: Props) {
+  const { scores, isHighScore } = props;
+  const gold = scores.length > 0 ? scores[0] : '-';
+  const silver = scores.length > 1 ? scores[1] : '-';
+  const bronze = scores.length > 2 ? scores[2] : '-';
+  return (
+    <View style={styles.topScoreContainer}>
+      <GamePodium place={1} score={gold.toString()} isHighScore={isHighScore} />
+      <View style={styles.topScoreSubcontainer}>
+        <GamePodium
+          place={3}
+          score={bronze.toString()}
+          isHighScore={isHighScore}
+        />
+        <GamePodium
+          place={2}
+          score={silver.toString()}
+          isHighScore={isHighScore}
+        />
+      </View>
+    </View>
+  );
+}

src/screens/Game/components/GameBrackground.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import * as Animatable from 'react-native-animatable';
+import { useTheme } from 'react-native-paper';
+import GridManager from '../logic/GridManager';
+import Piece from '../logic/Piece';
+import GridComponent from './GridComponent';
+
+const styles = StyleSheet.create({
+  pieceContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  pieceBackground: {
+    position: 'absolute',
+  },
+});
+
+export default function GameBackground() {
+  const theme = useTheme();
+  const gridManager = new GridManager(4, 4, theme);
+  const gridList = [];
+  for (let i = 0; i < 18; i += 1) {
+    gridList.push(gridManager.getEmptyGrid(4, 4));
+    const piece = new Piece(theme);
+    piece.toGrid(gridList[i], true);
+  }
+  return (
+    <View style={styles.pieceContainer}>
+      {gridList.map((item, index) => {
+        const size = 10 + Math.floor(Math.random() * 30);
+        const top = Math.floor(Math.random() * 100);
+        const rot = Math.floor(Math.random() * 360);
+        const left = (index % 6) * 20;
+        const animDelay = size * 20;
+        const animDuration = 2 * (2000 - size * 30);
+        return (
+          <Animatable.View
+            useNativeDriver={true}
+            animation={'fadeInDownBig'}
+            delay={animDelay}
+            duration={animDuration}
+            key={`piece${index.toString()}`}
+            style={{
+              width: `${size}%`,
+              top: `${top}%`,
+              left: `${left}%`,
+              ...styles.pieceBackground,
+            }}
+          >
+            <GridComponent
+              width={4}
+              height={4}
+              grid={item}
+              style={{
+                transform: [{ rotateZ: `${rot}deg` }],
+              }}
+            />
+          </Animatable.View>
+        );
+      })}
+    </View>
+  );
+}

src/screens/Game/components/GameControls.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { IconButton, useTheme } from 'react-native-paper';
+import GENERAL_STYLES from '../../../constants/Styles';
+import GameLogic, { MovementCallbackType } from '../logic/GameLogic';
+
+type Props = {
+  logic: GameLogic;
+  onDirectionPressed: MovementCallbackType;
+};
+
+const styles = StyleSheet.create({
+  controlsContainer: {
+    height: 80,
+    flexDirection: 'row',
+  },
+  directionsContainer: {
+    flexDirection: 'row',
+    flex: 4,
+  },
+});
+
+function GameControls(props: Props) {
+  const { logic } = props;
+  const theme = useTheme();
+  return (
+    <View style={styles.controlsContainer}>
+      <IconButton
+        icon={'rotate-right-variant'}
+        size={40}
+        onPress={() => logic.rotatePressed(props.onDirectionPressed)}
+        style={GENERAL_STYLES.flex}
+      />
+      <View style={styles.directionsContainer}>
+        <IconButton
+          icon={'chevron-left'}
+          size={40}
+          style={GENERAL_STYLES.flex}
+          onPress={() => logic.pressedOut()}
+          onPressIn={() => logic.leftPressedIn(props.onDirectionPressed)}
+        />
+        <IconButton
+          icon={'chevron-right'}
+          size={40}
+          style={GENERAL_STYLES.flex}
+          onPress={() => logic.pressedOut()}
+          onPressIn={() => logic.rightPressed(props.onDirectionPressed)}
+        />
+      </View>
+      <IconButton
+        icon={'arrow-down-bold'}
+        size={40}
+        onPressIn={() => logic.downPressedIn(props.onDirectionPressed)}
+        onPress={() => logic.pressedOut()}
+        style={GENERAL_STYLES.flex}
+        color={theme.colors.tetrisScore}
+      />
+    </View>
+  );
+}
+
+export default React.memo(GameControls, () => true);

src/screens/Game/components/GamePodium.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Text, useTheme } from 'react-native-paper';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import * as Animatable from 'react-native-animatable';
+
+type Props = {
+  place: 1 | 2 | 3;
+  score: string;
+  isHighScore: boolean;
+};
+
+const styles = StyleSheet.create({
+  podiumContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  podiumIconContainer: {
+    position: 'absolute',
+    top: -20,
+  },
+  centertext: {
+    textAlign: 'center',
+  },
+});
+
+export function GamePodium(props: Props) {
+  const { place, score, isHighScore } = props;
+  const theme = useTheme();
+  let icon = 'podium-gold';
+  let color = theme.colors.gameGold;
+  let fontSize = 20;
+  let size = 70;
+  if (place === 2) {
+    icon = 'podium-silver';
+    color = theme.colors.gameSilver;
+    fontSize = 18;
+    size = 60;
+  } else if (place === 3) {
+    icon = 'podium-bronze';
+    color = theme.colors.gameBronze;
+    fontSize = 15;
+    size = 50;
+  }
+  const marginLeft = place === 2 ? 20 : 'auto';
+  const marginRight = place === 3 ? 20 : 'auto';
+  const fontWeight = place === 1 ? 'bold' : undefined;
+  return (
+    <View
+      style={{
+        marginLeft: marginLeft,
+        marginRight: marginRight,
+        ...styles.podiumContainer,
+      }}
+    >
+      {isHighScore && place === 1 ? (
+        <Animatable.View
+          animation="swing"
+          iterationCount="infinite"
+          duration={2000}
+          delay={1000}
+          useNativeDriver
+          style={styles.podiumIconContainer}
+        >
+          <Animatable.View
+            animation="pulse"
+            iterationCount="infinite"
+            useNativeDriver
+          >
+            <MaterialCommunityIcons
+              name="decagram"
+              color={theme.colors.gameGold}
+              size={150}
+            />
+          </Animatable.View>
+        </Animatable.View>
+      ) : null}
+      <MaterialCommunityIcons
+        name={icon}
+        color={isHighScore && place === 1 ? '#fff' : color}
+        size={size}
+      />
+      <Text
+        style={{
+          fontWeight: fontWeight,
+          fontSize,
+          ...styles.centertext,
+        }}
+      >
+        {score}
+      </Text>
+    </View>
+  );
+}

src/screens/Game/components/GameScore.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import i18n from 'i18n-js';
+import { Text, useTheme } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+import GENERAL_STYLES from '../../../constants/Styles';
+
+type Props = {
+  score: number;
+  highScore?: number;
+};
+
+const styles = StyleSheet.create({
+  scoreMainContainer: {
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  scoreCurrentContainer: {
+    flexDirection: 'row',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  scoreText: {
+    marginLeft: 5,
+    fontSize: 20,
+  },
+  scoreBestContainer: {
+    flexDirection: 'row',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: 5,
+  },
+  centerVerticalSmallMargin: {
+    ...GENERAL_STYLES.centerVertical,
+    marginLeft: 5,
+  },
+});
+
+function GameScore(props: Props) {
+  const { score, highScore } = props;
+  const theme = useTheme();
+  const displayHighScore =
+    highScore == null || score > highScore ? score : highScore;
+  return (
+    <View style={styles.scoreMainContainer}>
+      <View style={styles.scoreCurrentContainer}>
+        <Text style={styles.scoreText}>
+          {i18n.t('screens.game.score', { score: score })}
+        </Text>
+        <MaterialCommunityIcons
+          name="star"
+          color={theme.colors.tetrisScore}
+          size={20}
+          style={styles.centerVerticalSmallMargin}
+        />
+      </View>
+      <View style={styles.scoreBestContainer}>
+        <Text
+          style={{
+            ...styles.scoreText,
+            color: theme.colors.textDisabled,
+          }}
+        >
+          {i18n.t('screens.game.highScore', { score: displayHighScore })}
+        </Text>
+        <MaterialCommunityIcons
+          name="star"
+          color={theme.colors.tetrisScore}
+          size={10}
+          style={styles.centerVerticalSmallMargin}
+        />
+      </View>
+    </View>
+  );
+}
+
+export default React.memo(
+  GameScore,
+  (pp, np) => pp.highScore === np.highScore && pp.score === np.score
+);

src/screens/Game/components/GameStatus.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Caption, Text, useTheme } from 'react-native-paper';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import GENERAL_STYLES from '../../../constants/Styles';
+import i18n from 'i18n-js';
+
+type Props = {
+  time: number;
+  level: number;
+};
+
+const styles = StyleSheet.create({
+  centerSmallMargin: {
+    ...GENERAL_STYLES.centerHorizontal,
+    marginBottom: 5,
+  },
+  centerBigMargin: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginBottom: 20,
+  },
+  statusContainer: {
+    flexDirection: 'row',
+  },
+  statusIcon: {
+    marginLeft: 5,
+  },
+});
+
+function getFormattedTime(seconds: number): string {
+  const date = new Date();
+  date.setHours(0);
+  date.setMinutes(0);
+  date.setSeconds(seconds);
+  let format;
+  if (date.getHours()) {
+    format = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+  } else if (date.getMinutes()) {
+    format = `${date.getMinutes()}:${date.getSeconds()}`;
+  } else {
+    format = date.getSeconds().toString();
+  }
+  return format;
+}
+
+function GameStatus(props: Props) {
+  const theme = useTheme();
+  return (
+    <View
+      style={{
+        ...GENERAL_STYLES.flex,
+        ...GENERAL_STYLES.centerVertical,
+      }}
+    >
+      <View style={GENERAL_STYLES.centerHorizontal}>
+        <Caption style={styles.centerSmallMargin}>
+          {i18n.t('screens.game.time')}
+        </Caption>
+        <View style={styles.statusContainer}>
+          <MaterialCommunityIcons
+            name={'timer'}
+            color={theme.colors.subtitle}
+            size={20}
+          />
+          <Text
+            style={{
+              ...styles.statusIcon,
+              color: theme.colors.subtitle,
+            }}
+          >
+            {getFormattedTime(props.time)}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.centerBigMargin}>
+        <Caption style={styles.centerSmallMargin}>
+          {i18n.t('screens.game.level')}
+        </Caption>
+        <View style={styles.statusContainer}>
+          <MaterialCommunityIcons
+            name={'gamepad-square'}
+            color={theme.colors.text}
+            size={20}
+          />
+          <Text style={styles.statusIcon}>{props.level}</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default React.memo(
+  GameStatus,
+  (pp, np) => pp.level === np.level && pp.time === np.time
+);

src/screens/Game/components/PostGameContent.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Card, Divider, Headline, Text, useTheme } from 'react-native-paper';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Mascot, { MASCOT_STYLE } from '../../../components/Mascot/Mascot';
+import SpeechArrow from '../../../components/Mascot/SpeechArrow';
+import GENERAL_STYLES from '../../../constants/Styles';
+import i18n from 'i18n-js';
+
+type GameStatsType = {
+  score: number;
+  level: number;
+  time: number;
+};
+
+type Props = {
+  isHighScore: boolean;
+  stats: GameStatsType;
+};
+
+const styles = StyleSheet.create({
+  recapCard: {
+    borderWidth: 2,
+    marginLeft: 20,
+    marginRight: 20,
+  },
+  recapContainer: {
+    flexDirection: 'row',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  recapScoreContainer: {
+    flexDirection: 'row',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  recapScore: {
+    fontSize: 20,
+  },
+  recapScoreIcon: {
+    marginLeft: 5,
+  },
+  recapIcon: {
+    marginRight: 5,
+    marginLeft: 5,
+  },
+  centertext: {
+    textAlign: 'center',
+  },
+});
+
+export default function PostGameContent(props: Props) {
+  const { isHighScore, stats } = props;
+  const theme = useTheme();
+  const width = isHighScore ? '50%' : '30%';
+  const margin = isHighScore ? 'auto' : undefined;
+  const marginLeft = isHighScore ? '60%' : '20%';
+  const color = isHighScore ? theme.colors.gameGold : theme.colors.primary;
+  return (
+    <View style={GENERAL_STYLES.flex}>
+      <Mascot
+        emotion={isHighScore ? MASCOT_STYLE.LOVE : MASCOT_STYLE.NORMAL}
+        animated={isHighScore}
+        style={{
+          width: width,
+          marginLeft: margin,
+          marginRight: margin,
+        }}
+      />
+      <SpeechArrow
+        style={{ marginLeft: marginLeft }}
+        size={20}
+        color={theme.colors.mascotMessageArrow}
+      />
+      <Card
+        style={{
+          borderColor: theme.colors.mascotMessageArrow,
+          ...styles.recapCard,
+        }}
+      >
+        <Card.Content>
+          <Headline
+            style={{
+              color: color,
+              ...styles.centertext,
+            }}
+          >
+            {isHighScore
+              ? i18n.t('screens.game.newHighScore')
+              : i18n.t('screens.game.gameOver')}
+          </Headline>
+          <Divider />
+          <View style={styles.recapScoreContainer}>
+            <Text style={styles.recapScore}>
+              {i18n.t('screens.game.score', { score: stats.score })}
+            </Text>
+            <MaterialCommunityIcons
+              name={'star'}
+              color={theme.colors.tetrisScore}
+              size={30}
+              style={styles.recapScoreIcon}
+            />
+          </View>
+          <View style={styles.recapContainer}>
+            <Text>{i18n.t('screens.game.level')}</Text>
+            <MaterialCommunityIcons
+              style={styles.recapIcon}
+              name={'gamepad-square'}
+              size={20}
+              color={theme.colors.textDisabled}
+            />
+            <Text>{stats.level}</Text>
+          </View>
+          <View style={styles.recapContainer}>
+            <Text>{i18n.t('screens.game.time')}</Text>
+            <MaterialCommunityIcons
+              style={styles.recapIcon}
+              name={'timer'}
+              size={20}
+              color={theme.colors.textDisabled}
+            />
+            <Text>{stats.time}</Text>
+          </View>
+        </Card.Content>
+      </Card>
+    </View>
+  );
+}

src/screens/Game/components/WelcomeGameContent.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  Card,
+  Divider,
+  Headline,
+  Paragraph,
+  useTheme,
+} from 'react-native-paper';
+import Mascot, { MASCOT_STYLE } from '../../../components/Mascot/Mascot';
+import SpeechArrow from '../../../components/Mascot/SpeechArrow';
+import i18n from 'i18n-js';
+
+const styles = StyleSheet.create({
+  welcomeMascot: {
+    width: '40%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  welcomeCard: {
+    borderWidth: 2,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  speechArrow: {
+    marginLeft: '60%',
+  },
+  welcomeText: {
+    textAlign: 'center',
+    marginTop: 10,
+  },
+  centertext: {
+    textAlign: 'center',
+  },
+});
+
+export default function WelcomeGameContent() {
+  const theme = useTheme();
+  return (
+    <View>
+      <Mascot emotion={MASCOT_STYLE.COOL} style={styles.welcomeMascot} />
+      <SpeechArrow
+        style={styles.speechArrow}
+        size={20}
+        color={theme.colors.mascotMessageArrow}
+      />
+      <Card
+        style={{
+          borderColor: theme.colors.mascotMessageArrow,
+          ...styles.welcomeCard,
+        }}
+      >
+        <Card.Content>
+          <Headline
+            style={{
+              color: theme.colors.primary,
+              ...styles.centertext,
+            }}
+          >
+            {i18n.t('screens.game.welcomeTitle')}
+          </Headline>
+          <Divider />
+          <Paragraph style={styles.welcomeText}>
+            {i18n.t('screens.game.welcomeMessage')}
+          </Paragraph>
+        </Card.Content>
+      </Card>
+    </View>
+  );
+}

src/screens/Game/screens/GameMainScreen.tsx

@@ -17,10 +17,9 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Caption, IconButton, Text, withTheme } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme } from 'react-native-paper';
 import i18n from 'i18n-js';
 import { StackNavigationProp } from '@react-navigation/stack';
 import GameLogic from '../logic/GameLogic';
@@ -33,25 +32,16 @@ import MaterialHeaderButtons, {
 import type { OptionsDialogButtonType } from '../../../components/Dialogs/OptionsDialog';
 import OptionsDialog from '../../../components/Dialogs/OptionsDialog';
 import GENERAL_STYLES from '../../../constants/Styles';
-
-type PropsType = {
-  navigation: StackNavigationProp<any>;
-  route: { params: { highScore: number } };
-  theme: ReactNativePaper.Theme;
-};
-
-type StateType = {
-  grid: GridType;
-  gameTime: number;
-  gameScore: number;
-  gameLevel: number;
-
-  dialogVisible: boolean;
-  dialogTitle: string;
-  dialogMessage: string;
-  dialogButtons: Array<OptionsDialogButtonType>;
-  onDialogDismiss: () => void;
-};
+import { MainRoutes } from '../../../navigation/MainNavigator';
+import GameStatus from '../components/GameStatus';
+import GameControls from '../components/GameControls';
+import GameScore from '../components/GameScore';
+import { usePreferences } from '../../../context/preferencesContext';
+import {
+  getPreferenceObject,
+  PreferenceKeys,
+} from '../../../utils/asyncStorage';
+import { useFocusEffect, useNavigation } from '@react-navigation/core';
 
 const styles = StyleSheet.create({
   container: {
@@ -61,44 +51,6 @@ const styles = StyleSheet.create({
   gridContainer: {
     flex: 4,
   },
-  centerSmallMargin: {
-    ...GENERAL_STYLES.centerHorizontal,
-    marginBottom: 5,
-  },
-  centerVerticalSmallMargin: {
-    ...GENERAL_STYLES.centerVertical,
-    marginLeft: 5,
-  },
-  centerBigMargin: {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    marginBottom: 20,
-  },
-  statusContainer: {
-    flexDirection: 'row',
-  },
-  statusIcon: {
-    marginLeft: 5,
-  },
-  scoreMainContainer: {
-    marginTop: 10,
-    marginBottom: 10,
-  },
-  scoreCurrentContainer: {
-    flexDirection: 'row',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-  },
-  scoreText: {
-    marginLeft: 5,
-    fontSize: 20,
-  },
-  scoreBestContainer: {
-    flexDirection: 'row',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    marginTop: 5,
-  },
   controlsContainer: {
     height: 80,
     flexDirection: 'row',
@@ -114,273 +66,133 @@ const styles = StyleSheet.create({
   },
 });
 
-class GameMainScreen extends React.Component<PropsType, StateType> {
-  static getFormattedTime(seconds: number): string {
-    const date = new Date();
-    date.setHours(0);
-    date.setMinutes(0);
-    date.setSeconds(seconds);
-    let format;
-    if (date.getHours()) {
-      format = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-    } else if (date.getMinutes()) {
-      format = `${date.getMinutes()}:${date.getSeconds()}`;
+export default function GameMainScreen() {
+  const theme = useTheme();
+  const navigation = useNavigation<StackNavigationProp<any>>();
+  const logic = useRef(new GameLogic(20, 10, theme));
+
+  const [gameTime, setGameTime] = useState(0);
+
+  const [gameState, setGameState] = useState({
+    grid: logic.current.getCurrentGrid(),
+    gameScore: 0,
+    gameLevel: 0,
+  });
+
+  const [dialogContent, setDialogContent] = useState<{
+    dialogTitle: string;
+    dialogMessage: string;
+    dialogButtons: Array<OptionsDialogButtonType>;
+    onDialogDismiss: () => void;
+  }>();
+
+  const { preferences, updatePreferences } = usePreferences();
+
+  function getScores() {
+    const pref = getPreferenceObject(PreferenceKeys.gameScores, preferences) as
+      | Array<number>
+      | undefined;
+    if (pref) {
+      return pref.sort((a, b) => b - a);
     } else {
-      format = date.getSeconds().toString();
-    }
-    return format;
-  }
-
-  logic: GameLogic;
-
-  highScore: number | null;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.highScore = null;
-    this.logic = new GameLogic(20, 10, props.theme);
-    this.state = {
-      grid: this.logic.getCurrentGrid(),
-      gameTime: 0,
-      gameScore: 0,
-      gameLevel: 0,
-      dialogVisible: false,
-      dialogTitle: '',
-      dialogMessage: '',
-      dialogButtons: [],
-      onDialogDismiss: () => {},
-    };
-    if (props.route.params != null) {
-      this.highScore = props.route.params.highScore;
+      return [];
     }
   }
 
-  componentDidMount() {
-    const { navigation } = this.props;
+  const savedScores = getScores();
+  const highScore = savedScores.length > 0 ? savedScores[0] : undefined;
+
+  useLayoutEffect(() => {
     navigation.setOptions({
-      headerRight: this.getRightButton,
+      headerRight: getRightButton,
     });
-    this.startGame();
-  }
+    startGame();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation]);
 
-  componentWillUnmount() {
-    this.logic.endGame(true);
-  }
+  useFocusEffect(
+    useCallback(() => {
+      const l = logic.current;
+      return () => l.endGame(true);
+    }, [])
+  );
 
-  getRightButton = () => {
-    return (
-      <MaterialHeaderButtons>
-        <Item title="pause" iconName="pause" onPress={this.togglePause} />
-      </MaterialHeaderButtons>
-    );
-  };
+  const getRightButton = () => (
+    <MaterialHeaderButtons>
+      <Item title={'pause'} iconName={'pause'} onPress={togglePause} />
+    </MaterialHeaderButtons>
+  );
 
-  onTick = (score: number, level: number, newGrid: GridType) => {
-    this.setState({
+  const onTick = (score: number, level: number, newGrid: GridType) => {
+    setGameState({
       gameScore: score,
       gameLevel: level,
       grid: newGrid,
     });
   };
 
-  onClock = (time: number) => {
-    this.setState({
-      gameTime: time,
-    });
-  };
+  const onDialogDismiss = () => setDialogContent(undefined);
 
-  onDialogDismiss = () => {
-    this.setState({ dialogVisible: false });
-  };
-
-  onGameEnd = (time: number, score: number, isRestart: boolean) => {
-    const { props, state } = this;
-    this.setState({
-      gameTime: time,
+  const onGameEnd = (time: number, score: number, isRestart: boolean) => {
+    setGameState((prevState) => ({
+      ...prevState,
       gameScore: score,
-    });
+    }));
+    setGameTime(time);
+    const newScores = [...savedScores];
+    const isHighScore = newScores.length === 0 || score > newScores[0];
+    for (let i = 0; i < 3; i += 1) {
+      if (newScores.length > i && score > newScores[i]) {
+        newScores.splice(i, 0, score);
+        break;
+      } else if (newScores.length <= i) {
+        newScores.push(score);
+        break;
+      }
+    }
+    if (newScores.length > 3) {
+      newScores.splice(3, 1);
+    }
+    if (newScores.some((item, i) => item !== savedScores[i])) {
+      updatePreferences(PreferenceKeys.gameScores, newScores);
+    }
     if (!isRestart) {
-      props.navigation.replace('game-start', {
-        score: state.gameScore,
-        level: state.gameLevel,
-        time: state.gameTime,
+      navigation.replace(MainRoutes.GameStart, {
+        score: score,
+        level: gameState.gameLevel,
+        time: time,
+        isHighScore: isHighScore,
       });
     }
   };
 
-  getStatusIcons() {
-    const { props, state } = this;
-    return (
-      <View
-        style={{
-          ...GENERAL_STYLES.flex,
-          ...GENERAL_STYLES.centerVertical,
-        }}
-      >
-        <View style={GENERAL_STYLES.centerHorizontal}>
-          <Caption style={styles.centerSmallMargin}>
-            {i18n.t('screens.game.time')}
-          </Caption>
-          <View style={styles.statusContainer}>
-            <MaterialCommunityIcons
-              name="timer"
-              color={props.theme.colors.subtitle}
-              size={20}
-            />
-            <Text
-              style={{
-                ...styles.statusIcon,
-                color: props.theme.colors.subtitle,
-              }}
-            >
-              {GameMainScreen.getFormattedTime(state.gameTime)}
-            </Text>
-          </View>
-        </View>
-        <View style={styles.centerBigMargin}>
-          <Caption style={styles.centerSmallMargin}>
-            {i18n.t('screens.game.level')}
-          </Caption>
-          <View style={styles.statusContainer}>
-            <MaterialCommunityIcons
-              name="gamepad-square"
-              color={props.theme.colors.text}
-              size={20}
-            />
-            <Text style={styles.statusIcon}>{state.gameLevel}</Text>
-          </View>
-        </View>
-      </View>
-    );
-  }
-
-  getScoreIcon() {
-    const { props, state } = this;
-    const highScore =
-      this.highScore == null || state.gameScore > this.highScore
-        ? state.gameScore
-        : this.highScore;
-    return (
-      <View style={styles.scoreMainContainer}>
-        <View style={styles.scoreCurrentContainer}>
-          <Text style={styles.scoreText}>
-            {i18n.t('screens.game.score', { score: state.gameScore })}
-          </Text>
-          <MaterialCommunityIcons
-            name="star"
-            color={props.theme.colors.tetrisScore}
-            size={20}
-            style={styles.centerVerticalSmallMargin}
-          />
-        </View>
-        <View style={styles.scoreBestContainer}>
-          <Text
-            style={{
-              ...styles.scoreText,
-              color: props.theme.colors.textDisabled,
-            }}
-          >
-            {i18n.t('screens.game.highScore', { score: highScore })}
-          </Text>
-          <MaterialCommunityIcons
-            name="star"
-            color={props.theme.colors.tetrisScore}
-            size={10}
-            style={styles.centerVerticalSmallMargin}
-          />
-        </View>
-      </View>
-    );
-  }
-
-  getControlButtons() {
-    const { props } = this;
-    return (
-      <View style={styles.controlsContainer}>
-        <IconButton
-          icon="rotate-right-variant"
-          size={40}
-          onPress={() => {
-            this.logic.rotatePressed(this.updateGrid);
-          }}
-          style={GENERAL_STYLES.flex}
-        />
-        <View style={styles.directionsContainer}>
-          <IconButton
-            icon="chevron-left"
-            size={40}
-            style={GENERAL_STYLES.flex}
-            onPress={() => {
-              this.logic.pressedOut();
-            }}
-            onPressIn={() => {
-              this.logic.leftPressedIn(this.updateGrid);
-            }}
-          />
-          <IconButton
-            icon="chevron-right"
-            size={40}
-            style={GENERAL_STYLES.flex}
-            onPress={() => {
-              this.logic.pressedOut();
-            }}
-            onPressIn={() => {
-              this.logic.rightPressed(this.updateGrid);
-            }}
-          />
-        </View>
-        <IconButton
-          icon="arrow-down-bold"
-          size={40}
-          onPressIn={() => {
-            this.logic.downPressedIn(this.updateGridScore);
-          }}
-          onPress={() => {
-            this.logic.pressedOut();
-          }}
-          style={GENERAL_STYLES.flex}
-          color={props.theme.colors.tetrisScore}
-        />
-      </View>
-    );
-  }
-
-  updateGrid = (newGrid: GridType) => {
-    this.setState({
-      grid: newGrid,
-    });
-  };
-
-  updateGridScore = (newGrid: GridType, score?: number) => {
-    this.setState((prevState: StateType): {
-      grid: GridType;
-      gameScore: number;
-    } => ({
+  const onDirectionPressed = (newGrid: GridType, score?: number) => {
+    setGameState((prevState) => ({
+      ...prevState,
       grid: newGrid,
       gameScore: score != null ? score : prevState.gameScore,
     }));
   };
 
-  togglePause = () => {
-    this.logic.togglePause();
-    if (this.logic.isGamePaused()) {
-      this.showPausePopup();
+  const togglePause = () => {
+    logic.current.togglePause();
+    if (logic.current.isGamePaused()) {
+      showPausePopup();
     }
   };
 
-  showPausePopup = () => {
+  const showPausePopup = () => {
     const onDismiss = () => {
-      this.togglePause();
-      this.onDialogDismiss();
+      togglePause();
+      onDialogDismiss();
     };
-    this.setState({
-      dialogVisible: true,
+    setDialogContent({
       dialogTitle: i18n.t('screens.game.pause'),
       dialogMessage: i18n.t('screens.game.pauseMessage'),
       dialogButtons: [
         {
           title: i18n.t('screens.game.restart.text'),
-          onPress: this.showRestartConfirm,
+          onPress: showRestartConfirm,
         },
         {
           title: i18n.t('screens.game.resume'),
@@ -391,71 +203,68 @@ class GameMainScreen extends React.Component<PropsType, StateType> {
     });
   };
 
-  showRestartConfirm = () => {
-    this.setState({
-      dialogVisible: true,
+  const showRestartConfirm = () => {
+    setDialogContent({
       dialogTitle: i18n.t('screens.game.restart.confirm'),
       dialogMessage: i18n.t('screens.game.restart.confirmMessage'),
       dialogButtons: [
         {
           title: i18n.t('screens.game.restart.confirmYes'),
           onPress: () => {
-            this.onDialogDismiss();
-            this.startGame();
+            onDialogDismiss();
+            startGame();
           },
         },
         {
           title: i18n.t('screens.game.restart.confirmNo'),
-          onPress: this.showPausePopup,
+          onPress: showPausePopup,
         },
       ],
-      onDialogDismiss: this.showPausePopup,
+      onDialogDismiss: showPausePopup,
     });
   };
 
-  startGame = () => {
-    this.logic.startGame(this.onTick, this.onClock, this.onGameEnd);
+  const startGame = () => {
+    logic.current.startGame(onTick, setGameTime, onGameEnd);
   };
 
-  render() {
-    const { props, state } = this;
-    return (
-      <View style={GENERAL_STYLES.flex}>
-        <View style={styles.container}>
-          {this.getStatusIcons()}
-          <View style={styles.gridContainer}>
-            {this.getScoreIcon()}
-            <GridComponent
-              width={this.logic.getWidth()}
-              height={this.logic.getHeight()}
-              grid={state.grid}
-              style={{
-                backgroundColor: props.theme.colors.tetrisBackground,
-                ...GENERAL_STYLES.flex,
-                ...GENERAL_STYLES.centerHorizontal,
-              }}
-            />
-          </View>
-
-          <View style={GENERAL_STYLES.flex}>
-            <Preview
-              items={this.logic.getNextPiecesPreviews()}
-              style={styles.preview}
-            />
-          </View>
+  return (
+    <View style={GENERAL_STYLES.flex}>
+      <View style={styles.container}>
+        <GameStatus time={gameTime} level={gameState.gameLevel} />
+        <View style={styles.gridContainer}>
+          <GameScore score={gameState.gameScore} highScore={highScore} />
+          <GridComponent
+            width={logic.current.getWidth()}
+            height={logic.current.getHeight()}
+            grid={gameState.grid}
+            style={{
+              backgroundColor: theme.colors.tetrisBackground,
+              ...GENERAL_STYLES.flex,
+              ...GENERAL_STYLES.centerHorizontal,
+            }}
+          />
+        </View>
+        <View style={GENERAL_STYLES.flex}>
+          <Preview
+            items={logic.current.getNextPiecesPreviews()}
+            style={styles.preview}
+          />
         </View>
-        {this.getControlButtons()}
-
-        <OptionsDialog
-          visible={state.dialogVisible}
-          title={state.dialogTitle}
-          message={state.dialogMessage}
-          buttons={state.dialogButtons}
-          onDismiss={state.onDialogDismiss}
-        />
       </View>
-    );
-  }
+      <GameControls
+        logic={logic.current}
+        onDirectionPressed={onDirectionPressed}
+      />
+      {dialogContent ? (
+        <OptionsDialog
+          visible={dialogContent !== undefined}
+          title={dialogContent.dialogTitle}
+          message={dialogContent.dialogMessage}
+          buttons={dialogContent.dialogButtons}
+          onDismiss={dialogContent.onDialogDismiss}
+        />
+      ) : null}
+    </View>
+  );
 }
-
-export default withTheme(GameMainScreen);

src/screens/Game/screens/GameStartScreen.tsx

@@ -18,477 +18,121 @@
  */
 
 import * as React from 'react';
-import { StackNavigationProp } from '@react-navigation/stack';
-import {
-  Button,
-  Card,
-  Divider,
-  Headline,
-  Paragraph,
-  Text,
-  withTheme,
-} from 'react-native-paper';
+import { Button, useTheme } from 'react-native-paper';
 import { StyleSheet, View } from 'react-native';
 import i18n from 'i18n-js';
-import * as Animatable from 'react-native-animatable';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import LinearGradient from 'react-native-linear-gradient';
-import Mascot, { MASCOT_STYLE } from '../../../components/Mascot/Mascot';
+import { MASCOT_STYLE } from '../../../components/Mascot/Mascot';
 import MascotPopup from '../../../components/Mascot/MascotPopup';
-import AsyncStorageManager from '../../../managers/AsyncStorageManager';
-import type { GridType } from '../components/GridComponent';
-import GridComponent from '../components/GridComponent';
-import GridManager from '../logic/GridManager';
-import Piece from '../logic/Piece';
-import SpeechArrow from '../../../components/Mascot/SpeechArrow';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 import GENERAL_STYLES from '../../../constants/Styles';
+import GameBackground from '../components/GameBrackground';
+import PostGameContent from '../components/PostGameContent';
+import WelcomeGameContent from '../components/WelcomeGameContent';
+import FullGamePodium from '../components/FullGamePodium';
+import { useNavigation } from '@react-navigation/core';
+import { usePreferences } from '../../../context/preferencesContext';
+import {
+  getPreferenceObject,
+  PreferenceKeys,
+} from '../../../utils/asyncStorage';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 type GameStatsType = {
   score: number;
   level: number;
   time: number;
+  isHighScore: boolean;
 };
 
-type PropsType = {
-  navigation: StackNavigationProp<any>;
+type Props = {
   route: {
-    params: GameStatsType;
+    params?: GameStatsType;
   };
-  theme: ReactNativePaper.Theme;
 };
 
 const styles = StyleSheet.create({
-  pieceContainer: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-  },
-  pieceBackground: {
-    position: 'absolute',
-  },
   playButton: {
     marginLeft: 'auto',
     marginRight: 'auto',
     marginTop: 10,
   },
-  recapCard: {
-    borderWidth: 2,
-    marginLeft: 20,
-    marginRight: 20,
-  },
-  recapContainer: {
-    flexDirection: 'row',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-  },
-  recapScoreContainer: {
-    flexDirection: 'row',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    marginTop: 10,
-    marginBottom: 10,
-  },
-  recapScore: {
-    fontSize: 20,
-  },
-  recapScoreIcon: {
-    marginLeft: 5,
-  },
-  recapIcon: {
-    marginRight: 5,
-    marginLeft: 5,
-  },
-  welcomeMascot: {
-    width: '40%',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-  },
-  welcomeCard: {
-    borderWidth: 2,
-    marginLeft: 10,
-    marginRight: 10,
-  },
-  centertext: {
-    textAlign: 'center',
-  },
-  welcomeText: {
-    textAlign: 'center',
-    marginTop: 10,
-  },
-  speechArrow: {
-    marginLeft: '60%',
-  },
-  podiumContainer: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  },
-  podiumIconContainer: {
-    position: 'absolute',
-    top: -20,
-  },
-  topScoreContainer: {
-    marginBottom: 20,
-    marginTop: 20,
-  },
-  topScoreSubcontainer: {
-    flexDirection: 'row',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-  },
 });
 
-class GameStartScreen extends React.Component<PropsType> {
-  gridManager: GridManager;
+export default function GameStartScreen(props: Props) {
+  const theme = useTheme();
+  const navigation = useNavigation<StackNavigationProp<any>>();
 
-  scores: Array<number>;
+  const { preferences } = usePreferences();
 
-  gameStats?: GameStatsType;
-
-  isHighScore: boolean;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.isHighScore = false;
-    this.gridManager = new GridManager(4, 4, props.theme);
-    this.scores = AsyncStorageManager.getObject(
-      AsyncStorageManager.PREFERENCES.gameScores.key
-    );
-    this.scores.sort((a: number, b: number): number => b - a);
-    if (props.route.params != null) {
-      this.recoverGameScore();
+  function getScores() {
+    const pref = getPreferenceObject(PreferenceKeys.gameScores, preferences) as
+      | Array<number>
+      | undefined;
+    if (pref) {
+      return pref.sort((a, b) => b - a);
+    } else {
+      return [];
     }
   }
 
-  getPiecesBackground() {
-    const { theme } = this.props;
-    const gridList = [];
-    for (let i = 0; i < 18; i += 1) {
-      gridList.push(this.gridManager.getEmptyGrid(4, 4));
-      const piece = new Piece(theme);
-      piece.toGrid(gridList[i], true);
-    }
-    return (
-      <View style={styles.pieceContainer}>
-        {gridList.map((item: GridType, index: number) => {
-          const size = 10 + Math.floor(Math.random() * 30);
-          const top = Math.floor(Math.random() * 100);
-          const rot = Math.floor(Math.random() * 360);
-          const left = (index % 6) * 20;
-          const animDelay = size * 20;
-          const animDuration = 2 * (2000 - size * 30);
-          return (
-            <Animatable.View
-              useNativeDriver
-              animation="fadeInDownBig"
-              delay={animDelay}
-              duration={animDuration}
-              key={`piece${index.toString()}`}
-              style={{
-                width: `${size}%`,
-                top: `${top}%`,
-                left: `${left}%`,
-                ...styles.pieceBackground,
-              }}
-            >
-              <GridComponent
-                width={4}
-                height={4}
-                grid={item}
-                style={{
-                  transform: [{ rotateZ: `${rot}deg` }],
-                }}
-              />
-            </Animatable.View>
-          );
-        })}
-      </View>
-    );
-  }
+  const scores = getScores();
+  const lastGameStats = props.route.params;
 
-  getPostGameContent(stats: GameStatsType) {
-    const { props } = this;
-    const width = this.isHighScore ? '50%' : '30%';
-    const margin = this.isHighScore ? 'auto' : undefined;
-    const marginLeft = this.isHighScore ? '60%' : '20%';
-    const color = this.isHighScore
-      ? props.theme.colors.gameGold
-      : props.theme.colors.primary;
+  const getMainContent = () => {
     return (
       <View style={GENERAL_STYLES.flex}>
-        <Mascot
-          emotion={this.isHighScore ? MASCOT_STYLE.LOVE : MASCOT_STYLE.NORMAL}
-          animated={this.isHighScore}
-          style={{
-            width: width,
-            marginLeft: margin,
-            marginRight: margin,
-          }}
-        />
-        <SpeechArrow
-          style={{ marginLeft: marginLeft }}
-          size={20}
-          color={props.theme.colors.mascotMessageArrow}
-        />
-        <Card
-          style={{
-            borderColor: props.theme.colors.mascotMessageArrow,
-            ...styles.recapCard,
-          }}
-        >
-          <Card.Content>
-            <Headline
-              style={{
-                color: color,
-                ...styles.centertext,
-              }}
-            >
-              {this.isHighScore
-                ? i18n.t('screens.game.newHighScore')
-                : i18n.t('screens.game.gameOver')}
-            </Headline>
-            <Divider />
-            <View style={styles.recapScoreContainer}>
-              <Text style={styles.recapScore}>
-                {i18n.t('screens.game.score', { score: stats.score })}
-              </Text>
-              <MaterialCommunityIcons
-                name="star"
-                color={props.theme.colors.tetrisScore}
-                size={30}
-                style={styles.recapScoreIcon}
-              />
-            </View>
-            <View style={styles.recapContainer}>
-              <Text>{i18n.t('screens.game.level')}</Text>
-              <MaterialCommunityIcons
-                style={styles.recapIcon}
-                name="gamepad-square"
-                size={20}
-                color={props.theme.colors.textDisabled}
-              />
-              <Text>{stats.level}</Text>
-            </View>
-            <View style={styles.recapContainer}>
-              <Text>{i18n.t('screens.game.time')}</Text>
-              <MaterialCommunityIcons
-                style={styles.recapIcon}
-                name="timer"
-                size={20}
-                color={props.theme.colors.textDisabled}
-              />
-              <Text>{stats.time}</Text>
-            </View>
-          </Card.Content>
-        </Card>
-      </View>
-    );
-  }
-
-  getWelcomeText() {
-    const { props } = this;
-    return (
-      <View>
-        <Mascot emotion={MASCOT_STYLE.COOL} style={styles.welcomeMascot} />
-        <SpeechArrow
-          style={styles.speechArrow}
-          size={20}
-          color={props.theme.colors.mascotMessageArrow}
-        />
-        <Card
-          style={{
-            borderColor: props.theme.colors.mascotMessageArrow,
-            ...styles.welcomeCard,
-          }}
-        >
-          <Card.Content>
-            <Headline
-              style={{
-                color: props.theme.colors.primary,
-                ...styles.centertext,
-              }}
-            >
-              {i18n.t('screens.game.welcomeTitle')}
-            </Headline>
-            <Divider />
-            <Paragraph style={styles.welcomeText}>
-              {i18n.t('screens.game.welcomeMessage')}
-            </Paragraph>
-          </Card.Content>
-        </Card>
-      </View>
-    );
-  }
-
-  getPodiumRender(place: 1 | 2 | 3, score: string) {
-    const { props } = this;
-    let icon = 'podium-gold';
-    let color = props.theme.colors.gameGold;
-    let fontSize = 20;
-    let size = 70;
-    if (place === 2) {
-      icon = 'podium-silver';
-      color = props.theme.colors.gameSilver;
-      fontSize = 18;
-      size = 60;
-    } else if (place === 3) {
-      icon = 'podium-bronze';
-      color = props.theme.colors.gameBronze;
-      fontSize = 15;
-      size = 50;
-    }
-    const marginLeft = place === 2 ? 20 : 'auto';
-    const marginRight = place === 3 ? 20 : 'auto';
-    const fontWeight = place === 1 ? 'bold' : undefined;
-    return (
-      <View
-        style={{
-          marginLeft: marginLeft,
-          marginRight: marginRight,
-          ...styles.podiumContainer,
-        }}
-      >
-        {this.isHighScore && place === 1 ? (
-          <Animatable.View
-            animation="swing"
-            iterationCount="infinite"
-            duration={2000}
-            delay={1000}
-            useNativeDriver
-            style={styles.podiumIconContainer}
-          >
-            <Animatable.View
-              animation="pulse"
-              iterationCount="infinite"
-              useNativeDriver
-            >
-              <MaterialCommunityIcons
-                name="decagram"
-                color={props.theme.colors.gameGold}
-                size={150}
-              />
-            </Animatable.View>
-          </Animatable.View>
-        ) : null}
-        <MaterialCommunityIcons
-          name={icon}
-          color={this.isHighScore && place === 1 ? '#fff' : color}
-          size={size}
-        />
-        <Text
-          style={{
-            fontWeight: fontWeight,
-            fontSize,
-            ...styles.centertext,
-          }}
-        >
-          {score}
-        </Text>
-      </View>
-    );
-  }
-
-  getTopScoresRender() {
-    const gold = this.scores.length > 0 ? this.scores[0] : '-';
-    const silver = this.scores.length > 1 ? this.scores[1] : '-';
-    const bronze = this.scores.length > 2 ? this.scores[2] : '-';
-    return (
-      <View style={styles.topScoreContainer}>
-        {this.getPodiumRender(1, gold.toString())}
-        <View style={styles.topScoreSubcontainer}>
-          {this.getPodiumRender(3, bronze.toString())}
-          {this.getPodiumRender(2, silver.toString())}
-        </View>
-      </View>
-    );
-  }
-
-  getMainContent() {
-    const { props } = this;
-    return (
-      <View style={GENERAL_STYLES.flex}>
-        {this.gameStats != null
-          ? this.getPostGameContent(this.gameStats)
-          : this.getWelcomeText()}
+        {lastGameStats ? (
+          <PostGameContent
+            stats={lastGameStats}
+            isHighScore={lastGameStats.isHighScore}
+          />
+        ) : (
+          <WelcomeGameContent />
+        )}
         <Button
-          icon="play"
-          mode="contained"
+          icon={'play'}
+          mode={'contained'}
           onPress={() => {
-            props.navigation.replace('game-main', {
-              highScore: this.scores.length > 0 ? this.scores[0] : null,
-            });
+            navigation.replace('game-main');
           }}
           style={styles.playButton}
         >
           {i18n.t('screens.game.play')}
         </Button>
-        {this.getTopScoresRender()}
+        <FullGamePodium
+          scores={scores}
+          isHighScore={lastGameStats?.isHighScore === true}
+        />
       </View>
     );
-  }
+  };
 
-  keyExtractor = (item: number): string => item.toString();
-
-  recoverGameScore() {
-    const { route } = this.props;
-    this.gameStats = route.params;
-    if (this.gameStats.score != null) {
-      this.isHighScore =
-        this.scores.length === 0 || this.gameStats.score > this.scores[0];
-      for (let i = 0; i < 3; i += 1) {
-        if (this.scores.length > i && this.gameStats.score > this.scores[i]) {
-          this.scores.splice(i, 0, this.gameStats.score);
-          break;
-        } else if (this.scores.length <= i) {
-          this.scores.push(this.gameStats.score);
-          break;
-        }
-      }
-      if (this.scores.length > 3) {
-        this.scores.splice(3, 1);
-      }
-      AsyncStorageManager.set(
-        AsyncStorageManager.PREFERENCES.gameScores.key,
-        this.scores
-      );
-    }
-  }
-
-  render() {
-    const { props } = this;
-    return (
-      <View style={GENERAL_STYLES.flex}>
-        {this.getPiecesBackground()}
-        <LinearGradient
-          style={GENERAL_STYLES.flex}
-          colors={[
-            `${props.theme.colors.background}00`,
-            props.theme.colors.background,
-          ]}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 0, y: 1 }}
-        >
-          <CollapsibleScrollView headerColors={'transparent'}>
-            {this.getMainContent()}
-            <MascotPopup
-              prefKey={AsyncStorageManager.PREFERENCES.gameStartMascot.key}
-              title={i18n.t('screens.game.mascotDialog.title')}
-              message={i18n.t('screens.game.mascotDialog.message')}
-              icon="gamepad-variant"
-              buttons={{
-                cancel: {
-                  message: i18n.t('screens.game.mascotDialog.button'),
-                  icon: 'check',
-                },
-              }}
-              emotion={MASCOT_STYLE.COOL}
-            />
-          </CollapsibleScrollView>
-        </LinearGradient>
-      </View>
-    );
-  }
+  return (
+    <View style={GENERAL_STYLES.flex}>
+      <GameBackground />
+      <LinearGradient
+        style={GENERAL_STYLES.flex}
+        colors={[`${theme.colors.background}00`, theme.colors.background]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      >
+        <CollapsibleScrollView headerColors={'transparent'}>
+          {getMainContent()}
+          <MascotPopup
+            title={i18n.t('screens.game.mascotDialog.title')}
+            message={i18n.t('screens.game.mascotDialog.message')}
+            icon="gamepad-variant"
+            buttons={{
+              cancel: {
+                message: i18n.t('screens.game.mascotDialog.button'),
+                icon: 'check',
+              },
+            }}
+            emotion={MASCOT_STYLE.COOL}
+          />
+        </CollapsibleScrollView>
+      </LinearGradient>
+    </View>
+  );
 }
-
-export default withTheme(GameStartScreen);

src/screens/Home/HomeScreen.tsx

@@ -17,7 +17,7 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import {
   FlatList,
   NativeScrollEvent,
@@ -26,9 +26,13 @@ import {
   StyleSheet,
 } from 'react-native';
 import i18n from 'i18n-js';
-import { Headline, withTheme } from 'react-native-paper';
-import { CommonActions } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import { Headline, useTheme } from 'react-native-paper';
+import {
+  CommonActions,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native';
+import { StackScreenProps } from '@react-navigation/stack';
 import * as Animatable from 'react-native-animatable';
 import { View } from 'react-native-animatable';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -44,16 +48,17 @@ import MaterialHeaderButtons, {
 import AnimatedFAB from '../../components/Animations/AnimatedFAB';
 import ConnectionManager from '../../managers/ConnectionManager';
 import LogoutDialog from '../../components/Amicale/LogoutDialog';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
-import DashboardManager from '../../managers/DashboardManager';
-import type { ServiceItemType } from '../../managers/ServicesManager';
 import { getDisplayEvent, getFutureEvents } from '../../utils/Home';
 import type { PlanningEventType } from '../../utils/Planning';
 import GENERAL_STYLES from '../../constants/Styles';
 import Urls from '../../constants/Urls';
 import { readData } from '../../utils/WebData';
+import { TabRoutes, TabStackParamsList } from '../../navigation/TabNavigator';
+import { ServiceItemType } from '../../utils/Services';
+import { useCurrentDashboard } from '../../context/preferencesContext';
+import { MainRoutes } from '../../navigation/MainNavigator';
 
 const FEED_ITEM_HEIGHT = 500;
 
@@ -88,15 +93,7 @@ type RawDashboardType = {
   dashboard: FullDashboardType;
 };
 
-type PropsType = {
-  navigation: StackNavigationProp<any>;
-  route: { params: { nextScreen: string; data: object } };
-  theme: ReactNativePaper.Theme;
-};
-
-type StateType = {
-  dialogVisible: boolean;
-};
+type Props = StackScreenProps<TabStackParamsList, TabRoutes.Home>;
 
 const styles = StyleSheet.create({
   dashboardRow: {
@@ -127,106 +124,91 @@ const styles = StyleSheet.create({
   },
 });
 
-/**
- * Class defining the app's home screen
- */
-class HomeScreen extends React.Component<PropsType, StateType> {
-  static sortFeedTime = (a: FeedItemType, b: FeedItemType): number =>
-    b.time - a.time;
+const sortFeedTime = (a: FeedItemType, b: FeedItemType): number =>
+  b.time - a.time;
 
-  static generateNewsFeed(rawFeed: RawNewsFeedType): Array<FeedItemType> {
-    const finalFeed: Array<FeedItemType> = [];
-    Object.keys(rawFeed).forEach((key: string) => {
-      const category: Array<FeedItemType> | null = rawFeed[key];
-      if (category != null && category.length > 0) {
-        finalFeed.push(...category);
+const generateNewsFeed = (rawFeed: RawNewsFeedType): Array<FeedItemType> => {
+  const finalFeed: Array<FeedItemType> = [];
+  Object.keys(rawFeed).forEach((key: string) => {
+    const category: Array<FeedItemType> | null = rawFeed[key];
+    if (category != null && category.length > 0) {
+      finalFeed.push(...category);
+    }
+  });
+  finalFeed.sort(sortFeedTime);
+  return finalFeed;
+};
+
+function HomeScreen(props: Props) {
+  const theme = useTheme();
+  const navigation = useNavigation();
+
+  const [dialogVisible, setDialogVisible] = useState(false);
+  const fabRef = useRef<AnimatedFAB>(null);
+
+  const [isLoggedIn, setIsLoggedIn] = useState(
+    ConnectionManager.getInstance().isLoggedIn()
+  );
+  const { currentDashboard } = useCurrentDashboard();
+
+  let homeDashboard: FullDashboardType | null = null;
+
+  useLayoutEffect(() => {
+    const getHeaderButton = () => {
+      let onPressLog = () =>
+        navigation.navigate('login', { nextScreen: 'profile' });
+      let logIcon = 'login';
+      let logColor = theme.colors.primary;
+      if (isLoggedIn) {
+        onPressLog = () => showDisconnectDialog();
+        logIcon = 'logout';
+        logColor = theme.colors.text;
       }
-    });
-    finalFeed.sort(HomeScreen.sortFeedTime);
-    return finalFeed;
-  }
 
-  isLoggedIn: boolean | null;
-
-  fabRef: { current: null | AnimatedFAB };
-
-  currentNewFeed: Array<FeedItemType>;
-
-  currentDashboard: FullDashboardType | null;
-
-  dashboardManager: DashboardManager;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.fabRef = React.createRef();
-    this.dashboardManager = new DashboardManager(props.navigation);
-    this.currentNewFeed = [];
-    this.currentDashboard = null;
-    this.isLoggedIn = ConnectionManager.getInstance().isLoggedIn();
-    props.navigation.setOptions({
-      headerRight: this.getHeaderButton,
-    });
-    this.state = {
-      dialogVisible: false,
+      return (
+        <MaterialHeaderButtons>
+          <Item
+            title={'log'}
+            iconName={logIcon}
+            color={logColor}
+            onPress={onPressLog}
+          />
+          <Item
+            title={i18n.t('screens.settings.title')}
+            iconName={'cog'}
+            onPress={() => navigation.navigate(MainRoutes.Settings)}
+          />
+        </MaterialHeaderButtons>
+      );
     };
-  }
+    navigation.setOptions({
+      headerRight: getHeaderButton,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation, isLoggedIn]);
 
-  componentDidMount() {
-    const { props } = this;
-    props.navigation.addListener('focus', this.onScreenFocus);
-    // Handle link open when home is focused
-    props.navigation.addListener('state', this.handleNavigationParams);
-  }
+  useFocusEffect(
+    React.useCallback(() => {
+      const handleNavigationParams = () => {
+        const { route } = props;
+        if (route.params != null) {
+          if (route.params.nextScreen != null) {
+            navigation.navigate(route.params.nextScreen, route.params.data);
+            // reset params to prevent infinite loop
+            navigation.dispatch(CommonActions.setParams({ nextScreen: null }));
+          }
+        }
+      };
 
-  /**
-   * Updates login state and navigation parameters on screen focus
-   */
-  onScreenFocus = () => {
-    const { props } = this;
-    if (ConnectionManager.getInstance().isLoggedIn() !== this.isLoggedIn) {
-      this.isLoggedIn = ConnectionManager.getInstance().isLoggedIn();
-      props.navigation.setOptions({
-        headerRight: this.getHeaderButton,
-      });
-    }
-    // handle link open when home is not focused or created
-    this.handleNavigationParams();
-  };
-
-  /**
-   * Gets header buttons based on login state
-   *
-   * @returns {*}
-   */
-  getHeaderButton = () => {
-    const { props } = this;
-    let onPressLog = (): void =>
-      props.navigation.navigate('login', { nextScreen: 'profile' });
-    let logIcon = 'login';
-    let logColor = props.theme.colors.primary;
-    if (this.isLoggedIn) {
-      onPressLog = (): void => this.showDisconnectDialog();
-      logIcon = 'logout';
-      logColor = props.theme.colors.text;
-    }
-
-    const onPressSettings = (): void => props.navigation.navigate('settings');
-    return (
-      <MaterialHeaderButtons>
-        <Item
-          title="log"
-          iconName={logIcon}
-          color={logColor}
-          onPress={onPressLog}
-        />
-        <Item
-          title={i18n.t('screens.settings.title')}
-          iconName="cog"
-          onPress={onPressSettings}
-        />
-      </MaterialHeaderButtons>
-    );
-  };
+      if (ConnectionManager.getInstance().isLoggedIn() !== isLoggedIn) {
+        setIsLoggedIn(ConnectionManager.getInstance().isLoggedIn());
+      }
+      // handle link open when home is not focused or created
+      handleNavigationParams();
+      return () => {};
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLoggedIn])
+  );
 
   /**
    * Gets the event dashboard render item.
@@ -235,7 +217,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
    * @param content
    * @return {*}
    */
-  getDashboardEvent(content: Array<PlanningEventType>) {
+  const getDashboardEvent = (content: Array<PlanningEventType>) => {
     const futureEvents = getFutureEvents(content);
     const displayEvent = getDisplayEvent(futureEvents);
     // const clickPreviewAction = () =>
@@ -246,15 +228,15 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     return (
       <DashboardItem
         eventNumber={futureEvents.length}
-        clickAction={this.onEventContainerClick}
+        clickAction={onEventContainerClick}
       >
         <PreviewEventDashboardItem
           event={displayEvent}
-          clickAction={this.onEventContainerClick}
+          clickAction={onEventContainerClick}
         />
       </DashboardItem>
     );
-  }
+  };
 
   /**
    * Gets a dashboard item with a row of shortcut buttons.
@@ -262,16 +244,16 @@ class HomeScreen extends React.Component<PropsType, StateType> {
    * @param content
    * @return {*}
    */
-  getDashboardRow(content: Array<ServiceItemType | null>) {
+  const getDashboardRow = (content: Array<ServiceItemType | null>) => {
     return (
       <FlatList
         data={content}
-        renderItem={this.getDashboardRowRenderItem}
+        renderItem={getDashboardRowRenderItem}
         horizontal
         contentContainerStyle={styles.dashboardRow}
       />
     );
-  }
+  };
 
   /**
    * Gets a dashboard shortcut item
@@ -279,15 +261,19 @@ class HomeScreen extends React.Component<PropsType, StateType> {
    * @param item
    * @returns {*}
    */
-  getDashboardRowRenderItem = ({ item }: { item: ServiceItemType | null }) => {
+  const getDashboardRowRenderItem = ({
+    item,
+  }: {
+    item: ServiceItemType | null;
+  }) => {
     if (item != null) {
       return (
         <SmallDashboardItem
           image={item.image}
           onPress={item.onPress}
           badgeCount={
-            this.currentDashboard != null && item.badgeFunction != null
-              ? item.badgeFunction(this.currentDashboard)
+            homeDashboard != null && item.badgeFunction != null
+              ? item.badgeFunction(homeDashboard)
               : undefined
           }
         />
@@ -296,29 +282,13 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     return <SmallDashboardItem />;
   };
 
-  /**
-   * Gets a render item for the given feed object
-   *
-   * @param item The feed item to display
-   * @return {*}
-   */
-  getFeedItem(item: FeedItemType) {
-    return <FeedItem item={item} height={FEED_ITEM_HEIGHT} />;
-  }
+  const getRenderItem = ({ item }: { item: FeedItemType }) => (
+    <FeedItem item={item} height={FEED_ITEM_HEIGHT} />
+  );
 
-  /**
-   * Gets a FlatList render item
-   *
-   * @param item The item to display
-   * @param section The current section
-   * @return {*}
-   */
-  getRenderItem = ({ item }: { item: FeedItemType }) => this.getFeedItem(item);
-
-  getRenderSectionHeader = (data: {
+  const getRenderSectionHeader = (data: {
     section: SectionListData<FeedItemType>;
   }) => {
-    const { props } = this;
     const icon = data.section.icon;
     if (data.section.data.length > 0) {
       return (
@@ -330,7 +300,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
         <Headline
           style={{
             ...styles.sectionHeaderEmpty,
-            color: props.theme.colors.textDisabled,
+            color: theme.colors.textDisabled,
           }}
         >
           {data.section.title}
@@ -339,7 +309,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
           <MaterialCommunityIcons
             name={icon}
             size={100}
-            color={props.theme.colors.textDisabled}
+            color={theme.colors.textDisabled}
             style={GENERAL_STYLES.center}
           />
         ) : null}
@@ -347,7 +317,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     );
   };
 
-  getListHeader = (fetchedData: RawDashboardType | undefined) => {
+  const getListHeader = (fetchedData: RawDashboardType | undefined) => {
     let dashboard = null;
     if (fetchedData != null) {
       dashboard = fetchedData.dashboard;
@@ -355,41 +325,17 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     return (
       <Animatable.View animation="fadeInDown" duration={500} useNativeDriver>
         <ActionsDashBoardItem />
-        {this.getDashboardRow(this.dashboardManager.getCurrentDashboard())}
-        {this.getDashboardEvent(
-          dashboard == null ? [] : dashboard.today_events
-        )}
+        {getDashboardRow(currentDashboard)}
+        {getDashboardEvent(dashboard == null ? [] : dashboard.today_events)}
       </Animatable.View>
     );
   };
 
-  /**
-   * Navigates to the a new screen if navigation parameters specify one
-   */
-  handleNavigationParams = () => {
-    const { props } = this;
-    if (props.route.params != null) {
-      if (props.route.params.nextScreen != null) {
-        props.navigation.navigate(
-          props.route.params.nextScreen,
-          props.route.params.data
-        );
-        // reset params to prevent infinite loop
-        props.navigation.dispatch(
-          CommonActions.setParams({ nextScreen: null })
-        );
-      }
-    }
-  };
+  const showDisconnectDialog = () => setDialogVisible(true);
 
-  showDisconnectDialog = (): void => this.setState({ dialogVisible: true });
+  const hideDisconnectDialog = () => setDialogVisible(false);
 
-  hideDisconnectDialog = (): void => this.setState({ dialogVisible: false });
-
-  openScanner = () => {
-    const { props } = this;
-    props.navigation.navigate('scanner');
-  };
+  const openScanner = () => navigation.navigate('scanner');
 
   /**
    * Creates the dataset to be used in the FlatList
@@ -398,7 +344,7 @@ class HomeScreen extends React.Component<PropsType, StateType> {
    * @param isLoading
    * @return {*}
    */
-  createDataset = (
+  const createDataset = (
     fetchedData: RawDashboardType | undefined,
     isLoading: boolean
   ): Array<{
@@ -407,21 +353,20 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     icon?: string;
     id: string;
   }> => {
+    let currentNewFeed: Array<FeedItemType> = [];
     if (fetchedData) {
       if (fetchedData.news_feed) {
-        this.currentNewFeed = HomeScreen.generateNewsFeed(
-          fetchedData.news_feed
-        );
+        currentNewFeed = generateNewsFeed(fetchedData.news_feed);
       }
       if (fetchedData.dashboard) {
-        this.currentDashboard = fetchedData.dashboard;
+        homeDashboard = fetchedData.dashboard;
       }
     }
-    if (this.currentNewFeed.length > 0) {
+    if (currentNewFeed.length > 0) {
       return [
         {
           title: i18n.t('screens.home.feedTitle'),
-          data: this.currentNewFeed,
+          data: currentNewFeed,
           id: SECTIONS_ID[1],
         },
       ];
@@ -438,14 +383,11 @@ class HomeScreen extends React.Component<PropsType, StateType> {
     ];
   };
 
-  onEventContainerClick = () => {
-    const { props } = this;
-    props.navigation.navigate('planning');
-  };
+  const onEventContainerClick = () => navigation.navigate(TabRoutes.Planning);
 
-  onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (this.fabRef.current) {
-      this.fabRef.current.onScroll(event);
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (fabRef.current) {
+      fabRef.current.onScroll(event);
     }
   };
 
@@ -453,63 +395,50 @@ class HomeScreen extends React.Component<PropsType, StateType> {
    * Callback when pressing the login button on the banner.
    * This hides the banner and takes the user to the login page.
    */
-  onLogin = () => {
-    const { props } = this;
-    props.navigation.navigate('login', {
+  const onLogin = () =>
+    navigation.navigate(MainRoutes.Login, {
       nextScreen: 'profile',
     });
-  };
 
-  render() {
-    const { props, state } = this;
-    return (
-      <View style={GENERAL_STYLES.flex}>
-        <View style={styles.content}>
-          <WebSectionList
-            request={() => readData<RawDashboardType>(Urls.app.dashboard)}
-            createDataset={this.createDataset}
-            autoRefreshTime={REFRESH_TIME}
-            refreshOnFocus={true}
-            renderItem={this.getRenderItem}
-            itemHeight={FEED_ITEM_HEIGHT}
-            onScroll={this.onScroll}
-            renderSectionHeader={this.getRenderSectionHeader}
-            renderListHeaderComponent={this.getListHeader}
-          />
-        </View>
-        {!this.isLoggedIn ? (
-          <MascotPopup
-            prefKey={AsyncStorageManager.PREFERENCES.homeShowMascot.key}
-            title={i18n.t('screens.home.mascotDialog.title')}
-            message={i18n.t('screens.home.mascotDialog.message')}
-            icon="human-greeting"
-            buttons={{
-              action: {
-                message: i18n.t('screens.home.mascotDialog.login'),
-                icon: 'login',
-                onPress: this.onLogin,
-              },
-              cancel: {
-                message: i18n.t('screens.home.mascotDialog.later'),
-                icon: 'close',
-                color: props.theme.colors.warning,
-              },
-            }}
-            emotion={MASCOT_STYLE.CUTE}
-          />
-        ) : null}
-        <AnimatedFAB
-          ref={this.fabRef}
-          icon="qrcode-scan"
-          onPress={this.openScanner}
-        />
-        <LogoutDialog
-          visible={state.dialogVisible}
-          onDismiss={this.hideDisconnectDialog}
+  return (
+    <View style={GENERAL_STYLES.flex}>
+      <View style={styles.content}>
+        <WebSectionList
+          request={() => readData<RawDashboardType>(Urls.app.dashboard)}
+          createDataset={createDataset}
+          autoRefreshTime={REFRESH_TIME}
+          refreshOnFocus={true}
+          renderItem={getRenderItem}
+          itemHeight={FEED_ITEM_HEIGHT}
+          onScroll={onScroll}
+          renderSectionHeader={getRenderSectionHeader}
+          renderListHeaderComponent={getListHeader}
         />
       </View>
-    );
-  }
+      {!isLoggedIn ? (
+        <MascotPopup
+          title={i18n.t('screens.home.mascotDialog.title')}
+          message={i18n.t('screens.home.mascotDialog.message')}
+          icon="human-greeting"
+          buttons={{
+            action: {
+              message: i18n.t('screens.home.mascotDialog.login'),
+              icon: 'login',
+              onPress: onLogin,
+            },
+            cancel: {
+              message: i18n.t('screens.home.mascotDialog.later'),
+              icon: 'close',
+              color: theme.colors.warning,
+            },
+          }}
+          emotion={MASCOT_STYLE.CUTE}
+        />
+      ) : null}
+      <AnimatedFAB ref={fabRef} icon="qrcode-scan" onPress={openScanner} />
+      <LogoutDialog visible={dialogVisible} onDismiss={hideDisconnectDialog} />
+    </View>
+  );
 }
 
-export default withTheme(HomeScreen);
+export default HomeScreen;

src/screens/Intro/IntroScreen.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import CustomIntroSlider from '../../components/Overrides/CustomIntroSlider';
+import Update from '../../constants/Update';
+import { usePreferences } from '../../context/preferencesContext';
+import AprilFoolsManager from '../../managers/AprilFoolsManager';
+import {
+  getPreferenceBool,
+  getPreferenceNumber,
+  GeneralPreferenceKeys,
+} from '../../utils/asyncStorage';
+
+export default function IntroScreen() {
+  const { preferences, updatePreferences } = usePreferences();
+
+  const onDone = () => {
+    updatePreferences(GeneralPreferenceKeys.showIntro, false);
+    updatePreferences(GeneralPreferenceKeys.updateNumber, Update.number);
+    updatePreferences(GeneralPreferenceKeys.showAprilFoolsStart, false);
+  };
+
+  const showIntro =
+    getPreferenceBool(GeneralPreferenceKeys.showIntro, preferences) !== false;
+
+  const isUpdate =
+    getPreferenceNumber(GeneralPreferenceKeys.updateNumber, preferences) !==
+      Update.number && !showIntro;
+
+  const isAprilFools =
+    AprilFoolsManager.getInstance().isAprilFoolsEnabled() &&
+    getPreferenceBool(
+      GeneralPreferenceKeys.showAprilFoolsStart,
+      preferences
+    ) !== false &&
+    !showIntro;
+
+  return (
+    <CustomIntroSlider
+      onDone={onDone}
+      isUpdate={isUpdate}
+      isAprilFools={isAprilFools}
+    />
+  );
+}

src/screens/MainApp.tsx

@@ -0,0 +1,61 @@
+import React, { Ref, useEffect } from 'react';
+import {
+  NavigationContainer,
+  NavigationContainerRef,
+} from '@react-navigation/native';
+import { Provider as PaperProvider } from 'react-native-paper';
+import GENERAL_STYLES from '../constants/Styles';
+import CollapsibleProvider from '../components/providers/CollapsibleProvider';
+import CacheProvider from '../components/providers/CacheProvider';
+import { OverflowMenuProvider } from 'react-navigation-header-buttons';
+import MainNavigator from '../navigation/MainNavigator';
+import { Platform, SafeAreaView, View } from 'react-native';
+import { useDarkTheme } from '../context/preferencesContext';
+import { CustomDarkTheme, CustomWhiteTheme } from '../utils/Themes';
+import { setupStatusBar } from '../utils/Utils';
+
+type Props = {
+  defaultHomeRoute?: string;
+  defaultHomeData?: { [key: string]: string };
+};
+
+function MainApp(props: Props, ref?: Ref<NavigationContainerRef>) {
+  const darkTheme = useDarkTheme();
+  const theme = darkTheme ? CustomDarkTheme : CustomWhiteTheme;
+
+  useEffect(() => {
+    if (Platform.OS === 'ios') {
+      setTimeout(setupStatusBar, 1000);
+    } else {
+      setupStatusBar(theme);
+    }
+  }, [theme]);
+
+  return (
+    <PaperProvider theme={theme}>
+      <CollapsibleProvider>
+        <CacheProvider>
+          <OverflowMenuProvider>
+            <View
+              style={{
+                backgroundColor: theme.colors.background,
+                ...GENERAL_STYLES.flex,
+              }}
+            >
+              <SafeAreaView style={GENERAL_STYLES.flex}>
+                <NavigationContainer theme={theme} ref={ref}>
+                  <MainNavigator
+                    defaultHomeRoute={props.defaultHomeRoute}
+                    defaultHomeData={props.defaultHomeData}
+                  />
+                </NavigationContainer>
+              </SafeAreaView>
+            </View>
+          </OverflowMenuProvider>
+        </CacheProvider>
+      </CollapsibleProvider>
+    </PaperProvider>
+  );
+}
+
+export default React.forwardRef(MainApp);

src/screens/Other/Settings/DashboardEditScreen.tsx

@@ -17,31 +17,21 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
-import { StackNavigationProp } from '@react-navigation/stack';
+import React, { useRef, useState } from 'react';
 import { Button, Card, Paragraph } from 'react-native-paper';
 import { FlatList, StyleSheet } from 'react-native';
 import { View } from 'react-native-animatable';
 import i18n from 'i18n-js';
-import type {
-  ServiceCategoryType,
-  ServiceItemType,
-} from '../../../managers/ServicesManager';
-import DashboardManager from '../../../managers/DashboardManager';
 import DashboardEditAccordion from '../../../components/Lists/DashboardEdit/DashboardEditAccordion';
 import DashboardEditPreviewItem from '../../../components/Lists/DashboardEdit/DashboardEditPreviewItem';
-import AsyncStorageManager from '../../../managers/AsyncStorageManager';
 import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
-
-type PropsType = {
-  navigation: StackNavigationProp<any>;
-};
-
-type StateType = {
-  currentDashboard: Array<ServiceItemType | null>;
-  currentDashboardIdList: Array<string>;
-  activeItem: number;
-};
+import {
+  getCategories,
+  ServiceCategoryType,
+  ServiceItemType,
+} from '../../../utils/Services';
+import { useNavigation } from '@react-navigation/core';
+import { useCurrentDashboard } from '../../../context/preferencesContext';
 
 const styles = StyleSheet.create({
   dashboardContainer: {
@@ -71,85 +61,71 @@ const styles = StyleSheet.create({
 /**
  * Class defining the Settings screen. This screen shows controls to modify app preferences.
  */
-class DashboardEditScreen extends React.Component<PropsType, StateType> {
-  content: Array<ServiceCategoryType>;
+function DashboardEditScreen() {
+  const navigation = useNavigation();
 
-  initialDashboard: Array<ServiceItemType | null>;
+  const {
+    currentDashboard,
+    currentDashboardIdList,
+    updateCurrentDashboard,
+  } = useCurrentDashboard();
+  const initialDashboard = useRef(currentDashboardIdList);
+  const [activeItem, setActiveItem] = useState(0);
 
-  initialDashboardIdList: Array<string>;
-
-  constructor(props: PropsType) {
-    super(props);
-    const dashboardManager = new DashboardManager(props.navigation);
-    this.initialDashboardIdList = AsyncStorageManager.getObject(
-      AsyncStorageManager.PREFERENCES.dashboardItems.key
-    );
-    this.initialDashboard = dashboardManager.getCurrentDashboard();
-    this.state = {
-      currentDashboard: [...this.initialDashboard],
-      currentDashboardIdList: [...this.initialDashboardIdList],
-      activeItem: 0,
-    };
-    this.content = dashboardManager.getCategories();
-  }
-
-  getDashboardRowRenderItem = ({
+  const getDashboardRowRenderItem = ({
     item,
     index,
   }: {
     item: ServiceItemType | null;
     index: number;
   }) => {
-    const { activeItem } = this.state;
     return (
       <DashboardEditPreviewItem
         image={item?.image}
         onPress={() => {
-          this.setState({ activeItem: index });
+          setActiveItem(index);
         }}
         isActive={activeItem === index}
       />
     );
   };
 
-  getDashboard(content: Array<ServiceItemType | null>) {
+  const getDashboard = (content: Array<ServiceItemType | null>) => {
     return (
       <FlatList
         data={content}
-        extraData={this.state}
-        renderItem={this.getDashboardRowRenderItem}
+        extraData={activeItem}
+        renderItem={getDashboardRowRenderItem}
         horizontal
         contentContainerStyle={styles.dashboard}
       />
     );
-  }
+  };
 
-  getRenderItem = ({ item }: { item: ServiceCategoryType }) => {
-    const { currentDashboardIdList } = this.state;
+  const getRenderItem = ({ item }: { item: ServiceCategoryType }) => {
     return (
       <DashboardEditAccordion
         item={item}
-        onPress={this.updateDashboard}
+        onPress={updateDashboard}
         activeDashboard={currentDashboardIdList}
       />
     );
   };
 
-  getListHeader() {
-    const { currentDashboard } = this.state;
+  const getListHeader = () => {
     return (
       <Card style={styles.card}>
         <Card.Content>
           <View style={styles.buttonContainer}>
             <Button
-              mode="contained"
-              onPress={this.undoDashboard}
+              mode={'contained'}
+              onPress={undoDashboard}
               style={styles.button}
             >
               {i18n.t('screens.settings.dashboardEdit.undo')}
             </Button>
             <View style={styles.dashboardContainer}>
-              {this.getDashboard(currentDashboard)}
+              {getDashboard(currentDashboard)}
             </View>
           </View>
           <Paragraph style={styles.text}>
@@ -158,43 +134,28 @@ class DashboardEditScreen extends React.Component<PropsType, StateType> {
         </Card.Content>
       </Card>
     );
-  }
+  };
 
-  updateDashboard = (service: ServiceItemType) => {
-    const { currentDashboard, currentDashboardIdList, activeItem } = this.state;
-    currentDashboard[activeItem] = service;
-    currentDashboardIdList[activeItem] = service.key;
-    this.setState({
-      currentDashboard,
-      currentDashboardIdList,
-    });
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.dashboardItems.key,
-      currentDashboardIdList
+  const updateDashboard = (service: ServiceItemType) => {
+    updateCurrentDashboard(
+      currentDashboardIdList.map((id, index) =>
+        index === activeItem ? service.key : id
+      )
     );
   };
 
-  undoDashboard = () => {
-    this.setState({
-      currentDashboard: [...this.initialDashboard],
-      currentDashboardIdList: [...this.initialDashboardIdList],
-    });
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.dashboardItems.key,
-      this.initialDashboardIdList
-    );
+  const undoDashboard = () => {
+    updateCurrentDashboard(initialDashboard.current);
   };
 
-  render() {
-    return (
-      <CollapsibleFlatList
-        data={this.content}
-        renderItem={this.getRenderItem}
-        ListHeaderComponent={this.getListHeader()}
-        style={{}}
-      />
-    );
-  }
+  return (
+    <CollapsibleFlatList
+      data={getCategories(navigation.navigate)}
+      renderItem={getRenderItem}
+      ListHeaderComponent={getListHeader()}
+      style={{}}
+    />
+  );
 }
 
 export default DashboardEditScreen;

src/screens/Other/Settings/SettingsScreen.tsx

@@ -26,28 +26,24 @@ import {
   List,
   Switch,
   ToggleButton,
-  withTheme,
+  useTheme,
 } from 'react-native-paper';
 import { Appearance } from 'react-native-appearance';
-import { StackNavigationProp } from '@react-navigation/stack';
-import ThemeManager from '../../../managers/ThemeManager';
-import AsyncStorageManager from '../../../managers/AsyncStorageManager';
 import CustomSlider from '../../../components/Overrides/CustomSlider';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 import GENERAL_STYLES from '../../../constants/Styles';
-
-type PropsType = {
-  navigation: StackNavigationProp<any>;
-  theme: ReactNativePaper.Theme;
-};
-
-type StateType = {
-  nightMode: boolean;
-  nightModeFollowSystem: boolean;
-  startScreenPickerSelected: string;
-  selectedWash: string;
-  isDebugUnlocked: boolean;
-};
+import {
+  usePreferences,
+  useProxiwashPreferences,
+} from '../../../context/preferencesContext';
+import { useNavigation } from '@react-navigation/core';
+import {
+  getPreferenceBool,
+  getPreferenceNumber,
+  getPreferenceString,
+  GeneralPreferenceKeys,
+  ProxiwashPreferenceKeys,
+} from '../../../utils/asyncStorage';
 
 const styles = StyleSheet.create({
   slider: {
@@ -66,98 +62,74 @@ const styles = StyleSheet.create({
 /**
  * Class defining the Settings screen. This screen shows controls to modify app preferences.
  */
-class SettingsScreen extends React.Component<PropsType, StateType> {
-  savedNotificationReminder: number;
+function SettingsScreen() {
+  const navigation = useNavigation();
+  const theme = useTheme();
+  const generalPreferences = usePreferences();
+  const proxiwashPreferences = useProxiwashPreferences();
 
-  /**
-   * Loads user preferences into state
-   */
-  constructor(props: PropsType) {
-    super(props);
-    const notifReminder = AsyncStorageManager.getString(
-      AsyncStorageManager.PREFERENCES.proxiwashNotifications.key
-    );
-    this.savedNotificationReminder = parseInt(notifReminder, 10);
-    if (Number.isNaN(this.savedNotificationReminder)) {
-      this.savedNotificationReminder = 0;
-    }
+  const nightMode = getPreferenceBool(
+    GeneralPreferenceKeys.nightMode,
+    generalPreferences.preferences
+  ) as boolean;
+  const nightModeFollowSystem =
+    (getPreferenceBool(
+      GeneralPreferenceKeys.nightModeFollowSystem,
+      generalPreferences.preferences
+    ) as boolean) && Appearance.getColorScheme() !== 'no-preference';
+  const startScreenPickerSelected = getPreferenceString(
+    GeneralPreferenceKeys.defaultStartScreen,
+    generalPreferences.preferences
+  ) as string;
+  const selectedWash = getPreferenceString(
+    ProxiwashPreferenceKeys.selectedWash,
+    proxiwashPreferences.preferences
+  ) as string;
+  const isDebugUnlocked = getPreferenceBool(
+    GeneralPreferenceKeys.debugUnlocked,
+    generalPreferences.preferences
+  ) as boolean;
+  const notif = getPreferenceNumber(
+    ProxiwashPreferenceKeys.proxiwashNotifications,
+    proxiwashPreferences.preferences
+  );
+  const savedNotificationReminder = !notif || Number.isNaN(notif) ? 0 : notif;
 
-    this.state = {
-      nightMode: ThemeManager.getNightMode(),
-      nightModeFollowSystem:
-        AsyncStorageManager.getBool(
-          AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key
-        ) && Appearance.getColorScheme() !== 'no-preference',
-      startScreenPickerSelected: AsyncStorageManager.getString(
-        AsyncStorageManager.PREFERENCES.defaultStartScreen.key
-      ),
-      selectedWash: AsyncStorageManager.getString(
-        AsyncStorageManager.PREFERENCES.selectedWash.key
-      ),
-      isDebugUnlocked: AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.debugUnlocked.key
-      ),
-    };
-  }
-
-  /**
-   * Saves the value for the proxiwash reminder notification time
-   *
-   * @param value The value to store
-   */
-  onProxiwashNotifPickerValueChange = (value: number) => {
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
+  const onProxiwashNotifPickerValueChange = (value: number) => {
+    proxiwashPreferences.updatePreferences(
+      ProxiwashPreferenceKeys.proxiwashNotifications,
       value
     );
   };
 
-  /**
-   * Saves the value for the proxiwash reminder notification time
-   *
-   * @param value The value to store
-   */
-  onStartScreenPickerValueChange = (value: string) => {
+  const onStartScreenPickerValueChange = (value: string) => {
     if (value != null) {
-      this.setState({ startScreenPickerSelected: value });
-      AsyncStorageManager.set(
-        AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
+      generalPreferences.updatePreferences(
+        GeneralPreferenceKeys.defaultStartScreen,
         value
       );
     }
   };
 
-  /**
-   * Returns a picker allowing the user to select the proxiwash reminder notification time
-   *
-   * @returns {React.Node}
-   */
-  getProxiwashNotifPicker() {
-    const { theme } = this.props;
+  const getProxiwashNotifPicker = () => {
     return (
       <CustomSlider
         style={styles.slider}
         minimumValue={0}
         maximumValue={10}
         step={1}
-        value={this.savedNotificationReminder}
-        onValueChange={this.onProxiwashNotifPickerValueChange}
+        value={savedNotificationReminder}
+        onValueChange={onProxiwashNotifPickerValueChange}
         thumbTintColor={theme.colors.primary}
         minimumTrackTintColor={theme.colors.primary}
       />
     );
-  }
+  };
 
-  /**
-   * Returns a radio picker allowing the user to select the proxiwash
-   *
-   * @returns {React.Node}
-   */
-  getProxiwashChangePicker() {
-    const { selectedWash } = this.state;
+  const getProxiwashChangePicker = () => {
     return (
       <RadioButton.Group
-        onValueChange={this.onSelectWashValueChange}
+        onValueChange={onSelectWashValueChange}
         value={selectedWash}
       >
         <RadioButton.Item
@@ -170,18 +142,12 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
         />
       </RadioButton.Group>
     );
-  }
+  };
 
-  /**
-   * Returns a picker allowing the user to select the start screen
-   *
-   * @returns {React.Node}
-   */
-  getStartScreenPicker() {
-    const { startScreenPickerSelected } = this.state;
+  const getStartScreenPicker = () => {
     return (
       <ToggleButton.Row
-        onValueChange={this.onStartScreenPickerValueChange}
+        onValueChange={onStartScreenPickerValueChange}
         value={startScreenPickerSelected}
         style={GENERAL_STYLES.centerHorizontal}
       >
@@ -192,30 +158,20 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
         <ToggleButton icon="clock" value="planex" />
       </ToggleButton.Row>
     );
-  }
-
-  /**
-   * Toggles night mode and saves it to preferences
-   */
-  onToggleNightMode = () => {
-    const { nightMode } = this.state;
-    ThemeManager.getInstance().setNightMode(!nightMode);
-    this.setState({ nightMode: !nightMode });
   };
 
-  onToggleNightModeFollowSystem = () => {
-    const { nightModeFollowSystem } = this.state;
-    const value = !nightModeFollowSystem;
-    this.setState({ nightModeFollowSystem: value });
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
-      value
+  const onToggleNightMode = () => {
+    generalPreferences.updatePreferences(
+      GeneralPreferenceKeys.nightMode,
+      !nightMode
+    );
+  };
+
+  const onToggleNightModeFollowSystem = () => {
+    generalPreferences.updatePreferences(
+      GeneralPreferenceKeys.nightModeFollowSystem,
+      !nightModeFollowSystem
     );
-    if (value) {
-      const nightMode = Appearance.getColorScheme() === 'dark';
-      ThemeManager.getInstance().setNightMode(nightMode);
-      this.setState({ nightMode });
-    }
   };
 
   /**
@@ -228,13 +184,13 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
    * @param state The current state of the switch
    * @returns {React.Node}
    */
-  static getToggleItem(
+  const getToggleItem = (
     onPressCallback: () => void,
     icon: string,
     title: string,
     subtitle: string,
     state: boolean
-  ) {
+  ) => {
     return (
       <List.Item
         title={title}
@@ -245,16 +201,15 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
         right={() => <Switch value={state} onValueChange={onPressCallback} />}
       />
     );
-  }
+  };
 
-  getNavigateItem(
+  const getNavigateItem = (
     route: string,
     icon: string,
     title: string,
     subtitle: string,
     onLongPress?: () => void
-  ) {
-    const { navigation } = this.props;
+  ) => {
     return (
       <List.Item
         title={title}
@@ -275,144 +230,127 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
         onLongPress={onLongPress}
       />
     );
-  }
+  };
 
-  /**
-   * Saves the value for the proxiwash selected wash
-   *
-   * @param value The value to store
-   */
-  onSelectWashValueChange = (value: string) => {
+  const onSelectWashValueChange = (value: string) => {
     if (value != null) {
-      this.setState({ selectedWash: value });
-      AsyncStorageManager.set(
-        AsyncStorageManager.PREFERENCES.selectedWash.key,
+      proxiwashPreferences.updatePreferences(
+        ProxiwashPreferenceKeys.selectedWash,
         value
       );
     }
   };
 
-  /**
-   * Unlocks debug mode and saves its state to user preferences
-   */
-  unlockDebugMode = () => {
-    this.setState({ isDebugUnlocked: true });
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.debugUnlocked.key,
+  const unlockDebugMode = () => {
+    generalPreferences.updatePreferences(
+      GeneralPreferenceKeys.debugUnlocked,
       true
     );
   };
 
-  render() {
-    const { nightModeFollowSystem, nightMode, isDebugUnlocked } = this.state;
-    return (
-      <CollapsibleScrollView>
-        <Card style={styles.card}>
-          <Card.Title title={i18n.t('screens.settings.generalCard')} />
-          <List.Section>
-            {Appearance.getColorScheme() !== 'no-preference'
-              ? SettingsScreen.getToggleItem(
-                  this.onToggleNightModeFollowSystem,
-                  'theme-light-dark',
-                  i18n.t('screens.settings.nightModeAuto'),
-                  i18n.t('screens.settings.nightModeAutoSub'),
-                  nightModeFollowSystem
-                )
-              : null}
-            {Appearance.getColorScheme() === 'no-preference' ||
-            !nightModeFollowSystem
-              ? SettingsScreen.getToggleItem(
-                  this.onToggleNightMode,
-                  'theme-light-dark',
-                  i18n.t('screens.settings.nightMode'),
-                  nightMode
-                    ? i18n.t('screens.settings.nightModeSubOn')
-                    : i18n.t('screens.settings.nightModeSubOff'),
-                  nightMode
-                )
-              : null}
-            <List.Item
-              title={i18n.t('screens.settings.startScreen')}
-              description={i18n.t('screens.settings.startScreenSub')}
-              left={(props) => (
-                <List.Icon
-                  color={props.color}
-                  style={props.style}
-                  icon="power"
-                />
-              )}
-            />
-            {this.getStartScreenPicker()}
-            {this.getNavigateItem(
-              'dashboard-edit',
-              'view-dashboard',
-              i18n.t('screens.settings.dashboard'),
-              i18n.t('screens.settings.dashboardSub')
+  return (
+    <CollapsibleScrollView>
+      <Card style={styles.card}>
+        <Card.Title title={i18n.t('screens.settings.generalCard')} />
+        <List.Section>
+          {Appearance.getColorScheme() !== 'no-preference'
+            ? getToggleItem(
+                onToggleNightModeFollowSystem,
+                'theme-light-dark',
+                i18n.t('screens.settings.nightModeAuto'),
+                i18n.t('screens.settings.nightModeAutoSub'),
+                nightModeFollowSystem
+              )
+            : null}
+          {Appearance.getColorScheme() === 'no-preference' ||
+          !nightModeFollowSystem
+            ? getToggleItem(
+                onToggleNightMode,
+                'theme-light-dark',
+                i18n.t('screens.settings.nightMode'),
+                nightMode
+                  ? i18n.t('screens.settings.nightModeSubOn')
+                  : i18n.t('screens.settings.nightModeSubOff'),
+                nightMode
+              )
+            : null}
+          <List.Item
+            title={i18n.t('screens.settings.startScreen')}
+            description={i18n.t('screens.settings.startScreenSub')}
+            left={(props) => (
+              <List.Icon color={props.color} style={props.style} icon="power" />
             )}
-          </List.Section>
-        </Card>
-        <Card style={styles.card}>
-          <Card.Title title="Proxiwash" />
-          <List.Section>
-            <List.Item
-              title={i18n.t('screens.settings.proxiwashNotifReminder')}
-              description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
-              left={(props) => (
-                <List.Icon
-                  color={props.color}
-                  style={props.style}
-                  icon="washing-machine"
-                />
-              )}
-            />
-            <View style={styles.pickerContainer}>
-              {this.getProxiwashNotifPicker()}
-            </View>
-            <List.Item
-              title={i18n.t('screens.settings.proxiwashChangeWash')}
-              description={i18n.t('screens.settings.proxiwashChangeWashSub')}
-              left={(props) => (
-                <List.Icon
-                  color={props.color}
-                  style={props.style}
-                  icon="washing-machine"
-                />
-              )}
-            />
-            <View style={styles.pickerContainer}>
-              {this.getProxiwashChangePicker()}
-            </View>
-          </List.Section>
-        </Card>
-        <Card style={styles.card}>
-          <Card.Title title={i18n.t('screens.settings.information')} />
-          <List.Section>
-            {isDebugUnlocked
-              ? this.getNavigateItem(
-                  'debug',
-                  'bug-check',
-                  i18n.t('screens.debug.title'),
-                  ''
-                )
-              : null}
-            {this.getNavigateItem(
-              'about',
-              'information',
-              i18n.t('screens.about.title'),
-              i18n.t('screens.about.buttonDesc'),
-              this.unlockDebugMode
+          />
+          {getStartScreenPicker()}
+          {getNavigateItem(
+            'dashboard-edit',
+            'view-dashboard',
+            i18n.t('screens.settings.dashboard'),
+            i18n.t('screens.settings.dashboardSub')
+          )}
+        </List.Section>
+      </Card>
+      <Card style={styles.card}>
+        <Card.Title title="Proxiwash" />
+        <List.Section>
+          <List.Item
+            title={i18n.t('screens.settings.proxiwashNotifReminder')}
+            description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
+            left={(props) => (
+              <List.Icon
+                color={props.color}
+                style={props.style}
+                icon="washing-machine"
+              />
             )}
-            {this.getNavigateItem(
-              'feedback',
-              'comment-quote',
-              i18n.t('screens.feedback.homeButtonTitle'),
-              i18n.t('screens.feedback.homeButtonSubtitle')
+          />
+          <View style={styles.pickerContainer}>
+            {getProxiwashNotifPicker()}
+          </View>
+          <List.Item
+            title={i18n.t('screens.settings.proxiwashChangeWash')}
+            description={i18n.t('screens.settings.proxiwashChangeWashSub')}
+            left={(props) => (
+              <List.Icon
+                color={props.color}
+                style={props.style}
+                icon="washing-machine"
+              />
             )}
-          </List.Section>
-        </Card>
-      </CollapsibleScrollView>
-    );
-  }
+          />
+          <View style={styles.pickerContainer}>
+            {getProxiwashChangePicker()}
+          </View>
+        </List.Section>
+      </Card>
+      <Card style={styles.card}>
+        <Card.Title title={i18n.t('screens.settings.information')} />
+        <List.Section>
+          {isDebugUnlocked
+            ? getNavigateItem(
+                'debug',
+                'bug-check',
+                i18n.t('screens.debug.title'),
+                ''
+              )
+            : null}
+          {getNavigateItem(
+            'about',
+            'information',
+            i18n.t('screens.about.title'),
+            i18n.t('screens.about.buttonDesc'),
+            unlockDebugMode
+          )}
+          {getNavigateItem(
+            'feedback',
+            'comment-quote',
+            i18n.t('screens.feedback.homeButtonTitle'),
+            i18n.t('screens.feedback.homeButtonSubtitle')
+          )}
+        </List.Section>
+      </Card>
+    </CollapsibleScrollView>
+  );
 }
 
-export default withTheme(SettingsScreen);
+export default SettingsScreen;

src/screens/Planex/GroupSelectionScreen.tsx

@@ -17,23 +17,22 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useLayoutEffect, useState } from 'react';
 import { Platform } from 'react-native';
 import i18n from 'i18n-js';
 import { Searchbar } from 'react-native-paper';
 import { stringMatchQuery } from '../../utils/Search';
 import WebSectionList from '../../components/Screens/WebSectionList';
 import GroupListAccordion from '../../components/Lists/PlanexGroups/GroupListAccordion';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import Urls from '../../constants/Urls';
 import { readData } from '../../utils/WebData';
 import { useNavigation } from '@react-navigation/core';
 import { useCachedPlanexGroups } from '../../context/cacheContext';
+import { usePlanexPreferences } from '../../context/preferencesContext';
+import {
+  getPreferenceObject,
+  PlanexPreferenceKeys,
+} from '../../utils/asyncStorage';
 
 export type PlanexGroupType = {
   name: string;
@@ -63,13 +62,23 @@ function sortName(
 
 function GroupSelectionScreen() {
   const navigation = useNavigation();
+  const { preferences, updatePreferences } = usePlanexPreferences();
   const { groups, setGroups } = useCachedPlanexGroups();
   const [currentSearchString, setCurrentSearchString] = useState('');
-  const [favoriteGroups, setFavoriteGroups] = useState<Array<PlanexGroupType>>(
-    AsyncStorageManager.getObject(
-      AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key
-    )
-  );
+
+  const getFavoriteGroups = (): Array<PlanexGroupType> => {
+    const data = getPreferenceObject(
+      PlanexPreferenceKeys.planexFavoriteGroups,
+      preferences
+    );
+    if (data) {
+      return data as Array<PlanexGroupType>;
+    } else {
+      return [];
+    }
+  };
+
+  const favoriteGroups = getFavoriteGroups();
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -140,10 +149,8 @@ function GroupSelectionScreen() {
    * @param item The article pressed
    */
   const onListItemPress = (item: PlanexGroupType) => {
-    navigation.navigate('planex', {
-      screen: 'index',
-      params: { group: item },
-    });
+    updatePreferences(PlanexPreferenceKeys.planexCurrentGroup, item);
+    navigation.goBack();
   };
 
   /**
@@ -153,12 +160,16 @@ function GroupSelectionScreen() {
    */
   const onListFavoritePress = useCallback(
     (group: PlanexGroupType) => {
+      const updateFavorites = (newValue: Array<PlanexGroupType>) => {
+        updatePreferences(PlanexPreferenceKeys.planexFavoriteGroups, newValue);
+      };
+
       const removeGroupFromFavorites = (g: PlanexGroupType) => {
-        setFavoriteGroups(favoriteGroups.filter((f) => f.id !== g.id));
+        updateFavorites(favoriteGroups.filter((f) => f.id !== g.id));
       };
 
       const addGroupToFavorites = (g: PlanexGroupType) => {
-        setFavoriteGroups([...favoriteGroups, g].sort(sortName));
+        updateFavorites([...favoriteGroups, g].sort(sortName));
       };
 
       if (favoriteGroups.some((f) => f.id === group.id)) {
@@ -167,16 +178,9 @@ function GroupSelectionScreen() {
         addGroupToFavorites(group);
       }
     },
-    [favoriteGroups]
+    [favoriteGroups, updatePreferences]
   );
 
-  useEffect(() => {
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
-      favoriteGroups
-    );
-  }, [favoriteGroups]);
-
   /**
    * Generates the dataset to be used in the FlatList.
    * This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.

src/screens/Planex/PlanexScreen.tsx

@@ -17,17 +17,12 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Title, useTheme } from 'react-native-paper';
 import i18n from 'i18n-js';
 import { StyleSheet, View } from 'react-native';
-import {
-  CommonActions,
-  useFocusEffect,
-  useNavigation,
-} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import Autolink from 'react-native-autolink';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import AlertDialog from '../../components/Dialogs/AlertDialog';
 import { dateToString, getTimeOnlyString } from '../../utils/Planning';
 import DateManager from '../../managers/DateManager';
@@ -36,8 +31,17 @@ import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
 import { getPrettierPlanexGroupName } from '../../utils/Utils';
 import GENERAL_STYLES from '../../constants/Styles';
-import PlanexWebview from '../../components/Screens/PlanexWebview';
+import PlanexWebview, {
+  JS_LOADED_MESSAGE,
+} from '../../components/Screens/PlanexWebview';
 import PlanexBottomBar from '../../components/Animations/PlanexBottomBar';
+import {
+  getPreferenceString,
+  GeneralPreferenceKeys,
+  PlanexPreferenceKeys,
+} from '../../utils/asyncStorage';
+import { usePlanexPreferences } from '../../context/preferencesContext';
+import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
 
 const styles = StyleSheet.create({
   container: {
@@ -50,17 +54,10 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props = {
-  route: {
-    params: {
-      group?: PlanexGroupType;
-    };
-  };
-};
-
-function PlanexScreen(props: Props) {
+function PlanexScreen() {
   const navigation = useNavigation();
   const theme = useTheme();
+  const { preferences } = usePlanexPreferences();
 
   const [dialogContent, setDialogContent] = useState<
     | undefined
@@ -71,13 +68,15 @@ function PlanexScreen(props: Props) {
       }
   >();
   const [injectJS, setInjectJS] = useState('');
+  const [loading, setLoading] = useState(true);
 
-  const getCurrentGroup = (): PlanexGroupType | undefined => {
-    let currentGroupString = AsyncStorageManager.getString(
-      AsyncStorageManager.PREFERENCES.planexCurrentGroup.key
+  const getCurrentGroup: () => PlanexGroupType | undefined = useCallback(() => {
+    let currentGroupString = getPreferenceString(
+      PlanexPreferenceKeys.planexCurrentGroup,
+      preferences
     );
     let group: PlanexGroupType;
-    if (currentGroupString !== '') {
+    if (currentGroupString) {
       group = JSON.parse(currentGroupString);
       navigation.setOptions({
         title: getPrettierPlanexGroupName(group.name),
@@ -85,22 +84,10 @@ function PlanexScreen(props: Props) {
       return group;
     }
     return undefined;
-  };
+  }, [navigation, preferences]);
 
-  const [currentGroup, setCurrentGroup] = useState<PlanexGroupType | undefined>(
-    getCurrentGroup()
-  );
+  const currentGroup = getCurrentGroup();
 
-  useFocusEffect(
-    useCallback(() => {
-      if (props.route.params?.group) {
-        // reset params to prevent infinite loop
-        selectNewGroup(props.route.params.group);
-        navigation.dispatch(CommonActions.setParams({ group: undefined }));
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.route.params])
-  );
   /**
    * Gets the Webview, with an error view on top if no group is selected.
    *
@@ -149,22 +136,26 @@ function PlanexScreen(props: Props) {
    * @param event
    */
   const onMessage = (event: { nativeEvent: { data: string } }) => {
-    const data: {
-      start: string;
-      end: string;
-      title: string;
-      color: string;
-    } = JSON.parse(event.nativeEvent.data);
-    const startDate = dateToString(new Date(data.start), true);
-    const endDate = dateToString(new Date(data.end), true);
-    const startString = getTimeOnlyString(startDate);
-    const endString = getTimeOnlyString(endDate);
+    if (event.nativeEvent.data === JS_LOADED_MESSAGE) {
+      setLoading(false);
+    } else {
+      const data: {
+        start: string;
+        end: string;
+        title: string;
+        color: string;
+      } = JSON.parse(event.nativeEvent.data);
+      const startDate = dateToString(new Date(data.start), true);
+      const endDate = dateToString(new Date(data.end), true);
+      const startString = getTimeOnlyString(startDate);
+      const endString = getTimeOnlyString(endDate);
 
-    let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
-    if (startString != null && endString != null) {
-      msg += `${startString} - ${endString}`;
+      let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
+      if (startString != null && endString != null) {
+        msg += `${startString} - ${endString}`;
+      }
+      showDialog(data.title, msg, data.color);
     }
-    showDialog(data.title, msg, data.color);
   };
 
   /**
@@ -194,21 +185,20 @@ function PlanexScreen(props: Props) {
 
   const hideDialog = () => setDialogContent(undefined);
 
-  /**
-   * Sends the webpage a message with the new group to select and save it to preferences
-   *
-   * @param group The group object selected
-   */
-  const selectNewGroup = (group: PlanexGroupType) => {
-    sendMessage('setGroup', group.id.toString());
-    setCurrentGroup(group);
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
-      group
-    );
+  useEffect(() => {
+    const group = getCurrentGroup();
+    if (group) {
+      sendMessage('setGroup', group.id.toString());
+      navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getCurrentGroup, navigation]);
 
-    navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
-  };
+  const showMascot =
+    getPreferenceString(
+      GeneralPreferenceKeys.defaultStartScreen,
+      preferences
+    )?.toLowerCase() !== 'planex';
 
   return (
     <View style={GENERAL_STYLES.flex}>
@@ -220,11 +210,13 @@ function PlanexScreen(props: Props) {
           <View style={GENERAL_STYLES.flex}>{getWebView()}</View>
         )}
       </View>
-      {AsyncStorageManager.getString(
-        AsyncStorageManager.PREFERENCES.defaultStartScreen.key
-      ).toLowerCase() !== 'planex' ? (
+      {loading ? (
+        <View style={styles.container}>
+          <BasicLoadingScreen />
+        </View>
+      ) : null}
+      {showMascot ? (
         <MascotPopup
-          prefKey={AsyncStorageManager.PREFERENCES.planexShowMascot.key}
           title={i18n.t('screens.planex.mascotDialog.title')}
           message={i18n.t('screens.planex.mascotDialog.message')}
           icon="emoticon-kiss"

src/screens/Planning/PlanningScreen.tsx

@@ -34,7 +34,6 @@ import {
 import CustomAgenda from '../../components/Overrides/CustomAgenda';
 import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import GENERAL_STYLES from '../../constants/Styles';
 import Urls from '../../constants/Urls';
 
@@ -291,7 +290,6 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
           }
         />
         <MascotPopup
-          prefKey={AsyncStorageManager.PREFERENCES.eventsShowMascot.key}
           title={i18n.t('screens.planning.mascotDialog.title')}
           message={i18n.t('screens.planning.mascotDialog.message')}
           icon="party-popper"

src/screens/Proxiwash/ProxiwashScreen.tsx

@@ -17,7 +17,7 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import {
   SectionListData,
   SectionListRenderItemInfo,
@@ -28,7 +28,6 @@ import i18n from 'i18n-js';
 import { Avatar, Button, Card, Text, useTheme } from 'react-native-paper';
 import { Modalize } from 'react-native-modalize';
 import WebSectionList from '../../components/Screens/WebSectionList';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import ProxiwashListItem from '../../components/Lists/Proxiwash/ProxiwashListItem';
 import ProxiwashConstants, {
   MachineStates,
@@ -50,9 +49,17 @@ import type { SectionListDataType } from '../../components/Screens/WebSectionLis
 import type { LaundromatType } from './ProxiwashAboutScreen';
 import GENERAL_STYLES from '../../constants/Styles';
 import { readData } from '../../utils/WebData';
-import { useFocusEffect, useNavigation } from '@react-navigation/core';
+import { useNavigation } from '@react-navigation/core';
 import { setupMachineNotification } from '../../utils/Notifications';
 import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader';
+import {
+  getPreferenceNumber,
+  getPreferenceObject,
+  getPreferenceString,
+  ProxiwashPreferenceKeys,
+} from '../../utils/asyncStorage';
+import { useProxiwashPreferences } from '../../context/preferencesContext';
+import { useSubsequentEffect } from '../../utils/customHooks';
 
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
 const LIST_ITEM_HEIGHT = 64;
@@ -91,23 +98,44 @@ const styles = StyleSheet.create({
 function ProxiwashScreen() {
   const navigation = useNavigation();
   const theme = useTheme();
+  const { preferences, updatePreferences } = useProxiwashPreferences();
   const [
     modalCurrentDisplayItem,
     setModalCurrentDisplayItem,
   ] = useState<React.ReactElement | null>(null);
-  const [machinesWatched, setMachinesWatched] = useState<
-    Array<ProxiwashMachineType>
-  >(
-    AsyncStorageManager.getObject(
-      AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key
-    )
+  const reminder = getPreferenceNumber(
+    ProxiwashPreferenceKeys.proxiwashNotifications,
+    preferences
   );
+  const [refresh, setRefresh] = useState(false);
 
-  const [selectedWash, setSelectedWash] = useState(
-    AsyncStorageManager.getString(
-      AsyncStorageManager.PREFERENCES.selectedWash.key
-    ) as 'tripodeB' | 'washinsa'
-  );
+  const getMachinesWatched = () => {
+    const data = getPreferenceObject(
+      ProxiwashPreferenceKeys.proxiwashWatchedMachines,
+      preferences
+    ) as Array<ProxiwashMachineType>;
+    return data ? (data as Array<ProxiwashMachineType>) : [];
+  };
+
+  const getSelectedWash = () => {
+    const data = getPreferenceString(
+      ProxiwashPreferenceKeys.selectedWash,
+      preferences
+    );
+    if (data !== 'washinsa' && data !== 'tripodeB') {
+      return 'washinsa';
+    } else {
+      return data;
+    }
+  };
+
+  const machinesWatched: Array<ProxiwashMachineType> = getMachinesWatched();
+  const selectedWash: 'washinsa' | 'tripodeB' = getSelectedWash();
+
+  useSubsequentEffect(() => {
+    // Refresh the list when the selected wash changes
+    setRefresh(true);
+  }, [selectedWash]);
 
   const modalStateStrings: { [key in MachineStates]: string } = {
     [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
@@ -137,17 +165,6 @@ function ProxiwashScreen() {
     });
   }, [navigation]);
 
-  useFocusEffect(
-    useCallback(() => {
-      const selected = AsyncStorageManager.getString(
-        AsyncStorageManager.PREFERENCES.selectedWash.key
-      ) as 'tripodeB' | 'washinsa';
-      if (selected !== selectedWash) {
-        setSelectedWash(selected);
-      }
-    }, [selectedWash])
-  );
-
   /**
    * Callback used when the user clicks on enable notifications for a machine
    *
@@ -293,6 +310,7 @@ function ProxiwashScreen() {
       setupMachineNotification(
         machine.number,
         true,
+        reminder,
         getMachineEndDate(machine)
       );
       saveNotificationToState(machine);
@@ -341,8 +359,11 @@ function ProxiwashScreen() {
         ...data.dryers,
         ...data.washers,
       ]);
-      if (cleanedList !== machinesWatched) {
-        setMachinesWatched(machinesWatched);
+      if (cleanedList.length !== machinesWatched.length) {
+        updatePreferences(
+          ProxiwashPreferenceKeys.proxiwashWatchedMachines,
+          cleanedList
+        );
       }
       return [
         {
@@ -407,11 +428,7 @@ function ProxiwashScreen() {
   };
 
   const saveNewWatchedList = (list: Array<ProxiwashMachineType>) => {
-    setMachinesWatched(list);
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
-      list
-    );
+    updatePreferences(ProxiwashPreferenceKeys.proxiwashWatchedMachines, list);
   };
 
   const renderListHeaderComponent = (
@@ -436,6 +453,7 @@ function ProxiwashScreen() {
     default:
       data = ProxiwashConstants.washinsa;
   }
+
   return (
     <View style={GENERAL_STYLES.flex}>
       <View style={styles.container}>
@@ -448,10 +466,11 @@ function ProxiwashScreen() {
           refreshOnFocus={true}
           extraData={machinesWatched.length}
           renderListHeaderComponent={renderListHeaderComponent}
+          refresh={refresh}
+          onFinish={() => setRefresh(false)}
         />
       </View>
       <MascotPopup
-        prefKey={AsyncStorageManager.PREFERENCES.proxiwashShowMascot.key}
         title={i18n.t('screens.proxiwash.mascotDialog.title')}
         message={i18n.t('screens.proxiwash.mascotDialog.message')}
         icon="information"

src/screens/Services/ServicesScreen.tsx

@@ -35,12 +35,12 @@ import MaterialHeaderButtons, {
 } from '../../components/Overrides/CustomHeaderButton';
 import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
-import ServicesManager, {
-  SERVICES_CATEGORIES_KEY,
-} from '../../managers/ServicesManager';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
-import type { ServiceCategoryType } from '../../managers/ServicesManager';
+import {
+  getCategories,
+  ServiceCategoryType,
+  SERVICES_CATEGORIES_KEY,
+} from '../../utils/Services';
 
 type PropsType = {
   navigation: StackNavigationProp<any>;
@@ -66,8 +66,7 @@ class ServicesScreen extends React.Component<PropsType> {
 
   constructor(props: PropsType) {
     super(props);
-    const services = new ServicesManager(props.navigation);
-    this.finalDataset = services.getCategories([
+    this.finalDataset = getCategories(props.navigation.navigate, [
       SERVICES_CATEGORIES_KEY.SPECIAL,
     ]);
   }
@@ -159,7 +158,6 @@ class ServicesScreen extends React.Component<PropsType> {
           hasTab
         />
         <MascotPopup
-          prefKey={AsyncStorageManager.PREFERENCES.servicesShowMascot.key}
           title={i18n.t('screens.services.mascotDialog.title')}
           message={i18n.t('screens.services.mascotDialog.message')}
           icon="cloud-question"

src/screens/Services/ServicesSectionScreen.tsx

@@ -22,7 +22,7 @@ import { Collapsible } from 'react-navigation-collapsible';
 import { CommonActions } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import CardList from '../../components/Lists/CardList/CardList';
-import type { ServiceCategoryType } from '../../managers/ServicesManager';
+import { ServiceCategoryType } from '../../utils/Services';
 
 type PropsType = {
   navigation: StackNavigationProp<any>;

src/utils/Notifications.ts

@@ -18,7 +18,6 @@
  */
 
 import i18n from 'i18n-js';
-import AsyncStorageManager from '../managers/AsyncStorageManager';
 import PushNotificationIOS from '@react-native-community/push-notification-ios';
 import PushNotification from 'react-native-push-notification';
 import { Platform } from 'react-native';
@@ -79,11 +78,8 @@ PushNotification.configure({
  * @param machineID The machine id to schedule notifications for. This is used as id and in the notification string.
  * @param date The date to trigger the notification at
  */
-function createNotifications(machineID: string, date: Date) {
-  const reminder = AsyncStorageManager.getNumber(
-    AsyncStorageManager.PREFERENCES.proxiwashNotifications.key
-  );
-  if (!Number.isNaN(reminder) && reminder > 0) {
+function createNotifications(machineID: string, date: Date, reminder?: number) {
+  if (reminder && !Number.isNaN(reminder) && reminder > 0) {
     const id = reminderIdFactor * parseInt(machineID, 10);
     const reminderDate = new Date(date);
     reminderDate.setMinutes(reminderDate.getMinutes() - reminder);
@@ -122,10 +118,11 @@ function createNotifications(machineID: string, date: Date) {
 export function setupMachineNotification(
   machineID: string,
   isEnabled: boolean,
+  reminder?: number,
   endDate?: Date | null
 ) {
   if (isEnabled && endDate) {
-    createNotifications(machineID, endDate);
+    createNotifications(machineID, endDate, reminder);
   } else {
     PushNotification.cancelLocalNotifications({ id: machineID });
     const reminderId = reminderIdFactor * parseInt(machineID, 10);

src/utils/Requests.tsx

@@ -53,6 +53,10 @@ export function getErrorMessage(
         fullMessage.message = i18n.t('errors.tokenSave');
         fullMessage.icon = 'alert-circle-outline';
         break;
+      case REQUEST_STATUS.TOKEN_RETRIEVE:
+        fullMessage.message = i18n.t('errors.tokenRetrieve');
+        fullMessage.icon = 'alert-circle-outline';
+        break;
       default:
         fullMessage.message = i18n.t('errors.unknown');
         fullMessage.icon = 'alert-circle-outline';

src/utils/Services.ts

@@ -16,6 +16,11 @@
  * You should have received a copy of the GNU General Public License
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
+import i18n from 'i18n-js';
+import type { FullDashboardType } from '../screens/Home/HomeScreen';
+import Urls from '../constants/Urls';
+import { MainRoutes } from '../navigation/MainNavigator';
+import { TabRoutes } from '../navigation/TabNavigator';
 
 /**
  * Gets the given services list without items of the given ids
@@ -25,45 +30,296 @@
  * @returns {[]}
  */
 export default function getStrippedServicesList<T extends { key: string }>(
-  idList: Array<string>,
-  sourceList: Array<T>
+  sourceList: Array<T>,
+  idList?: Array<string>
 ) {
-  const newArray: Array<T> = [];
-  sourceList.forEach((item: T) => {
-    if (!idList.includes(item.key)) {
-      newArray.push(item);
-    }
-  });
-  return newArray;
+  if (idList) {
+    return sourceList.filter((item) => !idList.includes(item.key));
+  } else {
+    return sourceList;
+  }
 }
 
-/**
- * Gets a sublist of the given list with items of the given ids only
- *
- * The given list must have a field id or key
- *
- * @param idList The ids of items to find
- * @param originalList The original list
- * @returns {[]}
- */
-export function getSublistWithIds<T extends { key: string }>(
-  idList: Array<string>,
-  originalList: Array<T>
-) {
-  const subList: Array<T | null> = [];
-  for (let i = 0; i < idList.length; i += 1) {
-    subList.push(null);
-  }
-  let itemsAdded = 0;
-  for (let i = 0; i < originalList.length; i += 1) {
-    const item = originalList[i];
-    if (idList.includes(item.key)) {
-      subList[idList.indexOf(item.key)] = item;
-      itemsAdded += 1;
-      if (itemsAdded === idList.length) {
-        break;
-      }
-    }
-  }
-  return subList;
+const AMICALE_LOGO = require('../../assets/amicale.png');
+
+export const SERVICES_KEY = {
+  CLUBS: 'clubs',
+  PROFILE: 'profile',
+  EQUIPMENT: 'equipment',
+  AMICALE_WEBSITE: 'amicale_website',
+  VOTE: 'vote',
+  PROXIMO: 'proximo',
+  WIKETUD: 'wiketud',
+  ELUS_ETUDIANTS: 'elus_etudiants',
+  TUTOR_INSA: 'tutor_insa',
+  RU: 'ru',
+  AVAILABLE_ROOMS: 'available_rooms',
+  BIB: 'bib',
+  EMAIL: 'email',
+  ENT: 'ent',
+  INSA_ACCOUNT: 'insa_account',
+  WASHERS: 'washers',
+  DRYERS: 'dryers',
+};
+
+export const SERVICES_CATEGORIES_KEY = {
+  AMICALE: 'amicale',
+  STUDENTS: 'students',
+  INSA: 'insa',
+  SPECIAL: 'special',
+};
+
+export type ServiceItemType = {
+  key: string;
+  title: string;
+  subtitle: string;
+  image: string | number;
+  onPress: () => void;
+  badgeFunction?: (dashboard: FullDashboardType) => number;
+};
+
+export type ServiceCategoryType = {
+  key: string;
+  title: string;
+  subtitle: string;
+  image: string | number;
+  content: Array<ServiceItemType>;
+};
+
+export function getAmicaleServices(
+  onPress: (route: string, params?: { [key: string]: any }) => void,
+  excludedItems?: Array<string>
+): Array<ServiceItemType> {
+  const amicaleDataset = [
+    {
+      key: SERVICES_KEY.CLUBS,
+      title: i18n.t('screens.clubs.title'),
+      subtitle: i18n.t('screens.services.descriptions.clubs'),
+      image: Urls.images.clubs,
+      onPress: () => onPress(MainRoutes.ClubList),
+    },
+    {
+      key: SERVICES_KEY.PROFILE,
+      title: i18n.t('screens.profile.title'),
+      subtitle: i18n.t('screens.services.descriptions.profile'),
+      image: Urls.images.profile,
+      onPress: () => onPress(MainRoutes.Profile),
+    },
+    {
+      key: SERVICES_KEY.EQUIPMENT,
+      title: i18n.t('screens.equipment.title'),
+      subtitle: i18n.t('screens.services.descriptions.equipment'),
+      image: Urls.images.equipment,
+      onPress: () => onPress(MainRoutes.EquipmentList),
+    },
+    {
+      key: SERVICES_KEY.AMICALE_WEBSITE,
+      title: i18n.t('screens.websites.amicale'),
+      subtitle: i18n.t('screens.services.descriptions.amicaleWebsite'),
+      image: Urls.images.amicale,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.amicale,
+          title: i18n.t('screens.websites.amicale'),
+        }),
+    },
+    {
+      key: SERVICES_KEY.VOTE,
+      title: i18n.t('screens.vote.title'),
+      subtitle: i18n.t('screens.services.descriptions.vote'),
+      image: Urls.images.vote,
+      onPress: () => onPress(MainRoutes.Vote),
+    },
+  ];
+  return getStrippedServicesList(amicaleDataset, excludedItems);
+}
+
+export function getStudentServices(
+  onPress: (route: string, params?: { [key: string]: any }) => void,
+  excludedItems?: Array<string>
+): Array<ServiceItemType> {
+  const studentsDataset = [
+    {
+      key: SERVICES_KEY.PROXIMO,
+      title: i18n.t('screens.proximo.title'),
+      subtitle: i18n.t('screens.services.descriptions.proximo'),
+      image: Urls.images.proximo,
+      onPress: () => onPress(MainRoutes.Proximo),
+      badgeFunction: (dashboard: FullDashboardType): number =>
+        dashboard.proximo_articles,
+    },
+    {
+      key: SERVICES_KEY.WIKETUD,
+      title: 'Wiketud',
+      subtitle: i18n.t('screens.services.descriptions.wiketud'),
+      image: Urls.images.wiketud,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.wiketud,
+          title: 'Wiketud',
+        }),
+    },
+    {
+      key: SERVICES_KEY.ELUS_ETUDIANTS,
+      title: 'Élus Étudiants',
+      subtitle: i18n.t('screens.services.descriptions.elusEtudiants'),
+      image: Urls.images.elusEtudiants,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.elusEtudiants,
+          title: 'Élus Étudiants',
+        }),
+    },
+    {
+      key: SERVICES_KEY.TUTOR_INSA,
+      title: "Tutor'INSA",
+      subtitle: i18n.t('screens.services.descriptions.tutorInsa'),
+      image: Urls.images.tutorInsa,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.tutorInsa,
+          title: "Tutor'INSA",
+        }),
+      badgeFunction: (dashboard: FullDashboardType): number =>
+        dashboard.available_tutorials,
+    },
+  ];
+  return getStrippedServicesList(studentsDataset, excludedItems);
+}
+
+export function getINSAServices(
+  onPress: (route: string, params?: { [key: string]: any }) => void,
+  excludedItems?: Array<string>
+): Array<ServiceItemType> {
+  const insaDataset = [
+    {
+      key: SERVICES_KEY.RU,
+      title: i18n.t('screens.menu.title'),
+      subtitle: i18n.t('screens.services.descriptions.self'),
+      image: Urls.images.menu,
+      onPress: () => onPress(MainRoutes.SelfMenu),
+      badgeFunction: (dashboard: FullDashboardType): number =>
+        dashboard.today_menu.length,
+    },
+    {
+      key: SERVICES_KEY.AVAILABLE_ROOMS,
+      title: i18n.t('screens.websites.rooms'),
+      subtitle: i18n.t('screens.services.descriptions.availableRooms'),
+      image: Urls.images.availableRooms,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.availableRooms,
+          title: i18n.t('screens.websites.rooms'),
+        }),
+    },
+    {
+      key: SERVICES_KEY.BIB,
+      title: i18n.t('screens.websites.bib'),
+      subtitle: i18n.t('screens.services.descriptions.bib'),
+      image: Urls.images.bib,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.bib,
+          title: i18n.t('screens.websites.bib'),
+        }),
+    },
+    {
+      key: SERVICES_KEY.EMAIL,
+      title: i18n.t('screens.websites.mails'),
+      subtitle: i18n.t('screens.services.descriptions.mails'),
+      image: Urls.images.bluemind,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.bluemind,
+          title: i18n.t('screens.websites.mails'),
+        }),
+    },
+    {
+      key: SERVICES_KEY.ENT,
+      title: i18n.t('screens.websites.ent'),
+      subtitle: i18n.t('screens.services.descriptions.ent'),
+      image: Urls.images.ent,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.ent,
+          title: i18n.t('screens.websites.ent'),
+        }),
+    },
+    {
+      key: SERVICES_KEY.INSA_ACCOUNT,
+      title: i18n.t('screens.insaAccount.title'),
+      subtitle: i18n.t('screens.services.descriptions.insaAccount'),
+      image: Urls.images.insaAccount,
+      onPress: () =>
+        onPress(MainRoutes.Website, {
+          host: Urls.websites.insaAccount,
+          title: i18n.t('screens.insaAccount.title'),
+        }),
+    },
+  ];
+  return getStrippedServicesList(insaDataset, excludedItems);
+}
+
+export function getSpecialServices(
+  onPress: (route: string, params?: { [key: string]: any }) => void,
+  excludedItems?: Array<string>
+): Array<ServiceItemType> {
+  const specialDataset = [
+    {
+      key: SERVICES_KEY.WASHERS,
+      title: i18n.t('screens.proxiwash.washers'),
+      subtitle: i18n.t('screens.services.descriptions.washers'),
+      image: Urls.images.washer,
+      onPress: () => onPress(TabRoutes.Proxiwash),
+      badgeFunction: (dashboard: FullDashboardType): number =>
+        dashboard.available_washers,
+    },
+    {
+      key: SERVICES_KEY.DRYERS,
+      title: i18n.t('screens.proxiwash.dryers'),
+      subtitle: i18n.t('screens.services.descriptions.washers'),
+      image: Urls.images.dryer,
+      onPress: () => onPress(TabRoutes.Proxiwash),
+      badgeFunction: (dashboard: FullDashboardType): number =>
+        dashboard.available_dryers,
+    },
+  ];
+  return getStrippedServicesList(specialDataset, excludedItems);
+}
+
+export function getCategories(
+  onPress: (route: string, params?: { [key: string]: any }) => void,
+  excludedItems?: Array<string>
+): Array<ServiceCategoryType> {
+  const categoriesDataset = [
+    {
+      key: SERVICES_CATEGORIES_KEY.AMICALE,
+      title: i18n.t('screens.services.categories.amicale'),
+      subtitle: i18n.t('screens.services.more'),
+      image: AMICALE_LOGO,
+      content: getAmicaleServices(onPress),
+    },
+    {
+      key: SERVICES_CATEGORIES_KEY.STUDENTS,
+      title: i18n.t('screens.services.categories.students'),
+      subtitle: i18n.t('screens.services.more'),
+      image: 'account-group',
+      content: getStudentServices(onPress),
+    },
+    {
+      key: SERVICES_CATEGORIES_KEY.INSA,
+      title: i18n.t('screens.services.categories.insa'),
+      subtitle: i18n.t('screens.services.more'),
+      image: 'school',
+      content: getINSAServices(onPress),
+    },
+    {
+      key: SERVICES_CATEGORIES_KEY.SPECIAL,
+      title: i18n.t('screens.services.categories.special'),
+      subtitle: i18n.t('screens.services.categories.special'),
+      image: 'star',
+      content: getSpecialServices(onPress),
+    },
+  ];
+  return getStrippedServicesList(categoriesDataset, excludedItems);
 }

src/utils/Themes.ts

@@ -1,28 +1,4 @@
-/*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
- */
-
 import { DarkTheme, DefaultTheme } from 'react-native-paper';
-import { Appearance } from 'react-native-appearance';
-import AsyncStorageManager from './AsyncStorageManager';
-import AprilFoolsManager from './AprilFoolsManager';
-
-const colorScheme = Appearance.getColorScheme();
 
 declare global {
   namespace ReactNativePaper {
@@ -83,7 +59,7 @@ declare global {
   }
 }
 
-const CustomWhiteTheme: ReactNativePaper.Theme = {
+export const CustomWhiteTheme: ReactNativePaper.Theme = {
   ...DefaultTheme,
   colors: {
     ...DefaultTheme.colors,
@@ -142,7 +118,7 @@ const CustomWhiteTheme: ReactNativePaper.Theme = {
   },
 };
 
-const CustomDarkTheme: ReactNativePaper.Theme = {
+export const CustomDarkTheme: ReactNativePaper.Theme = {
   ...DarkTheme,
   colors: {
     ...DarkTheme.colors,
@@ -200,99 +176,3 @@ const CustomDarkTheme: ReactNativePaper.Theme = {
     mascotMessageArrow: '#323232',
   },
 };
-
-/**
- * Singleton class used to manage themes
- */
-export default class ThemeManager {
-  static instance: ThemeManager | null = null;
-
-  updateThemeCallback: null | (() => void);
-
-  constructor() {
-    this.updateThemeCallback = null;
-  }
-
-  /**
-   * Get this class instance or create one if none is found
-   *
-   * @returns {ThemeManager}
-   */
-  static getInstance(): ThemeManager {
-    if (ThemeManager.instance == null) {
-      ThemeManager.instance = new ThemeManager();
-    }
-    return ThemeManager.instance;
-  }
-
-  /**
-   * Gets night mode status.
-   * If Follow System Preferences is enabled, will first use system theme.
-   * If disabled or not available, will use value stored din preferences
-   *
-   * @returns {boolean} Night mode state
-   */
-  static getNightMode(): boolean {
-    return (
-      (AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.nightMode.key
-      ) &&
-        (!AsyncStorageManager.getBool(
-          AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key
-        ) ||
-          colorScheme === 'no-preference')) ||
-      (AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key
-      ) &&
-        colorScheme === 'dark')
-    );
-  }
-
-  /**
-   * Get the current theme based on night mode and events
-   *
-   * @returns {ReactNativePaper.Theme} The current theme
-   */
-  static getCurrentTheme(): ReactNativePaper.Theme {
-    if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
-      return AprilFoolsManager.getAprilFoolsTheme(CustomWhiteTheme);
-    }
-    return ThemeManager.getBaseTheme();
-  }
-
-  /**
-   * Get the theme based on night mode
-   *
-   * @return {ReactNativePaper.Theme} The theme
-   */
-  static getBaseTheme(): ReactNativePaper.Theme {
-    if (ThemeManager.getNightMode()) {
-      return CustomDarkTheme;
-    }
-    return CustomWhiteTheme;
-  }
-
-  /**
-   * Sets the function to be called when the theme is changed (allows for general reload of the app)
-   *
-   * @param callback Function to call after theme change
-   */
-  setUpdateThemeCallback(callback: () => void) {
-    this.updateThemeCallback = callback;
-  }
-
-  /**
-   * Set night mode and save it to preferences
-   *
-   * @param isNightMode True to enable night mode, false to disable
-   */
-  setNightMode(isNightMode: boolean) {
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.nightMode.key,
-      isNightMode
-    );
-    if (this.updateThemeCallback != null) {
-      this.updateThemeCallback();
-    }
-  }
-}

src/utils/Utils.ts

@@ -18,23 +18,21 @@
  */
 
 import { Platform, StatusBar } from 'react-native';
-import ThemeManager from '../managers/ThemeManager';
 
 /**
  * Updates status bar content color if on iOS only,
  * as the android status bar is always set to black.
  */
-export function setupStatusBar() {
-  if (ThemeManager.getNightMode()) {
-    StatusBar.setBarStyle('light-content', true);
-  } else {
-    StatusBar.setBarStyle('dark-content', true);
-  }
-  if (Platform.OS === 'android') {
-    StatusBar.setBackgroundColor(
-      ThemeManager.getCurrentTheme().colors.surface,
-      true
-    );
+export function setupStatusBar(theme?: ReactNativePaper.Theme) {
+  if (theme) {
+    if (theme.dark) {
+      StatusBar.setBarStyle('light-content', true);
+    } else {
+      StatusBar.setBarStyle('dark-content', true);
+    }
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor(theme.colors.surface, true);
+    }
   }
 }
 

src/utils/asyncStorage.ts

@@ -1,14 +1,30 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { SERVICES_KEY } from '../managers/ServicesManager';
+import { SERVICES_KEY } from './Services';
 
-export enum PreferenceKeys {
+export enum GeneralPreferenceKeys {
   debugUnlocked = 'debugUnlocked',
   showIntro = 'showIntro',
   updateNumber = 'updateNumber',
-  proxiwashNotifications = 'proxiwashNotifications',
   nightModeFollowSystem = 'nightModeFollowSystem',
   nightMode = 'nightMode',
   defaultStartScreen = 'defaultStartScreen',
+  showAprilFoolsStart = 'showAprilFoolsStart',
+  dashboardItems = 'dashboardItems',
+  gameScores = 'gameScores',
+}
+
+export enum PlanexPreferenceKeys {
+  planexCurrentGroup = 'planexCurrentGroup',
+  planexFavoriteGroups = 'planexFavoriteGroups',
+}
+
+export enum ProxiwashPreferenceKeys {
+  proxiwashNotifications = 'proxiwashNotifications',
+  proxiwashWatchedMachines = 'proxiwashWatchedMachines',
+  selectedWash = 'selectedWash',
+}
+
+export enum MascotPreferenceKeys {
   servicesShowMascot = 'servicesShowMascot',
   proxiwashShowMascot = 'proxiwashShowMascot',
   homeShowMascot = 'homeShowMascot',
@@ -17,68 +33,110 @@ export enum PreferenceKeys {
   loginShowMascot = 'loginShowMascot',
   voteShowMascot = 'voteShowMascot',
   equipmentShowMascot = 'equipmentShowMascot',
-  gameStartMascot = 'gameStartMascot',
-  proxiwashWatchedMachines = 'proxiwashWatchedMachines',
-  showAprilFoolsStart = 'showAprilFoolsStart',
-  planexCurrentGroup = 'planexCurrentGroup',
-  planexFavoriteGroups = 'planexFavoriteGroups',
-  dashboardItems = 'dashboardItems',
-  gameScores = 'gameScores',
-  selectedWash = 'selectedWash',
+  gameShowMascot = 'gameShowMascot',
 }
 
-export type PreferencesType = { [key in PreferenceKeys]: string };
+export const PreferenceKeys = {
+  ...GeneralPreferenceKeys,
+  ...PlanexPreferenceKeys,
+  ...ProxiwashPreferenceKeys,
+  ...MascotPreferenceKeys,
+};
+export type PreferenceKeys =
+  | GeneralPreferenceKeys
+  | PlanexPreferenceKeys
+  | ProxiwashPreferenceKeys
+  | MascotPreferenceKeys;
 
-export const defaultPreferences: { [key in PreferenceKeys]: string } = {
-  [PreferenceKeys.debugUnlocked]: '0',
-  [PreferenceKeys.showIntro]: '1',
-  [PreferenceKeys.updateNumber]: '0',
-  [PreferenceKeys.proxiwashNotifications]: '5',
-  [PreferenceKeys.nightModeFollowSystem]: '1',
-  [PreferenceKeys.nightMode]: '1',
-  [PreferenceKeys.defaultStartScreen]: 'home',
-  [PreferenceKeys.servicesShowMascot]: '1',
-  [PreferenceKeys.proxiwashShowMascot]: '1',
-  [PreferenceKeys.homeShowMascot]: '1',
-  [PreferenceKeys.eventsShowMascot]: '1',
-  [PreferenceKeys.planexShowMascot]: '1',
-  [PreferenceKeys.loginShowMascot]: '1',
-  [PreferenceKeys.voteShowMascot]: '1',
-  [PreferenceKeys.equipmentShowMascot]: '1',
-  [PreferenceKeys.gameStartMascot]: '1',
-  [PreferenceKeys.proxiwashWatchedMachines]: '[]',
-  [PreferenceKeys.showAprilFoolsStart]: '1',
-  [PreferenceKeys.planexCurrentGroup]: '',
-  [PreferenceKeys.planexFavoriteGroups]: '[]',
-  [PreferenceKeys.dashboardItems]: JSON.stringify([
+export type PreferencesType = { [key in PreferenceKeys]: string };
+export type GeneralPreferencesType = { [key in GeneralPreferenceKeys]: string };
+export type PlanexPreferencesType = {
+  [key in PlanexPreferenceKeys]: string;
+};
+export type ProxiwashPreferencesType = {
+  [key in ProxiwashPreferenceKeys]: string;
+};
+export type MascotPreferencesType = { [key in MascotPreferenceKeys]: string };
+
+export const defaultPlanexPreferences: {
+  [key in PlanexPreferenceKeys]: string;
+} = {
+  [PlanexPreferenceKeys.planexCurrentGroup]: '',
+  [PlanexPreferenceKeys.planexFavoriteGroups]: '[]',
+};
+
+export const defaultProxiwashPreferences: {
+  [key in ProxiwashPreferenceKeys]: string;
+} = {
+  [ProxiwashPreferenceKeys.proxiwashNotifications]: '5',
+  [ProxiwashPreferenceKeys.proxiwashWatchedMachines]: '[]',
+  [ProxiwashPreferenceKeys.selectedWash]: 'washinsa',
+};
+
+export const defaultMascotPreferences: {
+  [key in MascotPreferenceKeys]: string;
+} = {
+  [MascotPreferenceKeys.servicesShowMascot]: '1',
+  [MascotPreferenceKeys.proxiwashShowMascot]: '1',
+  [MascotPreferenceKeys.homeShowMascot]: '1',
+  [MascotPreferenceKeys.eventsShowMascot]: '1',
+  [MascotPreferenceKeys.planexShowMascot]: '1',
+  [MascotPreferenceKeys.loginShowMascot]: '1',
+  [MascotPreferenceKeys.voteShowMascot]: '1',
+  [MascotPreferenceKeys.equipmentShowMascot]: '1',
+  [MascotPreferenceKeys.gameShowMascot]: '1',
+};
+
+export const defaultPreferences: { [key in GeneralPreferenceKeys]: string } = {
+  [GeneralPreferenceKeys.debugUnlocked]: '0',
+  [GeneralPreferenceKeys.showIntro]: '1',
+  [GeneralPreferenceKeys.updateNumber]: '0',
+  [GeneralPreferenceKeys.nightModeFollowSystem]: '1',
+  [GeneralPreferenceKeys.nightMode]: '1',
+  [GeneralPreferenceKeys.defaultStartScreen]: 'home',
+  [GeneralPreferenceKeys.showAprilFoolsStart]: '1',
+
+  [GeneralPreferenceKeys.dashboardItems]: JSON.stringify([
     SERVICES_KEY.EMAIL,
     SERVICES_KEY.WASHERS,
     SERVICES_KEY.PROXIMO,
     SERVICES_KEY.TUTOR_INSA,
     SERVICES_KEY.RU,
   ]),
-  [PreferenceKeys.gameScores]: '[]',
-  [PreferenceKeys.selectedWash]: 'washinsa',
+
+  [GeneralPreferenceKeys.gameScores]: '[]',
 };
 
+export function isValidGeneralPreferenceKey(
+  key: string
+): key is GeneralPreferenceKeys {
+  return key in Object.values(GeneralPreferenceKeys);
+}
+
+export function isValidMascotPreferenceKey(
+  key: string
+): key is MascotPreferenceKeys {
+  return key in Object.values(MascotPreferenceKeys);
+}
+
 /**
  * Set preferences object current values from AsyncStorage.
  * This function should be called once on start.
  *
  * @return {Promise<PreferencesType>}
  */
-export function retrievePreferences(
-  keys: Array<PreferenceKeys>,
-  defaults: PreferencesType
-): Promise<PreferencesType> {
-  return new Promise((resolve: (preferences: PreferencesType) => void) => {
-    AsyncStorage.multiGet(Object.values(keys))
+export function retrievePreferences<
+  Keys extends PreferenceKeys,
+  T extends Partial<PreferencesType>
+>(keys: Array<Keys>, defaults: T): Promise<T> {
+  return new Promise((resolve: (preferences: T) => void) => {
+    AsyncStorage.multiGet(keys)
       .then((result) => {
         const preferences = { ...defaults };
         result.forEach((item) => {
           let [key, value] = item;
           if (value !== null) {
-            preferences[key as PreferenceKeys] = value;
+            preferences[key as Keys] = value;
           }
         });
         resolve(preferences);
@@ -94,11 +152,14 @@ export function retrievePreferences(
  * @param key
  * @param value
  */
-export function setPreference(
-  key: PreferenceKeys,
-  value: number | string | boolean | object | Array<any>,
-  prevPreferences: PreferencesType
-): PreferencesType {
+export function setPreference<
+  Keys extends PreferenceKeys,
+  T extends Partial<PreferencesType>
+>(
+  key: Keys,
+  value: number | string | boolean | object | Array<any> | undefined,
+  prevPreferences: T
+): T {
   let convertedValue: string;
   if (typeof value === 'string') {
     convertedValue = value;
@@ -120,10 +181,10 @@ export function setPreference(
  * @param key
  * @returns {boolean}
  */
-export function getPreferenceString(
-  key: PreferenceKeys,
-  preferences: PreferencesType
-): string | undefined {
+export function getPreferenceString<
+  Keys extends PreferenceKeys,
+  T extends Partial<PreferencesType>
+>(key: Keys, preferences: T): string | undefined {
   return preferences[key];
 }
 
@@ -133,10 +194,10 @@ export function getPreferenceString(
  * @param key
  * @returns {boolean}
  */
-export function getPreferenceBool(
-  key: PreferenceKeys,
-  preferences: PreferencesType
-): boolean | undefined {
+export function getPreferenceBool<
+  Keys extends PreferenceKeys,
+  T extends Partial<PreferencesType>
+>(key: Keys, preferences: T): boolean | undefined {
   const value = preferences[key];
   return value ? value === '1' || value === 'true' : undefined;
 }
@@ -147,12 +208,12 @@ export function getPreferenceBool(
  * @param key
  * @returns {number}
  */
-export function getPreferenceNumber(
-  key: PreferenceKeys,
-  preferences: PreferencesType
-): number | undefined {
-  const value = preferences[key];
-  return value !== undefined ? parseFloat(value) : undefined;
+export function getPreferenceNumber<
+  Keys extends PreferenceKeys,
+  T extends Partial<PreferencesType>
+>(key: Keys, preferences: T): number | undefined {
+  const value = preferences[key] as string | undefined;
+  return value ? parseFloat(value) : undefined;
 }
 
 /**
@@ -161,10 +222,10 @@ export function getPreferenceNumber(
  * @param key
  * @returns {{...}}
  */
-export function getPreferenceObject(
-  key: PreferenceKeys,
-  preferences: PreferencesType
-): object | Array<any> | undefined {
-  const value = preferences[key];
+export function getPreferenceObject<
+  Keys extends PreferenceKeys,
+  T extends Partial<PreferencesType>
+>(key: Keys, preferences: T): object | Array<any> | undefined {
+  const value = preferences[key] as string | undefined;
   return value ? JSON.parse(value) : undefined;
 }