Update prettier and eslint config

.eslintrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-  root: true,
-  extends: '@react-native-community',
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
-};

.prettierrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-  bracketSpacing: false,
-  jsxBracketSameLine: true,
-  singleQuote: true,
-  trailingComma: 'all',
-};

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "i18n-ally.localesPaths": "locales",
+    "i18n-ally.keystyle": "nested"
+}

App.tsx

@@ -17,13 +17,13 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as 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 {setSafeBounceHeight} from 'react-navigation-collapsible';
+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 { setSafeBounceHeight } from 'react-navigation-collapsible';
 import SplashScreen from 'react-native-splash-screen';
-import {OverflowMenuProvider} from 'react-navigation-header-buttons';
+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';
@@ -31,11 +31,12 @@ 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 type { ParsedUrlDataType } from './src/utils/URLHandler';
 import URLHandler from './src/utils/URLHandler';
-import {setupStatusBar} from './src/utils/Utils';
+import { setupStatusBar } from './src/utils/Utils';
 import initLocales from './src/utils/Locales';
-import {NavigationContainerRef} from '@react-navigation/core';
+import { NavigationContainerRef } from '@react-navigation/core';
+import GENERAL_STYLES from './src/constants/Styles';
 
 // Native optimizations https://reactnavigation.org/docs/react-native-screens
 // Crashes app when navigating away from webview on android 9+
@@ -56,11 +57,11 @@ type StateType = {
 };
 
 export default class App extends React.Component<{}, StateType> {
-  navigatorRef: {current: null | NavigationContainerRef};
+  navigatorRef: { current: null | NavigationContainerRef };
 
   defaultHomeRoute: string | null;
 
-  defaultHomeData: {[key: string]: string};
+  defaultHomeData: { [key: string]: string };
 
   urlHandler: URLHandler;
 
@@ -106,7 +107,7 @@ export default class App extends React.Component<{}, StateType> {
     if (nav != null) {
       nav.navigate('home', {
         screen: 'index',
-        params: {nextScreen: parsedData.route, data: parsedData.data},
+        params: { nextScreen: parsedData.route, data: parsedData.data },
       });
     }
   };
@@ -132,15 +133,15 @@ export default class App extends React.Component<{}, StateType> {
     });
     AsyncStorageManager.set(
       AsyncStorageManager.PREFERENCES.showIntro.key,
-      false,
+      false
     );
     AsyncStorageManager.set(
       AsyncStorageManager.PREFERENCES.updateNumber.key,
-      Update.number,
+      Update.number
     );
     AsyncStorageManager.set(
       AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key,
-      false,
+      false
     );
   };
 
@@ -161,16 +162,16 @@ export default class App extends React.Component<{}, StateType> {
       isLoading: false,
       currentTheme: ThemeManager.getCurrentTheme(),
       showIntro: AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.showIntro.key,
+        AsyncStorageManager.PREFERENCES.showIntro.key
       ),
       showUpdate:
         AsyncStorageManager.getNumber(
-          AsyncStorageManager.PREFERENCES.updateNumber.key,
+          AsyncStorageManager.PREFERENCES.updateNumber.key
         ) !== Update.number,
       showAprilFools:
         AprilFoolsManager.getInstance().isAprilFoolsEnabled() &&
         AsyncStorageManager.getBool(
-          AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key,
+          AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key
         ),
     });
     SplashScreen.hide();
@@ -194,7 +195,7 @@ export default class App extends React.Component<{}, StateType> {
    * Renders the app based on loading state
    */
   render() {
-    const {state} = this;
+    const { state } = this;
     if (state.isLoading) {
       return null;
     }
@@ -213,12 +214,14 @@ export default class App extends React.Component<{}, StateType> {
           <View
             style={{
               backgroundColor: ThemeManager.getCurrentTheme().colors.background,
-              flex: 1,
-            }}>
-            <SafeAreaView style={{flex: 1}}>
+              ...GENERAL_STYLES.flex,
+            }}
+          >
+            <SafeAreaView style={GENERAL_STYLES.flex}>
               <NavigationContainer
                 theme={state.currentTheme}
-                ref={this.navigatorRef}>
+                ref={this.navigatorRef}
+              >
                 <MainNavigator
                   defaultHomeRoute={this.defaultHomeRoute}
                   defaultHomeData={this.defaultHomeData}

__mocks__/react-native-keychain/index.js

@@ -1,7 +1,7 @@
 const keychainMock = {
-    SECURITY_LEVEL_ANY: "MOCK_SECURITY_LEVEL_ANY",
-    SECURITY_LEVEL_SECURE_SOFTWARE: "MOCK_SECURITY_LEVEL_SECURE_SOFTWARE",
-    SECURITY_LEVEL_SECURE_HARDWARE: "MOCK_SECURITY_LEVEL_SECURE_HARDWARE",
-}
+  SECURITY_LEVEL_ANY: 'MOCK_SECURITY_LEVEL_ANY',
+  SECURITY_LEVEL_SECURE_SOFTWARE: 'MOCK_SECURITY_LEVEL_SECURE_SOFTWARE',
+  SECURITY_LEVEL_SECURE_HARDWARE: 'MOCK_SECURITY_LEVEL_SECURE_HARDWARE',
+};
 
-export default keychainMock;
+export default keychainMock;

__tests__/managers/ConnectionManager.test.js

@@ -1,11 +1,9 @@
-/* eslint-disable */
-
-import React from 'react';
 import ConnectionManager from '../../src/managers/ConnectionManager';
-import {ERROR_TYPE} from '../../src/utils/WebData';
+import { ERROR_TYPE } from '../../src/utils/WebData';
 
 jest.mock('react-native-keychain');
 
+// eslint-disable-next-line no-unused-vars
 const fetch = require('isomorphic-fetch'); // fetch is not implemented in nodeJS but in react-native
 
 const c = ConnectionManager.getInstance();
@@ -44,7 +42,7 @@ test('connect bad credentials', () => {
     });
   });
   return expect(c.connect('email', 'password')).rejects.toBe(
-    ERROR_TYPE.BAD_CREDENTIALS,
+    ERROR_TYPE.BAD_CREDENTIALS
   );
 });
 
@@ -54,7 +52,7 @@ test('connect good credentials', () => {
       json: () => {
         return {
           error: ERROR_TYPE.SUCCESS,
-          data: {token: 'token'},
+          data: { token: 'token' },
         };
       },
     });
@@ -79,7 +77,7 @@ test('connect good credentials no consent', () => {
     });
   });
   return expect(c.connect('email', 'password')).rejects.toBe(
-    ERROR_TYPE.NO_CONSENT,
+    ERROR_TYPE.NO_CONSENT
   );
 });
 
@@ -89,7 +87,7 @@ test('connect good credentials, fail save token', () => {
       json: () => {
         return {
           error: ERROR_TYPE.SUCCESS,
-          data: {token: 'token'},
+          data: { token: 'token' },
         };
       },
     });
@@ -100,7 +98,7 @@ test('connect good credentials, fail save token', () => {
       return Promise.reject(false);
     });
   return expect(c.connect('email', 'password')).rejects.toBe(
-    ERROR_TYPE.TOKEN_SAVE,
+    ERROR_TYPE.TOKEN_SAVE
   );
 });
 
@@ -109,7 +107,7 @@ test('connect connection error', () => {
     return Promise.reject();
   });
   return expect(c.connect('email', 'password')).rejects.toBe(
-    ERROR_TYPE.CONNECTION_ERROR,
+    ERROR_TYPE.CONNECTION_ERROR
   );
 });
 
@@ -125,7 +123,7 @@ test('connect bogus response 1', () => {
     });
   });
   return expect(c.connect('email', 'password')).rejects.toBe(
-    ERROR_TYPE.SERVER_ERROR,
+    ERROR_TYPE.SERVER_ERROR
   );
 });
 
@@ -140,14 +138,14 @@ test('authenticatedRequest success', () => {
       json: () => {
         return {
           error: ERROR_TYPE.SUCCESS,
-          data: {coucou: 'toi'},
+          data: { coucou: 'toi' },
         };
       },
     });
   });
   return expect(
-    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'),
-  ).resolves.toStrictEqual({coucou: 'toi'});
+    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check')
+  ).resolves.toStrictEqual({ coucou: 'toi' });
 });
 
 test('authenticatedRequest error wrong token', () => {
@@ -167,7 +165,7 @@ test('authenticatedRequest error wrong token', () => {
     });
   });
   return expect(
-    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'),
+    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check')
   ).rejects.toBe(ERROR_TYPE.BAD_TOKEN);
 });
 
@@ -187,7 +185,7 @@ test('authenticatedRequest error bogus response', () => {
     });
   });
   return expect(
-    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'),
+    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check')
   ).rejects.toBe(ERROR_TYPE.SERVER_ERROR);
 });
 
@@ -201,7 +199,7 @@ test('authenticatedRequest connection error', () => {
     return Promise.reject();
   });
   return expect(
-    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'),
+    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check')
   ).rejects.toBe(ERROR_TYPE.CONNECTION_ERROR);
 });
 
@@ -212,6 +210,6 @@ test('authenticatedRequest error no token', () => {
       return null;
     });
   return expect(
-    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'),
+    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check')
   ).rejects.toBe(ERROR_TYPE.TOKEN_RETRIEVE);
 });

__tests__/utils/EquipmentBooking.test.js

@@ -1,6 +1,3 @@
-/* eslint-disable */
-
-import React from 'react';
 import * as EquipmentBooking from '../../src/utils/EquipmentBooking';
 import i18n from 'i18n-js';
 
@@ -18,7 +15,7 @@ test('getCurrentDay', () => {
     .spyOn(Date, 'now')
     .mockImplementation(() => new Date('2020-01-14 14:50:35').getTime());
   expect(EquipmentBooking.getCurrentDay().getTime()).toBe(
-    new Date('2020-01-14').getTime(),
+    new Date('2020-01-14').getTime()
   );
 });
 
