vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: vergnet:master
Branches Tags
vergnet:master
vergnet:functional-migration
bquintan:master
vergnet:v5.0.0-3
vergnet:v5.0.0-2
vergnet:4.1.0
vergnet:4.0.1
vergnet:3.0.7
..
compare: bquintan:master
Branches Tags
bquintan:master
vergnet:master
vergnet:functional-migration
vergnet:v5.0.0-3
vergnet:v5.0.0-2
vergnet:4.1.0
vergnet:4.0.1
vergnet:3.0.7

No commits in common. "master" and "master" have entirely different histories.
master ... master

208 changed files with 15987 additions and 40391 deletions
Show stats Expand all files Collapse all files

6
.eslintrc.js Normal file
View file

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

3
.gitattributes vendored
View file

@ -1,4 +1 @@
*.pbxproj -text
# Windows files should use crlf line endings
# https://help.github.com/articles/dealing-with-line-endings/
*.bat text eol=crlf

6
.prettierrc.js Normal file
View file

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

4
.vscode/settings.json vendored
View file

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

256
App.tsx
View file

@ -17,64 +17,50 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React from 'react';
import { LogBox, Platform } from 'react-native';
import { setSafeBounceHeight } from 'react-navigation-collapsible';
import * as React from 'react';
import {LogBox, Platform, SafeAreaView, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {Provider as PaperProvider} from 'react-native-paper';
import {setSafeBounceHeight} from 'react-navigation-collapsible';
import SplashScreen from 'react-native-splash-screen';
import type { ParsedUrlDataType } from './src/utils/URLHandler';
import {OverflowMenuProvider} from 'react-navigation-header-buttons';
import AsyncStorageManager from './src/managers/AsyncStorageManager';
import CustomIntroSlider from './src/components/Overrides/CustomIntroSlider';
import ThemeManager from './src/managers/ThemeManager';
import MainNavigator from './src/navigation/MainNavigator';
import AprilFoolsManager from './src/managers/AprilFoolsManager';
import Update from './src/constants/Update';
import ConnectionManager from './src/managers/ConnectionManager';
import type {ParsedUrlDataType} from './src/utils/URLHandler';
import URLHandler from './src/utils/URLHandler';
import {setupStatusBar} from './src/utils/Utils';
import initLocales from './src/utils/Locales';
import { NavigationContainerRef } from '@react-navigation/core';
import {
defaultMascotPreferences,
defaultPlanexPreferences,
defaultPreferences,
defaultProxiwashPreferences,
GeneralPreferenceKeys,
GeneralPreferencesType,
MascotPreferenceKeys,
MascotPreferencesType,
PlanexPreferenceKeys,
PlanexPreferencesType,
ProxiwashPreferenceKeys,
ProxiwashPreferencesType,
retrievePreferences,
} from './src/utils/asyncStorage';
import {
GeneralPreferencesProvider,
MascotPreferencesProvider,
PlanexPreferencesProvider,
ProxiwashPreferencesProvider,
} from './src/components/providers/PreferencesProvider';
import MainApp from './src/screens/MainApp';
import LoginProvider from './src/components/providers/LoginProvider';
import { retrieveLoginToken } from './src/utils/loginToken';
import { setupNotifications } from './src/utils/Notifications';
import { TabRoutes } from './src/navigation/TabNavigator';
import {NavigationContainerRef} from '@react-navigation/core';
initLocales();
setupNotifications();
// Native optimizations https://reactnavigation.org/docs/react-native-screens
// Crashes app when navigating away from webview on android 9+
// enableScreens(true);
LogBox.ignoreLogs([
// collapsible headers cause this warning, just ignore as it is not an issue
'Non-serializable values were found in the navigation state',
'Cannot update a component from inside the function body of a different component',
'`new NativeEventEmitter()` was called with a non-null argument',
]);
type StateType = {
isLoading: boolean;
initialPreferences: {
general: GeneralPreferencesType;
planex: PlanexPreferencesType;
proxiwash: ProxiwashPreferencesType;
mascot: MascotPreferencesType;
};
loginToken?: string;
showIntro: boolean;
showUpdate: boolean;
showAprilFools: boolean;
currentTheme: ReactNativePaper.Theme | undefined;
};
export default class App extends React.Component<{}, StateType> {
navigatorRef: { current: null | NavigationContainerRef<any> };
navigatorRef: {current: null | NavigationContainerRef};
defaultData?: ParsedUrlDataType;
defaultHomeRoute: string | null;
defaultHomeData: {[key: string]: string};
urlHandler: URLHandler;
@ -82,20 +68,21 @@ export default class App extends React.Component<{}, StateType> {
super(props);
this.state = {
isLoading: true,
initialPreferences: {
general: defaultPreferences,
planex: defaultPlanexPreferences,
proxiwash: defaultProxiwashPreferences,
mascot: defaultMascotPreferences,
},
loginToken: undefined,
showIntro: true,
showUpdate: true,
showAprilFools: false,
currentTheme: undefined,
};
initLocales();
this.navigatorRef = React.createRef();
this.defaultData = undefined;
this.defaultHomeRoute = null;
this.defaultHomeData = {};
this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
this.urlHandler.listen();
setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
this.loadAssetsAsync();
this.loadAssetsAsync().finally(() => {
this.onLoadFinished();
});
}
/**
@ -105,7 +92,8 @@ export default class App extends React.Component<{}, StateType> {
* @param parsedData The data parsed from the url
*/
onInitialURLParsed = (parsedData: ParsedUrlDataType) => {
this.defaultData = parsedData;
this.defaultHomeRoute = parsedData.route;
this.defaultHomeData = parsedData.data;
};
/**
@ -118,100 +106,128 @@ export default class App extends React.Component<{}, StateType> {
// Navigate to nested navigator and pass data to the index screen
const nav = this.navigatorRef.current;
if (nav != null) {
nav.navigate(TabRoutes.Home, {
nextScreen: parsedData.route,
data: parsedData.data,
nav.navigate('home', {
screen: 'index',
params: {nextScreen: parsedData.route, data: parsedData.data},
});
}
};
/**
* Updates the current theme
*/
onUpdateTheme = () => {
this.setState({
currentTheme: ThemeManager.getCurrentTheme(),
});
setupStatusBar();
};
/**
* Callback when user ends the intro. Save in preferences to avoid showing back the introSlides
*/
onIntroDone = () => {
this.setState({
showIntro: false,
showUpdate: false,
showAprilFools: false,
});
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.showIntro.key,
false,
);
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.updateNumber.key,
Update.number,
);
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key,
false,
);
};
/**
* Async loading is done, finish processing startup data
*/
onLoadFinished = (
values: Array<
| GeneralPreferencesType
| PlanexPreferencesType
| ProxiwashPreferencesType
| MascotPreferencesType
| string
| undefined
>
) => {
const [general, planex, proxiwash, mascot, token] = values;
onLoadFinished() {
// Only show intro if this is the first time starting the app
ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme);
// Status bar goes dark if set too fast on ios
if (Platform.OS === 'ios') {
setTimeout(setupStatusBar, 1000);
} else {
setupStatusBar();
}
this.setState({
isLoading: false,
initialPreferences: {
general: general as GeneralPreferencesType,
planex: planex as PlanexPreferencesType,
proxiwash: proxiwash as ProxiwashPreferencesType,
mascot: mascot as MascotPreferencesType,
},
loginToken: token as string | undefined,
currentTheme: ThemeManager.getCurrentTheme(),
showIntro: AsyncStorageManager.getBool(
AsyncStorageManager.PREFERENCES.showIntro.key,
),
showUpdate:
AsyncStorageManager.getNumber(
AsyncStorageManager.PREFERENCES.updateNumber.key,
) !== Update.number,
showAprilFools:
AprilFoolsManager.getInstance().isAprilFoolsEnabled() &&
AsyncStorageManager.getBool(
AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key,
),
});
SplashScreen.hide();
};
}
/**
* Loads every async data
*
* @returns {Promise<void>}
*/
loadAssetsAsync() {
Promise.all([
retrievePreferences(
Object.values(GeneralPreferenceKeys),
defaultPreferences
),
retrievePreferences(
Object.values(PlanexPreferenceKeys),
defaultPlanexPreferences
),
retrievePreferences(
Object.values(ProxiwashPreferenceKeys),
defaultProxiwashPreferences
),
retrievePreferences(
Object.values(MascotPreferenceKeys),
defaultMascotPreferences
),
retrieveLoginToken(),
])
.then(this.onLoadFinished)
.catch(this.onLoadFinished);
}
loadAssetsAsync = async () => {
await AsyncStorageManager.getInstance().loadPreferences();
await ConnectionManager.getInstance()
.recoverLogin()
.catch(() => {});
};
/**
* Renders the app based on loading state
*/
render() {
const { state } = this;
const {state} = this;
if (state.isLoading) {
return null;
}
if (state.showIntro || state.showUpdate || state.showAprilFools) {
return (
<CustomIntroSlider
onDone={this.onIntroDone}
isUpdate={state.showUpdate && !state.showIntro}
isAprilFools={state.showAprilFools && !state.showIntro}
/>
);
}
return (
<GeneralPreferencesProvider
initialPreferences={this.state.initialPreferences.general}
>
<PlanexPreferencesProvider
initialPreferences={this.state.initialPreferences.planex}
>
<ProxiwashPreferencesProvider
initialPreferences={this.state.initialPreferences.proxiwash}
>
<MascotPreferencesProvider
initialPreferences={this.state.initialPreferences.mascot}
>
<LoginProvider initialToken={this.state.loginToken}>
<MainApp
ref={this.navigatorRef}
defaultData={this.defaultData}
<PaperProvider theme={state.currentTheme}>
<OverflowMenuProvider>
<View
style={{
backgroundColor: ThemeManager.getCurrentTheme().colors.background,
flex: 1,
}}>
<SafeAreaView style={{flex: 1}}>
<NavigationContainer
theme={state.currentTheme}
ref={this.navigatorRef}>
<MainNavigator
defaultHomeRoute={this.defaultHomeRoute}
defaultHomeData={this.defaultHomeData}
/>
</LoginProvider>
</MascotPreferencesProvider>
</ProxiwashPreferencesProvider>
</PlanexPreferencesProvider>
</GeneralPreferencesProvider>
</NavigationContainer>
</SafeAreaView>
</View>
</OverflowMenuProvider>
</PaperProvider>
);
}
}

37
Changelog.md
View file

@ -1,24 +1,21 @@
# Version actuelle - v4.1.0 - 11/10/2020
# Version actuelle - v3.0.7 - 13/06/2020
## 🎉 Nouveautés
- Possibilité de sélectionner la laverie des Tripodes à la place de celle de l'INSA
- Possibilité d'ouvrir les liens zoom depuis planex !
- Ajout d'une icône adaptive pour Android 9+
- Ajout des remerciements dans la page À propos
- Amélioration des animations au clic de la barre d'onglets
- Mise à jour des écrans d'intro pour mieux refléter l'appli actuelle
- Déplacement du bouton *À propos* dans les paramètres
- Mode sombre par défaut parce que voilà
## 🐛 Corrections de bugs
- Correction du démarrage très lent sur certains appareils Android
- Correction du comportement inconsistant de la liste des groupes pour Planex
- Correction de crash au démarrage sur certains appareils
- Correction de l'affichage de certains sites web
## 🖥️ Notes de développement
- Migration de Flow vers TypeScript
- Blocage de react-native-keychain à la version 4.0.5 en raison d'un bug dans la librairie
- Force soloader 0.8.2
# Versions précédentes
# Prochainement - **v4.0.1**
<details><summary>**v4.0.1** - 30/09/2020</summary>
<details><summary>**v4.0.1**</summary>
## 🎉 Nouveautés
- Ajout d'une mascotte !
@ -44,21 +41,7 @@
</details>
<details><summary>**v3.0.7** - 13/06/2020</summary>
## 🎉 Nouveautés
- Mise à jour des écrans d'intro pour mieux refléter l'appli actuelle
- Déplacement du bouton *À propos* dans les paramètres
- Mode sombre par défaut parce que voilà
## 🐛 Corrections de bugs
- Correction de crash au démarrage sur certains appareils
- Correction de l'affichage de certains sites web
## 🖥️ Notes de développement
- Force soloader 0.8.2
</details>
# Versions précédentes
<details><summary>**v3.0.5** - 28/05/2020</summary>

10
__mocks__/react-native-keychain/index.js vendored
View file

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

34
__tests__/managers/ConnectionManager.test.js
View file

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

113
__tests__/utils/EquipmentBooking.test.js
View file

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

55
__tests__/utils/PlanningEventManager.test.js
View file

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

37
__tests__/utils/Proxiwash.test.js
View file

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

10
__tests__/utils/WebData.test.js
View file

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

16
android/app/build.gradle
View file

