App.js

@@ -10,7 +10,7 @@ import {OverflowMenuProvider} from 'react-navigation-header-buttons';
 import LocaleManager from './src/managers/LocaleManager';
 import AsyncStorageManager from './src/managers/AsyncStorageManager';
 import CustomIntroSlider from './src/components/Overrides/CustomIntroSlider';
-import type {CustomThemeType} from './src/managers/ThemeManager';
+import type {CustomTheme} from './src/managers/ThemeManager';
 import ThemeManager from './src/managers/ThemeManager';
 import MainNavigator from './src/navigation/MainNavigator';
 import AprilFoolsManager from './src/managers/AprilFoolsManager';
@@ -35,7 +35,7 @@ type StateType = {
   showIntro: boolean,
   showUpdate: boolean,
   showAprilFools: boolean,
-  currentTheme: CustomThemeType | null,
+  currentTheme: CustomTheme | null,
 };
 
 export default class App extends React.Component<null, StateType> {

__tests__/managers/ConnectionManager.test.js

@@ -1,12 +1,10 @@
-/* eslint-disable */
-
-import React from 'react';
-import ConnectionManager from '../../src/managers/ConnectionManager';
-import {ERROR_TYPE} from '../../src/utils/WebData';
-
 jest.mock('react-native-keychain');
 
-const fetch = require('isomorphic-fetch'); // fetch is not implemented in nodeJS but in react-native
+import React from 'react';
+import ConnectionManager from "../../src/managers/ConnectionManager";
+import {ERROR_TYPE} from "../../src/utils/WebData";
+
+let fetch = require('isomorphic-fetch'); // fetch is not implemented in nodeJS but in react-native
 
 const c = ConnectionManager.getInstance();
 
@@ -15,124 +13,132 @@ afterEach(() => {
 });
 
 test('isLoggedIn yes', () => {
-  jest
+    jest.spyOn(ConnectionManager.prototype, 'getToken').mockImplementationOnce(() => {
-    .spyOn(ConnectionManager.prototype, 'getToken')
-    .mockImplementationOnce(() => {
         return 'token';
     });
     return expect(c.isLoggedIn()).toBe(true);
 });
 
 test('isLoggedIn no', () => {
-  jest
+    jest.spyOn(ConnectionManager.prototype, 'getToken').mockImplementationOnce(() => {
-    .spyOn(ConnectionManager.prototype, 'getToken')
-    .mockImplementationOnce(() => {
         return null;
     });
     return expect(c.isLoggedIn()).toBe(false);
 });
 
-test('connect bad credentials', () => {
+test("isConnectionResponseValid", () => {
+    let json = {
+        error: 0,
+        data: {token: 'token'}
+    };
+    expect(c.isConnectionResponseValid(json)).toBeTrue();
+    json = {
+        error: 2,
+        data: {}
+    };
+    expect(c.isConnectionResponseValid(json)).toBeTrue();
+    json = {
+        error: 0,
+        data: {token: ''}
+    };
+    expect(c.isConnectionResponseValid(json)).toBeFalse();
+    json = {
+        error: 'prout',
+        data: {token: ''}
+    };
+    expect(c.isConnectionResponseValid(json)).toBeFalse();
+});
+
+test("connect bad credentials", () => {
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
         return Promise.resolve({
             json: () => {
                 return {
                     error: ERROR_TYPE.BAD_CREDENTIALS,
-          data: {},
+                    data: {}
                 };
             },
+        })
     });
-  });
+    return expect(c.connect('email', 'password'))
-  return expect(c.connect('email', 'password')).rejects.toBe(
+        .rejects.toBe(ERROR_TYPE.BAD_CREDENTIALS);
-    ERROR_TYPE.BAD_CREDENTIALS,
-  );
 });
 
-test('connect good credentials', () => {
+test("connect good credentials", () => {
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
         return Promise.resolve({
             json: () => {
                 return {
                     error: ERROR_TYPE.SUCCESS,
-          data: {token: 'token'},
+                    data: {token: 'token'}
                 };
             },
+        })
     });
-  });
+    jest.spyOn(ConnectionManager.prototype, 'saveLogin').mockImplementationOnce(() => {
-  jest
-    .spyOn(ConnectionManager.prototype, 'saveLogin')
-    .mockImplementationOnce(() => {
         return Promise.resolve(true);
     });
     return expect(c.connect('email', 'password')).resolves.toBeTruthy();
 });
 
-test('connect good credentials no consent', () => {
+test("connect good credentials no consent", () => {
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
         return Promise.resolve({
             json: () => {
                 return {
                     error: ERROR_TYPE.NO_CONSENT,
-          data: {},
+                    data: {}
                 };
             },
+        })
     });
-  });
+    return expect(c.connect('email', 'password'))
-  return expect(c.connect('email', 'password')).rejects.toBe(
+        .rejects.toBe(ERROR_TYPE.NO_CONSENT);
-    ERROR_TYPE.NO_CONSENT,
-  );
 });
 
-test('connect good credentials, fail save token', () => {
+test("connect good credentials, fail save token", () => {
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
         return Promise.resolve({
             json: () => {
                 return {
                     error: ERROR_TYPE.SUCCESS,
-          data: {token: 'token'},
+                    data: {token: 'token'}
                 };
             },
+        })
     });
-  });
+    jest.spyOn(ConnectionManager.prototype, 'saveLogin').mockImplementationOnce(() => {
-  jest
-    .spyOn(ConnectionManager.prototype, 'saveLogin')
-    .mockImplementationOnce(() => {
         return Promise.reject(false);
     });
-  return expect(c.connect('email', 'password')).rejects.toBe(
+    return expect(c.connect('email', 'password')).rejects.toBe(ERROR_TYPE.UNKNOWN);
-    ERROR_TYPE.UNKNOWN,
-  );
 });
 
-test('connect connection error', () => {
+test("connect connection error", () => {
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
         return Promise.reject();
     });
-  return expect(c.connect('email', 'password')).rejects.toBe(
+    return expect(c.connect('email', 'password'))
-    ERROR_TYPE.CONNECTION_ERROR,
+        .rejects.toBe(ERROR_TYPE.CONNECTION_ERROR);
-  );
 });
 
-test('connect bogus response 1', () => {
+test("connect bogus response 1", () => {
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
         return Promise.resolve({
             json: () => {
                 return {
                     thing: true,
                     wrong: '',
-        };
+                }
             },
+        })
     });
-  });
+    return expect(c.connect('email', 'password'))
-  return expect(c.connect('email', 'password')).rejects.toBe(
+        .rejects.toBe(ERROR_TYPE.CONNECTION_ERROR);
-    ERROR_TYPE.CONNECTION_ERROR,
-  );
 });
 
-test('authenticatedRequest success', () => {
+
-  jest
+test("authenticatedRequest success", () => {
-    .spyOn(ConnectionManager.prototype, 'getToken')
+    jest.spyOn(ConnectionManager.prototype, 'getToken').mockImplementationOnce(() => {
-    .mockImplementationOnce(() => {
         return 'token';
     });
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
@@ -140,20 +146,17 @@ 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'))
-  return expect(
+        .resolves.toStrictEqual({coucou: 'toi'});
-    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'),
-  ).resolves.toStrictEqual({coucou: 'toi'});
 });
 
-test('authenticatedRequest error wrong token', () => {
+test("authenticatedRequest error wrong token", () => {
-  jest
+    jest.spyOn(ConnectionManager.prototype, 'getToken').mockImplementationOnce(() => {
-    .spyOn(ConnectionManager.prototype, 'getToken')
-    .mockImplementationOnce(() => {
         return 'token';
     });
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
@@ -161,20 +164,17 @@ test('authenticatedRequest error wrong token', () => {
             json: () => {
                 return {
                     error: ERROR_TYPE.BAD_TOKEN,
-          data: {},
+                    data: {}
                 };
             },
+        })
     });
-  });
+    return expect(c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'))
-  return expect(
+        .rejects.toBe(ERROR_TYPE.BAD_TOKEN);
-    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'),
-  ).rejects.toBe(ERROR_TYPE.BAD_TOKEN);
 });
 
-test('authenticatedRequest error bogus response', () => {
+test("authenticatedRequest error bogus response", () => {
-  jest
+    jest.spyOn(ConnectionManager.prototype, 'getToken').mockImplementationOnce(() => {
-    .spyOn(ConnectionManager.prototype, 'getToken')
-    .mockImplementationOnce(() => {
         return 'token';
     });
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
@@ -184,34 +184,27 @@ test('authenticatedRequest error bogus response', () => {
                     error: ERROR_TYPE.SUCCESS,
                 };
             },
+        })
     });
-  });
+    return expect(c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'))
-  return expect(
+        .rejects.toBe(ERROR_TYPE.CONNECTION_ERROR);
-    c.authenticatedRequest('https://www.amicale-insat.fr/api/token/check'),
-  ).rejects.toBe(ERROR_TYPE.CONNECTION_ERROR);
 });
 
-test('authenticatedRequest connection error', () => {
+test("authenticatedRequest connection error", () => {
-  jest
+    jest.spyOn(ConnectionManager.prototype, 'getToken').mockImplementationOnce(() => {
-    .spyOn(ConnectionManager.prototype, 'getToken')
-    .mockImplementationOnce(() => {
         return 'token';
     });
     jest.spyOn(global, 'fetch').mockImplementationOnce(() => {
-    return Promise.reject();
+        return Promise.reject()
     });
-  return expect(
+    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);
-  ).rejects.toBe(ERROR_TYPE.CONNECTION_ERROR);
 });
 
-test('authenticatedRequest error no token', () => {
+test("authenticatedRequest error no token", () => {
-  jest
+    jest.spyOn(ConnectionManager.prototype, 'getToken').mockImplementationOnce(() => {
-    .spyOn(ConnectionManager.prototype, 'getToken')
-    .mockImplementationOnce(() => {
         return null;
     });
-  return expect(
+    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.UNKNOWN);
-  ).rejects.toBe(ERROR_TYPE.UNKNOWN);
 });

__tests__/utils/EquipmentBooking.test.js

@@ -1,345 +1,319 @@
-/* eslint-disable */
-
 import React from 'react';
-import * as EquipmentBooking from '../../src/utils/EquipmentBooking';
+import * as EquipmentBooking from "../../src/utils/EquipmentBooking";
-import i18n from 'i18n-js';
+import i18n from "i18n-js";
 
 test('getISODate', () => {
-  let date = new Date('2020-03-05 12:00');
+    let date = new Date("2020-03-05 12:00");
-  expect(EquipmentBooking.getISODate(date)).toBe('2020-03-05');
+    expect(EquipmentBooking.getISODate(date)).toBe("2020-03-05");
-  date = new Date('2020-03-05');
+    date = new Date("2020-03-05");
-  expect(EquipmentBooking.getISODate(date)).toBe('2020-03-05');
+    expect(EquipmentBooking.getISODate(date)).toBe("2020-03-05");
-  date = new Date('2020-03-05 00:00'); // Treated as local time
+    date = new Date("2020-03-05 00:00"); // Treated as local time
-  expect(EquipmentBooking.getISODate(date)).toBe('2020-03-04'); // Treated as UTC
+    expect(EquipmentBooking.getISODate(date)).toBe("2020-03-04"); // Treated as UTC
 });
 
 test('getCurrentDay', () => {
-  jest
+    jest.spyOn(Date, 'now')
-    .spyOn(Date, 'now')
+        .mockImplementation(() =>
-    .mockImplementation(() => new Date('2020-01-14 14:50:35').getTime());
+            new Date('2020-01-14 14:50:35').getTime()
-  expect(EquipmentBooking.getCurrentDay().getTime()).toBe(
-    new Date('2020-01-14').getTime(),
         );
+    expect(EquipmentBooking.getCurrentDay().getTime()).toBe(new Date("2020-01-14").getTime());
 });
 
 test('isEquipmentAvailable', () => {
-  jest
+    jest.spyOn(Date, 'now')
-    .spyOn(Date, 'now')
+        .mockImplementation(() =>
-    .mockImplementation(() => new Date('2020-07-09').getTime());
+            new Date('2020-07-09').getTime()
+        );
     let testDevice = {
         id: 1,
-    name: 'Petit barbecue',
+        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-07", end: "2020-07-8"},
-    {begin: '2020-07-10', end: '2020-07-12'},
+        {begin: "2020-07-10", end: "2020-07-12"},
     ];
     expect(EquipmentBooking.isEquipmentAvailable(testDevice)).toBeTrue();
 });
 
 test('getFirstEquipmentAvailability', () => {
-  jest
+    jest.spyOn(Date, 'now')
-    .spyOn(Date, 'now')
+        .mockImplementation(() =>
-    .mockImplementation(() => new Date('2020-07-09').getTime());
+            new Date('2020-07-09').getTime()
+        );
     let testDevice = {
         id: 1,
-    name: 'Petit barbecue',
+        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(
+    expect(EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime()).toBe(new Date("2020-07-11").getTime());
-    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime(),
+    testDevice.booked_at = [{begin: "2020-07-07", end: "2020-07-09"}];
-  ).toBe(new Date('2020-07-11').getTime());
+    expect(EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime()).toBe(new Date("2020-07-10").getTime());
-  testDevice.booked_at = [{begin: '2020-07-07', end: '2020-07-09'}];
-  expect(
-    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-07", end: "2020-07-09"},
-    {begin: '2020-07-10', end: '2020-07-16'},
+        {begin: "2020-07-10", end: "2020-07-16"},
     ];
-  expect(
+    expect(EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime()).toBe(new Date("2020-07-17").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-07", end: "2020-07-09"},
-    {begin: '2020-07-10', end: '2020-07-12'},
+        {begin: "2020-07-10", end: "2020-07-12"},
-    {begin: '2020-07-14', end: '2020-07-16'},
+        {begin: "2020-07-14", end: "2020-07-16"},
     ];
-  expect(
+    expect(EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime()).toBe(new Date("2020-07-13").getTime());
-    EquipmentBooking.getFirstEquipmentAvailability(testDevice).getTime(),
-  ).toBe(new Date('2020-07-13').getTime());
 });
 
 test('getRelativeDateString', () => {
-  jest
+    jest.spyOn(Date, 'now')
-    .spyOn(Date, 'now')
+        .mockImplementation(() =>
-    .mockImplementation(() => new Date('2020-07-09').getTime());
+            new Date('2020-07-09').getTime()
-  jest.spyOn(i18n, 't').mockImplementation((translationString: string) => {
-    const prefix = 'screens.equipment.';
-    if (translationString === prefix + 'otherYear') return '0';
-    else if (translationString === prefix + 'otherMonth') return '1';
-    else if (translationString === prefix + 'thisMonth') return '2';
-    else if (translationString === prefix + 'tomorrow') return '3';
-    else if (translationString === prefix + 'today') return '4';
-    else return null;
-  });
-  expect(EquipmentBooking.getRelativeDateString(new Date('2020-07-09'))).toBe(
-    '4',
         );
-  expect(EquipmentBooking.getRelativeDateString(new Date('2020-07-10'))).toBe(
+    jest.spyOn(i18n, 't')
-    '3',
+        .mockImplementation((translationString: string) => {
-  );
+                const prefix = "screens.equipment.";
-  expect(EquipmentBooking.getRelativeDateString(new Date('2020-07-11'))).toBe(
+                if (translationString === prefix + "otherYear")
-    '2',
+                    return "0";
-  );
+                else if (translationString === prefix + "otherMonth")
-  expect(EquipmentBooking.getRelativeDateString(new Date('2020-07-30'))).toBe(
+                    return "1";
-    '2',
+                else if (translationString === prefix + "thisMonth")
-  );
+                    return "2";
-  expect(EquipmentBooking.getRelativeDateString(new Date('2020-08-30'))).toBe(
+                else if (translationString === prefix + "tomorrow")
-    '1',
+                    return "3";
-  );
+                else if (translationString === prefix + "today")
-  expect(EquipmentBooking.getRelativeDateString(new Date('2020-11-10'))).toBe(
+                    return "4";
-    '1',
+                else
-  );
+                    return null;
-  expect(EquipmentBooking.getRelativeDateString(new Date('2021-11-10'))).toBe(
+            }
-    '0',
         );
+    expect(EquipmentBooking.getRelativeDateString(new Date("2020-07-09"))).toBe("4");
+    expect(EquipmentBooking.getRelativeDateString(new Date("2020-07-10"))).toBe("3");
+    expect(EquipmentBooking.getRelativeDateString(new Date("2020-07-11"))).toBe("2");
+    expect(EquipmentBooking.getRelativeDateString(new Date("2020-07-30"))).toBe("2");
+    expect(EquipmentBooking.getRelativeDateString(new Date("2020-08-30"))).toBe("1");
+    expect(EquipmentBooking.getRelativeDateString(new Date("2020-11-10"))).toBe("1");
+    expect(EquipmentBooking.getRelativeDateString(new Date("2021-11-10"))).toBe("0");
 });
 
 test('getValidRange', () => {
     let testDevice = {
         id: 1,
-    name: 'Petit barbecue',
+        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 start = new Date("2020-07-11");
-  let end = new Date('2020-07-15');
+    let end = new Date("2020-07-15");
     let result = [
-    '2020-07-11',
+        "2020-07-11",
-    '2020-07-12',
+        "2020-07-12",
-    '2020-07-13',
+        "2020-07-13",
-    '2020-07-14',
+        "2020-07-14",
-    '2020-07-15',
+        "2020-07-15",
     ];
-  expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(
+    expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(result);
-    result,
-  );
     testDevice.booked_at = [
-    {begin: '2020-07-07', end: '2020-07-10'},
+        {begin: "2020-07-07", end: "2020-07-10"},
-    {begin: '2020-07-13', end: '2020-07-15'},
+        {begin: "2020-07-13", end: "2020-07-15"},
     ];
-  result = ['2020-07-11', '2020-07-12'];
+    result = [
-  expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(
+        "2020-07-11",
-    result,
+        "2020-07-12",
-  );
+    ];
+    expect(EquipmentBooking.getValidRange(start, end, testDevice)).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'];
+    result = ["2020-07-11"];
-  expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(
+    expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(result);
-    result,
+    testDevice.booked_at = [{begin: "2020-07-07", end: "2020-07-12"},];
-  );
+    result = [
-  testDevice.booked_at = [{begin: '2020-07-07', end: '2020-07-12'}];
+        "2020-07-13",
-  result = ['2020-07-13', '2020-07-14', '2020-07-15'];
+        "2020-07-14",
-  expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(
+        "2020-07-15",
-    result,
+    ];
-  );
+    expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(result);
-  start = new Date('2020-07-14');
+    start = new Date("2020-07-14");
-  end = new Date('2020-07-14');
+    end = new Date("2020-07-14");
-  result = ['2020-07-14'];
+    result = [
-  expect(
+        "2020-07-14",
-    EquipmentBooking.getValidRange(start, start, testDevice),
+    ];
-  ).toStrictEqual(result);
+    expect(EquipmentBooking.getValidRange(start, start, testDevice)).toStrictEqual(result);
-  expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(
+    expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(result);
-    result,
+    expect(EquipmentBooking.getValidRange(start, end, null)).toStrictEqual(result);
-  );
-  expect(EquipmentBooking.getValidRange(start, end, null)).toStrictEqual(
-    result,
-  );
 
-  start = new Date('2020-07-14');
+    start = new Date("2020-07-14");
-  end = new Date('2020-07-17');
+    end = new Date("2020-07-17");
-  result = ['2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17'];
+    result = [
-  expect(EquipmentBooking.getValidRange(start, end, null)).toStrictEqual(
+        "2020-07-14",
-    result,
+        "2020-07-15",
-  );
+        "2020-07-16",
+        "2020-07-17",
+    ];
+    expect(EquipmentBooking.getValidRange(start, end, null)).toStrictEqual(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'];
+    result = [
-  expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(
+        "2020-07-14",
-    result,
+        "2020-07-15",
-  );
+        "2020-07-16",
+    ];
+    expect(EquipmentBooking.getValidRange(start, end, testDevice)).toStrictEqual(result);
 
     testDevice.booked_at = [
-    {begin: '2020-07-12', end: '2020-07-13'},
+        {begin: "2020-07-12", end: "2020-07-13"},
-    {begin: '2020-07-15', end: '2020-07-20'},
+        {begin: "2020-07-15", end: "2020-07-20"},
     ];
-  start = new Date('2020-07-11');
+    start = new Date("2020-07-11");
-  end = new Date('2020-07-23');
+    end = new Date("2020-07-23");
-  result = ['2020-07-21', '2020-07-22', '2020-07-23'];
+    result = [
-  expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(
+        "2020-07-21",
-    result,
+        "2020-07-22",
-  );
+        "2020-07-23",
+    ];
+    expect(EquipmentBooking.getValidRange(end, start, testDevice)).toStrictEqual(result);
 });
 
 test('generateMarkedDates', () => {
     let theme = {
         colors: {
-      primary: 'primary',
+            primary: "primary",
-      danger: 'primary',
+            danger: "primary",
-      textDisabled: 'primary',
+            textDisabled: "primary",
-    },
+        }
-  };
+    }
     let testDevice = {
         id: 1,
-    name: 'Petit barbecue',
+        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 start = new Date("2020-07-11");
-  let end = new Date('2020-07-13');
+    let end = new Date("2020-07-13");
     let range = EquipmentBooking.getValidRange(start, end, testDevice);
     let result = {
-    '2020-07-11': {
+        "2020-07-11": {
             startingDay: true,
             endingDay: false,
-      color: theme.colors.primary,
+            color: theme.colors.primary
         },
-    '2020-07-12': {
+        "2020-07-12": {
             startingDay: false,
             endingDay: false,
-      color: theme.colors.danger,
+            color: theme.colors.danger
         },
-    '2020-07-13': {
+        "2020-07-13": {
             startingDay: false,
             endingDay: true,
-      color: theme.colors.primary,
+            color: theme.colors.primary
         },
     };
-  expect(
+    expect(EquipmentBooking.generateMarkedDates(true, theme, range)).toStrictEqual(result);
-    EquipmentBooking.generateMarkedDates(true, theme, range),
-  ).toStrictEqual(result);
     result = {
-    '2020-07-11': {
+        "2020-07-11": {
             startingDay: true,
             endingDay: false,
-      color: theme.colors.textDisabled,
+            color: theme.colors.textDisabled
         },
-    '2020-07-12': {
+        "2020-07-12": {
             startingDay: false,
             endingDay: false,
-      color: theme.colors.textDisabled,
+            color: theme.colors.textDisabled
         },
-    '2020-07-13': {
+        "2020-07-13": {
             startingDay: false,
             endingDay: true,
-      color: theme.colors.textDisabled,
+            color: theme.colors.textDisabled
         },
     };
-  expect(
+    expect(EquipmentBooking.generateMarkedDates(false, theme, range)).toStrictEqual(result);
-    EquipmentBooking.generateMarkedDates(false, theme, range),
-  ).toStrictEqual(result);
     result = {
-    '2020-07-11': {
+        "2020-07-11": {
             startingDay: true,
             endingDay: false,
-      color: theme.colors.textDisabled,
+            color: theme.colors.textDisabled
         },
-    '2020-07-12': {
+        "2020-07-12": {
             startingDay: false,
             endingDay: false,
-      color: theme.colors.textDisabled,
+            color: theme.colors.textDisabled
         },
-    '2020-07-13': {
+        "2020-07-13": {
             startingDay: false,
             endingDay: true,
-      color: theme.colors.textDisabled,
+            color: theme.colors.textDisabled
         },
     };
     range = EquipmentBooking.getValidRange(end, start, testDevice);
-  expect(
+    expect(EquipmentBooking.generateMarkedDates(false, theme, range)).toStrictEqual(result);
-    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': {
+        "2020-07-11": {
             startingDay: true,
             endingDay: false,
-      color: theme.colors.primary,
+            color: theme.colors.primary
         },
-    '2020-07-12': {
+        "2020-07-12": {
             startingDay: false,
             endingDay: true,
-      color: theme.colors.primary,
+            color: theme.colors.primary
         },
     };
     range = EquipmentBooking.getValidRange(start, end, testDevice);
-  expect(
+    expect(EquipmentBooking.generateMarkedDates(true, theme, range)).toStrictEqual(result);
-    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': {
+        "2020-07-11": {
             startingDay: true,
             endingDay: true,
-      color: theme.colors.primary,
+            color: theme.colors.primary
         },
     };
     range = EquipmentBooking.getValidRange(start, end, testDevice);
-  expect(
+    expect(EquipmentBooking.generateMarkedDates(true, theme, range)).toStrictEqual(result);
-    EquipmentBooking.generateMarkedDates(true, theme, range),
-  ).toStrictEqual(result);
 
     testDevice.booked_at = [
-    {begin: '2020-07-12', end: '2020-07-13'},
+        {begin: "2020-07-12", end: "2020-07-13"},
-    {begin: '2020-07-15', end: '2020-07-20'},
+        {begin: "2020-07-15", end: "2020-07-20"},
     ];
-  start = new Date('2020-07-11');
+    start = new Date("2020-07-11");
-  end = new Date('2020-07-23');
+    end = new Date("2020-07-23");
     result = {
-    '2020-07-11': {
+        "2020-07-11": {
             startingDay: true,
             endingDay: true,
-      color: theme.colors.primary,
+            color: theme.colors.primary
         },
     };
     range = EquipmentBooking.getValidRange(start, end, testDevice);
-  expect(
+    expect(EquipmentBooking.generateMarkedDates(true, theme, range)).toStrictEqual(result);
-    EquipmentBooking.generateMarkedDates(true, theme, range),
-  ).toStrictEqual(result);
 
     result = {
-    '2020-07-21': {
+        "2020-07-21": {
             startingDay: true,
             endingDay: false,
-      color: theme.colors.primary,
+            color: theme.colors.primary
         },
-    '2020-07-22': {
+        "2020-07-22": {
             startingDay: false,
             endingDay: false,
-      color: theme.colors.danger,
+            color: theme.colors.danger
         },
-    '2020-07-23': {
+        "2020-07-23": {
             startingDay: false,
             endingDay: true,
-      color: theme.colors.primary,
+            color: theme.colors.primary
         },
     };
     range = EquipmentBooking.getValidRange(end, start, testDevice);
-  expect(
+    expect(EquipmentBooking.generateMarkedDates(true, theme, range)).toStrictEqual(result);
-    EquipmentBooking.generateMarkedDates(true, theme, range),
-  ).toStrictEqual(result);
 });

__tests__/utils/PlanningEventManager.test.js

@@ -1,41 +1,35 @@
-/* eslint-disable */
-
 import React from 'react';
-import * as Planning from '../../src/utils/Planning';
+import * as Planning from "../../src/utils/Planning";
 
 test('isDescriptionEmpty', () => {
-  expect(Planning.isDescriptionEmpty('')).toBeTrue();
+    expect(Planning.isDescriptionEmpty("")).toBeTrue();
-  expect(Planning.isDescriptionEmpty('   ')).toBeTrue();
+    expect(Planning.isDescriptionEmpty("   ")).toBeTrue();
     // noinspection CheckTagEmptyBody
-  expect(Planning.isDescriptionEmpty('<p></p>')).toBeTrue();
+    expect(Planning.isDescriptionEmpty("<p></p>")).toBeTrue();
-  expect(Planning.isDescriptionEmpty('<p>   </p>')).toBeTrue();
+    expect(Planning.isDescriptionEmpty("<p>   </p>")).toBeTrue();
-  expect(Planning.isDescriptionEmpty('<p><br></p>')).toBeTrue();
+    expect(Planning.isDescriptionEmpty("<p><br></p>")).toBeTrue();
-  expect(Planning.isDescriptionEmpty('<p><br></p><p><br></p>')).toBeTrue();
+    expect(Planning.isDescriptionEmpty("<p><br></p><p><br></p>")).toBeTrue();
-  expect(Planning.isDescriptionEmpty('<p><br><br><br></p>')).toBeTrue();
+    expect(Planning.isDescriptionEmpty("<p><br><br><br></p>")).toBeTrue();
-  expect(Planning.isDescriptionEmpty('<p><br>')).toBeTrue();
+    expect(Planning.isDescriptionEmpty("<p><br>")).toBeTrue();
     expect(Planning.isDescriptionEmpty(null)).toBeTrue();
     expect(Planning.isDescriptionEmpty(undefined)).toBeTrue();
-  expect(Planning.isDescriptionEmpty('coucou')).toBeFalse();
+    expect(Planning.isDescriptionEmpty("coucou")).toBeFalse();
-  expect(Planning.isDescriptionEmpty('<p>coucou</p>')).toBeFalse();
+    expect(Planning.isDescriptionEmpty("<p>coucou</p>")).toBeFalse();
 });
 
 test('isEventDateStringFormatValid', () => {
-  expect(Planning.isEventDateStringFormatValid('2020-03-21 09:00')).toBeTrue();
+    expect(Planning.isEventDateStringFormatValid("2020-03-21 09:00")).toBeTrue();
-  expect(Planning.isEventDateStringFormatValid('3214-64-12 01:16')).toBeTrue();
+    expect(Planning.isEventDateStringFormatValid("3214-64-12 01:16")).toBeTrue();
 
-  expect(
+    expect(Planning.isEventDateStringFormatValid("3214-64-12 01:16:00")).toBeFalse();
-    Planning.isEventDateStringFormatValid('3214-64-12 01:16:00'),
+    expect(Planning.isEventDateStringFormatValid("3214-64-12 1:16")).toBeFalse();
-  ).toBeFalse();
+    expect(Planning.isEventDateStringFormatValid("3214-f4-12 01:16")).toBeFalse();
-  expect(Planning.isEventDateStringFormatValid('3214-64-12 1:16')).toBeFalse();
+    expect(Planning.isEventDateStringFormatValid("sqdd 09:00")).toBeFalse();
-  expect(Planning.isEventDateStringFormatValid('3214-f4-12 01:16')).toBeFalse();
+    expect(Planning.isEventDateStringFormatValid("2020-03-21")).toBeFalse();
-  expect(Planning.isEventDateStringFormatValid('sqdd 09:00')).toBeFalse();
+    expect(Planning.isEventDateStringFormatValid("2020-03-21 truc")).toBeFalse();
-  expect(Planning.isEventDateStringFormatValid('2020-03-21')).toBeFalse();
+    expect(Planning.isEventDateStringFormatValid("3214-64-12 1:16:65")).toBeFalse();
-  expect(Planning.isEventDateStringFormatValid('2020-03-21 truc')).toBeFalse();
+    expect(Planning.isEventDateStringFormatValid("garbage")).toBeFalse();
-  expect(
+    expect(Planning.isEventDateStringFormatValid("")).toBeFalse();
-    Planning.isEventDateStringFormatValid('3214-64-12 1:16:65'),
-  ).toBeFalse();
-  expect(Planning.isEventDateStringFormatValid('garbage')).toBeFalse();
-  expect(Planning.isEventDateStringFormatValid('')).toBeFalse();
     expect(Planning.isEventDateStringFormatValid(undefined)).toBeFalse();
     expect(Planning.isEventDateStringFormatValid(null)).toBeFalse();
 });
@@ -43,144 +37,136 @@ test('isEventDateStringFormatValid', () => {
 test('stringToDate', () => {
     let testDate = new Date();
     expect(Planning.stringToDate(undefined)).toBeNull();
-  expect(Planning.stringToDate('')).toBeNull();
+    expect(Planning.stringToDate("")).toBeNull();
-  expect(Planning.stringToDate('garbage')).toBeNull();
+    expect(Planning.stringToDate("garbage")).toBeNull();
-  expect(Planning.stringToDate('2020-03-21')).toBeNull();
+    expect(Planning.stringToDate("2020-03-21")).toBeNull();
-  expect(Planning.stringToDate('09:00:00')).toBeNull();
+    expect(Planning.stringToDate("09:00:00")).toBeNull();
-  expect(Planning.stringToDate('2020-03-21 09:g0')).toBeNull();
+    expect(Planning.stringToDate("2020-03-21 09:g0")).toBeNull();
-  expect(Planning.stringToDate('2020-03-21 09:g0:')).toBeNull();
+    expect(Planning.stringToDate("2020-03-21 09:g0:")).toBeNull();
     testDate.setFullYear(2020, 2, 21);
     testDate.setHours(9, 0, 0, 0);
-  expect(Planning.stringToDate('2020-03-21 09:00')).toEqual(testDate);
+    expect(Planning.stringToDate("2020-03-21 09:00")).toEqual(testDate);
     testDate.setFullYear(2020, 0, 31);
     testDate.setHours(18, 30, 0, 0);
-  expect(Planning.stringToDate('2020-01-31 18:30')).toEqual(testDate);
+    expect(Planning.stringToDate("2020-01-31 18:30")).toEqual(testDate);
     testDate.setFullYear(2020, 50, 50);
     testDate.setHours(65, 65, 0, 0);
-  expect(Planning.stringToDate('2020-51-50 65:65')).toEqual(testDate);
+    expect(Planning.stringToDate("2020-51-50 65:65")).toEqual(testDate);
 });
 
 test('getFormattedEventTime', () => {
-  expect(Planning.getFormattedEventTime(null, null)).toBe('/ - /');
+    expect(Planning.getFormattedEventTime(null, null))
-  expect(Planning.getFormattedEventTime(undefined, undefined)).toBe('/ - /');
+        .toBe('/ - /');
-  expect(Planning.getFormattedEventTime('20:30', '23:00')).toBe('/ - /');
+    expect(Planning.getFormattedEventTime(undefined, undefined))
-  expect(Planning.getFormattedEventTime('2020-03-30', '2020-03-31')).toBe(
+        .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'),
+    expect(Planning.getFormattedEventTime("2020-03-21 09:00", "2020-03-21 09:00"))
-  ).toBe('09:00');
+        .toBe('09:00');
-  expect(
+    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');
-  ).toBe('09:00 - 23:59');
+    expect(Planning.getFormattedEventTime("2020-03-30 20:30", "2020-03-30 23:00"))
-  expect(
+        .toBe('20:30 - 23:00');
-    Planning.getFormattedEventTime('2020-03-30 20:30', '2020-03-30 23:00'),
-  ).toBe('20:30 - 23:00');
 });
 
 test('getDateOnlyString', () => {
-  expect(Planning.getDateOnlyString('2020-03-21 09:00')).toBe('2020-03-21');
+    expect(Planning.getDateOnlyString("2020-03-21 09:00")).toBe("2020-03-21");
-  expect(Planning.getDateOnlyString('2021-12-15 09:00')).toBe('2021-12-15');
+    expect(Planning.getDateOnlyString("2021-12-15 09:00")).toBe("2021-12-15");
-  expect(Planning.getDateOnlyString('2021-12-o5 09:00')).toBeNull();
+    expect(Planning.getDateOnlyString("2021-12-o5 09:00")).toBeNull();
-  expect(Planning.getDateOnlyString('2021-12-15 09:')).toBeNull();
+    expect(Planning.getDateOnlyString("2021-12-15 09:")).toBeNull();
-  expect(Planning.getDateOnlyString('2021-12-15')).toBeNull();
+    expect(Planning.getDateOnlyString("2021-12-15")).toBeNull();
-  expect(Planning.getDateOnlyString('garbage')).toBeNull();
+    expect(Planning.getDateOnlyString("garbage")).toBeNull();
 });
 
 test('isEventBefore', () => {
-  expect(
+    expect(Planning.isEventBefore(
-    Planning.isEventBefore('2020-03-21 09:00', '2020-03-21 10:00'),
+        "2020-03-21 09:00", "2020-03-21 10:00")).toBeTrue();
-  ).toBeTrue();
+    expect(Planning.isEventBefore(
-  expect(
+        "2020-03-21 10:00", "2020-03-21 10:15")).toBeTrue();
-    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 10:15'),
+    expect(Planning.isEventBefore(
-  ).toBeTrue();
+        "2020-03-21 10:15", "2021-03-21 10:15")).toBeTrue();
-  expect(
+    expect(Planning.isEventBefore(
-    Planning.isEventBefore('2020-03-21 10:15', '2021-03-21 10:15'),
+        "2020-03-21 10:15", "2020-05-21 10:15")).toBeTrue();
-  ).toBeTrue();
+    expect(Planning.isEventBefore(
-  expect(
+        "2020-03-21 10:15", "2020-03-30 10:15")).toBeTrue();
-    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'),
-  ).toBeTrue();
 
-  expect(
+    expect(Planning.isEventBefore(
-    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 10:00'),
+        "2020-03-21 10:00", "2020-03-21 10:00")).toBeFalse();
-  ).toBeFalse();
+    expect(Planning.isEventBefore(
-  expect(
+        "2020-03-21 10:00", "2020-03-21 09:00")).toBeFalse();
-    Planning.isEventBefore('2020-03-21 10:00', '2020-03-21 09:00'),
+    expect(Planning.isEventBefore(
-  ).toBeFalse();
+        "2020-03-21 10:15", "2020-03-21 10:00")).toBeFalse();
-  expect(
+    expect(Planning.isEventBefore(
-    Planning.isEventBefore('2020-03-21 10:15', '2020-03-21 10:00'),
+        "2021-03-21 10:15", "2020-03-21 10:15")).toBeFalse();
-  ).toBeFalse();
+    expect(Planning.isEventBefore(
-  expect(
+        "2020-05-21 10:15", "2020-03-21 10:15")).toBeFalse();
-    Planning.isEventBefore('2021-03-21 10:15', '2020-03-21 10:15'),
+    expect(Planning.isEventBefore(
-  ).toBeFalse();
+        "2020-03-30 10:15", "2020-03-21 10:15")).toBeFalse();
-  expect(
-    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'),
-  ).toBeFalse();
 
-  expect(Planning.isEventBefore('garbage', '2020-03-21 10:15')).toBeFalse();
+    expect(Planning.isEventBefore(
-  expect(Planning.isEventBefore(undefined, undefined)).toBeFalse();
+        "garbage", "2020-03-21 10:15")).toBeFalse();
+    expect(Planning.isEventBefore(
+        undefined, undefined)).toBeFalse();
 });
 
 test('dateToString', () => {
     let testDate = new Date();
     testDate.setFullYear(2020, 2, 21);
     testDate.setHours(9, 0, 0, 0);
-  expect(Planning.dateToString(testDate)).toBe('2020-03-21 09:00');
+    expect(Planning.dateToString(testDate)).toBe("2020-03-21 09:00");
     testDate.setFullYear(2021, 0, 12);
     testDate.setHours(9, 10, 0, 0);
-  expect(Planning.dateToString(testDate)).toBe('2021-01-12 09:10');
+    expect(Planning.dateToString(testDate)).toBe("2021-01-12 09:10");
     testDate.setFullYear(2022, 11, 31);
     testDate.setHours(9, 10, 15, 0);
-  expect(Planning.dateToString(testDate)).toBe('2022-12-31 09:10');
+    expect(Planning.dateToString(testDate)).toBe("2022-12-31 09:10");
 });
 
 test('generateEmptyCalendar', () => {
-  jest
+    jest.spyOn(Date, 'now')
-    .spyOn(Date, 'now')
+        .mockImplementation(() =>
-    .mockImplementation(() => new Date('2020-01-14T00:00:00.000Z').getTime());
+            new Date('2020-01-14T00:00:00.000Z').getTime()
+        );
     let calendar = Planning.generateEmptyCalendar(1);
-  expect(calendar).toHaveProperty('2020-01-14');
+    expect(calendar).toHaveProperty("2020-01-14");
-  expect(calendar).toHaveProperty('2020-01-20');
+    expect(calendar).toHaveProperty("2020-01-20");
-  expect(calendar).toHaveProperty('2020-02-10');
+    expect(calendar).toHaveProperty("2020-02-10");
     expect(Object.keys(calendar).length).toBe(32);
     calendar = Planning.generateEmptyCalendar(3);
-  expect(calendar).toHaveProperty('2020-01-14');
+    expect(calendar).toHaveProperty("2020-01-14");
-  expect(calendar).toHaveProperty('2020-01-20');
+    expect(calendar).toHaveProperty("2020-01-20");
-  expect(calendar).toHaveProperty('2020-02-10');
+    expect(calendar).toHaveProperty("2020-02-10");
-  expect(calendar).toHaveProperty('2020-02-14');
+    expect(calendar).toHaveProperty("2020-02-14");
-  expect(calendar).toHaveProperty('2020-03-20');
+    expect(calendar).toHaveProperty("2020-03-20");
-  expect(calendar).toHaveProperty('2020-04-12');
+    expect(calendar).toHaveProperty("2020-04-12");
     expect(Object.keys(calendar).length).toBe(92);
 });
 
 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);
@@ -190,29 +176,31 @@ test('pushEventInOrder', () => {
 });
 
 test('generateEventAgenda', () => {
-  jest
+    jest.spyOn(Date, 'now')
-    .spyOn(Date, 'now')
+        .mockImplementation(() =>
-    .mockImplementation(() => new Date('2020-01-14T00:00:00.000Z').getTime());
+            new Date('2020-01-14T00:00:00.000Z').getTime()
+        );
     let eventList = [
-    {date_begin: '2020-01-14 09:15'},
+        {date_begin: "2020-01-14 09:15"},
-    {date_begin: '2020-02-01 09:15'},
+        {date_begin: "2020-02-01 09:15"},
-    {date_begin: '2020-01-15 09:15'},
+        {date_begin: "2020-01-15 09:15"},
-    {date_begin: '2020-02-01 09:30'},
+        {date_begin: "2020-02-01 09:30"},
-    {date_begin: '2020-02-01 08:30'},
+        {date_begin: "2020-02-01 08:30"},
     ];
     const calendar = Planning.generateEventAgenda(eventList, 2);
-  expect(calendar['2020-01-14'].length).toBe(1);
+    expect(calendar["2020-01-14"].length).toBe(1);
-  expect(calendar['2020-01-14'][0]).toBe(eventList[0]);
+    expect(calendar["2020-01-14"][0]).toBe(eventList[0]);
-  expect(calendar['2020-01-15'].length).toBe(1);
+    expect(calendar["2020-01-15"].length).toBe(1);
-  expect(calendar['2020-01-15'][0]).toBe(eventList[2]);
+    expect(calendar["2020-01-15"][0]).toBe(eventList[2]);
-  expect(calendar['2020-02-01'].length).toBe(3);
+    expect(calendar["2020-02-01"].length).toBe(3);
-  expect(calendar['2020-02-01'][0]).toBe(eventList[4]);
+    expect(calendar["2020-02-01"][0]).toBe(eventList[4]);
-  expect(calendar['2020-02-01'][1]).toBe(eventList[1]);
+    expect(calendar["2020-02-01"][1]).toBe(eventList[1]);
-  expect(calendar['2020-02-01'][2]).toBe(eventList[3]);
+    expect(calendar["2020-02-01"][2]).toBe(eventList[3]);
 });
 
 test('getCurrentDateString', () => {
-  jest.spyOn(Date, 'now').mockImplementation(() => {
+    jest.spyOn(Date, 'now')
+        .mockImplementation(() => {
             let date = new Date();
             date.setFullYear(2020, 0, 14);
             date.setHours(15, 30, 54, 65);

__tests__/utils/Proxiwash.test.js

@@ -1,167 +1,142 @@
-/* eslint-disable */
-
 import React from 'react';
-import {
+import {getCleanedMachineWatched, getMachineEndDate, getMachineOfId, isMachineWatched} from "../../src/utils/Proxiwash";
-  getCleanedMachineWatched,
-  getMachineEndDate,
-  getMachineOfId,
-  isMachineWatched,
-} from '../../src/utils/Proxiwash';
 
 test('getMachineEndDate', () => {
-  jest
+    jest.spyOn(Date, 'now')
-    .spyOn(Date, 'now')
+        .mockImplementation(() =>
-    .mockImplementation(() => new Date('2020-01-14T15:00:00.000Z').getTime());
+            new Date('2020-01-14T15:00:00.000Z').getTime()
+        );
     let expectDate = new Date('2020-01-14T15:00:00.000Z');
     expectDate.setHours(23);
     expectDate.setMinutes(10);
-  expect(getMachineEndDate({endTime: '23:10'}).getTime()).toBe(
+    expect(getMachineEndDate({endTime: "23:10"}).getTime()).toBe(expectDate.getTime());
-    expectDate.getTime(),
-  );
 
     expectDate.setHours(16);
     expectDate.setMinutes(30);
-  expect(getMachineEndDate({endTime: '16:30'}).getTime()).toBe(
+    expect(getMachineEndDate({endTime: "16:30"}).getTime()).toBe(expectDate.getTime());
-    expectDate.getTime(),
+
+    expect(getMachineEndDate({endTime: "15:30"})).toBeNull();
+
+    expect(getMachineEndDate({endTime: "13:10"})).toBeNull();
+
+    jest.spyOn(Date, 'now')
+        .mockImplementation(() =>
+            new Date('2020-01-14T23:00:00.000Z').getTime()
         );
-
-  expect(getMachineEndDate({endTime: '15:30'})).toBeNull();
-
-  expect(getMachineEndDate({endTime: '13:10'})).toBeNull();
-
-  jest
-    .spyOn(Date, 'now')
-    .mockImplementation(() => new Date('2020-01-14T23:00:00.000Z').getTime());
     expectDate = new Date('2020-01-14T23:00:00.000Z');
     expectDate.setHours(0);
     expectDate.setMinutes(30);
-  expect(getMachineEndDate({endTime: '00:30'}).getTime()).toBe(
+    expect(getMachineEndDate({endTime: "00:30"}).getTime()).toBe(expectDate.getTime());
-    expectDate.getTime(),
-  );
 });
 
 test('isMachineWatched', () => {
     let machineList = [
         {
-      number: '0',
+            number: "0",
-      endTime: '23:30',
+            endTime: "23:30",
         },
         {
-      number: '1',
+            number: "1",
-      endTime: '20:30',
+            endTime: "20:30",
         },
     ];
-  expect(
+    expect(isMachineWatched({number: "0", endTime: "23:30"}, machineList)).toBeTrue();
-    isMachineWatched({number: '0', endTime: '23:30'}, machineList),
+    expect(isMachineWatched({number: "1", endTime: "20:30"}, machineList)).toBeTrue();
-  ).toBeTrue();
+    expect(isMachineWatched({number: "3", endTime: "20:30"}, machineList)).toBeFalse();
-  expect(
+    expect(isMachineWatched({number: "1", endTime: "23:30"}, machineList)).toBeFalse();
-    isMachineWatched({number: '1', endTime: '20:30'}, machineList),
-  ).toBeTrue();
-  expect(
-    isMachineWatched({number: '3', endTime: '20:30'}, machineList),
-  ).toBeFalse();
-  expect(
-    isMachineWatched({number: '1', endTime: '23:30'}, machineList),
-  ).toBeFalse();
 });
 
 test('getMachineOfId', () => {
     let machineList = [
         {
-      number: '0',
+            number: "0",
         },
         {
-      number: '1',
+            number: "1",
         },
     ];
-  expect(getMachineOfId('0', machineList)).toStrictEqual({number: '0'});
+    expect(getMachineOfId("0", machineList)).toStrictEqual({number: "0"});
-  expect(getMachineOfId('1', machineList)).toStrictEqual({number: '1'});
+    expect(getMachineOfId("1", machineList)).toStrictEqual({number: "1"});
-  expect(getMachineOfId('3', machineList)).toBeNull();
+    expect(getMachineOfId("3", machineList)).toBeNull();
 });
 
 test('getCleanedMachineWatched', () => {
     let machineList = [
         {
-      number: '0',
+            number: "0",
-      endTime: '23:30',
+            endTime: "23:30",
         },
         {
-      number: '1',
+            number: "1",
-      endTime: '20:30',
+            endTime: "20:30",
         },
         {
-      number: '2',
+            number: "2",
-      endTime: '',
+            endTime: "",
         },
     ];
     let watchList = [
         {
-      number: '0',
+            number: "0",
-      endTime: '23:30',
+            endTime: "23:30",
         },
         {
-      number: '1',
+            number: "1",
-      endTime: '20:30',
+            endTime: "20:30",
         },
         {
-      number: '2',
+            number: "2",
-      endTime: '',
+            endTime: "",
         },
     ];
     let cleanedList = watchList;
-  expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(
+    expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(cleanedList);
-    cleanedList,
-  );
 
     watchList = [
         {
-      number: '0',
+            number: "0",
-      endTime: '23:30',
+            endTime: "23:30",
         },
         {
-      number: '1',
+            number: "1",
-      endTime: '20:30',
+            endTime: "20:30",
         },
         {
-      number: '2',
+            number: "2",
-      endTime: '15:30',
+            endTime: "15:30",
         },
     ];
     cleanedList = [
         {
-      number: '0',
+            number: "0",
-      endTime: '23:30',
+            endTime: "23:30",
         },
         {
-      number: '1',
+            number: "1",
-      endTime: '20:30',
+            endTime: "20:30",
         },
     ];
-  expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(
+    expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(cleanedList);
-    cleanedList,
-  );
 
     watchList = [
         {
-      number: '0',
+            number: "0",
-      endTime: '23:30',
+            endTime: "23:30",
         },
         {
-      number: '1',
+            number: "1",
-      endTime: '20:31',
+            endTime: "20:31",
         },
         {
-      number: '3',
+            number: "3",
-      endTime: '15:30',
+            endTime: "15:30",
         },
     ];
     cleanedList = [
         {
-      number: '0',
+            number: "0",
-      endTime: '23:30',
+            endTime: "23:30",
         },
     ];
-  expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(
+    expect(getCleanedMachineWatched(watchList, machineList)).toStrictEqual(cleanedList);
-    cleanedList,
-  );
 });

__tests__/utils/WebData.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {isResponseValid} from "../../src/utils/WebData";
+
+let fetch = require('isomorphic-fetch'); // fetch is not implemented in nodeJS but in react-native
+
+test('isRequestResponseValid', () => {
+    let json = {
+        error: 0,
+        data: {}
+    };
+    expect(isResponseValid(json)).toBeTrue();
+    json = {
+        error: 1,
+        data: {}
+    };
+    expect(isResponseValid(json)).toBeTrue();
+    json = {
+        error: 50,
+        data: {}
+    };
+    expect(isResponseValid(json)).toBeTrue();
+    json = {
+        error: 50,
+        data: {truc: 'machin'}
+    };
+    expect(isResponseValid(json)).toBeTrue();
+    json = {
+        message: 'coucou'
+    };
+    expect(isResponseValid(json)).toBeFalse();
+    json = {
+        error: 'coucou',
+        data: {truc: 'machin'}
+    };
+    expect(isResponseValid(json)).toBeFalse();
+    json = {
+        error: 0,
+        data: 'coucou'
+    };
+    expect(isResponseValid(json)).toBeFalse();
+    json = {
+        error: 0,
+    };
+    expect(isResponseValid(json)).toBeFalse();
+});

__tests__/utils/WebData.test.js

@@ -1,47 +0,0 @@
-/* eslint-disable */
-
-import React from 'react';
-import {isApiResponseValid} from '../../src/utils/WebData';
-
-const fetch = require('isomorphic-fetch'); // fetch is not implemented in nodeJS but in react-native
-
-test('isRequestResponseValid', () => {
-  let json = {
-    error: 0,
-    data: {},
-  };
-  expect(isApiResponseValid(json)).toBeTrue();
-  json = {
-    error: 1,
-    data: {},
-  };
-  expect(isApiResponseValid(json)).toBeTrue();
-  json = {
-    error: 50,
-    data: {},
-  };
-  expect(isApiResponseValid(json)).toBeTrue();
-  json = {
-    error: 50,
-    data: {truc: 'machin'},
-  };
-  expect(isApiResponseValid(json)).toBeTrue();
-  json = {
-    message: 'coucou',
-  };
-  expect(isApiResponseValid(json)).toBeFalse();
-  json = {
-    error: 'coucou',
-    data: {truc: 'machin'},
-  };
-  expect(isApiResponseValid(json)).toBeFalse();
-  json = {
-    error: 0,
-    data: 'coucou',
-  };
-  expect(isApiResponseValid(json)).toBeFalse();
-  json = {
-    error: 0,
-  };
-  expect(isApiResponseValid(json)).toBeFalse();
-});

index.js

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

metro.config.js

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

src/components/Amicale/Vote/VoteNotAvailable.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import {View} from 'react-native';
 import {Headline, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
 type PropsType = {
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 class VoteNotAvailable extends React.Component<PropsType> {

src/components/Amicale/Vote/VoteResults.js

@@ -12,12 +12,12 @@ import {
 import {FlatList, StyleSheet} from 'react-native';
 import i18n from 'i18n-js';
 import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
 type PropsType = {
   teams: Array<VoteTeamType>,
   dateEnd: string,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 const styles = StyleSheet.create({

src/components/Amicale/Vote/VoteWait.js

@@ -9,14 +9,14 @@ import {
 } from 'react-native-paper';
 import {StyleSheet} from 'react-native';
 import i18n from 'i18n-js';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
 type PropsType = {
   startDate: string | null,
   justVoted: boolean,
   hasVoted: boolean,
   isVoteRunning: boolean,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 const styles = StyleSheet.create({

src/components/Animations/AnimatedAccordion.js

@@ -5,10 +5,10 @@ import {View} from 'react-native';
 import {List, withTheme} from 'react-native-paper';
 import Collapsible from 'react-native-collapsible';
 import * as Animatable from 'react-native-animatable';
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from '../../managers/ThemeManager';
 
 type PropsType = {
-  theme: CustomThemeType,
+  theme: CustomTheme,
   title: string,
   subtitle?: string,
   left?: () => React.Node,

src/components/Animations/AnimatedBottomBar.js

@@ -7,14 +7,13 @@ import * as Animatable from 'react-native-animatable';
 import {StackNavigationProp} from '@react-navigation/stack';
 import AutoHideHandler from '../../utils/AutoHideHandler';
 import CustomTabBar from '../Tabbar/CustomTabBar';
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from '../../managers/ThemeManager';
-import type {OnScrollType} from '../../utils/AutoHideHandler';
 
 const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
 
 type PropsType = {
   navigation: StackNavigationProp,
-  theme: CustomThemeType,
+  theme: CustomTheme,
   onPress: (action: string, data?: string) => void,
   seekAttention: boolean,
 };
@@ -95,7 +94,7 @@ class AnimatedBottomBar extends React.Component<PropsType, StateType> {
     }
   };
 
-  onScroll = (event: OnScrollType) => {
+  onScroll = (event: SyntheticEvent<EventTarget>) => {
     this.hideHandler.onScroll(event);
   };
 

src/components/Collapsible/CollapsibleComponent.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {Collapsible} from 'react-navigation-collapsible';
-import withCollapsible from '../../utils/withCollapsible';
+import {withCollapsible} from '../../utils/withCollapsible';
 import CustomTabBar from '../Tabbar/CustomTabBar';
 
 export type CollapsibleComponentPropsType = {

src/components/Home/ActionsDashboardItem.js

@@ -5,11 +5,11 @@ import {List, withTheme} from 'react-native-paper';
 import {View} from 'react-native';
 import i18n from 'i18n-js';
 import {StackNavigationProp} from '@react-navigation/stack';
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from '../../managers/ThemeManager';
 
 type PropsType = {
   navigation: StackNavigationProp,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 class ActionsDashBoardItem extends React.Component<PropsType> {

src/components/Home/EventDashboardItem.js

@@ -10,12 +10,12 @@ import {
 } from 'react-native-paper';
 import {StyleSheet, View} from 'react-native';
 import i18n from 'i18n-js';
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from '../../managers/ThemeManager';
 
 type PropsType = {
   eventNumber: number,
   clickAction: () => void,
-  theme: CustomThemeType,
+  theme: CustomTheme,
   children?: React.Node,
 };
 

src/components/Home/SmallDashboardItem.js

@@ -4,13 +4,13 @@ import * as React from 'react';
 import {Badge, TouchableRipple, withTheme} from 'react-native-paper';
 import {Dimensions, Image, View} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from '../../managers/ThemeManager';
 
 type PropsType = {
   image: string | null,
   onPress: () => void | null,
   badgeCount: number | null,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 const AnimatableBadge = Animatable.createAnimatableComponent(Badge);

src/components/Lists/Clubs/ClubListItem.js

@@ -7,14 +7,14 @@ import type {
   ClubCategoryType,
   ClubType,
 } from '../../../screens/Amicale/Clubs/ClubListScreen';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
 type PropsType = {
   onPress: () => void,
   categoryTranslator: (id: number) => ClubCategoryType,
   item: ClubType,
   height: number,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 class ClubListItem extends React.Component<PropsType> {

src/components/Lists/DashboardEdit/DashboardEditAccordion.js

@@ -10,13 +10,13 @@ import type {
   ServiceCategoryType,
   ServiceItemType,
 } from '../../../managers/ServicesManager';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
 type PropsType = {
   item: ServiceCategoryType,
   activeDashboard: Array<string>,
   onPress: (service: ServiceItemType) => void,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 const LIST_ITEM_HEIGHT = 64;

src/components/Lists/DashboardEdit/DashboardEditItem.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import {Image} from 'react-native';
 import {List, withTheme} from 'react-native-paper';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 import type {ServiceItemType} from '../../../managers/ServicesManager';
 
 type PropsType = {
@@ -11,7 +11,7 @@ type PropsType = {
   isActive: boolean,
   height: number,
   onPress: () => void,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 class DashboardEditItem extends React.Component<PropsType> {

src/components/Lists/DashboardEdit/DashboardEditPreviewItem.js

@@ -3,13 +3,13 @@
 import * as React from 'react';
 import {TouchableRipple, withTheme} from 'react-native-paper';
 import {Dimensions, Image, View} from 'react-native';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
 type PropsType = {
   image: string,
   isActive: boolean,
   onPress: () => void,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 /**

src/components/Lists/Equipment/EquipmentListItem.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {Avatar, List, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
 import {StackNavigationProp} from '@react-navigation/stack';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 import type {DeviceType} from '../../../screens/Amicale/Equipment/EquipmentListScreen';
 import {
   getFirstEquipmentAvailability,
@@ -17,7 +17,7 @@ type PropsType = {
   userDeviceRentDates: [string, string],
   item: DeviceType,
   height: number,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 class EquipmentListItem extends React.Component<PropsType> {

src/components/Lists/PlanexGroups/GroupListAccordion.js

@@ -10,7 +10,7 @@ import type {
   PlanexGroupType,
   PlanexGroupCategoryType,
 } from '../../../screens/Planex/GroupSelectionScreen';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
 type PropsType = {
   item: PlanexGroupCategoryType,
@@ -19,7 +19,7 @@ type PropsType = {
   currentSearchString: string,
   favoriteNumber: number,
   height: number,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 const LIST_ITEM_HEIGHT = 64;

src/components/Lists/PlanexGroups/GroupListItem.js

@@ -2,11 +2,11 @@
 
 import * as React from 'react';
 import {IconButton, List, withTheme} from 'react-native-paper';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
 
 type PropsType = {
-  theme: CustomThemeType,
+  theme: CustomTheme,
   onPress: () => void,
   onStarPress: () => void,
   item: PlanexGroupType,

src/components/Lists/Proxiwash/ProxiwashListItem.js

@@ -1,65 +1,36 @@
-// @flow
-
 import * as React from 'react';
-import {
+import {Avatar, Caption, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper';
-  Avatar,
+import {StyleSheet, View} from "react-native";
-  Caption,
+import ProxiwashConstants from "../../../constants/ProxiwashConstants";
-  List,
+import i18n from "i18n-js";
-  ProgressBar,
+import AprilFoolsManager from "../../../managers/AprilFoolsManager";
-  Surface,
+import * as Animatable from "react-native-animatable";
-  Text,
+import type {CustomTheme} from "../../../managers/ThemeManager";
-  withTheme,
+import type {Machine} from "../../../screens/Proxiwash/ProxiwashScreen";
-} from 'react-native-paper';
-import {StyleSheet, View} from 'react-native';
-import i18n from 'i18n-js';
-import * as Animatable from 'react-native-animatable';
-import ProxiwashConstants from '../../../constants/ProxiwashConstants';
-import AprilFoolsManager from '../../../managers/AprilFoolsManager';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
-import type {ProxiwashMachineType} from '../../../screens/Proxiwash/ProxiwashScreen';
 
-type PropsType = {
+type Props = {
-  item: ProxiwashMachineType,
+    item: Machine,
-  theme: CustomThemeType,
+    theme: CustomTheme,
-  onPress: (
+    onPress: Function,
-    title: string,
-    item: ProxiwashMachineType,
-    isDryer: boolean,
-  ) => void,
     isWatched: boolean,
     isDryer: boolean,
     height: number,
-};
+}
 
 const AnimatedIcon = Animatable.createAnimatableComponent(Avatar.Icon);
 
-const styles = StyleSheet.create({
-  container: {
-    margin: 5,
-    justifyContent: 'center',
-    elevation: 1,
-  },
-  icon: {
-    backgroundColor: 'transparent',
-  },
-  progressBar: {
-    position: 'absolute',
-    left: 0,
-    borderRadius: 4,
-  },
-});
 
 /**
  * Component used to display a proxiwash item, showing machine progression and state
  */
-class ProxiwashListItem extends React.Component<PropsType> {
+class ProxiwashListItem extends React.Component<Props> {
-  stateColors: {[key: string]: string};
 
-  stateStrings: {[key: string]: string};
+    stateColors: Object;
+    stateStrings: Object;
 
     title: string;
 
-  constructor(props: PropsType) {
+    constructor(props) {
         super(props);
         this.stateColors = {};
         this.stateStrings = {};
@@ -68,113 +39,80 @@ class ProxiwashListItem extends React.Component<PropsType> {
 
         let displayNumber = props.item.number;
         if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
-      displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(
+            displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(parseInt(props.item.number));
-        parseInt(props.item.number, 10),
-      );
 
         this.title = props.isDryer
             ? i18n.t('screens.proxiwash.dryer')
             : i18n.t('screens.proxiwash.washer');
-    this.title += ` n°${displayNumber}`;
+        this.title += ' n°' + displayNumber;
     }
 
-  shouldComponentUpdate(nextProps: PropsType): boolean {
+    shouldComponentUpdate(nextProps: Props): boolean {
-    const {props} = this;
+        const props = this.props;
-    return (
+        return (nextProps.theme.dark !== props.theme.dark)
-      nextProps.theme.dark !== props.theme.dark ||
+            || (nextProps.item.state !== props.item.state)
-      nextProps.item.state !== props.item.state ||
+            || (nextProps.item.donePercent !== props.item.donePercent)
-      nextProps.item.donePercent !== props.item.donePercent ||
+            || (nextProps.isWatched !== props.isWatched);
-      nextProps.isWatched !== props.isWatched
-    );
     }
 
-  onListItemPress = () => {
-    const {props} = this;
-    props.onPress(this.title, props.item, props.isDryer);
-  };
-
     updateStateStrings() {
-    this.stateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
+        this.stateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t('screens.proxiwash.states.ready');
-      'screens.proxiwash.states.ready',
+        this.stateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t('screens.proxiwash.states.running');
-    );
+        this.stateStrings[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = i18n.t('screens.proxiwash.states.runningNotStarted');
-    this.stateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t(
+        this.stateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t('screens.proxiwash.states.finished');
-      'screens.proxiwash.states.running',
+        this.stateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t('screens.proxiwash.states.broken');
-    );
+        this.stateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t('screens.proxiwash.states.error');
-    this.stateStrings[
+        this.stateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t('screens.proxiwash.states.unknown');
-      ProxiwashConstants.machineStates.RUNNING_NOT_STARTED
-    ] = i18n.t('screens.proxiwash.states.runningNotStarted');
-    this.stateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t(
-      'screens.proxiwash.states.finished',
-    );
-    this.stateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t(
-      'screens.proxiwash.states.broken',
-    );
-    this.stateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t(
-      'screens.proxiwash.states.error',
-    );
-    this.stateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t(
-      'screens.proxiwash.states.unknown',
-    );
     }
 
     updateStateColors() {
-    const {props} = this;
+        const colors = this.props.theme.colors;
-    const {colors} = props.theme;
+        this.stateColors[ProxiwashConstants.machineStates.AVAILABLE] = colors.proxiwashReadyColor;
-    this.stateColors[ProxiwashConstants.machineStates.AVAILABLE] =
+        this.stateColors[ProxiwashConstants.machineStates.RUNNING] = colors.proxiwashRunningColor;
-      colors.proxiwashReadyColor;
+        this.stateColors[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = colors.proxiwashRunningNotStartedColor;
-    this.stateColors[ProxiwashConstants.machineStates.RUNNING] =
+        this.stateColors[ProxiwashConstants.machineStates.FINISHED] = colors.proxiwashFinishedColor;
-      colors.proxiwashRunningColor;
+        this.stateColors[ProxiwashConstants.machineStates.UNAVAILABLE] = colors.proxiwashBrokenColor;
-    this.stateColors[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] =
+        this.stateColors[ProxiwashConstants.machineStates.ERROR] = colors.proxiwashErrorColor;
-      colors.proxiwashRunningNotStartedColor;
+        this.stateColors[ProxiwashConstants.machineStates.UNKNOWN] = colors.proxiwashUnknownColor;
-    this.stateColors[ProxiwashConstants.machineStates.FINISHED] =
-      colors.proxiwashFinishedColor;
-    this.stateColors[ProxiwashConstants.machineStates.UNAVAILABLE] =
-      colors.proxiwashBrokenColor;
-    this.stateColors[ProxiwashConstants.machineStates.ERROR] =
-      colors.proxiwashErrorColor;
-    this.stateColors[ProxiwashConstants.machineStates.UNKNOWN] =
-      colors.proxiwashUnknownColor;
     }
 
-  render(): React.Node {
+    onListItemPress = () => this.props.onPress(this.title, this.props.item, this.props.isDryer);
-    const {props} = this;
+
-    const {colors} = props.theme;
+    render() {
+        const props = this.props;
+        const colors = props.theme.colors;
         const machineState = props.item.state;
         const isRunning = machineState === ProxiwashConstants.machineStates.RUNNING;
         const isReady = machineState === ProxiwashConstants.machineStates.AVAILABLE;
-    const description = isRunning
+        const description = isRunning ? props.item.startTime + '/' + props.item.endTime : '';
-      ? `${props.item.startTime}/${props.item.endTime}`
-      : '';
         const stateIcon = ProxiwashConstants.stateIcons[machineState];
         const stateString = this.stateStrings[machineState];
-    let progress;
+        const progress = isRunning
-    if (isRunning && props.item.donePercent !== '')
+            ? props.item.donePercent !== ''
-      progress = parseFloat(props.item.donePercent) / 100;
+                ? parseFloat(props.item.donePercent) / 100
-    else if (isRunning) progress = 0;
+                : 0
-    else progress = 1;
+            : 1;
 
-    const icon = props.isWatched ? (
+        const icon = props.isWatched
-      <AnimatedIcon
+            ? <AnimatedIcon
-        icon="bell-ring"
+                icon={'bell-ring'}
-        animation="rubberBand"
+                animation={"rubberBand"}
                 useNativeDriver
                 size={50}
                 color={colors.primary}
                 style={styles.icon}
             />
-    ) : (
+            : <AnimatedIcon
-      <AnimatedIcon
                 icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
-        animation={isRunning ? 'pulse' : undefined}
+                animation={isRunning ? "pulse" : undefined}
-        iterationCount="infinite"
+                iterationCount={"infinite"}
-        easing="linear"
+                easing={"linear"}
                 duration={1000}
                 useNativeDriver
                 size={40}
                 color={colors.text}
                 style={styles.icon}
-      />
+            />;
-    );
         this.updateStateColors();
         return (
             <Surface
@@ -182,17 +120,20 @@ class ProxiwashListItem extends React.Component<PropsType> {
                     ...styles.container,
                     height: props.height,
                     borderRadius: 4,
-        }}>
+                }}
-        {!isReady ? (
+            >
-          <ProgressBar
+                {
+                    !isReady
+                        ? <ProgressBar
                             style={{
                                 ...styles.progressBar,
-              height: props.height,
+                                height: props.height
                             }}
                             progress={progress}
                             color={this.stateColors[machineState]}
                         />
-        ) : null}
+                        : null
+                }
                 <List.Item
                     title={this.title}
                     description={description}
@@ -201,23 +142,25 @@ class ProxiwashListItem extends React.Component<PropsType> {
                         justifyContent: 'center',
                     }}
                     onPress={this.onListItemPress}
-          left={(): React.Node => icon}
+                    left={() => icon}
-          right={(): React.Node => (
+                    right={() => (
-            <View style={{flexDirection: 'row'}}>
+                        <View style={{flexDirection: 'row',}}>
-              <View style={{justifyContent: 'center'}}>
+                            <View style={{justifyContent: 'center',}}>
-                <Text
+                                <Text style={
-                  style={
+                                    machineState === ProxiwashConstants.machineStates.FINISHED ?
-                    machineState === ProxiwashConstants.machineStates.FINISHED
+                                        {fontWeight: 'bold',} : {}
-                      ? {fontWeight: 'bold'}
+                                }
-                      : {}
+                                >
-                  }>
                                     {stateString}
                                 </Text>
-                {machineState === ProxiwashConstants.machineStates.RUNNING ? (
+                                {
-                  <Caption>{props.item.remainingTime} min</Caption>
+                                    machineState === ProxiwashConstants.machineStates.RUNNING
-                ) : null}
+                                        ? <Caption>{props.item.remainingTime} min</Caption>
+                                        : null
+                                }
+
                             </View>
-              <View style={{justifyContent: 'center'}}>
+                            <View style={{justifyContent: 'center',}}>
                                 <Avatar.Icon
                                     icon={stateIcon}
                                     color={colors.text}
@@ -225,12 +168,27 @@ class ProxiwashListItem extends React.Component<PropsType> {
                                     style={styles.icon}
                                 />
                             </View>
-            </View>
+                        </View>)}
-          )}
                 />
             </Surface>
         );
     }
 }
 
+const styles = StyleSheet.create({
+    container: {
+        margin: 5,
+        justifyContent: 'center',
+        elevation: 1
+    },
+    icon: {
+        backgroundColor: 'transparent'
+    },
+    progressBar: {
+        position: 'absolute',
+        left: 0,
+        borderRadius: 4,
+    },
+});
+
 export default withTheme(ProxiwashListItem);

src/components/Lists/Proxiwash/ProxiwashSectionHeader.js

@@ -1,17 +1,56 @@
-// @flow
-
 import * as React from 'react';
 import {Avatar, Text, withTheme} from 'react-native-paper';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from "react-native";
-import i18n from 'i18n-js';
+import i18n from "i18n-js";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
 
-type PropsType = {
+type Props = {
-  theme: CustomThemeType,
     title: string,
     isDryer: boolean,
     nbAvailable: number,
-};
+}
+
+/**
+ * Component used to display a proxiwash item, showing machine progression and state
+ */
+class ProxiwashListItem extends React.Component<Props> {
+
+    constructor(props) {
+        super(props);
+    }
+
+    shouldComponentUpdate(nextProps: Props) {
+        return (nextProps.theme.dark !== this.props.theme.dark)
+            || (nextProps.nbAvailable !== this.props.nbAvailable)
+    }
+
+    render() {
+        const props = this.props;
+        const subtitle = props.nbAvailable + ' ' + (
+            (props.nbAvailable <= 1)
+                ? i18n.t('screens.proxiwash.numAvailable')
+                : i18n.t('screens.proxiwash.numAvailablePlural'));
+        const iconColor = props.nbAvailable > 0
+        ? this.props.theme.colors.success
+        : this.props.theme.colors.primary;
+        return (
+            <View style={styles.container}>
+                <Avatar.Icon
+                    icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
+                    color={iconColor}
+                    style={styles.icon}
+                />
+                <View style={{justifyContent: 'center'}}>
+                    <Text style={styles.text}>
+                        {props.title}
+                    </Text>
+                    <Text style={{color: this.props.theme.colors.subtitle}}>
+                        {subtitle}
+                    </Text>
+                </View>
+            </View>
+        );
+    }
+}
 
 const styles = StyleSheet.create({
     container: {
@@ -22,51 +61,12 @@ const styles = StyleSheet.create({
         marginTop: 20,
     },
     icon: {
-    backgroundColor: 'transparent',
+        backgroundColor: 'transparent'
     },
     text: {
         fontSize: 20,
         fontWeight: 'bold',
-  },
+    }
 });
 
-/**
- * Component used to display a proxiwash item, showing machine progression and state
- */
-class ProxiwashListItem extends React.Component<PropsType> {
-  shouldComponentUpdate(nextProps: PropsType): boolean {
-    const {props} = this;
-    return (
-      nextProps.theme.dark !== props.theme.dark ||
-      nextProps.nbAvailable !== props.nbAvailable
-    );
-  }
-
-  render(): React.Node {
-    const {props} = this;
-    const subtitle = `${props.nbAvailable} ${
-      props.nbAvailable <= 1
-        ? i18n.t('screens.proxiwash.numAvailable')
-        : i18n.t('screens.proxiwash.numAvailablePlural')
-    }`;
-    const iconColor =
-      props.nbAvailable > 0
-        ? props.theme.colors.success
-        : props.theme.colors.primary;
-    return (
-      <View style={styles.container}>
-        <Avatar.Icon
-          icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
-          color={iconColor}
-          style={styles.icon}
-        />
-        <View style={{justifyContent: 'center'}}>
-          <Text style={styles.text}>{props.title}</Text>
-          <Text style={{color: props.theme.colors.subtitle}}>{subtitle}</Text>
-        </View>
-      </View>
-    );
-  }
-}
-
 export default withTheme(ProxiwashListItem);

src/components/Mascot/Mascot.js

@@ -1,35 +1,35 @@
 // @flow
 
 import * as React from 'react';
-import * as Animatable from 'react-native-animatable';
+import * as Animatable from "react-native-animatable";
-import {Image, TouchableWithoutFeedback, View} from 'react-native';
+import {Image, TouchableWithoutFeedback, View} from "react-native";
-import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
 
-export type AnimatableViewRefType = {current: null | Animatable.View};
+type Props = {
+    style?: ViewStyle,
+    emotion: number,
+    animated: boolean,
+    entryAnimation: Animatable.AnimatableProperties | null,
+    loopAnimation: Animatable.AnimatableProperties | null,
+    onPress?: (viewRef: AnimatableViewRef) => null,
+    onLongPress?: (viewRef: AnimatableViewRef) => null,
+}
 
-type PropsType = {
+type State = {
-  emotion?: number,
-  animated?: boolean,
-  style?: ViewStyle | null,
-  entryAnimation?: Animatable.AnimatableProperties | null,
-  loopAnimation?: Animatable.AnimatableProperties | null,
-  onPress?: null | ((viewRef: AnimatableViewRefType) => void),
-  onLongPress?: null | ((viewRef: AnimatableViewRefType) => void),
-};
-
-type StateType = {
     currentEmotion: number,
-};
+}
 
-const MASCOT_IMAGE = require('../../../assets/mascot/mascot.png');
+export type AnimatableViewRef = {current: null | Animatable.View};
-const MASCOT_EYES_NORMAL = require('../../../assets/mascot/mascot_eyes_normal.png');
+
-const MASCOT_EYES_GIRLY = require('../../../assets/mascot/mascot_eyes_girly.png');
+const MASCOT_IMAGE = require("../../../assets/mascot/mascot.png");
-const MASCOT_EYES_CUTE = require('../../../assets/mascot/mascot_eyes_cute.png');
+const MASCOT_EYES_NORMAL = require("../../../assets/mascot/mascot_eyes_normal.png");
-const MASCOT_EYES_WINK = require('../../../assets/mascot/mascot_eyes_wink.png');
+const MASCOT_EYES_GIRLY = require("../../../assets/mascot/mascot_eyes_girly.png");
-const MASCOT_EYES_HEART = require('../../../assets/mascot/mascot_eyes_heart.png');
+const MASCOT_EYES_CUTE = require("../../../assets/mascot/mascot_eyes_cute.png");
-const MASCOT_EYES_ANGRY = require('../../../assets/mascot/mascot_eyes_angry.png');
+const MASCOT_EYES_WINK = require("../../../assets/mascot/mascot_eyes_wink.png");
-const MASCOT_GLASSES = require('../../../assets/mascot/mascot_glasses.png');
+const MASCOT_EYES_HEART = require("../../../assets/mascot/mascot_eyes_heart.png");
-const MASCOT_SUNGLASSES = require('../../../assets/mascot/mascot_sunglasses.png');
+const MASCOT_EYES_ANGRY = require("../../../assets/mascot/mascot_eyes_angry.png");
+const MASCOT_GLASSES = require("../../../assets/mascot/mascot_glasses.png");
+const MASCOT_SUNGLASSES = require("../../../assets/mascot/mascot_sunglasses.png");
 
 export const EYE_STYLE = {
     NORMAL: 0,
@@ -38,12 +38,12 @@ export const EYE_STYLE = {
     WINK: 4,
     HEART: 5,
     ANGRY: 6,
-};
+}
 
 const GLASSES_STYLE = {
     NORMAL: 0,
-  COOl: 1,
+    COOl: 1
-};
+}
 
 export const MASCOT_STYLE = {
     NORMAL: 0,
@@ -58,40 +58,40 @@ export const MASCOT_STYLE = {
     RANDOM: 999,
 };
 
-class Mascot extends React.Component<PropsType, StateType> {
+
+class Mascot extends React.Component<Props, State> {
+
     static defaultProps = {
-    emotion: MASCOT_STYLE.NORMAL,
         animated: false,
-    style: null,
         entryAnimation: {
             useNativeDriver: true,
-      animation: 'rubberBand',
+            animation: "rubberBand",
             duration: 2000,
         },
         loopAnimation: {
             useNativeDriver: true,
-      animation: 'swing',
+            animation: "swing",
             duration: 2000,
             iterationDelay: 250,
-      iterationCount: 'infinite',
+            iterationCount: "infinite",
         },
-    onPress: null,
+        clickAnimation: {
-    onLongPress: null,
+            useNativeDriver: true,
-  };
+            animation: "rubberBand",
+            duration: 2000,
+        },
+    }
 
-  viewRef: AnimatableViewRefType;
+    viewRef: AnimatableViewRef;
+    eyeList: { [key: number]: number | string };
+    glassesList: { [key: number]: number | string };
 
-  eyeList: {[key: number]: number | string};
+    onPress: (viewRef: AnimatableViewRef) => null;
-
+    onLongPress: (viewRef: AnimatableViewRef) => null;
-  glassesList: {[key: number]: number | string};
-
-  onPress: (viewRef: AnimatableViewRefType) => void;
-
-  onLongPress: (viewRef: AnimatableViewRefType) => void;
 
     initialEmotion: number;
 
-  constructor(props: PropsType) {
+    constructor(props: Props) {
         super(props);
         this.viewRef = React.createRef();
         this.eyeList = {};
@@ -106,94 +106,87 @@ class Mascot extends React.Component<PropsType, StateType> {
         this.glassesList[GLASSES_STYLE.NORMAL] = MASCOT_GLASSES;
         this.glassesList[GLASSES_STYLE.COOl] = MASCOT_SUNGLASSES;
 
-    this.initialEmotion =
+        this.initialEmotion = this.props.emotion;
-      props.emotion != null ? props.emotion : Mascot.defaultProps.emotion;
 
         if (this.initialEmotion === MASCOT_STYLE.RANDOM)
             this.initialEmotion = Math.floor(Math.random() * MASCOT_STYLE.ANGRY) + 1;
 
         this.state = {
-      currentEmotion: this.initialEmotion,
+            currentEmotion: this.initialEmotion
-    };
+        }
 
-    if (props.onPress == null) {
+        if (this.props.onPress == null) {
-      this.onPress = (viewRef: AnimatableViewRefType) => {
+            this.onPress = (viewRef: AnimatableViewRef) => {
-        const ref = viewRef.current;
+                let ref = viewRef.current;
                 if (ref != null) {
                     this.setState({currentEmotion: MASCOT_STYLE.LOVE});
                     ref.rubberBand(1500).then(() => {
                         this.setState({currentEmotion: this.initialEmotion});
                     });
-        }
-      };
-    } else this.onPress = props.onPress;
 
-    if (props.onLongPress == null) {
+                }
-      this.onLongPress = (viewRef: AnimatableViewRefType) => {
+                return null;
-        const ref = viewRef.current;
+            }
+        } else
+            this.onPress = this.props.onPress;
+
+        if (this.props.onLongPress == null) {
+            this.onLongPress = (viewRef: AnimatableViewRef) => {
+                let ref = viewRef.current;
                 if (ref != null) {
                     this.setState({currentEmotion: MASCOT_STYLE.ANGRY});
                     ref.tada(1000).then(() => {
                         this.setState({currentEmotion: this.initialEmotion});
                     });
+
                 }
-      };
+                return null;
-    } else this.onLongPress = props.onLongPress;
+            }
+        } else
+            this.onLongPress = this.props.onLongPress;
+
     }
 
-  getGlasses(style: number): React.Node {
+    getGlasses(style: number) {
         const glasses = this.glassesList[style];
-    return (
+        return <Image
-      <Image
+            key={"glasses"}
-        key="glasses"
+            source={glasses != null ? glasses : this.glassesList[GLASSES_STYLE.NORMAL]}
-        source={
-          glasses != null ? glasses : this.glassesList[GLASSES_STYLE.NORMAL]
-        }
             style={{
-          position: 'absolute',
+                position: "absolute",
-          top: '15%',
+                top: "15%",
                 left: 0,
-          width: '100%',
+                width: "100%",
-          height: '100%',
+                height: "100%",
             }}
         />
-    );
     }
 
-  getEye(
+    getEye(style: number, isRight: boolean, rotation: string="0deg") {
-    style: number,
-    isRight: boolean,
-    rotation: string = '0deg',
-  ): React.Node {
         const eye = this.eyeList[style];
-    return (
+        return <Image
-      <Image
+            key={isRight ? "right" : "left"}
-        key={isRight ? 'right' : 'left'}
             source={eye != null ? eye : this.eyeList[EYE_STYLE.NORMAL]}
             style={{
-          position: 'absolute',
+                position: "absolute",
-          top: '15%',
+                top: "15%",
-          left: isRight ? '-11%' : '11%',
+                left: isRight ? "-11%" : "11%",
-          width: '100%',
+                width: "100%",
-          height: '100%',
+                height: "100%",
-          transform: [{rotateY: rotation}],
+                transform: [{rotateY: rotation}]
             }}
         />
-    );
     }
 
-  getEyes(emotion: number): React.Node {
+    getEyes(emotion: number) {
-    const final = [];
+        let final = [];
-    final.push(
+        final.push(<View
-      <View
+            key={"container"}
-        key="container"
             style={{
-          position: 'absolute',
+                position: "absolute",
-          width: '100%',
+                width: "100%",
-          height: '100%',
+                height: "100%",
-        }}
+            }}/>);
-      />,
-    );
         if (emotion === MASCOT_STYLE.CUTE) {
             final.push(this.getEye(EYE_STYLE.CUTE, true));
             final.push(this.getEye(EYE_STYLE.CUTE, false));
@@ -211,7 +204,7 @@ class Mascot extends React.Component<PropsType, StateType> {
             final.push(this.getEye(EYE_STYLE.HEART, false));
         } else if (emotion === MASCOT_STYLE.ANGRY) {
             final.push(this.getEye(EYE_STYLE.ANGRY, true));
-      final.push(this.getEye(EYE_STYLE.ANGRY, false, '180deg'));
+            final.push(this.getEye(EYE_STYLE.ANGRY, false, "180deg"));
         } else if (emotion === MASCOT_STYLE.COOL) {
             final.push(this.getGlasses(GLASSES_STYLE.COOl));
         } else {
@@ -219,45 +212,42 @@ class Mascot extends React.Component<PropsType, StateType> {
             final.push(this.getEye(EYE_STYLE.NORMAL, false));
         }
 
-    if (emotion === MASCOT_STYLE.INTELLO) {
+        if (emotion === MASCOT_STYLE.INTELLO) { // Needs to have normal eyes behind the glasses
-      // Needs to have normal eyes behind the glasses
             final.push(this.getGlasses(GLASSES_STYLE.NORMAL));
         }
-    final.push(<View key="container2" />);
+        final.push(<View key={"container2"}/>);
         return final;
     }
 
-  render(): React.Node {
+    render() {
-    const {props, state} = this;
+        const entryAnimation = this.props.animated ? this.props.entryAnimation : null;
-    const entryAnimation = props.animated ? props.entryAnimation : null;
+        const loopAnimation = this.props.animated ? this.props.loopAnimation : null;
-    const loopAnimation = props.animated ? props.loopAnimation : null;
         return (
             <Animatable.View
                 style={{
                     aspectRatio: 1,
-          ...props.style,
+                    ...this.props.style
                 }}
-        // eslint-disable-next-line react/jsx-props-no-spreading
+                {...entryAnimation}
-        {...entryAnimation}>
+            >
                 <TouchableWithoutFeedback
-          onPress={() => {
+                    onPress={() => this.onPress(this.viewRef)}
-            this.onPress(this.viewRef);
+                    onLongPress={() => this.onLongPress(this.viewRef)}
-          }}
+                >
-          onLongPress={() => {
-            this.onLongPress(this.viewRef);
-          }}>
-          <Animatable.View ref={this.viewRef}>
                     <Animatable.View
-              // eslint-disable-next-line react/jsx-props-no-spreading
+                        ref={this.viewRef}
-              {...loopAnimation}>
+                    >
+                        <Animatable.View
+                            {...loopAnimation}
+                        >
                             <Image
                                 source={MASCOT_IMAGE}
                                 style={{
-                  width: '100%',
+                                    width: "100%",
-                  height: '100%',
+                                    height:"100%",
                                 }}
                             />
-              {this.getEyes(state.currentEmotion)}
+                            {this.getEyes(this.state.currentEmotion)}
                         </Animatable.View>
                     </Animatable.View>
                 </TouchableWithoutFeedback>

src/components/Mascot/MascotPopup.js

@@ -1,29 +1,16 @@
 // @flow
 
 import * as React from 'react';
-import {
+import {Avatar, Button, Card, Paragraph, Portal, withTheme} from 'react-native-paper';
-  Avatar,
+import Mascot from "./Mascot";
-  Button,
+import * as Animatable from "react-native-animatable";
-  Card,
+import {BackHandler, Dimensions, ScrollView, TouchableWithoutFeedback, View} from "react-native";
-  Paragraph,
+import type {CustomTheme} from "../../managers/ThemeManager";
-  Portal,
+import SpeechArrow from "./SpeechArrow";
-  withTheme,
+import AsyncStorageManager from "../../managers/AsyncStorageManager";
-} from 'react-native-paper';
-import * as Animatable from 'react-native-animatable';
-import {
-  BackHandler,
-  Dimensions,
-  ScrollView,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-import Mascot from './Mascot';
-import type {CustomThemeType} from '../../managers/ThemeManager';
-import SpeechArrow from './SpeechArrow';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
 
-type PropsType = {
+type Props = {
-  theme: CustomThemeType,
+    theme: CustomTheme,
     icon: string,
     title: string,
     message: string,
@@ -39,34 +26,28 @@ type PropsType = {
             icon: string | null,
             color: string | null,
             onPress?: () => void,
-    },
+        }
     },
     emotion: number,
     visible?: boolean,
     prefKey?: string,
-};
+}
 
-type StateType = {
+type State = {
     shouldRenderDialog: boolean, // Used to stop rendering after hide animation
     dialogVisible: boolean,
-};
+}
 
 /**
  * Component used to display a popup with the mascot.
  */
-class MascotPopup extends React.Component<PropsType, StateType> {
+class MascotPopup extends React.Component<Props, State> {
-  static defaultProps = {
-    visible: null,
-    prefKey: null,
-  };
 
     mascotSize: number;
-
     windowWidth: number;
-
     windowHeight: number;
 
-  constructor(props: PropsType) {
+    constructor(props: Props) {
         super(props);
 
         this.windowWidth = Dimensions.get('window').width;
@@ -74,13 +55,13 @@ class MascotPopup extends React.Component<PropsType, StateType> {
 
         this.mascotSize = Dimensions.get('window').height / 6;
 
-    if (props.visible != null) {
+        if (this.props.visible != null) {
             this.state = {
-        shouldRenderDialog: props.visible,
+                shouldRenderDialog: this.props.visible,
-        dialogVisible: props.visible,
+                dialogVisible: this.props.visible,
             };
-    } else if (props.prefKey != null) {
+        } else if (this.props.prefKey != null) {
-      const visible = AsyncStorageManager.getBool(props.prefKey);
+            const visible = AsyncStorageManager.getBool(this.props.prefKey);
             this.state = {
                 shouldRenderDialog: visible,
                 dialogVisible: visible,
@@ -91,92 +72,90 @@ class MascotPopup extends React.Component<PropsType, StateType> {
                 dialogVisible: false,
             };
         }
+
     }
 
-  componentDidMount(): * {
+    onAnimationEnd = () => {
-    BackHandler.addEventListener(
+        this.setState({
-      'hardwareBackPress',
+            shouldRenderDialog: false,
-      this.onBackButtonPressAndroid,
+        })
-    );
     }
 
-  shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-    const {props, state} = this;
         if (nextProps.visible) {
             this.state.shouldRenderDialog = true;
             this.state.dialogVisible = true;
-    } else if (
+        } else if (nextProps.visible !== this.props.visible
-      nextProps.visible !== props.visible ||
+            || (!nextState.dialogVisible && nextState.dialogVisible !== this.state.dialogVisible)) {
-      (!nextState.dialogVisible &&
-        nextState.dialogVisible !== state.dialogVisible)
-    ) {
             this.state.dialogVisible = false;
             setTimeout(this.onAnimationEnd, 300);
         }
         return true;
     }
 
-  onAnimationEnd = () => {
+    componentDidMount(): * {
-    this.setState({
+        BackHandler.addEventListener(
-      shouldRenderDialog: false,
+            'hardwareBackPress',
-    });
+            this.onBackButtonPressAndroid
-  };
+        )
-
-  onBackButtonPressAndroid = (): boolean => {
-    const {state, props} = this;
-    if (state.dialogVisible) {
-      const {cancel} = props.buttons;
-      const {action} = props.buttons;
-      if (cancel != null) this.onDismiss(cancel.onPress);
-      else this.onDismiss(action.onPress);
-      return true;
     }
+
+    onBackButtonPressAndroid = () => {
+        if (this.state.dialogVisible) {
+            const cancel = this.props.buttons.cancel;
+            const action = this.props.buttons.action;
+            if (cancel != null)
+                this.onDismiss(cancel.onPress);
+            else
+                this.onDismiss(action.onPress);
+            return true;
+        } else {
             return false;
+        }
     };
 
-  getSpeechBubble(): React.Node {
+    getSpeechBubble() {
-    const {state, props} = this;
         return (
             <Animatable.View
                 style={{
-          marginLeft: '10%',
+                    marginLeft: "10%",
-          marginRight: '10%',
+                    marginRight: "10%",
                 }}
-        useNativeDriver
+                useNativeDriver={true}
-        animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
+                animation={this.state.dialogVisible ? "bounceInLeft" : "bounceOutLeft"}
-        duration={state.dialogVisible ? 1000 : 300}>
+                duration={this.state.dialogVisible ? 1000 : 300}
+            >
                 <SpeechArrow
                     style={{marginLeft: this.mascotSize / 3}}
                     size={20}
-          color={props.theme.colors.mascotMessageArrow}
+                    color={this.props.theme.colors.mascotMessageArrow}
                 />
-        <Card
+                <Card style={{
-          style={{
+                    borderColor: this.props.theme.colors.mascotMessageArrow,
-            borderColor: props.theme.colors.mascotMessageArrow,
                     borderWidth: 4,
                     borderRadius: 10,
                 }}>
                     <Card.Title
-            title={props.title}
+                        title={this.props.title}
-            left={
+                        left={this.props.icon != null ?
-              props.icon != null
+                            (props) => <Avatar.Icon
-                ? (): React.Node => (
+                                {...props}
-                    <Avatar.Icon
                                 size={48}
-                      style={{backgroundColor: 'transparent'}}
+                                style={{backgroundColor: "transparent"}}
-                      color={props.theme.colors.primary}
+                                color={this.props.theme.colors.primary}
-                      icon={props.icon}
+                                icon={this.props.icon}
                             />
-                  )
+
-                : null
+                            : null}
-            }
                     />
-          <Card.Content
+
-            style={{
+                    <Card.Content style={{
-              maxHeight: this.windowHeight / 3,
+                        maxHeight: this.windowHeight / 3
                     }}>
                         <ScrollView>
-              <Paragraph style={{marginBottom: 10}}>{props.message}</Paragraph>
+                            <Paragraph style={{marginBottom: 10}}>
+                                {this.props.message}
+                            </Paragraph>
                         </ScrollView>
                     </Card.Content>
 
@@ -188,124 +167,116 @@ class MascotPopup extends React.Component<PropsType, StateType> {
         );
     }
 
-  getMascot(): React.Node {
+    getMascot() {
-    const {props, state} = this;
         return (
             <Animatable.View
-        useNativeDriver
+                useNativeDriver={true}
-        animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
+                animation={this.state.dialogVisible ? "bounceInLeft" : "bounceOutLeft"}
-        duration={state.dialogVisible ? 1500 : 200}>
+                duration={this.state.dialogVisible ? 1500 : 200}
+            >
                 <Mascot
                     style={{width: this.mascotSize}}
-          animated
+                    animated={true}
-          emotion={props.emotion}
+                    emotion={this.props.emotion}
                 />
             </Animatable.View>
         );
     }
 
-  getButtons(): React.Node {
+    getButtons() {
-    const {props} = this;
+        const action = this.props.buttons.action;
-    const {action} = props.buttons;
+        const cancel = this.props.buttons.cancel;
-    const {cancel} = props.buttons;
         return (
-      <View
+            <View style={{
-        style={{
+                marginLeft: "auto",
-          marginLeft: 'auto',
+                marginRight: "auto",
-          marginRight: 'auto',
+                marginTop: "auto",
-          marginTop: 'auto',
+                marginBottom: "auto",
-          marginBottom: 'auto',
             }}>
-        {action != null ? (
+                {action != null
-          <Button
+                    ? <Button
                         style={{
                             marginLeft: 'auto',
                             marginRight: 'auto',
                             marginBottom: 10,
                         }}
-            mode="contained"
+                        mode={"contained"}
                         icon={action.icon}
                         color={action.color}
-            onPress={() => {
+                        onPress={() => this.onDismiss(action.onPress)}
-              this.onDismiss(action.onPress);
+                    >
-            }}>
                         {action.message}
                     </Button>
-        ) : null}
+                    : null}
-        {cancel != null ? (
+                {cancel != null
-          <Button
+                    ? <Button
                         style={{
                             marginLeft: 'auto',
                             marginRight: 'auto',
                         }}
-            mode="contained"
+                        mode={"contained"}
                         icon={cancel.icon}
                         color={cancel.color}
-            onPress={() => {
+                        onPress={() => this.onDismiss(cancel.onPress)}
-              this.onDismiss(cancel.onPress);
+                    >
-            }}>
                         {cancel.message}
                     </Button>
-        ) : null}
+                    : null}
             </View>
         );
     }
 
-  getBackground(): React.Node {
+    getBackground() {
-    const {props, state} = this;
         return (
-      <TouchableWithoutFeedback
+            <TouchableWithoutFeedback onPress={() => this.onDismiss(this.props.buttons.cancel.onPress)}>
-        onPress={() => {
-          this.onDismiss(props.buttons.cancel.onPress);
-        }}>
                 <Animatable.View
                     style={{
-            position: 'absolute',
+                        position: "absolute",
-            backgroundColor: 'rgba(0,0,0,0.7)',
+                        backgroundColor: "rgba(0,0,0,0.7)",
-            width: '100%',
+                        width: "100%",
-            height: '100%',
+                        height: "100%",
                     }}
-          useNativeDriver
+                    useNativeDriver={true}
-          animation={state.dialogVisible ? 'fadeIn' : 'fadeOut'}
+                    animation={this.state.dialogVisible ? "fadeIn" : "fadeOut"}
-          duration={state.dialogVisible ? 300 : 300}
+                    duration={this.state.dialogVisible ? 300 : 300}
                 />
             </TouchableWithoutFeedback>
+
         );
     }
 
-  onDismiss = (callback?: () => void) => {
+    onDismiss = (callback?: ()=> void) => {
-    const {prefKey} = this.props;
+        if (this.props.prefKey != null) {
-    if (prefKey != null) {
+            AsyncStorageManager.set(this.props.prefKey, false);
-      AsyncStorageManager.set(prefKey, false);
             this.setState({dialogVisible: false});
         }
-    if (callback != null) callback();
+        if (callback != null)
-  };
+            callback();
+    }
 
-  render(): React.Node {
+    render() {
-    const {shouldRenderDialog} = this.state;
+        if (this.state.shouldRenderDialog) {
-    if (shouldRenderDialog) {
             return (
                 <Portal>
                     {this.getBackground()}
-          <View
+                    <View style={{
-            style={{
+                        marginTop: "auto",
-              marginTop: 'auto',
+                        marginBottom: "auto",
-              marginBottom: 'auto',
                     }}>
-            <View
+                        <View style={{
-              style={{
                             marginTop: -80,
-                width: '100%',
+                            width: "100%"
                         }}>
                             {this.getMascot()}
                             {this.getSpeechBubble()}
                         </View>
+
                     </View>
                 </Portal>
             );
-    }
+        } else
             return null;
+
     }
 }
 

src/components/Mascot/SpeechArrow.js

@@ -1,42 +1,32 @@
 // @flow
 
 import * as React from 'react';
-import {View} from 'react-native';
+import {View} from "react-native";
-import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
 
-type PropsType = {
+type Props = {
-  style?: ViewStyle | null,
+    style?: ViewStyle,
     size: number,
     color: string,
-};
+}
 
-export default class SpeechArrow extends React.Component<PropsType> {
+export default class SpeechArrow extends React.Component<Props> {
-  static defaultProps = {
-    style: null,
-  };
 
-  shouldComponentUpdate(): boolean {
+    render() {
-    return false;
-  }
-
-  render(): React.Node {
-    const {props} = this;
         return (
-      <View style={props.style}>
+            <View style={this.props.style}>
-        <View
+                <View style={{
-          style={{
                     width: 0,
                     height: 0,
                     borderLeftWidth: 0,
-            borderRightWidth: props.size,
+                    borderRightWidth: this.props.size,
-            borderBottomWidth: props.size,
+                    borderBottomWidth: this.props.size,
                     borderStyle: 'solid',
                     backgroundColor: 'transparent',
                     borderLeftColor: 'transparent',
                     borderRightColor: 'transparent',
-            borderBottomColor: props.color,
+                    borderBottomColor: this.props.color,
-          }}
+                }}/>
-        />
             </View>
         );
     }

src/components/Overrides/CustomAgenda.js

@@ -1,61 +1,58 @@
-// @flow
-
 import * as React from 'react';
-import {View} from 'react-native';
+import {View} from "react-native";
 import {withTheme} from 'react-native-paper';
-import {Agenda} from 'react-native-calendars';
+import {Agenda} from "react-native-calendars";
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
-type PropsType = {
+type Props = {
-  theme: CustomThemeType,
+    theme: Object,
-  onRef: (ref: Agenda) => void,
+}
-};
 
 /**
  * Abstraction layer for Agenda component, using custom configuration
  */
-class CustomAgenda extends React.Component<PropsType> {
+class CustomAgenda extends React.Component<Props> {
-  getAgenda(): React.Node {
+
-    const {props} = this;
+    getAgenda() {
-    return (
+        return <Agenda
-      <Agenda
+            {...this.props}
-        // eslint-disable-next-line react/jsx-props-no-spreading
+            ref={this.props.onRef}
-        {...props}
-        ref={props.onRef}
             theme={{
-          backgroundColor: props.theme.colors.agendaBackgroundColor,
+                backgroundColor: this.props.theme.colors.agendaBackgroundColor,
-          calendarBackground: props.theme.colors.background,
+                calendarBackground: this.props.theme.colors.background,
-          textSectionTitleColor: props.theme.colors.agendaDayTextColor,
+                textSectionTitleColor: this.props.theme.colors.agendaDayTextColor,
-          selectedDayBackgroundColor: props.theme.colors.primary,
+                selectedDayBackgroundColor: this.props.theme.colors.primary,
                 selectedDayTextColor: '#ffffff',
-          todayTextColor: props.theme.colors.primary,
+                todayTextColor: this.props.theme.colors.primary,
-          dayTextColor: props.theme.colors.text,
+                dayTextColor: this.props.theme.colors.text,
-          textDisabledColor: props.theme.colors.agendaDayTextColor,
+                textDisabledColor: this.props.theme.colors.agendaDayTextColor,
-          dotColor: props.theme.colors.primary,
+                dotColor: this.props.theme.colors.primary,
                 selectedDotColor: '#ffffff',
                 arrowColor: 'orange',
-          monthTextColor: props.theme.colors.primary,
+                monthTextColor: this.props.theme.colors.primary,
-          indicatorColor: props.theme.colors.primary,
+                indicatorColor: this.props.theme.colors.primary,
                 textDayFontWeight: '300',
                 textMonthFontWeight: 'bold',
                 textDayHeaderFontWeight: '300',
                 textDayFontSize: 16,
                 textMonthFontSize: 16,
                 textDayHeaderFontSize: 16,
-          agendaDayTextColor: props.theme.colors.agendaDayTextColor,
+                agendaDayTextColor: this.props.theme.colors.agendaDayTextColor,
-          agendaDayNumColor: props.theme.colors.agendaDayTextColor,
+                agendaDayNumColor: this.props.theme.colors.agendaDayTextColor,
-          agendaTodayColor: props.theme.colors.primary,
+                agendaTodayColor: this.props.theme.colors.primary,
-          agendaKnobColor: props.theme.colors.primary,
+                agendaKnobColor: this.props.theme.colors.primary,
             }}
-      />
+        />;
-    );
     }
 
-  render(): React.Node {
+    render() {
-    const {props} = this;
         // Completely recreate the component on theme change to force theme reload
-    if (props.theme.dark)
+        if (this.props.theme.dark)
-      return <View style={{flex: 1}}>{this.getAgenda()}</View>;
+            return (
+                <View style={{flex: 1}}>
+                    {this.getAgenda()}
+                </View>
+            );
+        else
             return this.getAgenda();
     }
 }

src/components/Overrides/CustomHTML.js

@@ -1,57 +1,46 @@
-/* eslint-disable flowtype/require-parameter-type */
-// @flow
-
 import * as React from 'react';
 import {Text, withTheme} from 'react-native-paper';
-import HTML from 'react-native-render-html';
+import HTML from "react-native-render-html";
-import {Linking} from 'react-native';
+import {Linking} from "react-native";
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
-type PropsType = {
+type Props = {
-  theme: CustomThemeType,
+    theme: Object,
     html: string,
-};
+}
 
 /**
  * Abstraction layer for Agenda component, using custom configuration
  */
-class CustomHTML extends React.Component<PropsType> {
+class CustomHTML extends React.Component<Props> {
-  openWebLink = (event: {...}, link: string) => {
+
-    Linking.openURL(link);
+    openWebLink = (event, link) => {
+        Linking.openURL(link).catch((err) => console.error('Error opening link', err));
     };
 
-  getBasicText = (
+    getBasicText = (htmlAttribs, children, convertedCSSStyles, passProps) => {
-    htmlAttribs,
-    children,
-    convertedCSSStyles,
-    passProps,
-  ): React.Node => {
-    // eslint-disable-next-line react/jsx-props-no-spreading
         return <Text {...passProps}>{children}</Text>;
     };
 
-  getListBullet = (): React.Node => {
+    getListBullet = (htmlAttribs, children, convertedCSSStyles, passProps) => {
-    return <Text>- </Text>;
+        return (
+            <Text>- </Text>
+        );
     };
 
-  render(): React.Node {
+    render() {
-    const {props} = this;
         // Surround description with p to allow text styling if the description is not html
-    return (
+        return <HTML
-      <HTML
+            html={"<p>" + this.props.html + "</p>"}
-        html={`<p>${props.html}</p>`}
             renderers={{
                 p: this.getBasicText,
                 li: this.getBasicText,
             }}
             listsPrefixesRenderers={{
-          ul: this.getListBullet,
+                ul: this.getListBullet
             }}
             ignoredTags={['img']}
             ignoredStyles={['color', 'background-color']}
-        onLinkPress={this.openWebLink}
+            onLinkPress={this.openWebLink}/>;
-      />
-    );
     }
 }
 

src/components/Overrides/CustomHeaderButton.js

@@ -1,39 +1,27 @@
 // @flow
 
 import * as React from 'react';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons';
-import {withTheme} from 'react-native-paper';
+import {withTheme} from "react-native-paper";
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
-const MaterialHeaderButton = (props: {
+const MaterialHeaderButton = (props: Object) =>
-  theme: CustomThemeType,
-  color: string,
-}): React.Node => {
-  const {color, theme} = props;
-  return (
-    // $FlowFixMe
     <HeaderButton
-      // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         IconComponent={MaterialCommunityIcons}
         iconSize={26}
-      color={color != null ? color : theme.colors.text}
+        color={props.color != null ? props.color : props.theme.colors.text}
-    />
+    />;
-  );
-};
 
-const MaterialHeaderButtons = (props: {...}): React.Node => {
+const MaterialHeaderButtons = (props: Object) => {
     return (
-    // $FlowFixMe
         <HeaderButtons
-      // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             HeaderButtonComponent={withTheme(MaterialHeaderButton)}
         />
     );
 };
 
-export default MaterialHeaderButtons;
+export default withTheme(MaterialHeaderButtons);
 
 export {Item} from 'react-navigation-header-buttons';

src/components/Overrides/CustomIntroSlider.js

@@ -1,37 +1,390 @@
 // @flow
 
 import * as React from 'react';
-import {Platform, StatusBar, StyleSheet, View} from 'react-native';
+import {Platform, StatusBar, StyleSheet, View} from "react-native";
-import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
+import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import i18n from 'i18n-js';
-import AppIntroSlider from 'react-native-app-intro-slider';
+import AppIntroSlider from "react-native-app-intro-slider";
+import Update from "../../constants/Update";
+import ThemeManager from "../../managers/ThemeManager";
 import LinearGradient from 'react-native-linear-gradient';
-import * as Animatable from 'react-native-animatable';
+import Mascot, {MASCOT_STYLE} from "../Mascot/Mascot";
-import {Card} from 'react-native-paper';
+import * as Animatable from "react-native-animatable";
-import Update from '../../constants/Update';
+import {Card} from "react-native-paper";
-import ThemeManager from '../../managers/ThemeManager';
-import Mascot, {MASCOT_STYLE} from '../Mascot/Mascot';
 
-type PropsType = {
+type Props = {
-  onDone: () => void,
+    onDone: Function,
     isUpdate: boolean,
     isAprilFools: boolean,
 };
 
-type StateType = {
+type State = {
     currentSlide: number,
-};
+}
 
-type IntroSlideType = {
+type Slide = {
     key: string,
     title: string,
     text: string,
     view: () => React.Node,
     mascotStyle: number,
-  colors: [string, string],
+    colors: [string, string]
 };
 
+/**
+ * Class used to create intro slides
+ */
+export default class CustomIntroSlider extends React.Component<Props, State> {
+
+    state = {
+        currentSlide: 0,
+    }
+
+    sliderRef: { current: null | AppIntroSlider };
+
+    introSlides: Array<Slide>;
+    updateSlides: Array<Slide>;
+    aprilFoolsSlides: Array<Slide>;
+    currentSlides: Array<Slide>;
+
+    /**
+     * Generates intro slides
+     */
+    constructor() {
+        super();
+        this.sliderRef = React.createRef();
+        this.introSlides = [
+            {
+                key: '0', // Mascot
+                title: i18n.t('intro.slideMain.title'),
+                text: i18n.t('intro.slideMain.text'),
+                view: this.getWelcomeView,
+                mascotStyle: MASCOT_STYLE.NORMAL,
+                colors: ['#be1522', '#57080e'],
+            },
+            {
+                key: '1',
+                title: i18n.t('intro.slidePlanex.title'),
+                text: i18n.t('intro.slidePlanex.text'),
+                view: () => this.getIconView("calendar-clock"),
+                mascotStyle: MASCOT_STYLE.INTELLO,
+                colors: ['#be1522', '#57080e'],
+            },
+            {
+                key: '2',
+                title: i18n.t('intro.slideEvents.title'),
+                text: i18n.t('intro.slideEvents.text'),
+                view: () => this.getIconView("calendar-star",),
+                mascotStyle: MASCOT_STYLE.HAPPY,
+                colors: ['#be1522', '#57080e'],
+            },
+            {
+                key: '3',
+                title: i18n.t('intro.slideServices.title'),
+                text: i18n.t('intro.slideServices.text'),
+                view: () => this.getIconView("view-dashboard-variant",),
+                mascotStyle: MASCOT_STYLE.CUTE,
+                colors: ['#be1522', '#57080e'],
+            },
+            {
+                key: '4',
+                title: i18n.t('intro.slideDone.title'),
+                text: i18n.t('intro.slideDone.text'),
+                view: () => this.getEndView(),
+                mascotStyle: MASCOT_STYLE.COOL,
+                colors: ['#9c165b', '#3e042b'],
+            },
+        ];
+        this.updateSlides = [];
+        for (let i = 0; i < Update.slidesNumber; i++) {
+            this.updateSlides.push(
+                {
+                    key: i.toString(),
+                    title: Update.getInstance().titleList[i],
+                    text: Update.getInstance().descriptionList[i],
+                    icon: Update.iconList[i],
+                    colors: Update.colorsList[i],
+                },
+            );
+        }
+
+        this.aprilFoolsSlides = [
+            {
+                key: '1',
+                title: i18n.t('intro.aprilFoolsSlide.title'),
+                text: i18n.t('intro.aprilFoolsSlide.text'),
+                view: () => <View/>,
+                mascotStyle: MASCOT_STYLE.NORMAL,
+                colors: ['#e01928', '#be1522'],
+            },
+        ];
+    }
+
+    /**
+     * Render item to be used for the intro introSlides
+     *
+     * @param item The item to be displayed
+     * @param dimensions Dimensions of the item
+     */
+    getIntroRenderItem = ({item, dimensions}: { item: Slide, dimensions: { width: number, height: number } }) => {
+        const index = parseInt(item.key);
+        return (
+            <LinearGradient
+                style={[
+                    styles.mainContent,
+                    dimensions
+                ]}
+                colors={item.colors}
+                start={{x: 0, y: 0.1}}
+                end={{x: 0.1, y: 1}}
+            >
+                {this.state.currentSlide === index
+                    ? <View style={{height: "100%", flex: 1}}>
+                        <View style={{flex: 1}}>
+                            {item.view()}
+                        </View>
+                        <Animatable.View
+                            animation={"fadeIn"}>
+                            {index !== 0 && index !== this.introSlides.length - 1
+                                ?
+                                <Mascot
+                                    style={{
+                                        marginLeft: 30,
+                                        marginBottom: 0,
+                                        width: 100,
+                                        marginTop: -30,
+                                    }}
+                                    emotion={item.mascotStyle}
+                                    animated={true}
+                                    entryAnimation={{
+                                        animation: "slideInLeft",
+                                        duration: 500
+                                    }}
+                                    loopAnimation={{
+                                        animation: "pulse",
+                                        iterationCount: "infinite",
+                                        duration: 2000,
+                                    }}
+                                /> : null}
+                            <View style={{
+                                marginLeft: 50,
+                                width: 0,
+                                height: 0,
+                                borderLeftWidth: 20,
+                                borderRightWidth: 0,
+                                borderBottomWidth: 20,
+                                borderStyle: 'solid',
+                                backgroundColor: 'transparent',
+                                borderLeftColor: 'transparent',
+                                borderRightColor: 'transparent',
+                                borderBottomColor: "rgba(0,0,0,0.60)",
+                            }}/>
+                            <Card style={{
+                                backgroundColor: "rgba(0,0,0,0.38)",
+                                marginHorizontal: 20,
+                                borderColor: "rgba(0,0,0,0.60)",
+                                borderWidth: 4,
+                                borderRadius: 10,
+                            }}>
+                                <Card.Content>
+                                    <Animatable.Text
+                                        animation={"fadeIn"}
+                                        delay={100}
+                                        style={styles.title}>
+                                        {item.title}
+                                    </Animatable.Text>
+                                    <Animatable.Text
+                                        animation={"fadeIn"}
+                                        delay={200}
+                                        style={styles.text}>
+                                        {item.text}
+                                    </Animatable.Text>
+                                </Card.Content>
+                            </Card>
+                        </Animatable.View>
+                    </View> : null}
+            </LinearGradient>
+        );
+    }
+
+    getEndView = () => {
+        return (
+            <View style={{flex: 1}}>
+                <Mascot
+                    style={{
+                        ...styles.center,
+                        height: "80%"
+                    }}
+                    emotion={MASCOT_STYLE.COOL}
+                    animated={true}
+                    entryAnimation={{
+                        animation: "slideInDown",
+                        duration: 2000,
+                    }}
+                    loopAnimation={{
+                        animation: "pulse",
+                        duration: 2000,
+                        iterationCount: "infinite"
+                    }}
+                />
+            </View>
+        );
+    }
+
+    getWelcomeView = () => {
+        return (
+            <View style={{flex: 1}}>
+                <Mascot
+                    style={{
+                        ...styles.center,
+                        height: "80%"
+                    }}
+                    emotion={MASCOT_STYLE.NORMAL}
+                    animated={true}
+                    entryAnimation={{
+                        animation: "bounceIn",
+                        duration: 2000,
+                    }}
+                />
+                <Animatable.Text
+                    useNativeDriver={true}
+                    animation={"fadeInUp"}
+                    duration={500}
+
+                    style={{
+                        color: "#fff",
+                        textAlign: "center",
+                        fontSize: 25,
+                    }}>
+                    PABLO
+                </Animatable.Text>
+                <Animatable.View
+                    useNativeDriver={true}
+                    animation={"fadeInUp"}
+                    duration={500}
+                    delay={200}
+
+                    style={{
+                        position: "absolute",
+                        bottom: 30,
+                        right: "20%",
+                        width: 50,
+                        height: 50,
+                    }}>
+                    <MaterialCommunityIcons
+                        style={{
+                            ...styles.center,
+                            transform: [{rotateZ: "70deg"}],
+                        }}
+                        name={"undo"}
+                        color={'#fff'}
+                        size={40}/>
+                </Animatable.View>
+            </View>
+        )
+    }
+
+    getIconView(icon: MaterialCommunityIconsGlyphs) {
+        return (
+            <View style={{flex: 1}}>
+                <Animatable.View
+                    style={styles.center}
+                    animation={"fadeIn"}
+                >
+                    <MaterialCommunityIcons
+                        name={icon}
+                        color={'#fff'}
+                        size={200}/>
+                </Animatable.View>
+            </View>
+        )
+    }
+
+    setStatusBarColor(color: string) {
+        if (Platform.OS === 'android')
+            StatusBar.setBackgroundColor(color, true);
+    }
+
+    onSlideChange = (index: number, lastIndex: number) => {
+        this.setStatusBarColor(this.currentSlides[index].colors[0]);
+        this.setState({currentSlide: index});
+    };
+
+    onSkip = () => {
+        this.setStatusBarColor(this.currentSlides[this.currentSlides.length - 1].colors[0]);
+        if (this.sliderRef.current != null)
+            this.sliderRef.current.goToSlide(this.currentSlides.length - 1);
+    }
+
+    onDone = () => {
+        this.setStatusBarColor(ThemeManager.getCurrentTheme().colors.surface);
+        this.props.onDone();
+    }
+
+    renderNextButton = () => {
+        return (
+            <Animatable.View
+                animation={"fadeIn"}
+
+                style={{
+                    borderRadius: 25,
+                    padding: 5,
+                    backgroundColor: "rgba(0,0,0,0.2)"
+                }}>
+                <MaterialCommunityIcons
+                    name={"arrow-right"}
+                    color={'#fff'}
+                    size={40}/>
+            </Animatable.View>
+        )
+    }
+
+    renderDoneButton = () => {
+        return (
+            <Animatable.View
+                animation={"bounceIn"}
+
+                style={{
+                    borderRadius: 25,
+                    padding: 5,
+                    backgroundColor: "rgb(190,21,34)"
+                }}>
+                <MaterialCommunityIcons
+                    name={"check"}
+                    color={'#fff'}
+                    size={40}/>
+            </Animatable.View>
+        )
+    }
+
+    render() {
+        this.currentSlides = this.introSlides;
+        if (this.props.isUpdate)
+            this.currentSlides = this.updateSlides;
+        else if (this.props.isAprilFools)
+            this.currentSlides = this.aprilFoolsSlides;
+        this.setStatusBarColor(this.currentSlides[0].colors[0]);
+        return (
+            <AppIntroSlider
+                ref={this.sliderRef}
+                data={this.currentSlides}
+                extraData={this.state.currentSlide}
+
+                renderItem={this.getIntroRenderItem}
+                renderNextButton={this.renderNextButton}
+                renderDoneButton={this.renderDoneButton}
+
+                onDone={this.onDone}
+                onSlideChange={this.onSlideChange}
+                onSkip={this.onSkip}
+            />
+        );
+    }
+
+}
+
+
 const styles = StyleSheet.create({
     mainContent: {
         paddingBottom: 100,
@@ -56,348 +409,3 @@ const styles = StyleSheet.create({
         marginLeft: 'auto',
     },
 });
-
-/**
- * Class used to create intro slides
- */
-export default class CustomIntroSlider extends React.Component<
-  PropsType,
-  StateType,
-> {
-  sliderRef: {current: null | AppIntroSlider};
-
-  introSlides: Array<IntroSlideType>;
-
-  updateSlides: Array<IntroSlideType>;
-
-  aprilFoolsSlides: Array<IntroSlideType>;
-
-  currentSlides: Array<IntroSlideType>;
-
-  /**
-   * Generates intro slides
-   */
-  constructor() {
-    super();
-    this.state = {
-      currentSlide: 0,
-    };
-    this.sliderRef = React.createRef();
-    this.introSlides = [
-      {
-        key: '0', // Mascot
-        title: i18n.t('intro.slideMain.title'),
-        text: i18n.t('intro.slideMain.text'),
-        view: this.getWelcomeView,
-        mascotStyle: MASCOT_STYLE.NORMAL,
-        colors: ['#be1522', '#57080e'],
-      },
-      {
-        key: '1',
-        title: i18n.t('intro.slidePlanex.title'),
-        text: i18n.t('intro.slidePlanex.text'),
-        view: (): React.Node => CustomIntroSlider.getIconView('calendar-clock'),
-        mascotStyle: MASCOT_STYLE.INTELLO,
-        colors: ['#be1522', '#57080e'],
-      },
-      {
-        key: '2',
-        title: i18n.t('intro.slideEvents.title'),
-        text: i18n.t('intro.slideEvents.text'),
-        view: (): React.Node => CustomIntroSlider.getIconView('calendar-star'),
-        mascotStyle: MASCOT_STYLE.HAPPY,
-        colors: ['#be1522', '#57080e'],
-      },
-      {
-        key: '3',
-        title: i18n.t('intro.slideServices.title'),
-        text: i18n.t('intro.slideServices.text'),
-        view: (): React.Node =>
-          CustomIntroSlider.getIconView('view-dashboard-variant'),
-        mascotStyle: MASCOT_STYLE.CUTE,
-        colors: ['#be1522', '#57080e'],
-      },
-      {
-        key: '4',
-        title: i18n.t('intro.slideDone.title'),
-        text: i18n.t('intro.slideDone.text'),
-        view: (): React.Node => this.getEndView(),
-        mascotStyle: MASCOT_STYLE.COOL,
-        colors: ['#9c165b', '#3e042b'],
-      },
-    ];
-    // $FlowFixMe
-    this.updateSlides = [];
-    for (let i = 0; i < Update.slidesNumber; i += 1) {
-      this.updateSlides.push({
-        key: i.toString(),
-        title: Update.getInstance().titleList[i],
-        text: Update.getInstance().descriptionList[i],
-        icon: Update.iconList[i],
-        colors: Update.colorsList[i],
-      });
-    }
-
-    this.aprilFoolsSlides = [
-      {
-        key: '1',
-        title: i18n.t('intro.aprilFoolsSlide.title'),
-        text: i18n.t('intro.aprilFoolsSlide.text'),
-        view: (): React.Node => <View />,
-        mascotStyle: MASCOT_STYLE.NORMAL,
-        colors: ['#e01928', '#be1522'],
-      },
-    ];
-  }
-
-  /**
-   * Render item to be used for the intro introSlides
-   *
-   * @param item The item to be displayed
-   * @param dimensions Dimensions of the item
-   */
-  getIntroRenderItem = ({
-    item,
-    dimensions,
-  }: {
-    item: IntroSlideType,
-    dimensions: {width: number, height: number},
-  }): React.Node => {
-    const {state} = this;
-    const index = parseInt(item.key, 10);
-    return (
-      <LinearGradient
-        style={[styles.mainContent, dimensions]}
-        colors={item.colors}
-        start={{x: 0, y: 0.1}}
-        end={{x: 0.1, y: 1}}>
-        {state.currentSlide === index ? (
-          <View style={{height: '100%', flex: 1}}>
-            <View style={{flex: 1}}>{item.view()}</View>
-            <Animatable.View animation="fadeIn">
-              {index !== 0 && index !== this.introSlides.length - 1 ? (
-                <Mascot
-                  style={{
-                    marginLeft: 30,
-                    marginBottom: 0,
-                    width: 100,
-                    marginTop: -30,
-                  }}
-                  emotion={item.mascotStyle}
-                  animated
-                  entryAnimation={{
-                    animation: 'slideInLeft',
-                    duration: 500,
-                  }}
-                  loopAnimation={{
-                    animation: 'pulse',
-                    iterationCount: 'infinite',
-                    duration: 2000,
-                  }}
-                />
-              ) : null}
-              <View
-                style={{
-                  marginLeft: 50,
-                  width: 0,
-                  height: 0,
-                  borderLeftWidth: 20,
-                  borderRightWidth: 0,
-                  borderBottomWidth: 20,
-                  borderStyle: 'solid',
-                  backgroundColor: 'transparent',
-                  borderLeftColor: 'transparent',
-                  borderRightColor: 'transparent',
-                  borderBottomColor: 'rgba(0,0,0,0.60)',
-                }}
-              />
-              <Card
-                style={{
-                  backgroundColor: 'rgba(0,0,0,0.38)',
-                  marginHorizontal: 20,
-                  borderColor: 'rgba(0,0,0,0.60)',
-                  borderWidth: 4,
-                  borderRadius: 10,
-                }}>
-                <Card.Content>
-                  <Animatable.Text
-                    animation="fadeIn"
-                    delay={100}
-                    style={styles.title}>
-                    {item.title}
-                  </Animatable.Text>
-                  <Animatable.Text
-                    animation="fadeIn"
-                    delay={200}
-                    style={styles.text}>
-                    {item.text}
-                  </Animatable.Text>
-                </Card.Content>
-              </Card>
-            </Animatable.View>
-          </View>
-        ) : null}
-      </LinearGradient>
-    );
-  };
-
-  getEndView = (): React.Node => {
-    return (
-      <View style={{flex: 1}}>
-        <Mascot
-          style={{
-            ...styles.center,
-            height: '80%',
-          }}
-          emotion={MASCOT_STYLE.COOL}
-          animated
-          entryAnimation={{
-            animation: 'slideInDown',
-            duration: 2000,
-          }}
-          loopAnimation={{
-            animation: 'pulse',
-            duration: 2000,
-            iterationCount: 'infinite',
-          }}
-        />
-      </View>
-    );
-  };
-
-  getWelcomeView = (): React.Node => {
-    return (
-      <View style={{flex: 1}}>
-        <Mascot
-          style={{
-            ...styles.center,
-            height: '80%',
-          }}
-          emotion={MASCOT_STYLE.NORMAL}
-          animated
-          entryAnimation={{
-            animation: 'bounceIn',
-            duration: 2000,
-          }}
-        />
-        <Animatable.Text
-          useNativeDriver
-          animation="fadeInUp"
-          duration={500}
-          style={{
-            color: '#fff',
-            textAlign: 'center',
-            fontSize: 25,
-          }}>
-          PABLO
-        </Animatable.Text>
-        <Animatable.View
-          useNativeDriver
-          animation="fadeInUp"
-          duration={500}
-          delay={200}
-          style={{
-            position: 'absolute',
-            bottom: 30,
-            right: '20%',
-            width: 50,
-            height: 50,
-          }}>
-          <MaterialCommunityIcons
-            style={{
-              ...styles.center,
-              transform: [{rotateZ: '70deg'}],
-            }}
-            name="undo"
-            color="#fff"
-            size={40}
-          />
-        </Animatable.View>
-      </View>
-    );
-  };
-
-  static getIconView(icon: MaterialCommunityIconsGlyphs): React.Node {
-    return (
-      <View style={{flex: 1}}>
-        <Animatable.View style={styles.center} animation="fadeIn">
-          <MaterialCommunityIcons name={icon} color="#fff" size={200} />
-        </Animatable.View>
-      </View>
-    );
-  }
-
-  static setStatusBarColor(color: string) {
-    if (Platform.OS === 'android') StatusBar.setBackgroundColor(color, true);
-  }
-
-  onSlideChange = (index: number) => {
-    CustomIntroSlider.setStatusBarColor(this.currentSlides[index].colors[0]);
-    this.setState({currentSlide: index});
-  };
-
-  onSkip = () => {
-    CustomIntroSlider.setStatusBarColor(
-      this.currentSlides[this.currentSlides.length - 1].colors[0],
-    );
-    if (this.sliderRef.current != null)
-      this.sliderRef.current.goToSlide(this.currentSlides.length - 1);
-  };
-
-  onDone = () => {
-    const {props} = this;
-    CustomIntroSlider.setStatusBarColor(
-      ThemeManager.getCurrentTheme().colors.surface,
-    );
-    props.onDone();
-  };
-
-  getRenderNextButton = (): React.Node => {
-    return (
-      <Animatable.View
-        animation="fadeIn"
-        style={{
-          borderRadius: 25,
-          padding: 5,
-          backgroundColor: 'rgba(0,0,0,0.2)',
-        }}>
-        <MaterialCommunityIcons name="arrow-right" color="#fff" size={40} />
-      </Animatable.View>
-    );
-  };
-
-  getRenderDoneButton = (): React.Node => {
-    return (
-      <Animatable.View
-        animation="bounceIn"
-        style={{
-          borderRadius: 25,
-          padding: 5,
-          backgroundColor: 'rgb(190,21,34)',
-        }}>
-        <MaterialCommunityIcons name="check" color="#fff" size={40} />
-      </Animatable.View>
-    );
-  };
-
-  render(): React.Node {
-    const {props, state} = this;
-    this.currentSlides = this.introSlides;
-    if (props.isUpdate) this.currentSlides = this.updateSlides;
-    else if (props.isAprilFools) this.currentSlides = this.aprilFoolsSlides;
-    CustomIntroSlider.setStatusBarColor(this.currentSlides[0].colors[0]);
-    return (
-      <AppIntroSlider
-        ref={this.sliderRef}
-        data={this.currentSlides}
-        extraData={state.currentSlide}
-        renderItem={this.getIntroRenderItem}
-        renderNextButton={this.getRenderNextButton}
-        renderDoneButton={this.getRenderDoneButton}
-        onDone={this.onDone}
-        onSlideChange={this.onSlideChange}
-        onSkip={this.onSkip}
-      />
-    );
-  }
-}

src/components/Overrides/CustomModal.js

@@ -2,10 +2,9 @@
 
 import * as React from 'react';
 import {withTheme} from 'react-native-paper';
-import {Modalize} from 'react-native-modalize';
+import {Modalize} from "react-native-modalize";
-import {View} from 'react-native-animatable';
+import {View} from "react-native-animatable";
-import CustomTabBar from '../Tabbar/CustomTabBar';
+import CustomTabBar from "../Tabbar/CustomTabBar";
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
 /**
  * Abstraction layer for Modalize component, using custom configuration
@@ -13,29 +12,25 @@ import type {CustomThemeType} from '../../managers/ThemeManager';
  * @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
  * @return {*}
  */
-function CustomModal(props: {
+function CustomModal(props) {
-  theme: CustomThemeType,
+    const {colors} = props.theme;
-  onRef: (re: Modalize) => void,
-  children?: React.Node,
-}): React.Node {
-  const {theme, onRef, children} = props;
     return (
         <Modalize
-      ref={onRef}
+            ref={props.onRef}
             adjustToContentHeight
-      handlePosition="inside"
+            handlePosition={'inside'}
-      modalStyle={{backgroundColor: theme.colors.card}}
+            modalStyle={{backgroundColor: colors.card}}
-      handleStyle={{backgroundColor: theme.colors.primary}}>
+            handleStyle={{backgroundColor: colors.primary}}
-      <View
+        >
-        style={{
+            <View style={{
-          paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
+                paddingBottom: CustomTabBar.TAB_BAR_HEIGHT
             }}>
-        {children}
+                {props.children}
             </View>
+
         </Modalize>
     );
 }
 
-CustomModal.defaultProps = {children: null};
-
 export default withTheme(CustomModal);
+

src/components/Overrides/CustomSlider.js

@@ -2,19 +2,19 @@
 
 import * as React from 'react';
 import {Text, withTheme} from 'react-native-paper';
-import {View} from 'react-native-animatable';
+import {View} from "react-native-animatable";
-import Slider, {SliderProps} from '@react-native-community/slider';
+import type {CustomTheme} from "../../managers/ThemeManager";
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import Slider, {SliderProps} from "@react-native-community/slider";
 
-type PropsType = {
+type Props = {
-  theme: CustomThemeType,
+    theme: CustomTheme,
-  valueSuffix?: string,
+    valueSuffix: string,
-  ...SliderProps,
+    ...SliderProps
-};
+}
 
-type StateType = {
+type State = {
     currentValue: number,
-};
+}
 
 /**
  * Abstraction layer for Modalize component, using custom configuration
@@ -22,44 +22,37 @@ type StateType = {
  * @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
  * @return {*}
  */
-class CustomSlider extends React.Component<PropsType, StateType> {
+class CustomSlider extends React.Component<Props, State> {
-  static defaultProps = {
-    valueSuffix: '',
-  };
 
-  constructor(props: PropsType) {
+    static defaultProps = {
-    super(props);
+        valueSuffix: "",
-    this.state = {
+    }
-      currentValue: props.value,
+
-    };
+    state = {
+        currentValue: this.props.value,
     }
 
     onValueChange = (value: number) => {
-    const {props} = this;
         this.setState({currentValue: value});
-    if (props.onValueChange != null) props.onValueChange(value);
+        if (this.props.onValueChange != null)
-  };
+            this.props.onValueChange(value);
+    }
 
-  render(): React.Node {
+    render() {
-    const {props, state} = this;
         return (
             <View style={{flex: 1, flexDirection: 'row'}}>
-        <Text
+                <Text style={{marginHorizontal: 10, marginTop: 'auto', marginBottom: 'auto'}}>
-          style={{
+                    {this.state.currentValue}min
-            marginHorizontal: 10,
-            marginTop: 'auto',
-            marginBottom: 'auto',
-          }}>
-          {state.currentValue}min
                 </Text>
                 <Slider
-          // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this.props}
-          {...props}
                     onValueChange={this.onValueChange}
                 />
             </View>
         );
     }
+
 }
 
 export default withTheme(CustomSlider);
+

src/components/Screens/BasicLoadingScreen.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import {ActivityIndicator, withTheme} from 'react-native-paper';
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
 /**
  * Component used to display a header button
@@ -11,27 +10,26 @@ import type {CustomThemeType} from '../../managers/ThemeManager';
  * @param props Props to pass to the component
  * @return {*}
  */
-function BasicLoadingScreen(props: {
+function BasicLoadingScreen(props) {
-  theme: CustomThemeType,
+    const {colors} = props.theme;
-  isAbsolute: boolean,
+    let position = undefined;
-}): React.Node {
+    if (props.isAbsolute !== undefined && props.isAbsolute)
-  const {theme, isAbsolute} = props;
+        position = 'absolute';
-  const {colors} = theme;
-  let position;
-  if (isAbsolute != null && isAbsolute) position = 'absolute';
 
     return (
-    <View
+        <View style={{
-      style={{
             backgroundColor: colors.background,
-        position,
+            position: position,
             top: 0,
             right: 0,
             width: '100%',
             height: '100%',
             justifyContent: 'center',
         }}>
-      <ActivityIndicator animating size="large" color={colors.primary} />
+            <ActivityIndicator
+                animating={true}
+                size={'large'}
+                color={colors.primary}/>
         </View>
     );
 }

src/components/Screens/ErrorView.js

@@ -2,24 +2,167 @@
 
 import * as React from 'react';
 import {Button, Subheading, withTheme} from 'react-native-paper';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from "react-native";
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import i18n from 'i18n-js';
+import {ERROR_TYPE} from "../../utils/WebData";
 import * as Animatable from 'react-native-animatable';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {ERROR_TYPE} from '../../utils/WebData';
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
-type PropsType = {
+type Props = {
-  navigation: StackNavigationProp,
+    navigation: Object,
-  theme: CustomThemeType,
+    route: Object,
-  route: {name: string},
+    errorCode: number,
-  onRefresh?: () => void,
+    onRefresh: Function,
-  errorCode?: number,
+    icon: string,
-  icon?: string,
+    message: string,
-  message?: string,
+    showRetryButton: boolean,
-  showRetryButton?: boolean,
+}
-};
+
+type State = {
+    refreshing: boolean,
+}
+
+class ErrorView extends React.PureComponent<Props, State> {
+
+    colors: Object;
+
+    message: string;
+    icon: string;
+
+    showLoginButton: boolean;
+
+    static defaultProps = {
+        errorCode: 0,
+        icon: '',
+        message: '',
+        showRetryButton: true,
+    }
+
+    state = {
+        refreshing: false,
+    };
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+        this.icon = "";
+    }
+
+    generateMessage() {
+        this.showLoginButton = false;
+        if (this.props.errorCode !== 0) {
+            switch (this.props.errorCode) {
+                case ERROR_TYPE.BAD_CREDENTIALS:
+                    this.message = i18n.t("errors.badCredentials");
+                    this.icon = "account-alert-outline";
+                    break;
+                case ERROR_TYPE.BAD_TOKEN:
+                    this.message = i18n.t("errors.badToken");
+                    this.icon = "account-alert-outline";
+                    this.showLoginButton = true;
+                    break;
+                case ERROR_TYPE.NO_CONSENT:
+                    this.message = i18n.t("errors.noConsent");
+                    this.icon = "account-remove-outline";
+                    break;
+                case ERROR_TYPE.TOKEN_SAVE:
+                    this.message = i18n.t("errors.tokenSave");
+                    this.icon = "alert-circle-outline";
+                    break;
+                case ERROR_TYPE.BAD_INPUT:
+                    this.message = i18n.t("errors.badInput");
+                    this.icon = "alert-circle-outline";
+                    break;
+                case ERROR_TYPE.FORBIDDEN:
+                    this.message = i18n.t("errors.forbidden");
+                    this.icon = "lock";
+                    break;
+                case ERROR_TYPE.CONNECTION_ERROR:
+                    this.message = i18n.t("errors.connectionError");
+                    this.icon = "access-point-network-off";
+                    break;
+                case ERROR_TYPE.SERVER_ERROR:
+                    this.message = i18n.t("errors.serverError");
+                    this.icon = "server-network-off";
+                    break;
+                default:
+                    this.message = i18n.t("errors.unknown");
+                    this.icon = "alert-circle-outline";
+                    break;
+            }
+            this.message += "\n\nCode " + this.props.errorCode;
+        } else {
+            this.message = this.props.message;
+            this.icon = this.props.icon;
+        }
+
+    }
+
+    getRetryButton() {
+        return <Button
+            mode={'contained'}
+            icon={'refresh'}
+            onPress={this.props.onRefresh}
+            style={styles.button}
+        >
+            {i18n.t("general.retry")}
+        </Button>;
+    }
+
+    goToLogin = () => {
+        this.props.navigation.navigate("login",
+            {
+                screen: 'login',
+                params: {nextScreen: this.props.route.name}
+            })
+    };
+
+    getLoginButton() {
+        return <Button
+            mode={'contained'}
+            icon={'login'}
+            onPress={this.goToLogin}
+            style={styles.button}
+        >
+            {i18n.t("screens.login.title")}
+        </Button>;
+    }
+
+    render() {
+        this.generateMessage();
+        return (
+            <Animatable.View
+                style={{
+                ...styles.outer,
+                backgroundColor: this.colors.background
+            }}
+                animation={"zoomIn"}
+                duration={200}
+                useNativeDriver
+            >
+                <View style={styles.inner}>
+                    <View style={styles.iconContainer}>
+                        <MaterialCommunityIcons
+                            name={this.icon}
+                            size={150}
+                            color={this.colors.textDisabled}/>
+                    </View>
+                    <Subheading style={{
+                        ...styles.subheading,
+                        color: this.colors.textDisabled
+                    }}>
+                        {this.message}
+                    </Subheading>
+                    {this.props.showRetryButton
+                        ? (this.showLoginButton
+                            ? this.getLoginButton()
+                            : this.getRetryButton())
+                        : null}
+                </View>
+            </Animatable.View>
+        );
+    }
+}
 
 const styles = StyleSheet.create({
     outer: {
@@ -32,162 +175,18 @@ const styles = StyleSheet.create({
     iconContainer: {
         marginLeft: 'auto',
         marginRight: 'auto',
-    marginBottom: 20,
+        marginBottom: 20
     },
     subheading: {
         textAlign: 'center',
-    paddingHorizontal: 20,
+        paddingHorizontal: 20
     },
     button: {
         marginTop: 10,
         marginLeft: 'auto',
         marginRight: 'auto',
-  },
+    }
 });
 
-class ErrorView extends React.PureComponent<PropsType> {
-  static defaultProps = {
-    onRefresh: () => {},
-    errorCode: 0,
-    icon: '',
-    message: '',
-    showRetryButton: true,
-  };
-
-  message: string;
-
-  icon: string;
-
-  showLoginButton: boolean;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.icon = '';
-  }
-
-  getRetryButton(): React.Node {
-    const {props} = this;
-    return (
-      <Button
-        mode="contained"
-        icon="refresh"
-        onPress={props.onRefresh}
-        style={styles.button}>
-        {i18n.t('general.retry')}
-      </Button>
-    );
-  }
-
-  getLoginButton(): React.Node {
-    return (
-      <Button
-        mode="contained"
-        icon="login"
-        onPress={this.goToLogin}
-        style={styles.button}>
-        {i18n.t('screens.login.title')}
-      </Button>
-    );
-  }
-
-  goToLogin = () => {
-    const {props} = this;
-    props.navigation.navigate('login', {
-      screen: 'login',
-      params: {nextScreen: props.route.name},
-    });
-  };
-
-  generateMessage() {
-    const {props} = this;
-    this.showLoginButton = false;
-    if (props.errorCode !== 0) {
-      switch (props.errorCode) {
-        case ERROR_TYPE.BAD_CREDENTIALS:
-          this.message = i18n.t('errors.badCredentials');
-          this.icon = 'account-alert-outline';
-          break;
-        case ERROR_TYPE.BAD_TOKEN:
-          this.message = i18n.t('errors.badToken');
-          this.icon = 'account-alert-outline';
-          this.showLoginButton = true;
-          break;
-        case ERROR_TYPE.NO_CONSENT:
-          this.message = i18n.t('errors.noConsent');
-          this.icon = 'account-remove-outline';
-          break;
-        case ERROR_TYPE.TOKEN_SAVE:
-          this.message = i18n.t('errors.tokenSave');
-          this.icon = 'alert-circle-outline';
-          break;
-        case ERROR_TYPE.BAD_INPUT:
-          this.message = i18n.t('errors.badInput');
-          this.icon = 'alert-circle-outline';
-          break;
-        case ERROR_TYPE.FORBIDDEN:
-          this.message = i18n.t('errors.forbidden');
-          this.icon = 'lock';
-          break;
-        case ERROR_TYPE.CONNECTION_ERROR:
-          this.message = i18n.t('errors.connectionError');
-          this.icon = 'access-point-network-off';
-          break;
-        case ERROR_TYPE.SERVER_ERROR:
-          this.message = i18n.t('errors.serverError');
-          this.icon = 'server-network-off';
-          break;
-        default:
-          this.message = i18n.t('errors.unknown');
-          this.icon = 'alert-circle-outline';
-          break;
-      }
-      this.message += `\n\nCode ${
-        props.errorCode != null ? props.errorCode : -1
-      }`;
-    } else {
-      this.message = props.message != null ? props.message : '';
-      this.icon = props.icon != null ? props.icon : '';
-    }
-  }
-
-  render(): React.Node {
-    const {props} = this;
-    this.generateMessage();
-    let button;
-    if (this.showLoginButton) button = this.getLoginButton();
-    else if (props.showRetryButton) button = this.getRetryButton();
-    else button = null;
-
-    return (
-      <Animatable.View
-        style={{
-          ...styles.outer,
-          backgroundColor: props.theme.colors.background,
-        }}
-        animation="zoomIn"
-        duration={200}
-        useNativeDriver>
-        <View style={styles.inner}>
-          <View style={styles.iconContainer}>
-            <MaterialCommunityIcons
-              // $FlowFixMe
-              name={this.icon}
-              size={150}
-              color={props.theme.colors.textDisabled}
-            />
-          </View>
-          <Subheading
-            style={{
-              ...styles.subheading,
-              color: props.theme.colors.textDisabled,
-            }}>
-            {this.message}
-          </Subheading>
-          {button}
-        </View>
-      </Animatable.View>
-    );
-  }
-}
 
 export default withTheme(ErrorView);

src/components/Screens/WebSectionList.js

@@ -9,7 +9,7 @@ import {Collapsible} from 'react-navigation-collapsible';
 import {StackNavigationProp} from '@react-navigation/stack';
 import ErrorView from './ErrorView';
 import BasicLoadingScreen from './BasicLoadingScreen';
-import withCollapsible from '../../utils/withCollapsible';
+import {withCollapsible} from '../../utils/withCollapsible';
 import CustomTabBar from '../Tabbar/CustomTabBar';
 import {ERROR_TYPE, readData} from '../../utils/WebData';
 import CollapsibleSectionList from '../Collapsible/CollapsibleSectionList';

src/components/Screens/WebViewScreen.js

@@ -1,50 +1,47 @@
 // @flow
 
 import * as React from 'react';
-import WebView from 'react-native-webview';
+import WebView from "react-native-webview";
-import {
+import BasicLoadingScreen from "./BasicLoadingScreen";
-  Divider,
+import ErrorView from "./ErrorView";
-  HiddenItem,
+import {ERROR_TYPE} from "../../utils/WebData";
-  OverflowMenu,
-} from 'react-navigation-header-buttons';
-import i18n from 'i18n-js';
-import {Animated, BackHandler, Linking} from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import {withTheme} from 'react-native-paper';
-import {StackNavigationProp} from '@react-navigation/stack';
-import {Collapsible} from 'react-navigation-collapsible';
-import type {CustomThemeType} from '../../managers/ThemeManager';
-import withCollapsible from '../../utils/withCollapsible';
 import MaterialHeaderButtons, {Item} from '../Overrides/CustomHeaderButton';
-import {ERROR_TYPE} from '../../utils/WebData';
+import {Divider, HiddenItem, OverflowMenu} from "react-navigation-header-buttons";
-import ErrorView from './ErrorView';
+import i18n from 'i18n-js';
-import BasicLoadingScreen from './BasicLoadingScreen';
+import {Animated, BackHandler, Linking} from "react-native";
+import {withCollapsible} from "../../utils/withCollapsible";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import {withTheme} from "react-native-paper";
+import type {CustomTheme} from "../../managers/ThemeManager";
+import {StackNavigationProp} from "@react-navigation/stack";
+import {Collapsible} from "react-navigation-collapsible";
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  theme: CustomThemeType,
+    theme: CustomTheme,
     url: string,
+    customJS: string,
+    customPaddingFunction: null | (padding: number) => string,
     collapsibleStack: Collapsible,
-  onMessage: (event: {nativeEvent: {data: string}}) => void,
+    onMessage: Function,
-  onScroll: (event: SyntheticEvent<EventTarget>) => void,
+    onScroll: Function,
-  customJS?: string,
+    showAdvancedControls: boolean,
-  customPaddingFunction?: null | ((padding: number) => string),
+}
-  showAdvancedControls?: boolean,
-};
 
 const AnimatedWebView = Animated.createAnimatedComponent(WebView);
 
 /**
  * Class defining a webview screen.
  */
-class WebViewScreen extends React.PureComponent<PropsType> {
+class WebViewScreen extends React.PureComponent<Props> {
+
     static defaultProps = {
         customJS: '',
         showAdvancedControls: true,
         customPaddingFunction: null,
     };
 
-  webviewRef: {current: null | WebView};
+    webviewRef: { current: null | WebView };
 
     canGoBack: boolean;
 
@@ -58,24 +55,27 @@ class WebViewScreen extends React.PureComponent<PropsType> {
      * Creates header buttons and listens to events after mounting
      */
     componentDidMount() {
-    const {props} = this;
+        this.props.navigation.setOptions({
-    props.navigation.setOptions({
+            headerRight: this.props.showAdvancedControls
-      headerRight: props.showAdvancedControls
                 ? this.getAdvancedButtons
                 : this.getBasicButton,
         });
-    props.navigation.addListener('focus', () => {
+        this.props.navigation.addListener(
+            'focus',
+            () =>
                 BackHandler.addEventListener(
                     'hardwareBackPress',
-        this.onBackButtonPressAndroid,
+                    this.onBackButtonPressAndroid
+                )
         );
-    });
+        this.props.navigation.addListener(
-    props.navigation.addListener('blur', () => {
+            'blur',
+            () =>
                 BackHandler.removeEventListener(
                     'hardwareBackPress',
-        this.onBackButtonPressAndroid,
+                    this.onBackButtonPressAndroid
+                )
         );
-    });
     }
 
     /**
@@ -83,7 +83,7 @@ class WebViewScreen extends React.PureComponent<PropsType> {
      *
      * @returns {boolean}
      */
-  onBackButtonPressAndroid = (): boolean => {
+    onBackButtonPressAndroid = () => {
         if (this.canGoBack) {
             this.onGoBackClicked();
             return true;
@@ -96,19 +96,17 @@ class WebViewScreen extends React.PureComponent<PropsType> {
      *
      * @return {*}
      */
-  getBasicButton = (): React.Node => {
+    getBasicButton = () => {
         return (
             <MaterialHeaderButtons>
                 <Item
                     title="refresh"
                     iconName="refresh"
-          onPress={this.onRefreshClicked}
+                    onPress={this.onRefreshClicked}/>
-        />
                 <Item
-          title={i18n.t('general.openInBrowser')}
+                    title={i18n.t("general.openInBrowser")}
                     iconName="open-in-new"
-          onPress={this.onOpenClicked}
+                    onPress={this.onOpenClicked}/>
-        />
             </MaterialHeaderButtons>
         );
     };
@@ -119,8 +117,7 @@ class WebViewScreen extends React.PureComponent<PropsType> {
      *
      * @returns {*}
      */
-  getAdvancedButtons = (): React.Node => {
+    getAdvancedButtons = () => {
-    const {props} = this;
         return (
             <MaterialHeaderButtons>
                 <Item
@@ -134,74 +131,40 @@ class WebViewScreen extends React.PureComponent<PropsType> {
                         <MaterialCommunityIcons
                             name="dots-vertical"
                             size={26}
-              color={props.theme.colors.text}
+                            color={this.props.theme.colors.text}
-            />
+                        />}
-          }>
+                >
                     <HiddenItem
-            title={i18n.t('general.goBack')}
+                        title={i18n.t("general.goBack")}
-            onPress={this.onGoBackClicked}
+                        onPress={this.onGoBackClicked}/>
-          />
                     <HiddenItem
-            title={i18n.t('general.goForward')}
+                        title={i18n.t("general.goForward")}
-            onPress={this.onGoForwardClicked}
+                        onPress={this.onGoForwardClicked}/>
-          />
+                    <Divider/>
-          <Divider />
                     <HiddenItem
-            title={i18n.t('general.openInBrowser')}
+                        title={i18n.t("general.openInBrowser")}
-            onPress={this.onOpenClicked}
+                        onPress={this.onOpenClicked}/>
-          />
                 </OverflowMenu>
             </MaterialHeaderButtons>
         );
-  };
-
-  /**
-   * Gets the loading indicator
-   *
-   * @return {*}
-   */
-  getRenderLoading = (): React.Node => <BasicLoadingScreen isAbsolute />;
-
-  /**
-   * Gets the javascript needed to generate a padding on top of the page
-   * This adds padding to the body and runs the custom padding function given in props
-   *
-   * @param padding The padding to add in pixels
-   * @returns {string}
-   */
-  getJavascriptPadding(padding: number): string {
-    const {props} = this;
-    const customPadding =
-      props.customPaddingFunction != null
-        ? props.customPaddingFunction(padding)
-        : '';
-    return `document.getElementsByTagName('body')[0].style.paddingTop = '${padding}px';${customPadding}true;`;
     }
 
     /**
      * Callback to use when refresh button is clicked. Reloads the webview.
      */
     onRefreshClicked = () => {
-    if (this.webviewRef.current != null) this.webviewRef.current.reload();
+        if (this.webviewRef.current != null)
-  };
+            this.webviewRef.current.reload();
-
+    }
     onGoBackClicked = () => {
-    if (this.webviewRef.current != null) this.webviewRef.current.goBack();
+        if (this.webviewRef.current != null)
-  };
+            this.webviewRef.current.goBack();
-
+    }
     onGoForwardClicked = () => {
-    if (this.webviewRef.current != null) this.webviewRef.current.goForward();
+        if (this.webviewRef.current != null)
-  };
+            this.webviewRef.current.goForward();
-
+    }
-  onOpenClicked = () => {
+    onOpenClicked = () => Linking.openURL(this.props.url);
-    const {url} = this.props;
-    Linking.openURL(url);
-  };
-
-  onScroll = (event: SyntheticEvent<EventTarget>) => {
-    const {onScroll} = this.props;
-    if (onScroll) onScroll(event);
-  };
 
     /**
      * Injects the given javascript string into the web page
@@ -211,32 +174,55 @@ class WebViewScreen extends React.PureComponent<PropsType> {
     injectJavaScript = (script: string) => {
         if (this.webviewRef.current != null)
             this.webviewRef.current.injectJavaScript(script);
-  };
+    }
 
-  render(): React.Node {
+    /**
-    const {props} = this;
+     * Gets the loading indicator
-    const {containerPaddingTop, onScrollWithListener} = props.collapsibleStack;
+     *
+     * @return {*}
+     */
+    getRenderLoading = () => <BasicLoadingScreen isAbsolute={true}/>;
+
+    /**
+     * Gets the javascript needed to generate a padding on top of the page
+     * This adds padding to the body and runs the custom padding function given in props
+     *
+     * @param padding The padding to add in pixels
+     * @returns {string}
+     */
+    getJavascriptPadding(padding: number) {
+        const customPadding = this.props.customPaddingFunction != null ? this.props.customPaddingFunction(padding) : "";
+        return (
+            "document.getElementsByTagName('body')[0].style.paddingTop = '" + padding + "px';" +
+            customPadding +
+            "true;"
+        );
+    }
+
+    onScroll = (event: Object) => {
+        if (this.props.onScroll)
+            this.props.onScroll(event);
+    }
+
+    render() {
+        const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
         return (
             <AnimatedWebView
                 ref={this.webviewRef}
-        source={{uri: props.url}}
+                source={{uri: this.props.url}}
-        startInLoadingState
+                startInLoadingState={true}
-        injectedJavaScript={props.customJS}
+                injectedJavaScript={this.props.customJS}
-        javaScriptEnabled
+                javaScriptEnabled={true}
                 renderLoading={this.getRenderLoading}
-        renderError={(): React.Node => (
+                renderError={() => <ErrorView
-          <ErrorView
                     errorCode={ERROR_TYPE.CONNECTION_ERROR}
                     onRefresh={this.onRefreshClicked}
-          />
+                />}
-        )}
+                onNavigationStateChange={navState => {
-        onNavigationStateChange={(navState: {canGoBack: boolean}) => {
                     this.canGoBack = navState.canGoBack;
                 }}
-        onMessage={props.onMessage}
+                onMessage={this.props.onMessage}
-        onLoad={() => {
+                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
-          this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop));
-        }}
                 // Animations
                 onScroll={onScrollWithListener(this.onScroll)}
             />

src/components/Tabbar/CustomTabBar.js

@@ -2,44 +2,23 @@
 
 import * as React from 'react';
 import {withTheme} from 'react-native-paper';
-import Animated from 'react-native-reanimated';
+import TabIcon from "./TabIcon";
-import {Collapsible} from 'react-navigation-collapsible';
+import TabHomeIcon from "./TabHomeIcon";
-import {StackNavigationProp} from '@react-navigation/stack';
+import {Animated} from 'react-native';
-import TabIcon from './TabIcon';
+import {Collapsible} from "react-navigation-collapsible";
-import TabHomeIcon from './TabHomeIcon';
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
-type RouteType = {
+type Props = {
-  name: string,
+    state: Object,
-  key: string,
+    descriptors: Object,
-  params: {collapsible: Collapsible},
+    navigation: Object,
-  state: {
+    theme: Object,
-    index: number,
+    collapsibleStack: Object,
-    routes: Array<RouteType>,
+}
-  },
-};
 
-type PropsType = {
+type State = {
-  state: {
+    translateY: AnimatedValue,
-    index: number,
+    barSynced: boolean,
-    routes: Array<RouteType>,
+}
-  },
-  descriptors: {
-    [key: string]: {
-      options: {
-        tabBarLabel: string,
-        title: string,
-      },
-    },
-  },
-  navigation: StackNavigationProp,
-  theme: CustomThemeType,
-};
-
-type StateType = {
-  // eslint-disable-next-line flowtype/no-weak-types
-  translateY: any,
-};
 
 const TAB_ICONS = {
     proxiwash: 'tshirt-crew',
@@ -48,16 +27,30 @@ const TAB_ICONS = {
     planex: 'clock',
 };
 
-class CustomTabBar extends React.Component<PropsType, StateType> {
+class CustomTabBar extends React.Component<Props, State> {
+
     static TAB_BAR_HEIGHT = 48;
 
-  constructor() {
+    state = {
-    super();
-    this.state = {
         translateY: new Animated.Value(0),
-    };
     }
 
+    syncTabBar = (route, index) => {
+        const state = this.props.state;
+        const isFocused = state.index === index;
+        if (isFocused) {
+            const stackState = route.state;
+            const stackRoute = stackState ? stackState.routes[stackState.index] : undefined;
+            const params: { collapsible: Collapsible } = stackRoute ? stackRoute.params : undefined;
+            const collapsible = params ? params.collapsible : undefined;
+            if (collapsible) {
+                this.setState({
+                    translateY: Animated.multiply(-1.5, collapsible.translateY), // Hide tab bar faster than header bar
+                });
+            }
+        }
+    };
+
     /**
      * Navigates to the given route if it is different from the current one
      *
@@ -65,15 +58,14 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
      * @param currentIndex The current route index
      * @param destIndex The destination route index
      */
-  onItemPress(route: RouteType, currentIndex: number, destIndex: number) {
+    onItemPress(route: Object, currentIndex: number, destIndex: number) {
-    const {navigation} = this.props;
+        const event = this.props.navigation.emit({
-    const event = navigation.emit({
             type: 'tabPress',
             target: route.key,
             canPreventDefault: true,
         });
         if (currentIndex !== destIndex && !event.defaultPrevented)
-      navigation.navigate(route.name);
+            this.props.navigation.navigate(route.name);
     }
 
     /**
@@ -81,25 +73,16 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
      *
      * @param route
      */
-  onItemLongPress(route: RouteType) {
+    onItemLongPress(route: Object) {
-    const {navigation} = this.props;
+        const event = this.props.navigation.emit({
-    const event = navigation.emit({
             type: 'tabLongPress',
             target: route.key,
             canPreventDefault: true,
         });
-    if (route.name === 'home' && !event.defaultPrevented)
+        if (route.name === "home" && !event.defaultPrevented)
-      navigation.navigate('game-start');
+            this.props.navigation.navigate('game-start');
     }
 
-  /**
-   * Finds the active route and syncs the tab bar animation with the header bar
-   */
-  onRouteChange = () => {
-    const {props} = this;
-    props.state.routes.map(this.syncTabBar);
-  };
-
     /**
      * Gets an icon for the given route if it is not the home one as it uses a custom button
      *
@@ -107,13 +90,22 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
      * @param focused
      * @returns {null}
      */
-  getTabBarIcon = (route: RouteType, focused: boolean): React.Node => {
+    tabBarIcon = (route, focused) => {
         let icon = TAB_ICONS[route.name];
-    icon = focused ? icon : `${icon}-outline`;
+        icon = focused ? icon : icon + ('-outline');
-    if (route.name !== 'home') return icon;
+        if (route.name !== "home")
+            return icon;
+        else
             return null;
     };
 
+    /**
+     * Finds the active route and syncs the tab bar animation with the header bar
+     */
+    onRouteChange = () => {
+        this.props.state.routes.map(this.syncTabBar)
+    }
+
     /**
      * Gets a tab icon render.
      * If the given route is focused, it syncs the tab bar and header bar animations together
@@ -122,79 +114,49 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
      * @param index The index of the current route
      * @returns {*}
      */
-  getRenderIcon = (route: RouteType, index: number): React.Node => {
+    renderIcon = (route, index) => {
-    const {props} = this;
+        const state = this.props.state;
-    const {state} = props;
+        const {options} = this.props.descriptors[route.key];
-    const {options} = props.descriptors[route.key];
+        const label =
-    let label;
+            options.tabBarLabel != null
-    if (options.tabBarLabel != null) label = options.tabBarLabel;
+                ? options.tabBarLabel
-    else if (options.title != null) label = options.title;
+                : options.title != null
-    else label = route.name;
+                ? options.title
+                : route.name;
 
-    const onPress = () => {
+        const onPress = () => this.onItemPress(route, state.index, index);
-      this.onItemPress(route, state.index, index);
+        const onLongPress = () => this.onItemLongPress(route);
-    };
-    const onLongPress = () => {
-      this.onItemLongPress(route);
-    };
         const isFocused = state.index === index;
 
-    const color = isFocused
+        const color = isFocused ? this.props.theme.colors.primary : this.props.theme.colors.tabIcon;
-      ? props.theme.colors.primary
+        if (route.name !== "home") {
-      : props.theme.colors.tabIcon;
+            return <TabIcon
-    if (route.name !== 'home') {
-      return (
-        <TabIcon
                 onPress={onPress}
                 onLongPress={onLongPress}
-          icon={this.getTabBarIcon(route, isFocused)}
+                icon={this.tabBarIcon(route, isFocused)}
                 color={color}
                 label={label}
                 focused={isFocused}
                 extraData={state.index > index}
                 key={route.key}
             />
-      );
+        } else
-    }
+            return <TabHomeIcon
-    return (
-      <TabHomeIcon
                 onPress={onPress}
                 onLongPress={onLongPress}
                 focused={isFocused}
                 key={route.key}
                 tabBarHeight={CustomTabBar.TAB_BAR_HEIGHT}
             />
-    );
     };
 
-  getIcons(): React.Node {
+    getIcons() {
-    const {props} = this;
+        return this.props.state.routes.map(this.renderIcon);
-    return props.state.routes.map(this.getRenderIcon);
     }
 
-  syncTabBar = (route: RouteType, index: number) => {
+    render() {
-    const {state} = this.props;
+        this.props.navigation.addListener('state', this.onRouteChange);
-    const isFocused = state.index === index;
-    if (isFocused) {
-      const stackState = route.state;
-      const stackRoute =
-        stackState != null ? stackState.routes[stackState.index] : null;
-      const params: {collapsible: Collapsible} | null =
-        stackRoute != null ? stackRoute.params : null;
-      const collapsible = params != null ? params.collapsible : null;
-      if (collapsible != null) {
-        this.setState({
-          translateY: Animated.multiply(-1.5, collapsible.translateY), // Hide tab bar faster than header bar
-        });
-      }
-    }
-  };
-
-  render(): React.Node {
-    const {props, state} = this;
-    props.navigation.addListener('state', this.onRouteChange);
         const icons = this.getIcons();
-    // $FlowFixMe
         return (
             <Animated.View
                 useNativeDriver
@@ -205,9 +167,10 @@ class CustomTabBar extends React.Component<PropsType, StateType> {
                     position: 'absolute',
                     bottom: 0,
                     left: 0,
-          backgroundColor: props.theme.colors.surface,
+                    backgroundColor: this.props.theme.colors.surface,
-          transform: [{translateY: state.translateY}],
+                    transform: [{translateY: this.state.translateY}],
-        }}>
+                }}
+            >
                 {icons}
             </Animated.View>
         );

src/components/Tabbar/TabHomeIcon.js

@@ -1,95 +1,70 @@
 // @flow
 
 import * as React from 'react';
-import {Image, Platform, View} from 'react-native';
+import {Image, Platform, View} from "react-native";
 import {FAB, TouchableRipple, withTheme} from 'react-native-paper';
-import * as Animatable from 'react-native-animatable';
+import * as Animatable from "react-native-animatable";
-import FOCUSED_ICON from '../../../assets/tab-icon.png';
-import UNFOCUSED_ICON from '../../../assets/tab-icon-outline.png';
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
-type PropsType = {
+type Props = {
     focused: boolean,
-  onPress: () => void,
+    onPress: Function,
-  onLongPress: () => void,
+    onLongPress: Function,
-  theme: CustomThemeType,
+    theme: Object,
     tabBarHeight: number,
-};
+}
 
 const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
 
 /**
  * Abstraction layer for Agenda component, using custom configuration
  */
-class TabHomeIcon extends React.Component<PropsType> {
+class TabHomeIcon extends React.Component<Props> {
-  constructor(props: PropsType) {
+
+    focusedIcon = require('../../../assets/tab-icon.png');
+    unFocusedIcon = require('../../../assets/tab-icon-outline.png');
+
+    constructor(props) {
         super(props);
         Animatable.initializeRegistryWithDefinitions({
             fabFocusIn: {
-        '0': {
+                "0": {
-          scale: 1,
+                    scale: 1, translateY: 0
-          translateY: 0,
                 },
-        '0.9': {
+                "0.9": {
-          scale: 1.2,
+                    scale: 1.2, translateY: -9
-          translateY: -9,
                 },
-        '1': {
+                "1": {
-          scale: 1.1,
+                    scale: 1.1, translateY: -7
-          translateY: -7,
                 },
             },
             fabFocusOut: {
-        '0': {
+                "0": {
-          scale: 1.1,
+                    scale: 1.1, translateY: -6
-          translateY: -6,
-        },
-        '1': {
-          scale: 1,
-          translateY: 0,
                 },
+                "1": {
+                    scale: 1, translateY: 0
                 },
+            }
         });
     }
 
-  shouldComponentUpdate(nextProps: PropsType): boolean {
+    iconRender = ({size, color}) =>
-    const {focused} = this.props;
+        this.props.focused
-    return nextProps.focused !== focused;
+            ? <Image
+                source={this.focusedIcon}
+                style={{width: size, height: size, tintColor: color}}
+            />
+            : <Image
+                source={this.unFocusedIcon}
+                style={{width: size, height: size, tintColor: color}}
+            />;
+
+    shouldComponentUpdate(nextProps: Props): boolean {
+        return (nextProps.focused !== this.props.focused);
     }
 
-  getIconRender = ({
+    render(): React$Node {
-    size,
+        const props = this.props;
-    color,
-  }: {
-    size: number,
-    color: string,
-  }): React.Node => {
-    const {focused} = this.props;
-    if (focused)
-      return (
-        <Image
-          source={FOCUSED_ICON}
-          style={{
-            width: size,
-            height: size,
-            tintColor: color,
-          }}
-        />
-      );
-    return (
-      <Image
-        source={UNFOCUSED_ICON}
-        style={{
-          width: size,
-          height: size,
-          tintColor: color,
-        }}
-      />
-    );
-  };
-
-  render(): React.Node {
-    const {props} = this;
         return (
             <View
                 style={{
@@ -99,35 +74,33 @@ class TabHomeIcon extends React.Component<PropsType> {
                 <TouchableRipple
                     onPress={props.onPress}
                     onLongPress={props.onLongPress}
-          borderless
+                    borderless={true}
-          rippleColor={
+                    rippleColor={Platform.OS === 'android' ? this.props.theme.colors.primary : 'transparent'}
-            Platform.OS === 'android'
-              ? props.theme.colors.primary
-              : 'transparent'
-          }
                     style={{
                         position: 'absolute',
                         bottom: 0,
                         left: 0,
                         width: '100%',
-            height: props.tabBarHeight + 30,
+                        height: this.props.tabBarHeight + 30,
                         marginBottom: -15,
-          }}>
+                    }}
+                >
                     <AnimatedFAB
                         duration={200}
-            easing="ease-out"
+                        easing={"ease-out"}
-            animation={props.focused ? 'fabFocusIn' : 'fabFocusOut'}
+                        animation={props.focused ? "fabFocusIn" : "fabFocusOut"}
-            icon={this.getIconRender}
+                        icon={this.iconRender}
                         style={{
                             marginTop: 15,
                             marginLeft: 'auto',
-              marginRight: 'auto',
+                            marginRight: 'auto'
-            }}
+                        }}/>
-          />
                 </TouchableRipple>
             </View>
+
         );
     }
+
 }
 
 export default withTheme(TabHomeIcon);

src/components/Tabbar/TabIcon.js

@@ -1,57 +1,53 @@
 // @flow
 
 import * as React from 'react';
-import {View} from 'react-native';
+import {View} from "react-native";
 import {TouchableRipple, withTheme} from 'react-native-paper';
-import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
+import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
-import * as Animatable from 'react-native-animatable';
+import * as Animatable from "react-native-animatable";
-import type {CustomThemeType} from '../../managers/ThemeManager';
 
-type PropsType = {
+type Props = {
     focused: boolean,
     color: string,
     label: string,
     icon: MaterialCommunityIconsGlyphs,
-  onPress: () => void,
+    onPress: Function,
-  onLongPress: () => void,
+    onLongPress: Function,
-  theme: CustomThemeType,
+    theme: Object,
-  extraData: null | boolean | number | string,
+    extraData: any,
-};
+}
+
 
 /**
  * Abstraction layer for Agenda component, using custom configuration
  */
-class TabIcon extends React.Component<PropsType> {
+class TabIcon extends React.Component<Props> {
+
     firstRender: boolean;
 
-  constructor(props: PropsType) {
+    constructor(props) {
         super(props);
         Animatable.initializeRegistryWithDefinitions({
             focusIn: {
-        '0': {
+                "0": {
-          scale: 1,
+                    scale: 1, translateY: 0
-          translateY: 0,
                 },
-        '0.9': {
+                "0.9": {
-          scale: 1.3,
+                    scale: 1.3, translateY: 7
-          translateY: 7,
                 },
-        '1': {
+                "1": {
-          scale: 1.2,
+                    scale: 1.2, translateY: 6
-          translateY: 6,
                 },
             },
             focusOut: {
-        '0': {
+                "0": {
-          scale: 1.2,
+                    scale: 1.2, translateY: 6
-          translateY: 6,
-        },
-        '1': {
-          scale: 1,
-          translateY: 0,
                 },
+                "1": {
+                    scale: 1, translateY: 0
                 },
+            }
         });
         this.firstRender = true;
     }
@@ -60,33 +56,32 @@ class TabIcon extends React.Component<PropsType> {
         this.firstRender = false;
     }
 
-  shouldComponentUpdate(nextProps: PropsType): boolean {
+    shouldComponentUpdate(nextProps: Props): boolean {
-    const {props} = this;
+        return (nextProps.focused !== this.props.focused)
-    return (
+            || (nextProps.theme.dark !== this.props.theme.dark)
-      nextProps.focused !== props.focused ||
+            || (nextProps.extraData !== this.props.extraData);
-      nextProps.theme.dark !== props.theme.dark ||
-      nextProps.extraData !== props.extraData
-    );
     }
 
-  render(): React.Node {
+    render(): React$Node {
-    const {props} = this;
+        const props = this.props;
         return (
             <TouchableRipple
                 onPress={props.onPress}
                 onLongPress={props.onLongPress}
-        borderless
+                borderless={true}
-        rippleColor={props.theme.colors.primary}
+                rippleColor={this.props.theme.colors.primary}
                 style={{
                     flex: 1,
                     justifyContent: 'center',
-        }}>
+                }}
+            >
                 <View>
                     <Animatable.View
                         duration={200}
-            easing="ease-out"
+                        easing={"ease-out"}
-            animation={props.focused ? 'focusIn' : 'focusOut'}
+                        animation={props.focused ? "focusIn" : "focusOut"}
-            useNativeDriver>
+                        useNativeDriver
+                    >
                         <MaterialCommunityIcons
                             name={props.icon}
                             color={props.color}
@@ -98,14 +93,16 @@ class TabIcon extends React.Component<PropsType> {
                         />
                     </Animatable.View>
                     <Animatable.Text
-            animation={props.focused ? 'fadeOutDown' : 'fadeIn'}
+                        animation={props.focused ? "fadeOutDown" : "fadeIn"}
                         useNativeDriver
+
                         style={{
                             color: props.color,
                             marginLeft: 'auto',
                             marginRight: 'auto',
                             fontSize: 10,
-            }}>
+                        }}
+                    >
                         {props.label}
                     </Animatable.Text>
                 </View>

src/constants/AvailableWebsites.js

@@ -1,13 +1,13 @@
 export default {
     websites: {
-    AMICALE: 'https://www.amicale-insat.fr/',
+        AMICALE: "https://www.amicale-insat.fr/",
-    AVAILABLE_ROOMS: 'http://planex.insa-toulouse.fr/salles.php',
+        AVAILABLE_ROOMS: "http://planex.insa-toulouse.fr/salles.php",
-    BIB: 'https://bibbox.insa-toulouse.fr/',
+        BIB: "https://bibbox.insa-toulouse.fr/",
-    BLUEMIND: 'https://etud-mel.insa-toulouse.fr/webmail/',
+        BLUEMIND: "https://etud-mel.insa-toulouse.fr/webmail/",
-    ELUS_ETUDIANTS: 'https://etud.insa-toulouse.fr/~eeinsat/',
+        ELUS_ETUDIANTS: "https://etud.insa-toulouse.fr/~eeinsat/",
-    ENT: 'https://ent.insa-toulouse.fr/',
+        ENT: "https://ent.insa-toulouse.fr/",
-    INSA_ACCOUNT: 'https://moncompte.insa-toulouse.fr/',
+        INSA_ACCOUNT: "https://moncompte.insa-toulouse.fr/",
-    TUTOR_INSA: 'https://www.etud.insa-toulouse.fr/~tutorinsa/',
+        TUTOR_INSA: "https://www.etud.insa-toulouse.fr/~tutorinsa/",
-    WIKETUD: 'https://wiki.etud.insa-toulouse.fr/',
+        WIKETUD: "https://wiki.etud.insa-toulouse.fr/",
     },
-};
+}

src/constants/ProxiwashConstants.js

@@ -1,12 +1,12 @@
 export default {
     machineStates: {
-    AVAILABLE: 0,
+        "AVAILABLE": 0,
-    RUNNING: 1,
+        "RUNNING": 1,
-    RUNNING_NOT_STARTED: 2,
+        "RUNNING_NOT_STARTED": 2,
-    FINISHED: 3,
+        "FINISHED": 3,
-    UNAVAILABLE: 4,
+        "UNAVAILABLE": 4,
-    ERROR: 5,
+        "ERROR": 5,
-    UNKNOWN: 6,
+        "UNKNOWN": 6,
     },
     stateIcons: {
         0: 'radiobox-blank',
@@ -16,5 +16,5 @@ export default {
         4: 'alert-octagram-outline',
         5: 'alert',
         6: 'help-circle-outline',
-  },
+    }
 };

src/constants/Update.js

@@ -1,6 +1,6 @@
 // @flow
 
-import i18n from 'i18n-js';
+import i18n from "i18n-js";
 
 /**
  * Singleton used to manage update slides.
@@ -14,26 +14,28 @@ import i18n from 'i18n-js';
  * </ul>
  */
 export default class Update {
+
     // Increment the number to show the update slide
     static number = 6;
-
     // Change the number of slides to display
     static slidesNumber = 4;
-
     // Change the icons to be displayed on the update slide
-  static iconList = ['star', 'clock', 'qrcode-scan', 'account'];
+    static iconList = [
-
+        'star',
+        'clock',
+        'qrcode-scan',
+        'account',
+    ];
     static colorsList = [
         ['#e01928', '#be1522'],
         ['#7c33ec', '#5e11d1'],
         ['#337aec', '#114ed1'],
         ['#e01928', '#be1522'],
-  ];
+    ]
 
     static instance: Update | null = null;
 
     titleList: Array<string>;
-
     descriptionList: Array<string>;
 
     /**
@@ -42,9 +44,9 @@ export default class Update {
     constructor() {
         this.titleList = [];
         this.descriptionList = [];
-    for (let i = 0; i < Update.slidesNumber; i += 1) {
+        for (let i = 0; i < Update.slidesNumber; i++) {
-      this.titleList.push(i18n.t(`intro.updateSlide${i}.title`));
+            this.titleList.push(i18n.t('intro.updateSlide' + i + '.title'))
-      this.descriptionList.push(i18n.t(`intro.updateSlide${i}.text`));
+            this.descriptionList.push(i18n.t('intro.updateSlide' + i + '.text'))
         }
     }
 
@@ -54,7 +56,9 @@ export default class Update {
      * @returns {Update}
      */
     static getInstance(): Update {
-    if (Update.instance == null) Update.instance = new Update();
+        return Update.instance === null ?
-    return Update.instance;
+            Update.instance = new Update() :
+            Update.instance;
     }
-}
+
+};

src/managers/AprilFoolsManager.js

@@ -1,36 +1,33 @@
 // @flow
 
-import type {ProxiwashMachineType} from '../screens/Proxiwash/ProxiwashScreen';
+import type {Machine} from "../screens/Proxiwash/ProxiwashScreen";
-import type {CustomThemeType} from './ThemeManager';
-import type {RuFoodCategoryType} from '../screens/Services/SelfMenuScreen';
 
 /**
  * Singleton class used to manage april fools
  */
 export default class AprilFoolsManager {
+
     static instance: AprilFoolsManager | null = null;
-
     static fakeMachineNumber = [
-    '',
+        "",
-    'cos(ln(1))',
+        "cos(ln(1))",
-    '0,5⁻¹',
+        "0,5⁻¹",
-    '567/189',
+        "567/189",
-    '√2×√8',
+        "√2×√8",
-    '√50×sin(9π/4)',
+        "√50×sin(9π/4)",
-    '⌈π+e⌉',
+        "⌈π+e⌉",
-    'div(rot(B))+7',
+        "div(rot(B))+7",
-    '4×cosh(0)+4',
+        "4×cosh(0)+4",
-    '8-(-i)²',
+        "8-(-i)²",
-    '|5√2+5√2i|',
+        "|5√2+5√2i|",
-    '1×10¹+1×10⁰',
+        "1×10¹+1×10⁰",
-    'Re(√192e^(iπ/6))',
+        "Re(√192e^(iπ/6))",
     ];
-
     aprilFoolsEnabled: boolean;
 
     constructor() {
-    const today = new Date();
+        let today = new Date();
-    this.aprilFoolsEnabled = today.getDate() === 1 && today.getMonth() === 3;
+        this.aprilFoolsEnabled = (today.getDate() === 1 && today.getMonth() === 3);
     }
 
     /**
@@ -38,9 +35,9 @@ export default class AprilFoolsManager {
      * @returns {ThemeManager}
      */
     static getInstance(): AprilFoolsManager {
-    if (AprilFoolsManager.instance == null)
+        return AprilFoolsManager.instance === null ?
-      AprilFoolsManager.instance = new AprilFoolsManager();
+            AprilFoolsManager.instance = new AprilFoolsManager() :
-    return AprilFoolsManager.instance;
+            AprilFoolsManager.instance;
     }
 
     /**
@@ -49,14 +46,12 @@ export default class AprilFoolsManager {
      * @param menu
      * @returns {Object}
      */
-  static getFakeMenuItem(
+    static getFakeMenuItem(menu: Array<{dishes: Array<{name: string}>}>) {
-    menu: Array<RuFoodCategoryType>,
+        menu[1]["dishes"].splice(4, 0, {name: "Coq au vin"});
-  ): Array<RuFoodCategoryType> {
+        menu[1]["dishes"].splice(2, 0, {name: "Bat'Soupe"});
-    menu[1].dishes.splice(4, 0, {name: 'Coq au vin'});
+        menu[1]["dishes"].splice(1, 0, {name: "Pave de loup"});
-    menu[1].dishes.splice(2, 0, {name: "Bat'Soupe"});
+        menu[1]["dishes"].splice(0, 0, {name: "Béranger à point"});
-    menu[1].dishes.splice(1, 0, {name: 'Pave de loup'});
+        menu[1]["dishes"].splice(0, 0, {name: "Pieds d'Arnaud"});
-    menu[1].dishes.splice(0, 0, {name: 'Béranger à point'});
-    menu[1].dishes.splice(0, 0, {name: "Pieds d'Arnaud"});
         return menu;
     }
 
@@ -65,11 +60,9 @@ export default class AprilFoolsManager {
      *
      * @param dryers
      */
-  static getNewProxiwashDryerOrderedList(
+    static getNewProxiwashDryerOrderedList(dryers: Array<Machine> | null) {
-    dryers: Array<ProxiwashMachineType> | null,
-  ) {
         if (dryers != null) {
-      const second = dryers[1];
+            let second = dryers[1];
             dryers.splice(1, 1);
             dryers.push(second);
         }
@@ -80,14 +73,12 @@ export default class AprilFoolsManager {
      *
      * @param washers
      */
-  static getNewProxiwashWasherOrderedList(
+    static getNewProxiwashWasherOrderedList(washers: Array<Machine> | null) {
-    washers: Array<ProxiwashMachineType> | null,
-  ) {
         if (washers != null) {
-      const first = washers[0];
+            let first = washers[0];
-      const second = washers[1];
+            let second = washers[1];
-      const fifth = washers[4];
+            let fifth = washers[4];
-      const ninth = washers[8];
+            let ninth = washers[8];
             washers.splice(8, 1, second);
             washers.splice(4, 1, ninth);
             washers.splice(1, 1, first);
@@ -101,7 +92,7 @@ export default class AprilFoolsManager {
      * @param number
      * @returns {string}
      */
-  static getProxiwashMachineDisplayNumber(number: number): string {
+    static getProxiwashMachineDisplayNumber(number: number) {
         return AprilFoolsManager.fakeMachineNumber[number];
     }
 
@@ -111,7 +102,7 @@ export default class AprilFoolsManager {
      * @param currentTheme
      * @returns {{colors: {textDisabled: string, agendaDayTextColor: string, surface: string, background: string, dividerBackground: string, accent: string, agendaBackgroundColor: string, tabIcon: string, card: string, primary: string}}}
      */
-  static getAprilFoolsTheme(currentTheme: CustomThemeType): CustomThemeType {
+    static getAprilFoolsTheme(currentTheme: Object) {
         return {
             ...currentTheme,
             colors: {
@@ -119,9 +110,9 @@ export default class AprilFoolsManager {
                 primary: '#00be45',
                 accent: '#00be45',
                 background: '#d02eee',
-        tabIcon: '#380d43',
+                tabIcon: "#380d43",
-        card: '#eed639',
+                card: "#eed639",
-        surface: '#eed639',
+                surface: "#eed639",
                 dividerBackground: '#c72ce4',
                 textDisabled: '#b9b9b9',
 
@@ -132,7 +123,8 @@ export default class AprilFoolsManager {
         };
     }
 
-  isAprilFoolsEnabled(): boolean {
+    isAprilFoolsEnabled() {
         return this.aprilFoolsEnabled;
     }
-}
+
+};

src/managers/AsyncStorageManager.js

@@ -1,7 +1,7 @@
 // @flow
 
 import AsyncStorage from '@react-native-community/async-storage';
-import {SERVICES_KEY} from './ServicesManager';
+import {SERVICES_KEY} from "./ServicesManager";
 
 /**
  * Singleton used to manage preferences.
@@ -10,6 +10,7 @@ import {SERVICES_KEY} from './ServicesManager';
  */
 
 export default class AsyncStorageManager {
+
     static instance: AsyncStorageManager | null = null;
 
     static PREFERENCES = {
@@ -107,7 +108,7 @@ export default class AsyncStorageManager {
             key: 'gameScores',
             default: '[]',
         },
-  };
+    }
 
     #currentPreferences: {[key: string]: string};
 
@@ -120,66 +121,9 @@ export default class AsyncStorageManager {
      * @returns {AsyncStorageManager}
      */
     static getInstance(): AsyncStorageManager {
-    if (AsyncStorageManager.instance == null)
+        return AsyncStorageManager.instance === null ?
-      AsyncStorageManager.instance = new AsyncStorageManager();
+            AsyncStorageManager.instance = new AsyncStorageManager() :
-    return AsyncStorageManager.instance;
+            AsyncStorageManager.instance;
-  }
-
-  /**
-   * Saves the value associated to the given key to preferences.
-   *
-   * @param key
-   * @param value
-   */
-  static set(
-    key: string,
-    // eslint-disable-next-line flowtype/no-weak-types
-    value: number | string | boolean | {...} | 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 {{...}}
-   */
-  // eslint-disable-next-line flowtype/no-weak-types
-  static getObject(key: string): any {
-    return JSON.parse(AsyncStorageManager.getString(key));
     }
 
     /**
@@ -189,20 +133,21 @@ export default class AsyncStorageManager {
      * @return {Promise<void>}
      */
     async loadPreferences() {
-    const prefKeys = [];
+        let prefKeys = [];
         // Get all available keys
-    Object.keys(AsyncStorageManager.PREFERENCES).forEach((key: string) => {
+        for (let key in AsyncStorageManager.PREFERENCES) {
             prefKeys.push(key);
-    });
+        }
         // Get corresponding values
-    const resultArray = await AsyncStorage.multiGet(prefKeys);
+        let resultArray: Array<Array<string>> = await AsyncStorage.multiGet(prefKeys);
         // Save those values for later use
-    resultArray.forEach((item: [string, string | null]) => {
+        for (let i = 0; i < resultArray.length; i++) {
-      const key = item[0];
+            let key: string = resultArray[i][0];
-      let val = item[1];
+            let val: string | null = resultArray[i][1];
-      if (val === null) val = AsyncStorageManager.PREFERENCES[key].default;
+            if (val === null)
+                val = AsyncStorageManager.PREFERENCES[key].default;
             this.#currentPreferences[key] = val;
-    });
+        }
     }
 
     /**
@@ -212,17 +157,15 @@ export default class AsyncStorageManager {
      * @param key
      * @param value
      */
-  setPreference(
+    setPreference(key: string, value: any) {
-    key: string,
-    // eslint-disable-next-line flowtype/no-weak-types
-    value: number | string | boolean | {...} | Array<any>,
-  ) {
         if (AsyncStorageManager.PREFERENCES[key] != null) {
-      let convertedValue;
+            let convertedValue = "";
-      if (typeof value === 'string') convertedValue = value;
+            if (typeof value === "string")
-      else if (typeof value === 'boolean' || typeof value === 'number')
+                convertedValue = value;
+            else if (typeof value === "boolean" || typeof value === "number")
                 convertedValue = value.toString();
-      else convertedValue = JSON.stringify(value);
+            else
+                convertedValue = JSON.stringify(value);
             this.#currentPreferences[key] = convertedValue;
             AsyncStorage.setItem(key, convertedValue);
         }
@@ -235,7 +178,59 @@ export default class AsyncStorageManager {
      * @param key
      * @returns {string|null}
      */
-  getPreference(key: string): string | null {
+    getPreference(key: string) {
         return this.#currentPreferences[key];
     }
+
+    /**
+     * aves the value associated to the given key to preferences.
+     *
+     * @param key
+     * @param value
+     */
+    static set(key: string, value: any) {
+        AsyncStorageManager.getInstance().setPreference(key, value);
+    }
+
+    /**
+     * Gets the string value of the given preference
+     *
+     * @param key
+     * @returns {boolean}
+     */
+    static getString(key: string) {
+        return AsyncStorageManager.getInstance().getPreference(key);
+    }
+
+    /**
+     * Gets the boolean value of the given preference
+     *
+     * @param key
+     * @returns {boolean}
+     */
+    static getBool(key: string) {
+        const value = AsyncStorageManager.getString(key);
+        return value === "1" || value === "true";
+    }
+
+    /**
+     * Gets the number value of the given preference
+     *
+     * @param key
+     * @returns {boolean}
+     */
+    static getNumber(key: string) {
+        return parseFloat(AsyncStorageManager.getString(key));
+    }
+
+    /**
+     * Gets the object value of the given preference
+     *
+     * @param key
+     * @returns {boolean}
+     */
+    static getObject(key: string) {
+        return JSON.parse(AsyncStorageManager.getString(key));
+    }
+
 }

src/managers/DateManager.js

@@ -10,30 +10,29 @@ export default class DateManager {
     static instance: DateManager | null = null;
 
     daysOfWeek = [];
-
     monthsOfYear = [];
 
     constructor() {
-    this.daysOfWeek.push(i18n.t('date.daysOfWeek.sunday')); // 0 represents sunday
+        this.daysOfWeek.push(i18n.t("date.daysOfWeek.sunday")); // 0 represents sunday
-    this.daysOfWeek.push(i18n.t('date.daysOfWeek.monday'));
+        this.daysOfWeek.push(i18n.t("date.daysOfWeek.monday"));
-    this.daysOfWeek.push(i18n.t('date.daysOfWeek.tuesday'));
+        this.daysOfWeek.push(i18n.t("date.daysOfWeek.tuesday"));
-    this.daysOfWeek.push(i18n.t('date.daysOfWeek.wednesday'));
+        this.daysOfWeek.push(i18n.t("date.daysOfWeek.wednesday"));
-    this.daysOfWeek.push(i18n.t('date.daysOfWeek.thursday'));
+        this.daysOfWeek.push(i18n.t("date.daysOfWeek.thursday"));
-    this.daysOfWeek.push(i18n.t('date.daysOfWeek.friday'));
+        this.daysOfWeek.push(i18n.t("date.daysOfWeek.friday"));
-    this.daysOfWeek.push(i18n.t('date.daysOfWeek.saturday'));
+        this.daysOfWeek.push(i18n.t("date.daysOfWeek.saturday"));
 
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.january'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.january"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.february'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.february"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.march'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.march"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.april'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.april"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.may'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.may"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.june'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.june"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.july'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.july"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.august'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.august"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.september'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.september"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.october'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.october"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.november'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.november"));
-    this.monthsOfYear.push(i18n.t('date.monthsOfYear.december'));
+        this.monthsOfYear.push(i18n.t("date.monthsOfYear.december"));
     }
 
     /**
@@ -41,15 +40,16 @@ export default class DateManager {
      * @returns {DateManager}
      */
     static getInstance(): DateManager {
-    if (DateManager.instance == null) DateManager.instance = new DateManager();
+        return DateManager.instance === null ?
-    return DateManager.instance;
+            DateManager.instance = new DateManager() :
+            DateManager.instance;
     }
 
-  static isWeekend(date: Date): boolean {
+    static isWeekend(date: Date) {
         return date.getDay() === 6 || date.getDay() === 0;
     }
 
-  getMonthsOfYear(): Array<string> {
+    getMonthsOfYear() {
         return this.monthsOfYear;
     }
 
@@ -59,16 +59,11 @@ export default class DateManager {
      * @param dateString The date with the format YYYY-MM-DD
      * @return {string} The translated string
      */
-  getTranslatedDate(dateString: string): string {
+    getTranslatedDate(dateString: string) {
-    const dateArray = dateString.split('-');
+        let dateArray = dateString.split('-');
-    const date = new Date();
+        let date = new Date();
-    date.setFullYear(
+        date.setFullYear(parseInt(dateArray[0]), parseInt(dateArray[1]) - 1, parseInt(dateArray[2]));
-      parseInt(dateArray[0], 10),
+        return this.daysOfWeek[date.getDay()] + " " + date.getDate() + " " + this.monthsOfYear[date.getMonth()] + " " + date.getFullYear();
-      parseInt(dateArray[1], 10) - 1,
-      parseInt(dateArray[2], 10),
-    );
-    return `${this.daysOfWeek[date.getDay()]} ${date.getDate()} ${
-      this.monthsOfYear[date.getMonth()]
-    } ${date.getFullYear()}`;
     }
+
 }

src/managers/LocaleManager.js

@@ -1,24 +1,22 @@
 // @flow
 
 import i18n from 'i18n-js';
-import * as RNLocalize from 'react-native-localize';
+import * as RNLocalize from "react-native-localize";
 
-import en from '../../locales/en.json';
+import en from '../../locales/en';
 import fr from '../../locales/fr.json';
 
 /**
  * Static class used to manage locales
  */
 export default class LocaleManager {
+
     /**
      * Initialize translations using language files
      */
     static initTranslations() {
         i18n.fallbacks = true;
         i18n.translations = {fr, en};
-    i18n.locale = RNLocalize.findBestAvailableLanguage([
+        i18n.locale = RNLocalize.findBestAvailableLanguage(["en", "fr"]).languageTag;
-      'en',
-      'fr',
-    ]).languageTag;
     }
 }

src/managers/ThemeManager.js

@@ -1,13 +1,13 @@
 // @flow
 
+import AsyncStorageManager from "./AsyncStorageManager";
 import {DarkTheme, DefaultTheme} from 'react-native-paper';
+import AprilFoolsManager from "./AprilFoolsManager";
 import {Appearance} from 'react-native-appearance';
-import AsyncStorageManager from './AsyncStorageManager';
-import AprilFoolsManager from './AprilFoolsManager';
 
 const colorScheme = Appearance.getColorScheme();
 
-export type CustomThemeType = {
+export type CustomTheme = {
     ...DefaultTheme,
     colors: {
         primary: string,
@@ -63,15 +63,15 @@ export type CustomThemeType = {
         // Mascot Popup
         mascotMessageArrow: string,
     },
-};
+}
 
 /**
  * Singleton class used to manage themes
  */
 export default class ThemeManager {
-  static instance: ThemeManager | null = null;
 
-  updateThemeCallback: null | (() => void);
+    static instance: ThemeManager | null = null;
+    updateThemeCallback: Function;
 
     constructor() {
         this.updateThemeCallback = null;
@@ -80,25 +80,25 @@ export default class ThemeManager {
     /**
      * Gets the light theme
      *
-   * @return {CustomThemeType} Object containing theme variables
+     * @return {CustomTheme} Object containing theme variables
      * */
-  static getWhiteTheme(): CustomThemeType {
+    static getWhiteTheme(): CustomTheme {
         return {
             ...DefaultTheme,
             colors: {
                 ...DefaultTheme.colors,
                 primary: '#be1522',
                 accent: '#be1522',
-        tabIcon: '#929292',
+                tabIcon: "#929292",
-        card: '#fff',
+                card: "#fff",
                 dividerBackground: '#e2e2e2',
-        ripple: 'rgba(0,0,0,0.2)',
+                ripple: "rgba(0,0,0,0.2)",
                 textDisabled: '#c1c1c1',
                 icon: '#5d5d5d',
                 subtitle: '#707070',
-        success: '#5cb85c',
+                success: "#5cb85c",
-        warning: '#f0ad4e',
+                warning: "#f0ad4e",
-        danger: '#d9534f',
+                danger: "#d9534f",
                 cc: 'dst',
 
                 // Calendar/Agenda
@@ -106,14 +106,14 @@ export default class ThemeManager {
                 agendaDayTextColor: '#636363',
 
                 // PROXIWASH
-        proxiwashFinishedColor: '#a5dc9d',
+                proxiwashFinishedColor: "#a5dc9d",
-        proxiwashReadyColor: 'transparent',
+                proxiwashReadyColor: "transparent",
-        proxiwashRunningColor: '#a0ceff',
+                proxiwashRunningColor: "#a0ceff",
-        proxiwashRunningNotStartedColor: '#c9e0ff',
+                proxiwashRunningNotStartedColor: "#c9e0ff",
-        proxiwashRunningBgColor: '#c7e3ff',
+                proxiwashRunningBgColor: "#c7e3ff",
-        proxiwashBrokenColor: '#ffa8a2',
+                proxiwashBrokenColor: "#ffa8a2",
-        proxiwashErrorColor: '#ffa8a2',
+                proxiwashErrorColor: "#ffa8a2",
-        proxiwashUnknownColor: '#b6b6b6',
+                proxiwashUnknownColor: "#b6b6b6",
 
                 // Screens
                 planningColor: '#d9b10a',
@@ -133,12 +133,12 @@ export default class ThemeManager {
                 tetrisJ: '#2a67e3',
                 tetrisL: '#da742d',
 
-        gameGold: '#ffd610',
+                gameGold: "#ffd610",
-        gameSilver: '#7b7b7b',
+                gameSilver: "#7b7b7b",
-        gameBronze: '#a15218',
+                gameBronze: "#a15218",
 
                 // Mascot Popup
-        mascotMessageArrow: '#dedede',
+                mascotMessageArrow: "#dedede",
             },
         };
     }
@@ -146,40 +146,40 @@ export default class ThemeManager {
     /**
      * Gets the dark theme
      *
-   * @return {CustomThemeType} Object containing theme variables
+     * @return {CustomTheme} Object containing theme variables
      * */
-  static getDarkTheme(): CustomThemeType {
+    static getDarkTheme(): CustomTheme {
         return {
             ...DarkTheme,
             colors: {
                 ...DarkTheme.colors,
                 primary: '#be1522',
                 accent: '#be1522',
-        tabBackground: '#181818',
+                tabBackground: "#181818",
-        tabIcon: '#6d6d6d',
+                tabIcon: "#6d6d6d",
-        card: 'rgb(18,18,18)',
+                card: "rgb(18,18,18)",
                 dividerBackground: '#222222',
-        ripple: 'rgba(255,255,255,0.2)',
+                ripple: "rgba(255,255,255,0.2)",
                 textDisabled: '#5b5b5b',
                 icon: '#b3b3b3',
                 subtitle: '#aaaaaa',
-        success: '#5cb85c',
+                success: "#5cb85c",
-        warning: '#f0ad4e',
+                warning: "#f0ad4e",
-        danger: '#d9534f',
+                danger: "#d9534f",
 
                 // Calendar/Agenda
                 agendaBackgroundColor: '#171717',
                 agendaDayTextColor: '#6d6d6d',
 
                 // PROXIWASH
-        proxiwashFinishedColor: '#31682c',
+                proxiwashFinishedColor: "#31682c",
-        proxiwashReadyColor: 'transparent',
+                proxiwashReadyColor: "transparent",
-        proxiwashRunningColor: '#213c79',
+                proxiwashRunningColor: "#213c79",
-        proxiwashRunningNotStartedColor: '#1e263e',
+                proxiwashRunningNotStartedColor: "#1e263e",
-        proxiwashRunningBgColor: '#1a2033',
+                proxiwashRunningBgColor: "#1a2033",
-        proxiwashBrokenColor: '#7e2e2f',
+                proxiwashBrokenColor: "#7e2e2f",
-        proxiwashErrorColor: '#7e2e2f',
+                proxiwashErrorColor: "#7e2e2f",
-        proxiwashUnknownColor: '#535353',
+                proxiwashUnknownColor: "#535353",
 
                 // Screens
                 planningColor: '#d99e09',
@@ -199,12 +199,12 @@ export default class ThemeManager {
                 tetrisJ: '#0f37b9',
                 tetrisL: '#b96226',
 
-        gameGold: '#ffd610',
+                gameGold: "#ffd610",
-        gameSilver: '#7b7b7b',
+                gameSilver: "#7b7b7b",
-        gameBronze: '#a15218',
+                gameBronze: "#a15218",
 
                 // Mascot Popup
-        mascotMessageArrow: '#323232',
+                mascotMessageArrow: "#323232",
             },
         };
     }
@@ -215,9 +215,9 @@ export default class ThemeManager {
      * @returns {ThemeManager}
      */
     static getInstance(): ThemeManager {
-    if (ThemeManager.instance == null)
+        return ThemeManager.instance === null ?
-      ThemeManager.instance = new ThemeManager();
+            ThemeManager.instance = new ThemeManager() :
-    return ThemeManager.instance;
+            ThemeManager.instance;
     }
 
     /**
@@ -228,39 +228,34 @@ export default class ThemeManager {
      * @returns {boolean} Night mode state
      */
     static getNightMode(): boolean {
-    return (
+        return (AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightMode.key) &&
-      (AsyncStorageManager.getBool(
+            (!AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key)
-        AsyncStorageManager.PREFERENCES.nightMode.key,
+                || colorScheme === 'no-preference')) ||
-      ) &&
+            (AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key)
-        (!AsyncStorageManager.getBool(
+                && colorScheme === 'dark');
-          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 {CustomThemeType} The current theme
+     * @returns {CustomTheme} The current theme
      */
-  static getCurrentTheme(): CustomThemeType {
+    static getCurrentTheme(): CustomTheme {
         if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
             return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getWhiteTheme());
-    return ThemeManager.getBaseTheme();
+        else
+            return ThemeManager.getBaseTheme()
     }
 
     /**
      * Get the theme based on night mode
      *
-   * @return {CustomThemeType} The theme
+     * @return {CustomTheme} The theme
      */
-  static getBaseTheme(): CustomThemeType {
+    static getBaseTheme(): CustomTheme {
-    if (ThemeManager.getNightMode()) return ThemeManager.getDarkTheme();
+        if (ThemeManager.getNightMode())
+            return ThemeManager.getDarkTheme();
+        else
             return ThemeManager.getWhiteTheme();
     }
 
@@ -279,10 +274,9 @@ export default class ThemeManager {
      * @param isNightMode True to enable night mode, false to disable
      */
     setNightMode(isNightMode: boolean) {
-    AsyncStorageManager.set(
+        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.nightMode.key, isNightMode);
-      AsyncStorageManager.PREFERENCES.nightMode.key,
+        if (this.updateThemeCallback != null)
-      isNightMode,
+            this.updateThemeCallback();
-    );
-    if (this.updateThemeCallback != null) this.updateThemeCallback();
     }
-}
+
+};

src/navigation/MainNavigator.js

@@ -1,41 +1,35 @@
 // @flow
 
 import * as React from 'react';
-import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
-import i18n from 'i18n-js';
-import {Platform} from 'react-native';
 import SettingsScreen from '../screens/Other/Settings/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
 import DebugScreen from '../screens/About/DebugScreen';
-import TabNavigator from './TabNavigator';
+import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
-import GameMainScreen from '../screens/Game/screens/GameMainScreen';
+import i18n from "i18n-js";
-import VoteScreen from '../screens/Amicale/VoteScreen';
+import TabNavigator from "./TabNavigator";
-import LoginScreen from '../screens/Amicale/LoginScreen';
+import GameMainScreen from "../screens/Game/screens/GameMainScreen";
-import SelfMenuScreen from '../screens/Services/SelfMenuScreen';
+import VoteScreen from "../screens/Amicale/VoteScreen";
-import ProximoMainScreen from '../screens/Services/Proximo/ProximoMainScreen';
+import LoginScreen from "../screens/Amicale/LoginScreen";
-import ProximoListScreen from '../screens/Services/Proximo/ProximoListScreen';
+import {Platform} from "react-native";
-import ProximoAboutScreen from '../screens/Services/Proximo/ProximoAboutScreen';
+import SelfMenuScreen from "../screens/Services/SelfMenuScreen";
-import ProfileScreen from '../screens/Amicale/ProfileScreen';
+import ProximoMainScreen from "../screens/Services/Proximo/ProximoMainScreen";
-import ClubListScreen from '../screens/Amicale/Clubs/ClubListScreen';
+import ProximoListScreen from "../screens/Services/Proximo/ProximoListScreen";
-import ClubAboutScreen from '../screens/Amicale/Clubs/ClubAboutScreen';
+import ProximoAboutScreen from "../screens/Services/Proximo/ProximoAboutScreen";
-import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen';
+import ProfileScreen from "../screens/Amicale/ProfileScreen";
-import {
+import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
-  createScreenCollapsibleStack,
+import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
-  getWebsiteStack,
+import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
-} from '../utils/CollapsibleUtils';
+import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
-import BugReportScreen from '../screens/Other/FeedbackScreen';
+import BugReportScreen from "../screens/Other/FeedbackScreen";
-import WebsiteScreen from '../screens/Services/WebsiteScreen';
+import WebsiteScreen from "../screens/Services/WebsiteScreen";
-import EquipmentScreen from '../screens/Amicale/Equipment/EquipmentListScreen';
+import EquipmentScreen from "../screens/Amicale/Equipment/EquipmentListScreen";
-import EquipmentLendScreen from '../screens/Amicale/Equipment/EquipmentRentScreen';
+import EquipmentLendScreen from "../screens/Amicale/Equipment/EquipmentRentScreen";
-import EquipmentConfirmScreen from '../screens/Amicale/Equipment/EquipmentConfirmScreen';
+import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen";
-import DashboardEditScreen from '../screens/Other/Settings/DashboardEditScreen';
+import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen";
-import GameStartScreen from '../screens/Game/screens/GameStartScreen';
+import GameStartScreen from "../screens/Game/screens/GameStartScreen";
 
-const modalTransition =
+const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
-  Platform.OS === 'ios'
-    ? TransitionPresets.ModalPresentationIOS
-    : TransitionPresets.ModalSlideFromBottomIOS;
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -43,100 +37,91 @@ const defaultScreenOptions = {
     ...TransitionPresets.SlideFromRightIOS,
 };
 
+
 const MainStack = createStackNavigator();
 
-function MainStackComponent(props: {
+function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
-  createTabNavigator: () => React.Node,
-}): React.Node {
-  const {createTabNavigator} = props;
     return (
         <MainStack.Navigator
-      initialRouteName="main"
+            initialRouteName={'main'}
-      headerMode="screen"
+            headerMode={'screen'}
-      screenOptions={defaultScreenOptions}>
+            screenOptions={defaultScreenOptions}
+        >
             <MainStack.Screen
                 name="main"
-        component={createTabNavigator}
+                component={props.createTabNavigator}
                 options={{
                     headerShown: false,
                     title: i18n.t('screens.home.title'),
                 }}
             />
             {createScreenCollapsibleStack(
-        'settings',
+                "settings",
                 MainStack,
                 SettingsScreen,
-        i18n.t('screens.settings.title'),
+                i18n.t('screens.settings.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'dashboard-edit',
+                "dashboard-edit",
                 MainStack,
                 DashboardEditScreen,
-        i18n.t('screens.settings.dashboardEdit.title'),
+                i18n.t('screens.settings.dashboardEdit.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'about',
+                "about",
                 MainStack,
                 AboutScreen,
-        i18n.t('screens.about.title'),
+                i18n.t('screens.about.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'dependencies',
+                "dependencies",
                 MainStack,
                 AboutDependenciesScreen,
-        i18n.t('screens.about.libs'),
+                i18n.t('screens.about.libs'))}
-      )}
             {createScreenCollapsibleStack(
-        'debug',
+                "debug",
                 MainStack,
                 DebugScreen,
-        i18n.t('screens.about.debug'),
+                i18n.t('screens.about.debug'))}
-      )}
 
             {createScreenCollapsibleStack(
-        'game-start',
+                "game-start",
                 MainStack,
                 GameStartScreen,
-        i18n.t('screens.game.title'),
+                i18n.t('screens.game.title'))}
-      )}
             <MainStack.Screen
                 name="game-main"
                 component={GameMainScreen}
                 options={{
-          title: i18n.t('screens.game.title'),
+                    title: i18n.t("screens.game.title"),
                 }}
             />
             {createScreenCollapsibleStack(
-        'login',
+                "login",
                 MainStack,
                 LoginScreen,
                 i18n.t('screens.login.title'),
                 true,
-        {headerTintColor: '#fff'},
+                {headerTintColor: "#fff"},
-        'transparent',
+                'transparent')}
-      )}
+            {getWebsiteStack("website", MainStack, WebsiteScreen, "")}
-      {getWebsiteStack('website', MainStack, WebsiteScreen, '')}
+
 
             {createScreenCollapsibleStack(
-        'self-menu',
+                "self-menu",
                 MainStack,
                 SelfMenuScreen,
-        i18n.t('screens.menu.title'),
+                i18n.t('screens.menu.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'proximo',
+                "proximo",
                 MainStack,
                 ProximoMainScreen,
-        i18n.t('screens.proximo.title'),
+                i18n.t('screens.proximo.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'proximo-list',
+                "proximo-list",
                 MainStack,
                 ProximoListScreen,
                 i18n.t('screens.proximo.articleList'),
             )}
             {createScreenCollapsibleStack(
-        'proximo-about',
+                "proximo-about",
                 MainStack,
                 ProximoAboutScreen,
                 i18n.t('screens.proximo.title'),
@@ -145,87 +130,75 @@ function MainStackComponent(props: {
             )}
 
             {createScreenCollapsibleStack(
-        'profile',
+                "profile",
                 MainStack,
                 ProfileScreen,
-        i18n.t('screens.profile.title'),
+                i18n.t('screens.profile.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'club-list',
+                "club-list",
                 MainStack,
                 ClubListScreen,
-        i18n.t('screens.clubs.title'),
+                i18n.t('screens.clubs.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'club-information',
+                "club-information",
                 MainStack,
                 ClubDisplayScreen,
                 i18n.t('screens.clubs.details'),
                 true,
-        {...modalTransition},
+                {...modalTransition})}
-      )}
             {createScreenCollapsibleStack(
-        'club-about',
+                "club-about",
                 MainStack,
                 ClubAboutScreen,
                 i18n.t('screens.clubs.title'),
                 true,
-        {...modalTransition},
+                {...modalTransition})}
-      )}
             {createScreenCollapsibleStack(
-        'equipment-list',
+                "equipment-list",
                 MainStack,
                 EquipmentScreen,
-        i18n.t('screens.equipment.title'),
+                i18n.t('screens.equipment.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'equipment-rent',
+                "equipment-rent",
                 MainStack,
                 EquipmentLendScreen,
-        i18n.t('screens.equipment.book'),
+                i18n.t('screens.equipment.book'))}
-      )}
             {createScreenCollapsibleStack(
-        'equipment-confirm',
+                "equipment-confirm",
                 MainStack,
                 EquipmentConfirmScreen,
-        i18n.t('screens.equipment.confirm'),
+                i18n.t('screens.equipment.confirm'))}
-      )}
             {createScreenCollapsibleStack(
-        'vote',
+                "vote",
                 MainStack,
                 VoteScreen,
-        i18n.t('screens.vote.title'),
+                i18n.t('screens.vote.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'feedback',
+                "feedback",
                 MainStack,
                 BugReportScreen,
-        i18n.t('screens.feedback.title'),
+                i18n.t('screens.feedback.title'))}
-      )}
         </MainStack.Navigator>
     );
 }
 
-type PropsType = {
+type Props = {
     defaultHomeRoute: string | null,
-  // eslint-disable-next-line flowtype/no-weak-types
+    defaultHomeData: { [key: string]: any }
-  defaultHomeData: {[key: string]: string},
+}
-};
+
+export default class MainNavigator extends React.Component<Props> {
 
-export default class MainNavigator extends React.Component<PropsType> {
     createTabNavigator: () => React.Node;
 
-  constructor(props: PropsType) {
+    constructor(props: Props) {
         super(props);
-    this.createTabNavigator = (): React.Node => (
+        this.createTabNavigator = () => <TabNavigator {...props}/>
-      <TabNavigator
-        defaultHomeRoute={props.defaultHomeRoute}
-        defaultHomeData={props.defaultHomeData}
-      />
-    );
     }
 
-  render(): React.Node {
+    render() {
-    return <MainStackComponent createTabNavigator={this.createTabNavigator} />;
+        return (
+            <MainStackComponent createTabNavigator={this.createTabNavigator}/>
+        );
     }
 }

src/navigation/TabNavigator.js

@@ -1,39 +1,32 @@
-// @flow
-
 import * as React from 'react';
 import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
 
-import {Title, useTheme} from 'react-native-paper';
-import {Platform} from 'react-native';
-import i18n from 'i18n-js';
-import {createCollapsibleStack} from 'react-navigation-collapsible';
-import {View} from 'react-native-animatable';
 import HomeScreen from '../screens/Home/HomeScreen';
 import PlanningScreen from '../screens/Planning/PlanningScreen';
 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 AsyncStorageManager from "../managers/AsyncStorageManager";
-import ClubDisplayScreen from '../screens/Amicale/Clubs/ClubDisplayScreen';
+import {Title, useTheme} from 'react-native-paper';
-import ScannerScreen from '../screens/Home/ScannerScreen';
+import {Platform} from 'react-native';
-import FeedItemScreen from '../screens/Home/FeedItemScreen';
+import i18n from "i18n-js";
-import GroupSelectionScreen from '../screens/Planex/GroupSelectionScreen';
+import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
-import CustomTabBar from '../components/Tabbar/CustomTabBar';
+import ScannerScreen from "../screens/Home/ScannerScreen";
-import WebsitesHomeScreen from '../screens/Services/ServicesScreen';
+import FeedItemScreen from "../screens/Home/FeedItemScreen";
-import ServicesSectionScreen from '../screens/Services/ServicesSectionScreen';
+import {createCollapsibleStack} from "react-navigation-collapsible";
-import AmicaleContactScreen from '../screens/Amicale/AmicaleContactScreen';
+import GroupSelectionScreen from "../screens/Planex/GroupSelectionScreen";
-import {
+import CustomTabBar from "../components/Tabbar/CustomTabBar";
-  createScreenCollapsibleStack,
+import WebsitesHomeScreen from "../screens/Services/ServicesScreen";
-  getWebsiteStack,
+import ServicesSectionScreen from "../screens/Services/ServicesSectionScreen";
-} from '../utils/CollapsibleUtils';
+import AmicaleContactScreen from "../screens/Amicale/AmicaleContactScreen";
-import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot';
+import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
+import {View} from "react-native-animatable";
+import Mascot, {MASCOT_STYLE} from "../components/Mascot/Mascot";
+
+const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
 
-const modalTransition =
-  Platform.OS === 'ios'
-    ? TransitionPresets.ModalPresentationIOS
-    : TransitionPresets.ModalSlideFromBottomIOS;
 
 const defaultScreenOptions = {
     gestureEnabled: true,
@@ -41,98 +34,94 @@ const defaultScreenOptions = {
     ...modalTransition,
 };
 
+
 const ServicesStack = createStackNavigator();
 
-function ServicesStackComponent(): React.Node {
+function ServicesStackComponent() {
     return (
         <ServicesStack.Navigator
             initialRouteName="index"
-      headerMode="screen"
+            headerMode={"screen"}
-      screenOptions={defaultScreenOptions}>
+            screenOptions={defaultScreenOptions}
+        >
             {createScreenCollapsibleStack(
-        'index',
+                "index",
                 ServicesStack,
                 WebsitesHomeScreen,
-        i18n.t('screens.services.title'),
+                i18n.t('screens.services.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'services-section',
+                "services-section",
                 ServicesStack,
                 ServicesSectionScreen,
-        'SECTION',
+                "SECTION")}
-      )}
             {createScreenCollapsibleStack(
-        'amicale-contact',
+                "amicale-contact",
                 ServicesStack,
                 AmicaleContactScreen,
-        i18n.t('screens.amicaleAbout.title'),
+                i18n.t('screens.amicaleAbout.title'))}
-      )}
         </ServicesStack.Navigator>
     );
 }
 
 const ProxiwashStack = createStackNavigator();
 
-function ProxiwashStackComponent(): React.Node {
+function ProxiwashStackComponent() {
     return (
         <ProxiwashStack.Navigator
             initialRouteName="index"
-      headerMode="screen"
+            headerMode={"screen"}
-      screenOptions={defaultScreenOptions}>
+            screenOptions={defaultScreenOptions}
+        >
             {createScreenCollapsibleStack(
-        'index',
+                "index",
                 ProxiwashStack,
                 ProxiwashScreen,
-        i18n.t('screens.proxiwash.title'),
+                i18n.t('screens.proxiwash.title'))}
-      )}
             {createScreenCollapsibleStack(
-        'proxiwash-about',
+                "proxiwash-about",
                 ProxiwashStack,
                 ProxiwashAboutScreen,
-        i18n.t('screens.proxiwash.title'),
+                i18n.t('screens.proxiwash.title'))}
-      )}
         </ProxiwashStack.Navigator>
     );
 }
 
 const PlanningStack = createStackNavigator();
 
-function PlanningStackComponent(): React.Node {
+function PlanningStackComponent() {
     return (
         <PlanningStack.Navigator
             initialRouteName="index"
-      headerMode="screen"
+            headerMode={"screen"}
-      screenOptions={defaultScreenOptions}>
+            screenOptions={defaultScreenOptions}
+        >
             <PlanningStack.Screen
                 name="index"
                 component={PlanningScreen}
-        options={{title: i18n.t('screens.planning.title')}}
+                options={{title: i18n.t('screens.planning.title'),}}
             />
             {createScreenCollapsibleStack(
-        'planning-information',
+                "planning-information",
                 PlanningStack,
                 PlanningDisplayScreen,
-        i18n.t('screens.planning.eventDetails'),
+                i18n.t('screens.planning.eventDetails'))}
-      )}
         </PlanningStack.Navigator>
     );
 }
 
 const HomeStack = createStackNavigator();
 
-function HomeStackComponent(
+function HomeStackComponent(initialRoute: string | null, defaultData: { [key: string]: any }) {
-  initialRoute: string | null,
+    let params = undefined;
-  defaultData: {[key: string]: string},
-): React.Node {
-  let params;
     if (initialRoute != null)
         params = {data: defaultData, nextScreen: initialRoute, shouldOpen: true};
     const {colors} = useTheme();
     return (
         <HomeStack.Navigator
-      initialRouteName="index"
+            initialRouteName={"index"}
-      headerMode="screen"
+            headerMode={"screen"}
-      screenOptions={defaultScreenOptions}>
+            screenOptions={defaultScreenOptions}
+        >
             {createCollapsibleStack(
                 <HomeStack.Screen
                     name="index"
@@ -142,123 +131,113 @@ function HomeStackComponent(
                         headerStyle: {
                             backgroundColor: colors.surface,
                         },
-            headerTitle: (): React.Node => (
+                        headerTitle: () =>
-              <View style={{flexDirection: 'row'}}>
+                            <View style={{flexDirection: "row"}}>
                                 <Mascot
                                     style={{
-                    width: 50,
+                                        width: 50
                                     }}
                                     emotion={MASCOT_STYLE.RANDOM}
-                  animated
+                                    animated={true}
                                     entryAnimation={{
-                    animation: 'bounceIn',
+                                        animation: "bounceIn",
-                    duration: 1000,
+                                        duration: 1000
                                     }}
                                     loopAnimation={{
-                    animation: 'pulse',
+                                        animation: "pulse",
                                         duration: 2000,
-                    iterationCount: 'infinite',
+                                        iterationCount: "infinite"
                                     }}
                                 />
-                <Title
+                                <Title style={{
-                  style={{
                                     marginLeft: 10,
-                    marginTop: 'auto',
+                                    marginTop: "auto",
-                    marginBottom: 'auto',
+                                    marginBottom: "auto",
-                  }}>
+                                }}>{i18n.t('screens.home.title')}</Title>
-                  {i18n.t('screens.home.title')}
-                </Title>
                             </View>
-            ),
                     }}
                     initialParams={params}
                 />,
                 {
                     collapsedColor: colors.surface,
                     useNativeDriver: true,
-        },
+                }
             )}
             <HomeStack.Screen
                 name="scanner"
                 component={ScannerScreen}
-        options={{title: i18n.t('screens.scanner.title')}}
+                options={{title: i18n.t('screens.scanner.title'),}}
             />
 
             {createScreenCollapsibleStack(
-        'club-information',
+                "club-information",
                 HomeStack,
                 ClubDisplayScreen,
-        i18n.t('screens.clubs.details'),
+                i18n.t('screens.clubs.details'))}
-      )}
             {createScreenCollapsibleStack(
-        'feed-information',
+                "feed-information",
                 HomeStack,
                 FeedItemScreen,
-        i18n.t('screens.home.feed'),
+                i18n.t('screens.home.feed'))}
-      )}
             {createScreenCollapsibleStack(
-        'planning-information',
+                "planning-information",
                 HomeStack,
                 PlanningDisplayScreen,
-        i18n.t('screens.planning.eventDetails'),
+                i18n.t('screens.planning.eventDetails'))}
-      )}
         </HomeStack.Navigator>
     );
 }
 
 const PlanexStack = createStackNavigator();
 
-function PlanexStackComponent(): React.Node {
+function PlanexStackComponent() {
     return (
         <PlanexStack.Navigator
             initialRouteName="index"
-      headerMode="screen"
+            headerMode={"screen"}
-      screenOptions={defaultScreenOptions}>
+            screenOptions={defaultScreenOptions}
+        >
             {getWebsiteStack(
-        'index',
+                "index",
                 PlanexStack,
                 PlanexScreen,
-        i18n.t('screens.planex.title'),
+                i18n.t("screens.planex.title"))}
-      )}
             {createScreenCollapsibleStack(
-        'group-select',
+                "group-select",
                 PlanexStack,
                 GroupSelectionScreen,
-        '',
+                "")}
-      )}
         </PlanexStack.Navigator>
     );
 }
 
 const Tab = createBottomTabNavigator();
 
-type PropsType = {
+type Props = {
     defaultHomeRoute: string | null,
-  defaultHomeData: {[key: string]: string},
+    defaultHomeData: { [key: string]: any }
-};
+}
 
-export default class TabNavigator extends React.Component<PropsType> {
+export default class TabNavigator extends React.Component<Props> {
-  createHomeStackComponent: () => React.Node;
 
+    createHomeStackComponent: () => HomeStackComponent;
     defaultRoute: string;
 
-  constructor(props: PropsType) {
+    constructor(props) {
         super(props);
-    if (props.defaultHomeRoute != null) this.defaultRoute = 'home';
+        if (props.defaultHomeRoute != null)
+            this.defaultRoute = 'home';
         else
-      this.defaultRoute = AsyncStorageManager.getString(
+            this.defaultRoute = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key).toLowerCase();
-        AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
+        this.createHomeStackComponent = () => HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
-      ).toLowerCase();
-    this.createHomeStackComponent = (): React.Node =>
-      HomeStackComponent(props.defaultHomeRoute, props.defaultHomeData);
     }
 
-  render(): React.Node {
+    render() {
         return (
             <Tab.Navigator
                 initialRouteName={this.defaultRoute}
-        // eslint-disable-next-line react/jsx-props-no-spreading
+                tabBar={props => <CustomTabBar {...props} />}
-        tabBar={(props: {...}): React.Node => <CustomTabBar {...props} />}>
+            >
                 <Tab.Screen
                     name="services"
                     option
@@ -284,7 +263,7 @@ export default class TabNavigator extends React.Component<PropsType> {
                 <Tab.Screen
                     name="planex"
                     component={PlanexStackComponent}
-          options={{title: i18n.t('screens.planex.title')}}
+                    options={{title: i18n.t("screens.planex.title")}}
                 />
             </Tab.Navigator>
         );

src/screens/About/AboutDependenciesScreen.js

@@ -1,75 +1,73 @@
 // @flow
 
 import * as React from 'react';
+import packageJson from '../../../package';
 import {List} from 'react-native-paper';
-import {View} from 'react-native-animatable';
+import {StackNavigationProp} from "@react-navigation/stack";
-import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
-import packageJson from '../../../package.json';
+import {View} from "react-native-animatable";
 
-type ListItemType = {
+type listItem = {
     name: string,
-  version: string,
+    version: string
 };
 
 /**
  * Generates the dependencies list from the raw json
  *
  * @param object The raw json
- * @return {Array<ListItemType>}
+ * @return {Array<listItem>}
  */
-function generateListFromObject(object: {
+function generateListFromObject(object: { [key: string]: string }): Array<listItem> {
-  [key: string]: string,
+    let list = [];
-}): Array<ListItemType> {
+    let keys = Object.keys(object);
-  const list = [];
+    let values = Object.values(object);
-  const keys = Object.keys(object);
+    for (let i = 0; i < keys.length; i++) {
-  keys.forEach((key: string) => {
+        list.push({name: keys[i], version: values[i]});
-    list.push({name: key, version: object[key]});
+    }
-  });
+    //$FlowFixMe
     return list;
 }
 
+type Props = {
+    navigation: StackNavigationProp,
+}
+
 const LIST_ITEM_HEIGHT = 64;
 
 /**
  * Class defining a screen showing the list of libraries used by the app, taken from package.json
  */
-export default class AboutDependenciesScreen extends React.Component<null> {
+export default class AboutDependenciesScreen extends React.Component<Props> {
-  data: Array<ListItemType>;
+
+    data: Array<listItem>;
 
     constructor() {
         super();
         this.data = generateListFromObject(packageJson.dependencies);
     }
 
-  keyExtractor = (item: ListItemType): string => item.name;
+    keyExtractor = (item: listItem) => item.name;
 
-  getRenderItem = ({item}: {item: ListItemType}): React.Node => (
+    renderItem = ({item}: { item: listItem }) =>
         <List.Item
             title={item.name}
             description={item.version.replace('^', '').replace('~', '')}
             style={{height: LIST_ITEM_HEIGHT}}
-    />
+        />;
-  );
 
-  getItemLayout = (
+    itemLayout = (data: any, index: number) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
-    data: ListItemType,
-    index: number,
-  ): {length: number, offset: number, index: number} => ({
-    length: LIST_ITEM_HEIGHT,
-    offset: LIST_ITEM_HEIGHT * index,
-    index,
-  });
 
-  render(): React.Node {
+    render() {
         return (
             <View>
                 <CollapsibleFlatList
                     data={this.data}
                     keyExtractor={this.keyExtractor}
-          renderItem={this.getRenderItem}
+                    renderItem={this.renderItem}
                     // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-          removeClippedSubviews
+                    removeClippedSubviews={true}
-          getItemLayout={this.getItemLayout}
+                    getItemLayout={this.itemLayout}
                 />
             </View>
         );

src/screens/About/AboutScreen.js

@@ -1,50 +1,43 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, Linking, Platform} from 'react-native';
+import {FlatList, Linking, Platform, View} from 'react-native';
-import i18n from 'i18n-js';
+import i18n from "i18n-js";
 import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
-import {StackNavigationProp} from '@react-navigation/stack';
+import packageJson from "../../../package.json";
-import packageJson from '../../../package.json';
+import {StackNavigationProp} from "@react-navigation/stack";
-import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
-import APP_LOGO from '../../../assets/android.icon.png';
 
-type ListItemType = {
+type ListItem = {
     onPressCallback: () => void,
     icon: string,
     text: string,
-  showChevron: boolean,
+    showChevron: boolean
 };
 
 const links = {
     appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
-  playstore:
+    playstore: 'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
-    'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
+    git: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
-  git:
+    changelog: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
-    'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
+    license: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
-  changelog:
+    authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" +
-    'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
+        "subject=" +
-  license:
+        "Application Amicale INSA Toulouse" +
-    'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
+        "&body=" +
-  authorMail:
+        "Coucou !\n\n",
-    'mailto:vergnet@etud.insa-toulouse.fr?' +
-    'subject=' +
-    'Application Amicale INSA Toulouse' +
-    '&body=' +
-    'Coucou !\n\n',
     authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
-  yohanMail:
+    yohanMail: "mailto:ysimard@etud.insa-toulouse.fr?" +
-    'mailto:ysimard@etud.insa-toulouse.fr?' +
+        "subject=" +
-    'subject=' +
+        "Application Amicale INSA Toulouse" +
-    'Application Amicale INSA Toulouse' +
+        "&body=" +
-    '&body=' +
+        "Coucou !\n\n",
-    'Coucou !\n\n',
     yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard',
     react: 'https://facebook.github.io/react-native/',
-  meme: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    meme: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
 };
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
 };
 
@@ -52,145 +45,113 @@ type PropsType = {
  * Opens a link in the device's browser
  * @param link The link to open
  */
-function openWebLink(link: string) {
+function openWebLink(link) {
-  Linking.openURL(link);
+    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
 }
 
 /**
  * Class defining an about screen. This screen shows the user information about the app and it's author.
  */
-class AboutScreen extends React.Component<PropsType> {
+class AboutScreen extends React.Component<Props> {
+
     /**
      * Data to be displayed in the app card
      */
     appData = [
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore),
-        openWebLink(Platform.OS === 'ios' ? links.appstore : links.playstore);
+            icon: Platform.OS === "ios" ? 'apple' : 'google-play',
-      },
+            text: Platform.OS === "ios" ? i18n.t('screens.about.appstore') : i18n.t('screens.about.playstore'),
-      icon: Platform.OS === 'ios' ? 'apple' : 'google-play',
+            showChevron: true
-      text:
-        Platform.OS === 'ios'
-          ? i18n.t('screens.about.appstore')
-          : i18n.t('screens.about.playstore'),
-      showChevron: true,
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => this.props.navigation.navigate("feedback"),
-        const {navigation} = this.props;
-        navigation.navigate('feedback');
-      },
             icon: 'bug',
-      text: i18n.t('screens.feedback.homeButtonTitle'),
+            text: i18n.t("screens.feedback.homeButtonTitle"),
-      showChevron: true,
+            showChevron: true
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.git),
-        openWebLink(links.git);
-      },
             icon: 'git',
             text: 'Git',
-      showChevron: true,
+            showChevron: true
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.changelog),
-        openWebLink(links.changelog);
-      },
             icon: 'refresh',
             text: i18n.t('screens.about.changelog'),
-      showChevron: true,
+            showChevron: true
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.license),
-        openWebLink(links.license);
-      },
             icon: 'file-document',
             text: i18n.t('screens.about.license'),
-      showChevron: true,
+            showChevron: true
         },
     ];
-
     /**
      * Data to be displayed in the author card
      */
     authorData = [
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.meme),
-        openWebLink(links.meme);
-      },
             icon: 'account-circle',
             text: 'Arnaud VERGNET',
-      showChevron: false,
+            showChevron: false
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.authorMail),
-        openWebLink(links.authorMail);
-      },
             icon: 'email',
             text: i18n.t('screens.about.authorMail'),
-      showChevron: true,
+            showChevron: true
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.authorLinkedin),
-        openWebLink(links.authorLinkedin);
-      },
             icon: 'linkedin',
             text: 'Linkedin',
-      showChevron: true,
+            showChevron: true
         },
     ];
-
     /**
      * Data to be displayed in the additional developer card
      */
     additionalDevData = [
         {
-      onPressCallback: () => {},
+            onPressCallback: () => console.log('Meme this'),
             icon: 'account',
             text: 'Yohan SIMARD',
-      showChevron: false,
+            showChevron: false
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.yohanMail),
-        openWebLink(links.yohanMail);
-      },
             icon: 'email',
             text: i18n.t('screens.about.authorMail'),
-      showChevron: true,
+            showChevron: true
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.yohanLinkedin),
-        openWebLink(links.yohanLinkedin);
-      },
             icon: 'linkedin',
             text: 'Linkedin',
-      showChevron: true,
+            showChevron: true
         },
     ];
-
     /**
      * Data to be displayed in the technologies card
      */
     technoData = [
         {
-      onPressCallback: () => {
+            onPressCallback: () => openWebLink(links.react),
-        openWebLink(links.react);
-      },
             icon: 'react',
             text: i18n.t('screens.about.reactNative'),
-      showChevron: true,
+            showChevron: true
         },
         {
-      onPressCallback: () => {
+            onPressCallback: () => this.props.navigation.navigate('dependencies'),
-        const {navigation} = this.props;
-        navigation.navigate('dependencies');
-      },
             icon: 'developer-board',
             text: i18n.t('screens.about.libs'),
-      showChevron: true,
+            showChevron: true
         },
     ];
-
     /**
      * Order of information cards
      */
@@ -206,25 +167,44 @@ class AboutScreen extends React.Component<PropsType> {
         },
     ];
 
+    /**
+     * Gets the app icon
+     *
+     * @param props
+     * @return {*}
+     */
+    getAppIcon(props) {
+        return (
+            <Avatar.Image
+                {...props}
+                source={require('../../../assets/android.icon.png')}
+                style={{backgroundColor: 'transparent'}}
+            />
+        );
+    }
+
+    /**
+     * Extracts a key from the given item
+     *
+     * @param item The item to extract the key from
+     * @return {string} The extracted key
+     */
+    keyExtractor(item: ListItem): string {
+        return item.icon;
+    }
+
     /**
      * Gets the app card showing information and links about the app.
      *
      * @return {*}
      */
-  getAppCard(): React.Node {
+    getAppCard() {
         return (
             <Card style={{marginBottom: 10}}>
                 <Card.Title
-          title="Campus"
+                    title={"Campus"}
                     subtitle={packageJson.version}
-          left={({size}: {size: number}): React.Node => (
+                    left={this.getAppIcon}/>
-            <Avatar.Image
-              size={size}
-              source={APP_LOGO}
-              style={{backgroundColor: 'transparent'}}
-            />
-          )}
-        />
                 <Card.Content>
                     <FlatList
                         data={this.appData}
@@ -241,28 +221,25 @@ class AboutScreen extends React.Component<PropsType> {
      *
      * @return {*}
      */
-  getTeamCard(): React.Node {
+    getTeamCard() {
         return (
             <Card style={{marginBottom: 10}}>
                 <Card.Title
                     title={i18n.t('screens.about.team')}
-          left={({size, color}: {size: number, color: string}): React.Node => (
+                    left={(props) => <Avatar.Icon {...props} icon={'account-multiple'}/>}/>
-            <Avatar.Icon size={size} color={color} icon="account-multiple" />
-          )}
-        />
                 <Card.Content>
                     <Title>{i18n.t('screens.about.author')}</Title>
                     <FlatList
                         data={this.authorData}
                         keyExtractor={this.keyExtractor}
-            listKey="1"
+                        listKey={"1"}
                         renderItem={this.getCardItem}
                     />
                     <Title>{i18n.t('screens.about.additionalDev')}</Title>
                     <FlatList
                         data={this.additionalDevData}
                         keyExtractor={this.keyExtractor}
-            listKey="2"
+                        listKey={"2"}
                         renderItem={this.getCardItem}
                     />
                 </Card.Content>
@@ -275,7 +252,7 @@ class AboutScreen extends React.Component<PropsType> {
      *
      * @return {*}
      */
-  getTechnoCard(): React.Node {
+    getTechnoCard() {
         return (
             <Card style={{marginBottom: 10}}>
                 <Card.Content>
@@ -296,14 +273,10 @@ class AboutScreen extends React.Component<PropsType> {
      * @param props
      * @return {*}
      */
-  static getChevronIcon({
+    getChevronIcon(props) {
-    size,
+        return (
-    color,
+            <List.Icon {...props} icon={'chevron-right'}/>
-  }: {
+        );
-    size: number,
-    color: string,
-  }): React.Node {
-    return <List.Icon size={size} color={color} icon="chevron-right" />;
     }
 
     /**
@@ -313,11 +286,10 @@ class AboutScreen extends React.Component<PropsType> {
      * @param props
      * @return {*}
      */
-  static getItemIcon(
+    getItemIcon(item: ListItem, props) {
-    item: ListItemType,
+        return (
-    {size, color}: {size: number, color: string},
+            <List.Icon {...props} icon={item.icon}/>
-  ): React.Node {
+        );
-    return <List.Icon size={size} color={color} icon={item.icon} />;
     }
 
     /**
@@ -325,19 +297,18 @@ class AboutScreen extends React.Component<PropsType> {
      *
      * @returns {*}
      */
-  getCardItem = ({item}: {item: ListItemType}): React.Node => {
+    getCardItem = ({item}: { item: ListItem }) => {
-    const getItemIcon = (props: {size: number, color: string}): React.Node =>
+        const getItemIcon = this.getItemIcon.bind(this, item);
-      AboutScreen.getItemIcon(item, props);
         if (item.showChevron) {
             return (
                 <List.Item
                     title={item.text}
                     left={getItemIcon}
-          right={AboutScreen.getChevronIcon}
+                    right={this.getChevronIcon}
                     onPress={item.onPressCallback}
                 />
             );
-    }
+        } else {
             return (
                 <List.Item
                     title={item.text}
@@ -345,6 +316,7 @@ class AboutScreen extends React.Component<PropsType> {
                     onPress={item.onPressCallback}
                 />
             );
+        }
     };
 
     /**
@@ -353,7 +325,7 @@ class AboutScreen extends React.Component<PropsType> {
      * @param item The item to show
      * @return {*}
      */
-  getMainCard = ({item}: {item: {id: string}}): React.Node => {
+    getMainCard = ({item}: { item: { id: string } }) => {
         switch (item.id) {
             case 'app':
                 return this.getAppCard();
@@ -361,20 +333,11 @@ class AboutScreen extends React.Component<PropsType> {
                 return this.getTeamCard();
             case 'techno':
                 return this.getTechnoCard();
-      default:
-        return null;
         }
+        return <View/>;
     };
 
-  /**
+    render() {
-   * Extracts a key from the given item
-   *
-   * @param item The item to extract the key from
-   * @return {string} The extracted key
-   */
-  keyExtractor = (item: ListItemType): string => item.icon;
-
-  render(): React.Node {
         return (
             <CollapsibleFlatList
                 style={{padding: 5}}

src/screens/About/DebugScreen.js

@@ -1,43 +1,38 @@
 // @flow
 
 import * as React from 'react';
-import {View} from 'react-native';
+import {View} from "react-native";
-import {
+import AsyncStorageManager from "../../managers/AsyncStorageManager";
-  Button,
+import CustomModal from "../../components/Overrides/CustomModal";
-  List,
+import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
-  Subheading,
+import {StackNavigationProp} from "@react-navigation/stack";
-  TextInput,
+import {Modalize} from "react-native-modalize";
-  Title,
+import type {CustomTheme} from "../../managers/ThemeManager";
-  withTheme,
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
-} from 'react-native-paper';
-import {Modalize} from 'react-native-modalize';
-import CustomModal from '../../components/Overrides/CustomModal';
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
-import type {CustomThemeType} from '../../managers/ThemeManager';
-import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
 
-type PreferenceItemType = {
+type PreferenceItem = {
     key: string,
     default: string,
     current: string,
+}
+
+type Props = {
+    navigation: StackNavigationProp,
+    theme: CustomTheme
 };
 
-type PropsType = {
+type State = {
-  theme: CustomThemeType,
+    modalCurrentDisplayItem: PreferenceItem,
-};
+    currentPreferences: Array<PreferenceItem>,
-
+}
-type StateType = {
-  modalCurrentDisplayItem: PreferenceItemType,
-  currentPreferences: Array<PreferenceItemType>,
-};
 
 /**
  * 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> {
+class DebugScreen extends React.Component<Props, State> {
-  modalRef: Modalize;
 
+    modalRef: Modalize;
     modalInputValue: string;
 
     /**
@@ -45,126 +40,87 @@ class DebugScreen extends React.Component<PropsType, StateType> {
      *
      * @param props
      */
-  constructor(props: PropsType) {
+    constructor(props) {
         super(props);
-    this.modalInputValue = '';
+        this.modalInputValue = "";
-    const currentPreferences: Array<PreferenceItemType> = [];
+        let currentPreferences : Array<PreferenceItem> = [];
-    // eslint-disable-next-line flowtype/no-weak-types
+        Object.values(AsyncStorageManager.PREFERENCES).map((object: any) => {
-    Object.values(AsyncStorageManager.PREFERENCES).forEach((object: any) => {
+            let newObject: PreferenceItem = {...object};
-      const newObject: PreferenceItemType = {...object};
             newObject.current = AsyncStorageManager.getString(newObject.key);
             currentPreferences.push(newObject);
         });
         this.state = {
             modalCurrentDisplayItem: {},
-      currentPreferences,
+            currentPreferences: currentPreferences
         };
     }
 
+    /**
+     * Shows the edit modal
+     *
+     * @param item
+     */
+    showEditModal(item: PreferenceItem) {
+        this.setState({
+            modalCurrentDisplayItem: item
+        });
+        if (this.modalRef) {
+            this.modalRef.open();
+        }
+    }
+
     /**
      * Gets the edit modal content
      *
      * @return {*}
      */
-  getModalContent(): React.Node {
+    getModalContent() {
-    const {props, state} = this;
         return (
-      <View
+            <View style={{
-        style={{
                 flex: 1,
-          padding: 20,
+                padding: 20
             }}>
-        <Title>{state.modalCurrentDisplayItem.key}</Title>
+                <Title>{this.state.modalCurrentDisplayItem.key}</Title>
-        <Subheading>
+                <Subheading>Default: {this.state.modalCurrentDisplayItem.default}</Subheading>
-          Default: {state.modalCurrentDisplayItem.default}
+                <Subheading>Current: {this.state.modalCurrentDisplayItem.current}</Subheading>
-        </Subheading>
-        <Subheading>
-          Current: {state.modalCurrentDisplayItem.current}
-        </Subheading>
                 <TextInput
-          label="New Value"
+                    label='New Value'
-          onChangeText={(text: string) => {
+                    onChangeText={(text) => this.modalInputValue = text}
-            this.modalInputValue = text;
-          }}
                 />
-        <View
+                <View style={{
-          style={{
                     flexDirection: 'row',
                     marginTop: 10,
                 }}>
                     <Button
                         mode="contained"
-            dark
+                        dark={true}
-            color={props.theme.colors.success}
+                        color={this.props.theme.colors.success}
-            onPress={() => {
+                        onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
-              this.saveNewPrefs(
-                state.modalCurrentDisplayItem.key,
-                this.modalInputValue,
-              );
-            }}>
                         Save new value
                     </Button>
                     <Button
                         mode="contained"
-            dark
+                        dark={true}
-            color={props.theme.colors.danger}
+                        color={this.props.theme.colors.danger}
-            onPress={() => {
+                        onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}>
-              this.saveNewPrefs(
-                state.modalCurrentDisplayItem.key,
-                state.modalCurrentDisplayItem.default,
-              );
-            }}>
                         Reset to default
                     </Button>
                 </View>
+
             </View>
         );
     }
 
-  getRenderItem = ({item}: {item: PreferenceItemType}): React.Node => {
-    return (
-      <List.Item
-        title={item.key}
-        description="Click to edit"
-        onPress={() => {
-          this.showEditModal(item);
-        }}
-      />
-    );
-  };
-
-  /**
-   * Callback used when receiving the modal ref
-   *
-   * @param ref
-   */
-  onModalRef = (ref: Modalize) => {
-    this.modalRef = ref;
-  };
-
-  /**
-   * Shows the edit modal
-   *
-   * @param item
-   */
-  showEditModal(item: PreferenceItemType) {
-    this.setState({
-      modalCurrentDisplayItem: item,
-    });
-    if (this.modalRef) this.modalRef.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 {
+    findIndexOfKey(key: string) {
-    const {currentPreferences} = this.state;
         let index = -1;
-    for (let i = 0; i < currentPreferences.length; i += 1) {
+        for (let i = 0; i < this.state.currentPreferences.length; i++) {
-      if (currentPreferences[i].key === key) {
+            if (this.state.currentPreferences[i].key === key) {
                 index = i;
                 break;
             }
@@ -179,10 +135,8 @@ class DebugScreen extends React.Component<PropsType, StateType> {
      * @param value The pref value
      */
     saveNewPrefs(key: string, value: string) {
-    this.setState((prevState: StateType): {
+        this.setState((prevState) => {
-      currentPreferences: Array<PreferenceItemType>,
+            let currentPreferences = [...prevState.currentPreferences];
-    } => {
-      const currentPreferences = [...prevState.currentPreferences];
             currentPreferences[this.findIndexOfKey(key)].current = value;
             return {currentPreferences};
         });
@@ -190,18 +144,36 @@ class DebugScreen extends React.Component<PropsType, StateType> {
         this.modalRef.close();
     }
 
-  render(): React.Node {
+    /**
-    const {state} = this;
+     * Callback used when receiving the modal ref
+     *
+     * @param ref
+     */
+    onModalRef = (ref: Modalize) => {
+        this.modalRef = ref;
+    }
+
+    renderItem = ({item}: {item: PreferenceItem}) => {
+        return (
+            <List.Item
+                title={item.key}
+                description={'Click to edit'}
+                onPress={() => this.showEditModal(item)}
+            />
+        );
+    };
+
+    render() {
         return (
             <View>
                 <CustomModal onRef={this.onModalRef}>
                     {this.getModalContent()}
                 </CustomModal>
-        {/* $FlowFixMe */}
+                {/*$FlowFixMe*/}
                 <CollapsibleFlatList
-          data={state.currentPreferences}
+                    data={this.state.currentPreferences}
-          extraData={state.currentPreferences}
+                    extraData={this.state.currentPreferences}
-          renderItem={this.getRenderItem}
+                    renderItem={this.renderItem}
                 />
             </View>
         );

src/screens/Amicale/AmicaleContactScreen.js

@@ -4,141 +4,121 @@ import * as React from 'react';
 import {FlatList, Image, Linking, View} from 'react-native';
 import {Card, List, Text, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
-import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
+import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
-import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
-import AMICALE_LOGO from '../../../assets/amicale.png';
 
-type DatasetItemType = {
+type Props = {
+};
+
+type DatasetItem = {
     name: string,
     email: string,
     icon: MaterialCommunityIconsGlyphs,
-};
+}
 
 /**
  * Class defining a planning event information page.
  */
-class AmicaleContactScreen extends React.Component<null> {
+class AmicaleContactScreen extends React.Component<Props> {
-  // Dataset containing information about contacts
-  CONTACT_DATASET: Array<DatasetItemType>;
 
-  constructor() {
+    // Dataset containing information about contacts
-    super();
+    CONTACT_DATASET: Array<DatasetItem>;
+
+    constructor(props: Props) {
+        super(props);
         this.CONTACT_DATASET = [
             {
-        name: i18n.t('screens.amicaleAbout.roles.interSchools'),
+                name: i18n.t("screens.amicaleAbout.roles.interSchools"),
-        email: 'inter.ecoles@amicale-insat.fr',
+                email: "inter.ecoles@amicale-insat.fr",
-        icon: 'share-variant',
+                icon: "share-variant"
             },
             {
-        name: i18n.t('screens.amicaleAbout.roles.culture'),
+                name: i18n.t("screens.amicaleAbout.roles.culture"),
-        email: 'culture@amicale-insat.fr',
+                email: "culture@amicale-insat.fr",
-        icon: 'book',
+                icon: "book"
             },
             {
-        name: i18n.t('screens.amicaleAbout.roles.animation'),
+                name: i18n.t("screens.amicaleAbout.roles.animation"),
-        email: 'animation@amicale-insat.fr',
+                email: "animation@amicale-insat.fr",
-        icon: 'emoticon',
+                icon: "emoticon"
             },
             {
-        name: i18n.t('screens.amicaleAbout.roles.clubs'),
+                name: i18n.t("screens.amicaleAbout.roles.clubs"),
-        email: 'clubs@amicale-insat.fr',
+                email: "clubs@amicale-insat.fr",
-        icon: 'account-group',
+                icon: "account-group"
             },
             {
-        name: i18n.t('screens.amicaleAbout.roles.event'),
+                name: i18n.t("screens.amicaleAbout.roles.event"),
-        email: 'evenements@amicale-insat.fr',
+                email: "evenements@amicale-insat.fr",
-        icon: 'calendar-range',
+                icon: "calendar-range"
             },
             {
-        name: i18n.t('screens.amicaleAbout.roles.tech'),
+                name: i18n.t("screens.amicaleAbout.roles.tech"),
-        email: 'technique@amicale-insat.fr',
+                email: "technique@amicale-insat.fr",
-        icon: 'cog',
+                icon: "cog"
             },
             {
-        name: i18n.t('screens.amicaleAbout.roles.communication'),
+                name: i18n.t("screens.amicaleAbout.roles.communication"),
-        email: 'amicale@amicale-insat.fr',
+                email: "amicale@amicale-insat.fr",
-        icon: 'comment-account',
+                icon: "comment-account"
             },
             {
-        name: i18n.t('screens.amicaleAbout.roles.intraSchools'),
+                name: i18n.t("screens.amicaleAbout.roles.intraSchools"),
-        email: 'intra.ecoles@amicale-insat.fr',
+                email: "intra.ecoles@amicale-insat.fr",
-        icon: 'school',
+                icon: "school"
             },
             {
-        name: i18n.t('screens.amicaleAbout.roles.publicRelations'),
+                name: i18n.t("screens.amicaleAbout.roles.publicRelations"),
-        email: 'rp@amicale-insat.fr',
+                email: "rp@amicale-insat.fr",
-        icon: 'account-tie',
+                icon: "account-tie"
             },
         ];
     }
 
-  keyExtractor = (item: DatasetItemType): string => item.email;
+    keyExtractor = (item: DatasetItem) => item.email;
 
-  getChevronIcon = ({
+    getChevronIcon = (props) => <List.Icon {...props} icon={'chevron-right'}/>;
-    size,
-    color,
-  }: {
-    size: number,
-    color: string,
-  }): React.Node => (
-    <List.Icon size={size} color={color} icon="chevron-right" />
-  );
 
-  getRenderItem = ({item}: {item: DatasetItemType}): React.Node => {
+    renderItem = ({item}: { item: DatasetItem }) => {
-    const onPress = () => {
+        const onPress = () => Linking.openURL('mailto:' + item.email);
-      Linking.openURL(`mailto:${item.email}`);
+        return <List.Item
-    };
-    return (
-      <List.Item
             title={item.name}
             description={item.email}
-        left={({size, color}: {size: number, color: string}): React.Node => (
+            left={(props) => <List.Icon {...props} icon={item.icon}/>}
-          <List.Icon size={size} color={color} icon={item.icon} />
-        )}
             right={this.getChevronIcon}
             onPress={onPress}
         />
-    );
     };
 
-  getScreen = (): React.Node => {
+    getScreen = () => {
         return (
             <View>
-        <View
+                <View style={{
-          style={{
                     width: '100%',
                     height: 100,
                     marginTop: 20,
                     marginBottom: 20,
                     justifyContent: 'center',
-            alignItems: 'center',
+                    alignItems: 'center'
                 }}>
                     <Image
-            source={AMICALE_LOGO}
+                        source={require('../../../assets/amicale.png')}
-            style={{flex: 1, resizeMode: 'contain'}}
+                        style={{flex: 1, resizeMode: "contain"}}
-            resizeMode="contain"
+                        resizeMode="contain"/>
-          />
                 </View>
                 <Card style={{margin: 5}}>
                     <Card.Title
-            title={i18n.t('screens.amicaleAbout.title')}
+                        title={i18n.t("screens.amicaleAbout.title")}
-            subtitle={i18n.t('screens.amicaleAbout.subtitle')}
+                        subtitle={i18n.t("screens.amicaleAbout.subtitle")}
-            left={({
+                        left={props => <List.Icon {...props} icon={'information'}/>}
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="information" />
-            )}
                     />
                     <Card.Content>
-            <Text>{i18n.t('screens.amicaleAbout.message')}</Text>
+                        <Text>{i18n.t("screens.amicaleAbout.message")}</Text>
+                        {/*$FlowFixMe*/}
                         <FlatList
                             data={this.CONTACT_DATASET}
                             keyExtractor={this.keyExtractor}
-              renderItem={this.getRenderItem}
+                            renderItem={this.renderItem}
                         />
                     </Card.Content>
                 </Card>
@@ -146,12 +126,12 @@ class AmicaleContactScreen extends React.Component<null> {
         );
     };
 
-  render(): React.Node {
+    render() {
         return (
             <CollapsibleFlatList
-        data={[{key: '1'}]}
+                data={[{key: "1"}]}
                 renderItem={this.getScreen}
-        hasTab
+                hasTab={true}
             />
         );
     }

src/screens/Amicale/Clubs/ClubDisplayScreen.js

@@ -17,7 +17,7 @@ import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen
 import CustomHTML from '../../../components/Overrides/CustomHTML';
 import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
 import type {ClubCategoryType, ClubType} from './ClubListScreen';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 import {ERROR_TYPE} from '../../../utils/WebData';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 import type {ApiGenericDataType} from '../../../utils/WebData';
@@ -32,7 +32,7 @@ type PropsType = {
     },
     ...
   },
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 const AMICALE_MAIL = 'clubs@amicale-insat.fr';

src/screens/Amicale/Equipment/EquipmentConfirmScreen.js

@@ -11,7 +11,7 @@ import {
 } from 'react-native-paper';
 import {View} from 'react-native';
 import i18n from 'i18n-js';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 import type {DeviceType} from './EquipmentListScreen';
 import {getRelativeDateString} from '../../../utils/EquipmentBooking';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
@@ -23,7 +23,7 @@ type PropsType = {
       dates: [string, string],
     },
   },
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 class EquipmentConfirmScreen extends React.Component<PropsType> {

src/screens/Amicale/Equipment/EquipmentRentScreen.js

@@ -15,7 +15,7 @@ import * as Animatable from 'react-native-animatable';
 import i18n from 'i18n-js';
 import {CalendarList} from 'react-native-calendars';
 import type {DeviceType} from './EquipmentListScreen';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 import LoadingConfirmDialog from '../../../components/Dialogs/LoadingConfirmDialog';
 import ErrorDialog from '../../../components/Dialogs/ErrorDialog';
 import {
@@ -36,7 +36,7 @@ type PropsType = {
       item?: DeviceType,
     },
   },
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 export type MarkedDatesObjectType = {

src/screens/Amicale/LoginScreen.js

@@ -1,33 +1,27 @@
 // @flow
 
 import * as React from 'react';
-import {Image, KeyboardAvoidingView, StyleSheet, View} from 'react-native';
+import {Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
-import {
+import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper';
-  Button,
+import ConnectionManager from "../../managers/ConnectionManager";
-  Card,
-  HelperText,
-  TextInput,
-  withTheme,
-} from 'react-native-paper';
 import i18n from 'i18n-js';
-import {StackNavigationProp} from '@react-navigation/stack';
+import ErrorDialog from "../../components/Dialogs/ErrorDialog";
-import LinearGradient from 'react-native-linear-gradient';
+import type {CustomTheme} from "../../managers/ThemeManager";
-import ConnectionManager from '../../managers/ConnectionManager';
+import AsyncStorageManager from "../../managers/AsyncStorageManager";
-import ErrorDialog from '../../components/Dialogs/ErrorDialog';
+import {StackNavigationProp} from "@react-navigation/stack";
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import AvailableWebsites from "../../constants/AvailableWebsites";
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
+import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
-import AvailableWebsites from '../../constants/AvailableWebsites';
+import MascotPopup from "../../components/Mascot/MascotPopup";
-import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
+import LinearGradient from "react-native-linear-gradient";
-import MascotPopup from '../../components/Mascot/MascotPopup';
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
-import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  route: {params: {nextScreen: string}},
+    route: { params: { nextScreen: string } },
-  theme: CustomThemeType,
+    theme: CustomTheme
-};
+}
 
-type StateType = {
+type State = {
     email: string,
     password: string,
     isEmailValidated: boolean,
@@ -36,53 +30,17 @@ type StateType = {
     dialogVisible: boolean,
     dialogError: number,
     mascotDialogVisible: boolean,
-};
+}
 
 const ICON_AMICALE = require('../../../assets/amicale.png');
 
-const RESET_PASSWORD_PATH = 'https://www.amicale-insat.fr/password/reset';
+const RESET_PASSWORD_PATH = "https://www.amicale-insat.fr/password/reset";
 
 const emailRegex = /^.+@.+\..+$/;
 
-const styles = StyleSheet.create({
+class LoginScreen extends React.Component<Props, State> {
-  container: {
-    flex: 1,
-  },
-  card: {
-    marginTop: 'auto',
-    marginBottom: 'auto',
-  },
-  header: {
-    fontSize: 36,
-    marginBottom: 48,
-  },
-  textInput: {},
-  btnContainer: {
-    marginTop: 5,
-    marginBottom: 10,
-  },
-});
 
-class LoginScreen extends React.Component<PropsType, StateType> {
+    state = {
-  onEmailChange: (value: string) => void;
-
-  onPasswordChange: (value: string) => void;
-
-  passwordInputRef: {current: null | TextInput};
-
-  nextScreen: string | null;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.passwordInputRef = React.createRef();
-    this.onEmailChange = (value: string) => {
-      this.onInputChange(true, value);
-    };
-    this.onPasswordChange = (value: string) => {
-      this.onInputChange(false, value);
-    };
-    props.navigation.addListener('focus', this.onScreenFocus);
-    this.state = {
         email: '',
         password: '',
         isEmailValidated: false,
@@ -90,27 +48,139 @@ class LoginScreen extends React.Component<PropsType, StateType> {
         loading: false,
         dialogVisible: false,
         dialogError: 0,
-      mascotDialogVisible: AsyncStorageManager.getBool(
+        mascotDialogVisible: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.loginShowBanner.key),
-        AsyncStorageManager.PREFERENCES.loginShowBanner.key,
-      ),
     };
+
+    onEmailChange: (value: string) => null;
+    onPasswordChange: (value: string) => null;
+    passwordInputRef: { current: null | TextInput };
+
+    nextScreen: string | null;
+
+    constructor(props) {
+        super(props);
+        this.passwordInputRef = React.createRef();
+        this.onEmailChange = this.onInputChange.bind(this, true);
+        this.onPasswordChange = this.onInputChange.bind(this, false);
+        this.props.navigation.addListener('focus', this.onScreenFocus);
     }
 
     onScreenFocus = () => {
         this.handleNavigationParams();
     };
 
+    /**
+     * Saves the screen to navigate to after a successful login if one was provided in navigation parameters
+     */
+    handleNavigationParams() {
+        if (this.props.route.params != null) {
+            if (this.props.route.params.nextScreen != null)
+                this.nextScreen = this.props.route.params.nextScreen;
+            else
+                this.nextScreen = null;
+        }
+    }
+
+    hideMascotDialog = () => {
+        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.loginShowBanner.key, false);
+        this.setState({mascotDialogVisible: false})
+    };
+
+    showMascotDialog = () => {
+        this.setState({mascotDialogVisible: true})
+    };
+
+    /**
+     * Shows an error dialog with the corresponding login error
+     *
+     * @param error The error given by the login request
+     */
+    showErrorDialog = (error: number) =>
+        this.setState({
+            dialogVisible: true,
+            dialogError: error,
+        });
+
+    hideErrorDialog = () => this.setState({dialogVisible: false});
+
+    /**
+     * Navigates to the screen specified in navigation parameters or simply go back tha stack.
+     * Saves in user preferences to not show the login banner again.
+     */
+    handleSuccess = () => {
+        // Do not show the home login banner again
+        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.homeShowBanner.key, false);
+        if (this.nextScreen == null)
+            this.props.navigation.goBack();
+        else
+            this.props.navigation.replace(this.nextScreen);
+    };
+
     /**
      * Navigates to the Amicale website screen with the reset password link as navigation parameters
      */
-  onResetPasswordClick = () => {
+    onResetPasswordClick = () => this.props.navigation.navigate("website", {
-    const {navigation} = this.props;
-    navigation.navigate('website', {
         host: AvailableWebsites.websites.AMICALE,
         path: RESET_PASSWORD_PATH,
-      title: i18n.t('screens.websites.amicale'),
+        title: i18n.t('screens.websites.amicale')
     });
-  };
+
+    /**
+     * The user has unfocused the input, his email is ready to be validated
+     */
+    validateEmail = () => this.setState({isEmailValidated: true});
+
+    /**
+     * Checks if the entered email is valid (matches the regex)
+     *
+     * @returns {boolean}
+     */
+    isEmailValid() {
+        return emailRegex.test(this.state.email);
+    }
+
+    /**
+     * Checks if we should tell the user his email is invalid.
+     * We should only show this if his email is invalid and has been checked when un-focusing the input
+     *
+     * @returns {boolean|boolean}
+     */
+    shouldShowEmailError() {
+        return this.state.isEmailValidated && !this.isEmailValid();
+    }
+
+    /**
+     * The user has unfocused the input, his password is ready to be validated
+     */
+    validatePassword = () => this.setState({isPasswordValidated: true});
+
+    /**
+     * Checks if the user has entered a password
+     *
+     * @returns {boolean}
+     */
+    isPasswordValid() {
+        return this.state.password !== '';
+    }
+
+    /**
+     * Checks if we should tell the user his password is invalid.
+     * We should only show this if his password is invalid and has been checked when un-focusing the input
+     *
+     * @returns {boolean|boolean}
+     */
+    shouldShowPasswordError() {
+        return this.state.isPasswordValidated && !this.isPasswordValid();
+    }
+
+    /**
+     * If the email and password are valid, and we are not loading a request, then the login button can be enabled
+     *
+     * @returns {boolean}
+     */
+    shouldEnableLogin() {
+        return this.isEmailValid() && this.isPasswordValid() && !this.state.loading;
+    }
 
     /**
      * Called when the user input changes in the email or password field.
@@ -141,7 +211,7 @@ class LoginScreen extends React.Component<PropsType, StateType> {
     onEmailSubmit = () => {
         if (this.passwordInputRef.current != null)
             this.passwordInputRef.current.focus();
-  };
+    }
 
     /**
      * Called when the user clicks on login or finishes to type his password.
@@ -151,11 +221,9 @@ class LoginScreen extends React.Component<PropsType, StateType> {
      *
      */
     onSubmit = () => {
-    const {email, password} = this.state;
         if (this.shouldEnableLogin()) {
             this.setState({loading: true});
-      ConnectionManager.getInstance()
+            ConnectionManager.getInstance().connect(this.state.email, this.state.password)
-        .connect(email, password)
                 .then(this.handleSuccess)
                 .catch(this.showErrorDialog)
                 .finally(() => {
@@ -169,48 +237,53 @@ class LoginScreen extends React.Component<PropsType, StateType> {
      *
      * @returns {*}
      */
-  getFormInput(): React.Node {
+    getFormInput() {
-    const {email, password} = this.state;
         return (
             <View>
                 <TextInput
-          label={i18n.t('screens.login.email')}
+                    label={i18n.t("screens.login.email")}
-          mode="outlined"
+                    mode='outlined'
-          value={email}
+                    value={this.state.email}
                     onChangeText={this.onEmailChange}
                     onBlur={this.validateEmail}
                     onSubmitEditing={this.onEmailSubmit}
                     error={this.shouldShowEmailError()}
-          textContentType="emailAddress"
+                    textContentType={'emailAddress'}
-          autoCapitalize="none"
+                    autoCapitalize={'none'}
-          autoCompleteType="email"
+                    autoCompleteType={'email'}
                     autoCorrect={false}
-          keyboardType="email-address"
+                    keyboardType={'email-address'}
-          returnKeyType="next"
+                    returnKeyType={'next'}
                     secureTextEntry={false}
                 />
-        <HelperText type="error" visible={this.shouldShowEmailError()}>
+                <HelperText
-          {i18n.t('screens.login.emailError')}
+                    type="error"
+                    visible={this.shouldShowEmailError()}
+                >
+                    {i18n.t("screens.login.emailError")}
                 </HelperText>
                 <TextInput
                     ref={this.passwordInputRef}
-          label={i18n.t('screens.login.password')}
+                    label={i18n.t("screens.login.password")}
-          mode="outlined"
+                    mode='outlined'
-          value={password}
+                    value={this.state.password}
                     onChangeText={this.onPasswordChange}
                     onBlur={this.validatePassword}
                     onSubmitEditing={this.onSubmit}
                     error={this.shouldShowPasswordError()}
-          textContentType="password"
+                    textContentType={'password'}
-          autoCapitalize="none"
+                    autoCapitalize={'none'}
-          autoCompleteType="password"
+                    autoCompleteType={'password'}
                     autoCorrect={false}
-          keyboardType="default"
+                    keyboardType={'default'}
-          returnKeyType="done"
+                    returnKeyType={'done'}
-          secureTextEntry
+                    secureTextEntry={true}
                 />
-        <HelperText type="error" visible={this.shouldShowPasswordError()}>
+                <HelperText
-          {i18n.t('screens.login.passwordError')}
+                    type="error"
+                    visible={this.shouldShowPasswordError()}
+                >
+                    {i18n.t("screens.login.passwordError")}
                 </HelperText>
             </View>
         );
@@ -220,45 +293,43 @@ class LoginScreen extends React.Component<PropsType, StateType> {
      * Gets the card containing the input form
      * @returns {*}
      */
-  getMainCard(): React.Node {
+    getMainCard() {
-    const {props, state} = this;
         return (
             <View style={styles.card}>
                 <Card.Title
-          title={i18n.t('screens.login.title')}
+                    title={i18n.t("screens.login.title")}
-          titleStyle={{color: '#fff'}}
+                    titleStyle={{color: "#fff"}}
-          subtitle={i18n.t('screens.login.subtitle')}
+                    subtitle={i18n.t("screens.login.subtitle")}
-          subtitleStyle={{color: '#fff'}}
+                    subtitleStyle={{color: "#fff"}}
-          left={({size}: {size: number}): React.Node => (
+                    left={(props) => <Image
-            <Image
+                        {...props}
                         source={ICON_AMICALE}
                         style={{
-                width: size,
+                            width: props.size,
-                height: size,
+                            height: props.size,
-              }}
+                        }}/>}
-            />
-          )}
                 />
                 <Card.Content>
                     {this.getFormInput()}
-          <Card.Actions style={{flexWrap: 'wrap'}}>
+                    <Card.Actions style={{flexWrap: "wrap"}}>
                         <Button
                             icon="lock-question"
                             mode="contained"
                             onPress={this.onResetPasswordClick}
-              color={props.theme.colors.warning}
+                            color={this.props.theme.colors.warning}
                             style={{marginRight: 'auto', marginBottom: 20}}>
-              {i18n.t('screens.login.resetPassword')}
+                            {i18n.t("screens.login.resetPassword")}
                         </Button>
                         <Button
                             icon="send"
                             mode="contained"
                             disabled={!this.shouldEnableLogin()}
-              loading={state.loading}
+                            loading={this.state.loading}
                             onPress={this.onSubmit}
                             style={{marginLeft: 'auto'}}>
-              {i18n.t('screens.login.title')}
+                            {i18n.t("screens.login.title")}
                         </Button>
+
                     </Card.Actions>
                     <Card.Actions>
                         <Button
@@ -269,7 +340,7 @@ class LoginScreen extends React.Component<PropsType, StateType> {
                                 marginLeft: 'auto',
                                 marginRight: 'auto',
                             }}>
-              {i18n.t('screens.login.mascotDialog.title')}
+                            {i18n.t("screens.login.mascotDialog.title")}
                         </Button>
                     </Card.Actions>
                 </Card.Content>
@@ -277,164 +348,45 @@ class LoginScreen extends React.Component<PropsType, StateType> {
         );
     }
 
-  /**
+    render() {
-   * The user has unfocused the input, his email is ready to be validated
-   */
-  validateEmail = () => {
-    this.setState({isEmailValidated: true});
-  };
-
-  /**
-   * The user has unfocused the input, his password is ready to be validated
-   */
-  validatePassword = () => {
-    this.setState({isPasswordValidated: true});
-  };
-
-  hideMascotDialog = () => {
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.loginShowBanner.key,
-      false,
-    );
-    this.setState({mascotDialogVisible: false});
-  };
-
-  showMascotDialog = () => {
-    this.setState({mascotDialogVisible: true});
-  };
-
-  /**
-   * Shows an error dialog with the corresponding login error
-   *
-   * @param error The error given by the login request
-   */
-  showErrorDialog = (error: number) => {
-    this.setState({
-      dialogVisible: true,
-      dialogError: error,
-    });
-  };
-
-  hideErrorDialog = () => {
-    this.setState({dialogVisible: false});
-  };
-
-  /**
-   * Navigates to the screen specified in navigation parameters or simply go back tha stack.
-   * Saves in user preferences to not show the login banner again.
-   */
-  handleSuccess = () => {
-    const {navigation} = this.props;
-    // Do not show the home login banner again
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.homeShowBanner.key,
-      false,
-    );
-    if (this.nextScreen == null) navigation.goBack();
-    else navigation.replace(this.nextScreen);
-  };
-
-  /**
-   * Saves the screen to navigate to after a successful login if one was provided in navigation parameters
-   */
-  handleNavigationParams() {
-    const {route} = this.props;
-    if (route.params != null) {
-      if (route.params.nextScreen != null)
-        this.nextScreen = route.params.nextScreen;
-      else this.nextScreen = null;
-    }
-  }
-
-  /**
-   * Checks if the entered email is valid (matches the regex)
-   *
-   * @returns {boolean}
-   */
-  isEmailValid(): boolean {
-    const {email} = this.state;
-    return emailRegex.test(email);
-  }
-
-  /**
-   * Checks if we should tell the user his email is invalid.
-   * We should only show this if his email is invalid and has been checked when un-focusing the input
-   *
-   * @returns {boolean|boolean}
-   */
-  shouldShowEmailError(): boolean {
-    const {isEmailValidated} = this.state;
-    return isEmailValidated && !this.isEmailValid();
-  }
-
-  /**
-   * Checks if the user has entered a password
-   *
-   * @returns {boolean}
-   */
-  isPasswordValid(): boolean {
-    const {password} = this.state;
-    return password !== '';
-  }
-
-  /**
-   * Checks if we should tell the user his password is invalid.
-   * We should only show this if his password is invalid and has been checked when un-focusing the input
-   *
-   * @returns {boolean|boolean}
-   */
-  shouldShowPasswordError(): boolean {
-    const {isPasswordValidated} = this.state;
-    return isPasswordValidated && !this.isPasswordValid();
-  }
-
-  /**
-   * If the email and password are valid, and we are not loading a request, then the login button can be enabled
-   *
-   * @returns {boolean}
-   */
-  shouldEnableLogin(): boolean {
-    const {loading} = this.state;
-    return this.isEmailValid() && this.isPasswordValid() && !loading;
-  }
-
-  render(): React.Node {
-    const {mascotDialogVisible, dialogVisible, dialogError} = this.state;
         return (
             <LinearGradient
                 style={{
-          height: '100%',
+                    height: "100%"
                 }}
                 colors={['#9e0d18', '#530209']}
                 start={{x: 0, y: 0.1}}
                 end={{x: 0.1, y: 1}}>
                 <KeyboardAvoidingView
-          behavior="height"
+                    behavior={"height"}
                     contentContainerStyle={styles.container}
                     style={styles.container}
                     enabled
-          keyboardVerticalOffset={100}>
+                    keyboardVerticalOffset={100}
+                >
                     <CollapsibleScrollView>
-            <View style={{height: '100%'}}>{this.getMainCard()}</View>
+                        <View style={{height: "100%"}}>
+                            {this.getMainCard()}
+                        </View>
                         <MascotPopup
-              visible={mascotDialogVisible}
+                            visible={this.state.mascotDialogVisible}
-              title={i18n.t('screens.login.mascotDialog.title')}
+                            title={i18n.t("screens.login.mascotDialog.title")}
-              message={i18n.t('screens.login.mascotDialog.message')}
+                            message={i18n.t("screens.login.mascotDialog.message")}
-              icon="help"
+                            icon={"help"}
                             buttons={{
                                 action: null,
                                 cancel: {
-                  message: i18n.t('screens.login.mascotDialog.button'),
+                                    message: i18n.t("screens.login.mascotDialog.button"),
-                  icon: 'check',
+                                    icon: "check",
                                     onPress: this.hideMascotDialog,
-                },
+                                }
                             }}
                             emotion={MASCOT_STYLE.NORMAL}
                         />
                         <ErrorDialog
-              visible={dialogVisible}
+                            visible={this.state.dialogVisible}
                             onDismiss={this.hideErrorDialog}
-              errorCode={dialogError}
+                            errorCode={this.state.dialogError}
                         />
                     </CollapsibleScrollView>
                 </KeyboardAvoidingView>
@@ -443,4 +395,23 @@ class LoginScreen extends React.Component<PropsType, StateType> {
     }
 }
 
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    card: {
+        marginTop: 'auto',
+        marginBottom: 'auto',
+    },
+    header: {
+        fontSize: 36,
+        marginBottom: 48
+    },
+    textInput: {},
+    btnContainer: {
+        marginTop: 5,
+        marginBottom: 10,
+    }
+});
+
 export default withTheme(LoginScreen);

src/screens/Amicale/ProfileScreen.js

@@ -1,47 +1,31 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, StyleSheet, View} from 'react-native';
+import {FlatList, StyleSheet, View} from "react-native";
-import {
+import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
-  Avatar,
+import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
-  Button,
-  Card,
-  Divider,
-  List,
-  Paragraph,
-  withTheme,
-} from 'react-native-paper';
 import i18n from 'i18n-js';
-import {StackNavigationProp} from '@react-navigation/stack';
+import LogoutDialog from "../../components/Amicale/LogoutDialog";
-import AuthenticatedScreen from '../../components/Amicale/AuthenticatedScreen';
+import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
-import LogoutDialog from '../../components/Amicale/LogoutDialog';
+import type {cardList} from "../../components/Lists/CardList/CardList";
-import MaterialHeaderButtons, {
+import CardList from "../../components/Lists/CardList/CardList";
-  Item,
+import {StackNavigationProp} from "@react-navigation/stack";
-} from '../../components/Overrides/CustomHeaderButton';
+import type {CustomTheme} from "../../managers/ThemeManager";
-import CardList from '../../components/Lists/CardList/CardList';
+import AvailableWebsites from "../../constants/AvailableWebsites";
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot";
-import AvailableWebsites from '../../constants/AvailableWebsites';
+import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager";
-import Mascot, {MASCOT_STYLE} from '../../components/Mascot/Mascot';
+import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
-import ServicesManager, {SERVICES_KEY} from '../../managers/ServicesManager';
-import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
-import type {ServiceItemType} from '../../managers/ServicesManager';
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  theme: CustomThemeType,
+    theme: CustomTheme,
-};
+}
 
-type StateType = {
+type State = {
     dialogVisible: boolean,
-};
+}
 
-type ClubType = {
+type ProfileData = {
-  id: number,
-  name: string,
-  is_manager: boolean,
-};
-
-type ProfileDataType = {
     first_name: string,
     last_name: string,
     email: string,
@@ -50,59 +34,55 @@ type ProfileDataType = {
     branch: string,
     link: string,
     validity: boolean,
-  clubs: Array<ClubType>,
+    clubs: Array<Club>,
-};
+}
+type Club = {
+    id: number,
+    name: string,
+    is_manager: boolean,
+}
 
-const styles = StyleSheet.create({
+class ProfileScreen extends React.Component<Props, State> {
-  card: {
-    margin: 10,
-  },
-  icon: {
-    backgroundColor: 'transparent',
-  },
-  editButton: {
-    marginLeft: 'auto',
-  },
-});
 
-class ProfileScreen extends React.Component<PropsType, StateType> {
+    state = {
-  data: ProfileDataType;
-
-  flatListData: Array<{id: string}>;
-
-  amicaleDataset: Array<ServiceItemType>;
-
-  constructor(props: PropsType) {
-    super(props);
-    this.flatListData = [{id: '0'}, {id: '1'}, {id: '2'}, {id: '3'}];
-    const services = new ServicesManager(props.navigation);
-    this.amicaleDataset = services.getAmicaleServices([SERVICES_KEY.PROFILE]);
-    this.state = {
         dialogVisible: false,
     };
+
+    data: ProfileData;
+
+    flatListData: Array<{ id: string }>;
+    amicaleDataset: cardList;
+
+    constructor(props: Props) {
+        super(props);
+        this.flatListData = [
+            {id: '0'},
+            {id: '1'},
+            {id: '2'},
+            {id: '3'},
+        ]
+        const services = new ServicesManager(props.navigation);
+        this.amicaleDataset = services.getAmicaleServices([SERVICES_KEY.PROFILE]);
     }
 
     componentDidMount() {
-    const {navigation} = this.props;
+        this.props.navigation.setOptions({
-    navigation.setOptions({
             headerRight: this.getHeaderButton,
         });
     }
 
+    showDisconnectDialog = () => this.setState({dialogVisible: true});
+
+    hideDisconnectDialog = () => this.setState({dialogVisible: false});
+
     /**
      * Gets the logout header button
      *
      * @returns {*}
      */
-  getHeaderButton = (): React.Node => (
+    getHeaderButton = () => <MaterialHeaderButtons>
-    <MaterialHeaderButtons>
+        <Item title="logout" iconName="logout" onPress={this.showDisconnectDialog}/>
-      <Item
+    </MaterialHeaderButtons>;
-        title="logout"
-        iconName="logout"
-        onPress={this.showDisconnectDialog}
-      />
-    </MaterialHeaderButtons>
-  );
 
     /**
      * Gets the main screen component with the fetched data
@@ -110,12 +90,10 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      * @param data The data fetched from the server
      * @returns {*}
      */
-  getScreen = (data: Array<ProfileDataType | null>): React.Node => {
+    getScreen = (data: Array<{ [key: string]: any } | null>) => {
-    const {dialogVisible} = this.state;
+        if (data[0] != null) {
-    const {navigation} = this.props;
+            this.data = data[0];
-    // eslint-disable-next-line prefer-destructuring
+        }
-    if (data[0] != null) this.data = data[0];
-
         return (
             <View style={{flex: 1}}>
                 <CollapsibleFlatList
@@ -123,15 +101,15 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
                     data={this.flatListData}
                 />
                 <LogoutDialog
-          navigation={navigation}
+                    {...this.props}
-          visible={dialogVisible}
+                    visible={this.state.dialogVisible}
                     onDismiss={this.hideDisconnectDialog}
                 />
             </View>
-    );
+        )
     };
 
-  getRenderItem = ({item}: {item: {id: string}}): React.Node => {
+    getRenderItem = ({item}: { item: { id: string } }) => {
         switch (item.id) {
             case '0':
                 return this.getWelcomeCard();
@@ -149,8 +127,13 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      *
      * @returns {*}
      */
-  getServicesList(): React.Node {
+    getServicesList() {
-    return <CardList dataset={this.amicaleDataset} isHorizontal />;
+        return (
+            <CardList
+                dataset={this.amicaleDataset}
+                isHorizontal={true}
+            />
+        );
     }
 
     /**
@@ -158,44 +141,42 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      *
      * @returns {*}
      */
-  getWelcomeCard(): React.Node {
+    getWelcomeCard() {
-    const {navigation} = this.props;
         return (
             <Card style={styles.card}>
                 <Card.Title
-          title={i18n.t('screens.profile.welcomeTitle', {
+                    title={i18n.t("screens.profile.welcomeTitle", {name: this.data.first_name})}
-            name: this.data.first_name,
+                    left={() =>
-          })}
-          left={(): React.Node => (
                         <Mascot
                             style={{
-                width: 60,
+                                width: 60
                             }}
                             emotion={MASCOT_STYLE.COOL}
-              animated
+                            animated={true}
                             entryAnimation={{
-                animation: 'bounceIn',
+                                animation: "bounceIn",
-                duration: 1000,
+                                duration: 1000
                             }}
-            />
+                        />}
-          )}
                     titleStyle={{marginLeft: 10}}
                 />
                 <Card.Content>
-          <Divider />
+                    <Divider/>
-          <Paragraph>{i18n.t('screens.profile.welcomeDescription')}</Paragraph>
+                    <Paragraph>
+                        {i18n.t("screens.profile.welcomeDescription")}
+                    </Paragraph>
                     {this.getServicesList()}
-          <Paragraph>{i18n.t('screens.profile.welcomeFeedback')}</Paragraph>
+                    <Paragraph>
-          <Divider />
+                        {i18n.t("screens.profile.welcomeFeedback")}
+                    </Paragraph>
+                    <Divider/>
                     <Card.Actions>
                         <Button
                             icon="bug"
                             mode="contained"
-              onPress={() => {
+                            onPress={() => this.props.navigation.navigate('feedback')}
-                navigation.navigate('feedback');
-              }}
                             style={styles.editButton}>
-              {i18n.t('screens.feedback.homeButtonTitle')}
+                            {i18n.t("screens.feedback.homeButtonTitle")}
                         </Button>
                     </Card.Actions>
                 </Card.Content>
@@ -203,6 +184,16 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
         );
     }
 
+    /**
+     * Checks if the given field is available
+     *
+     * @param field The field to check
+     * @return {boolean}
+     */
+    isFieldAvailable(field: ?string) {
+        return field !== null;
+    }
+
     /**
      * Gets the given field value.
      * If the field does not have a value, returns a placeholder text
@@ -210,8 +201,10 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      * @param field The field to get the value from
      * @return {*}
      */
-  static getFieldValue(field: ?string): string {
+    getFieldValue(field: ?string) {
-    return field != null ? field : i18n.t('screens.profile.noData');
+        return this.isFieldAvailable(field)
+            ? field
+            : i18n.t("screens.profile.noData");
     }
 
     /**
@@ -221,21 +214,18 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      * @param icon The icon to use
      * @return {*}
      */
-  getPersonalListItem(field: ?string, icon: string): React.Node {
+    getPersonalListItem(field: ?string, icon: string) {
-    const {theme} = this.props;
+        let title = this.isFieldAvailable(field) ? this.getFieldValue(field) : ':(';
-    const title = field != null ? ProfileScreen.getFieldValue(field) : ':(';
+        let subtitle = this.isFieldAvailable(field) ? '' : this.getFieldValue(field);
-    const subtitle = field != null ? '' : ProfileScreen.getFieldValue(field);
         return (
             <List.Item
                 title={title}
                 description={subtitle}
-        left={({size}: {size: number}): React.Node => (
+                left={props => <List.Icon
-          <List.Icon
+                    {...props}
-            size={size}
                     icon={icon}
-            color={field != null ? null : theme.colors.textDisabled}
+                    color={this.isFieldAvailable(field) ? undefined : this.props.theme.colors.textDisabled}
-          />
+                />}
-        )}
             />
         );
     }
@@ -245,47 +235,40 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      *
      * @return {*}
      */
-  getPersonalCard(): React.Node {
+    getPersonalCard() {
-    const {theme, navigation} = this.props;
         return (
             <Card style={styles.card}>
                 <Card.Title
-          title={`${this.data.first_name} ${this.data.last_name}`}
+                    title={this.data.first_name + ' ' + this.data.last_name}
                     subtitle={this.data.email}
-          left={({size}: {size: number}): React.Node => (
+                    left={(props) => <Avatar.Icon
-            <Avatar.Icon
+                        {...props}
-              size={size}
                         icon="account"
-              color={theme.colors.primary}
+                        color={this.props.theme.colors.primary}
                         style={styles.icon}
-            />
+                    />}
-          )}
                 />
                 <Card.Content>
-          <Divider />
+                    <Divider/>
                     <List.Section>
-            <List.Subheader>
+                        <List.Subheader>{i18n.t("screens.profile.personalInformation")}</List.Subheader>
-              {i18n.t('screens.profile.personalInformation')}
+                        {this.getPersonalListItem(this.data.birthday, "cake-variant")}
-            </List.Subheader>
+                        {this.getPersonalListItem(this.data.phone, "phone")}
-            {this.getPersonalListItem(this.data.birthday, 'cake-variant')}
+                        {this.getPersonalListItem(this.data.email, "email")}
-            {this.getPersonalListItem(this.data.phone, 'phone')}
+                        {this.getPersonalListItem(this.data.branch, "school")}
-            {this.getPersonalListItem(this.data.email, 'email')}
-            {this.getPersonalListItem(this.data.branch, 'school')}
                     </List.Section>
-          <Divider />
+                    <Divider/>
                     <Card.Actions>
                         <Button
                             icon="account-edit"
                             mode="contained"
-              onPress={() => {
+                            onPress={() => this.props.navigation.navigate("website", {
-                navigation.navigate('website', {
                                 host: AvailableWebsites.websites.AMICALE,
                                 path: this.data.link,
-                  title: i18n.t('screens.websites.amicale'),
+                                title: i18n.t('screens.websites.amicale')
-                });
+                            })}
-              }}
                             style={styles.editButton}>
-              {i18n.t('screens.profile.editInformation')}
+                            {i18n.t("screens.profile.editInformation")}
                         </Button>
                     </Card.Actions>
                 </Card.Content>
@@ -298,24 +281,21 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      *
      * @return {*}
      */
-  getClubCard(): React.Node {
+    getClubCard() {
-    const {theme} = this.props;
         return (
             <Card style={styles.card}>
                 <Card.Title
-          title={i18n.t('screens.profile.clubs')}
+                    title={i18n.t("screens.profile.clubs")}
-          subtitle={i18n.t('screens.profile.clubsSubtitle')}
+                    subtitle={i18n.t("screens.profile.clubsSubtitle")}
-          left={({size}: {size: number}): React.Node => (
+                    left={(props) => <Avatar.Icon
-            <Avatar.Icon
+                        {...props}
-              size={size}
                         icon="account-group"
-              color={theme.colors.primary}
+                        color={this.props.theme.colors.primary}
                         style={styles.icon}
-            />
+                    />}
-          )}
                 />
                 <Card.Content>
-          <Divider />
+                    <Divider/>
                     {this.getClubList(this.data.clubs)}
                 </Card.Content>
             </Card>
@@ -327,21 +307,18 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      *
      * @return {*}
      */
-  getMembershipCar(): React.Node {
+    getMembershipCar() {
-    const {theme} = this.props;
         return (
             <Card style={styles.card}>
                 <Card.Title
-          title={i18n.t('screens.profile.membership')}
+                    title={i18n.t("screens.profile.membership")}
-          subtitle={i18n.t('screens.profile.membershipSubtitle')}
+                    subtitle={i18n.t("screens.profile.membershipSubtitle")}
-          left={({size}: {size: number}): React.Node => (
+                    left={(props) => <Avatar.Icon
-            <Avatar.Icon
+                        {...props}
-              size={size}
                         icon="credit-card"
-              color={theme.colors.primary}
+                        color={this.props.theme.colors.primary}
                         style={styles.icon}
-            />
+                    />}
-          )}
                 />
                 <Card.Content>
                     <List.Section>
@@ -357,106 +334,81 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
      *
      * @return {*}
      */
-  getMembershipItem(state: boolean): React.Node {
+    getMembershipItem(state: boolean) {
-    const {theme} = this.props;
         return (
             <List.Item
-        title={
+                title={state ? i18n.t("screens.profile.membershipPayed") : i18n.t("screens.profile.membershipNotPayed")}
-          state
+                left={props => <List.Icon
-            ? i18n.t('screens.profile.membershipPayed')
+                    {...props}
-            : i18n.t('screens.profile.membershipNotPayed')
+                    color={state ? this.props.theme.colors.success : this.props.theme.colors.danger}
-        }
-        left={({size}: {size: number}): React.Node => (
-          <List.Icon
-            size={size}
-            color={state ? theme.colors.success : theme.colors.danger}
                     icon={state ? 'check' : 'close'}
-          />
+                />}
-        )}
             />
         );
     }
 
+    /**
+     * Opens the club details screen for the club of given ID
+     * @param id The club's id to open
+     */
+    openClubDetailsScreen(id: number) {
+        this.props.navigation.navigate("club-information", {clubId: id});
+    }
+
     /**
      * Gets a list item for the club list
      *
      * @param item The club to render
      * @return {*}
      */
-  getClubListItem = ({item}: {item: ClubType}): React.Node => {
+    clubListItem = ({item}: { item: Club }) => {
-    const {theme} = this.props;
+        const onPress = () => this.openClubDetailsScreen(item.id);
-    const onPress = () => {
+        let description = i18n.t("screens.profile.isMember");
-      this.openClubDetailsScreen(item.id);
+        let icon = (props) => <List.Icon {...props} icon="chevron-right"/>;
-    };
-    let description = i18n.t('screens.profile.isMember');
-    let icon = ({size, color}: {size: number, color: string}): React.Node => (
-      <List.Icon size={size} color={color} icon="chevron-right" />
-    );
         if (item.is_manager) {
-      description = i18n.t('screens.profile.isManager');
+            description = i18n.t("screens.profile.isManager");
-      icon = ({size}: {size: number}): React.Node => (
+            icon = (props) => <List.Icon {...props} icon="star" color={this.props.theme.colors.primary}/>;
-        <List.Icon size={size} icon="star" color={theme.colors.primary} />
-      );
         }
-    return (
+        return <List.Item
-      <List.Item
             title={item.name}
             description={description}
             left={icon}
             onPress={onPress}
-      />
+        />;
-    );
     };
 
+    clubKeyExtractor = (item: Club) => item.name;
+
+    sortClubList = (a: Club, b: Club) => a.is_manager ? -1 : 1;
+
     /**
      * Renders the list of clubs the user is part of
      *
      * @param list The club list
      * @return {*}
      */
-  getClubList(list: Array<ClubType>): React.Node {
+    getClubList(list: Array<Club>) {
         list.sort(this.sortClubList);
         return (
+            //$FlowFixMe
             <FlatList
-        renderItem={this.getClubListItem}
+                renderItem={this.clubListItem}
                 keyExtractor={this.clubKeyExtractor}
                 data={list}
             />
         );
     }
 
-  clubKeyExtractor = (item: ClubType): string => item.name;
+    render() {
-
-  sortClubList = (a: ClubType): number => (a.is_manager ? -1 : 1);
-
-  showDisconnectDialog = () => {
-    this.setState({dialogVisible: true});
-  };
-
-  hideDisconnectDialog = () => {
-    this.setState({dialogVisible: false});
-  };
-
-  /**
-   * Opens the club details screen for the club of given ID
-   * @param id The club's id to open
-   */
-  openClubDetailsScreen(id: number) {
-    const {navigation} = this.props;
-    navigation.navigate('club-information', {clubId: id});
-  }
-
-  render(): React.Node {
-    const {navigation} = this.props;
         return (
             <AuthenticatedScreen
-        navigation={navigation}
+                {...this.props}
                 requests={[
                     {
                         link: 'user/profile',
                         params: {},
                         mandatory: true,
-          },
+                    }
                 ]}
                 renderFunction={this.getScreen}
             />
@@ -464,4 +416,17 @@ class ProfileScreen extends React.Component<PropsType, StateType> {
     }
 }
 
+const styles = StyleSheet.create({
+    card: {
+        margin: 10,
+    },
+    icon: {
+        backgroundColor: 'transparent'
+    },
+    editButton: {
+        marginLeft: 'auto'
+    }
+
+});
+
 export default withTheme(ProfileScreen);

src/screens/Game/Shapes/BaseShape.js

@@ -1,13 +1,13 @@
 // @flow
 
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
 
-export type CoordinatesType = {
+export type Coordinates = {
     x: number,
     y: number,
-};
+}
 
-export type ShapeType = Array<Array<number>>;
+type Shape = Array<Array<number>>;
 
 /**
  * Abstract class used to represent a BaseShape.
@@ -15,18 +15,16 @@ export type ShapeType = Array<Array<number>>;
  * and in methods to implement
  */
 export default class BaseShape {
-  #currentShape: ShapeType;
 
+    #currentShape: Shape;
     #rotation: number;
-
+    position: Coordinates;
-  position: CoordinatesType;
+    theme: CustomTheme;
-
-  theme: CustomThemeType;
 
     /**
      * Prevent instantiation if classname is BaseShape to force class to be abstract
      */
-  constructor(theme: CustomThemeType) {
+    constructor(theme: CustomTheme) {
         if (this.constructor === BaseShape)
             throw new Error("Abstract class can't be instantiated");
         this.theme = theme;
@@ -39,7 +37,6 @@ export default class BaseShape {
      * Gets this shape's color.
      * Must be implemented by child class
      */
-  // eslint-disable-next-line class-methods-use-this
     getColor(): string {
         throw new Error("Method 'getColor()' must be implemented");
     }
@@ -50,15 +47,14 @@ export default class BaseShape {
      *
      * Used by tests to read private fields
      */
-  // eslint-disable-next-line class-methods-use-this
+    getShapes(): Array<Shape> {
-  getShapes(): Array<ShapeType> {
         throw new Error("Method 'getShapes()' must be implemented");
     }
 
     /**
      * Gets this object's current shape.
      */
-  getCurrentShape(): ShapeType {
+    getCurrentShape(): Shape {
         return this.#currentShape;
     }
 
@@ -67,20 +63,17 @@ export default class BaseShape {
      * This will return an array of coordinates representing the positions of the cells used by this object.
      *
      * @param isAbsolute Should we take into account the current position of the object?
-   * @return {Array<CoordinatesType>} This object cells coordinates
+     * @return {Array<Coordinates>} This object cells coordinates
      */
-  getCellsCoordinates(isAbsolute: boolean): Array<CoordinatesType> {
+    getCellsCoordinates(isAbsolute: boolean): Array<Coordinates> {
-    const coordinates = [];
+        let coordinates = [];
-    for (let row = 0; row < this.#currentShape.length; row += 1) {
+        for (let row = 0; row < this.#currentShape.length; row++) {
-      for (let col = 0; col < this.#currentShape[row].length; col += 1) {
+            for (let col = 0; col < this.#currentShape[row].length; col++) {
-        if (this.#currentShape[row][col] === 1) {
+                if (this.#currentShape[row][col] === 1)
-          if (isAbsolute) {
+                    if (isAbsolute)
-            coordinates.push({
+                        coordinates.push({x: this.position.x + col, y: this.position.y + row});
-              x: this.position.x + col,
+                    else
-              y: this.position.y + row,
+                        coordinates.push({x: col, y: row});
-            });
-          } else coordinates.push({x: col, y: row});
-        }
             }
         }
         return coordinates;
@@ -92,10 +85,14 @@ export default class BaseShape {
      * @param isForward Should we rotate clockwise?
      */
     rotate(isForward: boolean) {
-    if (isForward) this.#rotation += 1;
+        if (isForward)
-    else this.#rotation -= 1;
+            this.#rotation++;
-    if (this.#rotation > 3) this.#rotation = 0;
+        else
-    else if (this.#rotation < 0) this.#rotation = 3;
+            this.#rotation--;
+        if (this.#rotation > 3)
+            this.#rotation = 0;
+        else if (this.#rotation < 0)
+            this.#rotation = 3;
         this.#currentShape = this.getShapes()[this.#rotation];
     }
 
@@ -109,4 +106,5 @@ export default class BaseShape {
         this.position.x += x;
         this.position.y += y;
     }
+
 }

src/screens/Game/Shapes/ShapeI.js

@@ -1,11 +1,11 @@
 // @flow
 
-import BaseShape from './BaseShape';
+import BaseShape from "./BaseShape";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {ShapeType} from './BaseShape';
 
 export default class ShapeI extends BaseShape {
-  constructor(theme: CustomThemeType) {
+
+    constructor(theme: CustomTheme) {
         super(theme);
         this.position.x = 3;
     }
@@ -14,8 +14,7 @@ export default class ShapeI extends BaseShape {
         return this.theme.colors.tetrisI;
     }
 
-  // eslint-disable-next-line class-methods-use-this
+    getShapes() {
-  getShapes(): Array<ShapeType> {
         return [
             [
                 [0, 0, 0, 0],

src/screens/Game/Shapes/ShapeJ.js

@@ -1,11 +1,11 @@
 // @flow
 
-import BaseShape from './BaseShape';
+import BaseShape from "./BaseShape";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {ShapeType} from './BaseShape';
 
 export default class ShapeJ extends BaseShape {
-  constructor(theme: CustomThemeType) {
+
+    constructor(theme: CustomTheme) {
         super(theme);
         this.position.x = 3;
     }
@@ -14,8 +14,7 @@ export default class ShapeJ extends BaseShape {
         return this.theme.colors.tetrisJ;
     }
 
-  // eslint-disable-next-line class-methods-use-this
+    getShapes() {
-  getShapes(): Array<ShapeType> {
         return [
             [
                 [1, 0, 0],

src/screens/Game/Shapes/ShapeL.js

@@ -1,11 +1,11 @@
 // @flow
 
-import BaseShape from './BaseShape';
+import BaseShape from "./BaseShape";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {ShapeType} from './BaseShape';
 
 export default class ShapeL extends BaseShape {
-  constructor(theme: CustomThemeType) {
+
+    constructor(theme: CustomTheme) {
         super(theme);
         this.position.x = 3;
     }
@@ -14,8 +14,7 @@ export default class ShapeL extends BaseShape {
         return this.theme.colors.tetrisL;
     }
 
-  // eslint-disable-next-line class-methods-use-this
+    getShapes() {
-  getShapes(): Array<ShapeType> {
         return [
             [
                 [0, 0, 1],

src/screens/Game/Shapes/ShapeO.js

@@ -1,11 +1,11 @@
 // @flow
 
-import BaseShape from './BaseShape';
+import BaseShape from "./BaseShape";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {ShapeType} from './BaseShape';
 
 export default class ShapeO extends BaseShape {
-  constructor(theme: CustomThemeType) {
+
+    constructor(theme: CustomTheme) {
         super(theme);
         this.position.x = 4;
     }
@@ -14,8 +14,7 @@ export default class ShapeO extends BaseShape {
         return this.theme.colors.tetrisO;
     }
 
-  // eslint-disable-next-line class-methods-use-this
+    getShapes() {
-  getShapes(): Array<ShapeType> {
         return [
             [
                 [1, 1],

src/screens/Game/Shapes/ShapeS.js

@@ -1,11 +1,11 @@
 // @flow
 
-import BaseShape from './BaseShape';
+import BaseShape from "./BaseShape";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {ShapeType} from './BaseShape';
 
 export default class ShapeS extends BaseShape {
-  constructor(theme: CustomThemeType) {
+
+    constructor(theme: CustomTheme) {
         super(theme);
         this.position.x = 3;
     }
@@ -14,8 +14,7 @@ export default class ShapeS extends BaseShape {
         return this.theme.colors.tetrisS;
     }
 
-  // eslint-disable-next-line class-methods-use-this
+    getShapes() {
-  getShapes(): Array<ShapeType> {
         return [
             [
                 [0, 1, 1],

src/screens/Game/Shapes/ShapeT.js

@@ -1,11 +1,11 @@
 // @flow
 
-import BaseShape from './BaseShape';
+import BaseShape from "./BaseShape";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {ShapeType} from './BaseShape';
 
 export default class ShapeT extends BaseShape {
-  constructor(theme: CustomThemeType) {
+
+    constructor(theme: CustomTheme) {
         super(theme);
         this.position.x = 3;
     }
@@ -14,8 +14,7 @@ export default class ShapeT extends BaseShape {
         return this.theme.colors.tetrisT;
     }
 
-  // eslint-disable-next-line class-methods-use-this
+    getShapes() {
-  getShapes(): Array<ShapeType> {
         return [
             [
                 [0, 1, 0],

src/screens/Game/Shapes/ShapeZ.js

@@ -1,11 +1,11 @@
 // @flow
 
-import BaseShape from './BaseShape';
+import BaseShape from "./BaseShape";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {ShapeType} from './BaseShape';
 
 export default class ShapeZ extends BaseShape {
-  constructor(theme: CustomThemeType) {
+
+    constructor(theme: CustomTheme) {
         super(theme);
         this.position.x = 3;
     }
@@ -14,8 +14,7 @@ export default class ShapeZ extends BaseShape {
         return this.theme.colors.tetrisZ;
     }
 
-  // eslint-disable-next-line class-methods-use-this
+    getShapes() {
-  getShapes(): Array<ShapeType> {
         return [
             [
                 [1, 1, 0],

src/screens/Game/__tests__/GridManager.test.js

@@ -1,20 +1,19 @@
-/* eslint-disable */
-
 import React from 'react';
-import GridManager from '../logic/GridManager';
+import GridManager from "../logic/GridManager";
-import ScoreManager from '../logic/ScoreManager';
+import ScoreManager from "../logic/ScoreManager";
-import Piece from '../logic/Piece';
+import Piece from "../logic/Piece";
 
 let colors = {
-  tetrisBackground: '#000002',
+    tetrisBackground: "#000002"
 };
 
-jest.mock('../ScoreManager');
+jest.mock("../ScoreManager");
 
 afterAll(() => {
     jest.restoreAllMocks();
 });
 
+
 test('getEmptyLine', () => {
     let g = new GridManager(2, 2, colors);
     expect(g.getEmptyLine(2)).toStrictEqual([
@@ -90,11 +89,9 @@ test('clearLines', () => {
 
 test('freezeTetromino', () => {
     let g = new GridManager(2, 2, colors);
-  let spy1 = jest
+    let spy1 = jest.spyOn(GridManager.prototype, 'getLinesToClear')
-    .spyOn(GridManager.prototype, 'getLinesToClear')
         .mockImplementation(() => {});
-  let spy2 = jest
+    let spy2 = jest.spyOn(GridManager.prototype, 'clearLines')
-    .spyOn(GridManager.prototype, 'clearLines')
         .mockImplementation(() => {});
     g.freezeTetromino(new Piece({}), null);
 

src/screens/Game/__tests__/Piece.test.js

@@ -1,22 +1,17 @@
-/* eslint-disable */
-
 import React from 'react';
-import Piece from '../logic/Piece';
+import Piece from "../logic/Piece";
-import ShapeI from '../Shapes/ShapeI';
+import ShapeI from "../Shapes/ShapeI";
 
 let colors = {
-  tetrisI: '#000001',
+    tetrisI: "#000001",
-  tetrisBackground: '#000002',
+    tetrisBackground: "#000002"
 };
 
-jest.mock('../Shapes/ShapeI');
+jest.mock("../Shapes/ShapeI");
 
 beforeAll(() => {
-  jest
+    jest.spyOn(Piece.prototype, 'getRandomShape')
-    .spyOn(Piece.prototype, 'getRandomShape')
+        .mockImplementation((colors: Object) => {return new ShapeI(colors);});
-    .mockImplementation((colors: Object) => {
-      return new ShapeI(colors);
-    });
 });
 
 afterAll(() => {
@@ -26,11 +21,8 @@ afterAll(() => {
 test('isPositionValid', () => {
     let x = 0;
     let y = 0;
-  let spy = jest
+    let spy = jest.spyOn(ShapeI.prototype, 'getCellsCoordinates')
-    .spyOn(ShapeI.prototype, 'getCellsCoordinates')
+        .mockImplementation(() => {return [{x: x, y: y}];});
-    .mockImplementation(() => {
-      return [{x: x, y: y}];
-    });
     let grid = [
         [{isEmpty: true}, {isEmpty: true}],
         [{isEmpty: true}, {isEmpty: false}],
@@ -39,26 +31,19 @@ test('isPositionValid', () => {
 
     let p = new Piece(colors);
     expect(p.isPositionValid(grid, size, size)).toBeTrue();
-  x = 1;
+    x = 1; y = 0;
-  y = 0;
     expect(p.isPositionValid(grid, size, size)).toBeTrue();
-  x = 0;
+    x = 0; y = 1;
-  y = 1;
     expect(p.isPositionValid(grid, size, size)).toBeTrue();
-  x = 1;
+    x = 1; y = 1;
-  y = 1;
     expect(p.isPositionValid(grid, size, size)).toBeFalse();
-  x = 2;
+    x = 2; y = 0;
-  y = 0;
     expect(p.isPositionValid(grid, size, size)).toBeFalse();
-  x = -1;
+    x = -1; y = 0;
-  y = 0;
     expect(p.isPositionValid(grid, size, size)).toBeFalse();
-  x = 0;
+    x = 0; y = 2;
-  y = 2;
     expect(p.isPositionValid(grid, size, size)).toBeFalse();
-  x = 0;
+    x = 0; y = -1;
-  y = -1;
     expect(p.isPositionValid(grid, size, size)).toBeFalse();
 
     spy.mockRestore();
@@ -68,15 +53,12 @@ test('tryMove', () => {
     let p = new Piece(colors);
     const callbackMock = jest.fn();
     let isValid = true;
-  let spy1 = jest
+    let spy1 = jest.spyOn(Piece.prototype, 'isPositionValid')
-    .spyOn(Piece.prototype, 'isPositionValid')
+        .mockImplementation(() => {return isValid;});
-    .mockImplementation(() => {
+    let spy2 = jest.spyOn(Piece.prototype, 'removeFromGrid')
-      return isValid;
+        .mockImplementation(() => {});
-    });
+    let spy3 = jest.spyOn(Piece.prototype, 'toGrid')
-  let spy2 = jest
-    .spyOn(Piece.prototype, 'removeFromGrid')
         .mockImplementation(() => {});
-  let spy3 = jest.spyOn(Piece.prototype, 'toGrid').mockImplementation(() => {});
 
     expect(p.tryMove(-1, 0, null, null, null, callbackMock)).toBeTrue();
     isValid = false;
@@ -100,19 +82,16 @@ test('tryMove', () => {
 test('tryRotate', () => {
     let p = new Piece(colors);
     let isValid = true;
-  let spy1 = jest
+    let spy1 = jest.spyOn(Piece.prototype, 'isPositionValid')
-    .spyOn(Piece.prototype, 'isPositionValid')
+        .mockImplementation(() => {return isValid;});
-    .mockImplementation(() => {
+    let spy2 = jest.spyOn(Piece.prototype, 'removeFromGrid')
-      return isValid;
+        .mockImplementation(() => {});
-    });
+    let spy3 = jest.spyOn(Piece.prototype, 'toGrid')
-  let spy2 = jest
-    .spyOn(Piece.prototype, 'removeFromGrid')
         .mockImplementation(() => {});
-  let spy3 = jest.spyOn(Piece.prototype, 'toGrid').mockImplementation(() => {});
 
-  expect(p.tryRotate(null, null, null)).toBeTrue();
+    expect(p.tryRotate( null, null, null)).toBeTrue();
     isValid = false;
-  expect(p.tryRotate(null, null, null)).toBeFalse();
+    expect(p.tryRotate( null, null, null)).toBeFalse();
 
     expect(spy2).toBeCalledTimes(2);
     expect(spy3).toBeCalledTimes(2);
@@ -122,17 +101,14 @@ test('tryRotate', () => {
     spy3.mockRestore();
 });
 
+
 test('toGrid', () => {
     let x = 0;
     let y = 0;
-  let spy1 = jest
+    let spy1 = jest.spyOn(ShapeI.prototype, 'getCellsCoordinates')
-    .spyOn(ShapeI.prototype, 'getCellsCoordinates')
+        .mockImplementation(() => {return [{x: x, y: y}];});
-    .mockImplementation(() => {
+    let spy2 = jest.spyOn(ShapeI.prototype, 'getColor')
-      return [{x: x, y: y}];
+        .mockImplementation(() => {return colors.tetrisI;});
-    });
-  let spy2 = jest.spyOn(ShapeI.prototype, 'getColor').mockImplementation(() => {
-    return colors.tetrisI;
-  });
     let grid = [
         [{isEmpty: true}, {isEmpty: true}],
         [{isEmpty: true}, {isEmpty: true}],
@@ -165,18 +141,11 @@ test('removeFromGrid', () => {
             {color: colors.tetrisBackground, isEmpty: true},
         ],
     ];
-  let oldCoord = [
+    let oldCoord = [{x: 0, y: 0}, {x: 1, y: 0}];
-    {x: 0, y: 0},
+    let spy1 = jest.spyOn(ShapeI.prototype, 'getCellsCoordinates')
-    {x: 1, y: 0},
+        .mockImplementation(() => {return oldCoord;});
-  ];
+    let spy2 = jest.spyOn(ShapeI.prototype, 'getColor')
-  let spy1 = jest
+        .mockImplementation(() => {return colors.tetrisI;});
-    .spyOn(ShapeI.prototype, 'getCellsCoordinates')
-    .mockImplementation(() => {
-      return oldCoord;
-    });
-  let spy2 = jest.spyOn(ShapeI.prototype, 'getColor').mockImplementation(() => {
-    return colors.tetrisI;
-  });
     let p = new Piece(colors);
     p.removeFromGrid(gridOld);
     expect(gridOld).toStrictEqual(gridNew);

src/screens/Game/__tests__/ScoreManager.test.js

@@ -1,7 +1,6 @@
-/* eslint-disable */
-
 import React from 'react';
-import ScoreManager from '../logic/ScoreManager';
+import ScoreManager from "../logic/ScoreManager";
+
 
 test('incrementScore', () => {
     let scoreManager = new ScoreManager();

src/screens/Game/__tests__/Shape.test.js

@@ -1,8 +1,6 @@
-/* eslint-disable */
-
 import React from 'react';
-import BaseShape from '../Shapes/BaseShape';
+import BaseShape from "../Shapes/BaseShape";
-import ShapeI from '../Shapes/ShapeI';
+import ShapeI from "../Shapes/ShapeI";
 
 const colors = {
     tetrisI: '#000001',
@@ -24,7 +22,7 @@ test('constructor', () => {
     expect(T.getColor()).toBe(colors.tetrisI);
 });
 
-test('move', () => {
+test("move", () => {
     let T = new ShapeI(colors);
     T.move(0, 1);
     expect(T.position.x).toBe(3);

src/screens/Game/components/CellComponent.js

@@ -3,17 +3,19 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import {withTheme} from 'react-native-paper';
+import type {CustomTheme} from "../../../managers/ThemeManager";
 
-export type CellType = {color: string, isEmpty: boolean, key: string};
+export type Cell = {color: string, isEmpty: boolean, key: string};
 
-type PropsType = {
+type Props = {
-  cell: CellType,
+    cell: Cell,
-};
+    theme: CustomTheme,
+}
 
-class CellComponent extends React.PureComponent<PropsType> {
+class CellComponent extends React.PureComponent<Props> {
-  render(): React.Node {
+
-    const {props} = this;
+    render() {
-    const item = props.cell;
+        const item = this.props.cell;
         return (
             <View
                 style={{
@@ -27,6 +29,8 @@ class CellComponent extends React.PureComponent<PropsType> {
             />
         );
     }
+
+
 }
 
 export default withTheme(CellComponent);

src/screens/Game/components/GridComponent.js

@@ -3,50 +3,51 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import {withTheme} from 'react-native-paper';
-import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {Cell} from "./CellComponent";
-import type {CellType} from './CellComponent';
+import CellComponent from "./CellComponent";
-import CellComponent from './CellComponent';
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
 
-export type GridType = Array<Array<CellComponent>>;
+export type Grid = Array<Array<CellComponent>>;
 
-type PropsType = {
+type Props = {
-  grid: Array<Array<CellType>>,
+    grid: Array<Array<Object>>,
     height: number,
     width: number,
     style: ViewStyle,
-};
+}
 
-class GridComponent extends React.Component<PropsType> {
+class GridComponent extends React.Component<Props> {
-  getRow(rowNumber: number): React.Node {
+
-    const {grid} = this.props;
+    getRow(rowNumber: number) {
+        let cells = this.props.grid[rowNumber].map(this.getCellRender);
         return (
-      <View style={{flexDirection: 'row'}} key={rowNumber.toString()}>
+            <View
-        {grid[rowNumber].map(this.getCellRender)}
+                style={{flexDirection: 'row',}}
+                key={rowNumber.toString()}
+            >
+                {cells}
             </View>
         );
     }
 
-  getCellRender = (item: CellType): React.Node => {
+    getCellRender = (item: Cell) => {
-    return <CellComponent cell={item} key={item.key} />;
+        return <CellComponent cell={item} key={item.key}/>;
     };
 
-  getGrid(): React.Node {
+    getGrid() {
-    const {height} = this.props;
+        let rows = [];
-    const rows = [];
+        for (let i = 0; i < this.props.height; i++) {
-    for (let i = 0; i < height; i += 1) {
             rows.push(this.getRow(i));
         }
         return rows;
     }
 
-  render(): React.Node {
+    render() {
-    const {style, width, height} = this.props;
         return (
-      <View
+            <View style={{
-        style={{
+                aspectRatio: this.props.width / this.props.height,
-          aspectRatio: width / height,
                 borderRadius: 4,
-          ...style,
+                ...this.props.style
             }}>
                 {this.getGrid()}
             </View>

src/screens/Game/components/Preview.js

@@ -3,28 +3,27 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import {withTheme} from 'react-native-paper';
-import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {Grid} from "./GridComponent";
-import type {GridType} from './GridComponent';
+import GridComponent from "./GridComponent";
-import GridComponent from './GridComponent';
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
 
-type PropsType = {
+type Props = {
-  items: Array<GridType>,
+    items: Array<Grid>,
-  style: ViewStyle,
+    style: ViewStyle
-};
+}
 
-class Preview extends React.PureComponent<PropsType> {
+class Preview extends React.PureComponent<Props> {
-  getGrids(): React.Node {
+
-    const {items} = this.props;
+    getGrids() {
-    const grids = [];
+        let grids = [];
-    items.forEach((item: GridType, index: number) => {
+        for (let i = 0; i < this.props.items.length; i++) {
-      grids.push(Preview.getGridRender(item, index));
+            grids.push(this.getGridRender(this.props.items[i], i));
-    });
+        }
         return grids;
     }
 
-  static getGridRender(item: GridType, index: number): React.Node {
+    getGridRender(item: Grid, index: number) {
-    return (
+        return <GridComponent
-      <GridComponent
             width={item[0].length}
             height={item.length}
             grid={item}
@@ -34,17 +33,21 @@ class Preview extends React.PureComponent<PropsType> {
                 marginBottom: 5,
             }}
             key={index.toString()}
-      />
+        />;
-    );
+    };
-  }
 
-  render(): React.Node {
+    render() {
-    const {style, items} = this.props;
+        if (this.props.items.length > 0) {
-    if (items.length > 0) {
+            return (
-      return <View style={style}>{this.getGrids()}</View>;
+                <View style={this.props.style}>
-    }
+                    {this.getGrids()}
+                </View>
+            );
+        } else
             return null;
     }
+
+
 }
 
 export default withTheme(Preview);

src/screens/Game/logic/GameLogic.js

@@ -1,318 +1,243 @@
 // @flow
 
-import Piece from './Piece';
+import Piece from "./Piece";
-import ScoreManager from './ScoreManager';
+import ScoreManager from "./ScoreManager";
-import GridManager from './GridManager';
+import GridManager from "./GridManager";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {GridType} from '../components/GridComponent';
-
-export type TickCallbackType = (
-  score: number,
-  level: number,
-  grid: GridType,
-) => void;
-
-export type ClockCallbackType = (time: number) => void;
-
-export type EndCallbackType = (
-  time: number,
-  score: number,
-  isRestart: boolean,
-) => void;
-
-export type MovementCallbackType = (grid: GridType, score?: number) => void;
 
 export default class GameLogic {
-  static levelTicks = [1000, 800, 600, 400, 300, 200, 150, 100];
 
-  scoreManager: ScoreManager;
+    static levelTicks = [
+        1000,
+        800,
+        600,
+        400,
+        300,
+        200,
+        150,
+        100,
+    ];
 
-  gridManager: GridManager;
+    #scoreManager: ScoreManager;
+    #gridManager: GridManager;
 
-  height: number;
+    #height: number;
+    #width: number;
 
-  width: number;
+    #gameRunning: boolean;
+    #gamePaused: boolean;
+    #gameTime: number;
 
-  gameRunning: boolean;
+    #currentObject: Piece;
 
-  gamePaused: boolean;
+    #gameTick: number;
+    #gameTickInterval: IntervalID;
+    #gameTimeInterval: IntervalID;
 
-  gameTime: number;
+    #pressInInterval: TimeoutID;
+    #isPressedIn: boolean;
+    #autoRepeatActivationDelay: number;
+    #autoRepeatDelay: number;
 
-  currentObject: Piece;
+    #nextPieces: Array<Piece>;
+    #nextPiecesCount: number;
 
-  gameTick: number;
+    #onTick: Function;
+    #onClock: Function;
+    endCallback: Function;
 
-  gameTickInterval: IntervalID;
+    #theme: CustomTheme;
 
-  gameTimeInterval: IntervalID;
+    constructor(height: number, width: number, theme: CustomTheme) {
-
+        this.#height = height;
-  pressInInterval: TimeoutID;
+        this.#width = width;
-
+        this.#gameRunning = false;
-  isPressedIn: boolean;
+        this.#gamePaused = false;
-
+        this.#theme = theme;
-  autoRepeatActivationDelay: number;
+        this.#autoRepeatActivationDelay = 300;
-
+        this.#autoRepeatDelay = 50;
-  autoRepeatDelay: number;
+        this.#nextPieces = [];
-
+        this.#nextPiecesCount = 3;
-  nextPieces: Array<Piece>;
+        this.#scoreManager = new ScoreManager();
-
+        this.#gridManager = new GridManager(this.getWidth(), this.getHeight(), this.#theme);
-  nextPiecesCount: number;
-
-  tickCallback: TickCallbackType;
-
-  clockCallback: ClockCallbackType;
-
-  endCallback: EndCallbackType;
-
-  theme: CustomThemeType;
-
-  constructor(height: number, width: number, theme: CustomThemeType) {
-    this.height = height;
-    this.width = width;
-    this.gameRunning = false;
-    this.gamePaused = false;
-    this.theme = theme;
-    this.autoRepeatActivationDelay = 300;
-    this.autoRepeatDelay = 50;
-    this.nextPieces = [];
-    this.nextPiecesCount = 3;
-    this.scoreManager = new ScoreManager();
-    this.gridManager = new GridManager(
-      this.getWidth(),
-      this.getHeight(),
-      this.theme,
-    );
     }
 
     getHeight(): number {
-    return this.height;
+        return this.#height;
     }
 
     getWidth(): number {
-    return this.width;
+        return this.#width;
     }
 
-  getCurrentGrid(): GridType {
+    getCurrentGrid() {
-    return this.gridManager.getCurrentGrid();
+        return this.#gridManager.getCurrentGrid();
+    }
+
+    isGameRunning(): boolean {
+        return this.#gameRunning;
     }
 
     isGamePaused(): boolean {
-    return this.gamePaused;
+        return this.#gamePaused;
     }
 
-  onFreeze = () => {
+    onFreeze() {
-    this.gridManager.freezeTetromino(this.currentObject, this.scoreManager);
+        this.#gridManager.freezeTetromino(this.#currentObject, this.#scoreManager);
         this.createTetromino();
-  };
+    }
 
     setNewGameTick(level: number) {
-    if (level >= GameLogic.levelTicks.length) return;
+        if (level >= GameLogic.levelTicks.length)
-    this.gameTick = GameLogic.levelTicks[level];
+            return;
-    this.stopTick();
+        this.#gameTick = GameLogic.levelTicks[level];
-    this.startTick();
+        clearInterval(this.#gameTickInterval);
+        this.#gameTickInterval = setInterval(this.#onTick, this.#gameTick);
     }
 
-  startClock() {
+    onTick(callback: Function) {
-    this.gameTimeInterval = setInterval(() => {
+        this.#currentObject.tryMove(0, 1,
-      this.onClock(this.clockCallback);
+            this.#gridManager.getCurrentGrid(), this.getWidth(), this.getHeight(),
-    }, 1000);
+            () => this.onFreeze());
-  }
-
-  startTick() {
-    this.gameTickInterval = setInterval(() => {
-      this.onTick(this.tickCallback);
-    }, this.gameTick);
-  }
-
-  stopClock() {
-    clearInterval(this.gameTimeInterval);
-  }
-
-  stopTick() {
-    clearInterval(this.gameTickInterval);
-  }
-
-  stopGameTime() {
-    this.stopClock();
-    this.stopTick();
-  }
-
-  startGameTime() {
-    this.startClock();
-    this.startTick();
-  }
-
-  onTick(callback: TickCallbackType) {
-    this.currentObject.tryMove(
-      0,
-      1,
-      this.gridManager.getCurrentGrid(),
-      this.getWidth(),
-      this.getHeight(),
-      this.onFreeze,
-    );
         callback(
-      this.scoreManager.getScore(),
+            this.#scoreManager.getScore(),
-      this.scoreManager.getLevel(),
+            this.#scoreManager.getLevel(),
-      this.gridManager.getCurrentGrid(),
+            this.#gridManager.getCurrentGrid());
-    );
+        if (this.#scoreManager.canLevelUp())
-    if (this.scoreManager.canLevelUp())
+            this.setNewGameTick(this.#scoreManager.getLevel());
-      this.setNewGameTick(this.scoreManager.getLevel());
     }
 
-  onClock(callback: ClockCallbackType) {
+    onClock(callback: Function) {
-    this.gameTime += 1;
+        this.#gameTime++;
-    callback(this.gameTime);
+        callback(this.#gameTime);
     }
 
-  canUseInput(): boolean {
+    canUseInput() {
-    return this.gameRunning && !this.gamePaused;
+        return this.#gameRunning && !this.#gamePaused
     }
 
-  rightPressed(callback: MovementCallbackType) {
+    rightPressed(callback: Function) {
-    this.isPressedIn = true;
+        this.#isPressedIn = true;
         this.movePressedRepeat(true, callback, 1, 0);
     }
 
-  leftPressedIn(callback: MovementCallbackType) {
+    leftPressedIn(callback: Function) {
-    this.isPressedIn = true;
+        this.#isPressedIn = true;
         this.movePressedRepeat(true, callback, -1, 0);
     }
 
-  downPressedIn(callback: MovementCallbackType) {
+    downPressedIn(callback: Function) {
-    this.isPressedIn = true;
+        this.#isPressedIn = true;
         this.movePressedRepeat(true, callback, 0, 1);
     }
 
-  movePressedRepeat(
+    movePressedRepeat(isInitial: boolean, callback: Function, x: number, y: number) {
-    isInitial: boolean,
+        if (!this.canUseInput() || !this.#isPressedIn)
-    callback: MovementCallbackType,
+            return;
-    x: number,
+        const moved = this.#currentObject.tryMove(x, y,
-    y: number,
+            this.#gridManager.getCurrentGrid(), this.getWidth(), this.getHeight(),
-  ) {
+            () => this.onFreeze());
-    if (!this.canUseInput() || !this.isPressedIn) return;
-    const moved = this.currentObject.tryMove(
-      x,
-      y,
-      this.gridManager.getCurrentGrid(),
-      this.getWidth(),
-      this.getHeight(),
-      this.onFreeze,
-    );
         if (moved) {
             if (y === 1) {
-        this.scoreManager.incrementScore();
+                this.#scoreManager.incrementScore();
-        callback(
+                callback(this.#gridManager.getCurrentGrid(), this.#scoreManager.getScore());
-          this.gridManager.getCurrentGrid(),
+            } else
-          this.scoreManager.getScore(),
+                callback(this.#gridManager.getCurrentGrid());
-        );
-      } else callback(this.gridManager.getCurrentGrid());
         }
-    this.pressInInterval = setTimeout(
+        this.#pressInInterval = setTimeout(() =>
-      () => {
+                this.movePressedRepeat(false, callback, x, y),
-        this.movePressedRepeat(false, callback, x, y);
+            isInitial ? this.#autoRepeatActivationDelay : this.#autoRepeatDelay
-      },
-      isInitial ? this.autoRepeatActivationDelay : this.autoRepeatDelay,
         );
     }
 
     pressedOut() {
-    this.isPressedIn = false;
+        this.#isPressedIn = false;
-    clearTimeout(this.pressInInterval);
+        clearTimeout(this.#pressInInterval);
     }
 
-  rotatePressed(callback: MovementCallbackType) {
+    rotatePressed(callback: Function) {
-    if (!this.canUseInput()) return;
+        if (!this.canUseInput())
+            return;
 
-    if (
+        if (this.#currentObject.tryRotate(this.#gridManager.getCurrentGrid(), this.getWidth(), this.getHeight()))
-      this.currentObject.tryRotate(
+            callback(this.#gridManager.getCurrentGrid());
-        this.gridManager.getCurrentGrid(),
-        this.getWidth(),
-        this.getHeight(),
-      )
-    )
-      callback(this.gridManager.getCurrentGrid());
     }
 
-  getNextPiecesPreviews(): Array<GridType> {
+    getNextPiecesPreviews() {
-    const finalArray = [];
+        let finalArray = [];
-    for (let i = 0; i < this.nextPieces.length; i += 1) {
+        for (let i = 0; i < this.#nextPieces.length; i++) {
-      const gridSize = this.nextPieces[i].getCurrentShape().getCurrentShape()[0]
+            const gridSize = this.#nextPieces[i].getCurrentShape().getCurrentShape()[0].length;
-        .length;
+            finalArray.push(this.#gridManager.getEmptyGrid(gridSize, gridSize));
-      finalArray.push(this.gridManager.getEmptyGrid(gridSize, gridSize));
+            this.#nextPieces[i].toGrid(finalArray[i], true);
-      this.nextPieces[i].toGrid(finalArray[i], true);
         }
+
         return finalArray;
     }
 
     recoverNextPiece() {
-    this.currentObject = this.nextPieces.shift();
+        this.#currentObject = this.#nextPieces.shift();
         this.generateNextPieces();
     }
 
     generateNextPieces() {
-    while (this.nextPieces.length < this.nextPiecesCount) {
+        while (this.#nextPieces.length < this.#nextPiecesCount) {
-      this.nextPieces.push(new Piece(this.theme));
+            this.#nextPieces.push(new Piece(this.#theme));
         }
     }
 
     createTetromino() {
         this.pressedOut();
         this.recoverNextPiece();
-    if (
+        if (!this.#currentObject.isPositionValid(this.#gridManager.getCurrentGrid(), this.getWidth(), this.getHeight()))
-      !this.currentObject.isPositionValid(
-        this.gridManager.getCurrentGrid(),
-        this.getWidth(),
-        this.getHeight(),
-      )
-    )
             this.endGame(false);
     }
 
     togglePause() {
-    if (!this.gameRunning) return;
+        if (!this.#gameRunning)
-    this.gamePaused = !this.gamePaused;
+            return;
-    if (this.gamePaused) this.stopGameTime();
+        this.#gamePaused = !this.#gamePaused;
-    else this.startGameTime();
+        if (this.#gamePaused) {
+            clearInterval(this.#gameTickInterval);
+            clearInterval(this.#gameTimeInterval);
+        } else {
+            this.#gameTickInterval = setInterval(this.#onTick, this.#gameTick);
+            this.#gameTimeInterval = setInterval(this.#onClock, 1000);
+        }
+    }
+
+    stopGame() {
+        this.#gameRunning = false;
+        this.#gamePaused = false;
+        clearInterval(this.#gameTickInterval);
+        clearInterval(this.#gameTimeInterval);
     }
 
     endGame(isRestart: boolean) {
-    this.gameRunning = false;
+        this.stopGame();
-    this.gamePaused = false;
+        this.endCallback(this.#gameTime, this.#scoreManager.getScore(), isRestart);
-    this.stopGameTime();
-    this.endCallback(this.gameTime, this.scoreManager.getScore(), isRestart);
     }
 
-  startGame(
+    startGame(tickCallback: Function, clockCallback: Function, endCallback: Function) {
-    tickCallback: TickCallbackType,
+        if (this.#gameRunning)
-    clockCallback: ClockCallbackType,
+            this.endGame(true);
-    endCallback: EndCallbackType,
+        this.#gameRunning = true;
-  ) {
+        this.#gamePaused = false;
-    if (this.gameRunning) this.endGame(true);
+        this.#gameTime = 0;
-    this.gameRunning = true;
+        this.#scoreManager = new ScoreManager();
-    this.gamePaused = false;
+        this.#gameTick = GameLogic.levelTicks[this.#scoreManager.getLevel()];
-    this.gameTime = 0;
+        this.#gridManager = new GridManager(this.getWidth(), this.getHeight(), this.#theme);
-    this.scoreManager = new ScoreManager();
+        this.#nextPieces = [];
-    this.gameTick = GameLogic.levelTicks[this.scoreManager.getLevel()];
-    this.gridManager = new GridManager(
-      this.getWidth(),
-      this.getHeight(),
-      this.theme,
-    );
-    this.nextPieces = [];
         this.generateNextPieces();
         this.createTetromino();
         tickCallback(
-      this.scoreManager.getScore(),
+            this.#scoreManager.getScore(),
-      this.scoreManager.getLevel(),
+            this.#scoreManager.getLevel(),
-      this.gridManager.getCurrentGrid(),
+            this.#gridManager.getCurrentGrid());
-    );
+        clockCallback(this.#gameTime);
-    clockCallback(this.gameTime);
+        this.#onTick = this.onTick.bind(this, tickCallback);
-    this.startTick();
+        this.#onClock = this.onClock.bind(this, clockCallback);
-    this.startClock();
+        this.#gameTickInterval = setInterval(this.#onTick, this.#gameTick);
-    this.tickCallback = tickCallback;
+        this.#gameTimeInterval = setInterval(this.#onClock, 1000);
-    this.clockCallback = clockCallback;
         this.endCallback = endCallback;
     }
 }

src/screens/Game/logic/GridManager.js

@@ -1,19 +1,19 @@
 // @flow
 
-import Piece from './Piece';
+import Piece from "./Piece";
-import ScoreManager from './ScoreManager';
+import ScoreManager from "./ScoreManager";
-import type {CoordinatesType} from '../Shapes/BaseShape';
+import type {Coordinates} from '../Shapes/BaseShape';
-import type {GridType} from '../components/GridComponent';
+import type {Grid} from "../components/GridComponent";
-import type {CellType} from '../components/CellComponent';
+import type {Cell} from "../components/CellComponent";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from "../../../managers/ThemeManager";
 
 /**
  * Class used to manage the game grid
  */
 export default class GridManager {
-  #currentGrid: GridType;
 
-  #theme: CustomThemeType;
+    #currentGrid: Grid;
+    #theme: CustomTheme;
 
     /**
      * Initializes a grid of the given size
@@ -22,7 +22,7 @@ export default class GridManager {
      * @param height The grid height
      * @param theme Object containing current theme
      */
-  constructor(width: number, height: number, theme: CustomThemeType) {
+    constructor(width: number, height: number, theme: CustomTheme) {
         this.#theme = theme;
         this.#currentGrid = this.getEmptyGrid(height, width);
     }
@@ -30,9 +30,9 @@ export default class GridManager {
     /**
      * Get the current grid
      *
-   * @return {GridType} The current grid
+     * @return {Grid} The current grid
      */
-  getCurrentGrid(): GridType {
+    getCurrentGrid(): Grid {
         return this.#currentGrid;
     }
 
@@ -40,11 +40,11 @@ export default class GridManager {
      * Get a new empty grid line of the given size
      *
      * @param width The line size
-   * @return {Array<CellType>}
+     * @return {Array<Cell>}
      */
-  getEmptyLine(width: number): Array<CellType> {
+    getEmptyLine(width: number): Array<Cell> {
-    const line = [];
+        let line = [];
-    for (let col = 0; col < width; col += 1) {
+        for (let col = 0; col < width; col++) {
             line.push({
                 color: this.#theme.colors.tetrisBackground,
                 isEmpty: true,
@@ -59,11 +59,11 @@ export default class GridManager {
      *
      * @param width The grid width
      * @param height The grid height
-   * @return {GridType} A new empty grid
+     * @return {Grid} A new empty grid
      */
-  getEmptyGrid(height: number, width: number): GridType {
+    getEmptyGrid(height: number, width: number): Grid {
-    const grid = [];
+        let grid = [];
-    for (let row = 0; row < height; row += 1) {
+        for (let row = 0; row < height; row++) {
             grid.push(this.getEmptyLine(width));
         }
         return grid;
@@ -78,7 +78,7 @@ export default class GridManager {
      */
     clearLines(lines: Array<number>, scoreManager: ScoreManager) {
         lines.sort();
-    for (let i = 0; i < lines.length; i += 1) {
+        for (let i = 0; i < lines.length; i++) {
             this.#currentGrid.splice(lines[i], 1);
             this.#currentGrid.unshift(this.getEmptyLine(this.#currentGrid[0].length));
         }
@@ -92,17 +92,18 @@ export default class GridManager {
      * @param pos The piece's coordinates to check lines at
      * @return {Array<number>} An array containing the line numbers to clear
      */
-  getLinesToClear(pos: Array<CoordinatesType>): Array<number> {
+    getLinesToClear(pos: Array<Coordinates>): Array<number> {
-    const rows = [];
+        let rows = [];
-    for (let i = 0; i < pos.length; i += 1) {
+        for (let i = 0; i < pos.length; i++) {
             let isLineFull = true;
-      for (let col = 0; col < this.#currentGrid[pos[i].y].length; col += 1) {
+            for (let col = 0; col < this.#currentGrid[pos[i].y].length; col++) {
                 if (this.#currentGrid[pos[i].y][col].isEmpty) {
                     isLineFull = false;
                     break;
                 }
             }
-      if (isLineFull && rows.indexOf(pos[i].y) === -1) rows.push(pos[i].y);
+            if (isLineFull && rows.indexOf(pos[i].y) === -1)
+                rows.push(pos[i].y);
         }
         return rows;
     }
@@ -114,9 +115,6 @@ export default class GridManager {
      * @param scoreManager A reference to the score manager
      */
     freezeTetromino(currentObject: Piece, scoreManager: ScoreManager) {
-    this.clearLines(
+        this.clearLines(this.getLinesToClear(currentObject.getCoordinates()), scoreManager);
-      this.getLinesToClear(currentObject.getCoordinates()),
-      scoreManager,
-    );
     }
 }

src/screens/Game/logic/Piece.js

@@ -1,16 +1,14 @@
-// @flow
+import ShapeL from "../Shapes/ShapeL";
-
+import ShapeI from "../Shapes/ShapeI";
-import ShapeL from '../Shapes/ShapeL';
+import ShapeJ from "../Shapes/ShapeJ";
-import ShapeI from '../Shapes/ShapeI';
+import ShapeO from "../Shapes/ShapeO";
-import ShapeJ from '../Shapes/ShapeJ';
+import ShapeS from "../Shapes/ShapeS";
-import ShapeO from '../Shapes/ShapeO';
+import ShapeT from "../Shapes/ShapeT";
-import ShapeS from '../Shapes/ShapeS';
+import ShapeZ from "../Shapes/ShapeZ";
-import ShapeT from '../Shapes/ShapeT';
+import type {Coordinates} from '../Shapes/BaseShape';
-import ShapeZ from '../Shapes/ShapeZ';
+import BaseShape from "../Shapes/BaseShape";
-import type {CoordinatesType} from '../Shapes/BaseShape';
+import type {Grid} from "../components/GridComponent";
-import BaseShape from '../Shapes/BaseShape';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {GridType} from '../components/GridComponent';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
 
 /**
  * Class used as an abstraction layer for shapes.
@@ -18,20 +16,27 @@ import type {CustomThemeType} from '../../../managers/ThemeManager';
  *
  */
 export default class Piece {
-  shapes = [ShapeL, ShapeI, ShapeJ, ShapeO, ShapeS, ShapeT, ShapeZ];
 
-  currentShape: BaseShape;
+    #shapes = [
-
+        ShapeL,
-  theme: CustomThemeType;
+        ShapeI,
+        ShapeJ,
+        ShapeO,
+        ShapeS,
+        ShapeT,
+        ShapeZ,
+    ];
+    #currentShape: BaseShape;
+    #theme: CustomTheme;
 
     /**
      * Initializes this piece's color and shape
      *
      * @param theme Object containing current theme
      */
-  constructor(theme: CustomThemeType) {
+    constructor(theme: CustomTheme) {
-    this.currentShape = this.getRandomShape(theme);
+        this.#currentShape = this.getRandomShape(theme);
-    this.theme = theme;
+        this.#theme = theme;
     }
 
     /**
@@ -39,8 +44,8 @@ export default class Piece {
      *
      * @param theme Object containing current theme
      */
-  getRandomShape(theme: CustomThemeType): BaseShape {
+    getRandomShape(theme: CustomTheme) {
-    return new this.shapes[Math.floor(Math.random() * 7)](theme);
+        return new this.#shapes[Math.floor(Math.random() * 7)](theme);
     }
 
     /**
@@ -48,18 +53,15 @@ export default class Piece {
      *
      * @param grid The grid to remove the piece from
      */
-  removeFromGrid(grid: GridType) {
+    removeFromGrid(grid: Grid) {
-    const pos: Array<CoordinatesType> = this.currentShape.getCellsCoordinates(
+        const pos: Array<Coordinates> = this.#currentShape.getCellsCoordinates(true);
-      true,
+        for (let i = 0; i < pos.length; i++) {
-    );
+            grid[pos[i].y][pos[i].x] = {
-    pos.forEach((coordinates: CoordinatesType) => {
+                color: this.#theme.colors.tetrisBackground,
-      // eslint-disable-next-line no-param-reassign
-      grid[coordinates.y][coordinates.x] = {
-        color: this.theme.colors.tetrisBackground,
                 isEmpty: true,
-        key: grid[coordinates.y][coordinates.x].key,
+                key: grid[pos[i].y][pos[i].x].key
             };
-    });
+        }
     }
 
     /**
@@ -68,18 +70,15 @@ export default class Piece {
      * @param grid The grid to add the piece to
      * @param isPreview Should we use this piece's current position to determine the cells?
      */
-  toGrid(grid: GridType, isPreview: boolean) {
+    toGrid(grid: Grid, isPreview: boolean) {
-    const pos: Array<CoordinatesType> = this.currentShape.getCellsCoordinates(
+        const pos: Array<Coordinates> = this.#currentShape.getCellsCoordinates(!isPreview);
-      !isPreview,
+        for (let i = 0; i < pos.length; i++) {
-    );
+            grid[pos[i].y][pos[i].x] = {
-    pos.forEach((coordinates: CoordinatesType) => {
+                color: this.#currentShape.getColor(),
-      // eslint-disable-next-line no-param-reassign
-      grid[coordinates.y][coordinates.x] = {
-        color: this.currentShape.getColor(),
                 isEmpty: false,
-        key: grid[coordinates.y][coordinates.x].key,
+                key: grid[pos[i].y][pos[i].x].key
             };
-    });
+        }
     }
 
     /**
@@ -90,19 +89,15 @@ export default class Piece {
      * @param height The grid's height
      * @return {boolean} If the position is valid
      */
-  isPositionValid(grid: GridType, width: number, height: number): boolean {
+    isPositionValid(grid: Grid, width: number, height: number) {
         let isValid = true;
-    const pos: Array<CoordinatesType> = this.currentShape.getCellsCoordinates(
+        const pos: Array<Coordinates> = this.#currentShape.getCellsCoordinates(true);
-      true,
+        for (let i = 0; i < pos.length; i++) {
-    );
+            if (pos[i].x >= width
-    for (let i = 0; i < pos.length; i += 1) {
+                || pos[i].x < 0
-      if (
+                || pos[i].y >= height
-        pos[i].x >= width ||
+                || pos[i].y < 0
-        pos[i].x < 0 ||
+                || !grid[pos[i].y][pos[i].x].isEmpty) {
-        pos[i].y >= height ||
-        pos[i].y < 0 ||
-        !grid[pos[i].y][pos[i].x].isEmpty
-      ) {
                 isValid = false;
                 break;
             }
@@ -121,31 +116,24 @@ export default class Piece {
      * @param freezeCallback Callback to use if the piece should freeze itself
      * @return {boolean} True if the move was valid, false otherwise
      */
-  tryMove(
+    tryMove(x: number, y: number, grid: Grid, width: number, height: number, freezeCallback: () => void) {
-    x: number,
+        if (x > 1) x = 1; // Prevent moving from more than one tile
-    y: number,
+        if (x < -1) x = -1;
-    grid: GridType,
+        if (y > 1) y = 1;
-    width: number,
+        if (y < -1) y = -1;
-    height: number,
+        if (x !== 0 && y !== 0) y = 0; // Prevent diagonal movement
-    freezeCallback: () => void,
-  ): boolean {
-    let newX = x;
-    let newY = y;
-    if (x > 1) newX = 1; // Prevent moving from more than one tile
-    if (x < -1) newX = -1;
-    if (y > 1) newY = 1;
-    if (y < -1) newY = -1;
-    if (x !== 0 && y !== 0) newY = 0; // Prevent diagonal movement
 
         this.removeFromGrid(grid);
-    this.currentShape.move(newX, newY);
+        this.#currentShape.move(x, y);
-    const isValid = this.isPositionValid(grid, width, height);
+        let isValid = this.isPositionValid(grid, width, height);
 
-    if (!isValid) this.currentShape.move(-newX, -newY);
+        if (!isValid)
+            this.#currentShape.move(-x, -y);
 
-    const shouldFreeze = !isValid && newY !== 0;
+        let shouldFreeze = !isValid && y !== 0;
         this.toGrid(grid, false);
-    if (shouldFreeze) freezeCallback();
+        if (shouldFreeze)
+            freezeCallback();
         return isValid;
     }
 
@@ -157,11 +145,11 @@ export default class Piece {
      * @param height The grid's height
      * @return {boolean} True if the rotation was valid, false otherwise
      */
-  tryRotate(grid: GridType, width: number, height: number): boolean {
+    tryRotate(grid: Grid, width: number, height: number) {
         this.removeFromGrid(grid);
-    this.currentShape.rotate(true);
+        this.#currentShape.rotate(true);
         if (!this.isPositionValid(grid, width, height)) {
-      this.currentShape.rotate(false);
+            this.#currentShape.rotate(false);
             this.toGrid(grid, false);
             return false;
         }
@@ -172,13 +160,13 @@ export default class Piece {
     /**
      * Gets this piece used cells coordinates
      *
-   * @return {Array<CoordinatesType>} An array of coordinates
+     * @return {Array<Coordinates>} An array of coordinates
      */
-  getCoordinates(): Array<CoordinatesType> {
+    getCoordinates(): Array<Coordinates> {
-    return this.currentShape.getCellsCoordinates(true);
+        return this.#currentShape.getCellsCoordinates(true);
     }
 
-  getCurrentShape(): BaseShape {
+    getCurrentShape() {
-    return this.currentShape;
+        return this.#currentShape;
     }
 }

src/screens/Game/logic/ScoreManager.js

@@ -4,12 +4,11 @@
  * Class used to manage game score
  */
 export default class ScoreManager {
+
     #scoreLinesModifier = [40, 100, 300, 1200];
 
     #score: number;
-
     #level: number;
-
     #levelProgression: number;
 
     /**
@@ -52,7 +51,7 @@ export default class ScoreManager {
      * Increments the score by one
      */
     incrementScore() {
-    this.#score += 1;
+        this.#score++;
     }
 
     /**
@@ -64,9 +63,9 @@ export default class ScoreManager {
      * @param numberRemoved The number of lines removed at the same time
      */
     addLinesRemovedPoints(numberRemoved: number) {
-    if (numberRemoved < 1 || numberRemoved > 4) return;
+        if (numberRemoved < 1 || numberRemoved > 4)
-    this.#score +=
+            return;
-      this.#scoreLinesModifier[numberRemoved - 1] * (this.#level + 1);
+        this.#score += this.#scoreLinesModifier[numberRemoved-1] * (this.#level + 1);
         switch (numberRemoved) {
             case 1:
                 this.#levelProgression += 1;
@@ -80,8 +79,6 @@ export default class ScoreManager {
             case 4: // Did a tetris !
                 this.#levelProgression += 8;
                 break;
-      default:
-        break;
         }
     }
 
@@ -92,12 +89,13 @@ export default class ScoreManager {
      *
      * @return {boolean} True if the current level has changed
      */
-  canLevelUp(): boolean {
+    canLevelUp() {
-    const canLevel = this.#levelProgression > this.#level * 5;
+        let canLevel = this.#levelProgression > this.#level * 5;
-    if (canLevel) {
+        if (canLevel){
             this.#levelProgression -= this.#level * 5;
-      this.#level += 1;
+            this.#level++;
         }
         return canLevel;
     }
+
 }

src/screens/Game/screens/GameMainScreen.js

@@ -3,28 +3,27 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import {Caption, IconButton, Text, withTheme} from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
-import i18n from 'i18n-js';
+import GameLogic from "../logic/GameLogic";
-import {StackNavigationProp} from '@react-navigation/stack';
+import type {Grid} from "../components/GridComponent";
-import GameLogic from '../logic/GameLogic';
+import GridComponent from "../components/GridComponent";
-import type {GridType} from '../components/GridComponent';
+import Preview from "../components/Preview";
-import GridComponent from '../components/GridComponent';
+import i18n from "i18n-js";
-import Preview from '../components/Preview';
+import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
-import MaterialHeaderButtons, {
+import {StackNavigationProp} from "@react-navigation/stack";
-  Item,
+import type {CustomTheme} from "../../../managers/ThemeManager";
-} from '../../../components/Overrides/CustomHeaderButton';
+import type {OptionsDialogButton} from "../../../components/Dialogs/OptionsDialog";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import OptionsDialog from "../../../components/Dialogs/OptionsDialog";
-import type {OptionsDialogButtonType} from '../../../components/Dialogs/OptionsDialog';
-import OptionsDialog from '../../../components/Dialogs/OptionsDialog';
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  route: {params: {highScore: number}},
+    route: { params: { highScore: number }, ... },
-  theme: CustomThemeType,
+    theme: CustomTheme,
-};
+}
 
-type StateType = {
+type State = {
-  grid: GridType,
+    grid: Grid,
+    gameRunning: boolean,
     gameTime: number,
     gameScore: number,
     gameLevel: number,
@@ -32,320 +31,101 @@ type StateType = {
     dialogVisible: boolean,
     dialogTitle: string,
     dialogMessage: string,
-  dialogButtons: Array<OptionsDialogButtonType>,
+    dialogButtons: Array<OptionsDialogButton>,
     onDialogDismiss: () => void,
-};
+}
 
-class GameMainScreen extends React.Component<PropsType, StateType> {
+class GameMainScreen extends React.Component<Props, State> {
-  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()}`;
-    else format = date.getSeconds().toString();
-    return format;
-  }
 
     logic: GameLogic;
-
     highScore: number | null;
 
-  constructor(props: PropsType) {
+    constructor(props) {
         super(props);
-    this.logic = new GameLogic(20, 10, props.theme);
+        this.logic = new GameLogic(20, 10, this.props.theme);
         this.state = {
             grid: this.logic.getCurrentGrid(),
+            gameRunning: false,
             gameTime: 0,
             gameScore: 0,
             gameLevel: 0,
             dialogVisible: false,
-      dialogTitle: '',
+            dialogTitle: "",
-      dialogMessage: '',
+            dialogMessage: "",
             dialogButtons: [],
-      onDialogDismiss: () => {},
+            onDialogDismiss: () => {
+            },
         };
-    if (props.route.params != null)
+        if (this.props.route.params != null)
-      this.highScore = props.route.params.highScore;
+            this.highScore = this.props.route.params.highScore;
     }
 
     componentDidMount() {
-    const {navigation} = this.props;
+        this.props.navigation.setOptions({
-    navigation.setOptions({
             headerRight: this.getRightButton,
         });
         this.startGame();
     }
 
     componentWillUnmount() {
-    this.logic.endGame(false);
+        this.logic.stopGame();
     }
 
-  getRightButton = (): React.Node => {
+    getRightButton = () => {
-    return (
+        return <MaterialHeaderButtons>
-      <MaterialHeaderButtons>
+            <Item title="pause" iconName="pause" onPress={this.togglePause}/>
-        <Item title="pause" iconName="pause" onPress={this.togglePause} />
+        </MaterialHeaderButtons>;
-      </MaterialHeaderButtons>
+    }
-    );
-  };
 
-  onTick = (score: number, level: number, newGrid: GridType) => {
+    getFormattedTime(seconds: number) {
+        let 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();
+        return format;
+    }
+
+    onTick = (score: number, level: number, newGrid: Grid) => {
         this.setState({
             gameScore: score,
             gameLevel: level,
             grid: newGrid,
         });
-  };
+    }
 
     onClock = (time: number) => {
         this.setState({
             gameTime: time,
         });
-  };
+    }
 
-  onDialogDismiss = () => {
+    updateGrid = (newGrid: Grid) => {
-    this.setState({dialogVisible: false});
-  };
-
-  onGameEnd = (time: number, score: number, isRestart: boolean) => {
-    const {props, state} = this;
         this.setState({
-      gameTime: time,
+            grid: newGrid,
+        });
+    }
+
+    updateGridScore = (newGrid: Grid, score: number) => {
+        this.setState({
+            grid: newGrid,
             gameScore: score,
         });
-    if (!isRestart)
-      props.navigation.replace('game-start', {
-        score: state.gameScore,
-        level: state.gameLevel,
-        time: state.gameTime,
-      });
-  };
-
-  getStatusIcons(): React.Node {
-    const {props, state} = this;
-    return (
-      <View
-        style={{
-          flex: 1,
-          marginTop: 'auto',
-          marginBottom: 'auto',
-        }}>
-        <View
-          style={{
-            marginLeft: 'auto',
-            marginRight: 'auto',
-          }}>
-          <Caption
-            style={{
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              marginBottom: 5,
-            }}>
-            {i18n.t('screens.game.time')}
-          </Caption>
-          <View
-            style={{
-              flexDirection: 'row',
-            }}>
-            <MaterialCommunityIcons
-              name="timer"
-              color={props.theme.colors.subtitle}
-              size={20}
-            />
-            <Text
-              style={{
-                marginLeft: 5,
-                color: props.theme.colors.subtitle,
-              }}>
-              {GameMainScreen.getFormattedTime(state.gameTime)}
-            </Text>
-          </View>
-        </View>
-        <View
-          style={{
-            marginLeft: 'auto',
-            marginRight: 'auto',
-            marginTop: 20,
-          }}>
-          <Caption
-            style={{
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              marginBottom: 5,
-            }}>
-            {i18n.t('screens.game.level')}
-          </Caption>
-          <View
-            style={{
-              flexDirection: 'row',
-            }}>
-            <MaterialCommunityIcons
-              name="gamepad-square"
-              color={props.theme.colors.text}
-              size={20}
-            />
-            <Text
-              style={{
-                marginLeft: 5,
-              }}>
-              {state.gameLevel}
-            </Text>
-          </View>
-        </View>
-      </View>
-    );
     }
 
-  getScoreIcon(): React.Node {
-    const {props, state} = this;
-    const highScore =
-      this.highScore == null || state.gameScore > this.highScore
-        ? state.gameScore
-        : this.highScore;
-    return (
-      <View
-        style={{
-          marginTop: 10,
-          marginBottom: 10,
-        }}>
-        <View
-          style={{
-            flexDirection: 'row',
-            marginLeft: 'auto',
-            marginRight: 'auto',
-          }}>
-          <Text
-            style={{
-              marginLeft: 5,
-              fontSize: 20,
-            }}>
-            {i18n.t('screens.game.score', {score: state.gameScore})}
-          </Text>
-          <MaterialCommunityIcons
-            name="star"
-            color={props.theme.colors.tetrisScore}
-            size={20}
-            style={{
-              marginTop: 'auto',
-              marginBottom: 'auto',
-              marginLeft: 5,
-            }}
-          />
-        </View>
-        <View
-          style={{
-            flexDirection: 'row',
-            marginLeft: 'auto',
-            marginRight: 'auto',
-            marginTop: 5,
-          }}>
-          <Text
-            style={{
-              marginLeft: 5,
-              fontSize: 10,
-              color: props.theme.colors.textDisabled,
-            }}>
-            {i18n.t('screens.game.highScore', {score: highScore})}
-          </Text>
-          <MaterialCommunityIcons
-            name="star"
-            color={props.theme.colors.tetrisScore}
-            size={10}
-            style={{
-              marginTop: 'auto',
-              marginBottom: 'auto',
-              marginLeft: 5,
-            }}
-          />
-        </View>
-      </View>
-    );
-  }
-
-  getControlButtons(): React.Node {
-    const {props} = this;
-    return (
-      <View
-        style={{
-          height: 80,
-          flexDirection: 'row',
-        }}>
-        <IconButton
-          icon="rotate-right-variant"
-          size={40}
-          onPress={() => {
-            this.logic.rotatePressed(this.updateGrid);
-          }}
-          style={{flex: 1}}
-        />
-        <View
-          style={{
-            flexDirection: 'row',
-            flex: 4,
-          }}>
-          <IconButton
-            icon="chevron-left"
-            size={40}
-            style={{flex: 1}}
-            onPress={() => {
-              this.logic.pressedOut();
-            }}
-            onPressIn={() => {
-              this.logic.leftPressedIn(this.updateGrid);
-            }}
-          />
-          <IconButton
-            icon="chevron-right"
-            size={40}
-            style={{flex: 1}}
-            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={{flex: 1}}
-          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,
-    } => ({
-      grid: newGrid,
-      gameScore: score != null ? score : prevState.gameScore,
-    }));
-  };
-
     togglePause = () => {
         this.logic.togglePause();
-    if (this.logic.isGamePaused()) this.showPausePopup();
+        if (this.logic.isGamePaused())
-  };
+            this.showPausePopup();
+    }
+
+    onDialogDismiss = () => this.setState({dialogVisible: false});
 
     showPausePopup = () => {
         const onDismiss = () => {
@@ -354,56 +134,228 @@ class GameMainScreen extends React.Component<PropsType, StateType> {
         };
         this.setState({
             dialogVisible: true,
-      dialogTitle: i18n.t('screens.game.pause'),
+            dialogTitle: i18n.t("screens.game.pause"),
-      dialogMessage: i18n.t('screens.game.pauseMessage'),
+            dialogMessage: i18n.t("screens.game.pauseMessage"),
             dialogButtons: [
                 {
-          title: i18n.t('screens.game.restart.text'),
+                    title: i18n.t("screens.game.restart.text"),
-          onPress: this.showRestartConfirm,
+                    onPress: this.showRestartConfirm
                 },
                 {
-          title: i18n.t('screens.game.resume'),
+                    title: i18n.t("screens.game.resume"),
-          onPress: onDismiss,
+                    onPress: onDismiss
-        },
+                }
             ],
             onDialogDismiss: onDismiss,
         });
-  };
+    }
 
     showRestartConfirm = () => {
         this.setState({
             dialogVisible: true,
-      dialogTitle: i18n.t('screens.game.restart.confirm'),
+            dialogTitle: i18n.t("screens.game.restart.confirm"),
-      dialogMessage: i18n.t('screens.game.restart.confirmMessage'),
+            dialogMessage: i18n.t("screens.game.restart.confirmMessage"),
             dialogButtons: [
                 {
-          title: i18n.t('screens.game.restart.confirmYes'),
+                    title: i18n.t("screens.game.restart.confirmYes"),
                     onPress: () => {
                         this.onDialogDismiss();
                         this.startGame();
-          },
+                    }
                 },
                 {
-          title: i18n.t('screens.game.restart.confirmNo'),
+                    title: i18n.t("screens.game.restart.confirmNo"),
-          onPress: this.showPausePopup,
+                    onPress: this.showPausePopup
-        },
+                }
             ],
             onDialogDismiss: this.showPausePopup,
         });
-  };
+    }
 
     startGame = () => {
         this.logic.startGame(this.onTick, this.onClock, this.onGameEnd);
-  };
+        this.setState({
+            gameRunning: true,
+        });
+    }
 
-  render(): React.Node {
+    onGameEnd = (time: number, score: number, isRestart: boolean) => {
-    const {props, state} = this;
+        this.setState({
+            gameTime: time,
+            gameScore: score,
+            gameRunning: false,
+        });
+        if (!isRestart)
+            this.props.navigation.replace(
+                "game-start",
+                {
+                    score: this.state.gameScore,
+                    level: this.state.gameLevel,
+                    time: this.state.gameTime,
+                }
+            );
+    }
+
+    getStatusIcons() {
+        return (
+            <View style={{
+                flex: 1,
+                marginTop: "auto",
+                marginBottom: "auto"
+            }}>
+                <View style={{
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                }}>
+                    <Caption style={{
+                        marginLeft: "auto",
+                        marginRight: "auto",
+                        marginBottom: 5,
+                    }}>{i18n.t("screens.game.time")}</Caption>
+                    <View style={{
+                        flexDirection: "row"
+                    }}>
+                        <MaterialCommunityIcons
+                            name={'timer'}
+                            color={this.props.theme.colors.subtitle}
+                            size={20}/>
+                        <Text style={{
+                            marginLeft: 5,
+                            color: this.props.theme.colors.subtitle
+                        }}>{this.getFormattedTime(this.state.gameTime)}</Text>
+                    </View>
+
+                </View>
+                <View style={{
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                    marginTop: 20,
+                }}>
+                    <Caption style={{
+                        marginLeft: "auto",
+                        marginRight: "auto",
+                        marginBottom: 5,
+                    }}>{i18n.t("screens.game.level")}</Caption>
+                    <View style={{
+                        flexDirection: "row"
+                    }}>
+                        <MaterialCommunityIcons
+                            name={'gamepad-square'}
+                            color={this.props.theme.colors.text}
+                            size={20}/>
+                        <Text style={{
+                            marginLeft: 5
+                        }}>{this.state.gameLevel}</Text>
+                    </View>
+                </View>
+            </View>
+        );
+    }
+
+    getScoreIcon() {
+        let highScore = this.highScore == null || this.state.gameScore > this.highScore
+            ? this.state.gameScore
+            : this.highScore;
+        return (
+            <View style={{
+                marginTop: 10,
+                marginBottom: 10,
+            }}>
+                <View style={{
+                    flexDirection: "row",
+                    marginLeft: "auto",
+                    marginRight: "auto",
+                }}>
+                    <Text style={{
+                        marginLeft: 5,
+                        fontSize: 20,
+                    }}>{i18n.t("screens.game.score", {score: this.state.gameScore})}</Text>
+                    <MaterialCommunityIcons
+                        name={'star'}
+                        color={this.props.theme.colors.tetrisScore}
+                        size={20}
+                        style={{
+                            marginTop: "auto",
+                            marginBottom: "auto",
+                            marginLeft: 5
+                        }}/>
+                </View>
+                <View style={{
+                    flexDirection: "row",
+                    marginLeft: "auto",
+                    marginRight: "auto",
+                    marginTop: 5,
+                }}>
+                    <Text style={{
+                        marginLeft: 5,
+                        fontSize: 10,
+                        color: this.props.theme.colors.textDisabled
+                    }}>{i18n.t("screens.game.highScore", {score: highScore})}</Text>
+                    <MaterialCommunityIcons
+                        name={'star'}
+                        color={this.props.theme.colors.tetrisScore}
+                        size={10}
+                        style={{
+                            marginTop: "auto",
+                            marginBottom: "auto",
+                            marginLeft: 5
+                        }}/>
+                </View>
+            </View>
+
+        );
+    }
+
+    getControlButtons() {
+        return (
+            <View style={{
+                height: 80,
+                flexDirection: "row"
+            }}>
+                <IconButton
+                    icon="rotate-right-variant"
+                    size={40}
+                    onPress={() => this.logic.rotatePressed(this.updateGrid)}
+                    style={{flex: 1}}
+                />
+                <View style={{
+                    flexDirection: 'row',
+                    flex: 4
+                }}>
+                    <IconButton
+                        icon="chevron-left"
+                        size={40}
+                        style={{flex: 1}}
+                        onPress={() => this.logic.pressedOut()}
+                        onPressIn={() => this.logic.leftPressedIn(this.updateGrid)}
+
+                    />
+                    <IconButton
+                        icon="chevron-right"
+                        size={40}
+                        style={{flex: 1}}
+                        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={{flex: 1}}
+                    color={this.props.theme.colors.tetrisScore}
+                />
+            </View>
+        );
+    }
+
+    render() {
         return (
             <View style={{flex: 1}}>
-        <View
+                <View style={{
-          style={{
                     flex: 1,
-            flexDirection: 'row',
+                    flexDirection: "row",
                 }}>
                     {this.getStatusIcons()}
                     <View style={{flex: 4}}>
@@ -411,12 +363,12 @@ class GameMainScreen extends React.Component<PropsType, StateType> {
                         <GridComponent
                             width={this.logic.getWidth()}
                             height={this.logic.getHeight()}
-              grid={state.grid}
+                            grid={this.state.grid}
                             style={{
-                backgroundColor: props.theme.colors.tetrisBackground,
+                                backgroundColor: this.props.theme.colors.tetrisBackground,
                                 flex: 1,
-                marginLeft: 'auto',
+                                marginLeft: "auto",
-                marginRight: 'auto',
+                                marginRight: "auto",
                             }}
                         />
                     </View>
@@ -435,15 +387,16 @@ class GameMainScreen extends React.Component<PropsType, StateType> {
                 {this.getControlButtons()}
 
                 <OptionsDialog
-          visible={state.dialogVisible}
+                    visible={this.state.dialogVisible}
-          title={state.dialogTitle}
+                    title={this.state.dialogTitle}
-          message={state.dialogMessage}
+                    message={this.state.dialogMessage}
-          buttons={state.dialogButtons}
+                    buttons={this.state.dialogButtons}
-          onDismiss={state.onDialogDismiss}
+                    onDismiss={this.state.onDialogDismiss}
                 />
             </View>
         );
     }
+
 }
 
 export default withTheme(GameMainScreen);

src/screens/Game/screens/GameStartScreen.js

@@ -1,105 +1,111 @@
 // @flow
 
-import * as React from 'react';
+import * as React from "react";
-import {StackNavigationProp} from '@react-navigation/stack';
+import {StackNavigationProp} from "@react-navigation/stack";
-import {
+import type {CustomTheme} from "../../../managers/ThemeManager";
-  Button,
+import {Button, Card, Divider, Headline, Paragraph, Text, withTheme} from "react-native-paper";
-  Card,
+import {View} from "react-native";
-  Divider,
+import i18n from "i18n-js";
-  Headline,
+import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
-  Paragraph,
+import MascotPopup from "../../../components/Mascot/MascotPopup";
-  Text,
+import AsyncStorageManager from "../../../managers/AsyncStorageManager";
-  withTheme,
+import type {Grid} from "../components/GridComponent";
-} from 'react-native-paper';
+import GridComponent from "../components/GridComponent";
-import {View} from 'react-native';
+import GridManager from "../logic/GridManager";
-import i18n from 'i18n-js';
+import Piece from "../logic/Piece";
-import * as Animatable from 'react-native-animatable';
+import * as Animatable from "react-native-animatable";
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
-import LinearGradient from 'react-native-linear-gradient';
+import LinearGradient from "react-native-linear-gradient";
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import SpeechArrow from "../../../components/Mascot/SpeechArrow";
-import Mascot, {MASCOT_STYLE} from '../../../components/Mascot/Mascot';
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
-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';
 
-type GameStatsType = {
+type GameStats = {
     score: number,
     level: number,
     time: number,
-};
+}
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
     route: {
-    params: GameStatsType,
+        params: GameStats
     },
-  theme: CustomThemeType,
+    theme: CustomTheme,
-};
+}
+
+class GameStartScreen extends React.Component<Props> {
 
-class GameStartScreen extends React.Component<PropsType> {
     gridManager: GridManager;
-
     scores: Array<number>;
 
-  gameStats: GameStatsType | null;
+    gameStats: GameStats | null;
-
     isHighScore: boolean;
 
-  constructor(props: PropsType) {
+    constructor(props: Props) {
         super(props);
         this.gridManager = new GridManager(4, 4, props.theme);
-    this.scores = AsyncStorageManager.getObject(
+        this.scores = AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.gameScores.key);
-      AsyncStorageManager.PREFERENCES.gameScores.key,
+        this.scores.sort((a, b) => b - a);
-    );
+        if (this.props.route.params != null)
-    this.scores.sort((a: number, b: number): number => b - a);
+            this.recoverGameScore();
-    if (props.route.params != null) this.recoverGameScore();
     }
 
-  getPiecesBackground(): React.Node {
+    recoverGameScore() {
-    const {theme} = this.props;
+        this.gameStats = this.props.route.params;
-    const gridList = [];
+        this.isHighScore = this.scores.length === 0 || this.gameStats.score > this.scores[0];
-    for (let i = 0; i < 18; i += 1) {
+        for (let i = 0; i < 3; i++) {
+            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);
+    }
+
+    getPiecesBackground() {
+        let gridList = [];
+        for (let i = 0; i < 18; i++) {
             gridList.push(this.gridManager.getEmptyGrid(4, 4));
-      const piece = new Piece(theme);
+            const piece = new Piece(this.props.theme);
             piece.toGrid(gridList[i], true);
         }
         return (
-      <View
+            <View style={{
-        style={{
+                position: "absolute",
-          position: 'absolute',
+                width: "100%",
-          width: '100%',
+                height: "100%",
-          height: '100%',
             }}>
-        {gridList.map((item: GridType, index: number): React.Node => {
+                {gridList.map((item: Grid, 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);
+                    const animDuration = 2 * (2000 - (size * 30));
                     return (
                         <Animatable.View
-              animation="fadeInDownBig"
+                            animation={"fadeInDownBig"}
                             delay={animDelay}
                             duration={animDuration}
-              key={`piece${index.toString()}`}
+                            key={"piece" + index.toString()}
                             style={{
-                width: `${size}%`,
+                                width: size + "%",
-                position: 'absolute',
+                                position: "absolute",
-                top: `${top}%`,
+                                top: top + "%",
-                left: `${left}%`,
+                                left: left + "%",
-              }}>
+                            }}
+                        >
                             <GridComponent
                                 width={4}
                                 height={4}
                                 grid={item}
                                 style={{
-                  transform: [{rotateZ: `${rot}deg`}],
+                                    transform: [{rotateZ: rot + "deg"}],
                                 }}
                             />
                         </Animatable.View>
@@ -109,30 +115,26 @@ class GameStartScreen extends React.Component<PropsType> {
         );
     }
 
-  getPostGameContent(stats: GameStatsType): React.Node {
+    getPostGameContent(stats: GameStats) {
-    const {props} = this;
         return (
-      <View
+            <View style={{
-        style={{
+                flex: 1
-          flex: 1,
             }}>
                 <Mascot
                     emotion={this.isHighScore ? MASCOT_STYLE.LOVE : MASCOT_STYLE.NORMAL}
                     animated={this.isHighScore}
                     style={{
-            width: this.isHighScore ? '50%' : '30%',
+                        width: this.isHighScore ? "50%" : "30%",
-            marginLeft: this.isHighScore ? 'auto' : null,
+                        marginLeft: this.isHighScore ? "auto" : null,
-            marginRight: this.isHighScore ? 'auto' : null,
+                        marginRight: this.isHighScore ? "auto" : null,
-          }}
+                    }}/>
-        />
                 <SpeechArrow
-          style={{marginLeft: this.isHighScore ? '60%' : '20%'}}
+                    style={{marginLeft: this.isHighScore ? "60%" : "20%"}}
                     size={20}
-          color={props.theme.colors.mascotMessageArrow}
+                    color={this.props.theme.colors.mascotMessageArrow}
                 />
-        <Card
+                <Card style={{
-          style={{
+                    borderColor: this.props.theme.colors.mascotMessageArrow,
-            borderColor: props.theme.colors.mascotMessageArrow,
                     borderWidth: 2,
                     marginLeft: 20,
                     marginRight: 20,
@@ -140,101 +142,95 @@ class GameStartScreen extends React.Component<PropsType> {
                     <Card.Content>
                         <Headline
                             style={{
-                textAlign: 'center',
+                                textAlign: "center",
                                 color: this.isHighScore
-                  ? props.theme.colors.gameGold
+                                    ? this.props.theme.colors.gameGold
-                  : props.theme.colors.primary,
+                                    : this.props.theme.colors.primary
                             }}>
                             {this.isHighScore
-                ? i18n.t('screens.game.newHighScore')
+                                ? i18n.t("screens.game.newHighScore")
-                : i18n.t('screens.game.gameOver')}
+                                : i18n.t("screens.game.gameOver")}
                         </Headline>
-            <Divider />
+                        <Divider/>
-            <View
+                        <View style={{
-              style={{
+                            flexDirection: "row",
-                flexDirection: 'row',
+                            marginLeft: "auto",
-                marginLeft: 'auto',
+                            marginRight: "auto",
-                marginRight: 'auto',
                             marginTop: 10,
                             marginBottom: 10,
                         }}>
-              <Text
+                            <Text style={{
-                style={{
                                 fontSize: 20,
                             }}>
-                {i18n.t('screens.game.score', {score: stats.score})}
+                                {i18n.t("screens.game.score", {score: stats.score})}
                             </Text>
                             <MaterialCommunityIcons
-                name="star"
+                                name={'star'}
-                color={props.theme.colors.tetrisScore}
+                                color={this.props.theme.colors.tetrisScore}
                                 size={30}
                                 style={{
-                  marginLeft: 5,
+                                    marginLeft: 5
-                }}
+                                }}/>
-              />
                         </View>
-            <View
+                        <View style={{
-              style={{
+                            flexDirection: "row",
-                flexDirection: 'row',
+                            marginLeft: "auto",
-                marginLeft: 'auto',
+                            marginRight: "auto",
-                marginRight: 'auto',
                         }}>
-              <Text>{i18n.t('screens.game.level')}</Text>
+                            <Text>{i18n.t("screens.game.level")}</Text>
                             <MaterialCommunityIcons
                                 style={{
                                     marginRight: 5,
                                     marginLeft: 5,
                                 }}
-                name="gamepad-square"
+                                name={"gamepad-square"}
                                 size={20}
-                color={props.theme.colors.textDisabled}
+                                color={this.props.theme.colors.textDisabled}
                             />
-              <Text>{stats.level}</Text>
+                            <Text>
+                                {stats.level}
+                            </Text>
                         </View>
-            <View
+                        <View style={{
-              style={{
+                            flexDirection: "row",
-                flexDirection: 'row',
+                            marginLeft: "auto",
-                marginLeft: 'auto',
+                            marginRight: "auto",
-                marginRight: 'auto',
                         }}>
-              <Text>{i18n.t('screens.game.time')}</Text>
+                            <Text>{i18n.t("screens.game.time")}</Text>
                             <MaterialCommunityIcons
                                 style={{
                                     marginRight: 5,
                                     marginLeft: 5,
                                 }}
-                name="timer"
+                                name={"timer"}
                                 size={20}
-                color={props.theme.colors.textDisabled}
+                                color={this.props.theme.colors.textDisabled}
                             />
-              <Text>{stats.time}</Text>
+                            <Text>
+                                {stats.time}
+                            </Text>
                         </View>
                     </Card.Content>
                 </Card>
             </View>
-    );
+        )
     }
 
-  getWelcomeText(): React.Node {
+    getWelcomeText() {
-    const {props} = this;
         return (
             <View>
-        <Mascot
+                <Mascot emotion={MASCOT_STYLE.COOL} style={{
-          emotion={MASCOT_STYLE.COOL}
+                    width: "40%",
-          style={{
+                    marginLeft: "auto",
-            width: '40%',
+                    marginRight: "auto",
-            marginLeft: 'auto',
+                }}/>
-            marginRight: 'auto',
-          }}
-        />
                 <SpeechArrow
-          style={{marginLeft: '60%'}}
+                    style={{marginLeft: "60%"}}
                     size={20}
-          color={props.theme.colors.mascotMessageArrow}
+                    color={this.props.theme.colors.mascotMessageArrow}
                 />
-        <Card
+                <Card style={{
-          style={{
+                    borderColor: this.props.theme.colors.mascotMessageArrow,
-            borderColor: props.theme.colors.mascotMessageArrow,
                     borderWidth: 2,
                     marginLeft: 10,
                     marginRight: 10,
@@ -242,18 +238,18 @@ class GameStartScreen extends React.Component<PropsType> {
                     <Card.Content>
                         <Headline
                             style={{
-                textAlign: 'center',
+                                textAlign: "center",
-                color: props.theme.colors.primary,
+                                color: this.props.theme.colors.primary
                             }}>
-              {i18n.t('screens.game.welcomeTitle')}
+                            {i18n.t("screens.game.welcomeTitle")}
                         </Headline>
-            <Divider />
+                        <Divider/>
                         <Paragraph
                             style={{
-                textAlign: 'center',
+                                textAlign: "center",
                                 marginTop: 10,
                             }}>
-              {i18n.t('screens.game.welcomeMessage')}
+                            {i18n.t("screens.game.welcomeMessage")}
                         </Paragraph>
                     </Card.Content>
                 </Card>
@@ -261,88 +257,93 @@ class GameStartScreen extends React.Component<PropsType> {
         );
     }
 
-  getPodiumRender(place: 1 | 2 | 3, score: string): React.Node {
+    getPodiumRender(place: 1 | 2 | 3, score: string) {
-    const {props} = this;
+        let icon = "podium-gold";
-    let icon = 'podium-gold';
+        let color = this.props.theme.colors.gameGold;
-    let color = props.theme.colors.gameGold;
         let fontSize = 20;
         let size = 70;
         if (place === 2) {
-      icon = 'podium-silver';
+            icon = "podium-silver";
-      color = props.theme.colors.gameSilver;
+            color = this.props.theme.colors.gameSilver;
             fontSize = 18;
             size = 60;
         } else if (place === 3) {
-      icon = 'podium-bronze';
+            icon = "podium-bronze";
-      color = props.theme.colors.gameBronze;
+            color = this.props.theme.colors.gameBronze;
             fontSize = 15;
             size = 50;
         }
         return (
-      <View
+            <View style={{
-        style={{
+                marginLeft: place === 2 ? 20 : "auto",
-          marginLeft: place === 2 ? 20 : 'auto',
+                marginRight: place === 3 ? 20 : "auto",
-          marginRight: place === 3 ? 20 : 'auto',
+                flexDirection: "column",
-          flexDirection: 'column',
+                alignItems: "center",
-          alignItems: 'center',
+                justifyContent: "flex-end",
-          justifyContent: 'flex-end',
             }}>
-        {this.isHighScore && place === 1 ? (
+                {
+                    this.isHighScore && place === 1
+                        ?
                         <Animatable.View
-            animation="swing"
+                            animation={"swing"}
-            iterationCount="infinite"
+                            iterationCount={"infinite"}
                             duration={2000}
                             delay={1000}
-            useNativeDriver
+                            useNativeDriver={true}
                             style={{
-              position: 'absolute',
+                                position: "absolute",
-              top: -20,
+                                top: -20
-            }}>
+                            }}
+                        >
                             <Animatable.View
-              animation="pulse"
+                                animation={"pulse"}
-              iterationCount="infinite"
+                                iterationCount={"infinite"}
-              useNativeDriver>
+                                useNativeDriver={true}
+                            >
                                 <MaterialCommunityIcons
-                name="decagram"
+                                    name={"decagram"}
-                color={props.theme.colors.gameGold}
+                                    color={this.props.theme.colors.gameGold}
                                     size={150}
                                 />
                             </Animatable.View>
                         </Animatable.View>
-        ) : null}
+
+                        : null
+                }
                 <MaterialCommunityIcons
                     name={icon}
-          color={this.isHighScore && place === 1 ? '#fff' : color}
+                    color={this.isHighScore && place === 1 ? "#fff" : color}
                     size={size}
                 />
-        <Text
+                <Text style={{
-          style={{
+                    textAlign: "center",
-            textAlign: 'center',
+                    fontWeight: place === 1 ? "bold" : null,
-            fontWeight: place === 1 ? 'bold' : null,
+                    fontSize: fontSize,
-            fontSize,
+                }}>{score}</Text>
-          }}>
-          {score}
-        </Text>
             </View>
         );
     }
 
-  getTopScoresRender(): React.Node {
+    getTopScoresRender() {
-    const gold = this.scores.length > 0 ? this.scores[0] : '-';
+        const gold = this.scores.length > 0
-    const silver = this.scores.length > 1 ? this.scores[1] : '-';
+            ? this.scores[0]
-    const bronze = this.scores.length > 2 ? this.scores[2] : '-';
+            : "-";
+        const silver = this.scores.length > 1
+            ? this.scores[1]
+            : "-";
+        const bronze = this.scores.length > 2
+            ? this.scores[2]
+            : "-";
         return (
-      <View
+            <View style={{
-        style={{
                 marginBottom: 20,
-          marginTop: 20,
+                marginTop: 20
             }}>
                 {this.getPodiumRender(1, gold.toString())}
-        <View
+                <View style={{
-          style={{
+                    flexDirection: "row",
-            flexDirection: 'row',
+                    marginLeft: "auto",
-            marginLeft: 'auto',
+                    marginRight: "auto",
-            marginRight: 'auto',
                 }}>
                     {this.getPodiumRender(3, bronze.toString())}
                     {this.getPodiumRender(2, silver.toString())}
@@ -351,90 +352,76 @@ class GameStartScreen extends React.Component<PropsType> {
         );
     }
 
-  getMainContent(): React.Node {
+    getMainContent() {
-    const {props} = this;
         return (
             <View style={{flex: 1}}>
-        {this.gameStats != null
+                {
+                    this.gameStats != null
                         ? this.getPostGameContent(this.gameStats)
-          : this.getWelcomeText()}
+                        : this.getWelcomeText()
+                }
                 <Button
-          icon="play"
+                    icon={"play"}
-          mode="contained"
+                    mode={"contained"}
-          onPress={() => {
+                    onPress={() => this.props.navigation.replace(
-            props.navigation.replace('game-main', {
+                        "game-main",
-              highScore: this.scores.length > 0 ? this.scores[0] : null,
+                        {
-            });
+                            highScore: this.scores.length > 0
-          }}
+                                ? this.scores[0]
+                                : null
+                        }
+                    )}
                     style={{
-            marginLeft: 'auto',
+                        marginLeft: "auto",
-            marginRight: 'auto',
+                        marginRight: "auto",
                         marginTop: 10,
-          }}>
+                    }}
-          {i18n.t('screens.game.play')}
+                >
+                    {i18n.t("screens.game.play")}
                 </Button>
                 {this.getTopScoresRender()}
             </View>
-    );
+        )
     }
 
-  keyExtractor = (item: number): string => item.toString();
+    keyExtractor = (item: number) => item.toString();
 
-  recoverGameScore() {
+    render() {
-    const {route} = this.props;
-    this.gameStats = route.params;
-    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(): React.Node {
-    const {props} = this;
         return (
             <View style={{flex: 1}}>
                 {this.getPiecesBackground()}
                 <LinearGradient
                     style={{flex: 1}}
                     colors={[
-            `${props.theme.colors.background}00`,
+                        this.props.theme.colors.background + "00",
-            props.theme.colors.background,
+                        this.props.theme.colors.background
                     ]}
                     start={{x: 0, y: 0}}
-          end={{x: 0, y: 1}}>
+                    end={{x: 0, y: 1}}
+                >
                     <CollapsibleScrollView>
                         {this.getMainContent()}
                         <MascotPopup
                             prefKey={AsyncStorageManager.PREFERENCES.gameStartShowBanner.key}
-              title={i18n.t('screens.game.mascotDialog.title')}
+                            title={i18n.t("screens.game.mascotDialog.title")}
-              message={i18n.t('screens.game.mascotDialog.message')}
+                            message={i18n.t("screens.game.mascotDialog.message")}
-              icon="gamepad-variant"
+                            icon={"gamepad-variant"}
                             buttons={{
                                 action: null,
                                 cancel: {
-                  message: i18n.t('screens.game.mascotDialog.button'),
+                                    message: i18n.t("screens.game.mascotDialog.button"),
-                  icon: 'check',
+                                    icon: "check",
-                },
+                                }
                             }}
                             emotion={MASCOT_STYLE.COOL}
                         />
                     </CollapsibleScrollView>
                 </LinearGradient>
             </View>
+
         );
     }
 }
 
 export default withTheme(GameStartScreen);
+

src/screens/Home/HomeScreen.js

@@ -19,7 +19,7 @@ import MaterialHeaderButtons, {
   Item,
 } from '../../components/Overrides/CustomHeaderButton';
 import AnimatedFAB from '../../components/Animations/AnimatedFAB';
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from '../../managers/ThemeManager';
 import ConnectionManager from '../../managers/ConnectionManager';
 import LogoutDialog from '../../components/Amicale/LogoutDialog';
 import AsyncStorageManager from '../../managers/AsyncStorageManager';
@@ -78,7 +78,7 @@ type RawDashboardType = {
 type PropsType = {
   navigation: StackNavigationProp,
   route: {params: {nextScreen: string, data: {...}}},
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 type StateType = {

src/screens/Other/FeedbackScreen.js

@@ -1,14 +1,14 @@
 // @flow
 
 import * as React from 'react';
-import {Avatar, Button, Card, Paragraph, withTheme} from 'react-native-paper';
+import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
-import i18n from 'i18n-js';
+import i18n from "i18n-js";
-import {Linking} from 'react-native';
+import {Linking} from "react-native";
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from "../../managers/ThemeManager";
-import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
-type PropsType = {
+type Props = {
-  theme: CustomThemeType,
+    theme: CustomTheme
 };
 
 const links = {
@@ -18,118 +18,95 @@ Informations sur ton système si tu sais (iOS ou Android, modèle du tel, versio
 Nature du problème :\n\n\n
 Étapes pour reproduire ce pb :\n\n\n\n
 Stp corrige le pb, bien cordialement.`,
-  bugsGit:
+    bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
-    'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
+    facebook: "https://www.facebook.com/campus.insat",
-  facebook: 'https://www.facebook.com/campus.insat',
     feedbackMail: `mailto:app@amicale-insat.fr?subject=[FEEDBACK] Application CAMPUS
 &body=Coucou Arnaud j'ai du feedback\n\n\n\nBien cordialement.`,
-  feedbackGit:
+    feedbackGit: "https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new",
-    'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
+}
-};
+
+class FeedbackScreen extends React.Component<Props> {
 
-class FeedbackScreen extends React.Component<PropsType> {
     /**
      * Gets link buttons
      *
      * @param isBug True if buttons should redirect to bug report methods
      * @returns {*}
      */
-  static getButtons(isBug: boolean): React.Node {
+    getButtons(isBug: boolean) {
         return (
-      <Card.Actions
+            <Card.Actions style={{
-        style={{
                 flex: 1,
                 flexWrap: 'wrap',
             }}>
                 <Button
                     icon="email"
-          mode="contained"
+                    mode={"contained"}
                     style={{
                         marginLeft: 'auto',
                         marginTop: 5,
                     }}
-          onPress={() => {
+                    onPress={() => Linking.openURL(isBug ? links.bugsMail : links.feedbackMail)}>
-            Linking.openURL(isBug ? links.bugsMail : links.feedbackMail);
-          }}>
                     MAIL
                 </Button>
                 <Button
                     icon="git"
-          mode="contained"
+                    mode={"contained"}
-          color="#609927"
+                    color={"#609927"}
                     style={{
                         marginLeft: 'auto',
                         marginTop: 5,
                     }}
-          onPress={() => {
+                    onPress={() => Linking.openURL(isBug ? links.bugsGit : links.feedbackGit)}>
-            Linking.openURL(isBug ? links.bugsGit : links.feedbackGit);
-          }}>
                     GITEA
                 </Button>
                 <Button
                     icon="facebook"
-          mode="contained"
+                    mode={"contained"}
-          color="#2e88fe"
+                    color={"#2e88fe"}
                     style={{
                         marginLeft: 'auto',
                         marginTop: 5,
                     }}
-          onPress={() => {
+                    onPress={() => Linking.openURL(links.facebook)}>
-            Linking.openURL(links.facebook);
-          }}>
                     Facebook
                 </Button>
             </Card.Actions>
         );
     }
 
-  render(): React.Node {
+    render() {
-    const {theme} = this.props;
         return (
             <CollapsibleScrollView style={{padding: 5}}>
                 <Card>
                     <Card.Title
                         title={i18n.t('screens.feedback.bugs')}
                         subtitle={i18n.t('screens.feedback.bugsSubtitle')}
-            left={({
+                        left={(props) => <Avatar.Icon {...props} icon="bug"/>}
-              size,
-              color,
-            }: {
-              size: number,
-              color: number,
-            }): React.Node => (
-              <Avatar.Icon size={size} color={color} icon="bug" />
-            )}
                     />
                     <Card.Content>
-            <Paragraph>{i18n.t('screens.feedback.bugsDescription')}</Paragraph>
+                        <Paragraph>
-            <Paragraph style={{color: theme.colors.primary}}>
+                            {i18n.t('screens.feedback.bugsDescription')}
+                        </Paragraph>
+                        <Paragraph style={{color: this.props.theme.colors.primary}}>
                             {i18n.t('screens.feedback.contactMeans')}
                         </Paragraph>
                     </Card.Content>
-          {FeedbackScreen.getButtons(true)}
+                    {this.getButtons(true)}
                 </Card>
 
                 <Card style={{marginTop: 20, marginBottom: 10}}>
                     <Card.Title
                         title={i18n.t('screens.feedback.title')}
                         subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
-            left={({
+                        left={(props) => <Avatar.Icon {...props} icon="comment"/>}
-              size,
-              color,
-            }: {
-              size: number,
-              color: number,
-            }): React.Node => (
-              <Avatar.Icon size={size} color={color} icon="comment" />
-            )}
                     />
                     <Card.Content>
                         <Paragraph>
                             {i18n.t('screens.feedback.feedbackDescription')}
                         </Paragraph>
                     </Card.Content>
-          {FeedbackScreen.getButtons(false)}
+                    {this.getButtons(false)}
                 </Card>
             </CollapsibleScrollView>
         );

src/screens/Other/Settings/SettingsScreen.js

@@ -1,25 +1,26 @@
 // @flow
 
 import * as React from 'react';
-import {View} from 'react-native';
+import {View} from "react-native";
-import i18n from 'i18n-js';
+import type {CustomTheme} from "../../../managers/ThemeManager";
-import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
-import {Appearance} from 'react-native-appearance';
-import {StackNavigationProp} from '@react-navigation/stack';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
 import ThemeManager from '../../../managers/ThemeManager';
-import AsyncStorageManager from '../../../managers/AsyncStorageManager';
+import i18n from "i18n-js";
-import CustomSlider from '../../../components/Overrides/CustomSlider';
+import AsyncStorageManager from "../../../managers/AsyncStorageManager";
-import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
+import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
+import {Appearance} from "react-native-appearance";
+import CustomSlider from "../../../components/Overrides/CustomSlider";
+import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  theme: CustomThemeType,
+    theme: CustomTheme,
 };
 
-type StateType = {
+type State = {
     nightMode: boolean,
     nightModeFollowSystem: boolean,
+    notificationReminderSelected: number,
     startScreenPickerSelected: string,
     isDebugUnlocked: boolean,
 };
@@ -27,7 +28,8 @@ type StateType = {
 /**
  * Class defining the Settings screen. This screen shows controls to modify app preferences.
  */
-class SettingsScreen extends React.Component<PropsType, StateType> {
+class SettingsScreen extends React.Component<Props, State> {
+
     savedNotificationReminder: number;
 
     /**
@@ -35,38 +37,37 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
      */
     constructor() {
         super();
-    const notifReminder = AsyncStorageManager.getString(
+        let notifReminder = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.proxiwashNotifications.key);
-      AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
+        this.savedNotificationReminder = parseInt(notifReminder);
-    );
+        if (isNaN(this.savedNotificationReminder))
-    this.savedNotificationReminder = parseInt(notifReminder, 10);
-    if (Number.isNaN(this.savedNotificationReminder))
             this.savedNotificationReminder = 0;
 
         this.state = {
             nightMode: ThemeManager.getNightMode(),
-      nightModeFollowSystem:
+            nightModeFollowSystem: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key)
-        AsyncStorageManager.getBool(
+                && Appearance.getColorScheme() !== 'no-preference',
-          AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
+            notificationReminderSelected: this.savedNotificationReminder,
-        ) && Appearance.getColorScheme() !== 'no-preference',
+            startScreenPickerSelected: AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key),
-      startScreenPickerSelected: AsyncStorageManager.getString(
+            isDebugUnlocked: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.debugUnlocked.key)
-        AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
-      ),
-      isDebugUnlocked: AsyncStorageManager.getBool(
-        AsyncStorageManager.PREFERENCES.debugUnlocked.key,
-      ),
         };
     }
 
+    /**
+     * Unlocks debug mode and saves its state to user preferences
+     */
+    unlockDebugMode = () => {
+        this.setState({isDebugUnlocked: true});
+        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.debugUnlocked.key, true);
+    }
+
     /**
      * Saves the value for the proxiwash reminder notification time
      *
      * @param value The value to store
      */
     onProxiwashNotifPickerValueChange = (value: number) => {
-    AsyncStorageManager.set(
+        this.setState({notificationReminderSelected: value});
-      AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
+        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.proxiwashNotifications.key, value);
-      value,
-    );
     };
 
     /**
@@ -77,10 +78,7 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
     onStartScreenPickerValueChange = (value: string) => {
         if (value != null) {
             this.setState({startScreenPickerSelected: value});
-      AsyncStorageManager.set(
+            AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.defaultStartScreen.key, value);
-        AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
-        value,
-      );
         }
     };
 
@@ -89,8 +87,7 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
      *
      * @returns {React.Node}
      */
-  getProxiwashNotifPicker(): React.Node {
+    getProxiwashNotifPicker() {
-    const {theme} = this.props;
         return (
             <CustomSlider
                 style={{flex: 1, marginHorizontal: 10, height: 50}}
@@ -99,8 +96,8 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
                 step={1}
                 value={this.savedNotificationReminder}
                 onValueChange={this.onProxiwashNotifPickerValueChange}
-        thumbTintColor={theme.colors.primary}
+                thumbTintColor={this.props.theme.colors.primary}
-        minimumTrackTintColor={theme.colors.primary}
+                minimumTrackTintColor={this.props.theme.colors.primary}
             />
         );
     }
@@ -110,18 +107,18 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
      *
      * @returns {React.Node}
      */
-  getStartScreenPicker(): React.Node {
+    getStartScreenPicker() {
-    const {startScreenPickerSelected} = this.state;
         return (
             <ToggleButton.Row
                 onValueChange={this.onStartScreenPickerValueChange}
-        value={startScreenPickerSelected}
+                value={this.state.startScreenPickerSelected}
-        style={{marginLeft: 'auto', marginRight: 'auto'}}>
+                style={{marginLeft: 'auto', marginRight: 'auto'}}
-        <ToggleButton icon="account-circle" value="services" />
+            >
-        <ToggleButton icon="tshirt-crew" value="proxiwash" />
+                <ToggleButton icon="account-circle" value="services"/>
-        <ToggleButton icon="triangle" value="home" />
+                <ToggleButton icon="tshirt-crew" value="proxiwash"/>
-        <ToggleButton icon="calendar-range" value="planning" />
+                <ToggleButton icon="triangle" value="home"/>
-        <ToggleButton icon="clock" value="planex" />
+                <ToggleButton icon="calendar-range" value="planning"/>
+                <ToggleButton icon="clock" value="planex"/>
             </ToggleButton.Row>
         );
     }
@@ -130,23 +127,18 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
      * Toggles night mode and saves it to preferences
      */
     onToggleNightMode = () => {
-    const {nightMode} = this.state;
+        ThemeManager.getInstance().setNightMode(!this.state.nightMode);
-    ThemeManager.getInstance().setNightMode(!nightMode);
+        this.setState({nightMode: !this.state.nightMode});
-    this.setState({nightMode: !nightMode});
     };
 
     onToggleNightModeFollowSystem = () => {
-    const {nightModeFollowSystem} = this.state;
+        const value = !this.state.nightModeFollowSystem;
-    const value = !nightModeFollowSystem;
         this.setState({nightModeFollowSystem: value});
-    AsyncStorageManager.set(
+        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key, value);
-      AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
-      value,
-    );
         if (value) {
             const nightMode = Appearance.getColorScheme() === 'dark';
             ThemeManager.getInstance().setNightMode(nightMode);
-      this.setState({nightMode});
+            this.setState({nightMode: nightMode});
         }
     };
 
@@ -160,129 +152,81 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
      * @param state The current state of the switch
      * @returns {React.Node}
      */
-  static getToggleItem(
+    getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) {
-    onPressCallback: () => void,
-    icon: string,
-    title: string,
-    subtitle: string,
-    state: boolean,
-  ): React.Node {
         return (
             <List.Item
                 title={title}
                 description={subtitle}
-        left={({size, color}: {size: number, color: number}): React.Node => (
+                left={props => <List.Icon {...props} icon={icon}/>}
-          <List.Icon size={size} color={color} icon={icon} />
+                right={() =>
-        )}
+                    <Switch
-        right={(): React.Node => (
+                        value={state}
-          <Switch value={state} onValueChange={onPressCallback} />
+                        onValueChange={onPressCallback}
-        )}
+                    />}
             />
         );
     }
 
-  getNavigateItem(
+    getNavigateItem(route: string, icon: string, title: string, subtitle: string, onLongPress?: () => void) {
-    route: string,
-    icon: string,
-    title: string,
-    subtitle: string,
-    onLongPress?: () => void,
-  ): React.Node {
-    const {navigation} = this.props;
         return (
             <List.Item
                 title={title}
                 description={subtitle}
-        onPress={() => {
+                onPress={() => this.props.navigation.navigate(route)}
-          navigation.navigate(route);
+                left={props => <List.Icon {...props} icon={icon}/>}
-        }}
+                right={props => <List.Icon {...props} icon={"chevron-right"}/>}
-        left={({size, color}: {size: number, color: number}): React.Node => (
-          <List.Icon size={size} color={color} icon={icon} />
-        )}
-        right={({size, color}: {size: number, color: number}): React.Node => (
-          <List.Icon size={size} color={color} icon="chevron-right" />
-        )}
                 onLongPress={onLongPress}
             />
         );
     }
 
-  /**
+    render() {
-   * Unlocks debug mode and saves its state to user preferences
-   */
-  unlockDebugMode = () => {
-    this.setState({isDebugUnlocked: true});
-    AsyncStorageManager.set(
-      AsyncStorageManager.PREFERENCES.debugUnlocked.key,
-      true,
-    );
-  };
-
-  render(): React.Node {
-    const {nightModeFollowSystem, nightMode, isDebugUnlocked} = this.state;
         return (
             <CollapsibleScrollView>
                 <Card style={{margin: 5}}>
-          <Card.Title title={i18n.t('screens.settings.generalCard')} />
+                    <Card.Title title={i18n.t('screens.settings.generalCard')}/>
                     <List.Section>
-            {Appearance.getColorScheme() !== 'no-preference'
+                        {Appearance.getColorScheme() !== 'no-preference' ? this.getToggleItem(
-              ? SettingsScreen.getToggleItem(
                             this.onToggleNightModeFollowSystem,
                             'theme-light-dark',
                             i18n.t('screens.settings.nightModeAuto'),
                             i18n.t('screens.settings.nightModeAutoSub'),
-                  nightModeFollowSystem,
+                            this.state.nightModeFollowSystem
-                )
+                        ) : null}
-              : null}
+                        {
-            {Appearance.getColorScheme() === 'no-preference' ||
+                            Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ?
-            !nightModeFollowSystem
+                                this.getToggleItem(
-              ? SettingsScreen.getToggleItem(
                                     this.onToggleNightMode,
                                     'theme-light-dark',
                                     i18n.t('screens.settings.nightMode'),
-                  nightMode
+                                    this.state.nightMode ?
-                    ? i18n.t('screens.settings.nightModeSubOn')
+                                        i18n.t('screens.settings.nightModeSubOn') :
-                    : i18n.t('screens.settings.nightModeSubOff'),
+                                        i18n.t('screens.settings.nightModeSubOff'),
-                  nightMode,
+                                    this.state.nightMode
-                )
+                                ) : null
-              : null}
+                        }
                         <List.Item
                             title={i18n.t('screens.settings.startScreen')}
                             description={i18n.t('screens.settings.startScreenSub')}
-              left={({
+                            left={props => <List.Icon {...props} icon="power"/>}
-                size,
-                color,
-              }: {
-                size: number,
-                color: number,
-              }): React.Node => (
-                <List.Icon size={size} color={color} icon="power" />
-              )}
                         />
                         {this.getStartScreenPicker()}
                         {this.getNavigateItem(
-              'dashboard-edit',
+                            "dashboard-edit",
-              'view-dashboard',
+                            "view-dashboard",
                             i18n.t('screens.settings.dashboard'),
-              i18n.t('screens.settings.dashboardSub'),
+                            i18n.t('screens.settings.dashboardSub')
                         )}
                     </List.Section>
                 </Card>
                 <Card style={{margin: 5}}>
-          <Card.Title title="Proxiwash" />
+                    <Card.Title title="Proxiwash"/>
                     <List.Section>
                         <List.Item
                             title={i18n.t('screens.settings.proxiwashNotifReminder')}
                             description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
-              left={({
+                            left={props => <List.Icon {...props} icon="washing-machine"/>}
-                size,
+                            opened={true}
-                color,
-              }: {
-                size: number,
-                color: number,
-              }): React.Node => (
-                <List.Icon size={size} color={color} icon="washing-machine" />
-              )}
                         />
                         <View style={{marginLeft: 30}}>
                             {this.getProxiwashNotifPicker()}
@@ -290,26 +234,26 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
                     </List.Section>
                 </Card>
                 <Card style={{margin: 5}}>
-          <Card.Title title={i18n.t('screens.settings.information')} />
+                    <Card.Title title={i18n.t('screens.settings.information')}/>
                     <List.Section>
-            {isDebugUnlocked
+                        {this.state.isDebugUnlocked
                             ? this.getNavigateItem(
-                  'debug',
+                                "debug",
-                  'bug-check',
+                                "bug-check",
                                 i18n.t('screens.debug.title'),
-                  '',
+                                ""
                             )
                             : null}
                         {this.getNavigateItem(
-              'about',
+                            "about",
-              'information',
+                            "information",
                             i18n.t('screens.about.title'),
                             i18n.t('screens.about.buttonDesc'),
                             this.unlockDebugMode,
                         )}
                         {this.getNavigateItem(
-              'feedback',
+                            "feedback",
-              'comment-quote',
+                            "comment-quote",
                             i18n.t('screens.feedback.homeButtonTitle'),
                             i18n.t('screens.feedback.homeButtonSubtitle'),
                         )}

src/screens/Planex/PlanexScreen.js

@@ -6,7 +6,7 @@ import i18n from 'i18n-js';
 import {View} from 'react-native';
 import {CommonActions} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from '../../managers/ThemeManager';
 import ThemeManager from '../../managers/ThemeManager';
 import WebViewScreen from '../../components/Screens/WebViewScreen';
 import AsyncStorageManager from '../../managers/AsyncStorageManager';
@@ -22,7 +22,7 @@ import MascotPopup from '../../components/Mascot/MascotPopup';
 type PropsType = {
   navigation: StackNavigationProp,
   route: {params: {group: PlanexGroupType}},
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 type StateType = {

src/screens/Planning/PlanningDisplayScreen.js

@@ -2,43 +2,40 @@
 
 import * as React from 'react';
 import {View} from 'react-native';
-import {Card, withTheme} from 'react-native-paper';
-import ImageModal from 'react-native-image-modal';
-import i18n from 'i18n-js';
-import {StackNavigationProp} from '@react-navigation/stack';
 import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
-import DateManager from '../../managers/DateManager';
+import {Card, withTheme} from 'react-native-paper';
-import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
+import DateManager from "../../managers/DateManager";
-import {apiRequest, ERROR_TYPE} from '../../utils/WebData';
+import ImageModal from 'react-native-image-modal';
-import ErrorView from '../../components/Screens/ErrorView';
+import BasicLoadingScreen from "../../components/Screens/BasicLoadingScreen";
-import CustomHTML from '../../components/Overrides/CustomHTML';
+import {apiRequest, ERROR_TYPE} from "../../utils/WebData";
-import CustomTabBar from '../../components/Tabbar/CustomTabBar';
+import ErrorView from "../../components/Screens/ErrorView";
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import CustomHTML from "../../components/Overrides/CustomHTML";
-import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
-import type {PlanningEventType} from '../../utils/Planning';
+import i18n from 'i18n-js';
+import {StackNavigationProp} from "@react-navigation/stack";
+import type {CustomTheme} from "../../managers/ThemeManager";
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  route: {params: {data: PlanningEventType, id: number, eventId: number}},
+    route: { params: { data: Object, id: number, eventId: number } },
-  theme: CustomThemeType,
+    theme: CustomTheme
 };
 
-type StateType = {
+type State = {
-  loading: boolean,
+    loading: boolean
 };
 
-const EVENT_INFO_URL = 'event/info';
+const CLUB_INFO_PATH = "event/info";
 
 /**
  * Class defining a planning event information page.
  */
-class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
+class PlanningDisplayScreen extends React.Component<Props, State> {
-  displayData: null | PlanningEventType;
 
+    displayData: Object;
     shouldFetchData: boolean;
-
     eventId: number;
-
     errorCode: number;
 
     /**
@@ -46,11 +43,11 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
      *
      * @param props
      */
-  constructor(props: PropsType) {
+    constructor(props) {
         super(props);
 
-    if (props.route.params.data != null) {
+        if (this.props.route.params.data != null) {
-      this.displayData = props.route.params.data;
+            this.displayData = this.props.route.params.data;
             this.eventId = this.displayData.id;
             this.shouldFetchData = false;
             this.errorCode = 0;
@@ -59,22 +56,33 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
             };
         } else {
             this.displayData = null;
-      this.eventId = props.route.params.eventId;
+            this.eventId = this.props.route.params.eventId;
             this.shouldFetchData = true;
             this.errorCode = 0;
             this.state = {
                 loading: true,
             };
             this.fetchData();
+
         }
     }
 
+    /**
+     * Fetches data for the current event id from the API
+     */
+    fetchData = () => {
+        this.setState({loading: true});
+        apiRequest(CLUB_INFO_PATH, 'POST', {id: this.eventId})
+            .then(this.onFetchSuccess)
+            .catch(this.onFetchError);
+    };
+
     /**
      * Hides loading and saves fetched data
      *
      * @param data Received data
      */
-  onFetchSuccess = (data: PlanningEventType) => {
+    onFetchSuccess = (data: Object) => {
         this.displayData = data;
         this.setState({loading: false});
     };
@@ -94,46 +102,41 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
      *
      * @returns {*}
      */
-  getContent(): React.Node {
+    getContent() {
-    const {theme} = this.props;
-    const {displayData} = this;
-    if (displayData == null) return null;
         let subtitle = getFormattedEventTime(
-      displayData.date_begin,
+            this.displayData["date_begin"], this.displayData["date_end"]);
-      displayData.date_end,
+        let dateString = getDateOnlyString(this.displayData["date_begin"]);
-    );
-    const dateString = getDateOnlyString(displayData.date_begin);
         if (dateString !== null)
-      subtitle += ` | ${DateManager.getInstance().getTranslatedDate(
+            subtitle += ' | ' + DateManager.getInstance().getTranslatedDate(dateString);
-        dateString,
-      )}`;
         return (
-      <CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab>
+            <CollapsibleScrollView
-        <Card.Title title={displayData.title} subtitle={subtitle} />
+                style={{paddingLeft: 5, paddingRight: 5}}
-        {displayData.logo !== null ? (
+                hasTab={true}
+            >
+                <Card.Title
+                    title={this.displayData.title}
+                    subtitle={subtitle}
+                />
+                {this.displayData.logo !== null ?
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
                         <ImageModal
                             resizeMode="contain"
-              imageBackgroundColor={theme.colors.background}
+                            imageBackgroundColor={this.props.theme.colors.background}
                             style={{
                                 width: 300,
                                 height: 300,
                             }}
                             source={{
-                uri: displayData.logo,
+                                uri: this.displayData.logo,
                             }}
-            />
+                        /></View>
-          </View>
+                    : <View/>}
-        ) : null}
 
-        {displayData.description !== null ? (
+                {this.displayData.description !== null ?
-          <Card.Content
+                    <Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
-            style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
+                        <CustomHTML html={this.displayData.description}/>
-            <CustomHTML html={displayData.description} />
                     </Card.Content>
-        ) : (
+                    : <View/>}
-          <View />
-        )}
             </CollapsibleScrollView>
         );
     }
@@ -143,40 +146,20 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
      *
      * @returns {*}
      */
-  getErrorView(): React.Node {
+    getErrorView() {
-    const {navigation} = this.props;
         if (this.errorCode === ERROR_TYPE.BAD_INPUT)
-      return (
+            return <ErrorView {...this.props} showRetryButton={false} message={i18n.t("screens.planning.invalidEvent")}
-        <ErrorView
+                              icon={"calendar-remove"}/>;
-          navigation={navigation}
+        else
-          showRetryButton={false}
+            return <ErrorView {...this.props} errorCode={this.errorCode} onRefresh={this.fetchData}/>;
-          message={i18n.t('screens.planning.invalidEvent')}
-          icon="calendar-remove"
-        />
-      );
-    return (
-      <ErrorView
-        navigation={navigation}
-        errorCode={this.errorCode}
-        onRefresh={this.fetchData}
-      />
-    );
     }
 
-  /**
+    render() {
-   * Fetches data for the current event id from the API
+        if (this.state.loading)
-   */
+            return <BasicLoadingScreen/>;
-  fetchData = () => {
+        else if (this.errorCode === 0)
-    this.setState({loading: true});
+            return this.getContent();
-    apiRequest(EVENT_INFO_URL, 'POST', {id: this.eventId})
+        else
-      .then(this.onFetchSuccess)
-      .catch(this.onFetchError);
-  };
-
-  render(): React.Node {
-    const {loading} = this.state;
-    if (loading) return <BasicLoadingScreen />;
-    if (this.errorCode === 0) return this.getContent();
             return this.getErrorView();
     }
 }

src/screens/Planning/PlanningScreen.js

@@ -2,120 +2,91 @@
 
 import * as React from 'react';
 import {BackHandler, View} from 'react-native';
-import i18n from 'i18n-js';
+import i18n from "i18n-js";
-import {Agenda, LocaleConfig} from 'react-native-calendars';
+import {LocaleConfig} from 'react-native-calendars';
-import {Avatar, Divider, List} from 'react-native-paper';
+import {readData} from "../../utils/WebData";
-import {StackNavigationProp} from '@react-navigation/stack';
+import type {eventObject} from "../../utils/Planning";
-import {readData} from '../../utils/WebData';
-import type {PlanningEventType} from '../../utils/Planning';
 import {
     generateEventAgenda,
     getCurrentDateString,
     getDateOnlyString,
     getFormattedEventTime,
 } from '../../utils/Planning';
-import CustomAgenda from '../../components/Overrides/CustomAgenda';
+import {Avatar, Divider, List} from 'react-native-paper';
-import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
+import CustomAgenda from "../../components/Overrides/CustomAgenda";
-import MascotPopup from '../../components/Mascot/MascotPopup';
+import {StackNavigationProp} from "@react-navigation/stack";
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
+import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import MascotPopup from "../../components/Mascot/MascotPopup";
+import AsyncStorageManager from "../../managers/AsyncStorageManager";
 
-LocaleConfig.locales.fr = {
+LocaleConfig.locales['fr'] = {
-  monthNames: [
+    monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
-    'Janvier',
+    monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
-    'Février',
+    dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
-    'Mars',
-    'Avril',
-    'Mai',
-    'Juin',
-    'Juillet',
-    'Août',
-    'Septembre',
-    'Octobre',
-    'Novembre',
-    'Décembre',
-  ],
-  monthNamesShort: [
-    'Janv.',
-    'Févr.',
-    'Mars',
-    'Avril',
-    'Mai',
-    'Juin',
-    'Juil.',
-    'Août',
-    'Sept.',
-    'Oct.',
-    'Nov.',
-    'Déc.',
-  ],
-  dayNames: [
-    'Dimanche',
-    'Lundi',
-    'Mardi',
-    'Mercredi',
-    'Jeudi',
-    'Vendredi',
-    'Samedi',
-  ],
     dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
-  today: "Aujourd'hui",
+    today: 'Aujourd\'hui'
 };
 
-type PropsType = {
+
+type Props = {
     navigation: StackNavigationProp,
-};
+}
 
-type StateType = {
+type State = {
     refreshing: boolean,
-  agendaItems: {[key: string]: Array<PlanningEventType>},
+    agendaItems: Object,
     calendarShowing: boolean,
 };
 
-const FETCH_URL = 'https://www.amicale-insat.fr/api/event/list';
+const FETCH_URL = "https://www.amicale-insat.fr/api/event/list";
 const AGENDA_MONTH_SPAN = 3;
 
 /**
  * Class defining the app's planning screen
  */
-class PlanningScreen extends React.Component<PropsType, StateType> {
+class PlanningScreen extends React.Component<Props, State> {
-  agendaRef: null | Agenda;
+
+    agendaRef: Object;
 
     lastRefresh: Date;
-
     minTimeBetweenRefresh = 60;
 
-  currentDate = getDateOnlyString(getCurrentDateString());
+    state = {
-
-  constructor(props: PropsType) {
-    super(props);
-    if (i18n.currentLocale().startsWith('fr')) {
-      LocaleConfig.defaultLocale = 'fr';
-    }
-    this.state = {
         refreshing: false,
         agendaItems: {},
         calendarShowing: false,
     };
+
+    currentDate = getDateOnlyString(getCurrentDateString());
+
+    constructor(props: any) {
+        super(props);
+        if (i18n.currentLocale().startsWith("fr")) {
+            LocaleConfig.defaultLocale = 'fr';
+        }
     }
 
     /**
      * Captures focus and blur events to hook on android back button
      */
     componentDidMount() {
-    const {navigation} = this.props;
         this.onRefresh();
-    navigation.addListener('focus', () => {
+        this.props.navigation.addListener(
+            'focus',
+            () =>
                 BackHandler.addEventListener(
                     'hardwareBackPress',
-        this.onBackButtonPressAndroid,
+                    this.onBackButtonPressAndroid
+                )
         );
-    });
+        this.props.navigation.addListener(
-    navigation.addListener('blur', () => {
+            'blur',
+            () =>
                 BackHandler.removeEventListener(
                     'hardwareBackPress',
-        this.onBackButtonPressAndroid,
+                    this.onBackButtonPressAndroid
+                )
         );
-    });
     }
 
     /**
@@ -123,33 +94,46 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
      *
      * @return {boolean}
      */
-  onBackButtonPressAndroid = (): boolean => {
+    onBackButtonPressAndroid = () => {
-    const {calendarShowing} = this.state;
+        if (this.state.calendarShowing) {
-    if (calendarShowing && this.agendaRef != null) {
             this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
             return true;
-    }
+        } else {
             return false;
+        }
     };
 
+    /**
+     * Function used to check if a row has changed
+     *
+     * @param r1
+     * @param r2
+     * @return {boolean}
+     */
+    rowHasChanged(r1: Object, r2: Object) {
+        return false;
+        // if (r1 !== undefined && r2 !== undefined)
+        //     return r1.title !== r2.title;
+        // else return !(r1 === undefined && r2 === undefined);
+    }
+
     /**
      * Refreshes data and shows an animation while doing it
      */
     onRefresh = () => {
         let canRefresh;
         if (this.lastRefresh !== undefined)
-      canRefresh =
+            canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) / 1000 > this.minTimeBetweenRefresh;
-        (new Date().getTime() - this.lastRefresh.getTime()) / 1000 >
+        else
-        this.minTimeBetweenRefresh;
+            canRefresh = true;
-    else canRefresh = true;
 
         if (canRefresh) {
             this.setState({refreshing: true});
             readData(FETCH_URL)
-        .then((fetchedData: Array<PlanningEventType>) => {
+                .then((fetchedData) => {
                     this.setState({
                         refreshing: false,
-            agendaItems: generateEventAgenda(fetchedData, AGENDA_MONTH_SPAN),
+                        agendaItems: generateEventAgenda(fetchedData, AGENDA_MONTH_SPAN)
                     });
                     this.lastRefresh = new Date();
                 })
@@ -166,9 +150,9 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
      *
      * @param ref
      */
-  onAgendaRef = (ref: Agenda) => {
+    onAgendaRef = (ref: Object) => {
         this.agendaRef = ref;
-  };
+    }
 
     /**
      * Callback used when a button is pressed to toggle the calendar
@@ -177,7 +161,7 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
      */
     onCalendarToggled = (isCalendarOpened: boolean) => {
         this.setState({calendarShowing: isCalendarOpened});
-  };
+    }
 
     /**
      * Gets an event render item
@@ -185,61 +169,53 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
      * @param item The current event to render
      * @return {*}
      */
-  getRenderItem = (item: PlanningEventType): React.Node => {
+    getRenderItem = (item: eventObject) => {
-    const {navigation} = this.props;
+        const onPress = this.props.navigation.navigate.bind(this, 'planning-information', {data: item});
-    const onPress = () => {
-      navigation.navigate('planning-information', {
-        data: item,
-      });
-    };
         if (item.logo !== null) {
             return (
                 <View>
-          <Divider />
+                    <Divider/>
                     <List.Item
                         title={item.title}
-            description={getFormattedEventTime(item.date_begin, item.date_end)}
+                        description={getFormattedEventTime(item["date_begin"], item["date_end"])}
-            left={(): React.Node => (
+                        left={() => <Avatar.Image
-              <Avatar.Image
                             source={{uri: item.logo}}
                             style={{backgroundColor: 'transparent'}}
+                        />}
+                        onPress={onPress}
                     />
-            )}
+                </View>
+            );
+        } else {
+            return (
+                <View>
+                    <Divider/>
+                    <List.Item
+                        title={item.title}
+                        description={getFormattedEventTime(item["date_begin"], item["date_end"])}
                         onPress={onPress}
                     />
                 </View>
             );
         }
-    return (
+    }
-      <View>
-        <Divider />
-        <List.Item
-          title={item.title}
-          description={getFormattedEventTime(item.date_begin, item.date_end)}
-          onPress={onPress}
-        />
-      </View>
-    );
-  };
 
     /**
      * Gets an empty render item for an empty date
      *
      * @return {*}
      */
-  getRenderEmptyDate = (): React.Node => <Divider />;
+    getRenderEmptyDate = () => <Divider/>;
 
-  render(): React.Node {
+    render() {
-    const {state, props} = this;
         return (
             <View style={{flex: 1}}>
                 <CustomAgenda
-          // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this.props}
-          {...props}
                     // the list of items that have to be displayed in agenda. If you want to render item as empty date
                     // the value of date key kas to be an empty array []. If there exists no value for date key it is
                     // considered that the date in question is not yet loaded
-          items={state.agendaItems}
+                    items={this.state.agendaItems}
                     // initially selected day
                     selected={this.currentDate}
                     // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
@@ -253,9 +229,10 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
                     // callback that fires when the calendar is opened or closed
                     onCalendarToggled={this.onCalendarToggled}
                     // Set this true while waiting for new data from a refresh
-          refreshing={state.refreshing}
+                    refreshing={this.state.refreshing}
                     renderItem={this.getRenderItem}
                     renderEmptyDate={this.getRenderEmptyDate}
+                    rowHasChanged={this.rowHasChanged}
                     // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
                     firstDay={1}
                     // ref to this agenda in order to handle back button event
@@ -263,15 +240,15 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
                 />
                 <MascotPopup
                     prefKey={AsyncStorageManager.PREFERENCES.eventsShowBanner.key}
-          title={i18n.t('screens.planning.mascotDialog.title')}
+                    title={i18n.t("screens.planning.mascotDialog.title")}
-          message={i18n.t('screens.planning.mascotDialog.message')}
+                    message={i18n.t("screens.planning.mascotDialog.message")}
-          icon="party-popper"
+                    icon={"party-popper"}
                     buttons={{
                         action: null,
                         cancel: {
-              message: i18n.t('screens.planning.mascotDialog.button'),
+                            message: i18n.t("screens.planning.mascotDialog.button"),
-              icon: 'check',
+                            icon: "check",
-            },
+                        }
                     }}
                     emotion={MASCOT_STYLE.HAPPY}
                 />

src/screens/Proxiwash/ProxiwashAboutScreen.js

@@ -2,48 +2,43 @@
 
 import * as React from 'react';
 import {Image, View} from 'react-native';
-import i18n from 'i18n-js';
+import i18n from "i18n-js";
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
-import CustomTabBar from '../../components/Tabbar/CustomTabBar';
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
-import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
 
-const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
+type Props = {};
+
+const LOGO = "https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png";
 
 /**
  * Class defining the proxiwash about screen.
  */
-// eslint-disable-next-line react/prefer-stateless-function
+export default class ProxiwashAboutScreen extends React.Component<Props> {
-export default class ProxiwashAboutScreen extends React.Component<null> {
+
-  render(): React.Node {
+    render() {
         return (
-      <CollapsibleScrollView style={{padding: 5}} hasTab>
+            <CollapsibleScrollView
-        <View
+                style={{padding: 5}}
-          style={{
+                hasTab={true}
+            >
+                <View style={{
                     width: '100%',
                     height: 100,
                     marginTop: 20,
                     marginBottom: 20,
                     justifyContent: 'center',
-            alignItems: 'center',
+                    alignItems: 'center'
                 }}>
                     <Image
                         source={{uri: LOGO}}
-            style={{height: '100%', width: '100%', resizeMode: 'contain'}}
+                        style={{height: '100%', width: '100%', resizeMode: "contain"}}/>
-          />
                 </View>
                 <Text>{i18n.t('screens.proxiwash.description')}</Text>
                 <Card style={{margin: 5}}>
                     <Card.Title
                         title={i18n.t('screens.proxiwash.dryer')}
-            left={({
+                        left={props => <List.Icon {...props} icon={'tumble-dryer'}/>}
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="tumble-dryer" />
-            )}
                     />
                     <Card.Content>
                         <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
@@ -56,15 +51,7 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
                 <Card style={{margin: 5}}>
                     <Card.Title
                         title={i18n.t('screens.proxiwash.washer')}
-            left={({
+                        left={props => <List.Icon {...props} icon={'washing-machine'}/>}
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="washing-machine" />
-            )}
                     />
                     <Card.Content>
                         <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
@@ -77,39 +64,20 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
                 <Card style={{margin: 5}}>
                     <Card.Title
                         title={i18n.t('screens.proxiwash.tariffs')}
-            left={({
+                        left={props => <List.Icon {...props} icon={'circle-multiple'}/>}
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="circle-multiple" />
-            )}
                     />
                     <Card.Content>
                         <Paragraph>{i18n.t('screens.proxiwash.washersTariff')}</Paragraph>
                         <Paragraph>{i18n.t('screens.proxiwash.dryersTariff')}</Paragraph>
                     </Card.Content>
                 </Card>
-        <Card
+                <Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
-          style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
                     <Card.Title
                         title={i18n.t('screens.proxiwash.paymentMethods')}
-            left={({
+                        left={props => <List.Icon {...props} icon={'cash'}/>}
-              size,
-              color,
-            }: {
-              size: number,
-              color: string,
-            }): React.Node => (
-              <List.Icon size={size} color={color} icon="cash" />
-            )}
                     />
                     <Card.Content>
-            <Paragraph>
+                        <Paragraph>{i18n.t('screens.proxiwash.paymentMethodsDescription')}</Paragraph>
-              {i18n.t('screens.proxiwash.paymentMethodsDescription')}
-            </Paragraph>
                     </Card.Content>
                 </Card>
             </CollapsibleScrollView>

src/screens/Proxiwash/ProxiwashScreen.js

@@ -2,40 +2,32 @@
 
 import * as React from 'react';
 import {Alert, View} from 'react-native';
-import i18n from 'i18n-js';
+import i18n from "i18n-js";
+import WebSectionList from "../../components/Screens/WebSectionList";
+import * as Notifications from "../../utils/Notifications";
+import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper';
-import {StackNavigationProp} from '@react-navigation/stack';
+import ProxiwashListItem from "../../components/Lists/Proxiwash/ProxiwashListItem";
-import {Modalize} from 'react-native-modalize';
+import ProxiwashConstants from "../../constants/ProxiwashConstants";
-import WebSectionList from '../../components/Screens/WebSectionList';
+import CustomModal from "../../components/Overrides/CustomModal";
-import * as Notifications from '../../utils/Notifications';
+import AprilFoolsManager from "../../managers/AprilFoolsManager";
-import AsyncStorageManager from '../../managers/AsyncStorageManager';
+import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
-import ProxiwashListItem from '../../components/Lists/Proxiwash/ProxiwashListItem';
+import ProxiwashSectionHeader from "../../components/Lists/Proxiwash/ProxiwashSectionHeader";
-import ProxiwashConstants from '../../constants/ProxiwashConstants';
+import type {CustomTheme} from "../../managers/ThemeManager";
-import CustomModal from '../../components/Overrides/CustomModal';
+import {StackNavigationProp} from "@react-navigation/stack";
-import AprilFoolsManager from '../../managers/AprilFoolsManager';
+import {getCleanedMachineWatched, getMachineEndDate, isMachineWatched} from "../../utils/Proxiwash";
-import MaterialHeaderButtons, {
+import {Modalize} from "react-native-modalize";
-  Item,
+import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
-} from '../../components/Overrides/CustomHeaderButton';
+import MascotPopup from "../../components/Mascot/MascotPopup";
-import ProxiwashSectionHeader from '../../components/Lists/Proxiwash/ProxiwashSectionHeader';
-import type {CustomThemeType} from '../../managers/ThemeManager';
-import {
-  getCleanedMachineWatched,
-  getMachineEndDate,
-  isMachineWatched,
-} from '../../utils/Proxiwash';
-import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
-import MascotPopup from '../../components/Mascot/MascotPopup';
-import type {SectionListDataType} from '../../components/Screens/WebSectionList';
 
-const DATA_URL =
+const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json";
-  'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json';
 
-const modalStateStrings = {};
+let modalStateStrings = {};
 
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
 const LIST_ITEM_HEIGHT = 64;
 
-export type ProxiwashMachineType = {
+export type Machine = {
     number: string,
     state: string,
     startTime: string,
@@ -43,89 +35,62 @@ export type ProxiwashMachineType = {
     donePercent: string,
     remainingTime: string,
     program: string,
-};
+}
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  theme: CustomThemeType,
+    theme: CustomTheme,
+}
+
+type State = {
+    refreshing: boolean,
+    modalCurrentDisplayItem: React.Node,
+    machinesWatched: Array<Machine>,
 };
 
-type StateType = {
-  modalCurrentDisplayItem: React.Node,
-  machinesWatched: Array<ProxiwashMachineType>,
-};
 
 /**
  * Class defining the app's proxiwash screen. This screen shows information about washing machines and
  * dryers, taken from a scrapper reading proxiwash website
  */
-class ProxiwashScreen extends React.Component<PropsType, StateType> {
+class ProxiwashScreen extends React.Component<Props, State> {
-  /**
-   * Shows a warning telling the user notifications are disabled for the app
-   */
-  static showNotificationsDisabledWarning() {
-    Alert.alert(
-      i18n.t('screens.proxiwash.modal.notificationErrorTitle'),
-      i18n.t('screens.proxiwash.modal.notificationErrorDescription'),
-    );
-  }
 
     modalRef: null | Modalize;
 
     fetchedData: {
-    dryers: Array<ProxiwashMachineType>,
+        dryers: Array<Machine>,
-    washers: Array<ProxiwashMachineType>,
+        washers: Array<Machine>,
+    };
+
+    state = {
+        refreshing: false,
+        modalCurrentDisplayItem: null,
+        machinesWatched: AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key),
     };
 
     /**
      * Creates machine state parameters using current theme and translations
      */
-  constructor() {
+    constructor(props) {
-    super();
+        super(props);
-    this.state = {
+        modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t('screens.proxiwash.modal.ready');
-      modalCurrentDisplayItem: null,
+        modalStateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t('screens.proxiwash.modal.running');
-      machinesWatched: AsyncStorageManager.getObject(
+        modalStateStrings[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = i18n.t('screens.proxiwash.modal.runningNotStarted');
-        AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
+        modalStateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t('screens.proxiwash.modal.finished');
-      ),
+        modalStateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t('screens.proxiwash.modal.broken');
-    };
+        modalStateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t('screens.proxiwash.modal.error');
-    modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
+        modalStateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t('screens.proxiwash.modal.unknown');
-      'screens.proxiwash.modal.ready',
-    );
-    modalStateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t(
-      'screens.proxiwash.modal.running',
-    );
-    modalStateStrings[
-      ProxiwashConstants.machineStates.RUNNING_NOT_STARTED
-    ] = i18n.t('screens.proxiwash.modal.runningNotStarted');
-    modalStateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t(
-      'screens.proxiwash.modal.finished',
-    );
-    modalStateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t(
-      'screens.proxiwash.modal.broken',
-    );
-    modalStateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t(
-      'screens.proxiwash.modal.error',
-    );
-    modalStateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t(
-      'screens.proxiwash.modal.unknown',
-    );
     }
 
     /**
      * Setup notification channel for android and add listeners to detect notifications fired
      */
     componentDidMount() {
-    const {navigation} = this.props;
+        this.props.navigation.setOptions({
-    navigation.setOptions({
+            headerRight: () =>
-      headerRight: (): React.Node => (
                 <MaterialHeaderButtons>
-          <Item
+                    <Item title="information" iconName="information" onPress={this.onAboutPress}/>
-            title="information"
+                </MaterialHeaderButtons>,
-            iconName="information"
-            onPress={this.onAboutPress}
-          />
-        </MaterialHeaderButtons>
-      ),
         });
     }
 
@@ -133,158 +98,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
      * Callback used when pressing the about button.
      * This will open the ProxiwashAboutScreen.
      */
-  onAboutPress = () => {
+    onAboutPress = () => this.props.navigation.navigate('proxiwash-about');
-    const {navigation} = this.props;
-    navigation.navigate('proxiwash-about');
-  };
-
-  /**
-   * Callback used when the user clicks on enable notifications for a machine
-   *
-   * @param machine The machine to set notifications for
-   */
-  onSetupNotificationsPress(machine: ProxiwashMachineType) {
-    if (this.modalRef) {
-      this.modalRef.close();
-    }
-    this.setupNotifications(machine);
-  }
-
-  /**
-   * Callback used when receiving modal ref
-   *
-   * @param ref
-   */
-  onModalRef = (ref: Modalize) => {
-    this.modalRef = ref;
-  };
-
-  /**
-   * Generates the modal content.
-   * This shows information for the given machine.
-   *
-   * @param title The title to use
-   * @param item The item to display information for in the modal
-   * @param isDryer True if the given item is a dryer
-   * @return {*}
-   */
-  getModalContent(
-    title: string,
-    item: ProxiwashMachineType,
-    isDryer: boolean,
-  ): React.Node {
-    const {props, state} = this;
-    let button = {
-      text: i18n.t('screens.proxiwash.modal.ok'),
-      icon: '',
-      onPress: undefined,
-    };
-    let message = modalStateStrings[item.state];
-    const onPress = this.onSetupNotificationsPress.bind(this, item);
-    if (item.state === ProxiwashConstants.machineStates.RUNNING) {
-      let remainingTime = parseInt(item.remainingTime, 10);
-      if (remainingTime < 0) remainingTime = 0;
-
-      button = {
-        text: isMachineWatched(item, state.machinesWatched)
-          ? i18n.t('screens.proxiwash.modal.disableNotifications')
-          : i18n.t('screens.proxiwash.modal.enableNotifications'),
-        icon: '',
-        onPress,
-      };
-      message = i18n.t('screens.proxiwash.modal.running', {
-        start: item.startTime,
-        end: item.endTime,
-        remaining: remainingTime,
-        program: item.program,
-      });
-    } else if (item.state === ProxiwashConstants.machineStates.AVAILABLE) {
-      if (isDryer) message += `\n${i18n.t('screens.proxiwash.dryersTariff')}`;
-      else message += `\n${i18n.t('screens.proxiwash.washersTariff')}`;
-    }
-    return (
-      <View
-        style={{
-          flex: 1,
-          padding: 20,
-        }}>
-        <Card.Title
-          title={title}
-          left={(): React.Node => (
-            <Avatar.Icon
-              icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
-              color={props.theme.colors.text}
-              style={{backgroundColor: 'transparent'}}
-            />
-          )}
-        />
-        <Card.Content>
-          <Text>{message}</Text>
-        </Card.Content>
-
-        {button.onPress !== undefined ? (
-          <Card.Actions>
-            <Button
-              icon={button.icon}
-              mode="contained"
-              onPress={button.onPress}
-              style={{marginLeft: 'auto', marginRight: 'auto'}}>
-              {button.text}
-            </Button>
-          </Card.Actions>
-        ) : null}
-      </View>
-    );
-  }
-
-  /**
-   * Gets the section render item
-   *
-   * @param section The section to render
-   * @return {*}
-   */
-  getRenderSectionHeader = ({
-    section,
-  }: {
-    section: {title: string},
-  }): React.Node => {
-    const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
-    const nbAvailable = this.getMachineAvailableNumber(isDryer);
-    return (
-      <ProxiwashSectionHeader
-        title={section.title}
-        nbAvailable={nbAvailable}
-        isDryer={isDryer}
-      />
-    );
-  };
-
-  /**
-   * Gets the list item to be rendered
-   *
-   * @param item The object containing the item's FetchedData
-   * @param section The object describing the current SectionList section
-   * @returns {React.Node}
-   */
-  getRenderItem = ({
-    item,
-    section,
-  }: {
-    item: ProxiwashMachineType,
-    section: {title: string},
-  }): React.Node => {
-    const {machinesWatched} = this.state;
-    const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
-    return (
-      <ProxiwashListItem
-        item={item}
-        onPress={this.showModal}
-        isWatched={isMachineWatched(item, machinesWatched)}
-        isDryer={isDryer}
-        height={LIST_ITEM_HEIGHT}
-      />
-    );
-  };
 
     /**
      * Extracts the key for the given item
@@ -292,7 +106,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
      * @param item The item to extract the key from
      * @return {*} The extracted key
      */
-  getKeyExtractor = (item: ProxiwashMachineType): string => item.number;
+    getKeyExtractor = (item: Machine) => item.number;
 
     /**
      * Setups notifications for the machine with the given ID.
@@ -301,58 +115,72 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
      *
      * @param machine The machine to watch
      */
-  setupNotifications(machine: ProxiwashMachineType) {
+    setupNotifications(machine: Machine) {
-    const {machinesWatched} = this.state;
+        if (!isMachineWatched(machine, this.state.machinesWatched)) {
-    if (!isMachineWatched(machine, machinesWatched)) {
+            Notifications.setupMachineNotification(machine.number, true, getMachineEndDate(machine))
-      Notifications.setupMachineNotification(
-        machine.number,
-        true,
-        getMachineEndDate(machine),
-      )
                 .then(() => {
                     this.saveNotificationToState(machine);
                 })
                 .catch(() => {
-          ProxiwashScreen.showNotificationsDisabledWarning();
+                    this.showNotificationsDisabledWarning();
                 });
         } else {
-      Notifications.setupMachineNotification(machine.number, false, null).then(
+            Notifications.setupMachineNotification(machine.number, false, null)
-        () => {
+                .then(() => {
                     this.removeNotificationFromState(machine);
-        },
+                });
+        }
+    }
+
+    /**
+     * Shows a warning telling the user notifications are disabled for the app
+     */
+    showNotificationsDisabledWarning() {
+        Alert.alert(
+            i18n.t("screens.proxiwash.modal.notificationErrorTitle"),
+            i18n.t("screens.proxiwash.modal.notificationErrorDescription"),
         );
     }
-  }
 
     /**
-   * Gets the number of machines available
+     * Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
      *
-   * @param isDryer True if we are only checking for dryer, false for washers
+     * @param machine
-   * @return {number} The number of machines available
      */
-  getMachineAvailableNumber(isDryer: boolean): number {
+    saveNotificationToState(machine: Machine) {
-    let data;
+        let data = this.state.machinesWatched;
-    if (isDryer) data = this.fetchedData.dryers;
+        data.push(machine);
-    else data = this.fetchedData.washers;
+        this.saveNewWatchedList(data);
-    let count = 0;
-    data.forEach((machine: ProxiwashMachineType) => {
-      if (machine.state === ProxiwashConstants.machineStates.AVAILABLE)
-        count += 1;
-    });
-    return count;
     }
 
     /**
-   * Creates the dataset to be used by the FlatList
+     * Removes the given index from the watchlist array and saves it to preferences
+     *
+     * @param machine
+     */
+    removeNotificationFromState(machine: Machine) {
+        let data = this.state.machinesWatched;
+        for (let i = 0; i < data.length; i++) {
+            if (data[i].number === machine.number && data[i].endTime === machine.endTime) {
+                data.splice(i, 1);
+                break;
+            }
+        }
+        this.saveNewWatchedList(data);
+    }
+
+    saveNewWatchedList(list: Array<Machine>) {
+        this.setState({machinesWatched: list});
+        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key, list);
+    }
+
+    /**
+     * Creates the dataset to be used by the flatlist
      *
      * @param fetchedData
      * @return {*}
      */
-  createDataset = (fetchedData: {
+    createDataset = (fetchedData: Object) => {
-    dryers: Array<ProxiwashMachineType>,
-    washers: Array<ProxiwashMachineType>,
-  }): SectionListDataType<ProxiwashMachineType> => {
-    const {state} = this;
         let data = fetchedData;
         if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
             data = JSON.parse(JSON.stringify(fetchedData)); // Deep copy
@@ -360,22 +188,20 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
             AprilFoolsManager.getNewProxiwashWasherOrderedList(data.washers);
         }
         this.fetchedData = data;
-    this.state.machinesWatched = getCleanedMachineWatched(
+        this.state.machinesWatched =
-      state.machinesWatched,
+            getCleanedMachineWatched(this.state.machinesWatched, [...data.dryers, ...data.washers]);
-      [...data.dryers, ...data.washers],
-    );
         return [
             {
                 title: i18n.t('screens.proxiwash.dryers'),
                 icon: 'tumble-dryer',
                 data: data.dryers === undefined ? [] : data.dryers,
-        keyExtractor: this.getKeyExtractor,
+                keyExtractor: this.getKeyExtractor
             },
             {
                 title: i18n.t('screens.proxiwash.washers'),
                 icon: 'washing-machine',
                 data: data.washers === undefined ? [] : data.washers,
-        keyExtractor: this.getKeyExtractor,
+                keyExtractor: this.getKeyExtractor
             },
         ];
     };
@@ -387,9 +213,9 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
      * @param item The item to display information for in the modal
      * @param isDryer True if the given item is a dryer
      */
-  showModal = (title: string, item: ProxiwashMachineType, isDryer: boolean) => {
+    showModal = (title: string, item: Object, isDryer: boolean) => {
         this.setState({
-      modalCurrentDisplayItem: this.getModalContent(title, item, isDryer),
+            modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
         });
         if (this.modalRef) {
             this.modalRef.open();
@@ -397,81 +223,196 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
     };
 
     /**
-   * Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
+     * Callback used when the user clicks on enable notifications for a machine
      *
-   * @param machine
+     * @param machine The machine to set notifications for
      */
-  saveNotificationToState(machine: ProxiwashMachineType) {
+    onSetupNotificationsPress(machine: Machine) {
-    const {machinesWatched} = this.state;
+        if (this.modalRef) {
-    const data = machinesWatched;
+            this.modalRef.close();
-    data.push(machine);
+        }
-    this.saveNewWatchedList(data);
+        this.setupNotifications(machine);
     }
 
     /**
-   * Removes the given index from the watchlist array and saves it to preferences
+     * Generates the modal content.
+     * This shows information for the given machine.
      *
-   * @param selectedMachine
+     * @param title The title to use
+     * @param item The item to display information for in the modal
+     * @param isDryer True if the given item is a dryer
+     * @return {*}
      */
-  removeNotificationFromState(selectedMachine: ProxiwashMachineType) {
+    getModalContent(title: string, item: Machine, isDryer: boolean) {
-    const {machinesWatched} = this.state;
+        let button = {
-    const newList = [...machinesWatched];
+            text: i18n.t("screens.proxiwash.modal.ok"),
-    machinesWatched.forEach((machine: ProxiwashMachineType, index: number) => {
+            icon: '',
-      if (
+            onPress: undefined
-        machine.number === selectedMachine.number &&
+        };
-        machine.endTime === selectedMachine.endTime
+        let message = modalStateStrings[item.state];
-      )
+        const onPress = this.onSetupNotificationsPress.bind(this, item);
-        newList.splice(index, 1);
+        if (item.state === ProxiwashConstants.machineStates.RUNNING) {
-    });
+            let remainingTime = parseInt(item.remainingTime)
-    this.saveNewWatchedList(newList);
+            if (remainingTime < 0)
-  }
+                remainingTime = 0;
 
-  saveNewWatchedList(list: Array<ProxiwashMachineType>) {
+            button =
-    this.setState({machinesWatched: list});
+                {
-    AsyncStorageManager.set(
+                    text: isMachineWatched(item, this.state.machinesWatched) ?
-      AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
+                        i18n.t("screens.proxiwash.modal.disableNotifications") :
-      list,
+                        i18n.t("screens.proxiwash.modal.enableNotifications"),
+                    icon: '',
+                    onPress: onPress
+                }
+            ;
+            message = i18n.t('screens.proxiwash.modal.running',
+                {
+                    start: item.startTime,
+                    end: item.endTime,
+                    remaining: remainingTime,
+                    program: item.program
+                });
+        } else if (item.state === ProxiwashConstants.machineStates.AVAILABLE) {
+            if (isDryer)
+                message += '\n' + i18n.t('screens.proxiwash.dryersTariff');
+            else
+                message += '\n' + i18n.t('screens.proxiwash.washersTariff');
+        }
+        return (
+            <View style={{
+                flex: 1,
+                padding: 20
+            }}>
+                <Card.Title
+                    title={title}
+                    left={() => <Avatar.Icon
+                        icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
+                        color={this.props.theme.colors.text}
+                        style={{backgroundColor: 'transparent'}}/>}
+
+                />
+                <Card.Content>
+                    <Text>{message}</Text>
+                </Card.Content>
+
+                {button.onPress !== undefined ?
+                    <Card.Actions>
+                        <Button
+                            icon={button.icon}
+                            mode="contained"
+                            onPress={button.onPress}
+                            style={{marginLeft: 'auto', marginRight: 'auto'}}
+                        >
+                            {button.text}
+                        </Button>
+                    </Card.Actions> : null}
+            </View>
         );
     }
 
-  render(): React.Node {
+    /**
-    const {state} = this;
+     * Callback used when receiving modal ref
-    const {navigation} = this.props;
+     *
+     * @param ref
+     */
+    onModalRef = (ref: Object) => {
+        this.modalRef = ref;
+    };
+
+    /**
+     * Gets the number of machines available
+     *
+     * @param isDryer True if we are only checking for dryer, false for washers
+     * @return {number} The number of machines available
+     */
+    getMachineAvailableNumber(isDryer: boolean) {
+        let data;
+        if (isDryer)
+            data = this.fetchedData.dryers;
+        else
+            data = this.fetchedData.washers;
+        let count = 0;
+        for (let i = 0; i < data.length; i++) {
+            if (data[i].state === ProxiwashConstants.machineStates.AVAILABLE)
+                count += 1;
+        }
+        return count;
+    }
+
+    /**
+     * Gets the section render item
+     *
+     * @param section The section to render
+     * @return {*}
+     */
+    getRenderSectionHeader = ({section}: Object) => {
+        const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
+        const nbAvailable = this.getMachineAvailableNumber(isDryer);
+        return (
+            <ProxiwashSectionHeader
+                title={section.title}
+                nbAvailable={nbAvailable}
+                isDryer={isDryer}/>
+        );
+    };
+
+    /**
+     * Gets the list item to be rendered
+     *
+     * @param item The object containing the item's FetchedData
+     * @param section The object describing the current SectionList section
+     * @returns {React.Node}
+     */
+    getRenderItem = ({item, section}: Object) => {
+        const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
+        return (
+            <ProxiwashListItem
+                item={item}
+                onPress={this.showModal}
+                isWatched={isMachineWatched(item, this.state.machinesWatched)}
+                isDryer={isDryer}
+                height={LIST_ITEM_HEIGHT}
+            />
+        );
+    };
+
+    render() {
+        const nav = this.props.navigation;
         return (
-      <View style={{flex: 1}}>
             <View
-          style={{
+                style={{flex: 1}}
-            position: 'absolute',
+            >
-            width: '100%',
+                <View style={{
-            height: '100%',
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%",
                 }}>
                     <WebSectionList
                         createDataset={this.createDataset}
-            navigation={navigation}
+                        navigation={nav}
                         fetchUrl={DATA_URL}
                         renderItem={this.getRenderItem}
                         renderSectionHeader={this.getRenderSectionHeader}
                         autoRefreshTime={REFRESH_TIME}
-            refreshOnFocus
+                        refreshOnFocus={true}
-            updateData={state.machinesWatched.length}
+                        updateData={this.state.machinesWatched.length}/>
-          />
                 </View>
                 <MascotPopup
                     prefKey={AsyncStorageManager.PREFERENCES.proxiwashShowBanner.key}
-          title={i18n.t('screens.proxiwash.mascotDialog.title')}
+                    title={i18n.t("screens.proxiwash.mascotDialog.title")}
-          message={i18n.t('screens.proxiwash.mascotDialog.message')}
+                    message={i18n.t("screens.proxiwash.mascotDialog.message")}
-          icon="information"
+                    icon={"information"}
                     buttons={{
                         action: null,
                         cancel: {
-              message: i18n.t('screens.proxiwash.mascotDialog.ok'),
+                            message: i18n.t("screens.proxiwash.mascotDialog.ok"),
-              icon: 'check',
+                            icon: "check",
-            },
+                        }
                     }}
                     emotion={MASCOT_STYLE.NORMAL}
                 />
                 <CustomModal onRef={this.onModalRef}>
-          {state.modalCurrentDisplayItem}
+                    {this.state.modalCurrentDisplayItem}
                 </CustomModal>
             </View>
         );

src/screens/Services/Proximo/ProximoListScreen.js

@@ -19,7 +19,7 @@ import ProximoListItem from '../../../components/Lists/Proximo/ProximoListItem';
 import MaterialHeaderButtons, {
   Item,
 } from '../../../components/Overrides/CustomHeaderButton';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
 import type {ProximoArticleType} from './ProximoMainScreen';
 
@@ -56,7 +56,7 @@ type PropsType = {
       shouldFocusSearchBar: boolean,
     },
   },
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 type StateType = {

src/screens/Services/Proximo/ProximoMainScreen.js

@@ -8,7 +8,7 @@ import WebSectionList from '../../../components/Screens/WebSectionList';
 import MaterialHeaderButtons, {
   Item,
 } from '../../../components/Overrides/CustomHeaderButton';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 import type {SectionListDataType} from '../../../components/Screens/WebSectionList';
 
 const DATA_URL = 'https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json';
@@ -43,7 +43,7 @@ export type ProximoDataType = {
 
 type PropsType = {
   navigation: StackNavigationProp,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 /**

src/screens/Services/SelfMenuScreen.js

@@ -2,51 +2,34 @@
 
 import * as React from 'react';
 import {View} from 'react-native';
+import DateManager from "../../managers/DateManager";
+import WebSectionList from "../../components/Screens/WebSectionList";
 import {Card, Text, withTheme} from 'react-native-paper';
-import {StackNavigationProp} from '@react-navigation/stack';
+import AprilFoolsManager from "../../managers/AprilFoolsManager";
+import {StackNavigationProp} from "@react-navigation/stack";
+import type {CustomTheme} from "../../managers/ThemeManager";
 import i18n from 'i18n-js';
-import DateManager from '../../managers/DateManager';
-import WebSectionList from '../../components/Screens/WebSectionList';
-import type {CustomThemeType} from '../../managers/ThemeManager';
-import type {SectionListDataType} from '../../components/Screens/WebSectionList';
 
-const DATA_URL =
+const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
-  'https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json';
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  theme: CustomThemeType,
+    theme: CustomTheme,
-};
+}
-
-export type RuFoodCategoryType = {
-  name: string,
-  dishes: Array<{name: string}>,
-};
-
-type RuMealType = {
-  name: string,
-  foodcategory: Array<RuFoodCategoryType>,
-};
-
-type RawRuMenuType = {
-  restaurant_id: number,
-  id: number,
-  date: string,
-  meal: Array<RuMealType>,
-};
 
 /**
  * Class defining the app's menu screen.
  */
-class SelfMenuScreen extends React.Component<PropsType> {
+class SelfMenuScreen extends React.Component<Props> {
+
     /**
-   * Formats the given string to make sure it starts with a capital letter
+     * Extract a key for the given item
      *
-   * @param name The string to format
+     * @param item The item to extract the key from
-   * @return {string} The formatted string
+     * @return {*} The extracted key
      */
-  static formatName(name: string): string {
+    getKeyExtractor(item: Object) {
-    return name.charAt(0) + name.substr(1).toLowerCase();
+        return item !== undefined ? item['name'] : undefined;
     }
 
     /**
@@ -55,28 +38,31 @@ class SelfMenuScreen extends React.Component<PropsType> {
      * @param fetchedData
      * @return {[]}
      */
-  createDataset = (
+    createDataset = (fetchedData: Object) => {
-    fetchedData: Array<RawRuMenuType>,
-  ): SectionListDataType<RuFoodCategoryType> => {
         let result = [];
-    if (fetchedData == null || fetchedData.length === 0) {
+        if (fetchedData == null || Object.keys(fetchedData).length === 0) {
             result = [
                 {
-          title: i18n.t('general.notAvailable'),
+                    title: i18n.t("general.notAvailable"),
                     data: [],
-          keyExtractor: this.getKeyExtractor,
+                    keyExtractor: this.getKeyExtractor
-        },
+                }
             ];
         } else {
-      fetchedData.forEach((item: RawRuMenuType) => {
+            if (AprilFoolsManager.getInstance().isAprilFoolsEnabled() && fetchedData.length > 0)
-        result.push({
+                fetchedData[0].meal[0].foodcategory = AprilFoolsManager.getFakeMenuItem(fetchedData[0].meal[0].foodcategory);
-          title: DateManager.getInstance().getTranslatedDate(item.date),
+            // fetched data is an array here
-          data: item.meal[0].foodcategory,
+            for (let i = 0; i < fetchedData.length; i++) {
+                result.push(
+                    {
+                        title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date),
+                        data: fetchedData[i].meal[0].foodcategory,
                         keyExtractor: this.getKeyExtractor,
-        });
-      });
                     }
-    return result;
+                );
+            }
+        }
+        return result
     };
 
     /**
@@ -85,14 +71,9 @@ class SelfMenuScreen extends React.Component<PropsType> {
      * @param section The section to render the header from
      * @return {*}
      */
-  getRenderSectionHeader = ({
+    getRenderSectionHeader = ({section}: Object) => {
-    section,
-  }: {
-    section: {title: string},
-  }): React.Node => {
         return (
-      <Card
+            <Card style={{
-        style={{
                 width: '95%',
                 marginLeft: 'auto',
                 marginRight: 'auto',
@@ -103,10 +84,10 @@ class SelfMenuScreen extends React.Component<PropsType> {
                 <Card.Title
                     title={section.title}
                     titleStyle={{
-            textAlign: 'center',
+                        textAlign: 'center'
                     }}
                     subtitleStyle={{
-            textAlign: 'center',
+                        textAlign: 'center'
                     }}
                     style={{
                         paddingLeft: 0,
@@ -122,66 +103,64 @@ class SelfMenuScreen extends React.Component<PropsType> {
      * @param item The item to render
      * @return {*}
      */
-  getRenderItem = ({item}: {item: RuFoodCategoryType}): React.Node => {
+    getRenderItem = ({item}: Object) => {
-    const {theme} = this.props;
         return (
-      <Card
+            <Card style={{
-        style={{
                 flex: 0,
                 marginHorizontal: 10,
                 marginVertical: 5,
             }}>
-        <Card.Title style={{marginTop: 5}} title={item.name} />
+                <Card.Title
-        <View
+                    style={{marginTop: 5}}
-          style={{
+                    title={item.name}
+                />
+                <View style={{
                     width: '80%',
                     marginLeft: 'auto',
                     marginRight: 'auto',
                     borderBottomWidth: 1,
-            borderBottomColor: theme.colors.primary,
+                    borderBottomColor: this.props.theme.colors.primary,
                     marginTop: 5,
                     marginBottom: 5,
-          }}
+                }}/>
-        />
                 <Card.Content>
-          {item.dishes.map((object: {name: string}): React.Node =>
+                    {item.dishes.map((object) =>
-            object.name !== '' ? (
+                        <View>
-              <Text
+                            {object.name !== "" ?
-                style={{
+                                <Text style={{
                                     marginTop: 5,
                                     marginBottom: 5,
-                  textAlign: 'center',
+                                    textAlign: 'center'
-                }}>
+                                }}>{this.formatName(object.name)}</Text>
-                {SelfMenuScreen.formatName(object.name)}
+                                : <View/>}
-              </Text>
+                        </View>)}
-            ) : null,
-          )}
                 </Card.Content>
             </Card>
         );
     };
 
     /**
-   * Extract a key for the given item
+     * Formats the given string to make sure it starts with a capital letter
      *
-   * @param item The item to extract the key from
+     * @param name The string to format
-   * @return {*} The extracted key
+     * @return {string} The formatted string
      */
-  getKeyExtractor = (item: RuFoodCategoryType): string => item.name;
+    formatName(name: String) {
+        return name.charAt(0) + name.substr(1).toLowerCase();
+    }
 
-  render(): React.Node {
+    render() {
-    const {navigation} = this.props;
+        const nav = this.props.navigation;
         return (
             <WebSectionList
                 createDataset={this.createDataset}
-        navigation={navigation}
+                navigation={nav}
                 autoRefreshTime={0}
                 refreshOnFocus={false}
                 fetchUrl={DATA_URL}
                 renderItem={this.getRenderItem}
                 renderSectionHeader={this.getRenderSectionHeader}
-        stickyHeader
+                stickyHeader={true}/>
-      />
         );
     }
 }

src/screens/Services/ServicesScreen.js

@@ -13,7 +13,7 @@ import {
 import i18n from 'i18n-js';
 import {StackNavigationProp} from '@react-navigation/stack';
 import CardList from '../../components/Lists/CardList/CardList';
-import type {CustomThemeType} from '../../managers/ThemeManager';
+import type {CustomTheme} from '../../managers/ThemeManager';
 import MaterialHeaderButtons, {
   Item,
 } from '../../components/Overrides/CustomHeaderButton';
@@ -28,7 +28,7 @@ import type {ServiceCategoryType} from '../../managers/ServicesManager';
 
 type PropsType = {
   navigation: StackNavigationProp,
-  theme: CustomThemeType,
+  theme: CustomTheme,
 };
 
 class ServicesScreen extends React.Component<PropsType> {

src/screens/Services/ServicesSectionScreen.js

@@ -6,7 +6,7 @@ import {CommonActions} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import CardList from '../../components/Lists/CardList/CardList';
 import CustomTabBar from '../../components/Tabbar/CustomTabBar';
-import withCollapsible from '../../utils/withCollapsible';
+import {withCollapsible} from '../../utils/withCollapsible';
 import type {ServiceCategoryType} from '../../managers/ServicesManager';
 
 type PropsType = {

src/screens/Services/WebsiteScreen.js

@@ -1,71 +1,60 @@
 // @flow
 
+
 import * as React from 'react';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {StackNavigationProp} from "@react-navigation/stack";
-import WebViewScreen from '../../components/Screens/WebViewScreen';
+import WebViewScreen from "../../components/Screens/WebViewScreen";
-import AvailableWebsites from '../../constants/AvailableWebsites';
+import AvailableWebsites from "../../constants/AvailableWebsites";
-import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
+import BasicLoadingScreen from "../../components/Screens/BasicLoadingScreen";
 
-type PropsType = {
+type Props = {
     navigation: StackNavigationProp,
-  route: {params: {host: string, path: string | null, title: string}},
+    route: { params: { host: string, path: string | null, title: string } },
-};
+}
 
-const ENABLE_MOBILE_STRING = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
+class WebsiteScreen extends React.Component<Props> {
 
-const AVAILABLE_ROOMS_STYLE = `<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>`;
-const BIB_STYLE = `<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>`;
-
-const BIB_BACK_BUTTON =
-  `<div style='width: 100%; display: flex'>` +
-  `<a style='margin: auto' href='${AvailableWebsites.websites.BIB}'>` +
-  `<button id='customBackButton' class='btn btn-primary'>Retour</button>` +
-  `</a>` +
-  `</div>`;
-
-class WebsiteScreen extends React.Component<PropsType> {
     fullUrl: string;
-
+    injectedJS: { [key: string]: string };
-  injectedJS: {[key: string]: string};
+    customPaddingFunctions: {[key: string]: (padding: string) => string}
-
-  customPaddingFunctions: {[key: string]: (padding: string) => string};
 
     host: string;
 
-  constructor(props: PropsType) {
+    constructor(props: Props) {
         super(props);
-    props.navigation.addListener('focus', this.onScreenFocus);
+        this.props.navigation.addListener('focus', this.onScreenFocus);
         this.injectedJS = {};
         this.customPaddingFunctions = {};
         this.injectedJS[AvailableWebsites.websites.AVAILABLE_ROOMS] =
-      `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
-      `document.querySelector('head').innerHTML += '${AVAILABLE_ROOMS_STYLE}'; true;`;
+            'document.querySelector(\'head\').innerHTML += \'<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>\'; true;';
 
         this.injectedJS[AvailableWebsites.websites.BIB] =
-      `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
-      `document.querySelector('head').innerHTML += '${BIB_STYLE}';` +
+            'document.querySelector(\'head\').innerHTML += \'<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>\';' +
-      `if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)` +
+            'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
-      `$(".hero-unit-form").append("${BIB_BACK_BUTTON}");true;`;
+            '$(".hero-unit-form").append("' +
+            '<div style=\'width: 100%; display: flex\'>' +
+            '<a style=\'margin: auto\' href=\'' + AvailableWebsites.websites.BIB + '\'>' +
+            '<button id=\'customBackButton\' class=\'btn btn-primary\'>Retour</button>' +
+            '</a>' +
+            '</div>");true;';
 
-    this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (
+        this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (padding: string) => {
-      padding: string,
-    ): string => {
             return (
-        `$('head').append('${ENABLE_MOBILE_STRING}');` +
+                "$('head').append('<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">');" +
-        `$('.minwidth').css('top', ${padding}` +
+                "$('.minwidth').css('top', " + padding + ");" +
-        `$('#mailview-bottom').css('min-height', 500);`
+                "$('#mailview-bottom').css('min-height', 500);"
             );
         };
-    this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (
+        this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (padding: string) => {
-      padding: string,
-    ): string => {
             return (
-        `$('#p-logo-text').css('top', 10 + ${padding});` +
+                "$('#p-logo-text').css('top', 10 + " + padding + ");" +
-        `$('#site-navigation h2').css('top', 10 + ${padding});` +
+                "$('#site-navigation h2').css('top', 10 + " + padding + ");" +
-        `$('#site-tools h2').css('top', 10 + ${padding});` +
+                "$('#site-tools h2').css('top', 10 + " + padding + ");" +
-        `$('#user-tools h2').css('top', 10 + ${padding});`
+                "$('#user-tools h2').css('top', 10 + " + padding + ");"
             );
-    };
+        }
     }
 
     onScreenFocus = () => {
@@ -76,23 +65,23 @@ class WebsiteScreen extends React.Component<PropsType> {
      *
      */
     handleNavigationParams() {
-    const {route, navigation} = this.props;
+        if (this.props.route.params != null) {
-    if (route.params != null) {
+            this.host = this.props.route.params.host;
-      this.host = route.params.host;
+            let path = this.props.route.params.path;
-      let {path} = route.params;
+            const title = this.props.route.params.title;
-      const {title} = route.params;
             if (this.host != null && path != null) {
-        path = path.replace(this.host, '');
+                path = path.replace(this.host, "");
                 this.fullUrl = this.host + path;
-      } else this.fullUrl = this.host;
+            }else
+                this.fullUrl = this.host;
 
-      if (title != null) navigation.setOptions({title});
+            if (title != null)
+                this.props.navigation.setOptions({title: title});
         }
     }
 
-  render(): React.Node {
+    render() {
-    const {navigation} = this.props;
+        let injectedJavascript = "";
-    let injectedJavascript = '';
         let customPadding = null;
         if (this.host != null && this.injectedJS[this.host] != null)
             injectedJavascript = this.injectedJS[this.host];
@@ -102,14 +91,18 @@ class WebsiteScreen extends React.Component<PropsType> {
         if (this.fullUrl != null) {
             return (
                 <WebViewScreen
-          navigation={navigation}
+                    {...this.props}
                     url={this.fullUrl}
                     customJS={injectedJavascript}
                     customPaddingFunction={customPadding}
                 />
             );
+        } else {
+            return (
+                <BasicLoadingScreen/>
+            );
         }
-    return <BasicLoadingScreen />;
+
     }
 }
 

src/utils/AutoHideHandler.js

@@ -1,28 +1,18 @@
 // @flow
 
+import * as React from 'react';
+
 const speedOffset = 5;
 
-type ListenerFunctionType = (shouldHide: boolean) => void;
-
-export type OnScrollType = {
-  nativeEvent: {
-    contentInset: {bottom: number, left: number, right: number, top: number},
-    contentOffset: {x: number, y: number},
-    contentSize: {height: number, width: number},
-    layoutMeasurement: {height: number, width: number},
-    zoomScale: number,
-  },
-};
-
 /**
  * Class used to detect when to show or hide a component based on scrolling
  */
 export default class AutoHideHandler {
-  lastOffset: number;
 
+    lastOffset: number;
     isHidden: boolean;
 
-  listeners: Array<ListenerFunctionType>;
+    listeners: Array<Function>;
 
     constructor(startHidden: boolean) {
         this.listeners = [];
@@ -34,7 +24,7 @@ export default class AutoHideHandler {
      *
      * @param listener
      */
-  addListener(listener: (shouldHide: boolean) => void) {
+    addListener(listener: Function) {
         this.listeners.push(listener);
     }
 
@@ -44,9 +34,9 @@ export default class AutoHideHandler {
      * @param shouldHide
      */
     notifyListeners(shouldHide: boolean) {
-    this.listeners.forEach((func: ListenerFunctionType) => {
+        for (let i = 0; i < this.listeners.length; i++) {
-      func(shouldHide);
+            this.listeners[i](shouldHide);
-    });
+        }
     }
 
     /**
@@ -63,23 +53,18 @@ export default class AutoHideHandler {
      * this can trigger the hide event as it scrolls down the list to show the refresh indicator.
      * Android shows the refresh indicator on top of the list so this is not an issue.
      *
-   * @param event The scroll event generated by the animated component onScroll prop
+     * @param nativeEvent The scroll event generated by the animated component onScroll prop
      */
-  onScroll(event: OnScrollType) {
+    onScroll({nativeEvent}: Object) {
-    const {nativeEvent} = event;
+        const speed = nativeEvent.contentOffset.y < 0 ? 0 : this.lastOffset - nativeEvent.contentOffset.y;
-    const speed =
+        if (speed < -speedOffset && !this.isHidden) { // Go down
-      nativeEvent.contentOffset.y < 0
-        ? 0
-        : this.lastOffset - nativeEvent.contentOffset.y;
-    if (speed < -speedOffset && !this.isHidden) {
-      // Go down
             this.notifyListeners(true);
             this.isHidden = true;
-    } else if (speed > speedOffset && this.isHidden) {
+        } else if (speed > speedOffset && this.isHidden) { // Go up
-      // Go up
             this.notifyListeners(false);
             this.isHidden = false;
         }
         this.lastOffset = nativeEvent.contentOffset.y;
     }
+
 }

src/utils/CollapsibleUtils.js

@@ -1,9 +1,9 @@
 // @flow
 
 import * as React from 'react';
-import {useTheme} from 'react-native-paper';
+import {useTheme} from "react-native-paper";
-import {createCollapsibleStack} from 'react-navigation-collapsible';
+import {createCollapsibleStack} from "react-navigation-collapsible";
-import StackNavigator, {StackNavigationOptions} from '@react-navigation/stack';
+import StackNavigator, {StackNavigationOptions} from "@react-navigation/stack";
 
 /**
  * Creates a navigation stack with the collapsible library, allowing the header to collapse on scroll.
@@ -24,13 +24,11 @@ import StackNavigator, {StackNavigationOptions} from '@react-navigation/stack';
 export function createScreenCollapsibleStack(
     name: string,
     Stack: StackNavigator,
-  // eslint-disable-next-line flowtype/no-weak-types
     component: React.ComponentType<any>,
     title: string,
     useNativeDriver?: boolean,
     options?: StackNavigationOptions,
-  headerColor?: string,
+    headerColor?: string) {
-): React.Node {
     const {colors} = useTheme();
     const screenOptions = options != null ? options : {};
     return createCollapsibleStack(
@@ -38,18 +36,18 @@ export function createScreenCollapsibleStack(
             name={name}
             component={component}
             options={{
-        title,
+                title: title,
                 headerStyle: {
-          backgroundColor: headerColor != null ? headerColor : colors.surface,
+                    backgroundColor: headerColor!=null ? headerColor :colors.surface,
                 },
                 ...screenOptions,
             }}
         />,
         {
-      collapsedColor: headerColor != null ? headerColor : colors.surface,
+            collapsedColor: headerColor!=null ? headerColor :colors.surface,
             useNativeDriver: useNativeDriver != null ? useNativeDriver : true, // native driver does not work with webview
-    },
+        }
-  );
+    )
 }
 
 /**
@@ -64,12 +62,6 @@ export function createScreenCollapsibleStack(
  * @param title
  * @returns {JSX.Element}
  */
-export function getWebsiteStack(
+export function getWebsiteStack(name: string, Stack: any, component: any, title: string) {
-  name: string,
-  Stack: StackNavigator,
-  // eslint-disable-next-line flowtype/no-weak-types
-  component: React.ComponentType<any>,
-  title: string,
-): React.Node {
     return createScreenCollapsibleStack(name, Stack, component, title, false);
 }

src/utils/EquipmentBooking.js

@@ -3,7 +3,7 @@
 import i18n from 'i18n-js';
 import type {DeviceType} from '../screens/Amicale/Equipment/EquipmentListScreen';
 import DateManager from '../managers/DateManager';
-import type {CustomThemeType} from '../managers/ThemeManager';
+import type {CustomTheme} from '../managers/ThemeManager';
 import type {MarkedDatesObjectType} from '../screens/Amicale/Equipment/EquipmentRentScreen';
 
 /**
@@ -161,7 +161,7 @@ export function getValidRange(
  */
 export function generateMarkedDates(
   isSelection: boolean,
-  theme: CustomThemeType,
+  theme: CustomTheme,
   range: Array<string>,
 ): MarkedDatesObjectType {
   const markedDates = {};