@@ -30,19 +27,19 @@ test('isEquipmentAvailable', () => {
     id: 1,
     name: 'Petit barbecue',
     caution: 100,
-    booked_at: [{begin: '2020-07-07', end: '2020-07-10'}],
+    booked_at: [{ begin: '2020-07-07', end: '2020-07-10' }],
   };
   expect(EquipmentBooking.isEquipmentAvailable(testDevice)).toBeFalse();
 
-  testDevice.booked_at = [{begin: '2020-07-07', end: '2020-07-09'}];
+  testDevice.booked_at = [{ begin: '2020-07-07', end: '2020-07-09' }];
   expect(EquipmentBooking.isEquipmentAvailable(testDevice)).toBeFalse();
 
-  testDevice.booked_at = [{begin: '2020-07-09', end: '2020-07-10'}];
+  testDevice.booked_at = [{ begin: '2020-07-09', end: '2020-07-10' }];
   expect(EquipmentBooking.isEquipmentAvailable(testDevice)).toBeFalse();
 
   testDevice.booked_at = [
-    {begin: '2020-07-07', end: '2020-07-8'},
-    {begin: '2020-07-10', end: '2020-07-12'},
+    { begin: '2020-07-07', end: '2020-07-8' },
+    { begin: '2020-07-10', end: '2020-07-12' },
   ];
   expect(EquipmentBooking.isEquipmentAvailable(testDevice)).toBeTrue();
 });
@@ -55,29 +52,29 @@ test('getFirstEquipmentAvailability', () => {
     id: 1,
     name: 'Petit barbecue',
     caution: 100,
-    booked_at: [{begin: '2020-07-07', end: '2020-07-10'}],
+    booked_at: [{ begin: '2020-07-07', end: '2020-07-10' }],
   };
   expect(
-    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime(),
+    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime()
   ).toBe(new Date('2020-07-11').getTime());
-  testDevice.booked_at = [{begin: '2020-07-07', end: '2020-07-09'}];
+  testDevice.booked_at = [{ begin: '2020-07-07', end: '2020-07-09' }];
   expect(
-    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime(),
+    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime()
   ).toBe(new Date('2020-07-10').getTime());
   testDevice.booked_at = [
-    {begin: '2020-07-07', end: '2020-07-09'},
-    {begin: '2020-07-10', end: '2020-07-16'},
+    { begin: '2020-07-07', end: '2020-07-09' },
+    { begin: '2020-07-10', end: '2020-07-16' },
   ];
   expect(
-    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime(),
+    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime()
   ).toBe(new Date('2020-07-17').getTime());
   testDevice.booked_at = [
-    {begin: '2020-07-07', end: '2020-07-09'},
-    {begin: '2020-07-10', end: '2020-07-12'},
-    {begin: '2020-07-14', end: '2020-07-16'},
+    { begin: '2020-07-07', end: '2020-07-09' },
+    { begin: '2020-07-10', end: '2020-07-12' },
+    { begin: '2020-07-14', end: '2020-07-16' },
   ];
   expect(
-    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime(),
+    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime()
   ).toBe(new Date('2020-07-13').getTime());
 });
 