@ -137,16 +137,19 @@ if (keystorePropertiesFile.exists() && !keystorePropertiesFile.isDirectory()) {
}
android {
ndkVersion rootProject.ext.ndkVersion
compileSdkVersion rootProject.ext.compileSdkVersion
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
defaultConfig {
applicationId 'fr.amicaleinsat.application'
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 49
versionName "5.0.0-3"
versionCode 42
versionName "4.0.1"
missingDimensionStrategy 'react-native-camera', 'general'
}
splits {
@ -189,12 +192,11 @@ android {
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// https://developer.android.com/studio/build/configure-apk-splits.html
// Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
defaultConfig.versionCode * 1000 + versionCodes.get(abi)
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
@ -233,7 +235,7 @@ dependencies {
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.implementation
from configurations.compile
into 'libs'
}

7
android/app/src/debug/AndroidManifest.xml
View file

@ -4,10 +4,5 @@
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application
android:usesCleartextTraffic="true"
tools:targetApi="28"
tools:ignore="GoogleAppIndexingWarning">
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

34
android/app/src/main/AndroidManifest.xml
View file

@ -8,6 +8,7 @@
<uses-permission android:name="android.permission.READ_INTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.USE_FINGERPRINT"/>
<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
<application
android:name=".MainApplication"
@ -18,33 +19,31 @@
android:theme="@style/AppTheme"
android:usesCleartextTraffic="true"
>
<!-- START NOTIFICATIONS -->
<!-- Change the value to true to enable pop-up for in foreground on receiving remote notifications (for prevent duplicating while showing local notifications set this to false) -->
<meta-data android:name="com.dieam.reactnativepushnotification.notification_foreground"
android:value="false"/>
<!-- NOTIFICATIONS -->
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name"
android:value="reminders"/>
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description"
android:value="reminders"/>
<!-- Change the resource name to your App's accent color - or any other color you want -->
<meta-data android:name="com.dieam.reactnativepushnotification.notification_color"
android:resource="@color/colorPrimary"/>
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_color"
android:resource="@color/colorPrimary"/> <!-- or @android:color/{name} to use a standard color -->
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher"/>
<receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="android.intent.action.QUICKBOOT_POWERON" />
<action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
<action android:name="android.intent.action.BOOT_COMPLETED"/>
</intent-filter>
</receiver>
<service
android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
android:exported="false" >
android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
android:exported="false">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
<action android:name="com.google.firebase.MESSAGING_EVENT"/>
</intent-filter>
</service>
<!-- END NOTIFICATIONS -->
<!-- END NOTIFICATIONS-->
<meta-data android:name="com.facebook.sdk.AutoInitEnabled" android:value="false"/>
@ -68,5 +67,6 @@
<data android:scheme="campus-insat"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
</application>
</manifest>

11
android/app/src/main/java/fr/amicaleinsat/application/MainActivity.java
View file

@ -5,11 +5,22 @@ import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
import android.content.Intent;
import android.content.res.Configuration;
import org.devio.rn.splashscreen.SplashScreen;
public class MainActivity extends ReactActivity {
// Added automatically by Expo Config
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Intent intent = new Intent("onConfigurationChanged");
intent.putExtra("newConfig", newConfig);
sendBroadcast(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, R.style.SplashScreenTheme);

2
android/app/src/main/res/values/styles.xml
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColor">#000000</item>
<item name="android:windowBackground">@color/activityBackground</item>
<item name="android:navigationBarColor">@color/navigationBarColor</item>

2
android/app/src/release/AndroidManifest.xml
View file

@ -21,7 +21,7 @@
<uses-permission tools:node="remove" android:name="android.permission.WRITE_CALENDAR"/>
<uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission tools:node="remove" android:name="android.permission.RECORD_AUDIO"/>
<uses-permission tools:node="remove" android:name="android.permission.WRITE_SETTINGS"/>
<uses-permission tools:node="remove" android:name="android.permission.WRITE_SETTINGS"/>
<uses-permission tools:node="remove" android:name="android.permission.ACCESS_NETWORK_STATE"/>
</manifest>

15
android/build.gradle
View file

@ -2,18 +2,17 @@
buildscript {
ext {
buildToolsVersion = "30.0.2"
minSdkVersion = 23
compileSdkVersion = 30
targetSdkVersion = 30
ndkVersion = "20.1.5948944"
buildToolsVersion = "29.0.2"
minSdkVersion = 21
compileSdkVersion = 29
targetSdkVersion = 29
}
repositories {
google()
mavenCentral()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:4.2.1")
classpath("com.android.tools.build:gradle:3.5.3")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
@ -22,7 +21,6 @@ buildscript {
allprojects {
repositories {
mavenCentral()
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
@ -37,6 +35,7 @@ allprojects {
url "$rootDir/../node_modules/expo-camera/android/maven"
}
google()
jcenter()
maven { url 'https://www.jitpack.io' }
}
}

6
android/gradle.properties
View file

@ -24,8 +24,4 @@ android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true
# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.93.0
# Increase Java heap size for compilation
org.gradle.jvmargs=-Xmx2048M
FLIPPER_VERSION=0.37.0

2
android/gradle/wrapper/gradle-wrapper.properties vendored
View file

@ -1,5 +1,5 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

18
clear-node-cache.sh Executable file
View file

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

6
doc/NOTES.md
View file

@ -4,12 +4,6 @@ Ce fichier permet de regrouper les différentes informations sur des décisions
Ces notes pouvant évoluer dans le temps, leur date d'écriture est aussi indiquée.
## _2020-10-07_ | react-native-keychain
Bloquée en 4.0.5 à cause d'un problème de performances. Au dessus de cette version, la récupération du token prend plusieurs secondes, ce qui n'est pas acceptable.
[Référence](https://github.com/oblador/react-native-keychain/issues/337)
## _2020-09-24_ | Flow
Flow est un système d'annotation permettant de rendre JavaScript typé statique. Développée par Facebook, cette technologie à initialement été adoptée. En revanche, de nombreux problèmes sont apparus :

5
index.js
View file

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

33
ios/Campus.xcodeproj/project.pbxproj
View file

@ -126,7 +126,6 @@
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle Expo Assets */,
58CDB7AB66969EE82AA3E3B0 /* [CP] Copy Pods Resources */,
2C1F7D7FCACF5494D140CFB7 /* [CP] Embed Pods Frameworks */,
);
buildRules = (
);
@ -200,24 +199,6 @@
shellPath = /bin/sh;
shellScript = "../node_modules/react-native/scripts/react-native-xcode.sh\n";
};
2C1F7D7FCACF5494D140CFB7 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-Campus/Pods-Campus-frameworks.sh",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Campus/Pods-Campus-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
58CDB7AB66969EE82AA3E3B0 /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
@ -332,12 +313,12 @@
CODE_SIGN_ENTITLEMENTS = Campus/application.entitlements;
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 2;
CURRENT_PROJECT_VERSION = 4;
DEAD_CODE_STRIPPING = NO;
DEVELOPMENT_TEAM = 6JA7CLNUV6;
INFOPLIST_FILE = Campus/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
MARKETING_VERSION = 4.1.0;
MARKETING_VERSION = 4.0.1;
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
@ -358,11 +339,11 @@
CODE_SIGN_ENTITLEMENTS = Campus/application.entitlements;
CODE_SIGN_IDENTITY = "Apple Development";
CODE_SIGN_STYLE = Automatic;
CURRENT_PROJECT_VERSION = 2;
CURRENT_PROJECT_VERSION = 4;
DEVELOPMENT_TEAM = 6JA7CLNUV6;
INFOPLIST_FILE = Campus/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
MARKETING_VERSION = 4.1.0;
MARKETING_VERSION = 4.0.1;
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
@ -407,7 +388,6 @@
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 i386";
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
@ -423,7 +403,7 @@
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 11.0;
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
PRODUCT_BUNDLE_IDENTIFIER = fr.amicaleinsat.application;
@ -464,7 +444,6 @@
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 i386";
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_NO_COMMON_BLOCKS = YES;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@ -473,7 +452,7 @@
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 11.0;
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
MTL_ENABLE_DEBUG_INFO = NO;
PRODUCT_BUNDLE_IDENTIFIER = fr.amicaleinsat.application;
PRODUCT_NAME = application;

6
ios/Campus/AppDelegate.m
View file

@ -52,11 +52,7 @@ static void InitializeFlipper(UIApplication *application) {
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"Campus" initialProperties:nil];
if (@available(iOS 13.0, *)) {
rootView.backgroundColor = [UIColor systemBackgroundColor];
} else {
rootView.backgroundColor = [UIColor whiteColor];
}
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];

20
ios/Campus/Info.plist
View file

@ -17,7 +17,7 @@
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>5.0.0</string>
<string>$(MARKETING_VERSION)</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleURLTypes</key>
@ -30,25 +30,25 @@
</dict>
</array>
<key>CFBundleVersion</key>
<string>4</string>
<string>$(CURRENT_PROJECT_VERSION)</string>
<key>FacebookAdvertiserIDCollectionEnabled</key>
<false />
<false/>
<key>FacebookAutoInitEnabled</key>
<false />
<false/>
<key>FacebookAutoLogAppEventsEnabled</key>
<false />
<false/>
<key>LSRequiresIPhoneOS</key>
<true />
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true />
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true />
<true/>
</dict>
</dict>
</dict>
@ -65,7 +65,7 @@
<string>armv7</string>
</array>
<key>UIRequiresFullScreen</key>
<true />
<true/>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
@ -74,6 +74,6 @@
<key>UIUserInterfaceStyle</key>
<string>Automatic</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false />
<false/>
</dict>
</plist>

23
ios/Podfile
View file

@ -1,31 +1,26 @@
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
platform :ios, '10.0'
target 'Campus' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => true
)
use_react_native!(:path => config["reactNativePath"])
# Permissions
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications.podspec"
pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
# use_flipper!()
# you should disable these next few lines.
# use_flipper!
# post_install do |installer|
# flipper_post_install(installer)
# end
post_install do |installer|
react_native_post_install(installer)
end
end

117
locales/en.json
View file

@ -40,45 +40,40 @@
"dryers": "Dryers",
"washer": "Washer",
"washers": "Washers",
"updated": "Updated ",
"switch": "Switch laundromat",
"min": "min",
"informationTab": "Information",
"paymentTab": "Payment",
"tariffs": "Tariffs",
"paymentMethods": "Payment Methods",
"washerProcedure": "Put your laundry in the tumble without tamping it and by respecting weight limits.\n\nClose the machine's door.\n\nChoose a program using one of the four favorite program buttons.\n\nPay to the central command, then press the START button on the machine.\n\nWhen the program is finished, the screen indicates 'Programme terminé', press the yellow button to open the lid and retrieve your laundry.",
"washerProcedure": "Put your laundry in the tumble without tamping it and by respecting charge limits.\n\nClose the machine's door.\n\nChoose a program using one of the four favorite program buttons.\n\nPay to the command central, then press the START button on the machine.\n\nWhen the program is finished, the screen indicates 'Programme terminé', press the yellow button to open the lid and retrieve your laundry.",
"washerTips": "Program 'blanc/couleur': 6kg of dry laundry (cotton linen, linen, underwear, sheets, jeans, towels).\n\nProgram 'non repassable': 3,5 kg of dry laundry (synthetic fibre linen, cotton and polyester mixed).\n\nProgram 'fin 30°C': 2,5 kg of dry laundry (delicate linen in synthetic fibres).\n\nProgram 'laine 30°C': 2,5 kg of dry laundry (wool textiles).",
"dryerProcedure": "Put your laundry in the tumble without tamping it and by respecting charge limits.\n\nClose the machine's door.\n\nChoose a program using one of the four favorite program buttons.\n\nPay to the central command , then press the START button on the machine.",
"dryerTips": "The recommended dryer length is 35 minutes for 14 kg of laundry. You can choose a shorter length if the dryer is not fully charged.",
"dryerProcedure": "Put your laundry in the tumble without tamping it and by respecting charge limits.\n\nClose the machine's door.\n\nChoose a program using one of the four favorite program buttons.\n\nPay to the command central, then press the START button on the machine.",
"dryerTips": "The advised dryer length is 35 minutes for 14 kg of laundry. You can choose a shorter length if the dryer is not fully charged.",
"procedure": "Procedure",
"tips": "Tips",
"numAvailable": "available",
"numAvailablePlural": "available",
"errors": {
"title": "Proxiwash message",
"button": "More info"
},
"washinsa": {
"title": "INSA laundromat",
"subtitle": "Your favorite laundromat!!",
"description": "This is the washing service for INSA's residences (We don't mind if you do not live on the campus and do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers. It is open 7d/7 24h/24! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines).",
"tariff": "Washers 6kg: 3€ per run + 0.80€ with detergent.\nDryers 14kg: 0.35€ for 5min of dryer usage.",
"paymentMethods": "Cash up to 10€.\nCredit Cards also accepted."
"subtitle": "Your favorite laundromat !!",
"description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ).",
"tariff": "Washers 6kg: 3€ the washer + 0.80€ with detergent.\nDryers 14kg: 0.35€ for 5min of dryer usage.",
"paymentMethods": "Cash up until 10€.\nCredit Card also accepted."
},
"tripodeB": {
"title": "Tripode B laundromat",
"subtitle": "For those who live near the metro.",
"description": "This is the washing service for Tripode B and C residences, as well as Thalès and Pythagore. The room is at the foot of Tripod B in front of the Pythagore residence, with 2 dryers and 6 washers. It is open 7d/7 from 7am to 11pm. In addition to the 6kg washers there is one 10kg washer.",
"tariff": "Washers 6kg: 2.60€ per run + 0.90€ with detergent.\nWashers 10kg: 4.90€ per run + 1.50€ with detergent.\nDryers 14kg: 0.40€ for 5min of dryer usage.",
"paymentMethods": "Credit Cards accepted."
"subtitle": "That of those who live near the metro.",
"description": "This is the washing service operated by the CROUS for the Tripode B and C residences as well as Thalès and Pythagore. The room is at the foot of Tripod B in front of the Pythagore residence, with 2 dryers and 6 washers, is open 7d/7 from 7am to 11pm. In addition to the 6kg washers there is one 10kg washers",
"tariff": "Washers 6kg: 2.60€ the washer + 0.90€ with detergent.\nWashers 10kg: 4.90€ the washer + 1.50€ with detergent.\nDryers 14kg: 0.40€ for 5min of dryer usage.",
"paymentMethods": "Carte bancaire acceptée."
},
"modal": {
"enableNotifications": "Notify me",
"disableNotifications": "Stop notifications",
"ok": "OK",
"cancel": "Cancel",
"finished": "This machine is finished. If you started it, you can pick up your laundry.",
"ready": "This machine is empty and ready for use.",
"finished": "This machine is finished. If you started it, you can get back your laundry.",
"ready": "This machine is empty and ready to use.",
"running": "This machine has been started at %{start} and will end at %{end}.\n\nRemaining time: %{remaining} min.\nProgram: %{program}",
"runningNotStarted": "This machine is ready but not started. Please make sure you pressed the start button.",
"broken": "This machine is out of order and cannot be used. Thank you for your comprehension.",
@ -97,18 +92,14 @@
"unknown": "UNKNOWN"
},
"notifications": {
"channel": {
"title": "Laundry reminders",
"description": "Get reminders for watched washers/dryers"
},
"machineFinishedTitle": "Laundry Ready",
"machineFinishedBody": "Machine n°{{number}} is finished and your laundry is ready for pickup",
"machineFinishedBody": "The machine n°{{number}} is finished and your laundry is ready to pickup",
"machineRunningTitle": "Laundry running: {{time}} minutes left",
"machineRunningBody": "Machine n°{{number}} is still running"
"machineRunningBody": "The machine n°{{number}} is still running"
},
"mascotDialog": {
"title": "Small tips",
"message": "No need for queues anymore, you will be notified when machines are ready !\n\nIf you have your head in the clouds, you can turn on notifications for your machine by clicking on it.\n\nIf you live off campus we have another available laundromat, check the settings !!!!",
"message": "No need for queues anymore, you will be notified when machines are ready !\n\nIf you have your head in the clouds, you can turn on notifications for your machine by clicking on it.\n\nIf you live off campus we have other laundromat available, check the settings !!!!",
"ok": "Settings",
"cancel": "Later"
}
@ -145,14 +136,8 @@
},
"planex": {
"title": "Planex",
"noGroupSelected": "No group selected. Please select your group using the big beautiful red button below.",
"favorites": {
"title": "Favorites",
"empty": {
"title": "No favorites",
"subtitle": "Click on the star next to a group to add it to the favorites"
}
},
"noGroupSelected": "No group selected. Please select your group using the big beautiful red button bellow.",
"favorites": "Favorites",
"mascotDialog": {
"title": "Don't skip class",
"message": "Here is Planex! You can set your class and your crush's to favorites in order to find them back easily!\n\nIf you mainly use Campus for Planex, go to the settings to make the app directly start on it!",
@ -164,7 +149,7 @@
"amicaleAbout": {
"title": "A question ?",
"subtitle": "Ask the Amicale",
"message": "Want to revive a club?\nWant to start a new project?\nHere are all the contacts you need! Don't hesitate to write a mail or send a message to the Amicale's Facebook page!",
"message": "You want to revive a club?\nYou want to start a new project?\nHere are al the contacts you need! Do not hesitate to write a mail or send a message to the Amicale's Facebook page!",
"roles": {
"interSchools": "Inter Schools",
"culture": "Culture",
@ -189,8 +174,8 @@
"sortPrice": "Price",
"sortPriceReverse": "Price (reverse)",
"inStock": "in stock",
"description": "The Proximo is your small grocery store held by students directly on campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pasta or soda ! Different products for different problems, everything is sold at cost. You can pay with Lydia or cash.",
"openingHours": "Opening Hours",
"description": "The Proximo is your small grocery store maintained by students directly on the campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pastas or sodas ! Different products for different problems, everything at cost price. You can pay by Lydia or cash.",
"openingHours": "Openning Hours",
"paymentMethods": "Payment Methods",
"paymentMethodsDescription": "Cash or Lydia",
"search": "Search",
@ -220,7 +205,7 @@
"resetPassword": "Forgot Password",
"mascotDialog": {
"title": "An account?",
"message": "An Amicale account allows you to take part in several activities around campus. You can join a club, or even create your own!\n\nLogging into your Amicale account on the app will allow you to see all available clubs on the campus, vote for the upcoming elections, and more to come!\n\nNo Account? Go to the Amicale's building during opening hours to create one.",
"message": "An Amicale account allows you to take part in several activities around campus. You can join a club, or even create your own!\n\nLogging into your Amicale account on the app will allow you to see all available clubs on the campus, vote for the upcoming elections, and more to come!\n\nNo Account? Go to the Amicale's building during open hours to create one.",
"button": "OK"
}
},
@ -238,8 +223,8 @@
"membershipPayed": "Payed",
"membershipNotPayed": "Not payed",
"welcomeTitle": "Welcome %{name}!",
"welcomeDescription": "This is your Amicale INSA Toulouse personal space. Below are the services you can currently access thanks to your account. Feels empty? You're right and we plan on fixing that, so stay tuned!",
"welcomeFeedback": "We plan on doing more! If you have any suggestions or found bugs, please tell us by clicking the button below."
"welcomeDescription": "This is your Amicale INSA Toulouse personal space. Bellow are the current services you can access thanks to your account. Feels empty? You're right and we plan on fixing that, so stay tuned!",
"welcomeFeedback": "We plan on doing more! If you have any suggestions or found bugs, please tell us by clicking the button bellow."
},
"clubs": {
"title": "Clubs",
@ -253,10 +238,10 @@
"amicaleContact": "Contact the Amicale",
"invalidClub": "Could not find the club. Please make sure the club you are trying to access is valid.",
"about": {
"text": "The clubs keep the campus alive, with more than sixty clubs offering various activities! From the philosophy club to the PABI (Production Artisanale de Bière Insalienne), without forgetting the multiple music and dance clubs, you will surely find an activity that suits you!",
"text": "The clubs, making the campus live, with more than sixty clubs offering various activities! From the philosophy club to the PABI (Production Artisanale de Bière Insaienne), without forgetting the multiple music and dance clubs, you will surely find an activity that suits you!",
"title": "A question ?",
"subtitle": "Ask the Amicale",
"message": "Do you have a question regarding clubs?\nWant to revive or create a club?\nContact the Amicale at the following address:"
"message": "You have a question concerning the clubs?\nYou want to revive or create a club?\nContact the Amicale at the following address:"
}
},
"vote": {
@ -265,14 +250,14 @@
"select": {
"title": "Elections open",
"subtitle": "Vote now!",
"sendButton": "Cast Vote",
"dialogTitle": "Cast Vote?",
"dialogTitleLoading": "Casting vote...",
"dialogMessage": "Are you sure you want to cast your vote? You will not be able to change it."
"sendButton": "Send Vote",
"dialogTitle": "Send Vote?",
"dialogTitleLoading": "Sending vote...",
"dialogMessage": "Are you sure you want to send your vote? You will not be able to change it."
},
"tease": {
"title": "Elections incoming",
"subtitle": "Get ready to vote!",
"subtitle": "Be ready to vote!",
"message": "Vote start:"
},
"wait": {
@ -292,7 +277,7 @@
},
"mascotDialog": {
"title": "Why vote?",
"message": "The Amicale's elections are the right moment for you to choose the next team, which will handle different projects on the campus, help organizing your favorite events, animate the campus life during the whole year, and relay your ideas to the administration, so that your campus life is the most enjoyable possible!\nYour turn to make a change!\uD83D\uDE09\n\nNote: If there is only one list, it is still important to vote to show your support, so that the administration knows the current list is supported by students. It is always a plus when taking difficult decisions! \uD83D\uDE09",
"message": "The Amicale's elections is the right moment for you to choose the next team, which will handle different projects on the campus, help organizing your favorite events, animate the campus life during the whole year, and relay your ideas to the administration, so that your campus life is the most enjoyable possible!\nYour turn to make a change!\uD83D\uDE09\n\nNote: If there is only one list, it is still important to vote to show your support, so that the administration knows the current list is supported by students. It is always a plus when taking difficult decisions! \uD83D\uDE09",
"button": "Ok"
}
},
@ -317,7 +302,7 @@
"bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment.",
"mascotDialog": {
"title": "How does it work ?",
"message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, select the equipment of your choice in the list below, enter your lend dates, then come around the Amicale to claim it and give your bail.",
"message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
"button": "Ok"
}
},
@ -337,7 +322,7 @@
},
"mascotDialog": {
"title": "Scano...what?",
"message": "Scanotron 3000 allows you to scan Campus QR codes, created by clubs or event managers, to get more detailed info!\n\nThe camera will never be used for any other purpose.",
"message": "Scanotron 3000 allows you to scan Campus QR codes, created by clubs or event managers, to get more detailed info!\n\nThe camera will never be used for any other purposes.",
"button": "OK"
}
},
@ -348,11 +333,11 @@
"nightModeSubOn": "Your eyes are at peace",
"nightModeSubOff": "Your eyes are burning",
"nightModeAuto": "Follow system dark mode",
"nightModeAutoSub": "Follows the mode set by your system",
"nightModeAutoSub": "Follows the mode chosen by your system",
"startScreen": "Start Screen",
"startScreenSub": "Select which screen to start the app on",
"dashboard": "Dashboard",
"dashboardSub": "Edit which services to display on the dashboard",
"dashboardSub": "Edit what services to display on the dashboard",
"proxiwashNotifReminder": "Machine running reminder",
"proxiwashNotifReminderSub": "How many minutes before",
"proxiwashChangeWash": "Laundromat selection",
@ -360,7 +345,7 @@
"information": "Information",
"dashboardEdit": {
"title": "Edit dashboard",
"message": "The five items above represent your dashboard.\nYou can replace one of its services by selecting it, and then by clicking on the desired new service in the list below.",
"message": "The five items above represent your dashboard.\nYou can replace one of its services by selecting it, and then by clicking on the desired new service in the list bellow.",
"undo": "Undo changes"
}
},
@ -379,24 +364,23 @@
"thanks": "Thanks",
"user": {
"you": "You ?",
"arnaud": "Student in 4IR (2020). He is the creator of this app you use everyday.",
"docjyj": "Student in 2MIC FAS (2020). He added some new features and fixed some bugs.",
"yohan": "Student in 4IR (2020). He helped to fix bugs and gave some ideas.",
"beranger": "Student in 4AE (2020) and president of the Amicale when the app was created. The app was his idea. He helped a lot to find bugs, new features and communication.",
"celine": "Student in 4GPE (2020). Without her, everything wouldn't be as cute. She helped to write the text, for communication, and also to create the mascot 🦊.",
"damien": "Student in 4IR (2020) and creator of the 2020 version of the Amicale's website. Thanks to his help, integrating Amicale's services into the app was child's play.",
"titouan": "Student in 4IR (2020). He helped a lot in finding bugs and new features.",
"theo": "Student in 4AE (2020). If the app works on iOS, this is all thanks to his help during his numerous tests."
"arnaud": "Student in IR (2020). He is the creator of this beautiful app you use everyday. Some say he is handsome as well.",
"yohan": "Student in IR (2020). He helped to fix bugs. I think he is handsome as well but I don't know him personally.",
"beranger": "Student in AE (2020) and president of the Amicale when the app was created. The app was his idea. He helped a lot to find bugs, new features and communication.",
"celine": "Student in GPE (2020). Without her, everything would be less cute. She helped to write the text, for communication, and also to create the mascot 🦊.",
"damien": "Student in IR (2020) and creator of the 2020 version of the Amicale's website. Thanks to his help, integrating Amicale's services into the app was child's play.",
"titouan": "Student in IR (2020). He helped a lot in finding bugs and new features.",
"theo": "Student in AE (2020). If the app works on iOS, this is all thanks to his help during his numerous tests."
}
},
"feedback": {
"title": "Contribute",
"feedback": "Contact the dev",
"feedbackSubtitle": "A student like you!",
"feedbackDescription": "Feedback or bugs, you are always welcome.\nChoose your preferred way from the buttons below.",
"feedbackDescription": "Feedback or bugs, you are always welcome.\nChoose your preferred way from the buttons bellow.",
"contribute": "Contribute to the project",
"contributeSubtitle": "With a possible \"implication citoyenne\"!",
"contributeDescription": "Everyone can help: communication, design or coding! You are free to contribute as you like.\nYou can find below a link to Trello for project organization, and a link to the source code on GitEtud.",
"contributeDescription": "Everyone can help: communication, design or coding! You are free to contribute as you like.\nYou can find bellow a link to Trello for project organization, and a link to the source code on GitEtud.",
"homeButtonTitle": "Contribute to the project",
"homeButtonSubtitle": "Your help is important"
},
@ -434,11 +418,11 @@
"intro": {
"slideMain": {
"title": "Welcome to CAMPUS!",
"text": "INSA Toulouse's student app! Read along to see everything you can do."
"text": "The students app of the INSA Toulouse! Read along to see everything you can do."
},
"slidePlanex": {
"title": "Prettier Planex",
"text": "Lookup your friends' and your own timetables with a mobile friendly Planex!"
"text": "Lookup your and your friends timetable with a mobile friendly Planex!"
},
"slideEvents": {
"title": "Events",
@ -446,7 +430,7 @@
},
"slideServices": {
"title": "And even more!",
"text": "You can do much more with CAMPUS, but I can't explain everything here. Explore the app to find out for yourself!"
"text": "You can do much more with CAMPUS, but I can't explain everything here. Explore the app to find out!"
},
"slideDone": {
"title": "Contribute to the project!",
@ -471,7 +455,6 @@
"badToken": "You are not logged in. Please login and try again.",
"noConsent": "You did not give your consent for data processing to the Amicale.",
"tokenSave": "Could not save session token. Please contact support.",
"tokenRetrieve": "Could not retrieve session token. Please contact support.",
"badInput": "Invalid input. Please try again.",
"forbidden": "You do not have access to this data.",
"connectionError": "Network error. Please check your internet connection.",

49
locales/fr.json
View file

@ -40,8 +40,6 @@
"dryers": "Sèche-Linges",
"washer": "Lave-Linge",
"washers": "Lave-Linges",
"updated": "Mise à jour ",
"switch": "Changer de laverie",
"min": "min",
"informationTab": "Informations",
"paymentTab": "Paiement",
@ -55,27 +53,24 @@
"tips": "Conseils",
"numAvailable": "disponible",
"numAvailablePlural": "disponibles",
"errors": {
"title": "Message laverie",
"button": "En savoir plus"
},
"washinsa": {
"title": "Laverie INSA",
"subtitle": "Ta laverie préférée !!",
"description": "C'est le service de laverie pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines, est ouvert 7J/7 24h/24 ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement).",
"subtitle": "Ta laverie préférer !!",
"description": "C'est le service de laverie proposé par Promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement).",
"tariff": "Lave-Linges 6kg: 3€ la machine + 0.80€ avec la lessive.\nSèche-Linges 14kg: 0.35€ pour 5min de sèche linge.",
"paymentMethods": "Toute monnaie jusqu'à 10€.\nCarte bancaire acceptée."
},
"tripodeB": {
"title": "Laverie Tripode B",
"subtitle": "Pour ceux qui habitent proche du métro.",
"description": "C'est le service de laverie pour les résidences Tripode B et C ainsi que Thalès et Pythagore. Le local situé au pied du Tripode B, en face de de la résidence Pythagore, avec ses 2 sèche-linges et 6 machines est ouvert 7J/7 de 7h à 23h. En plus des machine 6kg il y a une machine de 10kg.",
"subtitle": "Celle de ceux qui habite prés du métro.",
"description": "C'est le service de laverie proposé par le CROUS pour les résidences Tripode B et C ainsi que Thalès et Pythagore. Le local situé au pied du Tripode B en face de de la résidence Pythagore avec ses 2 sèche-linges et 6 machines est ouvert 7J/7 de 7h à 23h. En plus des machine 6kg il y as une machine de 10kg.",
"tariff": "Lave-Linges 6kg: 2.60€ la machine + 0.90€ avec la lessive.\nLave-Linges 10kg: 4.90€ la machine + 1.50€ avec la lessive.\nSèche-Linges 14kg: 0.40€ pour 5min de sèche linge.",
"paymentMethods": "Carte bancaire acceptée."
},
"modal": {
"enableNotifications": "Me Notifier",
"disableNotifications": "Désactiver les notifications",
"ok": "OK",
"cancel": "Annuler",
"finished": "Cette machine est terminée. Si tu l'as démarrée, tu peux récupérer ton linge.",
"ready": "Cette machine est vide et prête à être utilisée.",
@ -97,10 +92,6 @@
"unknown": "INCONNU"
},
"notifications": {
"channel": {
"title": "Rappels laverie",
"description": "Recevoir des rappels pour les machines demandées"
},
"machineFinishedTitle": "Linge prêt",
"machineFinishedBody": "La machine n°{{number}} est terminée et ton linge est prêt à être récupéré",
"machineRunningTitle": "Machine en cours: {{time}} minutes restantes",
@ -146,13 +137,7 @@
"planex": {
"title": "Planex",
"noGroupSelected": "Pas de groupe sélectionné. Choisis un groupe avec le beau bouton rouge ci-dessous.",
"favorites": {
"title": "Favoris",
"empty": {
"title": "Aucun favoris",
"subtitle": "Cliquez sur l'étoile à côté d'un groupe pour l'ajouter aux favoris"
}
},
"favorites": "Favoris",
"mascotDialog": {
"title": "Sécher c'est mal",
"message": "Ici c'est Planex ! Tu peux mettre en favoris ta classe et celle de ton crush pour l'espio... les retrouver facilement !\n\nSi tu utilises Campus surtout pour Planex, vas dans les paramètres pour faire démarrer l'appli direct dessus !",
@ -337,7 +322,7 @@
},
"mascotDialog": {
"title": "Scano...quoi ?",
"message": "Scanotron 3000 te permet de scanner des QR codes Campus, affichés par des clubs ou des respo d'événements, pour avoir plus d'infos !\n\nL'appareil photo ne sera jamais utilisé pour d'autres raisons.",
"message": "Scanotron 3000 te permet de scanner des QR codes Campus, affichés par des clubs ou des respo d'évenements, pour avoir plus d'infos !\n\nL'appareil photo ne sera jamais utilisé pour d'autres raisons.",
"button": "Oké"
}
},
@ -356,11 +341,11 @@
"proxiwashNotifReminder": "Rappel de machine en cours",
"proxiwashNotifReminderSub": "Combien de minutes avant",
"proxiwashChangeWash": "Sélection de la laverie",
"proxiwashChangeWashSub": "Quelle laverie afficher",
"proxiwashChangeWashSub": "Quel laverie à afficher",
"information": "Informations",
"dashboardEdit": {
"title": "Modifier la dashboard",
"message": "Les 5 icônes ci-dessus représentent ta dashboard.\nTu peux remplacer un de ses services en cliquant dessus, puis en sélectionnant le nouveau service de ton choix dans la liste ci-dessous.",
"message": "Les 5 icones ci-dessus représentent ta dashboard.\nTu peux remplacer un de ses services en cliquant dessus, puis en sélectionnant le nouveau service de ton choix dans la liste ci-dessous.",
"undo": "Annuler les changements"
}
},
@ -379,14 +364,13 @@
"thanks": "Remerciements",
"user": {
"you": "Toi ?",
"arnaud": "Étudiant en 4IR (2020). C'est le créateur de cette application que t' utilises tous les jours.",
"docjyj": "Étudiant en 2MIC FAS (2020). Il a ajouté quelques nouvelles fonctionnalités et corrigé des bugs.",
"yohan": "Étudiant en 4IR (2020). Il a aidé à corriger des bug et a proposé quelques idées.",
"beranger": "Étudiant en 4AE (2020) et Président de l’Amicale au moment de la création et du lancement du projet. L’application, c’était son idée. Il a beaucoup aidé pour trouver des bugs, de nouvelles fonctionnalités et faire de la com.",
"celine": "Étudiante en 4GPE (2020). Sans elle, tout serait moins mignon. Elle a aidé pour écrire le texte, faire de la com, et aussi à créer la mascotte 🦊.",
"damien": "Étudiant en 4IR (2020) et créateur de la dernière version du site de l’Amicale. Grâce à son aide, intégrer les services de l’Amicale à l’application a été très simple.",
"titouan": "Étudiant en 4IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.",
"theo": "Étudiant en 4AE (2020). Si l’application marche sur iOS, c’est grâce à son aide lors de ses nombreux tests."
"arnaud": "Étudiant en IR (2020). C'est le créateur de cette magnifique application que t'utilises tous les jour. Et il est vraiment BG aussi.",
"yohan": "Étudiant en IR (2020). Il a aidé à corriger des bug. Et j'imagine aussi qu'il est BG mais je le connait pas.",
"beranger": "Étudiant en AE (2020) et Président de l’Amicale au moment de la création et du lancement du projet. L’application, c’était son idée. Il a beaucoup aidé pour trouver des bugs, de nouvelles fonctionnalités et faire de la com.",
"celine": "Étudiante en GPE (2020). Sans elle, tout serait moins mignon. Elle a aidé pour écrire le texte, faire de la com, et aussi à créer la mascotte 🦊.",
"damien": "Étudiant en IR (2020) et créateur de la dernière version du site de l’Amicale. Grâce à son aide, intégrer les services de l’Amicale à l’application a été très simple.",
"titouan": "Étudiant en IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.",
"theo": "Étudiant en AE (2020). Si l’application marche sur iOS, c’est grâce à son aide lors de ses nombreux tests."
}
},
"feedback": {
@ -471,7 +455,6 @@
"badToken": "Tu n'est pas connecté. Merci de te connecter puis réessayes.",
"noConsent": "Tu n'as pas donné ton consentement pour l'utilisation de tes données personnelles.",
"tokenSave": "Impossible de sauvegarder le token de session. Merci de contacter le support.",
"tokenRetrieve": "Impossible de récupérer le token de session. Merci de contacter le support.",
"badInput": "Entrée invalide. Merci de réessayer.",
"forbidden": "Tu n'as pas accès à cette information.",
"connectionError": "Erreur de réseau. Merci de vérifier ta connexion Internet.",

3
metro.config.js
View file

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

34769
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

186
package.json
View file

@ -1,128 +1,14 @@
{
"name": "campus",
"version": "5.0.0-3",
"version": "4.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"android-release": "react-native run-android --variant=release",
"ios": "react-native run-ios",
"start": "react-native start",
"start-no-cache": "react-native start --reset-cache",
"test": "jest",
"typescript": "tsc --noEmit",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
"full-check": "npm run typescript && npm run lint && npm run test",
"pod": "cd ios && pod install && cd ..",
"bundle": "cd android && ./gradlew bundleRelease",
"clean": "react-native-clean-project",
"postversion": "react-native-version"
},
"dependencies": {
"@nartc/react-native-barcode-mask": "1.2.0",
"@react-native-async-storage/async-storage": "1.15.7",
"@react-native-community/masked-view": "0.1.11",
"@react-native-community/push-notification-ios": "1.10.1",
"@react-native-community/slider": "4.1.6",
"@react-navigation/bottom-tabs": "6.0.5",
"@react-navigation/native": "6.0.2",
"@react-navigation/stack": "6.0.7",
"i18n-js": "3.8.0",
"moment": "2.29.1",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-animatable": "1.3.3",
"react-native-app-intro-slider": "4.0.4",
"react-native-appearance": "0.3.4",
"react-native-autolink": "4.0.0",
"react-native-calendars": "1.1266.0",
"react-native-camera": "4.1.1",
"react-native-collapsible": "1.6.0",
"react-native-gesture-handler": "1.10.3",
"react-native-image-zoom-viewer": "3.0.1",
"react-native-keychain": "4.0.5",
"react-native-linear-gradient": "2.5.6",
"react-native-localize": "2.1.4",
"react-native-modalize": "2.0.8",
"react-native-paper": "4.9.2",
"react-native-permissions": "3.0.5",
"react-native-push-notification": "8.1.0",
"react-native-reanimated": "1.13.2",
"react-native-render-html": "6.1.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "3.7.0",
"react-native-splash-screen": "3.2.0",
"react-native-timeago": "0.5.0",
"react-native-vector-icons": "8.1.0",
"react-native-webview": "11.13.0",
"react-navigation-collapsible": "6.0.0",
"react-navigation-header-buttons": "9.0.0"
},
"devDependencies": {
"@babel/core": "7.12.9",
"@babel/runtime": "7.12.5",
"@react-native-community/eslint-config": "3.0.1",
"@types/i18n-js": "3.8.2",
"@types/jest": "26.0.24",
"@types/react": "17.0.3",
"@types/react-native": "0.65.0",
"@types/react-native-calendars": "1.1264.2",
"@types/react-native-push-notification": "7.3.2",
"@types/react-native-vector-icons": "6.4.8",
"@types/react-test-renderer": "17.0.1",
"@typescript-eslint/eslint-plugin": "4.31.0",
"@typescript-eslint/parser": "4.31.0",
"babel-jest": "26.6.3",
"eslint": "7.32.0",
"eslint-config-prettier": "8.3.0",
"jest": "26.6.3",
"jest-extended": "0.11.5",
"jest-fetch-mock": "3.0.3",
"metro-react-native-babel-preset": "0.66.0",
"prettier": "2.4.0",
"react-native-clean-project": "3.6.7",
"react-native-codegen": "0.0.7",
"react-native-version": "4.0.0",
"react-test-renderer": "17.0.2",
"typescript": "4.4.2"
},
"eslintConfig": {
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"@react-native-community",
"prettier"
],
"rules": {
"no-undef": 0,
"no-shadow": "off",
"@typescript-eslint/no-shadow": [
"error"
],
"prettier/prettier": [
"error",
{
"quoteProps": "consistent",
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
}
]
}
},
"eslintIgnore": [
"node_modules/"
],
"prettier": {
"quoteProps": "consistent",
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"jest": {
"preset": "react-native",
@ -137,5 +23,71 @@
"setupFilesAfterEnv": [
"jest-extended"
]
},
"dependencies": {
"@nartc/react-native-barcode-mask": "^1.2.0",
"@react-native-community/async-storage": "^1.12.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/push-notification-ios": "^1.5.0",
"@react-native-community/slider": "^3.0.3",
"@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"i18n-js": "^3.7.1",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-animatable": "^1.3.3",
"react-native-app-intro-slider": "^4.0.4",
"react-native-appearance": "^0.3.4",
"react-native-autolink": "^3.0.0",
"react-native-calendars": "^1.403.0",
"react-native-camera": "^3.40.0",
"react-native-collapsible": "^1.5.3",
"react-native-gesture-handler": "^1.8.0",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-keychain": "^6.2.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^1.4.1",
"react-native-modalize": "^2.0.6",
"react-native-paper": "^4.2.0",
"react-native-permissions": "^2.2.1",
"react-native-push-notification": "^5.1.1",
"react-native-reanimated": "^1.13.0",
"react-native-render-html": "^4.2.3",
"react-native-safe-area-context": "^3.1.8",
"react-native-screens": "^2.11.0",
"react-native-splash-screen": "^3.2.0",
"react-native-vector-icons": "^7.1.0",
"react-native-webview": "^10.9.0",
"react-navigation-collapsible": "^5.6.4",
"react-navigation-header-buttons": "^5.0.2"
},
"devDependencies": {
"@babel/core": "^7.11.0",
"@babel/runtime": "^7.11.0",
"@react-native-community/eslint-config": "^1.1.0",
"@types/i18n-js": "^3.0.3",
"@types/jest": "^25.2.3",
"@types/react-native": "^0.63.2",
"@types/react-native-calendars": "^1.20.10",
"@types/react-native-vector-icons": "^6.4.6",
"@types/react-test-renderer": "^16.9.2",
"@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0",
"babel-jest": "^25.1.0",
"eslint": "^7.2.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.5",
"eslint-plugin-react-hooks": "^4.0.0",
"jest": "^25.1.0",
"jest-extended": "^0.11.5",
"metro-react-native-babel-preset": "^0.59.0",
"prettier": "2.0.5",
"react-test-renderer": "16.13.1",
"typescript": "^3.8.3"
}
}

227
src/components/Amicale/AuthenticatedScreen.tsx Normal file
View file

@ -0,0 +1,227 @@
/*
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
*
* This file is part of Campus INSAT.
*
* Campus INSAT is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Campus INSAT is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import {StackNavigationProp} from '@react-navigation/stack';
import ConnectionManager from '../../managers/ConnectionManager';
import {ERROR_TYPE} from '../../utils/WebData';
import ErrorView from '../Screens/ErrorView';
import BasicLoadingScreen from '../Screens/BasicLoadingScreen';
type PropsType<T> = {
navigation: StackNavigationProp<any>;
requests: Array<{
link: string;
params: object;
mandatory: boolean;
}>;
renderFunction: (data: Array<T | null>) => React.ReactNode;
errorViewOverride?: Array<{
errorCode: number;
message: string;
icon: string;
showRetryButton: boolean;
}> | null;
};
type StateType = {
loading: boolean;
};
class AuthenticatedScreen<T> extends React.Component<PropsType<T>, StateType> {
static defaultProps = {
errorViewOverride: null,
};
currentUserToken: string | null;
connectionManager: ConnectionManager;
errors: Array<number>;
fetchedData: Array<T | null>;
constructor(props: PropsType<T>) {
super(props);
this.state = {
loading: true,
};
this.currentUserToken = null;
this.connectionManager = ConnectionManager.getInstance();
props.navigation.addListener('focus', this.onScreenFocus);
this.fetchedData = new Array(props.requests.length);
this.errors = new Array(props.requests.length);
}
/**
* Refreshes screen if user changed
*/
onScreenFocus = () => {
if (this.currentUserToken !== this.connectionManager.getToken()) {
this.currentUserToken = this.connectionManager.getToken();
this.fetchData();
}
};
/**
* Callback used when a request finishes, successfully or not.
* Saves data and error code.
* If the token is invalid, logout the user and open the login screen.
* If the last request was received, stop the loading screen.
*
* @param data The data fetched from the server
* @param index The index for the data
* @param error The error code received
*/
onRequestFinished(data: T | null, index: number, error?: number) {
const {props} = this;
if (index >= 0 && index < props.requests.length) {
this.fetchedData[index] = data;
this.errors[index] = error != null ? error : ERROR_TYPE.SUCCESS;
}
// Token expired, logout user
if (error === ERROR_TYPE.BAD_TOKEN) {
this.connectionManager.disconnect();
}
if (this.allRequestsFinished()) {
this.setState({loading: false});
}
}
/**
* Gets the error to render.
* Non-mandatory requests are ignored.
*
*
* @return {number} The error code or ERROR_TYPE.SUCCESS if no error was found
*/
getError(): number {
const {props} = this;
for (let i = 0; i < this.errors.length; i += 1) {
if (
this.errors[i] !== ERROR_TYPE.SUCCESS &&
props.requests[i].mandatory
) {
return this.errors[i];
}
}
return ERROR_TYPE.SUCCESS;
}
/**
* Gets the error view to display in case of error
*
* @return {*}
*/
getErrorRender() {
const {props} = this;
const errorCode = this.getError();
let shouldOverride = false;
let override = null;
const overrideList = props.errorViewOverride;
if (overrideList != null) {
for (let i = 0; i < overrideList.length; i += 1) {
if (overrideList[i].errorCode === errorCode) {
shouldOverride = true;
override = overrideList[i];
break;
}
}
}
if (shouldOverride && override != null) {
return (
<ErrorView
icon={override.icon}
message={override.message}
showRetryButton={override.showRetryButton}
/>
);
}
return <ErrorView errorCode={errorCode} onRefresh={this.fetchData} />;
}
/**
* Fetches the data from the server.
*
* If the user is not logged in errorCode is set to BAD_TOKEN and all requests fail.
*
* If the user is logged in, send all requests.
*/
fetchData = () => {
const {state, props} = this;
if (!state.loading) {
this.setState({loading: true});
}
if (this.connectionManager.isLoggedIn()) {
for (let i = 0; i < props.requests.length; i += 1) {
this.connectionManager
.authenticatedRequest<T>(
props.requests[i].link,
props.requests[i].params,
)
.then((response: T): void => this.onRequestFinished(response, i))
.catch((error: number): void =>
this.onRequestFinished(null, i, error),
);
}
} else {
for (let i = 0; i < props.requests.length; i += 1) {
this.onRequestFinished(null, i, ERROR_TYPE.BAD_TOKEN);
}
}
};
/**
* Checks if all requests finished processing
*
* @return {boolean} True if all finished
*/
allRequestsFinished(): boolean {
let finished = true;
this.errors.forEach((error: number | null) => {
if (error == null) {
finished = false;
}
});
return finished;
}
/**
* Reloads the data, to be called using ref by parent components
*/
reload() {
this.fetchData();
}
render() {
const {state, props} = this;
if (state.loading) {
return <BasicLoadingScreen />;
}
if (this.getError() === ERROR_TYPE.SUCCESS) {
return props.renderFunction(this.fetchedData);
}
return this.getErrorRender();
}
}
export default AuthenticatedScreen;

231
src/components/Amicale/Login/LoginForm.tsx
View file

@ -1,231 +0,0 @@
import React, { useRef, useState } from 'react';
import {
Image,
StyleSheet,
View,
TextInput as RNTextInput,
} from 'react-native';
import {
Button,
Card,
HelperText,
TextInput,
useTheme,
} from 'react-native-paper';
import i18n from 'i18n-js';
import GENERAL_STYLES from '../../../constants/Styles';
type Props = {
loading: boolean;
onSubmit: (email: string, password: string) => void;
onHelpPress: () => void;
onResetPasswordPress: () => void;
};
const ICON_AMICALE = require('../../../../assets/amicale.png');
const styles = StyleSheet.create({
card: {
marginTop: 'auto',
marginBottom: 'auto',
},
header: {
fontSize: 36,
marginBottom: 48,
},
text: {
color: '#ffffff',
},
buttonContainer: {
flexWrap: 'wrap',
},
lockButton: {
marginRight: 'auto',
marginBottom: 20,
},
sendButton: {
marginLeft: 'auto',
},
});
const emailRegex = /^.+@.+\..+$/;
/**
* Checks if the entered email is valid (matches the regex)
*
* @returns {boolean}
*/
function isEmailValid(email: string): boolean {
return emailRegex.test(email);
}
/**
* Checks if the user has entered a password
*
* @returns {boolean}
*/
function isPasswordValid(password: string): boolean {
return password !== '';
}
export default function LoginForm(props: Props) {
const theme = useTheme();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isEmailValidated, setIsEmailValidated] = useState(false);
const [isPasswordValidated, setIsPasswordValidated] = useState(false);
const passwordRef = useRef<RNTextInput>(null);
/**
* 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}
*/
const shouldShowEmailError = () => {
return isEmailValidated && !isEmailValid(email);
};
/**
* 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}
*/
const shouldShowPasswordError = () => {
return isPasswordValidated && !isPasswordValid(password);
};
const onEmailSubmit = () => {
if (passwordRef.current) {
passwordRef.current.focus();
}
};
/**
* The user has unfocused the input, his email is ready to be validated
*/
const validateEmail = () => setIsEmailValidated(true);
/**
* The user has unfocused the input, his password is ready to be validated
*/
const validatePassword = () => setIsPasswordValidated(true);
const onEmailChange = (value: string) => {
if (isEmailValidated) {
setIsEmailValidated(false);
}
setEmail(value);
};
const onPasswordChange = (value: string) => {
if (isPasswordValidated) {
setIsPasswordValidated(false);
}
setPassword(value);
};
const shouldEnableLogin = () => {
return isEmailValid(email) && isPasswordValid(password) && !props.loading;
};
const onSubmit = () => {
if (shouldEnableLogin()) {
props.onSubmit(email, password);
}
};
return (
<View style={styles.card}>
<Card.Title
title={i18n.t('screens.login.title')}
titleStyle={styles.text}
subtitle={i18n.t('screens.login.subtitle')}
subtitleStyle={styles.text}
left={({ size }) => (
<Image
source={ICON_AMICALE}
style={{
width: size,
height: size,
}}
/>
)}
/>
<Card.Content>
<View>
<TextInput
label={i18n.t('screens.login.email')}
mode={'outlined'}
value={email}
onChangeText={onEmailChange}
onBlur={validateEmail}
onSubmitEditing={onEmailSubmit}
error={shouldShowEmailError()}
textContentType={'emailAddress'}
autoCapitalize={'none'}
autoCompleteType={'email'}
autoCorrect={false}
keyboardType={'email-address'}
returnKeyType={'next'}
secureTextEntry={false}
/>
<HelperText type={'error'} visible={shouldShowEmailError()}>
{i18n.t('screens.login.emailError')}
</HelperText>
<TextInput
ref={passwordRef}
label={i18n.t('screens.login.password')}
mode={'outlined'}
value={password}
onChangeText={onPasswordChange}
onBlur={validatePassword}
onSubmitEditing={onSubmit}
error={shouldShowPasswordError()}
textContentType={'password'}
autoCapitalize={'none'}
autoCompleteType={'password'}
autoCorrect={false}
keyboardType={'default'}
returnKeyType={'done'}
secureTextEntry={true}
/>
<HelperText type={'error'} visible={shouldShowPasswordError()}>
{i18n.t('screens.login.passwordError')}
</HelperText>
</View>
<Card.Actions style={styles.buttonContainer}>
<Button
icon="lock-question"
mode="contained"
onPress={props.onResetPasswordPress}
color={theme.colors.warning}
style={styles.lockButton}
>
{i18n.t('screens.login.resetPassword')}
</Button>
<Button
icon="send"
mode="contained"
disabled={!shouldEnableLogin()}
loading={props.loading}
onPress={onSubmit}
style={styles.sendButton}
>
{i18n.t('screens.login.title')}
</Button>
</Card.Actions>
<Card.Actions>
<Button
icon="help-circle"
mode="contained"
onPress={props.onHelpPress}
style={GENERAL_STYLES.centerHorizontal}
>
{i18n.t('screens.login.mascotDialog.title')}
</Button>
</Card.Actions>
</Card.Content>
</View>
);
}

19
src/components/Amicale/LogoutDialog.tsx
View file

@ -20,7 +20,8 @@
import * as React from 'react';
import i18n from 'i18n-js';
import LoadingConfirmDialog from '../Dialogs/LoadingConfirmDialog';
import { useLogout } from '../../utils/logout';
import ConnectionManager from '../../managers/ConnectionManager';
import {useNavigation} from '@react-navigation/native';
type PropsType = {
visible: boolean;
@ -28,13 +29,19 @@ type PropsType = {
};
function LogoutDialog(props: PropsType) {
const onLogout = useLogout();
// Use a loading dialog as it can take some time to update the context
const navigation = useNavigation();
const onClickAccept = async (): Promise<void> => {
return new Promise((resolve: () => void) => {
onLogout();
props.onDismiss();
resolve();
ConnectionManager.getInstance()
.disconnect()
.then(() => {
navigation.reset({
index: 0,
routes: [{name: 'main'}],
});
props.onDismiss();
resolve();
});
});
};

104
src/components/Amicale/Profile/ProfileClubCard.tsx
View file

@ -1,104 +0,0 @@
import React from 'react';
import { Card, Avatar, Divider, useTheme, List } from 'react-native-paper';
import i18n from 'i18n-js';
import { FlatList, StyleSheet } from 'react-native';
import { ProfileClubType } from '../../../screens/Amicale/ProfileScreen';
import { useNavigation } from '@react-navigation/core';
import { MainRoutes } from '../../../navigation/MainNavigator';
type Props = {
clubs?: Array<ProfileClubType>;
};
const styles = StyleSheet.create({
card: {
margin: 10,
},
icon: {
backgroundColor: 'transparent',
},
});
export default function ProfileClubCard(props: Props) {
const theme = useTheme();
const navigation = useNavigation();
const clubKeyExtractor = (item: ProfileClubType) => item.name;
const getClubListItem = ({ item }: { item: ProfileClubType }) => {
const onPress = () =>
navigation.navigate(MainRoutes.ClubInformation, {
type: 'id',
clubId: item.id,
});
let description = i18n.t('screens.profile.isMember');
let icon = (leftProps: {
color: string;
style: {
marginLeft: number;
marginRight: number;
marginVertical?: number;
};
}) => (
<List.Icon
color={leftProps.color}
style={leftProps.style}
icon="chevron-right"
/>
);
if (item.is_manager) {
description = i18n.t('screens.profile.isManager');
icon = (leftProps) => (
<List.Icon
style={leftProps.style}
icon="star"
color={theme.colors.primary}
/>
);
}
return (
<List.Item
title={item.name}
description={description}
left={icon}
onPress={onPress}
/>
);
};
function getClubList(list: Array<ProfileClubType> | undefined) {
if (!list) {
return null;
}
list.sort((a) => (a.is_manager ? -1 : 1));
return (
<FlatList
renderItem={getClubListItem}
keyExtractor={clubKeyExtractor}
data={list}
/>
);
}
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.profile.clubs')}
subtitle={i18n.t('screens.profile.clubsSubtitle')}
left={(iconProps) => (
<Avatar.Icon
size={iconProps.size}
icon="account-group"
color={theme.colors.primary}
style={styles.icon}
/>
)}
/>
<Card.Content>
<Divider />
{getClubList(props.clubs)}
</Card.Content>
</Card>
);
}

56
src/components/Amicale/Profile/ProfileMembershipCard.tsx
View file

@ -1,56 +0,0 @@
import React from 'react';
import { Avatar, Card, List, useTheme } from 'react-native-paper';
import i18n from 'i18n-js';
import { StyleSheet } from 'react-native';
type Props = {
valid?: boolean;
};
const styles = StyleSheet.create({
card: {
margin: 10,
},
icon: {
backgroundColor: 'transparent',
},
});
export default function ProfileMembershipCard(props: Props) {
const theme = useTheme();
const state = props.valid === true;
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.profile.membership')}
subtitle={i18n.t('screens.profile.membershipSubtitle')}
left={(iconProps) => (
<Avatar.Icon
size={iconProps.size}
icon="credit-card"
color={theme.colors.primary}
style={styles.icon}
/>
)}
/>
<Card.Content>
<List.Section>
<List.Item
title={
state
? i18n.t('screens.profile.membershipPayed')
: i18n.t('screens.profile.membershipNotPayed')
}
left={(leftProps) => (
<List.Icon
style={leftProps.style}
color={state ? theme.colors.success : theme.colors.danger}
icon={state ? 'check' : 'close'}
/>
)}
/>
</List.Section>
</Card.Content>
</Card>
);
}

111
src/components/Amicale/Profile/ProfilePersonalCard.tsx
View file

@ -1,111 +0,0 @@
import { useNavigation } from '@react-navigation/core';
import React from 'react';
import { StyleSheet } from 'react-native';
import {
Avatar,
Button,
Card,
Divider,
List,
useTheme,
} from 'react-native-paper';
import Urls from '../../../constants/Urls';
import { ProfileDataType } from '../../../screens/Amicale/ProfileScreen';
import i18n from 'i18n-js';
import { MainRoutes } from '../../../navigation/MainNavigator';
type Props = {
profile?: ProfileDataType;
};
const styles = StyleSheet.create({
card: {
margin: 10,
},
icon: {
backgroundColor: 'transparent',
},
editButton: {
marginLeft: 'auto',
},
mascot: {
width: 60,
},
title: {
marginLeft: 10,
},
});
function getFieldValue(field?: string): string {
return field ? field : i18n.t('screens.profile.noData');
}
export default function ProfilePersonalCard(props: Props) {
const { profile } = props;
const theme = useTheme();
const navigation = useNavigation();
function getPersonalListItem(field: string | undefined, icon: string) {
const title = field != null ? getFieldValue(field) : ':(';
const subtitle = field != null ? '' : getFieldValue(field);
return (
<List.Item
title={title}
description={subtitle}
left={(leftProps) => (
<List.Icon
style={leftProps.style}
icon={icon}
color={field != null ? leftProps.color : theme.colors.textDisabled}
/>
)}
/>
);
}
return (
<Card style={styles.card}>
<Card.Title
title={`${profile?.first_name} ${profile?.last_name}`}
subtitle={profile?.email}
left={(iconProps) => (
<Avatar.Icon
size={iconProps.size}
icon="account"
color={theme.colors.primary}
style={styles.icon}
/>
)}
/>
<Card.Content>
<Divider />
<List.Section>
<List.Subheader>
{i18n.t('screens.profile.personalInformation')}
</List.Subheader>
{getPersonalListItem(profile?.birthday, 'cake-variant')}
{getPersonalListItem(profile?.phone, 'phone')}
{getPersonalListItem(profile?.email, 'email')}
{getPersonalListItem(profile?.branch, 'school')}
</List.Section>
<Divider />
<Card.Actions>
<Button
icon="account-edit"
mode="contained"
onPress={() => {
navigation.navigate(MainRoutes.Website, {
host: Urls.websites.amicale,
path: profile?.link,
title: i18n.t('screens.websites.amicale'),
});
}}
style={styles.editButton}
>
{i18n.t('screens.profile.editInformation')}
</Button>
</Card.Actions>
</Card.Content>
</Card>
);
}

84
src/components/Amicale/Profile/ProfileWelcomeCard.tsx
View file

@ -1,84 +0,0 @@
import { useNavigation } from '@react-navigation/core';
import React from 'react';
import { Button, Card, Divider, Paragraph } from 'react-native-paper';
import Mascot, { MASCOT_STYLE } from '../../Mascot/Mascot';
import i18n from 'i18n-js';
import { StyleSheet } from 'react-native';
import CardList from '../../Lists/CardList/CardList';
import { getAmicaleServices, SERVICES_KEY } from '../../../utils/Services';
import { MainRoutes } from '../../../navigation/MainNavigator';
type Props = {
firstname?: string;
};
const styles = StyleSheet.create({
card: {
margin: 10,
},
editButton: {
marginLeft: 'auto',
},
mascot: {
width: 60,
},
title: {
marginLeft: 10,
},
});
function ProfileWelcomeCard(props: Props) {
const navigation = useNavigation();
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.profile.welcomeTitle', {
name: props.firstname,
})}
left={() => (
<Mascot
style={styles.mascot}
emotion={MASCOT_STYLE.COOL}
animated
entryAnimation={{
animation: 'bounceIn',
duration: 1000,
}}
/>
)}
titleStyle={styles.title}
/>
<Card.Content>
<Divider />
<Paragraph>{i18n.t('screens.profile.welcomeDescription')}</Paragraph>
<CardList
dataset={getAmicaleServices(
(route) => navigation.navigate(route),
true,
[SERVICES_KEY.PROFILE]
)}
isHorizontal={true}
/>
<Paragraph>{i18n.t('screens.profile.welcomeFeedback')}</Paragraph>
<Divider />
<Card.Actions>
<Button
icon="bug"
mode="contained"
onPress={() => {
navigation.navigate(MainRoutes.Feedback);
}}
style={styles.editButton}
>
{i18n.t('screens.feedback.homeButtonTitle')}
</Button>
</Card.Actions>
</Card.Content>
</Card>
);
}
export default React.memo(
ProfileWelcomeCard,
(pp, np) => pp.firstname === np.firstname
);

27
src/components/Amicale/Vote/VoteNotAvailable.tsx
View file

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

27
src/components/Amicale/Vote/VoteResults.tsx
View file

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

191
src/components/Amicale/Vote/VoteSelect.tsx
View file