@@ -85,7 +82,7 @@ test('getRelativeDateString', () => {
   jest
     .spyOn(Date, 'now')
     .mockImplementation(() => new Date('2020-07-09').getTime());
-  jest.spyOn(i18n, 't').mockImplementation((translationString: string) => {
+  jest.spyOn(i18n, 't').mockImplementation((translationString) => {
     const prefix = 'screens.equipment.';
     if (translationString === prefix + 'otherYear') return '0';
     else if (translationString === prefix + 'otherMonth') return '1';
@@ -95,25 +92,25 @@ test('getRelativeDateString', () => {
     else return null;
   });
   expect(EquipmentBooking.getRelativeDateString(new Date('2020-07-09'))).toBe(
-    '4',
+    '4'
   );
   expect(EquipmentBooking.getRelativeDateString(new Date('2020-07-10'))).toBe(
-    '3',
+    '3'
   );
   expect(EquipmentBooking.getRelativeDateString(new Date('2020-07-11'))).toBe(
-    '2',
+    '2'
   );
   expect(EquipmentBooking.getRelativeDateString(new Date('2020-07-30'))).toBe(
-    '2',
+    '2'
   );
   expect(EquipmentBooking.getRelativeDateString(new Date('2020-08-30'))).toBe(
-    '1',
+    '1'
   );
   expect(EquipmentBooking.getRelativeDateString(new Date('2020-11-10'))).toBe(
-    '1',
+    '1'
   );
   expect(EquipmentBooking.getRelativeDateString(new Date('2021-11-10'))).toBe(
-    '0',
+    '0'
   );
 });
 
@@ -122,7 +119,7 @@ test('getValidRange', () => {
     id: 1,
     name: 'Petit barbecue',
     caution: 100,
-    booked_at: [{begin: '2020-07-07', end: '2020-07-10'}],
+    booked_at: [{ begin: '2020-07-07', end: '2020-07-10' }],
   };
   let start = new Date('2020-07-11');
   let end = new Date('2020-07-15');
@@ -134,62 +131,62 @@ test('getValidRange', () => {
     '2020-07-15',
   ];
   expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(
-    result,
+    result
   );
   testDevice.booked_at = [
-    {begin: '2020-07-07', end: '2020-07-10'},
-    {begin: '2020-07-13', end: '2020-07-15'},
+    { begin: '2020-07-07', end: '2020-07-10' },
+    { begin: '2020-07-13', end: '2020-07-15' },
   ];
   result = ['2020-07-11', '2020-07-12'];
   expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(
-    result,
+    result
   );
 
-  testDevice.booked_at = [{begin: '2020-07-12', end: '2020-07-13'}];
+  testDevice.booked_at = [{ begin: '2020-07-12', end: '2020-07-13' }];
   result = ['2020-07-11'];
   expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(
-    result,
+    result
   );
-  testDevice.booked_at = [{begin: '2020-07-07', end: '2020-07-12'}];
+  testDevice.booked_at = [{ begin: '2020-07-07', end: '2020-07-12' }];
   result = ['2020-07-13', '2020-07-14', '2020-07-15'];
   expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(
-    result,
+    result
   );
   start = new Date('2020-07-14');
   end = new Date('2020-07-14');
   result = ['2020-07-14'];
   expect(
-    EquipmentBooking.getValidRange(start, start, testDevice),
+    EquipmentBooking.getValidRange(start, start, testDevice)
   ).toStrictEqual(result);
   expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(
-    result,
+    result
   );
   expect(EquipmentBooking.getValidRange(start, end, null)).toStrictEqual(
-    result,
+    result
   );
 
   start = new Date('2020-07-14');
   end = new Date('2020-07-17');
   result = ['2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17'];
   expect(EquipmentBooking.getValidRange(start, end, null)).toStrictEqual(
-    result,
+    result
   );
 
-  testDevice.booked_at = [{begin: '2020-07-17', end: '2020-07-17'}];
+  testDevice.booked_at = [{ begin: '2020-07-17', end: '2020-07-17' }];
   result = ['2020-07-14', '2020-07-15', '2020-07-16'];
   expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(
-    result,
+    result
   );
 
   testDevice.booked_at = [
-    {begin: '2020-07-12', end: '2020-07-13'},
-    {begin: '2020-07-15', end: '2020-07-20'},
+    { begin: '2020-07-12', end: '2020-07-13' },
+    { begin: '2020-07-15', end: '2020-07-20' },
   ];
   start = new Date('2020-07-11');
   end = new Date('2020-07-23');
   result = ['2020-07-21', '2020-07-22', '2020-07-23'];
   expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(
-    result,
+    result
   );
 });
 
@@ -205,7 +202,7 @@ test('generateMarkedDates', () => {
     id: 1,
     name: 'Petit barbecue',
     caution: 100,
-    booked_at: [{begin: '2020-07-07', end: '2020-07-10'}],
+    booked_at: [{ begin: '2020-07-07', end: '2020-07-10' }],
   };
   let start = new Date('2020-07-11');
   let end = new Date('2020-07-13');
@@ -228,7 +225,7 @@ test('generateMarkedDates', () => {
     },
   };
   expect(
-    EquipmentBooking.generateMarkedDates(true, theme, range),
+    EquipmentBooking.generateMarkedDates(true, theme, range)
   ).toStrictEqual(result);
   result = {
     '2020-07-11': {
@@ -248,7 +245,7 @@ test('generateMarkedDates', () => {
     },
   };
   expect(
-    EquipmentBooking.generateMarkedDates(false, theme, range),
+    EquipmentBooking.generateMarkedDates(false, theme, range)
   ).toStrictEqual(result);
   result = {
     '2020-07-11': {
@@ -269,10 +266,10 @@ test('generateMarkedDates', () => {
   };
   range = EquipmentBooking.getValidRange(end, start, testDevice);
   expect(
-    EquipmentBooking.generateMarkedDates(false, theme, range),
+    EquipmentBooking.generateMarkedDates(false, theme, range)
   ).toStrictEqual(result);
 
-  testDevice.booked_at = [{begin: '2020-07-13', end: '2020-07-15'}];
+  testDevice.booked_at = [{ begin: '2020-07-13', end: '2020-07-15' }];
   result = {
     '2020-07-11': {
       startingDay: true,
@@ -287,10 +284,10 @@ test('generateMarkedDates', () => {
   };
   range = EquipmentBooking.getValidRange(start, end, testDevice);
   expect(
-    EquipmentBooking.generateMarkedDates(true, theme, range),
+    EquipmentBooking.generateMarkedDates(true, theme, range)
   ).toStrictEqual(result);
 
-  testDevice.booked_at = [{begin: '2020-07-12', end: '2020-07-13'}];
+  testDevice.booked_at = [{ begin: '2020-07-12', end: '2020-07-13' }];
   result = {
     '2020-07-11': {
       startingDay: true,
@@ -300,12 +297,12 @@ test('generateMarkedDates', () => {
   };
   range = EquipmentBooking.getValidRange(start, end, testDevice);
   expect(
-    EquipmentBooking.generateMarkedDates(true, theme, range),
+    EquipmentBooking.generateMarkedDates(true, theme, range)
   ).toStrictEqual(result);
 
   testDevice.booked_at = [
-    {begin: '2020-07-12', end: '2020-07-13'},
-    {begin: '2020-07-15', end: '2020-07-20'},
+    { begin: '2020-07-12', end: '2020-07-13' },
+    { begin: '2020-07-15', end: '2020-07-20' },
   ];
   start = new Date('2020-07-11');
   end = new Date('2020-07-23');
@@ -318,7 +315,7 @@ test('generateMarkedDates', () => {
   };
   range = EquipmentBooking.getValidRange(start, end, testDevice);
   expect(
-    EquipmentBooking.generateMarkedDates(true, theme, range),
+    EquipmentBooking.generateMarkedDates(true, theme, range)
   ).toStrictEqual(result);
 
   result = {
@@ -340,6 +337,6 @@ test('generateMarkedDates', () => {
   };
   range = EquipmentBooking.getValidRange(end, start, testDevice);
   expect(
-    EquipmentBooking.generateMarkedDates(true, theme, range),
+    EquipmentBooking.generateMarkedDates(true, theme, range)
   ).toStrictEqual(result);
 });

__tests__/utils/PlanningEventManager.test.js

@@ -1,6 +1,3 @@
-/* eslint-disable */
-
-import React from 'react';
 import * as Planning from '../../src/utils/Planning';
 
 test('isDescriptionEmpty', () => {
@@ -24,7 +21,7 @@ test('isEventDateStringFormatValid', () => {
   expect(Planning.isEventDateStringFormatValid('3214-64-12 01:16')).toBeTrue();
 
   expect(
-    Planning.isEventDateStringFormatValid('3214-64-12 01:16:00'),
+    Planning.isEventDateStringFormatValid('3214-64-12 01:16:00')
   ).toBeFalse();
   expect(Planning.isEventDateStringFormatValid('3214-64-12 1:16')).toBeFalse();
   expect(Planning.isEventDateStringFormatValid('3214-f4-12 01:16')).toBeFalse();
@@ -32,7 +29,7 @@ test('isEventDateStringFormatValid', () => {
   expect(Planning.isEventDateStringFormatValid('2020-03-21')).toBeFalse();
   expect(Planning.isEventDateStringFormatValid('2020-03-21 truc')).toBeFalse();
   expect(
-    Planning.isEventDateStringFormatValid('3214-64-12 1:16:65'),
+    Planning.isEventDateStringFormatValid('3214-64-12 1:16:65')
   ).toBeFalse();
   expect(Planning.isEventDateStringFormatValid('garbage')).toBeFalse();
   expect(Planning.isEventDateStringFormatValid('')).toBeFalse();
@@ -65,17 +62,17 @@ test('getFormattedEventTime', () => {
   expect(Planning.getFormattedEventTime(undefined, undefined)).toBe('/ - /');
   expect(Planning.getFormattedEventTime('20:30', '23:00')).toBe('/ - /');
   expect(Planning.getFormattedEventTime('2020-03-30', '2020-03-31')).toBe(
-    '/ - /',
+    '/ - /'
   );
 
   expect(
-    Planning.getFormattedEventTime('2020-03-21 09:00', '2020-03-21 09:00'),
+    Planning.getFormattedEventTime('2020-03-21 09:00', '2020-03-21 09:00')
   ).toBe('09:00');
   expect(
-    Planning.getFormattedEventTime('2020-03-21 09:00', '2020-03-22 17:00'),
+    Planning.getFormattedEventTime('2020-03-21 09:00', '2020-03-22 17:00')
   ).toBe('09:00 - 23:59');
   expect(
-    Planning.getFormattedEventTime('2020-03-30 20:30', '2020-03-30 23:00'),
+    Planning.getFormattedEventTime('2020-03-30 20:30', '2020-03-30 23:00')
   ).toBe('20:30 - 23:00');
 });
 
@@ -90,38 +87,38 @@ test('getDateOnlyString', () => {
 
 test('isEventBefore', () => {
   expect(
-    Planning.isEventBefore('2020-03-21 09:00', '2020-03-21 10:00'),
+    Planning.isEventBefore('2020-03-21 09:00', '2020-03-21 10:00')
   ).toBeTrue();
   expect(
-    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 10:15'),
+    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 10:15')
   ).toBeTrue();
   expect(
-    Planning.isEventBefore('2020-03-21 10:15', '2021-03-21 10:15'),
+    Planning.isEventBefore('2020-03-21 10:15', '2021-03-21 10:15')
   ).toBeTrue();
   expect(
-    Planning.isEventBefore('2020-03-21 10:15', '2020-05-21 10:15'),
+    Planning.isEventBefore('2020-03-21 10:15', '2020-05-21 10:15')
   ).toBeTrue();
   expect(
-    Planning.isEventBefore('2020-03-21 10:15', '2020-03-30 10:15'),
+    Planning.isEventBefore('2020-03-21 10:15', '2020-03-30 10:15')
   ).toBeTrue();
 
   expect(
-    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 10:00'),
+    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 10:00')
   ).toBeFalse();
   expect(
-    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 09:00'),
+    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 09:00')
   ).toBeFalse();
   expect(
-    Planning.isEventBefore('2020-03-21 10:15', '2020-03-21 10:00'),
+    Planning.isEventBefore('2020-03-21 10:15', '2020-03-21 10:00')
   ).toBeFalse();
   expect(
-    Planning.isEventBefore('2021-03-21 10:15', '2020-03-21 10:15'),
+    Planning.isEventBefore('2021-03-21 10:15', '2020-03-21 10:15')
   ).toBeFalse();
   expect(
-    Planning.isEventBefore('2020-05-21 10:15', '2020-03-21 10:15'),
+    Planning.isEventBefore('2020-05-21 10:15', '2020-03-21 10:15')
   ).toBeFalse();
   expect(
-    Planning.isEventBefore('2020-03-30 10:15', '2020-03-21 10:15'),
+    Planning.isEventBefore('2020-03-30 10:15', '2020-03-21 10:15')
   ).toBeFalse();
 
   expect(Planning.isEventBefore('garbage', '2020-03-21 10:15')).toBeFalse();
@@ -162,25 +159,25 @@ test('generateEmptyCalendar', () => {
 
 test('pushEventInOrder', () => {
   let eventArray = [];
-  let event1 = {date_begin: '2020-01-14 09:15'};
+  let event1 = { date_begin: '2020-01-14 09:15' };
   Planning.pushEventInOrder(eventArray, event1);
   expect(eventArray.length).toBe(1);
   expect(eventArray[0]).toBe(event1);
 
-  let event2 = {date_begin: '2020-01-14 10:15'};
+  let event2 = { date_begin: '2020-01-14 10:15' };
   Planning.pushEventInOrder(eventArray, event2);
   expect(eventArray.length).toBe(2);
   expect(eventArray[0]).toBe(event1);
   expect(eventArray[1]).toBe(event2);
 
-  let event3 = {date_begin: '2020-01-14 10:15', title: 'garbage'};
+  let event3 = { date_begin: '2020-01-14 10:15', title: 'garbage' };
   Planning.pushEventInOrder(eventArray, event3);
   expect(eventArray.length).toBe(3);
   expect(eventArray[0]).toBe(event1);
   expect(eventArray[1]).toBe(event2);
   expect(eventArray[2]).toBe(event3);
 
-  let event4 = {date_begin: '2020-01-13 09:00'};
+  let event4 = { date_begin: '2020-01-13 09:00' };
   Planning.pushEventInOrder(eventArray, event4);
   expect(eventArray.length).toBe(4);
   expect(eventArray[0]).toBe(event4);
@@ -194,11 +191,11 @@ test('generateEventAgenda', () => {
     .spyOn(Date, 'now')
     .mockImplementation(() => new Date('2020-01-14T00:00:00.000Z').getTime());
   let eventList = [
-    {date_begin: '2020-01-14 09:15'},
-    {date_begin: '2020-02-01 09:15'},
-    {date_begin: '2020-01-15 09:15'},
-    {date_begin: '2020-02-01 09:30'},
-    {date_begin: '2020-02-01 08:30'},
+    { date_begin: '2020-01-14 09:15' },
+    { date_begin: '2020-02-01 09:15' },
+    { date_begin: '2020-01-15 09:15' },
+    { date_begin: '2020-02-01 09:30' },
+    { date_begin: '2020-02-01 08:30' },
   ];
   const calendar = Planning.generateEventAgenda(eventList, 2);
   expect(calendar['2020-01-14'].length).toBe(1);

__tests__/utils/Proxiwash.test.js

@@ -1,6 +1,3 @@
-/* eslint-disable */
-
-import React from 'react';
 import {
   getCleanedMachineWatched,
   getMachineEndDate,
@@ -15,19 +12,19 @@ test('getMachineEndDate', () => {
   let expectDate = new Date('2020-01-14T15:00:00.000Z');
   expectDate.setHours(23);
   expectDate.setMinutes(10);
-  expect(getMachineEndDate({endTime: '23:10'}).getTime()).toBe(
-    expectDate.getTime(),
+  expect(getMachineEndDate({ endTime: '23:10' }).getTime()).toBe(
+    expectDate.getTime()
   );
 
   expectDate.setHours(16);
   expectDate.setMinutes(30);
-  expect(getMachineEndDate({endTime: '16:30'}).getTime()).toBe(
-    expectDate.getTime(),
+  expect(getMachineEndDate({ endTime: '16:30' }).getTime()).toBe(
+    expectDate.getTime()
   );
 
-  expect(getMachineEndDate({endTime: '15:30'})).toBeNull();
+  expect(getMachineEndDate({ endTime: '15:30' })).toBeNull();
 
-  expect(getMachineEndDate({endTime: '13:10'})).toBeNull();
+  expect(getMachineEndDate({ endTime: '13:10' })).toBeNull();
 
   jest
     .spyOn(Date, 'now')
@@ -35,8 +32,8 @@ test('getMachineEndDate', () => {
   expectDate = new Date('2020-01-14T23:00:00.000Z');
   expectDate.setHours(0);
   expectDate.setMinutes(30);
-  expect(getMachineEndDate({endTime: '00:30'}).getTime()).toBe(
-    expectDate.getTime(),
+  expect(getMachineEndDate({ endTime: '00:30' }).getTime()).toBe(
+    expectDate.getTime()
   );
 });
 
@@ -52,16 +49,16 @@ test('isMachineWatched', () => {
     },
   ];
   expect(
-    isMachineWatched({number: '0', endTime: '23:30'}, machineList),
+    isMachineWatched({ number: '0', endTime: '23:30' }, machineList)
   ).toBeTrue();
   expect(
-    isMachineWatched({number: '1', endTime: '20:30'}, machineList),
+    isMachineWatched({ number: '1', endTime: '20:30' }, machineList)
   ).toBeTrue();
   expect(
-    isMachineWatched({number: '3', endTime: '20:30'}, machineList),
+    isMachineWatched({ number: '3', endTime: '20:30' }, machineList)
   ).toBeFalse();
   expect(
-    isMachineWatched({number: '1', endTime: '23:30'}, machineList),
+    isMachineWatched({ number: '1', endTime: '23:30' }, machineList)
   ).toBeFalse();
 });
 
@@ -74,8 +71,8 @@ test('getMachineOfId', () => {
       number: '1',
     },
   ];
-  expect(getMachineOfId('0', machineList)).toStrictEqual({number: '0'});
-  expect(getMachineOfId('1', machineList)).toStrictEqual({number: '1'});
+  expect(getMachineOfId('0', machineList)).toStrictEqual({ number: '0' });
+  expect(getMachineOfId('1', machineList)).toStrictEqual({ number: '1' });
   expect(getMachineOfId('3', machineList)).toBeNull();
 });
 
@@ -110,7 +107,7 @@ test('getCleanedMachineWatched', () => {
   ];
   let cleanedList = watchList;
   expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(
-    cleanedList,
+    cleanedList
   );
 
   watchList = [
@@ -138,7 +135,7 @@ test('getCleanedMachineWatched', () => {
     },
   ];
   expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(
-    cleanedList,
+    cleanedList
   );
 
   watchList = [
@@ -162,6 +159,6 @@ test('getCleanedMachineWatched', () => {
     },
   ];
   expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(
-    cleanedList,
+    cleanedList
   );
 });

__tests__/utils/WebData.test.js

@@ -1,8 +1,6 @@
-/* eslint-disable */
-
-import React from 'react';
-import {isApiResponseValid} from '../../src/utils/WebData';
+import { isApiResponseValid } from '../../src/utils/WebData';
 
+// eslint-disable-next-line no-unused-vars
 const fetch = require('isomorphic-fetch'); // fetch is not implemented in nodeJS but in react-native
 
 test('isRequestResponseValid', () => {
@@ -23,7 +21,7 @@ test('isRequestResponseValid', () => {
   expect(isApiResponseValid(json)).toBeTrue();
   json = {
     error: 50,
-    data: {truc: 'machin'},
+    data: { truc: 'machin' },
   };
   expect(isApiResponseValid(json)).toBeTrue();
   json = {
@@ -32,7 +30,7 @@ test('isRequestResponseValid', () => {
   expect(isApiResponseValid(json)).toBeFalse();
   json = {
     error: 'coucou',
-    data: {truc: 'machin'},
+    data: { truc: 'machin' },
   };
   expect(isApiResponseValid(json)).toBeFalse();
   json = {

clear-node-cache.sh

@@ -1,18 +0,0 @@
-#!/bin/bash
-
-echo "Removing node_modules..."
-rm -rf node_modules/
-echo -e "Done\n"
-
-echo "Removing locks..."
-rm -f package-lock.json && rm -f yarn.lock
-echo -e "Done\n"
-
-#echo "Verifying npm cache..."
-#npm cache verify
-#echo -e "Done\n"
-
-echo "Installing dependencies..."
-npm install
-echo -e "Done\n"
-

index.js

@@ -21,9 +21,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
-// eslint-disable-next-line flowtype/require-return-type
 AppRegistry.registerComponent(appName, () => App);

metro.config.js

@@ -7,11 +7,10 @@
 
 module.exports = {
   transformer: {
-    // eslint-disable-next-line flowtype/require-return-type
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
-        inlineRequires: false,
+        inlineRequires: true,
       },
     }),
   },

package.json

@@ -3,12 +3,113 @@
   "version": "4.1.0",
   "private": true,
   "scripts": {
-    "start": "react-native start",
     "android": "react-native run-android",
     "android-release": "react-native run-android --variant=release",
     "ios": "react-native run-ios",
+    "start": "react-native start",
+    "start-no-cache": "react-native start --reset-cache",
     "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "typescript": "tsc --noEmit",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "full-check": "npm run typescript && npm run lint && npm run test",
+    "pod": "cd ios && pod install && cd ..",
+    "bundle": "npm run full-check && cd android && ./gradlew bundleRelease",
+    "postversion": "react-native-version"
+  },
+  "dependencies": {
+    "@nartc/react-native-barcode-mask": "1.2.0",
+    "@react-native-community/async-storage": "1.12.0",
+    "@react-native-community/masked-view": "0.1.10",
+    "@react-native-community/push-notification-ios": "1.5.0",
+    "@react-native-community/slider": "3.0.3",
+    "@react-navigation/bottom-tabs": "5.8.0",
+    "@react-navigation/native": "5.7.3",
+    "@react-navigation/stack": "5.9.0",
+    "i18n-js": "3.7.1",
+    "react": "16.13.1",
+    "react-native": "0.63.2",
+    "react-native-animatable": "1.3.3",
+    "react-native-app-intro-slider": "4.0.4",
+    "react-native-appearance": "0.3.4",
+    "react-native-autolink": "3.0.0",
+    "react-native-calendars": "1.403.0",
+    "react-native-camera": "3.40.0",
+    "react-native-collapsible": "1.5.3",
+    "react-native-gesture-handler": "1.8.0",
+    "react-native-image-zoom-viewer": "3.0.1",
+    "react-native-keychain": "4.0.5",
+    "react-native-linear-gradient": "2.5.6",
+    "react-native-localize": "1.4.1",
+    "react-native-modalize": "2.0.6",
+    "react-native-paper": "4.2.0",
+    "react-native-permissions": "2.2.1",
+    "react-native-push-notification": "5.1.1",
+    "react-native-reanimated": "1.13.0",
+    "react-native-render-html": "4.2.3",
+    "react-native-safe-area-context": "3.1.8",
+    "react-native-screens": "2.11.0",
+    "react-native-splash-screen": "3.2.0",
+    "react-native-vector-icons": "7.1.0",
+    "react-native-webview": "10.9.0",
+    "react-navigation-collapsible": "5.6.4",
+    "react-navigation-header-buttons": "5.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "7.11.0",
+    "@babel/runtime": "7.11.0",
+    "@react-native-community/eslint-config": "1.1.0",
+    "@types/i18n-js": "3.0.3",
+    "@types/jest": "25.2.3",
+    "@types/react-native": "0.63.2",
+    "@types/react-native-calendars": "1.20.10",
+    "@types/react-native-vector-icons": "6.4.6",
+    "@types/react-test-renderer": "16.9.2",
+    "@typescript-eslint/eslint-plugin": "2.27.0",
+    "@typescript-eslint/parser": "2.27.0",
+    "babel-jest": "25.1.0",
+    "eslint": "7.2.0",
+    "jest": "25.1.0",
+    "jest-extended": "0.11.5",
+    "jest-fetch-mock": "3.0.3",
+    "metro-react-native-babel-preset": "0.59.0",
+    "prettier": "2.0.5",
+    "react-native-version": "4.0.0",
+    "react-test-renderer": "16.13.1",
+    "typescript": "3.8.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
   },
   "jest": {
     "preset": "react-native",
@@ -23,71 +124,5 @@
     "setupFilesAfterEnv": [
       "jest-extended"
     ]
-  },
-  "dependencies": {
-    "@nartc/react-native-barcode-mask": "^1.2.0",
-    "@react-native-community/async-storage": "^1.12.0",
-    "@react-native-community/masked-view": "^0.1.10",
-    "@react-native-community/push-notification-ios": "^1.5.0",
-    "@react-native-community/slider": "^3.0.3",
-    "@react-navigation/bottom-tabs": "^5.8.0",
-    "@react-navigation/native": "^5.7.3",
-    "@react-navigation/stack": "^5.9.0",
-    "i18n-js": "^3.7.1",
-    "react": "16.13.1",
-    "react-native": "0.63.2",
-    "react-native-animatable": "^1.3.3",
-    "react-native-app-intro-slider": "^4.0.4",
-    "react-native-appearance": "^0.3.4",
-    "react-native-autolink": "^3.0.0",
-    "react-native-calendars": "^1.403.0",
-    "react-native-camera": "^3.40.0",
-    "react-native-collapsible": "^1.5.3",
-    "react-native-gesture-handler": "^1.8.0",
-    "react-native-image-zoom-viewer": "^3.0.1",
-    "react-native-keychain": "4.0.5",
-    "react-native-linear-gradient": "^2.5.6",
-    "react-native-localize": "^1.4.1",
-    "react-native-modalize": "^2.0.6",
-    "react-native-paper": "^4.2.0",
-    "react-native-permissions": "^2.2.1",
-    "react-native-push-notification": "^5.1.1",
-    "react-native-reanimated": "^1.13.0",
-    "react-native-render-html": "^4.2.3",
-    "react-native-safe-area-context": "^3.1.8",
-    "react-native-screens": "^2.11.0",
-    "react-native-splash-screen": "^3.2.0",
-    "react-native-vector-icons": "^7.1.0",
-    "react-native-webview": "^10.9.0",
-    "react-navigation-collapsible": "^5.6.4",
-    "react-navigation-header-buttons": "^5.0.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.0",
-    "@babel/runtime": "^7.11.0",
-    "@react-native-community/eslint-config": "^1.1.0",
-    "@types/i18n-js": "^3.0.3",
-    "@types/jest": "^25.2.3",
-    "@types/react-native": "^0.63.2",
-    "@types/react-native-calendars": "^1.20.10",
-    "@types/react-native-vector-icons": "^6.4.6",
-    "@types/react-test-renderer": "^16.9.2",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
-    "babel-jest": "^25.1.0",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.5",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "jest": "^25.1.0",
-    "jest-extended": "^0.11.5",
-    "metro-react-native-babel-preset": "^0.59.0",
-    "prettier": "2.0.5",
-    "react-test-renderer": "16.13.1",
-    "typescript": "^3.8.3"
   }
 }

src/components/Amicale/AuthenticatedScreen.tsx

@@ -18,9 +18,9 @@
  */
 
 import * as React from 'react';
-import {StackNavigationProp} from '@react-navigation/stack';
+import { StackNavigationProp } from '@react-navigation/stack';
 import ConnectionManager from '../../managers/ConnectionManager';
-import {ERROR_TYPE} from '../../utils/WebData';
+import { ERROR_TYPE } from '../../utils/WebData';
 import ErrorView from '../Screens/ErrorView';
 import BasicLoadingScreen from '../Screens/BasicLoadingScreen';
 
@@ -90,7 +90,7 @@ class AuthenticatedScreen<T> extends React.Component<PropsType<T>, StateType> {
    * @param error The error code received
    */
   onRequestFinished(data: T | null, index: number, error?: number) {
-    const {props} = this;
+    const { props } = this;
     if (index >= 0 && index < props.requests.length) {
       this.fetchedData[index] = data;
       this.errors[index] = error != null ? error : ERROR_TYPE.SUCCESS;
@@ -101,7 +101,7 @@ class AuthenticatedScreen<T> extends React.Component<PropsType<T>, StateType> {
     }
 
     if (this.allRequestsFinished()) {
-      this.setState({loading: false});
+      this.setState({ loading: false });
     }
   }
 
@@ -113,7 +113,7 @@ class AuthenticatedScreen<T> extends React.Component<PropsType<T>, StateType> {
    * @return {number} The error code or ERROR_TYPE.SUCCESS if no error was found
    */
   getError(): number {
-    const {props} = this;
+    const { props } = this;
     for (let i = 0; i < this.errors.length; i += 1) {
       if (
         this.errors[i] !== ERROR_TYPE.SUCCESS &&
@@ -131,7 +131,7 @@ class AuthenticatedScreen<T> extends React.Component<PropsType<T>, StateType> {
    * @return {*}
    */
   getErrorRender() {
-    const {props} = this;
+    const { props } = this;
     const errorCode = this.getError();
     let shouldOverride = false;
     let override = null;
@@ -166,9 +166,9 @@ class AuthenticatedScreen<T> extends React.Component<PropsType<T>, StateType> {
    * If the user is logged in, send all requests.
    */
   fetchData = () => {
-    const {state, props} = this;
+    const { state, props } = this;
     if (!state.loading) {
-      this.setState({loading: true});
+      this.setState({ loading: true });
     }
 
     if (this.connectionManager.isLoggedIn()) {
@@ -176,11 +176,11 @@ class AuthenticatedScreen<T> extends React.Component<PropsType<T>, StateType> {
         this.connectionManager
           .authenticatedRequest<T>(
             props.requests[i].link,
-            props.requests[i].params,
+            props.requests[i].params
           )
           .then((response: T): void => this.onRequestFinished(response, i))
           .catch((error: number): void =>
-            this.onRequestFinished(null, i, error),
+            this.onRequestFinished(null, i, error)
           );
       }
     } else {
@@ -213,7 +213,7 @@ class AuthenticatedScreen<T> extends React.Component<PropsType<T>, StateType> {
   }
 
   render() {
-    const {state, props} = this;
+    const { state, props } = this;
     if (state.loading) {
       return <BasicLoadingScreen />;
     }

src/components/Amicale/LogoutDialog.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 import i18n from 'i18n-js';
 import LoadingConfirmDialog from '../Dialogs/LoadingConfirmDialog';
 import ConnectionManager from '../../managers/ConnectionManager';
-import {useNavigation} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 
 type PropsType = {
   visible: boolean;
@@ -37,7 +37,7 @@ function LogoutDialog(props: PropsType) {
         .then(() => {
           navigation.reset({
             index: 0,
-            routes: [{name: 'main'}],
+            routes: [{ name: 'main' }],
           });
           props.onDismiss();
           resolve();

src/components/Amicale/Vote/VoteNotAvailable.tsx

@@ -18,24 +18,31 @@
  */
 
 import React from 'react';
-import {View} from 'react-native';
-import {Headline, useTheme} from 'react-native-paper';
+import { StyleSheet, View } from 'react-native';
+import { Headline, useTheme } from 'react-native-paper';
 import i18n from 'i18n-js';
 
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  headline: {
+    textAlign: 'center',
+  },
+});
+
 function VoteNotAvailable() {
   const theme = useTheme();
   return (
-    <View
-      style={{
-        width: '100%',
-        marginTop: 10,
-        marginBottom: 10,
-      }}>
+    <View style={styles.container}>
       <Headline
         style={{
           color: theme.colors.textDisabled,
-          textAlign: 'center',
-        }}>
+          ...styles.headline,
+        }}
+      >
         {i18n.t('screens.vote.noVote')}
       </Headline>
     </View>

src/components/Amicale/Vote/VoteResults.tsx

@@ -26,9 +26,9 @@ import {
   Subheading,
   withTheme,
 } from 'react-native-paper';
-import {FlatList, StyleSheet} from 'react-native';
+import { FlatList, StyleSheet } from 'react-native';
 import i18n from 'i18n-js';
-import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
+import type { VoteTeamType } from '../../../screens/Amicale/VoteScreen';
 
 type PropsType = {
   teams: Array<VoteTeamType>;
@@ -40,8 +40,11 @@ const styles = StyleSheet.create({
   card: {
     margin: 10,
   },
-  icon: {
-    backgroundColor: 'transparent',
+  itemCard: {
+    marginTop: 10,
+  },
+  item: {
+    padding: 0,
   },
 });
 
@@ -86,16 +89,18 @@ class VoteResults extends React.Component<PropsType> {
 
   voteKeyExtractor = (item: VoteTeamType): string => item.id.toString();
 
-  resultRenderItem = ({item}: {item: VoteTeamType}) => {
+  resultRenderItem = ({ item }: { item: VoteTeamType }) => {
     const isWinner = this.winnerIds.indexOf(item.id) !== -1;
     const isDraw = this.winnerIds.length > 1;
-    const {props} = this;
+    const { props } = this;
+    const elevation = isWinner ? 5 : 3;
     return (
       <Card
         style={{
-          marginTop: 10,
-          elevation: isWinner ? 5 : 3,
-        }}>
+          ...styles.itemCard,
+          elevation: elevation,
+        }}
+      >
         <List.Item
           title={item.name}
           description={`${item.votes} ${i18n.t('screens.vote.results.votes')}`}
@@ -113,7 +118,7 @@ class VoteResults extends React.Component<PropsType> {
               ? props.theme.colors.primary
               : props.theme.colors.text,
           }}
-          style={{padding: 0}}
+          style={styles.item}
         />
         <ProgressBar
           progress={item.votes / this.totalVotes}
@@ -124,7 +129,7 @@ class VoteResults extends React.Component<PropsType> {
   };
 
   render() {
-    const {props} = this;
+    const { props } = this;
     return (
       <Card style={styles.card}>
         <Card.Title

src/components/Amicale/Vote/VoteSelect.tsx

@@ -18,13 +18,13 @@
  */
 
 import * as React from 'react';
-import {Avatar, Button, Card, RadioButton} from 'react-native-paper';
-import {FlatList, StyleSheet, View} from 'react-native';
+import { Avatar, Button, Card, RadioButton } from 'react-native-paper';
+import { FlatList, StyleSheet, View } from 'react-native';
 import i18n from 'i18n-js';
 import ConnectionManager from '../../../managers/ConnectionManager';
 import LoadingConfirmDialog from '../../Dialogs/LoadingConfirmDialog';
 import ErrorDialog from '../../Dialogs/ErrorDialog';
-import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
+import type { VoteTeamType } from '../../../screens/Amicale/VoteScreen';
 
 type PropsType = {
   teams: Array<VoteTeamType>;
@@ -43,8 +43,8 @@ const styles = StyleSheet.create({
   card: {
     margin: 10,
   },
-  icon: {
-    backgroundColor: 'transparent',
+  button: {
+    marginLeft: 'auto',
   },
 });
 
@@ -63,28 +63,28 @@ export default class VoteSelect extends React.PureComponent<
   }
 
   onVoteSelectionChange = (teamName: string): void =>
-    this.setState({selectedTeam: teamName});
+    this.setState({ selectedTeam: teamName });
 
   voteKeyExtractor = (item: VoteTeamType): string => item.id.toString();
 
-  voteRenderItem = ({item}: {item: VoteTeamType}) => (
+  voteRenderItem = ({ item }: { item: VoteTeamType }) => (
     <RadioButton.Item label={item.name} value={item.id.toString()} />
   );
 
-  showVoteDialog = (): void => this.setState({voteDialogVisible: true});
+  showVoteDialog = (): void => this.setState({ voteDialogVisible: true });
 
-  onVoteDialogDismiss = (): void => this.setState({voteDialogVisible: false});
+  onVoteDialogDismiss = (): void => this.setState({ voteDialogVisible: false });
 
   onVoteDialogAccept = async (): Promise<void> => {
     return new Promise((resolve: () => void) => {
-      const {state} = this;
+      const { state } = this;
       ConnectionManager.getInstance()
         .authenticatedRequest('elections/vote', {
           team: parseInt(state.selectedTeam, 10),
         })
         .then(() => {
           this.onVoteDialogDismiss();
-          const {props} = this;
+          const { props } = this;
           props.onVoteSuccess();
           resolve();
         })
@@ -103,13 +103,13 @@ export default class VoteSelect extends React.PureComponent<
     });
 
   onErrorDialogDismiss = () => {
-    this.setState({errorDialogVisible: false});
-    const {props} = this;
+    this.setState({ errorDialogVisible: false });
+    const { props } = this;
     props.onVoteError();
   };
 
   render() {
-    const {state, props} = this;
+    const { state, props } = this;
     return (
       <View>
         <Card style={styles.card}>
@@ -123,7 +123,8 @@ export default class VoteSelect extends React.PureComponent<
           <Card.Content>
             <RadioButton.Group
               onValueChange={this.onVoteSelectionChange}
-              value={state.selectedTeam}>
+              value={state.selectedTeam}
+            >
               <FlatList
                 data={props.teams}
                 keyExtractor={this.voteKeyExtractor}
@@ -137,8 +138,9 @@ export default class VoteSelect extends React.PureComponent<
               icon="send"
               mode="contained"
               onPress={this.showVoteDialog}
-              style={{marginLeft: 'auto'}}
-              disabled={state.selectedTeam === 'none'}>
+              style={styles.button}
+              disabled={state.selectedTeam === 'none'}
+            >
               {i18n.t('screens.vote.select.sendButton')}
             </Button>
           </Card.Actions>

src/components/Amicale/Vote/VoteTease.tsx

@@ -18,8 +18,8 @@
  */
 
 import * as React from 'react';
-import {Avatar, Card, Paragraph} from 'react-native-paper';
-import {StyleSheet} from 'react-native';
+import { Avatar, Card, Paragraph } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
 import i18n from 'i18n-js';
 
 type PropsType = {
@@ -30,9 +30,6 @@ const styles = StyleSheet.create({
   card: {
     margin: 10,
   },
-  icon: {
-    backgroundColor: 'transparent',
-  },
 });
 
 export default function VoteTease(props: PropsType) {

src/components/Amicale/Vote/VoteWait.tsx

@@ -18,8 +18,8 @@
  */
 
 import * as React from 'react';
-import {Avatar, Card, Paragraph, useTheme} from 'react-native-paper';
-import {StyleSheet} from 'react-native';
+import { Avatar, Card, Paragraph, useTheme } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
 import i18n from 'i18n-js';
 
 type PropsType = {
@@ -33,14 +33,11 @@ const styles = StyleSheet.create({
   card: {
     margin: 10,
   },
-  icon: {
-    backgroundColor: 'transparent',
-  },
 });
 
 export default function VoteWait(props: PropsType) {
   const theme = useTheme();
-  const {startDate} = props;
+  const { startDate } = props;
   return (
     <Card style={styles.card}>
       <Card.Title
@@ -56,12 +53,12 @@ export default function VoteWait(props: PropsType) {
       />
       <Card.Content>
         {props.justVoted ? (
-          <Paragraph style={{color: theme.colors.success}}>
+          <Paragraph style={{ color: theme.colors.success }}>
             {i18n.t('screens.vote.wait.messageSubmitted')}
           </Paragraph>
         ) : null}
         {props.hasVoted ? (
-          <Paragraph style={{color: theme.colors.success}}>
+          <Paragraph style={{ color: theme.colors.success }}>
             {i18n.t('screens.vote.wait.messageVoted')}
           </Paragraph>
         ) : null}

src/components/Animations/AnimatedAccordion.tsx

@@ -18,8 +18,8 @@
  */
 
 import * as React from 'react';
-import {View, ViewStyle} from 'react-native';
-import {List, withTheme} from 'react-native-paper';
+import { View, ViewStyle } from 'react-native';
+import { List, withTheme } from 'react-native-paper';
 import Collapsible from 'react-native-collapsible';
 import * as Animatable from 'react-native-animatable';
 
@@ -47,7 +47,7 @@ type StateType = {
 const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
 
 class AnimatedAccordion extends React.Component<PropsType, StateType> {
-  chevronRef: {current: null | (typeof AnimatedListIcon & List.Icon)};
+  chevronRef: { current: null | (typeof AnimatedListIcon & List.Icon) };
 
   chevronIcon: string;
 
@@ -68,7 +68,7 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
   }
 
   shouldComponentUpdate(nextProps: PropsType): boolean {
-    const {state, props} = this;
+    const { state, props } = this;
     if (nextProps.opened != null && nextProps.opened !== props.opened) {
       state.expanded = nextProps.opened;
     }
@@ -76,7 +76,7 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
   }
 
   setupChevron() {
-    const {expanded} = this.state;
+    const { expanded } = this.state;
     if (expanded) {
       this.chevronIcon = 'chevron-up';
       this.animStart = '180deg';
@@ -89,26 +89,26 @@ class AnimatedAccordion extends React.Component<PropsType, StateType> {
   }
 
   toggleAccordion = () => {
-    const {expanded} = this.state;
+    const { expanded } = this.state;
     if (this.chevronRef.current != null) {
       this.chevronRef.current.transitionTo({
         rotate: expanded ? this.animStart : this.animEnd,
       });
-      this.setState((prevState: StateType): {expanded: boolean} => ({
+      this.setState((prevState: StateType): { expanded: boolean } => ({
         expanded: !prevState.expanded,
       }));
     }
   };
 
   render() {
-    const {props, state} = this;
-    const {colors} = props.theme;
+    const { props, state } = this;
+    const { colors } = props.theme;
     return (
       <View style={props.style}>
         <List.Item
           title={props.title}
           description={props.subtitle}
-          titleStyle={state.expanded ? {color: colors.primary} : null}
+          titleStyle={state.expanded ? { color: colors.primary } : null}
           onPress={this.toggleAccordion}
           right={(iconProps) => (
             <AnimatedListIcon

src/components/Animations/AnimatedBottomBar.tsx

@@ -24,9 +24,9 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {FAB, IconButton, Surface, withTheme} from 'react-native-paper';
+import { FAB, IconButton, Surface, withTheme } from 'react-native-paper';
 import * as Animatable from 'react-native-animatable';
-import {StackNavigationProp} from '@react-navigation/stack';
+import { StackNavigationProp } from '@react-navigation/stack';
 import AutoHideHandler from '../../utils/AutoHideHandler';
 import CustomTabBar from '../Tabbar/CustomTabBar';
 
@@ -76,14 +76,20 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     top: '-25%',
   },
+  side: {
+    flexDirection: 'row',
+  },
+  icon: {
+    marginLeft: 5,
+  },
 });
 
 class AnimatedBottomBar extends React.Component<PropsType, StateType> {
-  ref: {current: null | (Animatable.View & View)};
+  ref: { current: null | (Animatable.View & View) };
 
   hideHandler: AutoHideHandler;
 
-  displayModeIcons: {[key: string]: string};
+  displayModeIcons: { [key: string]: string };
 
   constructor(props: PropsType) {
     super(props);
@@ -101,7 +107,7 @@ class AnimatedBottomBar extends React.Component<PropsType, StateType> {
   }
 
   shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
-    const {props, state} = this;
+    const { props, state } = this;
     return (
       nextProps.seekAttention !== props.seekAttention ||
       nextState.currentMode !== state.currentMode
@@ -124,7 +130,7 @@ class AnimatedBottomBar extends React.Component<PropsType, StateType> {
   };
 
   changeDisplayMode = () => {
-    const {props, state} = this;
+    const { props, state } = this;
     let newMode;
     switch (state.currentMode) {
       case DISPLAY_MODES.DAY:
@@ -140,12 +146,12 @@ class AnimatedBottomBar extends React.Component<PropsType, StateType> {
         newMode = DISPLAY_MODES.WEEK;
         break;
     }
-    this.setState({currentMode: newMode});
+    this.setState({ currentMode: newMode });
     props.onPress('changeView', newMode);
   };
 
   render() {
-    const {props, state} = this;
+    const { props, state } = this;
     const buttonColor = props.theme.colors.primary;
     return (
       <Animatable.View
@@ -154,7 +160,8 @@ class AnimatedBottomBar extends React.Component<PropsType, StateType> {
         style={{
           ...styles.container,
           bottom: 10 + CustomTabBar.TAB_BAR_HEIGHT,
-        }}>
+        }}
+      >
         <Surface style={styles.surface}>
           <View style={styles.fabContainer}>
             <AnimatedFAB
@@ -165,10 +172,10 @@ class AnimatedBottomBar extends React.Component<PropsType, StateType> {
               useNativeDriver
               style={styles.fab}
               icon="account-clock"
-              onPress={(): void => props.navigation.navigate('group-select')}
+              onPress={() => props.navigation.navigate('group-select')}
             />
           </View>
-          <View style={{flexDirection: 'row'}}>
+          <View style={styles.side}>
             <IconButton
               icon={this.displayModeIcons[state.currentMode]}
               color={buttonColor}
@@ -177,21 +184,21 @@ class AnimatedBottomBar extends React.Component<PropsType, StateType> {
             <IconButton
               icon="clock-in"
               color={buttonColor}
-              style={{marginLeft: 5}}
-              onPress={(): void => props.onPress('today')}
+              style={styles.icon}
+              onPress={() => props.onPress('today')}
             />
           </View>
-          <View style={{flexDirection: 'row'}}>
+          <View style={styles.side}>
             <IconButton
               icon="chevron-left"
               color={buttonColor}
-              onPress={(): void => props.onPress('prev')}
+              onPress={() => props.onPress('prev')}
             />
             <IconButton
               icon="chevron-right"
               color={buttonColor}
-              style={{marginLeft: 5}}
-              onPress={(): void => props.onPress('next')}
+              style={styles.icon}
+              onPress={() => props.onPress('next')}
             />
           </View>
         </Surface>

src/components/Animations/AnimatedFAB.tsx

@@ -24,7 +24,7 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {FAB} from 'react-native-paper';
+import { FAB } from 'react-native-paper';
 import * as Animatable from 'react-native-animatable';
 import AutoHideHandler from '../../utils/AutoHideHandler';
 import CustomTabBar from '../Tabbar/CustomTabBar';
@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
 });
 
 export default class AnimatedFAB extends React.Component<PropsType> {
-  ref: {current: null | (Animatable.View & View)};
+  ref: { current: null | (Animatable.View & View) };
 
   hideHandler: AutoHideHandler;
 
@@ -75,7 +75,7 @@ export default class AnimatedFAB extends React.Component<PropsType> {
   };
 
   render() {
-    const {props} = this;
+    const { props } = this;
     return (
       <Animatable.View
         ref={this.ref}
@@ -83,7 +83,8 @@ export default class AnimatedFAB extends React.Component<PropsType> {
         style={{
           ...styles.fab,
           bottom: CustomTabBar.TAB_BAR_HEIGHT,
-        }}>
+        }}
+      >
         <FAB icon={props.icon} onPress={props.onPress} />
       </Animatable.View>
     );

src/components/Collapsible/CollapsibleComponent.tsx

@@ -18,19 +18,29 @@
  */
 
 import * as React from 'react';
-import {useCollapsibleStack} from 'react-navigation-collapsible';
+import { useCollapsibleStack } from 'react-navigation-collapsible';
 import CustomTabBar from '../Tabbar/CustomTabBar';
-import {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleSheet,
+} from 'react-native';
 
-export interface CollapsibleComponentPropsType {
+export type CollapsibleComponentPropsType = {
   children?: React.ReactNode;
   hasTab?: boolean;
   onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-}
+};
 
-interface PropsType extends CollapsibleComponentPropsType {
+type PropsType = CollapsibleComponentPropsType & {
   component: React.ComponentType<any>;
-}
+};
+
+const styles = StyleSheet.create({
+  main: {
+    minHeight: '100%',
+  },
+});
 
 function CollapsibleComponent(props: PropsType) {
   const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -44,17 +54,18 @@ function CollapsibleComponent(props: PropsType) {
     scrollIndicatorInsetTop,
     onScrollWithListener,
   } = useCollapsibleStack();
-
+  const paddingBottom = props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0;
   return (
     <Comp
       {...props}
       onScroll={onScrollWithListener(onScroll)}
       contentContainerStyle={{
         paddingTop: containerPaddingTop,
-        paddingBottom: props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
-        minHeight: '100%',
+        paddingBottom: paddingBottom,
+        ...styles.main,
       }}
-      scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
+      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
+    >
       {props.children}
     </Comp>
   );

src/components/Collapsible/CollapsibleFlatList.tsx

@@ -18,8 +18,8 @@
  */
 
 import * as React from 'react';
-import {Animated, FlatListProps} from 'react-native';
-import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
+import { Animated, FlatListProps } from 'react-native';
+import type { CollapsibleComponentPropsType } from './CollapsibleComponent';
 import CollapsibleComponent from './CollapsibleComponent';
 
 type Props<T> = FlatListProps<T> & CollapsibleComponentPropsType;

src/components/Collapsible/CollapsibleScrollView.tsx

@@ -18,8 +18,8 @@
  */
 
 import * as React from 'react';
-import {Animated, ScrollViewProps} from 'react-native';
-import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
+import { Animated, ScrollViewProps } from 'react-native';
+import type { CollapsibleComponentPropsType } from './CollapsibleComponent';
 import CollapsibleComponent from './CollapsibleComponent';
 
 type Props = ScrollViewProps & CollapsibleComponentPropsType;

src/components/Collapsible/CollapsibleSectionList.tsx

@@ -18,8 +18,8 @@
  */
 
 import * as React from 'react';
-import {Animated, SectionListProps} from 'react-native';
-import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
+import { Animated, SectionListProps } from 'react-native';
+import type { CollapsibleComponentPropsType } from './CollapsibleComponent';
 import CollapsibleComponent from './CollapsibleComponent';
 
 type Props<T> = SectionListProps<T> & CollapsibleComponentPropsType;

src/components/Dialogs/AlertDialog.tsx

@@ -18,7 +18,7 @@
  */
 
 import * as React from 'react';
-import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
+import { Button, Dialog, Paragraph, Portal } from 'react-native-paper';
 import i18n from 'i18n-js';
 
 type PropsType = {

src/components/Dialogs/ErrorDialog.tsx

@@ -19,7 +19,7 @@
 
 import * as React from 'react';
 import i18n from 'i18n-js';
-import {ERROR_TYPE} from '../../utils/WebData';
+import { ERROR_TYPE } from '../../utils/WebData';
 import AlertDialog from './AlertDialog';
 
 type PropsType = {

src/components/Dialogs/LoadingConfirmDialog.tsx

@@ -26,6 +26,7 @@ import {
   Portal,
 } from 'react-native-paper';
 import i18n from 'i18n-js';
+import { StyleSheet } from 'react-native';
 
 type PropsType = {
   visible: boolean;
@@ -41,6 +42,12 @@ type StateType = {
   loading: boolean;
 };
 
+const styles = StyleSheet.create({
+  button: {
+    marginRight: 10,
+  },
+});
+
 export default class LoadingConfirmDialog extends React.PureComponent<
   PropsType,
   StateType
@@ -70,8 +77,8 @@ export default class LoadingConfirmDialog extends React.PureComponent<
    * Set the dialog into loading state and closes it when operation finishes
    */
   onClickAccept = () => {
-    const {props} = this;
-    this.setState({loading: true});
+    const { props } = this;
+    this.setState({ loading: true });
     if (props.onAccept != null) {
       props.onAccept().then(this.hideLoading);
     }
@@ -83,21 +90,21 @@ export default class LoadingConfirmDialog extends React.PureComponent<
    */
   hideLoading = (): NodeJS.Timeout =>
     setTimeout(() => {
-      this.setState({loading: false});
+      this.setState({ loading: false });
     }, 200);
 
   /**
    * Hide the dialog if it is not loading
    */
   onDismiss = () => {
-    const {state, props} = this;
+    const { state, props } = this;
     if (!state.loading && props.onDismiss != null) {
       props.onDismiss();
     }
   };
 
   render() {
-    const {state, props} = this;
+    const { state, props } = this;
     return (
       <Portal>
         <Dialog visible={props.visible} onDismiss={this.onDismiss}>
@@ -113,7 +120,7 @@ export default class LoadingConfirmDialog extends React.PureComponent<
           </Dialog.Content>
           {state.loading ? null : (
             <Dialog.Actions>
-              <Button onPress={this.onDismiss} style={{marginRight: 10}}>
+              <Button onPress={this.onDismiss} style={styles.button}>
                 {i18n.t('dialog.cancel')}
               </Button>
               <Button onPress={this.onClickAccept}>

src/components/Dialogs/OptionsDialog.tsx

@@ -18,8 +18,8 @@
  */
 
 import * as React from 'react';
-import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
-import {FlatList} from 'react-native';
+import { Button, Dialog, Paragraph, Portal } from 'react-native-paper';
+import { FlatList } from 'react-native';
 
 export type OptionsDialogButtonType = {
   title: string;
@@ -36,7 +36,7 @@ type PropsType = {
 };
 
 function OptionsDialog(props: PropsType) {
-  const getButtonRender = ({item}: {item: OptionsDialogButtonType}) => {
+  const getButtonRender = ({ item }: { item: OptionsDialogButtonType }) => {
     return (
       <Button onPress={item.onPress} icon={item.icon}>
         {item.title}

src/components/Home/ActionsDashboardItem.tsx

@@ -18,10 +18,19 @@
  */
 
 import * as React from 'react';
-import {List} from 'react-native-paper';
-import {View} from 'react-native';
+import { List } from 'react-native-paper';
+import { StyleSheet, View } from 'react-native';
 import i18n from 'i18n-js';
-import {useNavigation} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+
+const styles = StyleSheet.create({
+  item: {
+    paddingTop: 0,
+    paddingBottom: 0,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+});
 
 function ActionsDashBoardItem() {
   const navigation = useNavigation();
@@ -45,12 +54,7 @@ function ActionsDashBoardItem() {
           />
         )}
         onPress={(): void => navigation.navigate('feedback')}
-        style={{
-          paddingTop: 0,
-          paddingBottom: 0,
-          marginLeft: 10,
-          marginRight: 10,
-        }}
+        style={styles.item}
       />
     </View>
   );

src/components/Home/EventDashboardItem.tsx

@@ -25,8 +25,9 @@ import {
   TouchableRipple,
   useTheme,
 } from 'react-native-paper';
-import {StyleSheet, View} from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import i18n from 'i18n-js';
+import GENERAL_STYLES from '../../constants/Styles';
 
 type PropsType = {
   eventNumber: number;
@@ -45,6 +46,9 @@ const styles = StyleSheet.create({
   avatar: {
     backgroundColor: 'transparent',
   },
+  text: {
+    fontWeight: 'bold',
+  },
 });
 
 /**
@@ -61,7 +65,7 @@ function EventDashBoardItem(props: PropsType) {
   if (isAvailable) {
     subtitle = (
       <Text>
-        <Text style={{fontWeight: 'bold'}}>{props.eventNumber}</Text>
+        <Text style={styles.text}>{props.eventNumber}</Text>
         <Text>
           {props.eventNumber > 1
             ? i18n.t('screens.home.dashboard.todayEventsSubtitlePlural')
@@ -74,13 +78,13 @@ function EventDashBoardItem(props: PropsType) {
   }
   return (
     <Card style={styles.card}>
-      <TouchableRipple style={{flex: 1}} onPress={props.clickAction}>
+      <TouchableRipple style={GENERAL_STYLES.flex} onPress={props.clickAction}>
         <View>
           <Card.Title
             title={i18n.t('screens.home.dashboard.todayEventsTitle')}
-            titleStyle={{color: textColor}}
+            titleStyle={{ color: textColor }}
             subtitle={subtitle}
-            subtitleStyle={{color: textColor}}
+            subtitleStyle={{ color: textColor }}
             left={(iconProps) => (
               <Avatar.Icon
                 icon="calendar-range"

src/components/Home/FeedItem.tsx

@@ -18,17 +18,18 @@
  */
 
 import * as React from 'react';
-import {Button, Card, Text, TouchableRipple} from 'react-native-paper';
-import {Image, View} from 'react-native';
+import { Button, Card, Text, TouchableRipple } from 'react-native-paper';
+import { Image, StyleSheet, View } from 'react-native';
 import Autolink from 'react-native-autolink';
 import i18n from 'i18n-js';
-import type {FeedItemType} from '../../screens/Home/HomeScreen';
+import type { FeedItemType } from '../../screens/Home/HomeScreen';
 import NewsSourcesConstants, {
   AvailablePages,
 } from '../../constants/NewsSourcesConstants';
-import type {NewsSourceType} from '../../constants/NewsSourcesConstants';
+import type { NewsSourceType } from '../../constants/NewsSourcesConstants';
 import ImageGalleryButton from '../Media/ImageGalleryButton';
-import {useNavigation} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import GENERAL_STYLES from '../../constants/Styles';
 
 type PropsType = {
   item: FeedItemType;
@@ -46,6 +47,20 @@ function getFormattedDate(dateString: number): string {
   return date.toLocaleString();
 }
 
+const styles = StyleSheet.create({
+  image: {
+    width: 48,
+    height: 48,
+  },
+  button: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  action: {
+    marginLeft: 'auto',
+  },
+});
+
 /**
  * Component used to display a feed item
  */
@@ -58,7 +73,7 @@ function FeedItem(props: PropsType) {
     });
   };
 
-  const {item, height} = props;
+  const { item, height } = props;
   const image = item.image !== '' && item.image != null ? item.image : null;
   const pageSource: NewsSourceType =
     NewsSourcesConstants[item.page_id as AvailablePages];
@@ -76,31 +91,23 @@ function FeedItem(props: PropsType) {
       style={{
         margin: cardMargin,
         height: cardHeight,
-      }}>
-      <TouchableRipple style={{flex: 1}} onPress={onPress}>
+      }}
+    >
+      <TouchableRipple style={GENERAL_STYLES.flex} onPress={onPress}>
         <View>
           <Card.Title
             title={pageSource.name}
             subtitle={getFormattedDate(item.time)}
-            left={() => (
-              <Image
-                source={pageSource.icon}
-                style={{
-                  width: 48,
-                  height: 48,
-                }}
-              />
-            )}
-            style={{height: titleHeight}}
+            left={() => <Image source={pageSource.icon} style={styles.image} />}
+            style={{ height: titleHeight }}
           />
           {image != null ? (
             <ImageGalleryButton
-              images={[{url: image}]}
+              images={[{ url: image }]}
               style={{
+                ...styles.button,
                 width: imageSize,
                 height: imageSize,
-                marginLeft: 'auto',
-                marginRight: 'auto',
               }}
             />
           ) : null}
@@ -110,12 +117,12 @@ function FeedItem(props: PropsType) {
                 text={item.message}
                 hashtag="facebook"
                 component={Text}
-                style={{height: textHeight}}
+                style={{ height: textHeight }}
               />
             ) : null}
           </Card.Content>
-          <Card.Actions style={{height: actionsHeight}}>
-            <Button onPress={onPress} icon="plus" style={{marginLeft: 'auto'}}>
+          <Card.Actions style={{ height: actionsHeight }}>
+            <Button onPress={onPress} icon="plus" style={styles.action}>
               {i18n.t('screens.home.dashboard.seeMore')}
             </Button>
           </Card.Actions>

src/components/Home/PreviewEventDashboardItem.tsx

@@ -18,12 +18,13 @@
  */
 
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import i18n from 'i18n-js';
-import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
-import {getTimeOnlyString, isDescriptionEmpty} from '../../utils/Planning';
+import { Avatar, Button, Card, TouchableRipple } from 'react-native-paper';
+import { getTimeOnlyString, isDescriptionEmpty } from '../../utils/Planning';
 import CustomHTML from '../Overrides/CustomHTML';
-import type {PlanningEventType} from '../../utils/Planning';
+import type { PlanningEventType } from '../../utils/Planning';
+import GENERAL_STYLES from '../../constants/Styles';
 
 type PropsType = {
   event?: PlanningEventType | null;
@@ -52,19 +53,26 @@ const styles = StyleSheet.create({
  * Component used to display an event preview if an event is available
  */
 function PreviewEventDashboardItem(props: PropsType) {
-  const {event} = props;
+  const { event } = props;
   const isEmpty = event == null ? true : isDescriptionEmpty(event.description);
 
   if (event != null) {
     const logo = event.logo;
     const getImage = logo
       ? () => (
-          <Avatar.Image source={{uri: logo}} size={50} style={styles.avatar} />
+          <Avatar.Image
+            source={{ uri: logo }}
+            size={50}
+            style={styles.avatar}
+          />
         )
       : () => null;
     return (
       <Card style={styles.card} elevation={3}>
-        <TouchableRipple style={{flex: 1}} onPress={props.clickAction}>
+        <TouchableRipple
+          style={GENERAL_STYLES.flex}
+          onPress={props.clickAction}
+        >
           <View>
             <Card.Title
               title={event.title}

src/components/Home/SmallDashboardItem.tsx

@@ -18,8 +18,8 @@
  */
 
 import * as React from 'react';
-import {Badge, TouchableRipple, useTheme} from 'react-native-paper';
-import {Dimensions, Image, View} from 'react-native';
+import { Badge, TouchableRipple, useTheme } from 'react-native-paper';
+import { Dimensions, Image, StyleSheet, View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 
 type PropsType = {
@@ -28,13 +28,32 @@ type PropsType = {
   badgeCount?: number;
 };
 
+const styles = StyleSheet.create({
+  image: {
+    width: '80%',
+    height: '80%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: 'auto',
+    marginBottom: 'auto',
+  },
+  badgeContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+  badge: {
+    borderWidth: 2,
+  },
+});
+
 /**
  * Component used to render a small dashboard item
  */
 function SmallDashboardItem(props: PropsType) {
   const itemSize = Dimensions.get('window').width / 8;
   const theme = useTheme();
-  const {image} = props;
+  const { image } = props;
   return (
     <TouchableRipple
       onPress={props.onPress}
@@ -42,23 +61,18 @@ function SmallDashboardItem(props: PropsType) {
       style={{
         marginLeft: itemSize / 6,
         marginRight: itemSize / 6,
-      }}>
+      }}
+    >
       <View
         style={{
           width: itemSize,
           height: itemSize,
-        }}>
+        }}
+      >
         {image ? (
           <Image
-            source={typeof image === 'string' ? {uri: image} : image}
-            style={{
-              width: '80%',
-              height: '80%',
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              marginTop: 'auto',
-              marginBottom: 'auto',
-            }}
+            source={typeof image === 'string' ? { uri: image } : image}
+            style={styles.image}
           />
         ) : null}
         {props.badgeCount != null && props.badgeCount > 0 ? (
@@ -66,18 +80,16 @@ function SmallDashboardItem(props: PropsType) {
             animation="zoomIn"
             duration={300}
             useNativeDriver
-            style={{
-              position: 'absolute',
-              top: 0,
-              right: 0,
-            }}>
+            style={styles.badgeContainer}
+          >
             <Badge
               visible={true}
               style={{
                 backgroundColor: theme.colors.primary,
                 borderColor: theme.colors.background,
-                borderWidth: 2,
-              }}>
+                ...styles.badge,
+              }}
+            >
               {props.badgeCount}
             </Badge>
           </Animatable.View>

src/components/Intro/IconIntro.tsx

@@ -18,9 +18,10 @@
  */
 
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import GENERAL_STYLES from '../../constants/Styles';
 
 type PropsType = {
   icon: string;
@@ -37,7 +38,7 @@ const styles = StyleSheet.create({
 
 function IntroIcon(props: PropsType) {
   return (
-    <View style={{flex: 1}}>
+    <View style={GENERAL_STYLES.flex}>
       <Animatable.View useNativeDriver style={styles.center} animation="fadeIn">
         <MaterialCommunityIcons name={props.icon} color="#fff" size={200} />
       </Animatable.View>

src/components/Intro/MascotIntroEnd.tsx

@@ -18,25 +18,23 @@
  */
 
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
-import Mascot, {MASCOT_STYLE} from '../Mascot/Mascot';
+import { StyleSheet, View } from 'react-native';
+import GENERAL_STYLES from '../../constants/Styles';
+import Mascot, { MASCOT_STYLE } from '../Mascot/Mascot';
 
 const styles = StyleSheet.create({
   center: {
-    marginTop: 'auto',
-    marginBottom: 'auto',
-    marginRight: 'auto',
-    marginLeft: 'auto',
+    ...GENERAL_STYLES.center,
+    width: '80%',
   },
 });