@ -17,127 +17,146 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { useState } from 'react';
import { Avatar, Button, Card, RadioButton } from 'react-native-paper';
import { FlatList, StyleSheet, View } from 'react-native';
import * as React from 'react';
import {Avatar, Button, Card, RadioButton} from 'react-native-paper';
import {FlatList, StyleSheet, View} from 'react-native';
import i18n from 'i18n-js';
import ConnectionManager from '../../../managers/ConnectionManager';
import LoadingConfirmDialog from '../../Dialogs/LoadingConfirmDialog';
import ErrorDialog from '../../Dialogs/ErrorDialog';
import type { VoteTeamType } from '../../../screens/Amicale/VoteScreen';
import { ApiRejectType } from '../../../utils/WebData';
import { REQUEST_STATUS } from '../../../utils/Requests';
import { useAuthenticatedRequest } from '../../../context/loginContext';
import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
type Props = {
type PropsType = {
teams: Array<VoteTeamType>;
onVoteSuccess: () => void;
onVoteError: () => void;
};
type StateType = {
selectedTeam: string;
voteDialogVisible: boolean;
errorDialogVisible: boolean;
currentError: number;
};
const styles = StyleSheet.create({
card: {
margin: 10,
},
button: {
marginLeft: 'auto',
icon: {
backgroundColor: 'transparent',
},
});
function VoteSelect(props: Props) {
const [selectedTeam, setSelectedTeam] = useState('none');
const [voteDialogVisible, setVoteDialogVisible] = useState(false);
const [currentError, setCurrentError] = useState<ApiRejectType>({
status: REQUEST_STATUS.SUCCESS,
});
const request = useAuthenticatedRequest('elections/vote', {
team: parseInt(selectedTeam, 10),
});
export default class VoteSelect extends React.PureComponent<
PropsType,
StateType
> {
constructor(props: PropsType) {
super(props);
this.state = {
selectedTeam: 'none',
voteDialogVisible: false,
errorDialogVisible: false,
currentError: 0,
};
}
const voteKeyExtractor = (item: VoteTeamType) => item.id.toString();
onVoteSelectionChange = (teamName: string): void =>
this.setState({selectedTeam: teamName});
const voteRenderItem = ({ item }: { item: VoteTeamType }) => (
voteKeyExtractor = (item: VoteTeamType): string => item.id.toString();
voteRenderItem = ({item}: {item: VoteTeamType}) => (
<RadioButton.Item label={item.name} value={item.id.toString()} />
);
const showVoteDialog = () => setVoteDialogVisible(true);
showVoteDialog = (): void => this.setState({voteDialogVisible: true});
const onVoteDialogDismiss = () => setVoteDialogVisible(false);
onVoteDialogDismiss = (): void => this.setState({voteDialogVisible: false});
const onVoteDialogAccept = async (): Promise<void> => {
onVoteDialogAccept = async (): Promise<void> => {
return new Promise((resolve: () => void) => {
request()
const {state} = this;
ConnectionManager.getInstance()
.authenticatedRequest('elections/vote', {
team: parseInt(state.selectedTeam, 10),
})
.then(() => {
onVoteDialogDismiss();
this.onVoteDialogDismiss();
const {props} = this;
props.onVoteSuccess();
resolve();
})
.catch((error: ApiRejectType) => {
onVoteDialogDismiss();
setCurrentError(error);
.catch((error: number) => {
this.onVoteDialogDismiss();
this.showErrorDialog(error);
resolve();
});
});
};
const onErrorDialogDismiss = () => {
setCurrentError({ status: REQUEST_STATUS.SUCCESS });
showErrorDialog = (error: number): void =>
this.setState({
errorDialogVisible: true,
currentError: error,
});
onErrorDialogDismiss = () => {
this.setState({errorDialogVisible: false});
const {props} = this;
props.onVoteError();
};
return (
<View>
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.vote.select.title')}
subtitle={i18n.t('screens.vote.select.subtitle')}
left={(iconProps) => (
<Avatar.Icon size={iconProps.size} icon="alert-decagram" />
)}
render() {
const {state, props} = this;
return (
<View>
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.vote.select.title')}
subtitle={i18n.t('screens.vote.select.subtitle')}
left={(iconProps) => (
<Avatar.Icon size={iconProps.size} icon="alert-decagram" />
)}
/>
<Card.Content>
<RadioButton.Group
onValueChange={this.onVoteSelectionChange}
value={state.selectedTeam}>
<FlatList
data={props.teams}
keyExtractor={this.voteKeyExtractor}
extraData={state.selectedTeam}
renderItem={this.voteRenderItem}
/>
</RadioButton.Group>
</Card.Content>
<Card.Actions>
<Button
icon="send"
mode="contained"
onPress={this.showVoteDialog}
style={{marginLeft: 'auto'}}
disabled={state.selectedTeam === 'none'}>
{i18n.t('screens.vote.select.sendButton')}
</Button>
</Card.Actions>
</Card>
<LoadingConfirmDialog
visible={state.voteDialogVisible}
onDismiss={this.onVoteDialogDismiss}
onAccept={this.onVoteDialogAccept}
title={i18n.t('screens.vote.select.dialogTitle')}
titleLoading={i18n.t('screens.vote.select.dialogTitleLoading')}
message={i18n.t('screens.vote.select.dialogMessage')}
/>
<Card.Content>
<RadioButton.Group
onValueChange={setSelectedTeam}
value={selectedTeam}
>
<FlatList
data={props.teams}
keyExtractor={voteKeyExtractor}
extraData={selectedTeam}
renderItem={voteRenderItem}
/>
</RadioButton.Group>
</Card.Content>
<Card.Actions>
<Button
icon={'send'}
mode={'contained'}
onPress={showVoteDialog}
style={styles.button}
disabled={selectedTeam === 'none'}
>
{i18n.t('screens.vote.select.sendButton')}
</Button>
</Card.Actions>
</Card>
<LoadingConfirmDialog
visible={voteDialogVisible}
onDismiss={onVoteDialogDismiss}
onAccept={onVoteDialogAccept}
title={i18n.t('screens.vote.select.dialogTitle')}
titleLoading={i18n.t('screens.vote.select.dialogTitleLoading')}
message={i18n.t('screens.vote.select.dialogMessage')}
/>
<ErrorDialog
visible={
currentError.status !== REQUEST_STATUS.SUCCESS ||
currentError.code !== undefined
}
onDismiss={onErrorDialogDismiss}
status={currentError.status}
code={currentError.code}
/>
</View>
);
<ErrorDialog
visible={state.errorDialogVisible}
onDismiss={this.onErrorDialogDismiss}
errorCode={state.currentError}
/>
</View>
);
}
}
export default VoteSelect;

7
src/components/Amicale/Vote/VoteTease.tsx
View file

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

13
src/components/Amicale/Vote/VoteWait.tsx
View file

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

178
src/components/Animations/AnimatedAccordion.tsx
View file

@ -17,14 +17,14 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { useEffect, useRef } from 'react';
import { View, ViewStyle } from 'react-native';
import { List, useTheme } from 'react-native-paper';
import * as React from 'react';
import {View, ViewStyle} from 'react-native';
import {List, withTheme} from 'react-native-paper';
import Collapsible from 'react-native-collapsible';
import * as Animatable from 'react-native-animatable';
import GENERAL_STYLES from '../../constants/Styles';
type PropsType = {
theme: ReactNativePaper.Theme;
title: string;
subtitle?: string;
style?: ViewStyle;
@ -37,101 +37,99 @@ type PropsType = {
}) => React.ReactNode;
opened?: boolean;
unmountWhenCollapsed?: boolean;
enabled?: boolean;
renderItem: () => React.ReactNode;
children?: React.ReactNode;
};
function AnimatedAccordion(props: PropsType) {
const theme = useTheme();
type StateType = {
expanded: boolean;
};
const [expanded, setExpanded] = React.useState(props.opened);
const lastOpenedProp = useRef(props.opened);
const chevronIcon = useRef(props.opened ? 'chevron-up' : 'chevron-down');
const animStart = useRef(props.opened ? '180deg' : '0deg');
const animEnd = useRef(props.opened ? '0deg' : '180deg');
const enabled = props.enabled !== false;
const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
const getAccordionAnimation = ():
| Animatable.Animation
| string
| Animatable.CustomAnimation => {
// I don't knwo why ts is complaining
// The type definitions must be broken because this is a valid style and it works
class AnimatedAccordion extends React.Component<PropsType, StateType> {
chevronRef: {current: null | (typeof AnimatedListIcon & List.Icon)};
chevronIcon: string;
animStart: string;
animEnd: string;
constructor(props: PropsType) {
super(props);
this.chevronIcon = '';
this.animStart = '';
this.animEnd = '';
this.state = {
expanded: props.opened != null ? props.opened : false,
};
this.chevronRef = React.createRef();
this.setupChevron();
}
shouldComponentUpdate(nextProps: PropsType): boolean {
const {state, props} = this;
if (nextProps.opened != null && nextProps.opened !== props.opened) {
state.expanded = nextProps.opened;
}
return true;
}
setupChevron() {
const {expanded} = this.state;
if (expanded) {
return {
from: {
// @ts-ignore
rotate: animStart.current,
},
to: {
// @ts-ignore
rotate: animEnd.current,
},
};
this.chevronIcon = 'chevron-up';
this.animStart = '180deg';
this.animEnd = '0deg';
} else {
return {
from: {
// @ts-ignore
rotate: animEnd.current,
},
to: {
// @ts-ignore
rotate: animStart.current,
},
};
this.chevronIcon = 'chevron-down';
this.animStart = '0deg';
this.animEnd = '180deg';
}
}
toggleAccordion = () => {
const {expanded} = this.state;
if (this.chevronRef.current != null) {
this.chevronRef.current.transitionTo({
rotate: expanded ? this.animStart : this.animEnd,
});
this.setState((prevState: StateType): {expanded: boolean} => ({
expanded: !prevState.expanded,
}));
}
};
useEffect(() => {
// Force the expanded state to follow the prop when changing
if (!enabled) {
setExpanded(false);
} else if (
props.opened !== undefined &&
props.opened !== lastOpenedProp.current
) {
setExpanded(props.opened);
}
}, [enabled, props.opened]);
const toggleAccordion = () => setExpanded(!expanded);
const renderChildren =
!props.unmountWhenCollapsed || (props.unmountWhenCollapsed && expanded);
return (
<View style={props.style}>
<List.Item
title={props.title}
description={props.subtitle}
descriptionNumberOfLines={2}
titleStyle={expanded ? { color: theme.colors.primary } : null}
onPress={enabled ? toggleAccordion : undefined}
right={
enabled
? (iconProps) => (
<Animatable.View
animation={getAccordionAnimation()}
duration={300}
useNativeDriver={true}
>
<List.Icon
style={{ ...iconProps.style, ...GENERAL_STYLES.center }}
icon={chevronIcon.current}
color={expanded ? theme.colors.primary : iconProps.color}
/>
</Animatable.View>
)
: undefined
}
left={props.left}
/>
{enabled ? (
<Collapsible collapsed={!expanded}>
{renderChildren ? props.renderItem() : null}
render() {
const {props, state} = this;
const {colors} = props.theme;
return (
<View style={props.style}>
<List.Item
title={props.title}
description={props.subtitle}
titleStyle={state.expanded ? {color: colors.primary} : null}
onPress={this.toggleAccordion}
right={(iconProps) => (
<AnimatedListIcon
ref={this.chevronRef}
style={iconProps.style}
icon={this.chevronIcon}
color={state.expanded ? colors.primary : iconProps.color}
useNativeDriver
/>
)}
left={props.left}
/>
<Collapsible collapsed={!state.expanded}>
{!props.unmountWhenCollapsed ||
(props.unmountWhenCollapsed && state.expanded)
? props.children
: null}
</Collapsible>
) : null}
</View>
);
</View>
);
}
}
export default AnimatedAccordion;
export default withTheme(AnimatedAccordion);

203
src/components/Animations/AnimatedBottomBar.tsx Normal file
View file

@ -0,0 +1,203 @@
/*
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
*
* This file is part of Campus INSAT.
*
* Campus INSAT is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Campus INSAT is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import {
NativeScrollEvent,
NativeSyntheticEvent,
StyleSheet,
View,
} from 'react-native';
import {FAB, IconButton, Surface, withTheme} from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
import {StackNavigationProp} from '@react-navigation/stack';
import AutoHideHandler from '../../utils/AutoHideHandler';
import CustomTabBar from '../Tabbar/CustomTabBar';
const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
type PropsType = {
navigation: StackNavigationProp<any>;
theme: ReactNativePaper.Theme;
onPress: (action: string, data?: string) => void;
seekAttention: boolean;
};
type StateType = {
currentMode: string;
};
const DISPLAY_MODES = {
DAY: 'agendaDay',
WEEK: 'agendaWeek',
MONTH: 'month',
};
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: '5%',
width: '90%',
},
surface: {
position: 'relative',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 50,
elevation: 2,
},
fabContainer: {
position: 'absolute',
left: 0,
right: 0,
alignItems: 'center',
width: '100%',
height: '100%',
},
fab: {
position: 'absolute',
alignSelf: 'center',
top: '-25%',
},
});
class AnimatedBottomBar extends React.Component<PropsType, StateType> {
ref: {current: null | (Animatable.View & View)};
hideHandler: AutoHideHandler;
displayModeIcons: {[key: string]: string};
constructor(props: PropsType) {
super(props);
this.state = {
currentMode: DISPLAY_MODES.WEEK,
};
this.ref = React.createRef();
this.hideHandler = new AutoHideHandler(false);
this.hideHandler.addListener(this.onHideChange);
this.displayModeIcons = {};
this.displayModeIcons[DISPLAY_MODES.DAY] = 'calendar-text';
this.displayModeIcons[DISPLAY_MODES.WEEK] = 'calendar-week';
this.displayModeIcons[DISPLAY_MODES.MONTH] = 'calendar-range';
}
shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
const {props, state} = this;
return (
nextProps.seekAttention !== props.seekAttention ||
nextState.currentMode !== state.currentMode
);
}
onHideChange = (shouldHide: boolean) => {
const ref = this.ref;
if (ref && ref.current && ref.current.fadeOutDown && ref.current.fadeInUp) {
if (shouldHide) {
ref.current.fadeOutDown(500);
} else {
ref.current.fadeInUp(500);
}
}
};
onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
this.hideHandler.onScroll(event);
};
changeDisplayMode = () => {
const {props, state} = this;
let newMode;
switch (state.currentMode) {
case DISPLAY_MODES.DAY:
newMode = DISPLAY_MODES.WEEK;
break;
case DISPLAY_MODES.WEEK:
newMode = DISPLAY_MODES.MONTH;
break;
case DISPLAY_MODES.MONTH:
newMode = DISPLAY_MODES.DAY;
break;
default:
newMode = DISPLAY_MODES.WEEK;
break;
}
this.setState({currentMode: newMode});
props.onPress('changeView', newMode);
};
render() {
const {props, state} = this;
const buttonColor = props.theme.colors.primary;
return (
<Animatable.View
ref={this.ref}
useNativeDriver
style={{
...styles.container,
bottom: 10 + CustomTabBar.TAB_BAR_HEIGHT,
}}>
<Surface style={styles.surface}>
<View style={styles.fabContainer}>
<AnimatedFAB
animation={props.seekAttention ? 'bounce' : undefined}
easing="ease-out"
iterationDelay={500}
iterationCount="infinite"
useNativeDriver
style={styles.fab}
icon="account-clock"
onPress={(): void => props.navigation.navigate('group-select')}
/>
</View>
<View style={{flexDirection: 'row'}}>
<IconButton
icon={this.displayModeIcons[state.currentMode]}
color={buttonColor}
onPress={this.changeDisplayMode}
/>
<IconButton
icon="clock-in"
color={buttonColor}
style={{marginLeft: 5}}
onPress={(): void => props.onPress('today')}
/>
</View>
<View style={{flexDirection: 'row'}}>
<IconButton
icon="chevron-left"
color={buttonColor}
onPress={(): void => props.onPress('prev')}
/>
<IconButton
icon="chevron-right"
color={buttonColor}
style={{marginLeft: 5}}
onPress={(): void => props.onPress('next')}
/>
</View>
</Surface>
</Animatable.View>
);
}
}
export default withTheme(AnimatedBottomBar);

13
src/components/Animations/AnimatedFAB.tsx
View file

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

177
src/components/Animations/PlanexBottomBar.tsx
View file

@ -1,177 +0,0 @@
/*
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
*
* This file is part of Campus INSAT.
*
* Campus INSAT is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Campus INSAT is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { useState } from 'react';
import { StyleSheet, View, Animated } from 'react-native';
import { FAB, IconButton, Surface, useTheme } from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar';
import { useNavigation } from '@react-navigation/core';
import { useCollapsible } from '../../context/CollapsibleContext';
import { MainRoutes } from '../../navigation/MainNavigator';
type Props = {
onPress: (action: string, data?: string) => void;
seekAttention: boolean;
};
const DISPLAY_MODES = {
DAY: 'agendaDay',
WEEK: 'agendaWeek',
MONTH: 'month',
};
const styles = StyleSheet.create({
container: {
position: 'absolute',
left: '5%',
width: '90%',
},
surface: {
position: 'relative',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 50,
elevation: 2,
},
fabContainer: {
position: 'absolute',
left: 0,
right: 0,
alignItems: 'center',
width: '100%',
height: '100%',
},
fab: {
position: 'absolute',
alignSelf: 'center',
top: '-25%',
},
side: {
flexDirection: 'row',
},
icon: {
marginLeft: 5,
},
});
const DISPLAY_MODE_ICONS = {
[DISPLAY_MODES.DAY]: 'calendar-text',
[DISPLAY_MODES.WEEK]: 'calendar-week',
[DISPLAY_MODES.MONTH]: 'calendar-range',
};
function PlanexBottomBar(props: Props) {
const navigation = useNavigation();
const theme = useTheme();
const [currentMode, setCurrentMode] = useState(DISPLAY_MODES.WEEK);
const { collapsible } = useCollapsible();
const changeDisplayMode = () => {
let newMode;
switch (currentMode) {
case DISPLAY_MODES.DAY:
newMode = DISPLAY_MODES.WEEK;
break;
case DISPLAY_MODES.WEEK:
newMode = DISPLAY_MODES.MONTH;
break;
case DISPLAY_MODES.MONTH:
newMode = DISPLAY_MODES.DAY;
break;
default:
newMode = DISPLAY_MODES.WEEK;
break;
}
setCurrentMode(newMode);
props.onPress('changeView', newMode);
};
let translateY: number | Animated.AnimatedInterpolation = 0;
let opacity: number | Animated.AnimatedInterpolation = 1;
let scale: number | Animated.AnimatedInterpolation = 1;
if (collapsible) {
translateY = Animated.multiply(-3, collapsible.translateY);
opacity = Animated.subtract(1, collapsible.progress);
scale = Animated.add(
0.5,
Animated.multiply(0.5, Animated.subtract(1, collapsible.progress))
);
}
const buttonColor = theme.colors.primary;
return (
<Animated.View
style={{
...styles.container,
bottom: 10 + TAB_BAR_HEIGHT,
transform: [{ translateY: translateY }, { scale: scale }],
opacity: opacity,
}}
>
<Surface style={styles.surface}>
<View style={styles.fabContainer}>
<Animatable.View
style={styles.fab}
animation={props.seekAttention ? 'bounce' : undefined}
easing={'ease-out'}
iterationDelay={500}
iterationCount={'infinite'}
useNativeDriver={true}
>
<FAB
icon={'account-clock'}
onPress={() => navigation.navigate(MainRoutes.GroupSelect)}
/>
</Animatable.View>
</View>
<View style={styles.side}>
<IconButton
icon={DISPLAY_MODE_ICONS[currentMode]}
color={buttonColor}
onPress={changeDisplayMode}
/>
<IconButton
icon="clock-in"
color={buttonColor}
style={styles.icon}
onPress={() => props.onPress('today')}
/>
</View>
<View style={styles.side}>
<IconButton
icon="chevron-left"
color={buttonColor}
onPress={() => props.onPress('prev')}
/>
<IconButton
icon="chevron-right"
color={buttonColor}
style={styles.icon}
onPress={() => props.onPress('next')}
/>
</View>
</Surface>
</Animated.View>
);
}
export default PlanexBottomBar;

79
src/components/Collapsible/CollapsibleComponent.tsx
View file

@ -17,87 +17,44 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { useCallback } from 'react';
import { useCollapsibleHeader } from 'react-navigation-collapsible';
import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar';
import {
NativeScrollEvent,
NativeSyntheticEvent,
StyleSheet,
} from 'react-native';
import { useTheme } from 'react-native-paper';
import { useCollapsible } from '../../context/CollapsibleContext';
import { useFocusEffect } from '@react-navigation/core';
import * as React from 'react';
import {useCollapsibleStack} from 'react-navigation-collapsible';
import CustomTabBar from '../Tabbar/CustomTabBar';
import {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
export type CollapsibleComponentPropsType = {
export interface CollapsibleComponentPropsType {
children?: React.ReactNode;
hasTab?: boolean;
onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
paddedProps?: (paddingTop: number) => Record<string, any>;
headerColors?: string;
};
}
type Props = CollapsibleComponentPropsType & {
interface PropsType extends CollapsibleComponentPropsType {
component: React.ComponentType<any>;
};
const styles = StyleSheet.create({
main: {
minHeight: '100%',
},
});
function CollapsibleComponent(props: Props) {
const { paddedProps, headerColors } = props;
const Comp = props.component;
const theme = useTheme();
const { setCollapsible } = useCollapsible();
const collapsible = useCollapsibleHeader({
config: {
collapsedColor: headerColors ? headerColors : theme.colors.surface,
useNativeDriver: true,
},
navigationOptions: {
headerStyle: {
backgroundColor: headerColors ? headerColors : theme.colors.surface,
},
},
});
useFocusEffect(
useCallback(() => {
setCollapsible(collapsible);
}, [collapsible, setCollapsible])
);
const { containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener } =
collapsible;
const paddingBottom = props.hasTab ? TAB_BAR_HEIGHT : 0;
}
function CollapsibleComponent(props: PropsType) {
const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
if (props.onScroll) {
props.onScroll(event);
}
};
const pprops =
paddedProps !== undefined ? paddedProps(containerPaddingTop) : undefined;
const Comp = props.component;
const {
containerPaddingTop,
scrollIndicatorInsetTop,
onScrollWithListener,
} = useCollapsibleStack();
return (
<Comp
{...props}
{...pprops}
onScroll={onScrollWithListener(onScroll)}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: paddingBottom,
...styles.main,
paddingBottom: props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
minHeight: '100%',
}}
scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
>
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
{props.children}
</Comp>
);

4
src/components/Collapsible/CollapsibleFlatList.tsx
View file

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

4
src/components/Collapsible/CollapsibleScrollView.tsx
View file

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

4
src/components/Collapsible/CollapsibleSectionList.tsx
View file

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

10
src/components/Dialogs/AlertDialog.tsx
View file

@ -18,26 +18,20 @@
*/
import * as React from 'react';
import { Button, Dialog, Paragraph, Portal } from 'react-native-paper';
import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
import i18n from 'i18n-js';
import { ViewStyle } from 'react-native';
type PropsType = {
visible: boolean;
onDismiss: () => void;
title: string | React.ReactNode;
message: string | React.ReactNode;
style?: ViewStyle;
};
function AlertDialog(props: PropsType) {
return (
<Portal>
<Dialog
visible={props.visible}
onDismiss={props.onDismiss}
style={props.style}
>
<Dialog visible={props.visible} onDismiss={props.onDismiss}>
<Dialog.Title>{props.title}</Dialog.Title>
<Dialog.Content>
<Paragraph>{props.message}</Paragraph>

51
src/components/Dialogs/ErrorDialog.tsx
View file

@ -19,27 +19,60 @@
import * as React from 'react';
import i18n from 'i18n-js';
import {ERROR_TYPE} from '../../utils/WebData';
import AlertDialog from './AlertDialog';
import {
API_REQUEST_CODES,
getErrorMessage,
REQUEST_STATUS,
} from '../../utils/Requests';
type PropsType = {
visible: boolean;
onDismiss: () => void;
status?: REQUEST_STATUS;
code?: API_REQUEST_CODES;
errorCode: number;
};
function ErrorDialog(props: PropsType) {
let title: string;
let message: string;
title = i18n.t('errors.title');
switch (props.errorCode) {
case ERROR_TYPE.BAD_CREDENTIALS:
message = i18n.t('errors.badCredentials');
break;
case ERROR_TYPE.BAD_TOKEN:
message = i18n.t('errors.badToken');
break;
case ERROR_TYPE.NO_CONSENT:
message = i18n.t('errors.noConsent');
break;
case ERROR_TYPE.TOKEN_SAVE:
message = i18n.t('errors.tokenSave');
break;
case ERROR_TYPE.TOKEN_RETRIEVE:
message = i18n.t('errors.unknown');
break;
case ERROR_TYPE.BAD_INPUT:
message = i18n.t('errors.badInput');
break;
case ERROR_TYPE.FORBIDDEN:
message = i18n.t('errors.forbidden');
break;
case ERROR_TYPE.CONNECTION_ERROR:
message = i18n.t('errors.connectionError');
break;
case ERROR_TYPE.SERVER_ERROR:
message = i18n.t('errors.serverError');
break;
default:
message = i18n.t('errors.unknown');
break;
}
message += `\n\nCode ${props.errorCode}`;
return (
<AlertDialog
visible={props.visible}
onDismiss={props.onDismiss}
title={i18n.t('errors.title')}
message={getErrorMessage(props).message}
title={title}
message={message}
/>
);
}

19
src/components/Dialogs/LoadingConfirmDialog.tsx
View file

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

6
src/components/Dialogs/OptionsDialog.tsx
View file

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

25
src/components/Home/ActionsDashboardItem.tsx
View file

@ -18,20 +18,10 @@
*/
import * as React from 'react';
import { List } from 'react-native-paper';
import { StyleSheet, View } from 'react-native';
import {List} from 'react-native-paper';
import {View} from 'react-native';
import i18n from 'i18n-js';
import { useNavigation } from '@react-navigation/native';
import { MainRoutes } from '../../navigation/MainNavigator';
const styles = StyleSheet.create({
item: {
paddingTop: 0,
paddingBottom: 0,
marginLeft: 10,
marginRight: 10,
},
});
import {useNavigation} from '@react-navigation/native';
function ActionsDashBoardItem() {
const navigation = useNavigation();
@ -54,8 +44,13 @@ function ActionsDashBoardItem() {
icon="chevron-right"
/>
)}
onPress={(): void => navigation.navigate(MainRoutes.Feedback)}
style={styles.item}
onPress={(): void => navigation.navigate('feedback')}
style={{
paddingTop: 0,
paddingBottom: 0,
marginLeft: 10,
marginRight: 10,
}}
/>
</View>
);

14
src/components/Home/EventDashboardItem.tsx
View file

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

66
src/components/Home/FeedItem.tsx
View file

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

22
src/components/Home/PreviewEventDashboardItem.tsx
View file

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

54
src/components/Home/SmallDashboardItem.tsx
View file

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

5
src/components/Intro/IconIntro.tsx
View file

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

14
src/components/Intro/MascotIntroEnd.tsx
View file

@ -18,23 +18,25 @@
*/
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import GENERAL_STYLES from '../../constants/Styles';
import Mascot, { MASCOT_STYLE } from '../Mascot/Mascot';
import {StyleSheet, View} from 'react-native';
import Mascot, {MASCOT_STYLE} from '../Mascot/Mascot';
const styles = StyleSheet.create({
center: {
...GENERAL_STYLES.center,
width: '80%',
marginTop: 'auto',
marginBottom: 'auto',
marginRight: 'auto',
marginLeft: 'auto',
},
});
function MascotIntroEnd() {
return (
<View style={GENERAL_STYLES.flex}>
<View style={{flex: 1}}>
<Mascot
style={{
...styles.center,
width: '80%',
}}
emotion={MASCOT_STYLE.COOL}
animated

57
src/components/Intro/MascotIntroWelcome.tsx
View file

@ -18,40 +18,28 @@
*/
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import {StyleSheet, View} from 'react-native';
import * as Animatable from 'react-native-animatable';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import GENERAL_STYLES from '../../constants/Styles';
import Mascot, { MASCOT_STYLE } from '../Mascot/Mascot';
import Mascot, {MASCOT_STYLE} from '../Mascot/Mascot';
const styles = StyleSheet.create({
mascot: {
...GENERAL_STYLES.center,
width: '80%',
},
text: {
color: '#fff',
textAlign: 'center',
fontSize: 25,
},
container: {
position: 'absolute',
bottom: 30,
right: '20%',
width: 50,
height: 50,
},
icon: {
...GENERAL_STYLES.center,
transform: [{ rotateZ: '70deg' }],
center: {
marginTop: 'auto',
marginBottom: 'auto',
marginRight: 'auto',
marginLeft: 'auto',
},
});
function MascotIntroWelcome() {
return (
<View style={GENERAL_STYLES.flex}>
<View style={{flex: 1}}>
<Mascot
style={styles.mascot}
style={{
...styles.center,
width: '80%',
}}
emotion={MASCOT_STYLE.NORMAL}
animated
entryAnimation={{
@ -63,8 +51,11 @@ function MascotIntroWelcome() {
useNativeDriver
animation="fadeInUp"
duration={500}
style={styles.text}
>
style={{
color: '#fff',
textAlign: 'center',
fontSize: 25,
}}>
PABLO
</Animatable.Text>
<Animatable.View
@ -72,10 +63,18 @@ function MascotIntroWelcome() {
animation="fadeInUp"
duration={500}
delay={200}
style={styles.container}
>
style={{
position: 'absolute',
bottom: 30,
right: '20%',
width: 50,
height: 50,
}}>
<MaterialCommunityIcons
style={styles.icon}
style={{
...styles.center,
transform: [{rotateZ: '70deg'}],
}}
name="undo"
color="#fff"
size={40}

10
src/components/Lists/CardList/CardList.tsx
View file

@ -18,10 +18,10 @@
*/
import * as React from 'react';
import { Animated, Dimensions, ViewStyle } from 'react-native';
import {Animated, Dimensions, ViewStyle} from 'react-native';
import ImageListItem from './ImageListItem';
import CardListItem from './CardListItem';
import { ServiceItemType } from '../../../utils/Services';
import type {ServiceItemType} from '../../../managers/ServicesManager';
type PropsType = {
dataset: Array<ServiceItemType>;
@ -45,8 +45,8 @@ export default class CardList extends React.Component<PropsType> {
this.horizontalItemSize = this.windowWidth / 4; // So that we can fit 3 items, and a part of the 4th => user knows he can scroll
}
getRenderItem = ({ item }: { item: ServiceItemType }) => {
const { props } = this;
getRenderItem = ({item}: {item: ServiceItemType}) => {
const {props} = this;
if (props.isHorizontal) {
return (
<ImageListItem
@ -62,7 +62,7 @@ export default class CardList extends React.Component<PropsType> {
keyExtractor = (item: ServiceItemType): string => item.key;
render() {
const { props } = this;
const {props} = this;
let containerStyle = {};
if (props.isHorizontal) {
containerStyle = {

35
src/components/Lists/CardList/CardListItem.tsx
View file

@ -18,36 +18,29 @@
*/
import * as React from 'react';
import { Caption, Card, Paragraph, TouchableRipple } from 'react-native-paper';
import { StyleSheet, View } from 'react-native';
import GENERAL_STYLES from '../../../constants/Styles';
import { ServiceItemType } from '../../../utils/Services';
import {Caption, Card, Paragraph, TouchableRipple} from 'react-native-paper';
import {View} from 'react-native';
import type {ServiceItemType} from '../../../managers/ServicesManager';
type PropsType = {
item: ServiceItemType;
};
const styles = StyleSheet.create({
card: {
width: '40%',
margin: 5,
marginLeft: 'auto',
marginRight: 'auto',
},
cover: {
height: 80,
},
});
function CardListItem(props: PropsType) {
const { item } = props;
const {item} = props;
const source =
typeof item.image === 'number' ? item.image : { uri: item.image };
typeof item.image === 'number' ? item.image : {uri: item.image};
return (
<Card style={styles.card}>
<TouchableRipple style={GENERAL_STYLES.flex} onPress={item.onPress}>
<Card
style={{
width: '40%',
margin: 5,
marginLeft: 'auto',
marginRight: 'auto',
}}>
<TouchableRipple style={{flex: 1}} onPress={item.onPress}>
<View>
<Card.Cover style={styles.cover} source={source} />
<Card.Cover style={{height: 80}} source={source} />
<Card.Content>
<Paragraph>{item.title}</Paragraph>
<Caption>{item.subtitle}</Caption>

40
src/components/Lists/CardList/ImageListItem.tsx
View file

@ -18,50 +18,46 @@
*/
import * as React from 'react';
import { Text, TouchableRipple } from 'react-native-paper';
import { Image, StyleSheet, View } from 'react-native';
import GENERAL_STYLES from '../../../constants/Styles';
import { ServiceItemType } from '../../../utils/Services';
import {Text, TouchableRipple} from 'react-native-paper';
import {Image, View} from 'react-native';
import type {ServiceItemType} from '../../../managers/ServicesManager';
type PropsType = {
item: ServiceItemType;
width: number;
};
const styles = StyleSheet.create({
ripple: {
margin: 5,
},
text: {
...GENERAL_STYLES.centerHorizontal,
marginTop: 5,
textAlign: 'center',
},
});
function ImageListItem(props: PropsType) {
const { item } = props;
const {item} = props;
const source =
typeof item.image === 'number' ? item.image : { uri: item.image };
typeof item.image === 'number' ? item.image : {uri: item.image};
return (
<TouchableRipple
style={{
width: props.width,
height: props.width + 40,
...styles.ripple,
margin: 5,
}}
onPress={item.onPress}
>
onPress={item.onPress}>
<View>
<Image
style={{
width: props.width - 20,
height: props.width - 20,
...GENERAL_STYLES.centerHorizontal,
marginLeft: 'auto',
marginRight: 'auto',
}}
source={source}
/>
<Text style={styles.text}>{item.title}</Text>
<Text
style={{
marginTop: 5,
marginLeft: 'auto',
marginRight: 'auto',
textAlign: 'center',
}}>
{item.title}
</Text>
</View>
</TouchableRipple>
);

38
src/components/Lists/Clubs/ClubListHeader.tsx
View file

@ -18,13 +18,12 @@
*/
import * as React from 'react';
import { Card, Chip, List, Text } from 'react-native-paper';
import { StyleSheet, View } from 'react-native';
import {Card, Chip, List, Text} from 'react-native-paper';
import {StyleSheet, View} from 'react-native';
import i18n from 'i18n-js';
import AnimatedAccordion from '../../Animations/AnimatedAccordion';
import { isItemInCategoryFilter } from '../../../utils/Search';
import type { ClubCategoryType } from '../../../screens/Amicale/Clubs/ClubListScreen';
import GENERAL_STYLES from '../../../constants/Styles';
import {isItemInCategoryFilter} from '../../../utils/Search';
import type {ClubCategoryType} from '../../../screens/Amicale/Clubs/ClubListScreen';
type PropsType = {
categories: Array<ClubCategoryType>;
@ -40,7 +39,8 @@ const styles = StyleSheet.create({
paddingLeft: 0,
marginTop: 5,
marginBottom: 10,
...GENERAL_STYLES.centerHorizontal,
marginLeft: 'auto',
marginRight: 'auto',
},
chipContainer: {
justifyContent: 'space-around',
@ -49,11 +49,6 @@ const styles = StyleSheet.create({
paddingLeft: 0,
marginBottom: 5,
},
chip: {
marginRight: 5,
marginLeft: 5,
marginBottom: 5,
},
});
function ClubListHeader(props: PropsType) {
@ -67,9 +62,8 @@ function ClubListHeader(props: PropsType) {
])}
mode="outlined"
onPress={onPress}
style={styles.chip}
key={key}
>
style={{marginRight: 5, marginLeft: 5, marginBottom: 5}}
key={key}>
{category.name}
</Chip>
);
@ -94,16 +88,12 @@ function ClubListHeader(props: PropsType) {
icon="star"
/>
)}
opened={true}
renderItem={() => (
<View>
<Text style={styles.text}>
{i18n.t('screens.clubs.categoriesFilterMessage')}
</Text>
<View style={styles.chipContainer}>{getCategoriesRender()}</View>
</View>
)}
/>
opened>
<Text style={styles.text}>
{i18n.t('screens.clubs.categoriesFilterMessage')}
</Text>
<View style={styles.chipContainer}>{getCategoriesRender()}</View>
</AnimatedAccordion>
</Card>
);
}

57
src/components/Lists/Clubs/ClubListItem.tsx
View file

@ -18,13 +18,12 @@
*/
import * as React from 'react';
import { Avatar, Chip, List, withTheme } from 'react-native-paper';
import { StyleSheet, View } from 'react-native';
import {Avatar, Chip, List, withTheme} from 'react-native-paper';
import {View} from 'react-native';
import type {
ClubCategoryType,
ClubType,
} from '../../../screens/Amicale/Clubs/ClubListScreen';
import GENERAL_STYLES from '../../../constants/Styles';
type PropsType = {
onPress: () => void;
@ -34,28 +33,6 @@ type PropsType = {
theme: ReactNativePaper.Theme;
};
const styles = StyleSheet.create({
chip: {
marginRight: 5,
marginBottom: 5,
},
chipContainer: {
flexDirection: 'row',
},
avatar: {
backgroundColor: 'transparent',
marginLeft: 10,
marginRight: 10,
},
icon: {
...GENERAL_STYLES.centerVertical,
backgroundColor: 'transparent',
},
item: {
justifyContent: 'center',
},
});
class ClubListItem extends React.Component<PropsType> {
hasManagers: boolean;
@ -69,28 +46,30 @@ class ClubListItem extends React.Component<PropsType> {
}
getCategoriesRender(categories: Array<number | null>) {
const { props } = this;
const {props} = this;
const final: Array<React.ReactNode> = [];
categories.forEach((cat: number | null) => {
if (cat != null) {
const category = props.categoryTranslator(cat);
if (category) {
final.push(
<Chip style={styles.chip} key={`${props.item.id}:${category.id}`}>
<Chip
style={{marginRight: 5, marginBottom: 5}}
key={`${props.item.id}:${category.id}`}>
{category.name}
</Chip>
</Chip>,
);
}
}
});
return <View style={styles.chipContainer}>{final}</View>;
return <View style={{flexDirection: 'row'}}>{final}</View>;
}
render() {
const { props } = this;
const {props} = this;
const categoriesRender = () =>
this.getCategoriesRender(props.item.category);
const { colors } = props.theme;
const {colors} = props.theme;
return (
<List.Item
title={props.item.name}
@ -98,14 +77,22 @@ class ClubListItem extends React.Component<PropsType> {
onPress={props.onPress}
left={() => (
<Avatar.Image
style={styles.avatar}
style={{
backgroundColor: 'transparent',
marginLeft: 10,
marginRight: 10,
}}
size={64}
source={{ uri: props.item.logo }}
source={{uri: props.item.logo}}
/>
)}
right={() => (
<Avatar.Icon
style={styles.icon}
style={{
marginTop: 'auto',
marginBottom: 'auto',
backgroundColor: 'transparent',
}}
size={48}
icon={
this.hasManagers ? 'check-circle-outline' : 'alert-circle-outline'
@ -115,7 +102,7 @@ class ClubListItem extends React.Component<PropsType> {
)}
style={{
height: props.height,
...styles.item,
justifyContent: 'center',
}}
/>
);

58
src/components/Lists/DashboardEdit/DashboardEditAccordion.tsx
View file

@ -18,12 +18,15 @@
*/
import * as React from 'react';
import { useTheme } from 'react-native-paper';
import { FlatList, Image, StyleSheet, View } from 'react-native';
import {useTheme} from 'react-native-paper';
import {FlatList, Image, View} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import DashboardEditItem from './DashboardEditItem';
import AnimatedAccordion from '../../Animations/AnimatedAccordion';
import { ServiceCategoryType, ServiceItemType } from '../../../utils/Services';
import type {
ServiceCategoryType,
ServiceItemType,
} from '../../../managers/ServicesManager';
type PropsType = {
item: ServiceCategoryType;
@ -31,19 +34,12 @@ type PropsType = {
onPress: (service: ServiceItemType) => void;
};
const styles = StyleSheet.create({
image: {
width: 40,
height: 40,
},
});
const LIST_ITEM_HEIGHT = 64;
function DashboardEditAccordion(props: PropsType) {
const theme = useTheme();
const getRenderItem = ({ item }: { item: ServiceItemType }) => {
const getRenderItem = ({item}: {item: ServiceItemType}) => {
return (
<DashboardEditItem
height={LIST_ITEM_HEIGHT}
@ -57,22 +53,28 @@ function DashboardEditAccordion(props: PropsType) {
};
const getItemLayout = (
_data: Array<ServiceItemType> | null | undefined,
index: number
): { length: number; offset: number; index: number } => ({
data: Array<ServiceItemType> | null | undefined,
index: number,
): {length: number; offset: number; index: number} => ({
length: LIST_ITEM_HEIGHT,
offset: LIST_ITEM_HEIGHT * index,
index,
});
const { item } = props;
const {item} = props;
return (
<View>
<AnimatedAccordion
title={item.title}
left={() =>
typeof item.image === 'number' ? (
<Image source={item.image} style={styles.image} />
<Image
source={item.image}
style={{
width: 40,
height: 40,
}}
/>
) : (
<MaterialCommunityIcons
name={item.image}
@ -80,19 +82,17 @@ function DashboardEditAccordion(props: PropsType) {
size={40}
/>
)
}
renderItem={() => (
<FlatList
data={item.content}
extraData={props.activeDashboard.toString()}
renderItem={getRenderItem}
listKey={item.key}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={getItemLayout}
removeClippedSubviews={true}
/>
)}
/>
}>
<FlatList
data={item.content}
extraData={props.activeDashboard.toString()}
renderItem={getRenderItem}
listKey={item.key}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={getItemLayout}
removeClippedSubviews
/>
</AnimatedAccordion>
</View>
);
}

38
src/components/Lists/DashboardEdit/DashboardEditItem.tsx
View file

@ -18,9 +18,9 @@
*/
import * as React from 'react';
import { Image, StyleSheet } from 'react-native';
import { List, useTheme } from 'react-native-paper';
import { ServiceItemType } from '../../../utils/Services';
import {Image} from 'react-native';
import {List, useTheme} from 'react-native-paper';
import type {ServiceItemType} from '../../../managers/ServicesManager';
type PropsType = {
item: ServiceItemType;
@ -29,23 +29,9 @@ type PropsType = {
onPress: () => void;
};
const styles = StyleSheet.create({
image: {
width: 40,
height: 40,
},
item: {
justifyContent: 'center',
paddingLeft: 30,
},
});
function DashboardEditItem(props: PropsType) {
const theme = useTheme();
const { item, onPress, height, isActive } = props;
const backgroundColor = isActive
? theme.colors.proxiwashFinishedColor
: 'transparent';
const {item, onPress, height, isActive} = props;
return (
<List.Item
title={item.title}
@ -54,9 +40,12 @@ function DashboardEditItem(props: PropsType) {
left={() => (
<Image
source={
typeof item.image === 'string' ? { uri: item.image } : item.image
typeof item.image === 'string' ? {uri: item.image} : item.image
}
style={styles.image}
style={{
width: 40,
height: 40,
}}
/>
)}
right={(iconProps) =>
@ -69,9 +58,12 @@ function DashboardEditItem(props: PropsType) {
) : null
}
style={{
...styles.image,
height: height,
backgroundColor: backgroundColor,
height,
justifyContent: 'center',
paddingLeft: 30,
backgroundColor: isActive
? theme.colors.proxiwashFinishedColor
: 'transparent',
}}
/>
);

43
src/components/Lists/DashboardEdit/DashboardEditPreviewItem.tsx
View file

@ -18,8 +18,8 @@
*/
import * as React from 'react';
import { TouchableRipple, useTheme } from 'react-native-paper';
import { Dimensions, Image, StyleSheet, View } from 'react-native';
import {TouchableRipple, useTheme} from 'react-native-paper';
import {Dimensions, Image, View} from 'react-native';
type PropsType = {
image?: string | number;
@ -27,50 +27,39 @@ type PropsType = {
onPress: () => void;
};
const styles = StyleSheet.create({
ripple: {
marginLeft: 5,
marginRight: 5,
borderRadius: 5,
},
image: {
width: '100%',
height: '100%',
},
});
/**
* Component used to render a small dashboard item
*/
function DashboardEditPreviewItem(props: PropsType) {
const theme = useTheme();
const itemSize = Dimensions.get('window').width / 8;
const backgroundColor = props.isActive
? theme.colors.textDisabled
: 'transparent';
return (
<TouchableRipple
onPress={props.onPress}
borderless
style={{
...styles.ripple,
backgroundColor: backgroundColor,
}}
>
marginLeft: 5,
marginRight: 5,
backgroundColor: props.isActive
? theme.colors.textDisabled
: 'transparent',
borderRadius: 5,
}}>
<View
style={{
width: itemSize,
height: itemSize,
}}
>
}}>
{props.image ? (
<Image
source={
typeof props.image === 'string'
? { uri: props.image }
: props.image
typeof props.image === 'string' ? {uri: props.image} : props.image
}
style={styles.image}
style={{
width: '100%',
height: '100%',
}}
/>
) : null}
</View>

45
src/components/Lists/Equipment/EquipmentListItem.tsx
View file

@ -18,38 +18,26 @@
*/
import * as React from 'react';
import { Avatar, List, useTheme } from 'react-native-paper';
import {Avatar, List, useTheme} from 'react-native-paper';
import i18n from 'i18n-js';
import type { DeviceType } from '../../../screens/Amicale/Equipment/EquipmentListScreen';
import {StackNavigationProp} from '@react-navigation/stack';
import type {DeviceType} from '../../../screens/Amicale/Equipment/EquipmentListScreen';
import {
getFirstEquipmentAvailability,
getRelativeDateString,
isEquipmentAvailable,
} from '../../../utils/EquipmentBooking';
import { StyleSheet } from 'react-native';
import GENERAL_STYLES from '../../../constants/Styles';
import { useNavigation } from '@react-navigation/native';
import { MainRoutes } from '../../../navigation/MainNavigator';
type PropsType = {
navigation: StackNavigationProp<any>;
userDeviceRentDates: [string, string] | null;
item: DeviceType;
height: number;
};
const styles = StyleSheet.create({
icon: {
backgroundColor: 'transparent',
},
item: {
justifyContent: 'center',
},
});
function EquipmentListItem(props: PropsType) {
const theme = useTheme();
const navigation = useNavigation();
const { item, userDeviceRentDates, height } = props;
const {item, userDeviceRentDates, navigation, height} = props;
const isRented = userDeviceRentDates != null;
const isAvailable = isEquipmentAvailable(item);
const firstAvailability = getFirstEquipmentAvailability(item);
@ -57,14 +45,14 @@ function EquipmentListItem(props: PropsType) {
let onPress;
if (isRented) {
onPress = () => {
navigation.navigate(MainRoutes.EquipmentConfirm, {
navigation.navigate('equipment-confirm', {
item,
dates: userDeviceRentDates,
});
};
} else {
onPress = () => {
navigation.navigate(MainRoutes.EquipmentRent, { item });
navigation.navigate('equipment-rent', {item});
};
}
@ -83,7 +71,7 @@ function EquipmentListItem(props: PropsType) {
});
}
} else if (isAvailable) {
description = i18n.t('screens.equipment.bail', { cost: item.caution });
description = i18n.t('screens.equipment.bail', {cost: item.caution});
} else {
description = i18n.t('screens.equipment.available', {
date: getRelativeDateString(firstAvailability),
@ -113,12 +101,21 @@ function EquipmentListItem(props: PropsType) {
title={item.name}
description={description}
onPress={onPress}
left={() => <Avatar.Icon style={styles.icon} icon={icon} color={color} />}
left={() => (
<Avatar.Icon
style={{
backgroundColor: 'transparent',
}}
icon={icon}
color={color}
/>
)}
right={() => (
<Avatar.Icon
style={{
...GENERAL_STYLES.centerVertical,
...styles.icon,
marginTop: 'auto',
marginBottom: 'auto',
backgroundColor: 'transparent',
}}
size={48}
icon="chevron-right"
@ -126,7 +123,7 @@ function EquipmentListItem(props: PropsType) {
)}
style={{
height,
...styles.item,
justifyContent: 'center',
}}
/>
);

150
src/components/Lists/PlanexGroups/GroupListAccordion.tsx
View file

@ -18,15 +18,15 @@
*/
import * as React from 'react';
import { List, useTheme } from 'react-native-paper';
import { FlatList, StyleSheet } from 'react-native';
import {List, withTheme} from 'react-native-paper';
import {FlatList, View} from 'react-native';
import {stringMatchQuery} from '../../../utils/Search';
import GroupListItem from './GroupListItem';
import AnimatedAccordion from '../../Animations/AnimatedAccordion';
import type {
PlanexGroupType,
PlanexGroupCategoryType,
} from '../../../screens/Planex/GroupSelectionScreen';
import i18n from 'i18n-js';
type PropsType = {
item: PlanexGroupCategoryType;
@ -34,97 +34,99 @@ type PropsType = {
onGroupPress: (data: PlanexGroupType) => void;
onFavoritePress: (data: PlanexGroupType) => void;
currentSearchString: string;
theme: ReactNativePaper.Theme;
};
const LIST_ITEM_HEIGHT = 64;
const REPLACE_REGEX = /_/g;
// The minimum number of characters to type before expanding the accordion
// This prevents expanding too many items at once
const MIN_SEARCH_SIZE_EXPAND = 2;
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
},
});
class GroupListAccordion extends React.Component<PropsType> {
shouldComponentUpdate(nextProps: PropsType): boolean {
const {props} = this;
return (
nextProps.currentSearchString !== props.currentSearchString ||
nextProps.favorites.length !== props.favorites.length ||
nextProps.item.content.length !== props.item.content.length
);
}
function GroupListAccordion(props: PropsType) {
const theme = useTheme();
const getRenderItem = ({ item }: { item: PlanexGroupType }) => {
getRenderItem = ({item}: {item: PlanexGroupType}) => {
const {props} = this;
const onPress = () => {
props.onGroupPress(item);
};
const onStarPress = () => {
props.onFavoritePress(item);
};
return (
<GroupListItem
height={LIST_ITEM_HEIGHT}
item={item}
isFav={props.favorites.some((f) => f.id === item.id)}
onPress={() => props.onGroupPress(item)}
onStarPress={() => props.onFavoritePress(item)}
favorites={props.favorites}
onPress={onPress}
onStarPress={onStarPress}
/>
);
};
const itemLayout = (
_data: Array<PlanexGroupType> | null | undefined,
index: number
): { length: number; offset: number; index: number } => ({
getData(): Array<PlanexGroupType> {
const {props} = this;
const originalData = props.item.content;
const displayData: Array<PlanexGroupType> = [];
originalData.forEach((data: PlanexGroupType) => {
if (stringMatchQuery(data.name, props.currentSearchString)) {
displayData.push(data);
}
});
return displayData;
}
itemLayout = (
data: Array<PlanexGroupType> | null | undefined,
index: number,
): {length: number; offset: number; index: number} => ({
length: LIST_ITEM_HEIGHT,
offset: LIST_ITEM_HEIGHT * index,
index,
});
const keyExtractor = (item: PlanexGroupType): string => item.id.toString();
keyExtractor = (item: PlanexGroupType): string => item.id.toString();
var isFavorite = props.item.id === 0;
var isEmptyFavorite = isFavorite && props.favorites.length === 0;
return (
<AnimatedAccordion
title={
isEmptyFavorite
? i18n.t('screens.planex.favorites.empty.title')
: props.item.name.replace(REPLACE_REGEX, ' ')
}
subtitle={
isEmptyFavorite
? i18n.t('screens.planex.favorites.empty.subtitle')
: undefined
}
style={styles.container}
left={(iconProps) =>
isFavorite ? (
<List.Icon
style={iconProps.style}
icon={'star'}
color={theme.colors.tetrisScore}
render() {
const {props} = this;
const {item} = this.props;
return (
<View>
<AnimatedAccordion
title={item.name.replace(REPLACE_REGEX, ' ')}
style={{
justifyContent: 'center',
}}
left={(iconProps) =>
item.id === 0 ? (
<List.Icon
style={iconProps.style}
icon="star"
color={props.theme.colors.tetrisScore}
/>
) : null
}
unmountWhenCollapsed={item.id !== 0} // Only render list if expanded for increased performance
opened={props.currentSearchString.length > 0}>
<FlatList
data={this.getData()}
extraData={props.currentSearchString + props.favorites.length}
renderItem={this.getRenderItem}
keyExtractor={this.keyExtractor}
listKey={item.id.toString()}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={this.itemLayout}
removeClippedSubviews
/>
) : undefined
}
unmountWhenCollapsed={!isFavorite} // Only render list if expanded for increased performance
opened={
props.currentSearchString.length >= MIN_SEARCH_SIZE_EXPAND ||
(isFavorite && !isEmptyFavorite)
}
enabled={!isEmptyFavorite}
renderItem={() => (
<FlatList
data={props.item.content}
extraData={props.currentSearchString + props.favorites.length}
renderItem={getRenderItem}
keyExtractor={keyExtractor}
listKey={props.item.id.toString()}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={itemLayout}
removeClippedSubviews={true}
/>
)}
/>
);
</AnimatedAccordion>
</View>
);
}
}
const propsEqual = (pp: PropsType, np: PropsType) =>
pp.currentSearchString === np.currentSearchString &&
pp.favorites.length === np.favorites.length &&
pp.item.content.length === np.item.content.length &&
pp.onFavoritePress === np.onFavoritePress;
export default React.memo(GroupListAccordion, propsEqual);
export default withTheme(GroupListAccordion);

158
src/components/Lists/PlanexGroups/GroupListItem.tsx
View file

@ -17,82 +17,110 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { useRef } from 'react';
import { List, TouchableRipple, useTheme } from 'react-native-paper';
import * as React from 'react';
import {List, TouchableRipple, withTheme} from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import type { PlanexGroupType } from '../../../screens/Planex/GroupSelectionScreen';
import { StyleSheet, View } from 'react-native';
import { getPrettierPlanexGroupName } from '../../../utils/Utils';
import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
import {View} from 'react-native';
type Props = {
type PropsType = {
theme: ReactNativePaper.Theme;
onPress: () => void;
onStarPress: () => void;
item: PlanexGroupType;
isFav: boolean;
favorites: Array<PlanexGroupType>;
height: number;
};
const styles = StyleSheet.create({
item: {
justifyContent: 'center',
},
icon: {
padding: 10,
},
iconContainer: {
marginRight: 10,
marginLeft: 'auto',
marginTop: 'auto',
marginBottom: 'auto',
},
});
const REPLACE_REGEX = /_/g;
function GroupListItem(props: Props) {
const theme = useTheme();
class GroupListItem extends React.Component<PropsType> {
isFav: boolean;
const starRef = useRef<Animatable.View & View>(null);
starRef: {current: null | (Animatable.View & View)};
return (
<List.Item
title={getPrettierPlanexGroupName(props.item.name)}
onPress={props.onPress}
left={(iconProps) => (
<List.Icon
color={iconProps.color}
style={iconProps.style}
icon={'chevron-right'}
/>
)}
right={(iconProps) => (
<Animatable.View
ref={starRef}
useNativeDriver={true}
animation={props.isFav ? 'rubberBand' : undefined}
>
<TouchableRipple
onPress={props.onStarPress}
style={styles.iconContainer}
>
<MaterialCommunityIcons
size={30}
style={styles.icon}
name="star"
color={props.isFav ? theme.colors.tetrisScore : iconProps.color}
/>
</TouchableRipple>
</Animatable.View>
)}
style={{
height: props.height,
...styles.item,
}}
/>
);
constructor(props: PropsType) {
super(props);
this.starRef = React.createRef();
this.isFav = this.isGroupInFavorites(props.favorites);
}
shouldComponentUpdate(nextProps: PropsType): boolean {
const {favorites} = this.props;
const favChanged = favorites.length !== nextProps.favorites.length;
let newFavState = this.isFav;
if (favChanged) {
newFavState = this.isGroupInFavorites(nextProps.favorites);
}
const shouldUpdate = this.isFav !== newFavState;
this.isFav = newFavState;
return shouldUpdate;
}
onStarPress = () => {
const {props} = this;
const ref = this.starRef;
if (ref.current && ref.current.rubberBand && ref.current.swing) {
if (this.isFav) {
ref.current.rubberBand();
} else {
ref.current.swing();
}
}
props.onStarPress();
};
isGroupInFavorites(favorites: Array<PlanexGroupType>): boolean {
const {item} = this.props;
for (let i = 0; i < favorites.length; i += 1) {
if (favorites[i].id === item.id) {
return true;
}
}
return false;
}
render() {
const {props} = this;
const {colors} = props.theme;
return (
<List.Item
title={props.item.name.replace(REPLACE_REGEX, ' ')}
onPress={props.onPress}
left={(iconProps) => (
<List.Icon
color={iconProps.color}
style={iconProps.style}
icon="chevron-right"
/>
)}
right={(iconProps) => (
<Animatable.View ref={this.starRef} useNativeDriver>
<TouchableRipple
onPress={this.onStarPress}
style={{
marginRight: 10,
marginLeft: 'auto',
marginTop: 'auto',
marginBottom: 'auto',
}}>
<MaterialCommunityIcons
size={30}
style={{padding: 10}}
name="star"
color={this.isFav ? colors.tetrisScore : iconProps.color}
/>
</TouchableRipple>
</Animatable.View>
)}
style={{
height: props.height,
justifyContent: 'center',
}}
/>
);
}
}
export default React.memo(
GroupListItem,
(pp: Props, np: Props) =>
pp.isFav === np.isFav && pp.onStarPress === np.onStarPress
);
export default withTheme(GroupListItem);

36
src/components/Lists/Proximo/ProximoListItem.tsx
View file

@ -18,12 +18,9 @@
*/
import * as React from 'react';
import { Avatar, List, Text } from 'react-native-paper';
import {Avatar, List, Text} from 'react-native-paper';
import i18n from 'i18n-js';
import type { ProximoArticleType } from '../../../screens/Services/Proximo/ProximoMainScreen';
import { StyleSheet } from 'react-native';
import Urls from '../../../constants/Urls';
import GENERAL_STYLES from '../../../constants/Styles';
import type {ProximoArticleType} from '../../../screens/Services/Proximo/ProximoMainScreen';
type PropsType = {
onPress: () => void;
@ -32,45 +29,28 @@ type PropsType = {
height: number;
};
const styles = StyleSheet.create({
avatar: {
backgroundColor: 'transparent',
marginRight: 5,
},
text: {
marginLeft: 10,
fontWeight: 'bold',
fontSize: 15,
...GENERAL_STYLES.centerVertical,
},
item: {
justifyContent: 'center',
},
});
function ProximoListItem(props: PropsType) {
return (
<List.Item
title={props.item.name}
titleNumberOfLines={2}
description={`${props.item.quantity} ${i18n.t(
'screens.proximo.inStock'
'screens.proximo.inStock',
)}`}
descriptionStyle={{ color: props.color }}
descriptionStyle={{color: props.color}}
onPress={props.onPress}
left={() => (
<Avatar.Image
style={styles.avatar}
style={{backgroundColor: 'transparent'}}
size={64}
source={{ uri: Urls.proximo.images + props.item.image }}
source={{uri: props.item.image}}
/>
)}
right={() => (
<Text style={styles.text}>{props.item.price.toFixed(2)}€</Text>
<Text style={{fontWeight: 'bold'}}>{props.item.price}€</Text>
)}
style={{
height: props.height,
...styles.item,
justifyContent: 'center',
}}
/>
);

129
src/components/Lists/Proxiwash/ProxiwashListHeader.tsx
View file

@ -1,129 +0,0 @@
import React from 'react';
import { Linking, StyleSheet } from 'react-native';
import {
Avatar,
Button,
Card,
Paragraph,
Text,
useTheme,
} from 'react-native-paper';
import TimeAgo from 'react-native-timeago';
import i18n from 'i18n-js';
import { useNavigation } from '@react-navigation/core';
import { MainRoutes } from '../../../navigation/MainNavigator';
import ProxiwashConstants from '../../../constants/ProxiwashConstants';
import { ProxiwashInfoType } from '../../../screens/Proxiwash/ProxiwashScreen';
import * as Animatable from 'react-native-animatable';
let moment = require('moment'); //load moment module to set local language
require('moment/locale/fr'); // import moment local language file during the application build
moment.locale('fr');
type Props = {
date?: Date;
selectedWash: 'tripodeB' | 'washinsa';
info?: ProxiwashInfoType;
};
const styles = StyleSheet.create({
card: {
marginHorizontal: 5,
},
messageCard: {
marginTop: 50,
marginBottom: 10,
},
actions: {
justifyContent: 'center',
},
});
function ProxiwashListHeader(props: Props) {
const navigation = useNavigation();
const theme = useTheme();
const { date, selectedWash } = props;
let title = i18n.t('screens.proxiwash.washinsa.title');
let icon = ProxiwashConstants.washinsa.icon;
if (selectedWash === 'tripodeB') {
title = i18n.t('screens.proxiwash.tripodeB.title');
icon = ProxiwashConstants.tripodeB.icon;
}
const message = props.info?.message;
return (
<>
<Card style={styles.card}>
<Card.Title
title={title}
subtitle={
date ? (
<Text>
{i18n.t('screens.proxiwash.updated')}
<TimeAgo time={date} interval={2000} />
</Text>
) : null
}
left={(iconProps) => (
<Avatar.Icon icon={icon} size={iconProps.size} />
)}
/>
<Card.Actions style={styles.actions}>
<Button
mode={'contained'}
onPress={() => navigation.navigate(MainRoutes.Settings)}
icon={'swap-horizontal'}
>
{i18n.t('screens.proxiwash.switch')}
</Button>
</Card.Actions>
</Card>
{message ? (
<Card
style={{
...styles.card,
...styles.messageCard,
}}
>
<Animatable.View
useNativeDriver={false}
animation={'flash'}
iterationCount={'infinite'}
duration={2000}
>
<Card.Title
title={i18n.t('screens.proxiwash.errors.title')}
titleStyle={{
color: theme.colors.primary,
}}
left={(iconProps) => (
<Avatar.Icon icon={'alert'} size={iconProps.size} />
)}
/>
</Animatable.View>
<Card.Content>
<Paragraph
style={{
color: theme.colors.warning,
}}
>
{message}
</Paragraph>
</Card.Content>
<Card.Actions style={styles.actions}>
<Button
mode={'contained'}
onPress={() =>
Linking.openURL(ProxiwashConstants[selectedWash].webPageUrl)
}
icon={'open-in-new'}
>
{i18n.t('screens.proxiwash.errors.button')}
</Button>
</Card.Actions>
</Card>
) : null}
</>
);
}
export default ProxiwashListHeader;

58
src/components/Lists/Proxiwash/ProxiwashListItem.tsx
View file

@ -27,14 +27,14 @@ import {
Text,
withTheme,
} from 'react-native-paper';
import { StyleSheet, View } from 'react-native';
import {StyleSheet, View} from 'react-native';
import i18n from 'i18n-js';
import * as Animatable from 'react-native-animatable';
import ProxiwashConstants, {
MachineStates,
} from '../../../constants/ProxiwashConstants';
import AprilFoolsManager from '../../../managers/AprilFoolsManager';
import type { ProxiwashMachineType } from '../../../screens/Proxiwash/ProxiwashScreen';
import type {ProxiwashMachineType} from '../../../screens/Proxiwash/ProxiwashScreen';
type PropsType = {
item: ProxiwashMachineType;
@ -42,7 +42,7 @@ type PropsType = {
onPress: (
title: string,
item: ProxiwashMachineType,
isDryer: boolean
isDryer: boolean,
) => void;
isWatched: boolean;
isDryer: boolean;
@ -56,7 +56,6 @@ const styles = StyleSheet.create({
margin: 5,
justifyContent: 'center',
elevation: 1,
borderRadius: 4,
},
icon: {
backgroundColor: 'transparent',
@ -66,29 +65,17 @@ const styles = StyleSheet.create({
left: 0,
borderRadius: 4,
},
item: {
justifyContent: 'center',
},
text: {
fontWeight: 'bold',
},
textRow: {
flexDirection: 'row',
},
textContainer: {
justifyContent: 'center',
},
});
/**
* Component used to display a proxiwash item, showing machine progression and state
*/
class ProxiwashListItem extends React.Component<PropsType> {
stateStrings: { [key in MachineStates]: string } = {
stateStrings: {[key in MachineStates]: string} = {
[MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.states.ready'),
[MachineStates.RUNNING]: i18n.t('screens.proxiwash.states.running'),
[MachineStates.RUNNING_NOT_STARTED]: i18n.t(
'screens.proxiwash.states.runningNotStarted'
'screens.proxiwash.states.runningNotStarted',
),
[MachineStates.FINISHED]: i18n.t('screens.proxiwash.states.finished'),
[MachineStates.UNAVAILABLE]: i18n.t('screens.proxiwash.states.broken'),
@ -96,7 +83,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
[MachineStates.UNKNOWN]: i18n.t('screens.proxiwash.states.unknown'),
};
stateColors: { [key: string]: string };
stateColors: {[key: string]: string};
title: string;
@ -110,7 +97,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
const displayMaxWeight = props.item.maxWeight;
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(
parseInt(props.item.number, 10)
parseInt(props.item.number, 10),
);
}
@ -122,7 +109,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
}
shouldComponentUpdate(nextProps: PropsType): boolean {
const { props } = this;
const {props} = this;
return (
nextProps.theme.dark !== props.theme.dark ||
nextProps.item.state !== props.item.state ||
@ -132,13 +119,13 @@ class ProxiwashListItem extends React.Component<PropsType> {
}
onListItemPress = () => {
const { props } = this;
const {props} = this;
props.onPress(this.titlePopUp, props.item, props.isDryer);
};
updateStateColors() {
const { props } = this;
const { colors } = props.theme;
const {props} = this;
const {colors} = props.theme;
this.stateColors[MachineStates.AVAILABLE] = colors.proxiwashReadyColor;
this.stateColors[MachineStates.RUNNING] = colors.proxiwashRunningColor;
this.stateColors[MachineStates.RUNNING_NOT_STARTED] =
@ -150,8 +137,8 @@ class ProxiwashListItem extends React.Component<PropsType> {
}
render() {
const { props } = this;
const { colors } = props.theme;
const {props} = this;
const {colors} = props.theme;
const machineState = props.item.state;
const isRunning = machineState === MachineStates.RUNNING;
const isReady = machineState === MachineStates.AVAILABLE;
@ -197,8 +184,8 @@ class ProxiwashListItem extends React.Component<PropsType> {
style={{
...styles.container,
height: props.height,
}}
>
borderRadius: 4,
}}>
{!isReady ? (
<ProgressBar
style={{
@ -214,27 +201,26 @@ class ProxiwashListItem extends React.Component<PropsType> {
description={description}
style={{
height: props.height,
...styles.item,
justifyContent: 'center',
}}
onPress={this.onListItemPress}
left={() => icon}
right={() => (
<View style={styles.textRow}>
<View style={styles.textContainer}>
<View style={{flexDirection: 'row'}}>
<View style={{justifyContent: 'center'}}>
<Text
style={
machineState === MachineStates.FINISHED
? styles.text
: undefined
}
>
? {fontWeight: 'bold'}
: {}
}>
{stateString}
</Text>
{machineState === MachineStates.RUNNING ? (
<Caption>{props.item.remainingTime} min</Caption>
) : null}
</View>
<View style={styles.textContainer}>
<View style={{justifyContent: 'center'}}>
<Avatar.Icon
icon={stateIcon}
color={colors.text}

15
src/components/Lists/Proxiwash/ProxiwashSectionHeader.tsx
View file

@ -18,8 +18,8 @@
*/
import * as React from 'react';
import { Avatar, Text, withTheme } from 'react-native-paper';
import { StyleSheet, View } from 'react-native';
import {Avatar, Text, withTheme} from 'react-native-paper';
import {StyleSheet, View} from 'react-native';
import i18n from 'i18n-js';
type PropsType = {
@ -44,9 +44,6 @@ const styles = StyleSheet.create({
fontSize: 20,
fontWeight: 'bold',
},
textContainer: {
justifyContent: 'center',
},
});
/**
@ -54,7 +51,7 @@ const styles = StyleSheet.create({
*/
class ProxiwashListItem extends React.Component<PropsType> {
shouldComponentUpdate(nextProps: PropsType): boolean {
const { props } = this;
const {props} = this;
return (
nextProps.theme.dark !== props.theme.dark ||
nextProps.nbAvailable !== props.nbAvailable
@ -62,7 +59,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
}
render() {
const { props } = this;
const {props} = this;
const subtitle = `${props.nbAvailable} ${
props.nbAvailable <= 1
? i18n.t('screens.proxiwash.numAvailable')
@ -79,9 +76,9 @@ class ProxiwashListItem extends React.Component<PropsType> {
color={iconColor}
style={styles.icon}
/>
<View style={styles.textContainer}>
<View style={{justifyContent: 'center'}}>
<Text style={styles.text}>{props.title}</Text>
<Text style={{ color: props.theme.colors.subtitle }}>{subtitle}</Text>
<Text style={{color: props.theme.colors.subtitle}}>{subtitle}</Text>
</View>
</View>
);

97
src/components/Mascot/Mascot.tsx
View file

@ -19,14 +19,8 @@
import * as React from 'react';
import * as Animatable from 'react-native-animatable';
import {
Image,
StyleSheet,
TouchableWithoutFeedback,
View,
ViewStyle,
} from 'react-native';
import { AnimatableProperties } from 'react-native-animatable';
import {Image, TouchableWithoutFeedback, View, ViewStyle} from 'react-native';
import {AnimatableProperties} from 'react-native-animatable';
export type AnimatableViewRefType = {
current: null | (typeof Animatable.View & View);
@ -83,34 +77,6 @@ export enum MASCOT_STYLE {
RANDOM = 999,
}
const styles = StyleSheet.create({
container: {
aspectRatio: 1,
},
mascot: {
width: '100%',
height: '100%',
},
glassesImage: {
position: 'absolute',
top: '15%',
left: 0,
width: '100%',
height: '100%',
},
eyesImage: {
position: 'absolute',
top: '15%',
width: '100%',
height: '100%',
},
eyesContainer: {
position: 'absolute',
width: '100%',
height: '100%',
},
});
class Mascot extends React.Component<PropsType, StateType> {
static defaultProps = {
emotion: MASCOT_STYLE.NORMAL,
@ -134,9 +100,9 @@ class Mascot extends React.Component<PropsType, StateType> {
viewRef: AnimatableViewRefType;
eyeList: { [key in EYE_STYLE]: number };
eyeList: {[key in EYE_STYLE]: number};
glassesList: { [key in GLASSES_STYLE]: number };
glassesList: {[key in GLASSES_STYLE]: number};
onPress: (viewRef: AnimatableViewRefType) => void;
@ -175,9 +141,9 @@ class Mascot extends React.Component<PropsType, StateType> {
this.onPress = (viewRef: AnimatableViewRefType) => {
const ref = viewRef.current;
if (ref && ref.rubberBand) {
this.setState({ currentEmotion: MASCOT_STYLE.LOVE });
this.setState({currentEmotion: MASCOT_STYLE.LOVE});
ref.rubberBand(1500).then(() => {
this.setState({ currentEmotion: this.initialEmotion });
this.setState({currentEmotion: this.initialEmotion});
});
}
};
@ -189,9 +155,9 @@ class Mascot extends React.Component<PropsType, StateType> {
this.onLongPress = (viewRef: AnimatableViewRefType) => {
const ref = viewRef.current;
if (ref && ref.tada) {
this.setState({ currentEmotion: MASCOT_STYLE.ANGRY });
this.setState({currentEmotion: MASCOT_STYLE.ANGRY});
ref.tada(1000).then(() => {
this.setState({ currentEmotion: this.initialEmotion });
this.setState({currentEmotion: this.initialEmotion});
});
}
};
@ -208,22 +174,30 @@ class Mascot extends React.Component<PropsType, StateType> {
source={
glasses != null ? glasses : this.glassesList[GLASSES_STYLE.NORMAL]
}
style={styles.glassesImage}
style={{
position: 'absolute',
top: '15%',
left: 0,
width: '100%',
height: '100%',
}}
/>
);
}
getEye(style: EYE_STYLE, isRight: boolean, rotation: string = '0deg') {
const eye = this.eyeList[style];
const left = isRight ? '-11%' : '11%';
return (
<Image
key={isRight ? 'right' : 'left'}
source={eye != null ? eye : this.eyeList[EYE_STYLE.NORMAL]}
style={{
...styles.eyesImage,
left: left,
transform: [{ rotateY: rotation }],
position: 'absolute',
top: '15%',
left: isRight ? '-11%' : '11%',
width: '100%',
height: '100%',
transform: [{rotateY: rotation}],
}}
/>
);
@ -231,7 +205,16 @@ class Mascot extends React.Component<PropsType, StateType> {
getEyes(emotion: MASCOT_STYLE) {
const final = [];
final.push(<View key="container" style={styles.eyesContainer} />);
final.push(
<View
key="container"
style={{
position: 'absolute',
width: '100%',
height: '100%',
}}
/>,
);
if (emotion === MASCOT_STYLE.CUTE) {
final.push(this.getEye(EYE_STYLE.CUTE, true));
final.push(this.getEye(EYE_STYLE.CUTE, false));
@ -266,28 +249,32 @@ class Mascot extends React.Component<PropsType, StateType> {
}
render() {
const { props, state } = this;
const {props, state} = this;
const entryAnimation = props.animated ? props.entryAnimation : null;
const loopAnimation = props.animated ? props.loopAnimation : null;
return (
<Animatable.View
style={{
...styles.container,
aspectRatio: 1,
...props.style,
}}
{...entryAnimation}
>
{...entryAnimation}>
<TouchableWithoutFeedback
onPress={() => {
this.onPress(this.viewRef);
}}
onLongPress={() => {
this.onLongPress(this.viewRef);
}}
>
}}>
<Animatable.View ref={this.viewRef}>
<Animatable.View {...loopAnimation}>
<Image source={MASCOT_IMAGE} style={styles.mascot} />
<Image
source={MASCOT_IMAGE}
style={{
width: '100%',
height: '100%',
}}
/>
{this.getEyes(state.currentEmotion)}
</Animatable.View>
</Animatable.View>

352
src/components/Mascot/MascotPopup.tsx
View file

@ -17,175 +17,315 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { useEffect, useRef, useState } from 'react';
import { Portal } from 'react-native-paper';
import * as React from 'react';
import {
Avatar,
Button,
Card,
Paragraph,
Portal,
withTheme,
} from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
import {
BackHandler,
Dimensions,
StyleSheet,
ScrollView,
TouchableWithoutFeedback,
View,
} from 'react-native';
import Mascot from './Mascot';
import GENERAL_STYLES from '../../constants/Styles';
import MascotSpeechBubble, {
MascotSpeechBubbleProps,
} from './MascotSpeechBubble';
import { useMountEffect } from '../../utils/customHooks';
import { useRoute } from '@react-navigation/core';
import { useShouldShowMascot } from '../../context/preferencesContext';
import SpeechArrow from './SpeechArrow';
import AsyncStorageManager from '../../managers/AsyncStorageManager';
type PropsType = MascotSpeechBubbleProps & {
type PropsType = {
theme: ReactNativePaper.Theme;
icon: string;
title: string;
message: string;
buttons: {
action?: {
message: string;
icon?: string;
color?: string;
onPress?: () => void;
};
cancel?: {
message: string;
icon?: string;
color?: string;
onPress?: () => void;
};
};
emotion: number;
visible?: boolean;
prefKey?: string;
};
const styles = StyleSheet.create({
background: {
position: 'absolute',
backgroundColor: 'rgba(0,0,0,0.7)',
width: '100%',
height: '100%',
},
container: {
marginTop: -80,
width: '100%',
},
});
const MASCOT_SIZE = Dimensions.get('window').height / 6;
const BUBBLE_HEIGHT = Dimensions.get('window').height / 3;
type StateType = {
shouldRenderDialog: boolean; // Used to stop rendering after hide animation
dialogVisible: boolean;
};
/**
* Component used to display a popup with the mascot.
*/
function MascotPopup(props: PropsType) {
const route = useRoute();
const { shouldShow, setShouldShow } = useShouldShowMascot(route.name);
class MascotPopup extends React.Component<PropsType, StateType> {
mascotSize: number;
const isVisible = () => {
if (props.visible !== undefined) {
return props.visible;
windowWidth: number;
windowHeight: number;
constructor(props: PropsType) {
super(props);
this.windowWidth = Dimensions.get('window').width;
this.windowHeight = Dimensions.get('window').height;
this.mascotSize = Dimensions.get('window').height / 6;
if (props.visible != null) {
this.state = {
shouldRenderDialog: props.visible,
dialogVisible: props.visible,
};
} else if (props.prefKey != null) {
const visible = AsyncStorageManager.getBool(props.prefKey);
this.state = {
shouldRenderDialog: visible,
dialogVisible: visible,
};
} else {
return shouldShow;
this.state = {
shouldRenderDialog: false,
dialogVisible: false,
};
}
};
}
const [shouldRenderDialog, setShouldRenderDialog] = useState(isVisible());
const [dialogVisible, setDialogVisible] = useState(isVisible());
const lastVisibleProps = useRef(props.visible);
const lastVisibleState = useRef(dialogVisible);
componentDidMount() {
BackHandler.addEventListener(
'hardwareBackPress',
this.onBackButtonPressAndroid,
);
}
useMountEffect(() => {
BackHandler.addEventListener('hardwareBackPress', onBackButtonPressAndroid);
});
useEffect(() => {
if (props.visible && !dialogVisible) {
setShouldRenderDialog(true);
setDialogVisible(true);
shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
const {props, state} = this;
if (nextProps.visible) {
this.state.shouldRenderDialog = true;
this.state.dialogVisible = true;
} else if (
lastVisibleProps.current !== props.visible ||
(!dialogVisible && dialogVisible !== lastVisibleState.current)
nextProps.visible !== props.visible ||
(!nextState.dialogVisible &&
nextState.dialogVisible !== state.dialogVisible)
) {
setDialogVisible(false);
setTimeout(onAnimationEnd, 400);
this.state.dialogVisible = false;
setTimeout(this.onAnimationEnd, 300);
}
lastVisibleProps.current = props.visible;
lastVisibleState.current = dialogVisible;
}, [props.visible, dialogVisible]);
return true;
}
const onAnimationEnd = () => {
setShouldRenderDialog(false);
onAnimationEnd = () => {
this.setState({
shouldRenderDialog: false,
});
};
const onBackButtonPressAndroid = (): boolean => {
if (dialogVisible) {
const { cancel } = props.buttons;
const { action } = props.buttons;
onBackButtonPressAndroid = (): boolean => {
const {state, props} = this;
if (state.dialogVisible) {
const {cancel} = props.buttons;
const {action} = props.buttons;
if (cancel) {
onDismiss(cancel.onPress);
this.onDismiss(cancel.onPress);
} else if (action) {
onDismiss(action.onPress);
this.onDismiss(action.onPress);
} else {
onDismiss();
this.onDismiss();
}
return true;
}
return false;
};
const getSpeechBubble = () => {
getSpeechBubble() {
const {state, props} = this;
return (
<MascotSpeechBubble
title={props.title}
message={props.message}
icon={props.icon}
buttons={props.buttons}
visible={dialogVisible}
onDismiss={onDismiss}
speechArrowPos={MASCOT_SIZE / 3}
bubbleMaxHeight={BUBBLE_HEIGHT}
/>
);
};
<Animatable.View
style={{
marginLeft: '10%',
marginRight: '10%',
}}
useNativeDriver
animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
duration={state.dialogVisible ? 1000 : 300}>
<SpeechArrow
style={{marginLeft: this.mascotSize / 3}}
size={20}
color={props.theme.colors.mascotMessageArrow}
/>
<Card
style={{
borderColor: props.theme.colors.mascotMessageArrow,
borderWidth: 4,
borderRadius: 10,
}}>
<Card.Title
title={props.title}
left={
props.icon != null
? () => (
<Avatar.Icon
size={48}
style={{backgroundColor: 'transparent'}}
color={props.theme.colors.primary}
icon={props.icon}
/>
)
: undefined
}
/>
<Card.Content
style={{
maxHeight: this.windowHeight / 3,
}}>
<ScrollView>
<Paragraph style={{marginBottom: 10}}>{props.message}</Paragraph>
</ScrollView>
</Card.Content>
const getMascot = () => {
<Card.Actions style={{marginTop: 10, marginBottom: 10}}>
{this.getButtons()}
</Card.Actions>
</Card>
</Animatable.View>
);
}
getMascot() {
const {props, state} = this;
return (
<Animatable.View
useNativeDriver
animation={dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
duration={dialogVisible ? 1500 : 200}
>
animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
duration={state.dialogVisible ? 1500 : 200}>
<Mascot
style={{ width: MASCOT_SIZE }}
style={{width: this.mascotSize}}
animated
emotion={props.emotion}
/>
</Animatable.View>
);
};
}
const getBackground = () => {
getButtons() {
const {props} = this;
const {action} = props.buttons;
const {cancel} = props.buttons;
return (
<View
style={{
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 'auto',
marginBottom: 'auto',
}}>
{action != null ? (
<Button
style={{
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: 10,
}}
mode="contained"
icon={action.icon}
color={action.color}
onPress={() => {
this.onDismiss(action.onPress);
}}>
{action.message}
</Button>
) : null}
{cancel != null ? (
<Button
style={{
marginLeft: 'auto',
marginRight: 'auto',
}}
mode="contained"
icon={cancel.icon}
color={cancel.color}
onPress={() => {
this.onDismiss(cancel.onPress);
}}>
{cancel.message}
</Button>
) : null}
</View>
);
}
getBackground() {
const {props, state} = this;
return (
<TouchableWithoutFeedback
onPress={() => {
onDismiss(props.buttons.cancel?.onPress);
}}
>
this.onDismiss(props.buttons.cancel?.onPress);
}}>
<Animatable.View
style={styles.background}
style={{
position: 'absolute',
backgroundColor: 'rgba(0,0,0,0.7)',
width: '100%',
height: '100%',
}}
useNativeDriver
animation={dialogVisible ? 'fadeIn' : 'fadeOut'}
duration={dialogVisible ? 300 : 300}
animation={state.dialogVisible ? 'fadeIn' : 'fadeOut'}
duration={state.dialogVisible ? 300 : 300}
/>
</TouchableWithoutFeedback>
);
};
}
const onDismiss = (callback?: () => void) => {
setShouldShow(false);
setDialogVisible(false);
if (callback) {
onDismiss = (callback?: () => void) => {
const {prefKey} = this.props;
if (prefKey != null) {
AsyncStorageManager.set(prefKey, false);
this.setState({dialogVisible: false});
}
if (callback != null) {
callback();
}
};
if (shouldRenderDialog) {
return (
<Portal>
{getBackground()}
<View style={GENERAL_STYLES.centerVertical}>
<View style={styles.container}>
{getMascot()}
{getSpeechBubble()}
render() {
const {shouldRenderDialog} = this.state;
if (shouldRenderDialog) {
return (
<Portal>
{this.getBackground()}
<View
style={{
marginTop: 'auto',
marginBottom: 'auto',
}}>
<View
style={{
marginTop: -80,
width: '100%',
}}>
{this.getMascot()}
{this.getSpeechBubble()}
</View>
</View>
</View>
</Portal>
);
</Portal>
);
}
return null;
}
return null;
}
export default MascotPopup;
export default withTheme(MascotPopup);

147
src/components/Mascot/MascotSpeechBubble.tsx
View file

@ -1,147 +0,0 @@
import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import * as Animatable from 'react-native-animatable';
import { Avatar, Button, Card, Paragraph, useTheme } from 'react-native-paper';
import GENERAL_STYLES from '../../constants/Styles';
import SpeechArrow from './SpeechArrow';
export type MascotSpeechBubbleProps = {
icon: string;
title: string;
message: string;
visible?: boolean;
buttons: {
action?: {
message: string;
icon?: string;
color?: string;
onPress?: () => void;
};
cancel?: {
message: string;
icon?: string;
color?: string;
onPress?: () => void;
};
};
};
type Props = MascotSpeechBubbleProps & {
onDismiss: (callback?: () => void) => void;
speechArrowPos: number;
bubbleMaxHeight: number;
};
const styles = StyleSheet.create({
speechBubbleContainer: {
marginLeft: '10%',
marginRight: '10%',
},
speechBubbleCard: {
borderWidth: 4,
borderRadius: 10,
},
speechBubbleIcon: {
backgroundColor: 'transparent',
},
speechBubbleText: {
marginBottom: 10,
},
actionsContainer: {
marginTop: 10,
marginBottom: 10,
},
button: {
...GENERAL_STYLES.centerHorizontal,
marginBottom: 10,
},
});
export default function MascotSpeechBubble(props: Props) {
const theme = useTheme();
const getButtons = () => {
const { action, cancel } = props.buttons;
return (
<View style={GENERAL_STYLES.center}>
{action ? (
<Button
style={styles.button}
mode="contained"
icon={action.icon}
color={action.color}
onPress={() => {
props.onDismiss(action.onPress);
}}
>
{action.message}
</Button>
) : null}
{cancel != null ? (
<Button
style={styles.button}
mode="contained"
icon={cancel.icon}
color={cancel.color}
onPress={() => {
props.onDismiss(cancel.onPress);
}}
>
{cancel.message}
</Button>
) : null}
</View>
);
};
return (
<Animatable.View
style={styles.speechBubbleContainer}
useNativeDriver={true}
animation={props.visible ? 'bounceInLeft' : 'bounceOutLeft'}
duration={props.visible ? 1000 : 300}
>
<SpeechArrow
style={{ marginLeft: props.speechArrowPos }}
size={20}
color={theme.colors.mascotMessageArrow}
/>
<Card
style={{
borderColor: theme.colors.mascotMessageArrow,
...styles.speechBubbleCard,
}}
>
<Card.Title
title={props.title}
left={
props.icon
? () => (
<Avatar.Icon
size={48}
style={styles.speechBubbleIcon}
color={theme.colors.primary}
icon={props.icon}
/>
)
: undefined
}
/>
<Card.Content
style={{
maxHeight: props.bubbleMaxHeight,
}}
>
<ScrollView>
<Paragraph style={styles.speechBubbleText}>
{props.message}
</Paragraph>
</ScrollView>
</Card.Content>
<Card.Actions style={styles.actionsContainer}>
{getButtons()}
</Card.Actions>
</Card>
</Animatable.View>
);
}

22
src/components/Mascot/SpeechArrow.tsx
View file

@ -18,7 +18,7 @@
*/
import * as React from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import {View, ViewStyle} from 'react-native';
type PropsType = {
style?: ViewStyle;
@ -26,26 +26,20 @@ type PropsType = {
color: string;
};
const styles = StyleSheet.create({
arrow: {
width: 0,
height: 0,
borderLeftWidth: 0,
borderStyle: 'solid',
backgroundColor: 'transparent',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
},
});
export default function SpeechArrow(props: PropsType) {
return (
<View style={props.style}>
<View
style={{
...styles.arrow,
width: 0,
height: 0,
borderLeftWidth: 0,
borderRightWidth: props.size,
borderBottomWidth: props.size,
borderStyle: 'solid',
backgroundColor: 'transparent',
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: props.color,
}}
/>

27
src/components/Media/ImageGalleryButton.tsx
View file

@ -18,37 +18,32 @@
*/
import * as React from 'react';
import { TouchableRipple } from 'react-native-paper';
import { Image } from 'react-native-animatable';
import { useNavigation } from '@react-navigation/native';
import { StyleSheet, ViewStyle } from 'react-native';
import { MainRoutes } from '../../navigation/MainNavigator';
import {TouchableRipple} from 'react-native-paper';
import {Image} from 'react-native-animatable';
import {useNavigation} from '@react-navigation/native';
import {ViewStyle} from 'react-native';
type PropsType = {
images: Array<{ url: string }>;
images: Array<{url: string}>;
style: ViewStyle;
};
const styles = StyleSheet.create({
image: {
width: '100%',
height: '100%',
},
});
function ImageGalleryButton(props: PropsType) {
const navigation = useNavigation();
const onPress = () => {
navigation.navigate(MainRoutes.Gallery, { images: props.images });
navigation.navigate('gallery', {images: props.images});
};
return (
<TouchableRipple onPress={onPress} style={props.style}>
<Image
resizeMode="contain"
source={{ uri: props.images[0].url }}
style={styles.image}
source={{uri: props.images[0].url}}
style={{
width: '100%',
height: '100%',
}}
/>
</TouchableRipple>
);

9
src/components/Overrides/CustomAgenda.tsx
View file

@ -18,10 +18,9 @@
*/
import * as React from 'react';
import { View } from 'react-native';
import { useTheme } from 'react-native-paper';
import { Agenda, AgendaProps } from 'react-native-calendars';
import GENERAL_STYLES from '../../constants/Styles';
import {View} from 'react-native';
import {useTheme} from 'react-native-paper';
import {Agenda, AgendaProps} from 'react-native-calendars';
type PropsType = {
onRef: (ref: Agenda<any>) => void;
@ -68,7 +67,7 @@ function CustomAgenda(props: PropsType) {
// Completely recreate the component on theme change to force theme reload
if (theme.dark) {
return <View style={GENERAL_STYLES.flex}>{getAgenda()}</View>;
return <View style={{flex: 1}}>{getAgenda()}</View>;
}
return getAgenda();
}

65
src/components/Overrides/CustomHTML.tsx
View file

@ -18,13 +18,9 @@
*/
import * as React from 'react';
import { Text, useTheme } from 'react-native-paper';
import HTML, {
CustomRendererProps,
TBlock,
TText,
} from 'react-native-render-html';
import { Dimensions, GestureResponderEvent, Linking } from 'react-native';
import {Text} from 'react-native-paper';
import HTML from 'react-native-render-html';
import {GestureResponderEvent, Linking} from 'react-native';
type PropsType = {
html: string;
@ -34,54 +30,37 @@ type PropsType = {
* Abstraction layer for Agenda component, using custom configuration
*/
function CustomHTML(props: PropsType) {
const theme = useTheme();
const openWebLink = (_event: GestureResponderEvent, link: string) => {
const openWebLink = (event: GestureResponderEvent, link: string) => {
Linking.openURL(link);
};
// Why is this so complex?? I just want to replace the default Text element with the one
// from react-native-paper
// Might need to read the doc a bit more: https://meliorence.github.io/react-native-render-html/
// For now this seems to work
const getBasicText = (rendererProps: CustomRendererProps<TBlock>) => {
let text: TText | undefined;
if (rendererProps.tnode.children.length > 0) {
const phrasing = rendererProps.tnode.children[0];
if (phrasing.children.length > 0) {
text = phrasing.children[0] as TText;
}
}
if (text) {
return <Text>{text.data}</Text>;
} else {
return null;
}
const getBasicText = (
htmlAttribs: any,
children: any,
convertedCSSStyles: any,
passProps: any,
) => {
return <Text {...passProps}>{children}</Text>;
};
const getListBullet = () => {
return <Text>- </Text>;
};
// Surround description with p to allow text styling if the description is not html
return (
<HTML
// Surround description with p to allow text styling if the description is not html
source={{ html: `<p>${props.html}</p>` }}
// Use Paper Text instead of React
html={`<p>${props.html}</p>`}
renderers={{
p: getBasicText,
li: getBasicText,
}}
// Sometimes we have images inside the text, just ignore them
ignoredDomTags={['img']}
// Ignore text color
ignoredStyles={['color', 'backgroundColor']}
contentWidth={Dimensions.get('window').width - 50}
renderersProps={{
a: {
onPress: openWebLink,
},
ul: {
markerTextStyle: {
color: theme.colors.text,
},
},
listsPrefixesRenderers={{
ul: getListBullet,
}}
ignoredTags={['img']}
ignoredStyles={['color', 'background-color']}
onLinkPress={openWebLink}
/>
);
}

6
src/components/Overrides/CustomHeaderButton.tsx
View file

@ -25,7 +25,7 @@ import {
HeaderButtons,
HeaderButtonsProps,
} from 'react-navigation-header-buttons';
import { useTheme } from 'react-native-paper';
import {useTheme} from 'react-native-paper';
const MaterialHeaderButton = (props: HeaderButtonProps) => {
const theme = useTheme();
@ -40,7 +40,7 @@ const MaterialHeaderButton = (props: HeaderButtonProps) => {
};
const MaterialHeaderButtons = (
props: HeaderButtonsProps & { children?: React.ReactNode }
props: HeaderButtonsProps & {children?: React.ReactNode},
) => {
return (
<HeaderButtons {...props} HeaderButtonComponent={MaterialHeaderButton} />
@ -49,4 +49,4 @@ const MaterialHeaderButtons = (
export default MaterialHeaderButtons;
export { Item } from 'react-navigation-header-buttons';
export {Item} from 'react-navigation-header-buttons';

128
src/components/Overrides/CustomIntroSlider.tsx
View file

@ -30,13 +30,13 @@ import i18n from 'i18n-js';
import AppIntroSlider from 'react-native-app-intro-slider';
import LinearGradient from 'react-native-linear-gradient';
import * as Animatable from 'react-native-animatable';
import { Card } from 'react-native-paper';
import {Card} from 'react-native-paper';
import Update from '../../constants/Update';
import Mascot, { MASCOT_STYLE } from '../Mascot/Mascot';
import ThemeManager from '../../managers/ThemeManager';
import Mascot, {MASCOT_STYLE} from '../Mascot/Mascot';
import MascotIntroWelcome from '../Intro/MascotIntroWelcome';
import IntroIcon from '../Intro/IconIntro';
import MascotIntroEnd from '../Intro/MascotIntroEnd';
import GENERAL_STYLES from '../../constants/Styles';
type PropsType = {
onDone: () => void;
@ -75,42 +75,11 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginBottom: 16,
},
mascot: {
marginLeft: 30,
marginBottom: 0,
width: 100,
marginTop: -30,
},
speechArrow: {
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: {
backgroundColor: 'rgba(0,0,0,0.38)',
marginHorizontal: 20,
borderColor: 'rgba(0,0,0,0.60)',
borderWidth: 4,
borderRadius: 10,
elevation: 0,
},
nextButtonContainer: {
borderRadius: 25,
padding: 5,
backgroundColor: 'rgba(0,0,0,0.2)',
},
doneButtonContainer: {
borderRadius: 25,
padding: 5,
backgroundColor: 'rgb(190,21,34)',
center: {
marginTop: 'auto',
marginBottom: 'auto',
marginRight: 'auto',
marginLeft: 'auto',
},
});
@ -121,7 +90,7 @@ export default class CustomIntroSlider extends React.Component<
PropsType,
StateType
> {
sliderRef: { current: null | AppIntroSlider };
sliderRef: {current: null | AppIntroSlider};
introSlides: Array<IntroSlideType>;
@ -204,27 +173,31 @@ export default class CustomIntroSlider extends React.Component<
getIntroRenderItem = (
data:
| (ListRenderItemInfo<IntroSlideType> & {
dimensions: { width: number; height: number };
dimensions: {width: number; height: number};
})
| ListRenderItemInfo<IntroSlideType>
| ListRenderItemInfo<IntroSlideType>,
) => {
const item = data.item;
const { state } = this;
const {state} = this;
const index = parseInt(item.key, 10);
return (
<LinearGradient
style={[styles.mainContent]}
colors={item.colors}
start={{ x: 0, y: 0.1 }}
end={{ x: 0.1, y: 1 }}
>
start={{x: 0, y: 0.1}}
end={{x: 0.1, y: 1}}>
{state.currentSlide === index ? (
<View style={GENERAL_STYLES.flex}>
<View style={GENERAL_STYLES.flex}>{item.view()}</View>
<View style={{height: '100%', flex: 1}}>
<View style={{flex: 1}}>{item.view()}</View>
<Animatable.View useNativeDriver animation="fadeIn">
{item.mascotStyle != null ? (
<Mascot
style={styles.mascot}
style={{
marginLeft: 30,
marginBottom: 0,
width: 100,
marginTop: -30,
}}
emotion={item.mascotStyle}
animated
entryAnimation={{
@ -238,23 +211,43 @@ export default class CustomIntroSlider extends React.Component<
}}
/>
) : null}
<View style={styles.speechArrow} />
<Card style={styles.card}>
<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,
elevation: 0,
}}>
<Card.Content>
<Animatable.Text
useNativeDriver
animation="fadeIn"
delay={100}
style={styles.title}
>
style={styles.title}>
{item.title}
</Animatable.Text>
<Animatable.Text
useNativeDriver
animation="fadeIn"
delay={200}
style={styles.text}
>
style={styles.text}>
{item.text}
</Animatable.Text>
</Card.Content>
@ -274,12 +267,12 @@ export default class CustomIntroSlider extends React.Component<
onSlideChange = (index: number) => {
CustomIntroSlider.setStatusBarColor(this.currentSlides[index].colors[0]);
this.setState({ currentSlide: index });
this.setState({currentSlide: index});
};
onSkip = () => {
CustomIntroSlider.setStatusBarColor(
this.currentSlides[this.currentSlides.length - 1].colors[0]
this.currentSlides[this.currentSlides.length - 1].colors[0],
);
if (this.sliderRef.current != null) {
this.sliderRef.current.goToSlide(this.currentSlides.length - 1);
@ -287,7 +280,10 @@ export default class CustomIntroSlider extends React.Component<
};
onDone = () => {
const { props } = this;
const {props} = this;
CustomIntroSlider.setStatusBarColor(
ThemeManager.getCurrentTheme().colors.surface,
);
props.onDone();
};
@ -296,8 +292,11 @@ export default class CustomIntroSlider extends React.Component<
<Animatable.View
useNativeDriver
animation="fadeIn"
style={styles.nextButtonContainer}
>
style={{
borderRadius: 25,
padding: 5,
backgroundColor: 'rgba(0,0,0,0.2)',
}}>
<MaterialCommunityIcons name="arrow-right" color="#fff" size={40} />
</Animatable.View>
);
@ -308,15 +307,18 @@ export default class CustomIntroSlider extends React.Component<
<Animatable.View
useNativeDriver
animation="bounceIn"
style={styles.doneButtonContainer}
>
style={{
borderRadius: 25,
padding: 5,
backgroundColor: 'rgb(190,21,34)',
}}>
<MaterialCommunityIcons name="check" color="#fff" size={40} />
</Animatable.View>
);
};
render() {
const { props, state } = this;
const {props, state} = this;
this.currentSlides = this.introSlides;
if (props.isUpdate) {
this.currentSlides = this.updateSlides;

35
src/components/Overrides/CustomModal.tsx
View file

@ -17,15 +17,11 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { Ref } from 'react';
import { useTheme } from 'react-native-paper';
import { Modalize } from 'react-native-modalize';
import { View } from 'react-native-animatable';
import { TAB_BAR_HEIGHT } from '../Tabbar/CustomTabBar';
type Props = {
children?: React.ReactChild | null;
};
import * as React from 'react';
import {useTheme} from 'react-native-paper';
import {Modalize} from 'react-native-modalize';
import {View} from 'react-native-animatable';
import CustomTabBar from '../Tabbar/CustomTabBar';
/**
* Abstraction layer for Modalize component, using custom configuration
@ -33,26 +29,27 @@ type Props = {
* @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
* @return {*}
*/
function CustomModal(props: Props, ref?: Ref<Modalize>) {
function CustomModal(props: {
onRef: (re: Modalize) => void;
children?: React.ReactNode;
}) {
const theme = useTheme();
const { children } = props;
const {onRef, children} = props;
return (
<Modalize
ref={ref}
ref={onRef}
adjustToContentHeight
handlePosition="inside"
modalStyle={{ backgroundColor: theme.colors.card }}
handleStyle={{ backgroundColor: theme.colors.primary }}
>
modalStyle={{backgroundColor: theme.colors.card}}
handleStyle={{backgroundColor: theme.colors.primary}}>
<View
style={{
paddingBottom: TAB_BAR_HEIGHT,
}}
>
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
}}>
{children}
</View>
</Modalize>
);
}
export default React.forwardRef(CustomModal);
export default CustomModal;

32
src/components/Overrides/CustomSlider.tsx
View file

@ -18,28 +18,15 @@
*/
import * as React from 'react';
import { Text } from 'react-native-paper';
import { View } from 'react-native-animatable';
import Slider, { SliderProps } from '@react-native-community/slider';
import { useState } from 'react';
import { StyleSheet } from 'react-native';
import {Text} from 'react-native-paper';
import {View} from 'react-native-animatable';
import Slider, {SliderProps} from '@react-native-community/slider';
import {useState} from 'react';
type PropsType = {
valueSuffix?: string;
} & SliderProps;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
text: {
marginHorizontal: 10,
marginTop: 'auto',
marginBottom: 'auto',
},
});
/**
* Abstraction layer for Modalize component, using custom configuration
*
@ -57,8 +44,15 @@ function CustomSlider(props: PropsType) {
};
return (
<View style={styles.container}>
<Text style={styles.text}>{currentValue}min</Text>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text
style={{
marginHorizontal: 10,
marginTop: 'auto',
marginBottom: 'auto',
}}>
{currentValue}min
</Text>
<Slider {...props} ref={undefined} onValueChange={onValueChange} />
</View>
);

30
src/components/Screens/BasicLoadingScreen.tsx
View file

@ -17,24 +17,16 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
// @flow
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { ActivityIndicator, useTheme } from 'react-native-paper';
import {View} from 'react-native';
import {ActivityIndicator, useTheme} from 'react-native-paper';
type Props = {
isAbsolute?: boolean;
};
const styles = StyleSheet.create({
container: {
top: 0,
right: 0,
width: '100%',
height: '100%',
justifyContent: 'center',
},
});
/**
* Component used to display a header button
*
@ -43,16 +35,18 @@ const styles = StyleSheet.create({
*/
export default function BasicLoadingScreen(props: Props) {
const theme = useTheme();
const { isAbsolute } = props;
const position = isAbsolute ? 'absolute' : 'relative';
const {isAbsolute} = props;
return (
<View
style={{
backgroundColor: theme.colors.background,
position: position,
...styles.container,
}}
>
position: isAbsolute ? 'absolute' : 'relative',
top: 0,
right: 0,
width: '100%',
height: '100%',
justifyContent: 'center',
}}>
<ActivityIndicator animating size="large" color={theme.colors.primary} />
</View>
);

192
src/components/Screens/ErrorView.tsx
View file

@ -18,33 +18,28 @@
*/
import * as React from 'react';
import { Button, Subheading, useTheme } from 'react-native-paper';
import { StyleSheet, View, ViewStyle } from 'react-native';
import {Button, Subheading, withTheme} from 'react-native-paper';
import {StyleSheet, View} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import i18n from 'i18n-js';
import * as Animatable from 'react-native-animatable';
import {
API_REQUEST_CODES,
getErrorMessage,
REQUEST_STATUS,
} from '../../utils/Requests';
import {StackNavigationProp} from '@react-navigation/stack';
import {ERROR_TYPE} from '../../utils/WebData';
type Props = {
status?: REQUEST_STATUS;
code?: API_REQUEST_CODES;
type PropsType = {
navigation?: StackNavigationProp<any>;
theme: ReactNativePaper.Theme;
route?: {name: string};
onRefresh?: () => void;
errorCode?: number;
icon?: string;
message?: string;
loading?: boolean;
button?: {
text: string;
icon: string;
onPress: () => void;
};
style?: ViewStyle;
showRetryButton?: boolean;
};
const styles = StyleSheet.create({
outer: {
flex: 1,
height: '100%',
},
inner: {
marginTop: 'auto',
@ -66,52 +61,157 @@ const styles = StyleSheet.create({
},
});
function ErrorView(props: Props) {
const theme = useTheme();
const fullMessage = getErrorMessage(props, props.message, props.icon);
const { button } = props;
class ErrorView extends React.PureComponent<PropsType> {
static defaultProps = {
onRefresh: () => {},
errorCode: 0,
icon: '',
message: '',
showRetryButton: true,
};
return (
<View style={{ ...styles.outer, ...props.style }}>
message: string;
icon: string;
showLoginButton: boolean;
constructor(props: PropsType) {
super(props);
this.icon = '';
this.showLoginButton = false;
this.message = '';
}
getRetryButton() {
const {props} = this;
return (
<Button
mode="contained"
icon="refresh"
onPress={props.onRefresh}
style={styles.button}>
{i18n.t('general.retry')}
</Button>
);
}
getLoginButton() {
return (
<Button
mode="contained"
icon="login"
onPress={this.goToLogin}
style={styles.button}>
{i18n.t('screens.login.title')}
</Button>
);
}
goToLogin = () => {
const {props} = this;
if (props.navigation) {
props.navigation.navigate('login', {
screen: 'login',
params: {nextScreen: props.route ? props.route.name : undefined},
});
}
};
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() {
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: theme.colors.background,
backgroundColor: props.theme.colors.background,
}}
animation="zoomIn"
duration={200}
useNativeDriver
>
useNativeDriver>
<View style={styles.inner}>
<View style={styles.iconContainer}>
<MaterialCommunityIcons
name={fullMessage.icon}
// $FlowFixMe
name={this.icon}
size={150}
color={theme.colors.disabled}
color={props.theme.colors.textDisabled}
/>
</View>
<Subheading
style={{
...styles.subheading,
color: theme.colors.disabled,
}}
>
{fullMessage.message}
color: props.theme.colors.textDisabled,
}}>
{this.message}
</Subheading>
{button ? (
<Button
mode={'contained'}
icon={button.icon}
onPress={button.onPress}
style={styles.button}
>
{button.text}
</Button>
) : null}
{button}
</View>
</Animatable.View>
</View>
);
);
}
}
export default ErrorView;
export default withTheme(ErrorView);

143
src/components/Screens/PlanexWebview.tsx
View file

@ -1,143 +0,0 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import GENERAL_STYLES from '../../constants/Styles';
import Urls from '../../constants/Urls';
import DateManager from '../../managers/DateManager';
import { PlanexGroupType } from '../../screens/Planex/GroupSelectionScreen';
import ErrorView from './ErrorView';
import WebViewScreen from './WebViewScreen';
import i18n from 'i18n-js';
import { useTheme } from 'react-native-paper';
type Props = {
currentGroup?: PlanexGroupType;
injectJS: string;
onMessage: (event: { nativeEvent: { data: string } }) => void;
};
const styles = StyleSheet.create({
error: {
position: 'absolute',
height: '100%',
width: '100%',
},
});
// Watch for changes in the calendar and call the remove alpha function to prevent invisible events
const OBSERVE_MUTATIONS_INJECTED =
'function removeAlpha(node) {\n' +
' let bg = node.css("background-color");\n' +
' if (bg.match("^rgba")) {\n' +
" let a = bg.slice(5).split(',');\n" +
' // Fix for tooltips with broken background\n' +
' if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
" a[0] = a[1] = a[2] = '255';\n" +
' }\n' +
" let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';\n" +
' node.css("background-color", newBg);\n' +
' }\n' +
'}\n' +
'// Observe for planning DOM changes\n' +
'let observer = new MutationObserver(function(mutations) {\n' +
' for (let i = 0; i < mutations.length; i++) {\n' +
" if (mutations[i]['addedNodes'].length > 0 &&\n" +
' ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
" removeAlpha($(mutations[i]['addedNodes'][0]))\n" +
' }\n' +
'});\n' +
'// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
'observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
'// Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.\n' +
'$(".fc-event-container .fc-event").each(function(index) {\n' +
' removeAlpha($(this));\n' +
'});';
// Overrides default settings to send a message to the webview when clicking on an event
const FULL_CALENDAR_SETTINGS = `
let calendar = $('#calendar').fullCalendar('getCalendar');
calendar.option({
eventClick: function (data, event, view) {
let message = {
title: data.title,
color: data.color,
start: data.start._d,
end: data.end._d,
};
window.ReactNativeWebView.postMessage(JSON.stringify(message));
}
});`;
export const JS_LOADED_MESSAGE = '1';
const NOTIFY_JS_INJECTED = `
function notifyJsInjected() {
window.ReactNativeWebView.postMessage('${JS_LOADED_MESSAGE}');
}
`;
// Mobile friendly CSS
const CUSTOM_CSS =
'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
// Dark mode CSS, to be used with the mobile friendly css
const CUSTOM_CSS_DARK =
'body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
// Inject the custom css into the webpage
const INJECT_STYLE = `$('head').append('<style>${CUSTOM_CSS}</style>');`;
// Inject the dark mode into the webpage, to call after the custom css inject above
const INJECT_STYLE_DARK = `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
/**
* Generates custom JavaScript to be injected into the webpage
*
* @param groupID The current group selected
*/
const generateInjectedJS = (
group: PlanexGroupType | undefined,
darkMode: boolean
) => {
let customInjectedJS = `$(document).ready(function() {
${OBSERVE_MUTATIONS_INJECTED}
${INJECT_STYLE}
${FULL_CALENDAR_SETTINGS}
${NOTIFY_JS_INJECTED}`;
if (group) {
customInjectedJS += `displayAde(${group.id});`;
}
if (DateManager.isWeekend(new Date())) {
customInjectedJS += `calendar.next();`;
}
if (darkMode) {
customInjectedJS += INJECT_STYLE_DARK;
}
customInjectedJS += `notifyJsInjected();});true;`; // Prevents crash on ios
return customInjectedJS;
};
function PlanexWebview(props: Props) {
const theme = useTheme();
return (
<View style={GENERAL_STYLES.flex}>
<WebViewScreen
url={Urls.planex.planning}
initialJS={generateInjectedJS(props.currentGroup, theme.dark)}
injectJS={props.injectJS}
onMessage={props.onMessage}
showAdvancedControls={false}
showControls={props.currentGroup !== undefined}
incognito={true}
/>
{!props.currentGroup ? (
<ErrorView
icon={'account-clock'}
message={i18n.t('screens.planex.noGroupSelected')}
style={styles.error}
/>
) : null}
</View>
);
}
export default PlanexWebview;

142
src/components/Screens/RequestScreen.tsx
View file

@ -1,142 +0,0 @@
import React, { useEffect, useRef } from 'react';
import ErrorView from './ErrorView';
import { useRequestLogic } from '../../utils/customHooks';
import {
useFocusEffect,
useNavigation,
useRoute,
} from '@react-navigation/native';
import BasicLoadingScreen from './BasicLoadingScreen';
import i18n from 'i18n-js';
import { API_REQUEST_CODES, REQUEST_STATUS } from '../../utils/Requests';
import { StackNavigationProp } from '@react-navigation/stack';
import { MainRoutes } from '../../navigation/MainNavigator';
import { useLogout } from '../../utils/logout';
export type RequestScreenProps<T> = {
request: () => Promise<T>;
render: (
data: T | undefined,
loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<T>) => void,
status: REQUEST_STATUS,
code?: API_REQUEST_CODES
) => React.ReactElement;
cache?: T;
onCacheUpdate?: (newCache: T) => void;
onMajorError?: (status: number, code?: number) => void;
showLoading?: boolean;
showError?: boolean;
refreshOnFocus?: boolean;
autoRefreshTime?: number;
refresh?: boolean;
onFinish?: () => void;
};
export type RequestProps = {
refreshData: () => void;
loading: boolean;
};
type Props<T> = RequestScreenProps<T>;
const MIN_REFRESH_TIME = 3 * 1000;
export default function RequestScreen<T>(props: Props<T>) {
const onLogout = useLogout();
const navigation = useNavigation<StackNavigationProp<any>>();
const route = useRoute();
const refreshInterval = useRef<number>();
const [loading, lastRefreshDate, status, code, data, refreshData] =
useRequestLogic<T>(
props.request,
props.cache,
props.onCacheUpdate,
props.refreshOnFocus,
MIN_REFRESH_TIME
);
// Store last refresh prop value
const lastRefresh = useRef<boolean>(false);
useEffect(() => {
// Refresh data if refresh prop changed and we are not loading
if (props.refresh && !lastRefresh.current && !loading) {
refreshData();
// Call finish callback if refresh prop was set and we finished loading
} else if (lastRefresh.current && !loading && props.onFinish) {
props.onFinish();
}
// Update stored refresh prop value
if (props.refresh !== lastRefresh.current) {
lastRefresh.current = props.refresh === true;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props, loading]);
useFocusEffect(
React.useCallback(() => {
if (!props.cache && props.refreshOnFocus !== false) {
refreshData();
}
if (props.autoRefreshTime && props.autoRefreshTime > 0) {
refreshInterval.current = setInterval(
refreshData,
props.autoRefreshTime
);
}
return () => {
if (refreshInterval.current) {
clearInterval(refreshInterval.current);
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.cache, props.refreshOnFocus, props.autoRefreshTime])
);
const isErrorCritical = (e: API_REQUEST_CODES | undefined) => {
return e === API_REQUEST_CODES.BAD_TOKEN;
};
useEffect(() => {
if (isErrorCritical(code)) {
onLogout();
navigation.replace(MainRoutes.Login, { nextScreen: route.name });
}
}, [code, navigation, route, onLogout]);
if (data === undefined && loading && props.showLoading !== false) {
return <BasicLoadingScreen />;
} else if (
data === undefined &&
(status !== REQUEST_STATUS.SUCCESS ||
(status === REQUEST_STATUS.SUCCESS && code !== undefined)) &&
props.showError !== false
) {
return (
<ErrorView
status={status}
code={code}
loading={loading}
button={
isErrorCritical(code)
? undefined
: {
icon: 'refresh',
text: i18n.t('general.retry'),
onPress: () => refreshData(),
}
}
/>
);
} else {
return props.render(
data,
loading,
lastRefreshDate,
refreshData,
status,
code
);
}
}

386
src/components/Screens/WebSectionList.tsx
View file

@ -17,19 +17,24 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React from 'react';
import * as React from 'react';
import i18n from 'i18n-js';
import {Snackbar} from 'react-native-paper';
import {
NativeSyntheticEvent,
RefreshControl,
SectionListData,
SectionListProps,
StyleSheet,
View,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
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 CustomTabBar from '../Tabbar/CustomTabBar';
import {ERROR_TYPE, readData} from '../../utils/WebData';
import CollapsibleSectionList from '../Collapsible/CollapsibleSectionList';
import RequestScreen, { RequestScreenProps } from './RequestScreen';
import { CollapsibleComponentPropsType } from '../Collapsible/CollapsibleComponent';
import { API_REQUEST_CODES, REQUEST_STATUS } from '../../utils/Requests';
export type SectionListDataType<ItemT> = Array<{
title: string;
@ -38,53 +43,169 @@ export type SectionListDataType<ItemT> = Array<{
keyExtractor?: (data: ItemT) => string;
}>;
type Props<ItemT, RawData> = Omit<
CollapsibleComponentPropsType,
'children' | 'paddedProps'
> &
Omit<
RequestScreenProps<RawData>,
'render' | 'showLoading' | 'showError' | 'onMajorError'
> &
Omit<
SectionListProps<ItemT>,
'sections' | 'getItemLayout' | 'ListHeaderComponent' | 'ListEmptyComponent'
> & {
createDataset: (
data: RawData | undefined,
loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS,
code?: API_REQUEST_CODES
) => SectionListDataType<ItemT>;
renderListHeaderComponent?: (
data: RawData | undefined,
loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS,
code?: API_REQUEST_CODES
) => React.ComponentType<any> | React.ReactElement | null;
itemHeight?: number | null;
};
type PropsType<ItemT, RawData> = {
navigation: StackNavigationProp<any>;
fetchUrl: string;
autoRefreshTime: number;
refreshOnFocus: boolean;
renderItem: (data: {item: ItemT}) => React.ReactNode;
createDataset: (
data: RawData | null,
isLoading?: boolean,
) => SectionListDataType<ItemT>;
onScroll: (event: NativeSyntheticEvent<EventTarget>) => void;
collapsibleStack: Collapsible;
const styles = StyleSheet.create({
container: {
minHeight: '100%',
},
});
showError?: boolean;
itemHeight?: number | null;
updateData?: number;
renderListHeaderComponent?: (
data: RawData | null,
) => React.ComponentType<any> | React.ReactElement | null;
renderSectionHeader?: (
data: {section: SectionListData<ItemT>},
isLoading?: boolean,
) => React.ReactElement | null;
stickyHeader?: boolean;
};
type StateType<RawData> = {
refreshing: boolean;
fetchedData: RawData | null;
snackbarVisible: boolean;
};
const MIN_REFRESH_TIME = 5 * 1000;
/**
* Component used to render a SectionList with data fetched from the web
*
* This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
* To force the component to update, change the value of updateData.
*/
function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
const getItemLayout = (
class WebSectionList<ItemT, RawData> extends React.PureComponent<
PropsType<ItemT, RawData>,
StateType<RawData>
> {
static defaultProps = {
showError: true,
itemHeight: null,
updateData: 0,
renderListHeaderComponent: () => null,
renderSectionHeader: () => null,
stickyHeader: false,
};
refreshInterval: NodeJS.Timeout | undefined;
lastRefresh: Date | undefined;
constructor(props: PropsType<ItemT, RawData>) {
super(props);
this.state = {
refreshing: false,
fetchedData: null,
snackbarVisible: false,
};
}
/**
* Registers react navigation events on first screen load.
* Allows to detect when the screen is focused
*/
componentDidMount() {
const {navigation} = this.props;
navigation.addListener('focus', this.onScreenFocus);
navigation.addListener('blur', this.onScreenBlur);
this.lastRefresh = undefined;
this.onRefresh();
}
/**
* Refreshes data when focusing the screen and setup a refresh interval if asked to
*/
onScreenFocus = () => {
const {props} = this;
if (props.refreshOnFocus && this.lastRefresh) {
setTimeout(this.onRefresh, 200);
}
if (props.autoRefreshTime > 0) {
this.refreshInterval = setInterval(this.onRefresh, props.autoRefreshTime);
}
};
/**
* Removes any interval on un-focus
*/
onScreenBlur = () => {
if (this.refreshInterval) {
clearInterval(this.refreshInterval);
}
};
/**
* Callback used when fetch is successful.
* It will update the displayed data and stop the refresh animation
*
* @param fetchedData The newly fetched data
*/
onFetchSuccess = (fetchedData: RawData) => {
this.setState({
fetchedData,
refreshing: false,
});
this.lastRefresh = new Date();
};
/**
* Callback used when fetch encountered an error.
* It will reset the displayed data and show an error.
*/
onFetchError = () => {
this.setState({
fetchedData: null,
refreshing: false,
});
this.showSnackBar();
};
/**
* Refreshes data and shows an animations while doing it
*/
onRefresh = () => {
const {fetchUrl} = this.props;
let canRefresh;
if (this.lastRefresh != null) {
const last = this.lastRefresh;
canRefresh = new Date().getTime() - last.getTime() > MIN_REFRESH_TIME;
} else {
canRefresh = true;
}
if (canRefresh) {
this.setState({refreshing: true});
readData(fetchUrl).then(this.onFetchSuccess).catch(this.onFetchError);
}
};
/**
* Shows the error popup
*/
showSnackBar = () => {
this.setState({snackbarVisible: true});
};
/**
* Hides the error popup
*/
hideSnackBar = () => {
this.setState({snackbarVisible: false});
};
getItemLayout = (
height: number,
_data: Array<SectionListData<ItemT>> | null,
index: number
): { length: number; offset: number; index: number } => {
data: Array<SectionListData<ItemT>> | null,
index: number,
): {length: number; offset: number; index: number} => {
return {
length: height,
offset: height * index,
@ -92,88 +213,103 @@ function WebSectionList<ItemT, RawData>(props: Props<ItemT, RawData>) {
};
};
const render = (
data: RawData | undefined,
loading: boolean,
lastRefreshDate: Date | undefined,
refreshData: (newRequest?: () => Promise<RawData>) => void,
status: REQUEST_STATUS,
code?: API_REQUEST_CODES
) => {
const { itemHeight } = props;
const dataset = props.createDataset(
data,
loading,
lastRefreshDate,
refreshData,
status,
code
);
getRenderSectionHeader = (data: {section: SectionListData<ItemT>}) => {
const {renderSectionHeader} = this.props;
const {refreshing} = this.state;
if (renderSectionHeader != null) {
return (
<Animatable.View animation="fadeInUp" duration={500} useNativeDriver>
{renderSectionHeader(data, refreshing)}
</Animatable.View>
);
}
return null;
};
getRenderItem = (data: {item: ItemT}) => {
const {renderItem} = this.props;
return (
<CollapsibleSectionList
{...props}
sections={dataset}
paddedProps={(paddingTop) => ({
refreshControl: (
<RefreshControl
progressViewOffset={paddingTop}
refreshing={loading}
onRefresh={refreshData}
/>
),
})}
renderItem={props.renderItem}
style={styles.container}
ListHeaderComponent={
props.renderListHeaderComponent != null
? props.renderListHeaderComponent(
data,
loading,
lastRefreshDate,
refreshData,
status,
code
)
: null
}
ListEmptyComponent={
loading ? undefined : (
<ErrorView
status={status}
code={code}
button={
code !== API_REQUEST_CODES.BAD_TOKEN
? {
icon: 'refresh',
text: i18n.t('general.retry'),
onPress: () => refreshData(),
}
: undefined
}
/>
)
}
getItemLayout={
itemHeight ? (d, i) => getItemLayout(itemHeight, d, i) : undefined
}
/>
<Animatable.View animation="fadeInUp" duration={500} useNativeDriver>
{renderItem(data)}
</Animatable.View>
);
};
return (
<RequestScreen<RawData>
request={props.request}
render={render}
showError={false}
showLoading={false}
autoRefreshTime={props.autoRefreshTime}
refreshOnFocus={props.refreshOnFocus}
cache={props.cache}
onCacheUpdate={props.onCacheUpdate}
refresh={props.refresh}
onFinish={props.onFinish}
/>
);
onScroll = (event: NativeSyntheticEvent<EventTarget>) => {
const {onScroll} = this.props;
if (onScroll != null) {
onScroll(event);
}
};
render() {
const {props, state} = this;
const {itemHeight} = props;
let dataset: SectionListDataType<ItemT> = [];
if (
state.fetchedData != null ||
(state.fetchedData == null && !props.showError)
) {
dataset = props.createDataset(state.fetchedData, state.refreshing);
}
const {containerPaddingTop} = props.collapsibleStack;
return (
<View>
<CollapsibleSectionList
sections={dataset}
extraData={props.updateData}
refreshControl={
<RefreshControl
progressViewOffset={containerPaddingTop}
refreshing={state.refreshing}
onRefresh={this.onRefresh}
/>
}
renderSectionHeader={this.getRenderSectionHeader}
renderItem={this.getRenderItem}
stickySectionHeadersEnabled={props.stickyHeader}
style={{minHeight: '100%'}}
ListHeaderComponent={
props.renderListHeaderComponent != null
? props.renderListHeaderComponent(state.fetchedData)
: null
}
ListEmptyComponent={
state.refreshing ? (
<BasicLoadingScreen />
) : (
<ErrorView
navigation={props.navigation}
errorCode={ERROR_TYPE.CONNECTION_ERROR}
onRefresh={this.onRefresh}
/>
)
}
getItemLayout={
itemHeight
? (data, index) => this.getItemLayout(itemHeight, data, index)
: undefined
}
onScroll={this.onScroll}
hasTab
/>
<Snackbar
visible={state.snackbarVisible}
onDismiss={this.hideSnackBar}
action={{
label: 'OK',
onPress: () => {},
}}
duration={4000}
style={{
bottom: CustomTabBar.TAB_BAR_HEIGHT,
}}>
{i18n.t('general.listUpdateFail')}
</Snackbar>
</View>
);
}
}
export default WebSectionList;
export default withCollapsible(WebSectionList);

314
src/components/Screens/WebViewScreen.tsx
View file

@ -17,14 +17,8 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React, {
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
} from 'react';
import WebView, { WebViewNavigation } from 'react-native-webview';
import * as React from 'react';
import WebView from 'react-native-webview';
import {
Divider,
HiddenItem,
@ -37,162 +31,161 @@ import {
Linking,
NativeScrollEvent,
NativeSyntheticEvent,
StyleSheet,
} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { useTheme } from 'react-native-paper';
import { useCollapsibleHeader } from 'react-navigation-collapsible';
import MaterialHeaderButtons, { Item } from '../Overrides/CustomHeaderButton';
import {withTheme} from 'react-native-paper';
import {StackNavigationProp} from '@react-navigation/stack';
import {Collapsible} from 'react-navigation-collapsible';
import withCollapsible from '../../utils/withCollapsible';
import MaterialHeaderButtons, {Item} from '../Overrides/CustomHeaderButton';
import {ERROR_TYPE} from '../../utils/WebData';
import ErrorView from './ErrorView';
import BasicLoadingScreen from './BasicLoadingScreen';
import { useFocusEffect, useNavigation } from '@react-navigation/core';
import { useCollapsible } from '../../context/CollapsibleContext';
import { REQUEST_STATUS } from '../../utils/Requests';
type Props = {
type PropsType = {
navigation: StackNavigationProp<any>;
theme: ReactNativePaper.Theme;
url: string;
onMessage?: (event: { nativeEvent: { data: string } }) => void;
onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
initialJS?: string;
injectJS?: string;
collapsibleStack: Collapsible;
onMessage: (event: {nativeEvent: {data: string}}) => void;
onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
customJS?: string;
customPaddingFunction?: null | ((padding: number) => string);
showAdvancedControls?: boolean;
showControls?: boolean;
incognito?: boolean;
};
const AnimatedWebView = Animated.createAnimatedComponent(WebView);
const styles = StyleSheet.create({
overflow: {
marginHorizontal: 10,
},
});
/**
* Class defining a webview screen.
*/
function WebViewScreen(props: Props) {
const [navState, setNavState] = useState<undefined | WebViewNavigation>({
canGoBack: false,
canGoForward: false,
loading: true,
url: props.url,
lockIdentifier: 0,
navigationType: 'click',
title: '',
});
const navigation = useNavigation();
const theme = useTheme();
const webviewRef = useRef<WebView>();
class WebViewScreen extends React.PureComponent<PropsType> {
static defaultProps = {
customJS: '',
showAdvancedControls: true,
customPaddingFunction: null,
};
const { setCollapsible } = useCollapsible();
const collapsible = useCollapsibleHeader({
config: { collapsedColor: theme.colors.surface, useNativeDriver: false },
});
const { containerPaddingTop, onScrollWithListener } = collapsible;
currentUrl: string;
const [currentInjectedJS, setCurrentInjectedJS] = useState(props.injectJS);
webviewRef: {current: null | WebView};
useFocusEffect(
useCallback(() => {
setCollapsible(collapsible);
canGoBack: boolean;
constructor(props: PropsType) {
super(props);
this.webviewRef = React.createRef();
this.canGoBack = false;
this.currentUrl = props.url;
}
/**
* Creates header buttons and listens to events after mounting
*/
componentDidMount() {
const {props} = this;
props.navigation.setOptions({
headerRight: props.showAdvancedControls
? this.getAdvancedButtons
: this.getBasicButton,
});
props.navigation.addListener('focus', () => {
BackHandler.addEventListener(
'hardwareBackPress',
onBackButtonPressAndroid
this.onBackButtonPressAndroid,
);
return () => {
BackHandler.removeEventListener(
'hardwareBackPress',
onBackButtonPressAndroid
);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [collapsible, setCollapsible])
);
});
props.navigation.addListener('blur', () => {
BackHandler.removeEventListener(
'hardwareBackPress',
this.onBackButtonPressAndroid,
);
});
}
useLayoutEffect(() => {
if (props.showControls !== false) {
navigation.setOptions({
headerRight: props.showAdvancedControls
? getAdvancedButtons
: getBasicButton,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
navigation,
props.showAdvancedControls,
navState?.url,
props.showControls,
]);
useEffect(() => {
if (props.injectJS && props.injectJS !== currentInjectedJS) {
injectJavaScript(props.injectJS);
setCurrentInjectedJS(props.injectJS);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.injectJS]);
const onBackButtonPressAndroid = () => {
if (navState?.canGoBack) {
onGoBackClicked();
/**
* Goes back on the webview or on the navigation stack if we cannot go back anymore
*
* @returns {boolean}
*/
onBackButtonPressAndroid = (): boolean => {
if (this.canGoBack) {
this.onGoBackClicked();
return true;
}
return false;
};
const getBasicButton = () => {
/**
* Gets header refresh and open in browser buttons
*
* @return {*}
*/
getBasicButton = () => {
return (
<MaterialHeaderButtons>
<Item
title={'refresh'}
iconName={'refresh'}
onPress={onRefreshClicked}
title="refresh"
iconName="refresh"
onPress={this.onRefreshClicked}
/>
<Item
title={i18n.t('general.openInBrowser')}
iconName={'open-in-new'}
onPress={onOpenClicked}
iconName="open-in-new"
onPress={this.onOpenClicked}
/>
</MaterialHeaderButtons>
);
};
const getAdvancedButtons = () => {
/**
* Creates advanced header control buttons.
* These buttons allows the user to refresh, go back, go forward and open in the browser.
*
* @returns {*}
*/
getAdvancedButtons = () => {
const {props} = this;
return (
<MaterialHeaderButtons>
<Item title="refresh" iconName="refresh" onPress={onRefreshClicked} />
<Item
title="refresh"
iconName="refresh"
onPress={this.onRefreshClicked}
/>
<OverflowMenu
style={styles.overflow}
style={{marginHorizontal: 10}}
OverflowIcon={
<MaterialCommunityIcons
name="dots-vertical"
size={26}
color={theme.colors.text}
color={props.theme.colors.text}
/>
}
>
}>
<HiddenItem
title={i18n.t('general.goBack')}
onPress={onGoBackClicked}
onPress={this.onGoBackClicked}
/>
<HiddenItem
title={i18n.t('general.goForward')}
onPress={onGoForwardClicked}
onPress={this.onGoForwardClicked}
/>
<Divider />
<HiddenItem
title={i18n.t('general.openInBrowser')}
onPress={onOpenClicked}
onPress={this.onOpenClicked}
/>
</OverflowMenu>
</MaterialHeaderButtons>
);
};
const getRenderLoading = () => <BasicLoadingScreen isAbsolute={true} />;
/**
* Gets the loading indicator
*
* @return {*}
*/
getRenderLoading = () => <BasicLoadingScreen isAbsolute />;
/**
* Gets the javascript needed to generate a padding on top of the page
@ -201,81 +194,88 @@ function WebViewScreen(props: Props) {
* @param padding The padding to add in pixels
* @returns {string}
*/
const getJavascriptPadding = (padding: number) => {
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;`;
};
}
const onRefreshClicked = () => {
//@ts-ignore
if (webviewRef.current) {
//@ts-ignore
webviewRef.current.reload();
/**
* Callback to use when refresh button is clicked. Reloads the webview.
*/
onRefreshClicked = () => {
if (this.webviewRef.current != null) {
this.webviewRef.current.reload();
}
};
const onGoBackClicked = () => {
//@ts-ignore
if (webviewRef.current) {
//@ts-ignore
webviewRef.current.goBack();
onGoBackClicked = () => {
if (this.webviewRef.current != null) {
this.webviewRef.current.goBack();
}
};
const onGoForwardClicked = () => {
//@ts-ignore
if (webviewRef.current) {
//@ts-ignore
webviewRef.current.goForward();
onGoForwardClicked = () => {
if (this.webviewRef.current != null) {
this.webviewRef.current.goForward();
}
};
const onOpenClicked = () =>
navState ? Linking.openURL(navState.url) : undefined;
onOpenClicked = () => {
Linking.openURL(this.currentUrl);
};
const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
if (props.onScroll) {
props.onScroll(event);
onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
const {onScroll} = this.props;
if (onScroll) {
onScroll(event);
}
};
const injectJavaScript = (script: string) => {
//@ts-ignore
if (webviewRef.current) {
//@ts-ignore
webviewRef.current.injectJavaScript(script);
/**
* Injects the given javascript string into the web page
*
* @param script The script to inject
*/
injectJavaScript = (script: string) => {
if (this.webviewRef.current != null) {
this.webviewRef.current.injectJavaScript(script);
}
};
return (
<AnimatedWebView
ref={webviewRef}
source={{ uri: props.url }}
startInLoadingState={true}
injectedJavaScript={props.initialJS}
javaScriptEnabled={true}
renderLoading={getRenderLoading}
renderError={() => (
<ErrorView
status={REQUEST_STATUS.CONNECTION_ERROR}
button={{
icon: 'refresh',
text: i18n.t('general.retry'),
onPress: onRefreshClicked,
}}
/>
)}
onNavigationStateChange={setNavState}
onMessage={props.onMessage}
onLoad={() => injectJavaScript(getJavascriptPadding(containerPaddingTop))}
// Animations
onScroll={onScrollWithListener(onScroll)}
incognito={props.incognito}
/>
);
render() {
const {props} = this;
const {containerPaddingTop, onScrollWithListener} = props.collapsibleStack;
return (
<AnimatedWebView
ref={this.webviewRef}
source={{uri: props.url}}
startInLoadingState
injectedJavaScript={props.customJS}
javaScriptEnabled
renderLoading={this.getRenderLoading}
renderError={() => (
<ErrorView
errorCode={ERROR_TYPE.CONNECTION_ERROR}
onRefresh={this.onRefreshClicked}
/>
)}
onNavigationStateChange={(navState) => {
this.currentUrl = navState.url;
this.canGoBack = navState.canGoBack;
}}
onMessage={props.onMessage}
onLoad={() => {
this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop));
}}
// Animations
onScroll={(event) => onScrollWithListener(this.onScroll)(event)}
/>
);
}
}
export default WebViewScreen;
export default withCollapsible(withTheme(WebViewScreen));

267
src/components/Tabbar/CustomTabBar.tsx
View file

@ -17,85 +17,204 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import React from 'react';
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { Animated, StyleSheet } from 'react-native';
import * as React from 'react';
import {Animated} from 'react-native';
import {withTheme} from 'react-native-paper';
import {Collapsible} from 'react-navigation-collapsible';
import TabIcon from './TabIcon';
import { useTheme } from 'react-native-paper';
import { useCollapsible } from '../../context/CollapsibleContext';
import TabHomeIcon from './TabHomeIcon';
import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
import {NavigationState} from '@react-navigation/native';
import {
PartialState,
Route,
} from '@react-navigation/routers/lib/typescript/src/types';
export const TAB_BAR_HEIGHT = 50;
type RouteType = Route<string> & {
state?: NavigationState | PartialState<NavigationState>;
};
function CustomTabBar(
props: BottomTabBarProps & {
icons: {
[key: string]: {
normal: string;
focused: string;
};
};
labels: {
[key: string]: string;
};
}
) {
const state = props.state;
const theme = useTheme();
const { collapsible } = useCollapsible();
let translateY: number | Animated.AnimatedInterpolation = 0;
if (collapsible) {
translateY = Animated.multiply(-1.5, collapsible.translateY);
}
return (
<Animated.View
style={{
...styles.bar,
backgroundColor: theme.colors.surface,
transform: [{ translateY: translateY }],
}}
>
{state.routes.map(
(
route: {
key: string;
name: string;
params?: object | undefined;
},
index: number
) => {
const iconData = props.icons[route.name];
return (
<TabIcon
isMiddle={index === 2}
onPress={() => props.navigation.navigate(route.name)}
icon={iconData.normal}
focusedIcon={iconData.focused}
label={props.labels[route.name]}
focused={state.index === index}
key={route.key}
/>
);
}
)}
</Animated.View>
);
interface PropsType extends BottomTabBarProps {
theme: ReactNativePaper.Theme;
}
const styles = StyleSheet.create({
bar: {
flexDirection: 'row',
width: '100%',
height: 50,
position: 'absolute',
bottom: 0,
left: 0,
},
});
type StateType = {
translateY: any;
};
function areEqual(prevProps: BottomTabBarProps, nextProps: BottomTabBarProps) {
return prevProps.state.index === nextProps.state.index;
type validRoutes = 'proxiwash' | 'services' | 'planning' | 'planex';
const TAB_ICONS = {
proxiwash: 'tshirt-crew',
services: 'account-circle',
planning: 'calendar-range',
planex: 'clock',
};
class CustomTabBar extends React.Component<PropsType, StateType> {
static TAB_BAR_HEIGHT = 48;
constructor(props: PropsType) {
super(props);
this.state = {
translateY: new Animated.Value(0),
};
// @ts-ignore
props.navigation.addListener('state', this.onRouteChange);
}
/**
* Navigates to the given route if it is different from the current one
*
* @param route Destination route
* @param currentIndex The current route index
* @param destIndex The destination route index
*/
onItemPress(route: RouteType, currentIndex: number, destIndex: number) {
const {navigation} = this.props;
if (currentIndex !== destIndex) {
navigation.navigate(route.name);
}
}
/**
* Navigates to tetris screen on home button long press
*
* @param route
*/
onItemLongPress(route: RouteType) {
const {navigation} = this.props;
if (route.name === 'home') {
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
*
* @param route
* @param focused
* @returns {null}
*/
getTabBarIcon = (route: RouteType, focused: boolean) => {
let icon = TAB_ICONS[route.name as validRoutes];
icon = focused ? icon : `${icon}-outline`;
if (route.name !== 'home') {
return icon;
}
return '';
};
/**
* Gets a tab icon render.
* If the given route is focused, it syncs the tab bar and header bar animations together
*
* @param route The route for the icon
* @param index The index of the current route
* @returns {*}
*/
getRenderIcon = (route: RouteType, index: number) => {
const {props} = this;
const {state} = props;
const {options} = props.descriptors[route.key];
let label;
if (options.tabBarLabel != null) {
label = options.tabBarLabel;
} else if (options.title != null) {
label = options.title;
} else {
label = route.name;
}
const onPress = () => {
this.onItemPress(route, state.index, index);
};
const onLongPress = () => {
this.onItemLongPress(route);
};
const isFocused = state.index === index;
const color = isFocused
? props.theme.colors.primary
: props.theme.colors.tabIcon;
if (route.name !== 'home') {
return (
<TabIcon
onPress={onPress}
onLongPress={onLongPress}
icon={this.getTabBarIcon(route, isFocused)}
color={color}
label={label as string}
focused={isFocused}
extraData={state.index > index}
key={route.key}
/>
);
}
return (
<TabHomeIcon
onPress={onPress}
onLongPress={onLongPress}
focused={isFocused}
key={route.key}
tabBarHeight={CustomTabBar.TAB_BAR_HEIGHT}
/>
);
};
getIcons() {
const {props} = this;
return props.state.routes.map(this.getRenderIcon);
}
syncTabBar = (route: RouteType, index: number) => {
const {state} = this.props;
const isFocused = state.index === index;
if (isFocused) {
const stackState = route.state;
const stackRoute =
stackState && stackState.index != null
? stackState.routes[stackState.index]
: null;
const params: {collapsible: Collapsible} | null | undefined = stackRoute
? (stackRoute.params as {collapsible: Collapsible})
: 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() {
const {props, state} = this;
const icons = this.getIcons();
return (
<Animated.View
style={{
flexDirection: 'row',
height: CustomTabBar.TAB_BAR_HEIGHT,
width: '100%',
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: props.theme.colors.surface,
transform: [{translateY: state.translateY}],
}}>
{icons}
</Animated.View>
);
}
}
export default React.memo(CustomTabBar, areEqual);
export default withTheme(CustomTabBar);

217
src/components/Tabbar/TabHomeIcon.tsx
View file

@ -1,118 +1,127 @@
import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
import { FAB } from 'react-native-paper';
/*
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
*
* This file is part of Campus INSAT.
*
* Campus INSAT is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Campus INSAT is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import {Image, View} from 'react-native';
import {FAB} from 'react-native-paper';
import * as Animatable from 'react-native-animatable';
import { useNavigation } from '@react-navigation/core';
import { MainRoutes } from '../../navigation/MainNavigator';
interface Props {
icon: string;
focusedIcon: string;
focused: boolean;
onPress: () => void;
}
Animatable.initializeRegistryWithDefinitions({
fabFocusIn: {
0: {
// @ts-ignore
scale: 1,
translateY: 0,
},
0.4: {
// @ts-ignore
scale: 1.2,
translateY: -9,
},
0.6: {
// @ts-ignore
scale: 1.05,
translateY: -6,
},
0.8: {
// @ts-ignore
scale: 1.15,
translateY: -6,
},
1: {
// @ts-ignore
scale: 1.1,
translateY: -6,
},
},
fabFocusOut: {
0: {
// @ts-ignore
scale: 1.1,
translateY: -6,
},
1: {
// @ts-ignore
scale: 1,
translateY: 0,
},
},
});
const styles = StyleSheet.create({
outer: {
flex: 1,
justifyContent: 'center',
},
inner: {
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
height: 60,
},
fab: {
marginLeft: 'auto',
marginRight: 'auto',
},
});
const FOCUSED_ICON = require('../../../assets/tab-icon.png');
const UNFOCUSED_ICON = require('../../../assets/tab-icon-outline.png');
function TabHomeIcon(props: Props) {
const navigation = useNavigation();
const getImage = (iconProps: { size: number; color: string }) => {
type PropsType = {
focused: boolean;
onPress: () => void;
onLongPress: () => void;
tabBarHeight: number;
};
const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
/**
* Abstraction layer for Agenda component, using custom configuration
*/
class TabHomeIcon extends React.Component<PropsType> {
constructor(props: PropsType) {
super(props);
Animatable.initializeRegistryWithDefinitions({
fabFocusIn: {
'0': {
// @ts-ignore
scale: 1,
translateY: 0,
},
'0.9': {
scale: 1.2,
translateY: -9,
},
'1': {
scale: 1.1,
translateY: -7,
},
},
fabFocusOut: {
'0': {
// @ts-ignore
scale: 1.1,
translateY: -6,
},
'1': {
scale: 1,
translateY: 0,
},
},
});
}
shouldComponentUpdate(nextProps: PropsType): boolean {
const {focused} = this.props;
return nextProps.focused !== focused;
}
getIconRender = ({size, color}: {size: number; color: string}) => {
const {focused} = this.props;
return (
<Animatable.View useNativeDriver={true} animation={'rubberBand'}>
<Image
source={props.focused ? FOCUSED_ICON : UNFOCUSED_ICON}
style={{
width: iconProps.size,
height: iconProps.size,
tintColor: iconProps.color,
}}
/>
</Animatable.View>
<Image
source={focused ? FOCUSED_ICON : UNFOCUSED_ICON}
style={{
width: size,
height: size,
tintColor: color,
}}
/>
);
};
return (
<View style={styles.outer}>
<View style={styles.inner}>
<Animatable.View
style={styles.fab}
useNativeDriver={true}
duration={props.focused ? 500 : 200}
animation={props.focused ? 'fabFocusIn' : 'fabFocusOut'}
easing={'ease-out'}
>
<FAB
render() {
const {props} = this;
return (
<View
style={{
flex: 1,
justifyContent: 'center',
}}>
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
height: props.tabBarHeight + 30,
marginBottom: -15,
}}>
<AnimatedFAB
duration={200}
easing="ease-out"
animation={props.focused ? 'fabFocusIn' : 'fabFocusOut'}
icon={this.getIconRender}
onPress={props.onPress}
onLongPress={() => navigation.navigate(MainRoutes.GameStart)}
animated={false}
icon={getImage}
color={'#fff'}
onLongPress={props.onLongPress}
style={{
marginTop: 15,
marginLeft: 'auto',
marginRight: 'auto',
}}
/>
</Animatable.View>
</View>
</View>
</View>
);
);
}
}
export default TabHomeIcon;

150
src/components/Tabbar/TabIcon.tsx
View file

@ -1,41 +1,135 @@
import React from 'react';
import TabHomeIcon from './TabHomeIcon';
import TabSideIcon from './TabSideIcon';
/*
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
*
* This file is part of Campus INSAT.
*
* Campus INSAT is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Campus INSAT is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/
interface Props {
isMiddle: boolean;
import * as React from 'react';
import {View} from 'react-native';
import {TouchableRipple, withTheme} from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import * as Animatable from 'react-native-animatable';
type PropsType = {
focused: boolean;
label: string | undefined;
color: string;
label: string;
icon: string;
focusedIcon: string;
onPress: () => void;
}
onLongPress: () => void;
theme: ReactNativePaper.Theme;
extraData: null | boolean | number | string;
};
function TabIcon(props: Props) {
if (props.isMiddle) {
/**
* Abstraction layer for Agenda component, using custom configuration
*/
class TabIcon extends React.Component<PropsType> {
firstRender: boolean;
constructor(props: PropsType) {
super(props);
Animatable.initializeRegistryWithDefinitions({
focusIn: {
'0': {
// @ts-ignore
scale: 1,
translateY: 0,
},
'0.9': {
scale: 1.3,
translateY: 7,
},
'1': {
scale: 1.2,
translateY: 6,
},
},
focusOut: {
'0': {
// @ts-ignore
scale: 1.2,
translateY: 6,
},
'1': {
scale: 1,
translateY: 0,
},
},
});
this.firstRender = true;
}
componentDidMount() {
this.firstRender = false;
}
shouldComponentUpdate(nextProps: PropsType): boolean {
const {props} = this;
return (
<TabHomeIcon
icon={props.icon}
focusedIcon={props.focusedIcon}
focused={props.focused}
onPress={props.onPress}
/>
nextProps.focused !== props.focused ||
nextProps.theme.dark !== props.theme.dark ||
nextProps.extraData !== props.extraData
);
} else {
}
render() {
const {props} = this;
return (
<TabSideIcon
focused={props.focused}
label={props.label}
icon={props.icon}
focusedIcon={props.focusedIcon}
<TouchableRipple
onPress={props.onPress}
/>
onLongPress={props.onLongPress}
rippleColor={props.theme.colors.primary}
borderless
style={{
flex: 1,
justifyContent: 'center',
borderRadius: 10,
}}>
<View>
<Animatable.View
duration={200}
easing="ease-out"
animation={props.focused ? 'focusIn' : 'focusOut'}
useNativeDriver>
<MaterialCommunityIcons
name={props.icon}
color={props.color}
size={26}
style={{
marginLeft: 'auto',
marginRight: 'auto',
}}
/>
</Animatable.View>
<Animatable.Text
animation={props.focused ? 'fadeOutDown' : 'fadeIn'}
useNativeDriver
style={{
color: props.color,
marginLeft: 'auto',
marginRight: 'auto',
fontSize: 10,
}}>
{props.label}
</Animatable.Text>
</View>
</TouchableRipple>
);
}
}
function areEqual(prevProps: Props, nextProps: Props) {
return prevProps.focused === nextProps.focused;
}
export default React.memo(TabIcon, areEqual);
export default withTheme(TabIcon);

Some files were not shown because too many files have changed in this diff Show more