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

Compare commits

base: vergnet:b3784735917a299b25d2bdfe4cb1afe68de6d280
Branches Tags
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
..
compare: vergnet:05ef28f3b5cd7793e8d12a3e2d6606ebc6172c15
Branches Tags
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. "b3784735917a299b25d2bdfe4cb1afe68de6d280" and "05ef28f3b5cd7793e8d12a3e2d6606ebc6172c15" have entirely different histories.
b378473591 ... 05ef28f3b5

145 changed files with 16510 additions and 18120 deletions
Show stats Expand all files Collapse all files

6
.eslintrc.js
View file

@ -13,8 +13,6 @@ module.exports = {
jest: true, jest: true,
}, },
rules: { rules: {
'react/jsx-filename-extension': [1, {extensions: ['.js', '.jsx']}],
'react/static-property-placement': [2, 'static public field'],
'flowtype/define-flow-type': 1, 'flowtype/define-flow-type': 1,
'flowtype/no-mixed': 2, 'flowtype/no-mixed': 2,
'flowtype/no-primitive-constructor-types': 2, 'flowtype/no-primitive-constructor-types': 2,
@ -39,8 +37,4 @@ module.exports = {
onlyFilesWithFlowAnnotation: false, onlyFilesWithFlowAnnotation: false,
}, },
}, },
globals: {
fetch: false,
Headers: false,
},
}; };

16
.idea/runConfigurations/Expo.xml Normal file
View file

@ -0,0 +1,16 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="Expo" type="ReactNative" factoryName="React Native">
<node-interpreter value="project" />
<react-native value="$USER_HOME$/.nvm/versions/node/v12.4.0/lib/node_modules/react-native-cli" />
<platform value="ANDROID" />
<envs />
<only-packager />
<build-and-launch value="false" />
<browser value="98ca6316-2f89-46d9-a9e5-fa9e2b0625b3" />
<debug-host value="127.0.0.1" />
<debug-port value="19001" />
<method v="2">
<option name="ReactNativePackager" enabled="true" />
</method>
</configuration>
</component>

367
App.js
View file

@ -1,211 +1,210 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {LogBox, Platform, SafeAreaView, View} from 'react-native'; import {LogBox, Platform, SafeAreaView, StatusBar, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {Provider as PaperProvider} from 'react-native-paper';
import {setSafeBounceHeight} from 'react-navigation-collapsible';
import SplashScreen from 'react-native-splash-screen';
import {OverflowMenuProvider} from 'react-navigation-header-buttons';
import LocaleManager from './src/managers/LocaleManager'; import LocaleManager from './src/managers/LocaleManager';
import AsyncStorageManager from './src/managers/AsyncStorageManager'; import AsyncStorageManager from "./src/managers/AsyncStorageManager";
import CustomIntroSlider from './src/components/Overrides/CustomIntroSlider'; import CustomIntroSlider from "./src/components/Overrides/CustomIntroSlider";
import type {CustomThemeType} from './src/managers/ThemeManager'; import type {CustomTheme} from "./src/managers/ThemeManager";
import ThemeManager from './src/managers/ThemeManager'; import ThemeManager from './src/managers/ThemeManager';
import {NavigationContainer} from '@react-navigation/native';
import MainNavigator from './src/navigation/MainNavigator'; import MainNavigator from './src/navigation/MainNavigator';
import AprilFoolsManager from './src/managers/AprilFoolsManager'; import {Provider as PaperProvider} from 'react-native-paper';
import Update from './src/constants/Update'; import AprilFoolsManager from "./src/managers/AprilFoolsManager";
import ConnectionManager from './src/managers/ConnectionManager'; import Update from "./src/constants/Update";
import type {ParsedUrlDataType} from './src/utils/URLHandler'; import ConnectionManager from "./src/managers/ConnectionManager";
import URLHandler from './src/utils/URLHandler'; import URLHandler from "./src/utils/URLHandler";
import {setupStatusBar} from './src/utils/Utils'; import {setSafeBounceHeight} from "react-navigation-collapsible";
import SplashScreen from 'react-native-splash-screen'
import {OverflowMenuProvider} from "react-navigation-header-buttons";
// Native optimizations https://reactnavigation.org/docs/react-native-screens // Native optimizations https://reactnavigation.org/docs/react-native-screens
// Crashes app when navigating away from webview on android 9+ // Crashes app when navigating away from webview on android 9+
// enableScreens(true); // enableScreens(true);
LogBox.ignoreLogs([
// collapsible headers cause this warning, just ignore as it is not an issue LogBox.ignoreLogs([ // collapsible headers cause this warning, just ignore as it is not an issue
'Non-serializable values were found in the navigation state', 'Non-serializable values were found in the navigation state',
'Cannot update a component from inside the function body of a different component', 'Cannot update a component from inside the function body of a different component',
]); ]);
type StateType = { type Props = {};
isLoading: boolean,
showIntro: boolean, type State = {
showUpdate: boolean, isLoading: boolean,
showAprilFools: boolean, showIntro: boolean,
currentTheme: CustomThemeType | null, showUpdate: boolean,
showAprilFools: boolean,
currentTheme: CustomTheme | null,
}; };
export default class App extends React.Component<null, StateType> { export default class App extends React.Component<Props, State> {
navigatorRef: {current: null | NavigationContainer};
defaultHomeRoute: string | null; state = {
isLoading: true,
defaultHomeData: {[key: string]: string}; showIntro: true,
showUpdate: true,
urlHandler: URLHandler; showAprilFools: false,
currentTheme: null,
constructor() {
super();
this.state = {
isLoading: true,
showIntro: true,
showUpdate: true,
showAprilFools: false,
currentTheme: null,
}; };
LocaleManager.initTranslations();
this.navigatorRef = React.createRef();
this.defaultHomeRoute = null;
this.defaultHomeData = {};
this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
this.urlHandler.listen();
setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
this.loadAssetsAsync().finally(() => {
this.onLoadFinished();
});
}
/** navigatorRef: { current: null | NavigationContainer };
* The app has been started by an url, and it has been parsed.
* Set a new default start route based on the data parsed.
*
* @param parsedData The data parsed from the url
*/
onInitialURLParsed = (parsedData: ParsedUrlDataType) => {
this.defaultHomeRoute = parsedData.route;
this.defaultHomeData = parsedData.data;
};
/** defaultHomeRoute: string | null;
* An url has been opened and parsed while the app was active. defaultHomeData: { [key: string]: any }
* Redirect the user to the screen according to parsed data.
* createDrawerNavigator: () => React.Node;
* @param parsedData The data parsed from the url
*/ urlHandler: URLHandler;
onDetectURL = (parsedData: ParsedUrlDataType) => {
// Navigate to nested navigator and pass data to the index screen constructor() {
const nav = this.navigatorRef.current; super();
if (nav != null) { LocaleManager.initTranslations();
nav.navigate('home', { this.navigatorRef = React.createRef();
screen: 'index', this.defaultHomeRoute = null;
params: {nextScreen: parsedData.route, data: parsedData.data}, this.defaultHomeData = {};
}); this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
this.urlHandler.listen();
setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 20);
this.loadAssetsAsync().then(() => {
this.onLoadFinished();
});
} }
};
/** /**
* Updates the current theme * The app has been started by an url, and it has been parsed.
*/ * Set a new default start route based on the data parsed.
onUpdateTheme = () => { *
this.setState({ * @param parsedData The data parsed from the url
currentTheme: ThemeManager.getCurrentTheme(), */
}); onInitialURLParsed = (parsedData: { route: string, data: { [key: string]: any } }) => {
setupStatusBar(); this.defaultHomeRoute = parsedData.route;
}; this.defaultHomeData = parsedData.data;
};
/** /**
* Callback when user ends the intro. Save in preferences to avoid showing back the introSlides * An url has been opened and parsed while the app was active.
*/ * Redirect the user to the screen according to parsed data.
onIntroDone = () => { *
this.setState({ * @param parsedData The data parsed from the url
showIntro: false, */
showUpdate: false, onDetectURL = (parsedData: { route: string, data: { [key: string]: any } }) => {
showAprilFools: false, // Navigate to nested navigator and pass data to the index screen
}); if (this.navigatorRef.current != null) {
AsyncStorageManager.set( this.navigatorRef.current.navigate('home', {
AsyncStorageManager.PREFERENCES.showIntro.key, screen: 'index',
false, params: {nextScreen: parsedData.route, data: parsedData.data}
); });
AsyncStorageManager.set( }
AsyncStorageManager.PREFERENCES.updateNumber.key, };
Update.number,
);
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key,
false,
);
};
/** /**
* Async loading is done, finish processing startup data * Updates the current theme
*/ */
onLoadFinished() { onUpdateTheme = () => {
// Only show intro if this is the first time starting the app this.setState({
ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme); currentTheme: ThemeManager.getCurrentTheme()
// Status bar goes dark if set too fast on ios });
if (Platform.OS === 'ios') setTimeout(setupStatusBar, 1000); this.setupStatusBar();
else setupStatusBar(); };
this.setState({ /**
isLoading: false, * Updates status bar content color if on iOS only,
currentTheme: ThemeManager.getCurrentTheme(), * as the android status bar is always set to black.
showIntro: AsyncStorageManager.getBool( */
AsyncStorageManager.PREFERENCES.showIntro.key, setupStatusBar() {
), if (ThemeManager.getNightMode()) {
showUpdate: StatusBar.setBarStyle('light-content', true);
AsyncStorageManager.getNumber( } else {
AsyncStorageManager.PREFERENCES.updateNumber.key, StatusBar.setBarStyle('dark-content', true);
) !== Update.number, }
showAprilFools: if (Platform.OS === "android")
AprilFoolsManager.getInstance().isAprilFoolsEnabled() && StatusBar.setBackgroundColor(ThemeManager.getCurrentTheme().colors.surface, true);
AsyncStorageManager.getBool(
AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key,
),
});
SplashScreen.hide();
}
/**
* Loads every async data
*
* @returns {Promise<void>}
*/
loadAssetsAsync = async () => {
await AsyncStorageManager.getInstance().loadPreferences();
await ConnectionManager.getInstance().recoverLogin();
};
/**
* Renders the app based on loading state
*/
render(): React.Node {
const {state} = this;
if (state.isLoading) {
return null;
} }
if (state.showIntro || state.showUpdate || state.showAprilFools) {
return ( /**
<CustomIntroSlider * Callback when user ends the intro. Save in preferences to avoid showing back the introSlides
onDone={this.onIntroDone} */
isUpdate={state.showUpdate && !state.showIntro} onIntroDone = () => {
isAprilFools={state.showAprilFools && !state.showIntro} 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);
};
/**
* Loads every async data
*
* @returns {Promise<void>}
*/
loadAssetsAsync = async () => {
await AsyncStorageManager.getInstance().loadPreferences();
try {
await ConnectionManager.getInstance().recoverLogin();
} catch (e) {
}
}
/**
* Async loading is done, finish processing startup data
*/
onLoadFinished() {
// Only show intro if this is the first time starting the app
this.createDrawerNavigator = () => <MainNavigator
defaultHomeRoute={this.defaultHomeRoute}
defaultHomeData={this.defaultHomeData}
/>;
ThemeManager.getInstance().setUpdateThemeCallback(this.onUpdateTheme);
// Status bar goes dark if set too fast on ios
if (Platform.OS === 'ios')
setTimeout(this.setupStatusBar, 1000);
else
this.setupStatusBar();
this.setState({
isLoading: false,
currentTheme: ThemeManager.getCurrentTheme(),
showIntro: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.showIntro.key),
showUpdate: AsyncStorageManager.getNumber(AsyncStorageManager.PREFERENCES.updateNumber.key)
!== Update.number,
showAprilFools: AprilFoolsManager.getInstance().isAprilFoolsEnabled()
&& AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.showAprilFoolsStart.key),
});
SplashScreen.hide();
}
/**
* Renders the app based on loading state
*/
render() {
if (this.state.isLoading) {
return null;
} else if (this.state.showIntro || this.state.showUpdate || this.state.showAprilFools) {
return <CustomIntroSlider
onDone={this.onIntroDone}
isUpdate={this.state.showUpdate && !this.state.showIntro}
isAprilFools={this.state.showAprilFools && !this.state.showIntro}
/>;
} else {
return (
<PaperProvider theme={this.state.currentTheme}>
<OverflowMenuProvider>
<View style={{backgroundColor: ThemeManager.getCurrentTheme().colors.background, flex: 1}}>
<SafeAreaView style={{flex: 1}}>
<NavigationContainer theme={this.state.currentTheme} ref={this.navigatorRef}>
<MainNavigator
defaultHomeRoute={this.defaultHomeRoute}
defaultHomeData={this.defaultHomeData}
/>
</NavigationContainer>
</SafeAreaView>
</View>
</OverflowMenuProvider>
</PaperProvider>
);
}
} }
return (
<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}
/>
</NavigationContainer>
</SafeAreaView>
</View>
</OverflowMenuProvider>
</PaperProvider>
);
}
} }

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

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

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

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

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

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

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

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

45
__tests__/utils/WebData.js Normal file
View file

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

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

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

4
android/app/build.gradle
View file

@ -136,8 +136,8 @@ android {
applicationId 'fr.amicaleinsat.application' applicationId 'fr.amicaleinsat.application'
minSdkVersion rootProject.ext.minSdkVersion minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 34 versionCode 32
versionName "4.0.1" versionName "3.1.4"
missingDimensionStrategy 'react-native-camera', 'general' missingDimensionStrategy 'react-native-camera', 'general'
} }
splits { splits {

2
babel.config.js
View file

@ -1,3 +1,3 @@
module.exports = { module.exports = {
presets: ['module:metro-react-native-babel-preset', '@babel/preset-flow'], presets: ['module:metro-react-native-babel-preset'],
}; };

1
index.js
View file

@ -6,5 +6,4 @@ import {AppRegistry} from 'react-native';
import App from './App'; 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); AppRegistry.registerComponent(appName, () => App);

17
metro.config.js
View file

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

378
src/components/Amicale/AuthenticatedScreen.js
View file

@ -1,205 +1,219 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {StackNavigationProp} from '@react-navigation/stack'; import ConnectionManager from "../../managers/ConnectionManager";
import ConnectionManager from '../../managers/ConnectionManager'; import {ERROR_TYPE} from "../../utils/WebData";
import type {ApiGenericDataType} from '../../utils/WebData'; import ErrorView from "../Screens/ErrorView";
import {ERROR_TYPE} from '../../utils/WebData'; import BasicLoadingScreen from "../Screens/BasicLoadingScreen";
import ErrorView from '../Screens/ErrorView'; import {StackNavigationProp} from "@react-navigation/stack";
import BasicLoadingScreen from '../Screens/BasicLoadingScreen';
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
requests: Array<{ requests: Array<{
link: string, link: string,
params: {...}, params: Object,
mandatory: boolean, mandatory: boolean
}>, }>,
renderFunction: (Array<ApiGenericDataType | null>) => React.Node, renderFunction: (Array<{ [key: string]: any } | null>) => React.Node,
errorViewOverride?: Array<{ errorViewOverride?: Array<{
errorCode: number, errorCode: number,
message: string, message: string,
icon: string, icon: string,
showRetryButton: boolean, showRetryButton: boolean
}> | null, }>,
}; }
type StateType = { type State = {
loading: boolean, loading: boolean,
}; }
class AuthenticatedScreen extends React.Component<PropsType, StateType> { class AuthenticatedScreen extends React.Component<Props, State> {
static defaultProps = {
errorViewOverride: null,
};
currentUserToken: string | null; state = {
loading: true,
connectionManager: ConnectionManager;
errors: Array<number>;
fetchedData: Array<ApiGenericDataType | null>;
constructor(props: PropsType) {
super(props);
this.state = {
loading: true,
}; };
this.connectionManager = ConnectionManager.getInstance();
props.navigation.addListener('focus', this.onScreenFocus);
this.fetchedData = new Array(props.requests.length);
this.errors = new Array(props.requests.length);
}
/** currentUserToken: string | null;
* Refreshes screen if user changed connectionManager: ConnectionManager;
*/ errors: Array<number>;
onScreenFocus = () => { fetchedData: Array<{ [key: string]: any } | null>;
if (this.currentUserToken !== this.connectionManager.getToken()) {
this.currentUserToken = this.connectionManager.getToken(); constructor(props: Object) {
this.fetchData(); super(props);
this.connectionManager = ConnectionManager.getInstance();
this.props.navigation.addListener('focus', this.onScreenFocus);
this.fetchedData = new Array(this.props.requests.length);
this.errors = new Array(this.props.requests.length);
} }
};
/** /**
* Callback used when a request finishes, successfully or not. * Refreshes screen if user changed
* Saves data and error code. */
* If the token is invalid, logout the user and open the login screen. onScreenFocus = () => {
* If the last request was received, stop the loading screen. if (this.currentUserToken !== this.connectionManager.getToken()) {
* this.currentUserToken = this.connectionManager.getToken();
* @param data The data fetched from the server this.fetchData();
* @param index The index for the data
* @param error The error code received
*/
onRequestFinished(
data: ApiGenericDataType | 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(): React.Node {
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;
} }
} };
/**
* 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 = () => {
if (!this.state.loading)
this.setState({loading: true});
if (this.connectionManager.isLoggedIn()) {
for (let i = 0; i < this.props.requests.length; i++) {
this.connectionManager.authenticatedRequest(
this.props.requests[i].link,
this.props.requests[i].params)
.then((data) => {
this.onRequestFinished(data, i, -1);
})
.catch((error) => {
this.onRequestFinished(null, i, error);
});
}
} else {
for (let i = 0; i < this.props.requests.length; i++) {
this.onRequestFinished(null, i, ERROR_TYPE.BAD_TOKEN);
}
}
};
/**
* 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: { [key: string]: any } | null, index: number, error: number) {
if (index >= 0 && index < this.props.requests.length) {
this.fetchedData[index] = data;
this.errors[index] = error;
}
if (error === ERROR_TYPE.BAD_TOKEN) // Token expired, logout user
this.connectionManager.disconnect();
if (this.allRequestsFinished())
this.setState({loading: false});
} }
if (shouldOverride && override != null) { /**
return ( * Checks if all requests finished processing
<ErrorView *
icon={override.icon} * @return {boolean} True if all finished
message={override.message} */
showRetryButton={override.showRetryButton} allRequestsFinished() {
/> let finished = true;
); for (let i = 0; i < this.fetchedData.length; i++) {
if (this.fetchedData[i] === undefined) {
finished = false;
break;
}
}
return finished;
} }
return <ErrorView errorCode={errorCode} onRefresh={this.fetchData} />;
}
/** /**
* Fetches the data from the server. * Checks if all requests have finished successfully.
* * This will return false only if a mandatory request failed.
* If the user is not logged in errorCode is set to BAD_TOKEN and all requests fail. * All non-mandatory requests can fail without impacting the return value.
* *
* If the user is logged in, send all requests. * @return {boolean} True if all finished successfully
*/ */
fetchData = () => { allRequestsValid() {
const {state, props} = this; let valid = true;
if (!state.loading) this.setState({loading: true}); for (let i = 0; i < this.fetchedData.length; i++) {
if (this.fetchedData[i] === null && this.props.requests[i].mandatory) {
if (this.connectionManager.isLoggedIn()) { valid = false;
for (let i = 0; i < props.requests.length; i += 1) { break;
this.connectionManager }
.authenticatedRequest( }
props.requests[i].link, return valid;
props.requests[i].params,
)
.then((response: ApiGenericDataType): 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 * Gets the error to render.
* * Non-mandatory requests are ignored.
* @return {boolean} True if all finished *
*/ *
allRequestsFinished(): boolean { * @return {number} The error code or ERROR_TYPE.SUCCESS if no error was found
let finished = true; */
this.errors.forEach((error: number | null) => { getError() {
if (error == null) finished = false; for (let i = 0; i < this.errors.length; i++) {
}); if (this.errors[i] !== 0 && this.props.requests[i].mandatory) {
return finished; return this.errors[i];
} }
}
return ERROR_TYPE.SUCCESS;
}
/** /**
* Reloads the data, to be called using ref by parent components * Gets the error view to display in case of error
*/ *
reload() { * @return {*}
this.fetchData(); */
} getErrorRender() {
const errorCode = this.getError();
let shouldOverride = false;
let override = null;
const overrideList = this.props.errorViewOverride;
if (overrideList != null) {
for (let i = 0; i < overrideList.length; i++) {
if (overrideList[i].errorCode === errorCode) {
shouldOverride = true;
override = overrideList[i];
break;
}
}
}
if (shouldOverride && override != null) {
return (
<ErrorView
{...this.props}
icon={override.icon}
message={override.message}
showRetryButton={override.showRetryButton}
/>
);
} else {
return (
<ErrorView
{...this.props}
errorCode={errorCode}
onRefresh={this.fetchData}
/>
);
}
render(): React.Node { }
const {state, props} = this;
if (state.loading) return <BasicLoadingScreen />; /**
if (this.getError() === ERROR_TYPE.SUCCESS) * Reloads the data, to be called using ref by parent components
return props.renderFunction(this.fetchedData); */
return this.getErrorRender(); reload() {
} this.fetchData();
}
render() {
return (
this.state.loading
? <BasicLoadingScreen/>
: (this.allRequestsValid()
? this.props.renderFunction(this.fetchedData)
: this.getErrorRender())
);
}
} }
export default AuthenticatedScreen; export default AuthenticatedScreen;

71
src/components/Amicale/LogoutDialog.js
View file

@ -2,46 +2,45 @@
import * as React from 'react'; import * as React from 'react';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import {StackNavigationProp} from '@react-navigation/stack'; import LoadingConfirmDialog from "../Dialogs/LoadingConfirmDialog";
import LoadingConfirmDialog from '../Dialogs/LoadingConfirmDialog'; import ConnectionManager from "../../managers/ConnectionManager";
import ConnectionManager from '../../managers/ConnectionManager'; import {StackNavigationProp} from "@react-navigation/stack";
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
visible: boolean, visible: boolean,
onDismiss: () => void, onDismiss: () => void,
}; }
class LogoutDialog extends React.PureComponent<PropsType> { class LogoutDialog extends React.PureComponent<Props> {
onClickAccept = async (): Promise<void> => {
const {props} = this; onClickAccept = async () => {
return new Promise((resolve: () => void) => { return new Promise((resolve) => {
ConnectionManager.getInstance() ConnectionManager.getInstance().disconnect()
.disconnect() .then(() => {
.then(() => { this.props.navigation.reset({
props.navigation.reset({ index: 0,
index: 0, routes: [{name: 'main'}],
routes: [{name: 'main'}], });
}); this.props.onDismiss();
props.onDismiss(); resolve();
resolve(); });
}); });
}); };
};
render(): React.Node { render() {
const {props} = this; return (
return ( <LoadingConfirmDialog
<LoadingConfirmDialog {...this.props}
visible={props.visible} visible={this.props.visible}
onDismiss={props.onDismiss} onDismiss={this.props.onDismiss}
onAccept={this.onClickAccept} onAccept={this.onClickAccept}
title={i18n.t('dialog.disconnect.title')} title={i18n.t("dialog.disconnect.title")}
titleLoading={i18n.t('dialog.disconnect.titleLoading')} titleLoading={i18n.t("dialog.disconnect.titleLoading")}
message={i18n.t('dialog.disconnect.message')} message={i18n.t("dialog.disconnect.message")}
/> />
); );
} }
} }
export default LogoutDialog; export default LogoutDialog;

54
src/components/Amicale/Vote/VoteNotAvailable.js
View file

@ -2,38 +2,36 @@
import * as React from 'react'; import * as React from 'react';
import {View} from 'react-native'; import {View} from 'react-native';
import {Headline, withTheme} from 'react-native-paper'; import {Headline, withTheme} from "react-native-paper";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import type {CustomThemeType} from '../../../managers/ThemeManager'; import type {CustomTheme} from "../../../managers/ThemeManager";
type PropsType = { type Props = {
theme: CustomThemeType, theme: CustomTheme
}; }
class VoteNotAvailable extends React.Component<PropsType> { class VoteNotAvailable extends React.Component<Props> {
shouldComponentUpdate(): boolean {
return false;
}
render(): React.Node { shouldComponentUpdate() {
const {props} = this; return false;
return ( }
<View
style={{ render() {
width: '100%', return (
marginTop: 10, <View style={{
marginBottom: 10, width: "100%",
}}> marginTop: 10,
<Headline marginBottom: 10,
style={{ }}>
color: props.theme.colors.textDisabled, <Headline
textAlign: 'center', style={{
}}> color: this.props.theme.colors.textDisabled,
{i18n.t('screens.vote.noVote')} textAlign: "center",
</Headline> }}
</View> >{i18n.t("screens.vote.noVote")}</Headline>
); </View>
} );
}
} }
export default withTheme(VoteNotAvailable); export default withTheme(VoteNotAvailable);

232
src/components/Amicale/Vote/VoteResults.js
View file

@ -1,134 +1,116 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { import {Avatar, Card, List, ProgressBar, Subheading, withTheme} from "react-native-paper";
Avatar, import {FlatList, StyleSheet} from "react-native";
Card,
List,
ProgressBar,
Subheading,
withTheme,
} from 'react-native-paper';
import {FlatList, StyleSheet} from 'react-native';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen'; import type {team} from "../../../screens/Amicale/VoteScreen";
import type {CustomThemeType} from '../../../managers/ThemeManager'; import type {CustomTheme} from "../../../managers/ThemeManager";
type PropsType = {
teams: Array<VoteTeamType>,
dateEnd: string,
theme: CustomThemeType,
};
const styles = StyleSheet.create({ type Props = {
card: { teams: Array<team>,
margin: 10, dateEnd: string,
}, theme: CustomTheme,
icon: {
backgroundColor: 'transparent',
},
});
class VoteResults extends React.Component<PropsType> {
totalVotes: number;
winnerIds: Array<number>;
constructor(props: PropsType) {
super();
props.teams.sort(this.sortByVotes);
this.getTotalVotes(props.teams);
this.getWinnerIds(props.teams);
}
shouldComponentUpdate(): boolean {
return false;
}
getTotalVotes(teams: Array<VoteTeamType>) {
this.totalVotes = 0;
for (let i = 0; i < teams.length; i += 1) {
this.totalVotes += teams[i].votes;
}
}
getWinnerIds(teams: Array<VoteTeamType>) {
const max = teams[0].votes;
this.winnerIds = [];
for (let i = 0; i < teams.length; i += 1) {
if (teams[i].votes === max) this.winnerIds.push(teams[i].id);
else break;
}
}
sortByVotes = (a: VoteTeamType, b: VoteTeamType): number => b.votes - a.votes;
voteKeyExtractor = (item: VoteTeamType): string => item.id.toString();
resultRenderItem = ({item}: {item: VoteTeamType}): React.Node => {
const isWinner = this.winnerIds.indexOf(item.id) !== -1;
const isDraw = this.winnerIds.length > 1;
const {props} = this;
return (
<Card
style={{
marginTop: 10,
elevation: isWinner ? 5 : 3,
}}>
<List.Item
title={item.name}
description={`${item.votes} ${i18n.t('screens.vote.results.votes')}`}
left={({size}: {size: number}): React.Node =>
isWinner ? (
<List.Icon
size={size}
icon={isDraw ? 'trophy-outline' : 'trophy'}
color={props.theme.colors.primary}
/>
) : null
}
titleStyle={{
color: isWinner
? props.theme.colors.primary
: props.theme.colors.text,
}}
style={{padding: 0}}
/>
<ProgressBar
progress={item.votes / this.totalVotes}
color={props.theme.colors.primary}
/>
</Card>
);
};
render(): React.Node {
const {props} = this;
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.vote.results.title')}
subtitle={`${i18n.t('screens.vote.results.subtitle')} ${
props.dateEnd
}`}
left={({size}: {size: number}): React.Node => (
<Avatar.Icon size={size} icon="podium-gold" />
)}
/>
<Card.Content>
<Subheading>{`${i18n.t('screens.vote.results.totalVotes')} ${
this.totalVotes
}`}</Subheading>
{/* $FlowFixMe */}
<FlatList
data={props.teams}
keyExtractor={this.voteKeyExtractor}
renderItem={this.resultRenderItem}
/>
</Card.Content>
</Card>
);
}
} }
class VoteResults extends React.Component<Props> {
totalVotes: number;
winnerIds: Array<number>;
constructor(props) {
super();
props.teams.sort(this.sortByVotes);
this.getTotalVotes(props.teams);
this.getWinnerIds(props.teams);
}
shouldComponentUpdate() {
return false;
}
sortByVotes = (a: team, b: team) => b.votes - a.votes;
getTotalVotes(teams: Array<team>) {
this.totalVotes = 0;
for (let i = 0; i < teams.length; i++) {
this.totalVotes += teams[i].votes;
}
}
getWinnerIds(teams: Array<team>) {
let max = teams[0].votes;
this.winnerIds = [];
for (let i = 0; i < teams.length; i++) {
if (teams[i].votes === max)
this.winnerIds.push(teams[i].id);
else
break;
}
}
voteKeyExtractor = (item: team) => item.id.toString();
resultRenderItem = ({item}: { item: team }) => {
const isWinner = this.winnerIds.indexOf(item.id) !== -1;
const isDraw = this.winnerIds.length > 1;
const colors = this.props.theme.colors;
return (
<Card style={{
marginTop: 10,
elevation: isWinner ? 5 : 3,
}}>
<List.Item
title={item.name}
description={item.votes + ' ' + i18n.t('screens.vote.results.votes')}
left={props => isWinner
? <List.Icon {...props} icon={isDraw ? "trophy-outline" : "trophy"} color={colors.primary}/>
: null}
titleStyle={{
color: isWinner
? colors.primary
: colors.text
}}
style={{padding: 0}}
/>
<ProgressBar progress={item.votes / this.totalVotes} color={colors.primary}/>
</Card>
);
};
render() {
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.vote.results.title')}
subtitle={i18n.t('screens.vote.results.subtitle') + ' ' + this.props.dateEnd}
left={(props) => <Avatar.Icon
{...props}
icon={"podium-gold"}
/>}
/>
<Card.Content>
<Subheading>{i18n.t('screens.vote.results.totalVotes') + ' ' + this.totalVotes}</Subheading>
{/*$FlowFixMe*/}
<FlatList
data={this.props.teams}
keyExtractor={this.voteKeyExtractor}
renderItem={this.resultRenderItem}
/>
</Card.Content>
</Card>
);
}
}
const styles = StyleSheet.create({
card: {
margin: 10,
},
icon: {
backgroundColor: 'transparent'
},
});
export default withTheme(VoteResults); export default withTheme(VoteResults);

265
src/components/Amicale/Vote/VoteSelect.js
View file

@ -1,146 +1,137 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Avatar, Button, Card, RadioButton} from 'react-native-paper'; import {Avatar, Button, Card, RadioButton} from "react-native-paper";
import {FlatList, StyleSheet, View} from 'react-native'; import {FlatList, StyleSheet, View} from "react-native";
import ConnectionManager from "../../../managers/ConnectionManager";
import LoadingConfirmDialog from "../../Dialogs/LoadingConfirmDialog";
import ErrorDialog from "../../Dialogs/ErrorDialog";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import ConnectionManager from '../../../managers/ConnectionManager'; import type {team} from "../../../screens/Amicale/VoteScreen";
import LoadingConfirmDialog from '../../Dialogs/LoadingConfirmDialog';
import ErrorDialog from '../../Dialogs/ErrorDialog';
import type {VoteTeamType} from '../../../screens/Amicale/VoteScreen';
type PropsType = { type Props = {
teams: Array<VoteTeamType>, teams: Array<team>,
onVoteSuccess: () => void, onVoteSuccess: () => void,
onVoteError: () => void, onVoteError: () => void,
}; }
type StateType = { type State = {
selectedTeam: string, selectedTeam: string,
voteDialogVisible: boolean, voteDialogVisible: boolean,
errorDialogVisible: boolean, errorDialogVisible: boolean,
currentError: number, currentError: number,
}; }
export default class VoteSelect extends React.PureComponent<Props, State> {
state = {
selectedTeam: "none",
voteDialogVisible: false,
errorDialogVisible: false,
currentError: 0,
};
onVoteSelectionChange = (team: string) => this.setState({selectedTeam: team});
voteKeyExtractor = (item: team) => item.id.toString();
voteRenderItem = ({item}: { item: team }) => <RadioButton.Item label={item.name} value={item.id.toString()}/>;
showVoteDialog = () => this.setState({voteDialogVisible: true});
onVoteDialogDismiss = () => this.setState({voteDialogVisible: false,});
onVoteDialogAccept = async () => {
return new Promise((resolve) => {
ConnectionManager.getInstance().authenticatedRequest(
"elections/vote",
{"team": parseInt(this.state.selectedTeam)})
.then(() => {
this.onVoteDialogDismiss();
this.props.onVoteSuccess();
resolve();
})
.catch((error: number) => {
this.onVoteDialogDismiss();
this.showErrorDialog(error);
resolve();
});
});
};
showErrorDialog = (error: number) => this.setState({
errorDialogVisible: true,
currentError: error,
});
onErrorDialogDismiss = () => {
this.setState({errorDialogVisible: false});
this.props.onVoteError();
};
render() {
return (
<View>
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.vote.select.title')}
subtitle={i18n.t('screens.vote.select.subtitle')}
left={(props) =>
<Avatar.Icon
{...props}
icon={"alert-decagram"}
/>}
/>
<Card.Content>
<RadioButton.Group
onValueChange={this.onVoteSelectionChange}
value={this.state.selectedTeam}
>
{/*$FlowFixMe*/}
<FlatList
data={this.props.teams}
keyExtractor={this.voteKeyExtractor}
extraData={this.state.selectedTeam}
renderItem={this.voteRenderItem}
/>
</RadioButton.Group>
</Card.Content>
<Card.Actions>
<Button
icon="send"
mode="contained"
onPress={this.showVoteDialog}
style={{marginLeft: 'auto'}}
disabled={this.state.selectedTeam === "none"}
>
{i18n.t('screens.vote.select.sendButton')}
</Button>
</Card.Actions>
</Card>
<LoadingConfirmDialog
visible={this.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')}
/>
<ErrorDialog
visible={this.state.errorDialogVisible}
onDismiss={this.onErrorDialogDismiss}
errorCode={this.state.currentError}
/>
</View>
);
}
}
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card: { card: {
margin: 10, margin: 10,
}, },
icon: { icon: {
backgroundColor: 'transparent', backgroundColor: 'transparent'
}, },
}); });
export default class VoteSelect extends React.PureComponent<
PropsType,
StateType,
> {
constructor() {
super();
this.state = {
selectedTeam: 'none',
voteDialogVisible: false,
errorDialogVisible: false,
currentError: 0,
};
}
onVoteSelectionChange = (teamName: string): void =>
this.setState({selectedTeam: teamName});
voteKeyExtractor = (item: VoteTeamType): string => item.id.toString();
voteRenderItem = ({item}: {item: VoteTeamType}): React.Node => (
<RadioButton.Item label={item.name} value={item.id.toString()} />
);
showVoteDialog = (): void => this.setState({voteDialogVisible: true});
onVoteDialogDismiss = (): void => this.setState({voteDialogVisible: false});
onVoteDialogAccept = async (): Promise<void> => {
return new Promise((resolve: () => void) => {
const {state} = this;
ConnectionManager.getInstance()
.authenticatedRequest('elections/vote', {
team: parseInt(state.selectedTeam, 10),
})
.then(() => {
this.onVoteDialogDismiss();
const {props} = this;
props.onVoteSuccess();
resolve();
})
.catch((error: number) => {
this.onVoteDialogDismiss();
this.showErrorDialog(error);
resolve();
});
});
};
showErrorDialog = (error: number): void =>
this.setState({
errorDialogVisible: true,
currentError: error,
});
onErrorDialogDismiss = () => {
this.setState({errorDialogVisible: false});
const {props} = this;
props.onVoteError();
};
render(): React.Node {
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={({size}: {size: number}): React.Node => (
<Avatar.Icon size={size} icon="alert-decagram" />
)}
/>
<Card.Content>
<RadioButton.Group
onValueChange={this.onVoteSelectionChange}
value={state.selectedTeam}>
{/* $FlowFixMe */}
<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')}
/>
<ErrorDialog
visible={state.errorDialogVisible}
onDismiss={this.onErrorDialogDismiss}
errorCode={state.currentError}
/>
</View>
);
}
}

74
src/components/Amicale/Vote/VoteTease.js
View file

@ -1,45 +1,45 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Avatar, Card, Paragraph} from 'react-native-paper'; import {Avatar, Card, Paragraph} from "react-native-paper";
import {StyleSheet} from 'react-native'; import {StyleSheet} from "react-native";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
type PropsType = { type Props = {
startDate: string, startDate: string,
}; }
export default class VoteTease extends React.Component<Props> {
shouldComponentUpdate() {
return false;
}
render() {
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.vote.tease.title')}
subtitle={i18n.t('screens.vote.tease.subtitle')}
left={props => <Avatar.Icon
{...props}
icon="vote"/>}
/>
<Card.Content>
<Paragraph>
{i18n.t('screens.vote.tease.message') + ' ' + this.props.startDate}
</Paragraph>
</Card.Content>
</Card>
);
}
}
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card: { card: {
margin: 10, margin: 10,
}, },
icon: { icon: {
backgroundColor: 'transparent', backgroundColor: 'transparent'
}, },
}); });
export default class VoteTease extends React.Component<PropsType> {
shouldComponentUpdate(): boolean {
return false;
}
render(): React.Node {
const {props} = this;
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t('screens.vote.tease.title')}
subtitle={i18n.t('screens.vote.tease.subtitle')}
left={({size}: {size: number}): React.Node => (
<Avatar.Icon size={size} icon="vote" />
)}
/>
<Card.Content>
<Paragraph>
{`${i18n.t('screens.vote.tease.message')} ${props.startDate}`}
</Paragraph>
</Card.Content>
</Card>
);
}
}

134
src/components/Amicale/Vote/VoteWait.js
View file

@ -1,78 +1,72 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { import {ActivityIndicator, Card, Paragraph, withTheme} from "react-native-paper";
ActivityIndicator, import {StyleSheet} from "react-native";
Card,
Paragraph,
withTheme,
} from 'react-native-paper';
import {StyleSheet} from 'react-native';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import type {CustomThemeType} from '../../../managers/ThemeManager'; import type {CustomTheme} from "../../../managers/ThemeManager";
type PropsType = { type Props = {
startDate: string | null, startDate: string | null,
justVoted: boolean, justVoted: boolean,
hasVoted: boolean, hasVoted: boolean,
isVoteRunning: boolean, isVoteRunning: boolean,
theme: CustomThemeType, theme: CustomTheme,
};
const styles = StyleSheet.create({
card: {
margin: 10,
},
icon: {
backgroundColor: 'transparent',
},
});
class VoteWait extends React.Component<PropsType> {
shouldComponentUpdate(): boolean {
return false;
}
render(): React.Node {
const {props} = this;
const {startDate} = props;
return (
<Card style={styles.card}>
<Card.Title
title={
props.isVoteRunning
? i18n.t('screens.vote.wait.titleSubmitted')
: i18n.t('screens.vote.wait.titleEnded')
}
subtitle={i18n.t('screens.vote.wait.subtitle')}
left={({size}: {size: number}): React.Node => (
<ActivityIndicator size={size} />
)}
/>
<Card.Content>
{props.justVoted ? (
<Paragraph style={{color: props.theme.colors.success}}>
{i18n.t('screens.vote.wait.messageSubmitted')}
</Paragraph>
) : null}
{props.hasVoted ? (
<Paragraph style={{color: props.theme.colors.success}}>
{i18n.t('screens.vote.wait.messageVoted')}
</Paragraph>
) : null}
{startDate != null ? (
<Paragraph>
{`${i18n.t('screens.vote.wait.messageDate')} ${startDate}`}
</Paragraph>
) : (
<Paragraph>
{i18n.t('screens.vote.wait.messageDateUndefined')}
</Paragraph>
)}
</Card.Content>
</Card>
);
}
} }
class VoteWait extends React.Component<Props> {
shouldComponentUpdate() {
return false;
}
render() {
const colors = this.props.theme.colors;
const startDate = this.props.startDate;
return (
<Card style={styles.card}>
<Card.Title
title={this.props.isVoteRunning
? i18n.t('screens.vote.wait.titleSubmitted')
: i18n.t('screens.vote.wait.titleEnded')}
subtitle={i18n.t('screens.vote.wait.subtitle')}
left={(props) => <ActivityIndicator {...props}/>}
/>
<Card.Content>
{
this.props.justVoted
? <Paragraph style={{color: colors.success}}>
{i18n.t('screens.vote.wait.messageSubmitted')}
</Paragraph>
: null
}
{
this.props.hasVoted
? <Paragraph style={{color: colors.success}}>
{i18n.t('screens.vote.wait.messageVoted')}
</Paragraph>
: null
}
{
startDate != null
? <Paragraph>
{i18n.t('screens.vote.wait.messageDate') + ' ' + startDate}
</Paragraph>
: <Paragraph>{i18n.t('screens.vote.wait.messageDateUndefined')}</Paragraph>
}
</Card.Content>
</Card>
);
}
}
const styles = StyleSheet.create({
card: {
margin: 10,
},
icon: {
backgroundColor: 'transparent'
},
});
export default withTheme(VoteWait); export default withTheme(VoteWait);

174
src/components/Animations/AnimatedAccordion.js
View file

@ -1,117 +1,101 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {View} from 'react-native'; import {View} from "react-native";
import {List, withTheme} from 'react-native-paper'; import {List, withTheme} from 'react-native-paper';
import Collapsible from 'react-native-collapsible'; import Collapsible from "react-native-collapsible";
import * as Animatable from 'react-native-animatable'; import * as Animatable from "react-native-animatable";
import type {CustomThemeType} from '../../managers/ThemeManager'; import type {CustomTheme} from "../../managers/ThemeManager";
type PropsType = { type Props = {
theme: CustomThemeType, theme: CustomTheme,
title: string, title: string,
subtitle?: string, subtitle?: string,
left?: () => React.Node, left?: (props: { [keys: string]: any }) => React.Node,
opened?: boolean, opened?: boolean,
unmountWhenCollapsed?: boolean, unmountWhenCollapsed: boolean,
children?: React.Node, children?: React.Node,
}; }
type StateType = { type State = {
expanded: boolean, expanded: boolean,
}; }
const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon); const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
class AnimatedAccordion extends React.Component<PropsType, StateType> { class AnimatedAccordion extends React.Component<Props, State> {
static defaultProps = {
subtitle: '',
left: null,
opened: null,
unmountWhenCollapsed: false,
children: null,
};
chevronRef: {current: null | AnimatedListIcon}; static defaultProps = {
unmountWhenCollapsed: false,
}
chevronRef: { current: null | AnimatedListIcon };
chevronIcon: string;
animStart: string;
animEnd: string;
chevronIcon: string; state = {
expanded: this.props.opened != null ? this.props.opened : false,
}
animStart: string; constructor(props) {
super(props);
this.chevronRef = React.createRef();
this.setupChevron();
}
animEnd: string; setupChevron() {
if (this.state.expanded) {
this.chevronIcon = "chevron-up";
this.animStart = "180deg";
this.animEnd = "0deg";
} else {
this.chevronIcon = "chevron-down";
this.animStart = "0deg";
this.animEnd = "180deg";
}
}
constructor(props: PropsType) { toggleAccordion = () => {
super(props); if (this.chevronRef.current != null) {
this.state = { this.chevronRef.current.transitionTo({rotate: this.state.expanded ? this.animStart : this.animEnd});
expanded: props.opened != null ? props.opened : false, this.setState({expanded: !this.state.expanded})
}
}; };
this.chevronRef = React.createRef();
this.setupChevron();
}
shouldComponentUpdate(nextProps: PropsType): boolean { shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
const {state, props} = this; if (nextProps.opened != null && nextProps.opened !== this.props.opened)
if (nextProps.opened != null && nextProps.opened !== props.opened) this.state.expanded = nextProps.opened;
state.expanded = nextProps.opened; return true;
return true;
}
setupChevron() {
const {expanded} = this.state;
if (expanded) {
this.chevronIcon = 'chevron-up';
this.animStart = '180deg';
this.animEnd = '0deg';
} else {
this.chevronIcon = 'chevron-down';
this.animStart = '0deg';
this.animEnd = '180deg';
} }
}
toggleAccordion = () => { render() {
const {expanded} = this.state; const colors = this.props.theme.colors;
if (this.chevronRef.current != null) { return (
this.chevronRef.current.transitionTo({ <View>
rotate: expanded ? this.animStart : this.animEnd, <List.Item
}); {...this.props}
this.setState((prevState: StateType): {expanded: boolean} => ({ title={this.props.title}
expanded: !prevState.expanded, subtitle={this.props.subtitle}
})); titleStyle={this.state.expanded ? {color: colors.primary} : undefined}
onPress={this.toggleAccordion}
right={(props) => <AnimatedListIcon
ref={this.chevronRef}
{...props}
icon={this.chevronIcon}
color={this.state.expanded ? colors.primary : undefined}
useNativeDriver
/>}
left={this.props.left}
/>
<Collapsible collapsed={!this.state.expanded}>
{!this.props.unmountWhenCollapsed || (this.props.unmountWhenCollapsed && this.state.expanded)
? this.props.children
: null}
</Collapsible>
</View>
);
} }
};
render(): React.Node {
const {props, state} = this;
const {colors} = props.theme;
return (
<View>
<List.Item
title={props.title}
subtitle={props.subtitle}
titleStyle={state.expanded ? {color: colors.primary} : null}
onPress={this.toggleAccordion}
right={({size}: {size: number}): React.Node => (
<AnimatedListIcon
ref={this.chevronRef}
size={size}
icon={this.chevronIcon}
color={state.expanded ? colors.primary : null}
useNativeDriver
style={{rotate: '0deg'}}
/>
)}
left={props.left}
/>
<Collapsible collapsed={!state.expanded}>
{!props.unmountWhenCollapsed ||
(props.unmountWhenCollapsed && state.expanded)
? props.children
: null}
</Collapsible>
</View>
);
}
} }
export default withTheme(AnimatedAccordion); export default withTheme(AnimatedAccordion);

329
src/components/Animations/AnimatedBottomBar.js
View file

@ -1,179 +1,170 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {StyleSheet, View} from 'react-native'; import {StyleSheet, View} from "react-native";
import {FAB, IconButton, Surface, withTheme} from 'react-native-paper'; import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
import AutoHideHandler from "../../utils/AutoHideHandler";
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import {StackNavigationProp} from '@react-navigation/stack'; import CustomTabBar from "../Tabbar/CustomTabBar";
import AutoHideHandler from '../../utils/AutoHideHandler'; import {StackNavigationProp} from "@react-navigation/stack";
import CustomTabBar from '../Tabbar/CustomTabBar'; import type {CustomTheme} from "../../managers/ThemeManager";
import type {CustomThemeType} from '../../managers/ThemeManager';
import type {OnScrollType} from '../../utils/AutoHideHandler';
const AnimatedFAB = Animatable.createAnimatableComponent(FAB); const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomThemeType, theme: CustomTheme,
onPress: (action: string, data?: string) => void, onPress: (action: string, data: any) => void,
seekAttention: boolean, 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};
hideHandler: AutoHideHandler;
displayModeIcons: {[key: string]: string};
constructor() {
super();
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) => {
if (this.ref.current != null) {
if (shouldHide) this.ref.current.fadeOutDown(500);
else this.ref.current.fadeInUp(500);
}
};
onScroll = (event: OnScrollType) => {
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(): React.Node {
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>
);
}
} }
type State = {
currentMode: string,
}
const DISPLAY_MODES = {
DAY: "agendaDay",
WEEK: "agendaWeek",
MONTH: "month",
}
class AnimatedBottomBar extends React.Component<Props, State> {
ref: { current: null | Animatable.View };
hideHandler: AutoHideHandler;
displayModeIcons: { [key: string]: string };
state = {
currentMode: DISPLAY_MODES.WEEK,
}
constructor() {
super();
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: Props, nextState: State) {
return (nextProps.seekAttention !== this.props.seekAttention)
|| (nextState.currentMode !== this.state.currentMode);
}
onHideChange = (shouldHide: boolean) => {
if (this.ref.current != null) {
if (shouldHide)
this.ref.current.fadeOutDown(500);
else
this.ref.current.fadeInUp(500);
}
}
onScroll = (event: SyntheticEvent<EventTarget>) => {
this.hideHandler.onScroll(event);
};
changeDisplayMode = () => {
let newMode;
switch (this.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;
}
this.setState({currentMode: newMode});
this.props.onPress("changeView", newMode);
};
render() {
const buttonColor = this.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={this.props.seekAttention ? "bounce" : undefined}
easing="ease-out"
iterationDelay={500}
iterationCount="infinite"
useNativeDriver
style={styles.fab}
icon="account-clock"
onPress={() => this.props.navigation.navigate('group-select')}
/>
</View>
<View style={{flexDirection: 'row'}}>
<IconButton
icon={this.displayModeIcons[this.state.currentMode]}
color={buttonColor}
onPress={this.changeDisplayMode}/>
<IconButton
icon="clock-in"
color={buttonColor}
style={{marginLeft: 5}}
onPress={() => this.props.onPress('today', undefined)}/>
</View>
<View style={{flexDirection: 'row'}}>
<IconButton
icon="chevron-left"
color={buttonColor}
onPress={() => this.props.onPress('prev', undefined)}/>
<IconButton
icon="chevron-right"
color={buttonColor}
style={{marginLeft: 5}}
onPress={() => this.props.onPress('next', undefined)}/>
</View>
</Surface>
</Animatable.View>
);
}
}
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%',
}
});
export default withTheme(AnimatedBottomBar); export default withTheme(AnimatedBottomBar);

103
src/components/Animations/AnimatedFAB.js
View file

@ -1,63 +1,66 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {StyleSheet} from 'react-native'; import {StyleSheet} from "react-native";
import {FAB} from 'react-native-paper'; import {FAB} from "react-native-paper";
import AutoHideHandler from "../../utils/AutoHideHandler";
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import AutoHideHandler from '../../utils/AutoHideHandler'; import CustomTabBar from "../Tabbar/CustomTabBar";
import CustomTabBar from '../Tabbar/CustomTabBar'; import {StackNavigationProp} from "@react-navigation/stack";
type PropsType = { type Props = {
icon: string, navigation: StackNavigationProp,
onPress: () => void, icon: string,
}; onPress: () => void,
}
const AnimatedFab = Animatable.createAnimatableComponent(FAB); const AnimatedFab = Animatable.createAnimatableComponent(FAB);
const styles = StyleSheet.create({ export default class AnimatedFAB extends React.Component<Props> {
fab: {
position: 'absolute',
margin: 16,
right: 0,
},
});
export default class AnimatedFAB extends React.Component<PropsType> { ref: { current: null | Animatable.View };
ref: {current: null | Animatable.View}; hideHandler: AutoHideHandler;
hideHandler: AutoHideHandler; constructor() {
super();
constructor() { this.ref = React.createRef();
super(); this.hideHandler = new AutoHideHandler(false);
this.ref = React.createRef(); this.hideHandler.addListener(this.onHideChange);
this.hideHandler = new AutoHideHandler(false);
this.hideHandler.addListener(this.onHideChange);
}
onScroll = (event: SyntheticEvent<EventTarget>) => {
this.hideHandler.onScroll(event);
};
onHideChange = (shouldHide: boolean) => {
if (this.ref.current != null) {
if (shouldHide) this.ref.current.bounceOutDown(1000);
else this.ref.current.bounceInUp(1000);
} }
};
render(): React.Node { onScroll = (event: SyntheticEvent<EventTarget>) => {
const {props} = this; this.hideHandler.onScroll(event);
return ( };
<AnimatedFab
ref={this.ref} onHideChange = (shouldHide: boolean) => {
useNativeDriver if (this.ref.current != null) {
icon={props.icon} if (shouldHide)
onPress={props.onPress} this.ref.current.bounceOutDown(1000);
style={{ else
...styles.fab, this.ref.current.bounceInUp(1000);
bottom: CustomTabBar.TAB_BAR_HEIGHT, }
}} }
/>
); render() {
} return (
<AnimatedFab
ref={this.ref}
useNativeDriver
icon={this.props.icon}
onPress={this.props.onPress}
style={{
...styles.fab,
bottom: CustomTabBar.TAB_BAR_HEIGHT
}}
/>
);
}
} }
const styles = StyleSheet.create({
fab: {
position: 'absolute',
margin: 16,
right: 0,
},
});

84
src/components/Collapsible/CollapsibleComponent.js
View file

@ -1,59 +1,51 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Collapsible} from 'react-navigation-collapsible'; import {withCollapsible} from "../../utils/withCollapsible";
import withCollapsible from '../../utils/withCollapsible'; import {Collapsible} from "react-navigation-collapsible";
import CustomTabBar from '../Tabbar/CustomTabBar'; import CustomTabBar from "../Tabbar/CustomTabBar";
export type CollapsibleComponentPropsType = { export type CollapsibleComponentProps = {
children?: React.Node, children?: React.Node,
hasTab?: boolean, hasTab?: boolean,
onScroll?: (event: SyntheticEvent<EventTarget>) => void, onScroll?: (event: SyntheticEvent<EventTarget>) => void,
}; };
type PropsType = { type Props = {
...CollapsibleComponentPropsType, ...CollapsibleComponentProps,
collapsibleStack: Collapsible, collapsibleStack: Collapsible,
// eslint-disable-next-line flowtype/no-weak-types component: any,
component: any, }
};
class CollapsibleComponent extends React.Component<PropsType> { class CollapsibleComponent extends React.Component<Props> {
static defaultProps = {
children: null,
hasTab: false,
onScroll: null,
};
onScroll = (event: SyntheticEvent<EventTarget>) => { static defaultProps = {
const {props} = this; hasTab: false,
if (props.onScroll) props.onScroll(event); }
};
render(): React.Node { onScroll = (event: SyntheticEvent<EventTarget>) => {
const {props} = this; if (this.props.onScroll)
const Comp = props.component; this.props.onScroll(event);
const { }
containerPaddingTop,
scrollIndicatorInsetTop,
onScrollWithListener,
} = props.collapsibleStack;
return ( render() {
<Comp const Comp = this.props.component;
// eslint-disable-next-line react/jsx-props-no-spreading const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
{...props} return (
onScroll={onScrollWithListener(this.onScroll)} <Comp
contentContainerStyle={{ {...this.props}
paddingTop: containerPaddingTop, onScroll={onScrollWithListener(this.onScroll)}
paddingBottom: props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0, contentContainerStyle={{
minHeight: '100%', paddingTop: containerPaddingTop,
}} paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}> minHeight: '100%'
{props.children} }}
</Comp> scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
); >
} {this.props.children}
</Comp>
);
}
} }
export default withCollapsible(CollapsibleComponent); export default withCollapsible(CollapsibleComponent);

36
src/components/Collapsible/CollapsibleFlatList.js
View file

@ -1,26 +1,26 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated} from 'react-native'; import {Animated} from "react-native";
import type {CollapsibleComponentPropsType} from './CollapsibleComponent'; import type {CollapsibleComponentProps} from "./CollapsibleComponent";
import CollapsibleComponent from './CollapsibleComponent'; import CollapsibleComponent from "./CollapsibleComponent";
type PropsType = { type Props = {
...CollapsibleComponentPropsType, ...CollapsibleComponentProps
}; }
// eslint-disable-next-line react/prefer-stateless-function class CollapsibleFlatList extends React.Component<Props> {
class CollapsibleFlatList extends React.Component<PropsType> {
render(): React.Node { render() {
const {props} = this; return (
return ( <CollapsibleComponent
<CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading {...this.props}
{...props} component={Animated.FlatList}
component={Animated.FlatList}> >
{props.children} {this.props.children}
</CollapsibleComponent> </CollapsibleComponent>
); );
} }
} }
export default CollapsibleFlatList; export default CollapsibleFlatList;

36
src/components/Collapsible/CollapsibleScrollView.js
View file

@ -1,26 +1,26 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated} from 'react-native'; import {Animated} from "react-native";
import type {CollapsibleComponentPropsType} from './CollapsibleComponent'; import type {CollapsibleComponentProps} from "./CollapsibleComponent";
import CollapsibleComponent from './CollapsibleComponent'; import CollapsibleComponent from "./CollapsibleComponent";
type PropsType = { type Props = {
...CollapsibleComponentPropsType, ...CollapsibleComponentProps
}; }
// eslint-disable-next-line react/prefer-stateless-function class CollapsibleScrollView extends React.Component<Props> {
class CollapsibleScrollView extends React.Component<PropsType> {
render(): React.Node { render() {
const {props} = this; return (
return ( <CollapsibleComponent
<CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading {...this.props}
{...props} component={Animated.ScrollView}
component={Animated.ScrollView}> >
{props.children} {this.props.children}
</CollapsibleComponent> </CollapsibleComponent>
); );
} }
} }
export default CollapsibleScrollView; export default CollapsibleScrollView;

36
src/components/Collapsible/CollapsibleSectionList.js
View file

@ -1,26 +1,26 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated} from 'react-native'; import {Animated} from "react-native";
import type {CollapsibleComponentPropsType} from './CollapsibleComponent'; import type {CollapsibleComponentProps} from "./CollapsibleComponent";
import CollapsibleComponent from './CollapsibleComponent'; import CollapsibleComponent from "./CollapsibleComponent";
type PropsType = { type Props = {
...CollapsibleComponentPropsType, ...CollapsibleComponentProps
}; }
// eslint-disable-next-line react/prefer-stateless-function class CollapsibleSectionList extends React.Component<Props> {
class CollapsibleSectionList extends React.Component<PropsType> {
render(): React.Node { render() {
const {props} = this; return (
return ( <CollapsibleComponent
<CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading {...this.props}
{...props} component={Animated.SectionList}
component={Animated.SectionList}> >
{props.children} {this.props.children}
</CollapsibleComponent> </CollapsibleComponent>
); );
} }
} }
export default CollapsibleSectionList; export default CollapsibleSectionList;

50
src/components/Dialogs/AlertDialog.js
View file

@ -2,32 +2,34 @@
import * as React from 'react'; 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 i18n from "i18n-js";
type PropsType = { type Props = {
visible: boolean, visible: boolean,
onDismiss: () => void, onDismiss: () => void,
title: string, title: string,
message: string, message: string,
}; }
class AlertDialog extends React.PureComponent<PropsType> { class AlertDialog extends React.PureComponent<Props> {
render(): React.Node {
const {props} = this; render() {
return ( return (
<Portal> <Portal>
<Dialog visible={props.visible} onDismiss={props.onDismiss}> <Dialog
<Dialog.Title>{props.title}</Dialog.Title> visible={this.props.visible}
<Dialog.Content> onDismiss={this.props.onDismiss}>
<Paragraph>{props.message}</Paragraph> <Dialog.Title>{this.props.title}</Dialog.Title>
</Dialog.Content> <Dialog.Content>
<Dialog.Actions> <Paragraph>{this.props.message}</Paragraph>
<Button onPress={props.onDismiss}>{i18n.t('dialog.ok')}</Button> </Dialog.Content>
</Dialog.Actions> <Dialog.Actions>
</Dialog> <Button onPress={this.props.onDismiss}>{i18n.t("dialog.ok")}</Button>
</Portal> </Dialog.Actions>
); </Dialog>
} </Portal>
);
}
} }
export default AlertDialog; export default AlertDialog;

111
src/components/Dialogs/ErrorDialog.js
View file

@ -1,71 +1,64 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import i18n from 'i18n-js'; import i18n from "i18n-js";
import {ERROR_TYPE} from '../../utils/WebData'; import {ERROR_TYPE} from "../../utils/WebData";
import AlertDialog from './AlertDialog'; import AlertDialog from "./AlertDialog";
type PropsType = { type Props = {
visible: boolean, visible: boolean,
onDismiss: () => void, onDismiss: () => void,
errorCode: number, errorCode: number,
}; }
class ErrorDialog extends React.PureComponent<PropsType> { class ErrorDialog extends React.PureComponent<Props> {
title: string;
message: string; title: string;
message: string;
generateMessage() { generateMessage() {
const {props} = this; this.title = i18n.t("errors.title");
this.title = i18n.t('errors.title'); switch (this.props.errorCode) {
switch (props.errorCode) { case ERROR_TYPE.BAD_CREDENTIALS:
case ERROR_TYPE.BAD_CREDENTIALS: this.message = i18n.t("errors.badCredentials");
this.message = i18n.t('errors.badCredentials'); break;
break; case ERROR_TYPE.BAD_TOKEN:
case ERROR_TYPE.BAD_TOKEN: this.message = i18n.t("errors.badToken");
this.message = i18n.t('errors.badToken'); break;
break; case ERROR_TYPE.NO_CONSENT:
case ERROR_TYPE.NO_CONSENT: this.message = i18n.t("errors.noConsent");
this.message = i18n.t('errors.noConsent'); break;
break; case ERROR_TYPE.TOKEN_SAVE:
case ERROR_TYPE.TOKEN_SAVE: this.message = i18n.t("errors.tokenSave");
this.message = i18n.t('errors.tokenSave'); break;
break; case ERROR_TYPE.TOKEN_RETRIEVE:
case ERROR_TYPE.TOKEN_RETRIEVE: this.message = i18n.t("errors.unknown");
this.message = i18n.t('errors.unknown'); break;
break; case ERROR_TYPE.BAD_INPUT:
case ERROR_TYPE.BAD_INPUT: this.message = i18n.t("errors.badInput");
this.message = i18n.t('errors.badInput'); break;
break; case ERROR_TYPE.FORBIDDEN:
case ERROR_TYPE.FORBIDDEN: this.message = i18n.t("errors.forbidden");
this.message = i18n.t('errors.forbidden'); break;
break; case ERROR_TYPE.CONNECTION_ERROR:
case ERROR_TYPE.CONNECTION_ERROR: this.message = i18n.t("errors.connectionError");
this.message = i18n.t('errors.connectionError'); break;
break; case ERROR_TYPE.SERVER_ERROR:
case ERROR_TYPE.SERVER_ERROR: this.message = i18n.t("errors.serverError");
this.message = i18n.t('errors.serverError'); break;
break; default:
default: this.message = i18n.t("errors.unknown");
this.message = i18n.t('errors.unknown'); break;
break; }
this.message += "\n\nCode " + this.props.errorCode;
} }
this.message += `\n\nCode ${props.errorCode}`;
}
render(): React.Node { render() {
this.generateMessage(); this.generateMessage();
const {props} = this; return (
return ( <AlertDialog {...this.props} title={this.title} message={this.message}/>
<AlertDialog );
visible={props.visible} }
onDismiss={props.onDismiss}
title={this.title}
message={this.message}
/>
);
}
} }
export default ErrorDialog; export default ErrorDialog;

166
src/components/Dialogs/LoadingConfirmDialog.js
View file

@ -1,106 +1,92 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { import {ActivityIndicator, Button, Dialog, Paragraph, Portal} from 'react-native-paper';
ActivityIndicator, import i18n from "i18n-js";
Button,
Dialog,
Paragraph,
Portal,
} from 'react-native-paper';
import i18n from 'i18n-js';
type PropsType = { type Props = {
visible: boolean, visible: boolean,
onDismiss?: () => void, onDismiss: () => void,
onAccept?: () => Promise<void>, // async function to be executed onAccept: () => Promise<void>, // async function to be executed
title?: string, title: string,
titleLoading?: string, titleLoading: string,
message?: string, message: string,
startLoading?: boolean, startLoading: boolean,
}; }
type StateType = { type State = {
loading: boolean, loading: boolean,
}; }
class LoadingConfirmDialog extends React.PureComponent<PropsType, StateType> { class LoadingConfirmDialog extends React.PureComponent<Props, State> {
static defaultProps = {
onDismiss: () => {},
onAccept: (): Promise<void> => {
return Promise.resolve();
},
title: '',
titleLoading: '',
message: '',
startLoading: false,
};
constructor(props: PropsType) { static defaultProps = {
super(props); title: '',
this.state = { message: '',
loading: onDismiss: () => {},
props.startLoading != null onAccept: () => {return Promise.resolve()},
? props.startLoading startLoading: false,
: LoadingConfirmDialog.defaultProps.startLoading, }
state = {
loading: this.props.startLoading,
}; };
}
/** /**
* Set the dialog into loading state and closes it when operation finishes * Set the dialog into loading state and closes it when operation finishes
*/ */
onClickAccept = () => { onClickAccept = () => {
const {props} = this; this.setState({loading: true});
this.setState({loading: true}); this.props.onAccept().then(this.hideLoading);
if (props.onAccept != null) props.onAccept().then(this.hideLoading); };
};
/** /**
* Waits for fade out animations to finish before hiding loading * Waits for fade out animations to finish before hiding loading
* @returns {TimeoutID} * @returns {TimeoutID}
*/ */
hideLoading = (): TimeoutID => hideLoading = () => setTimeout(() => {
setTimeout(() => { this.setState({loading: false})
this.setState({loading: false});
}, 200); }, 200);
/** /**
* Hide the dialog if it is not loading * Hide the dialog if it is not loading
*/ */
onDismiss = () => { onDismiss = () => {
const {state, props} = this; if (!this.state.loading)
if (!state.loading && props.onDismiss != null) props.onDismiss(); this.props.onDismiss();
}; };
render(): React.Node { render() {
const {state, props} = this; return (
return ( <Portal>
<Portal> <Dialog
<Dialog visible={props.visible} onDismiss={this.onDismiss}> visible={this.props.visible}
<Dialog.Title> onDismiss={this.onDismiss}>
{state.loading ? props.titleLoading : props.title} <Dialog.Title>
</Dialog.Title> {this.state.loading
<Dialog.Content> ? this.props.titleLoading
{state.loading ? ( : this.props.title}
<ActivityIndicator animating size="large" /> </Dialog.Title>
) : ( <Dialog.Content>
<Paragraph>{props.message}</Paragraph> {this.state.loading
)} ? <ActivityIndicator
</Dialog.Content> animating={true}
{state.loading ? null : ( size={'large'}/>
<Dialog.Actions> : <Paragraph>{this.props.message}</Paragraph>
<Button onPress={this.onDismiss} style={{marginRight: 10}}> }
{i18n.t('dialog.cancel')} </Dialog.Content>
</Button> {this.state.loading
<Button onPress={this.onClickAccept}> ? null
{i18n.t('dialog.yes')} : <Dialog.Actions>
</Button> <Button onPress={this.onDismiss}
</Dialog.Actions> style={{marginRight: 10}}>{i18n.t("dialog.cancel")}</Button>
)} <Button onPress={this.onClickAccept}>{i18n.t("dialog.yes")}</Button>
</Dialog> </Dialog.Actions>
</Portal> }
); </Dialog>
} </Portal>
);
}
} }
export default LoadingConfirmDialog; export default LoadingConfirmDialog;

83
src/components/Dialogs/OptionsDialog.js
View file

@ -2,50 +2,55 @@
import * as React from 'react'; import * as React from 'react';
import {Button, Dialog, Paragraph, Portal} from 'react-native-paper'; import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
import {FlatList} from 'react-native'; import {FlatList} from "react-native";
export type OptionsDialogButtonType = { export type OptionsDialogButton = {
title: string, title: string,
onPress: () => void, onPress: () => void,
}; }
type PropsType = { type Props = {
visible: boolean, visible: boolean,
title: string, title: string,
message: string, message: string,
buttons: Array<OptionsDialogButtonType>, buttons: Array<OptionsDialogButton>,
onDismiss: () => void, onDismiss: () => void,
}; }
class OptionsDialog extends React.PureComponent<PropsType> { class OptionsDialog extends React.PureComponent<Props> {
getButtonRender = ({item}: {item: OptionsDialogButtonType}): React.Node => {
return <Button onPress={item.onPress}>{item.title}</Button>;
};
keyExtractor = (item: OptionsDialogButtonType): string => item.title; getButtonRender = ({item}: { item: OptionsDialogButton }) => {
return <Button
onPress={item.onPress}>
{item.title}
</Button>;
}
render(): React.Node { keyExtractor = (item: OptionsDialogButton) => item.title;
const {props} = this;
return ( render() {
<Portal> return (
<Dialog visible={props.visible} onDismiss={props.onDismiss}> <Portal>
<Dialog.Title>{props.title}</Dialog.Title> <Dialog
<Dialog.Content> visible={this.props.visible}
<Paragraph>{props.message}</Paragraph> onDismiss={this.props.onDismiss}>
</Dialog.Content> <Dialog.Title>{this.props.title}</Dialog.Title>
<Dialog.Actions> <Dialog.Content>
<FlatList <Paragraph>{this.props.message}</Paragraph>
data={props.buttons} </Dialog.Content>
renderItem={this.getButtonRender} <Dialog.Actions>
keyExtractor={this.keyExtractor} <FlatList
horizontal data={this.props.buttons}
inverted renderItem={this.getButtonRender}
/> keyExtractor={this.keyExtractor}
</Dialog.Actions> horizontal={true}
</Dialog> inverted={true}
</Portal> />
); </Dialog.Actions>
} </Dialog>
</Portal>
);
}
} }
export default OptionsDialog; export default OptionsDialog;

63
src/components/Home/ActionsDashboardItem.js
View file

@ -2,46 +2,37 @@
import * as React from 'react'; import * as React from 'react';
import {List, withTheme} from 'react-native-paper'; import {List, withTheme} from 'react-native-paper';
import {View} from 'react-native'; import {View} from "react-native";
import type {CustomTheme} from "../../managers/ThemeManager";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import {StackNavigationProp} from '@react-navigation/stack'; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomThemeType} from '../../managers/ThemeManager';
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomThemeType, theme: CustomTheme,
}; }
class ActionsDashBoardItem extends React.Component<PropsType> { class ActionsDashBoardItem extends React.Component<Props> {
shouldComponentUpdate(nextProps: PropsType): boolean {
const {props} = this;
return nextProps.theme.dark !== props.theme.dark;
}
render(): React.Node { shouldComponentUpdate(nextProps: Props): boolean {
const {props} = this; return (nextProps.theme.dark !== this.props.theme.dark);
return ( }
<View>
<List.Item render() {
title={i18n.t('screens.feedback.homeButtonTitle')} return (
description={i18n.t('screens.feedback.homeButtonSubtitle')} <View>
left={({size}: {size: number}): React.Node => ( <List.Item
<List.Icon size={size} icon="comment-quote" /> title={i18n.t("screens.feedback.homeButtonTitle")}
)} description={i18n.t("screens.feedback.homeButtonSubtitle")}
right={({size}: {size: number}): React.Node => ( left={props => <List.Icon {...props} icon={"comment-quote"}/>}
<List.Icon size={size} icon="chevron-right" /> right={props => <List.Icon {...props} icon={"chevron-right"}/>}
)} onPress={() => this.props.navigation.navigate("feedback")}
onPress={(): void => props.navigation.navigate('feedback')} style={{paddingTop: 0, paddingBottom: 0, marginLeft: 10, marginRight: 10}}
style={{ />
paddingTop: 0, </View>
paddingBottom: 0,
marginLeft: 10, );
marginRight: 10, }
}}
/>
</View>
);
}
} }
export default withTheme(ActionsDashBoardItem); export default withTheme(ActionsDashBoardItem);

161
src/components/Home/EventDashboardItem.js
View file

@ -1,96 +1,91 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { import {Avatar, Card, Text, TouchableRipple, withTheme} from 'react-native-paper';
Avatar, import {StyleSheet, View} from "react-native";
Card, import i18n from "i18n-js";
Text, import type {CustomTheme} from "../../managers/ThemeManager";
TouchableRipple,
withTheme,
} from 'react-native-paper';
import {StyleSheet, View} from 'react-native';
import i18n from 'i18n-js';
import type {CustomThemeType} from '../../managers/ThemeManager';
type PropsType = { type Props = {
eventNumber: number, eventNumber: number;
clickAction: () => void, clickAction: () => void,
theme: CustomThemeType, theme: CustomTheme,
children?: React.Node, children?: React.Node
}; }
const styles = StyleSheet.create({
card: {
width: 'auto',
marginLeft: 10,
marginRight: 10,
marginTop: 10,
overflow: 'hidden',
},
avatar: {
backgroundColor: 'transparent',
},
});
/** /**
* Component used to display a dashboard item containing a preview event * Component used to display a dashboard item containing a preview event
*/ */
class EventDashBoardItem extends React.Component<PropsType> { class EventDashBoardItem extends React.Component<Props> {
static defaultProps = {
children: null,
};
shouldComponentUpdate(nextProps: PropsType): boolean { shouldComponentUpdate(nextProps: Props) {
const {props} = this; return (nextProps.theme.dark !== this.props.theme.dark)
return ( || (nextProps.eventNumber !== this.props.eventNumber);
nextProps.theme.dark !== props.theme.dark || }
nextProps.eventNumber !== props.eventNumber
); render() {
} const props = this.props;
const colors = props.theme.colors;
const isAvailable = props.eventNumber > 0;
const iconColor = isAvailable ?
colors.planningColor :
colors.textDisabled;
const textColor = isAvailable ?
colors.text :
colors.textDisabled;
let subtitle;
if (isAvailable) {
subtitle =
<Text>
<Text style={{fontWeight: "bold"}}>{props.eventNumber}</Text>
<Text>
{props.eventNumber > 1
? i18n.t('screens.home.dashboard.todayEventsSubtitlePlural')
: i18n.t('screens.home.dashboard.todayEventsSubtitle')}
</Text>
</Text>;
} else
subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
return (
<Card style={styles.card}>
<TouchableRipple
style={{flex: 1}}
onPress={props.clickAction}>
<View>
<Card.Title
title={i18n.t('screens.home.dashboard.todayEventsTitle')}
titleStyle={{color: textColor}}
subtitle={subtitle}
subtitleStyle={{color: textColor}}
left={() =>
<Avatar.Icon
icon={'calendar-range'}
color={iconColor}
size={60}
style={styles.avatar}/>}
/>
<Card.Content>
{props.children}
</Card.Content>
</View>
</TouchableRipple>
</Card>
);
}
render(): React.Node {
const {props} = this;
const {colors} = props.theme;
const isAvailable = props.eventNumber > 0;
const iconColor = isAvailable ? colors.planningColor : colors.textDisabled;
const textColor = isAvailable ? colors.text : colors.textDisabled;
let subtitle;
if (isAvailable) {
subtitle = (
<Text>
<Text style={{fontWeight: 'bold'}}>{props.eventNumber}</Text>
<Text>
{props.eventNumber > 1
? i18n.t('screens.home.dashboard.todayEventsSubtitlePlural')
: i18n.t('screens.home.dashboard.todayEventsSubtitle')}
</Text>
</Text>
);
} else subtitle = i18n.t('screens.home.dashboard.todayEventsSubtitleNA');
return (
<Card style={styles.card}>
<TouchableRipple style={{flex: 1}} onPress={props.clickAction}>
<View>
<Card.Title
title={i18n.t('screens.home.dashboard.todayEventsTitle')}
titleStyle={{color: textColor}}
subtitle={subtitle}
subtitleStyle={{color: textColor}}
left={(): React.Node => (
<Avatar.Icon
icon="calendar-range"
color={iconColor}
size={60}
style={styles.avatar}
/>
)}
/>
<Card.Content>{props.children}</Card.Content>
</View>
</TouchableRipple>
</Card>
);
}
} }
const styles = StyleSheet.create({
card: {
width: 'auto',
marginLeft: 10,
marginRight: 10,
marginTop: 10,
overflow: 'hidden',
},
avatar: {
backgroundColor: 'transparent'
}
});
export default withTheme(EventDashBoardItem); export default withTheme(EventDashBoardItem);

204
src/components/Home/FeedItem.js
View file

@ -2,114 +2,126 @@
import * as React from 'react'; import * as React from 'react';
import {Button, Card, Text, TouchableRipple} from 'react-native-paper'; import {Button, Card, Text, TouchableRipple} from 'react-native-paper';
import {Image, View} from 'react-native'; import {Image, View} from "react-native";
import Autolink from 'react-native-autolink'; import Autolink from "react-native-autolink";
import i18n from 'i18n-js'; import i18n from "i18n-js";
import ImageModal from 'react-native-image-modal'; import ImageModal from 'react-native-image-modal';
import {StackNavigationProp} from '@react-navigation/stack'; import {StackNavigationProp} from "@react-navigation/stack";
import type {FeedItemType} from '../../screens/Home/HomeScreen'; import type {CustomTheme} from "../../managers/ThemeManager";
import type {feedItem} from "../../screens/Home/HomeScreen";
const ICON_AMICALE = require('../../../assets/amicale.png'); const ICON_AMICALE = require('../../../assets/amicale.png');
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
item: FeedItemType, theme: CustomTheme,
title: string, item: feedItem,
subtitle: string, title: string,
height: number, subtitle: string,
}; height: number,
}
/** /**
* Component used to display a feed item * Component used to display a feed item
*/ */
class FeedItem extends React.Component<PropsType> { class FeedItem extends React.Component<Props> {
shouldComponentUpdate(): boolean {
return false;
}
onPress = () => { shouldComponentUpdate() {
const {props} = this; return false;
props.navigation.navigate('feed-information', { }
data: props.item,
date: props.subtitle,
});
};
render(): React.Node { /**
const {props} = this; * Gets the amicale INSAT logo
const {item} = props; *
const hasImage = * @return {*}
item.full_picture !== '' && item.full_picture !== undefined; */
getAvatar() {
const cardMargin = 10; return (
const cardHeight = props.height - 2 * cardMargin; <Image
const imageSize = 250; size={48}
const titleHeight = 80; source={ICON_AMICALE}
const actionsHeight = 60; style={{
const textHeight = hasImage
? cardHeight - titleHeight - actionsHeight - imageSize
: cardHeight - titleHeight - actionsHeight;
return (
<Card
style={{
margin: cardMargin,
height: cardHeight,
}}>
<TouchableRipple style={{flex: 1}} onPress={this.onPress}>
<View>
<Card.Title
title={props.title}
subtitle={props.subtitle}
left={(): React.Node => (
<Image
size={48}
source={ICON_AMICALE}
style={{
width: 48, width: 48,
height: 48, height: 48,
}} }}/>
/> );
)} }
style={{height: titleHeight}}
/> onPress = () => {
{hasImage ? ( this.props.navigation.navigate(
<View style={{marginLeft: 'auto', marginRight: 'auto'}}> 'feed-information',
<ImageModal {
resizeMode="contain" data: this.props.item,
imageBackgroundColor="#000" date: this.props.subtitle
style={{ });
width: imageSize, };
height: imageSize,
}} render() {
source={{ const item = this.props.item;
uri: item.full_picture, const hasImage = item.full_picture !== '' && item.full_picture !== undefined;
}}
/> const cardMargin = 10;
</View> const cardHeight = this.props.height - 2 * cardMargin;
) : null} const imageSize = 250;
<Card.Content> const titleHeight = 80;
{item.message !== undefined ? ( const actionsHeight = 60;
<Autolink const textHeight = hasImage
text={item.message} ? cardHeight - titleHeight - actionsHeight - imageSize
hashtag="facebook" : cardHeight - titleHeight - actionsHeight;
component={Text} return (
style={{height: textHeight}} <Card
/> style={{
) : null} margin: cardMargin,
</Card.Content> height: cardHeight,
<Card.Actions style={{height: actionsHeight}}> }}
<Button >
onPress={this.onPress} <TouchableRipple
icon="plus" style={{flex: 1}}
style={{marginLeft: 'auto'}}> onPress={this.onPress}>
{i18n.t('screens.home.dashboard.seeMore')} <View>
</Button> <Card.Title
</Card.Actions> title={this.props.title}
</View> subtitle={this.props.subtitle}
</TouchableRipple> left={this.getAvatar}
</Card> style={{height: titleHeight}}
); />
} {hasImage ?
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={"#000"}
style={{
width: imageSize,
height: imageSize,
}}
source={{
uri: item.full_picture,
}}
/></View> : null}
<Card.Content>
{item.message !== undefined ?
<Autolink
text={item.message}
hashtag="facebook"
component={Text}
style={{height: textHeight}}
/> : null
}
</Card.Content>
<Card.Actions style={{height: actionsHeight}}>
<Button
onPress={this.onPress}
icon={'plus'}
style={{marginLeft: 'auto'}}>
{i18n.t('screens.home.dashboard.seeMore')}
</Button>
</Card.Actions>
</View>
</TouchableRipple>
</Card>
);
}
} }
export default FeedItem; export default FeedItem;

162
src/components/Home/PreviewEventDashboardItem.js
View file

@ -1,100 +1,94 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {StyleSheet, View} from 'react-native'; import {StyleSheet, View} from "react-native";
import i18n from 'i18n-js'; import i18n from "i18n-js";
import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper'; import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
import {getFormattedEventTime, isDescriptionEmpty} from '../../utils/Planning'; import {getFormattedEventTime, isDescriptionEmpty} from "../../utils/Planning";
import CustomHTML from '../Overrides/CustomHTML'; import CustomHTML from "../Overrides/CustomHTML";
import type {EventType} from '../../screens/Home/HomeScreen'; import type {CustomTheme} from "../../managers/ThemeManager";
import type {event} from "../../screens/Home/HomeScreen";
type PropsType = { type Props = {
event?: EventType | null, event?: event,
clickAction: () => void, clickAction: () => void,
}; theme?: CustomTheme,
}
const styles = StyleSheet.create({
card: {
marginBottom: 10,
},
content: {
maxHeight: 150,
overflow: 'hidden',
},
actions: {
marginLeft: 'auto',
marginTop: 'auto',
flexDirection: 'row',
},
avatar: {
backgroundColor: 'transparent',
},
});
/** /**
* Component used to display an event preview if an event is available * Component used to display an event preview if an event is available
*/ */
// eslint-disable-next-line react/prefer-stateless-function class PreviewEventDashboardItem extends React.Component<Props> {
class PreviewEventDashboardItem extends React.Component<PropsType> {
static defaultProps = {
event: null,
};
render(): React.Node { render() {
const {props} = this; const props = this.props;
const {event} = props; const isEmpty = props.event == null
const isEmpty = ? true
event == null ? true : isDescriptionEmpty(event.description); : isDescriptionEmpty(props.event.description);
if (event != null) { if (props.event != null) {
const hasImage = event.logo !== '' && event.logo != null; const event = props.event;
const getImage = (): React.Node => ( const hasImage = event.logo !== '' && event.logo != null;
<Avatar.Image const getImage = () => <Avatar.Image
source={{uri: event.logo}} source={{uri: event.logo}}
size={50} size={50}
style={styles.avatar} style={styles.avatar}/>;
/> return (
); <Card
return ( style={styles.card}
<Card style={styles.card} elevation={3}> elevation={3}
<TouchableRipple style={{flex: 1}} onPress={props.clickAction}> >
<View> <TouchableRipple
{hasImage ? ( style={{flex: 1}}
<Card.Title onPress={props.clickAction}>
title={event.title} <View>
subtitle={getFormattedEventTime( {hasImage ?
event.date_begin, <Card.Title
event.date_end, title={event.title}
)} subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
left={getImage} left={getImage}
/> /> :
) : ( <Card.Title
<Card.Title title={event.title}
title={event.title} subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
subtitle={getFormattedEventTime( />}
event.date_begin, {!isEmpty ?
event.date_end, <Card.Content style={styles.content}>
)} <CustomHTML html={event.description}/>
/> </Card.Content> : null}
)}
{!isEmpty ? (
<Card.Content style={styles.content}>
<CustomHTML html={event.description} />
</Card.Content>
) : null}
<Card.Actions style={styles.actions}> <Card.Actions style={styles.actions}>
<Button icon="chevron-right"> <Button
{i18n.t('screens.home.dashboard.seeMore')} icon={'chevron-right'}
</Button> >
</Card.Actions> {i18n.t("screens.home.dashboard.seeMore")}
</View> </Button>
</TouchableRipple> </Card.Actions>
</Card> </View>
); </TouchableRipple>
</Card>
);
} else
return null;
} }
return null;
}
} }
const styles = StyleSheet.create({
card: {
marginBottom: 10
},
content: {
maxHeight: 150,
overflow: 'hidden',
},
actions: {
marginLeft: 'auto',
marginTop: 'auto',
flexDirection: 'row'
},
avatar: {
backgroundColor: 'transparent'
}
});
export default PreviewEventDashboardItem; export default PreviewEventDashboardItem;

135
src/components/Home/SmallDashboardItem.js
View file

@ -2,15 +2,15 @@
import * as React from 'react'; import * as React from 'react';
import {Badge, TouchableRipple, withTheme} from 'react-native-paper'; import {Badge, TouchableRipple, withTheme} from 'react-native-paper';
import {Dimensions, Image, View} from 'react-native'; import {Dimensions, Image, View} from "react-native";
import * as Animatable from 'react-native-animatable'; import type {CustomTheme} from "../../managers/ThemeManager";
import type {CustomThemeType} from '../../managers/ThemeManager'; import * as Animatable from "react-native-animatable";
type PropsType = { type Props = {
image: string | null, image: string,
onPress: () => void | null, onPress: () => void,
badgeCount: number | null, badgeCount: number | null,
theme: CustomThemeType, theme: CustomTheme,
}; };
const AnimatableBadge = Animatable.createAnimatableComponent(Badge); const AnimatableBadge = Animatable.createAnimatableComponent(Badge);
@ -18,68 +18,69 @@ const AnimatableBadge = Animatable.createAnimatableComponent(Badge);
/** /**
* Component used to render a small dashboard item * Component used to render a small dashboard item
*/ */
class SmallDashboardItem extends React.Component<PropsType> { class SmallDashboardItem extends React.Component<Props> {
itemSize: number;
constructor(props: PropsType) { itemSize: number;
super(props);
this.itemSize = Dimensions.get('window').width / 8;
}
shouldComponentUpdate(nextProps: PropsType): boolean { constructor(props: Props) {
const {props} = this; super(props);
return ( this.itemSize = Dimensions.get('window').width / 8;
nextProps.theme.dark !== props.theme.dark || }
nextProps.badgeCount !== props.badgeCount
); shouldComponentUpdate(nextProps: Props) {
} return (nextProps.theme.dark !== this.props.theme.dark)
|| (nextProps.badgeCount !== this.props.badgeCount);
}
render() {
const props = this.props;
return (
<TouchableRipple
onPress={this.props.onPress}
borderless={true}
style={{
marginLeft: this.itemSize / 6,
marginRight: this.itemSize / 6,
}}
>
<View style={{
width: this.itemSize,
height: this.itemSize,
}}>
<Image
source={{uri: props.image}}
style={{
width: "80%",
height: "80%",
marginLeft: "auto",
marginRight: "auto",
marginTop: "auto",
marginBottom: "auto",
}}
/>
{
props.badgeCount != null && props.badgeCount > 0 ?
<AnimatableBadge
animation={"zoomIn"}
duration={300}
useNativeDriver
style={{
position: 'absolute',
top: 0,
right: 0,
backgroundColor: props.theme.colors.primary,
borderColor: props.theme.colors.background,
borderWidth: 2,
}}>
{props.badgeCount}
</AnimatableBadge> : null
}
</View>
</TouchableRipple>
);
}
render(): React.Node {
const {props} = this;
return (
<TouchableRipple
onPress={props.onPress}
borderless
style={{
marginLeft: this.itemSize / 6,
marginRight: this.itemSize / 6,
}}>
<View
style={{
width: this.itemSize,
height: this.itemSize,
}}>
<Image
source={{uri: props.image}}
style={{
width: '80%',
height: '80%',
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 'auto',
marginBottom: 'auto',
}}
/>
{props.badgeCount != null && props.badgeCount > 0 ? (
<AnimatableBadge
animation="zoomIn"
duration={300}
useNativeDriver
style={{
position: 'absolute',
top: 0,
right: 0,
backgroundColor: props.theme.colors.primary,
borderColor: props.theme.colors.background,
borderWidth: 2,
}}>
{props.badgeCount}
</AnimatableBadge>
) : null}
</View>
</TouchableRipple>
);
}
} }
export default withTheme(SmallDashboardItem); export default withTheme(SmallDashboardItem);

121
src/components/Lists/CardList/CardList.js
View file

@ -1,73 +1,72 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, Dimensions} from 'react-native'; import {Animated, Dimensions} from "react-native";
import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet'; import ImageListItem from "./ImageListItem";
import ImageListItem from './ImageListItem'; import CardListItem from "./CardListItem";
import CardListItem from './CardListItem'; import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
import type {ServiceItemType} from '../../../managers/ServicesManager';
type PropsType = { type Props = {
dataset: Array<ServiceItemType>, dataset: Array<cardItem>,
isHorizontal?: boolean, isHorizontal: boolean,
contentContainerStyle?: ViewStyle | null, contentContainerStyle?: ViewStyle,
}
export type cardItem = {
key: string,
title: string,
subtitle: string,
image: string | number,
onPress: () => void,
}; };
export default class CardList extends React.Component<PropsType> { export type cardList = Array<cardItem>;
static defaultProps = {
isHorizontal: false,
contentContainerStyle: null,
};
windowWidth: number;
horizontalItemSize: number; export default class CardList extends React.Component<Props> {
constructor(props: PropsType) { static defaultProps = {
super(props); isHorizontal: false,
this.windowWidth = Dimensions.get('window').width;
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}): React.Node => {
const {props} = this;
if (props.isHorizontal)
return (
<ImageListItem
item={item}
key={item.title}
width={this.horizontalItemSize}
/>
);
return <CardListItem item={item} key={item.title} />;
};
keyExtractor = (item: ServiceItemType): string => item.key;
render(): React.Node {
const {props} = this;
let containerStyle = {};
if (props.isHorizontal) {
containerStyle = {
height: this.horizontalItemSize + 50,
justifyContent: 'space-around',
};
} }
return (
<Animated.FlatList windowWidth: number;
data={props.dataset} horizontalItemSize: number;
renderItem={this.getRenderItem}
keyExtractor={this.keyExtractor} constructor(props: Props) {
numColumns={props.isHorizontal ? undefined : 2} super(props);
horizontal={props.isHorizontal} this.windowWidth = Dimensions.get('window').width;
contentContainerStyle={ this.horizontalItemSize = this.windowWidth/4; // So that we can fit 3 items and a part of the 4th => user knows he can scroll
props.isHorizontal ? containerStyle : props.contentContainerStyle }
renderItem = ({item}: { item: cardItem }) => {
if (this.props.isHorizontal)
return <ImageListItem item={item} key={item.title} width={this.horizontalItemSize}/>;
else
return <CardListItem item={item} key={item.title}/>;
};
keyExtractor = (item: cardItem) => item.key;
render() {
let containerStyle = {};
if (this.props.isHorizontal) {
containerStyle = {
height: this.horizontalItemSize + 50,
justifyContent: 'space-around',
};
} }
pagingEnabled={props.isHorizontal} return (
snapToInterval={ <Animated.FlatList
props.isHorizontal ? (this.horizontalItemSize + 5) * 3 : null {...this.props}
} data={this.props.dataset}
/> renderItem={this.renderItem}
); keyExtractor={this.keyExtractor}
} numColumns={this.props.isHorizontal ? undefined : 2}
horizontal={this.props.isHorizontal}
contentContainerStyle={this.props.isHorizontal ? containerStyle : this.props.contentContainerStyle}
pagingEnabled={this.props.isHorizontal}
snapToInterval={this.props.isHorizontal ? (this.horizontalItemSize+5)*3 : null}
/>
);
}
} }

81
src/components/Lists/CardList/CardListItem.js
View file

@ -2,41 +2,50 @@
import * as React from 'react'; import * as React from 'react';
import {Caption, Card, Paragraph, TouchableRipple} from 'react-native-paper'; import {Caption, Card, Paragraph, TouchableRipple} from 'react-native-paper';
import {View} from 'react-native'; import {View} from "react-native";
import type {ServiceItemType} from '../../../managers/ServicesManager'; import type {cardItem} from "./CardList";
type PropsType = { type Props = {
item: ServiceItemType, item: cardItem,
}; }
export default class CardListItem extends React.Component<PropsType> { export default class CardListItem extends React.Component<Props> {
shouldComponentUpdate(): boolean {
return false; shouldComponentUpdate() {
} return false;
}
render(): React.Node {
const {props} = this; render() {
const {item} = props; const props = this.props;
const source = const item = props.item;
typeof item.image === 'number' ? item.image : {uri: item.image}; const source = typeof item.image === "number"
return ( ? item.image
<Card : {uri: item.image};
style={{ return (
width: '40%', <Card
margin: 5, style={{
marginLeft: 'auto', width: '40%',
marginRight: 'auto', margin: 5,
}}> marginLeft: 'auto',
<TouchableRipple style={{flex: 1}} onPress={item.onPress}> marginRight: 'auto',
<View> }}
<Card.Cover style={{height: 80}} source={source} /> >
<Card.Content> <TouchableRipple
<Paragraph>{item.title}</Paragraph> style={{flex: 1}}
<Caption>{item.subtitle}</Caption> onPress={item.onPress}>
</Card.Content> <View>
</View> <Card.Cover
</TouchableRipple> style={{height: 80}}
</Card> source={source}
); />
} <Card.Content>
<Paragraph>{item.title}</Paragraph>
<Caption>{item.subtitle}</Caption>
</Card.Content>
</View>
</TouchableRipple>
</Card>
);
}
} }

95
src/components/Lists/CardList/ImageListItem.js
View file

@ -3,52 +3,53 @@
import * as React from 'react'; import * as React from 'react';
import {Text, TouchableRipple} from 'react-native-paper'; import {Text, TouchableRipple} from 'react-native-paper';
import {Image, View} from 'react-native'; import {Image, View} from 'react-native';
import type {ServiceItemType} from '../../../managers/ServicesManager'; import type {cardItem} from "./CardList";
type PropsType = { type Props = {
item: ServiceItemType, item: cardItem,
width: number, width: number,
}; }
export default class ImageListItem extends React.Component<PropsType> { export default class ImageListItem extends React.Component<Props> {
shouldComponentUpdate(): boolean {
return false; shouldComponentUpdate() {
} return false;
}
render(): React.Node {
const {props} = this; render() {
const {item} = props; const item = this.props.item;
const source = const source = typeof item.image === "number"
typeof item.image === 'number' ? item.image : {uri: item.image}; ? item.image
return ( : {uri: item.image};
<TouchableRipple return (
style={{ <TouchableRipple
width: props.width, style={{
height: props.width + 40, width: this.props.width,
margin: 5, height: this.props.width + 40,
}} margin: 5,
onPress={item.onPress}> }}
<View> onPress={item.onPress}
<Image >
style={{ <View>
width: props.width - 20, <Image
height: props.width - 20, style={{
marginLeft: 'auto', width: this.props.width - 20,
marginRight: 'auto', height: this.props.width - 20,
}} marginLeft: 'auto',
source={source} marginRight: 'auto',
/> }}
<Text source={source}
style={{ />
marginTop: 5, <Text style={{
marginLeft: 'auto', marginTop: 5,
marginRight: 'auto', marginLeft: 'auto',
textAlign: 'center', marginRight: 'auto',
}}> textAlign: 'center'
{item.title} }}>
</Text> {item.title}
</View> </Text>
</TouchableRipple> </View>
); </TouchableRipple>
} );
}
} }

156
src/components/Lists/Clubs/ClubListHeader.js
View file

@ -2,90 +2,82 @@
import * as React from 'react'; import * as React from 'react';
import {Card, Chip, List, Text} from 'react-native-paper'; import {Card, Chip, List, Text} from 'react-native-paper';
import {StyleSheet, View} from 'react-native'; import {StyleSheet, View} from "react-native";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import AnimatedAccordion from '../../Animations/AnimatedAccordion'; import AnimatedAccordion from "../../Animations/AnimatedAccordion";
import {isItemInCategoryFilter} from '../../../utils/Search'; import {isItemInCategoryFilter} from "../../../utils/Search";
import type {ClubCategoryType} from '../../../screens/Amicale/Clubs/ClubListScreen'; import type {category} from "../../../screens/Amicale/Clubs/ClubListScreen";
type PropsType = { type Props = {
categories: Array<ClubCategoryType>, categories: Array<category>,
onChipSelect: (id: number) => void, onChipSelect: (id: number) => void,
selectedCategories: Array<number>, selectedCategories: Array<number>,
};
const styles = StyleSheet.create({
card: {
margin: 5,
},
text: {
paddingLeft: 0,
marginTop: 5,
marginBottom: 10,
marginLeft: 'auto',
marginRight: 'auto',
},
chipContainer: {
justifyContent: 'space-around',
flexDirection: 'row',
flexWrap: 'wrap',
paddingLeft: 0,
marginBottom: 5,
},
});
class ClubListHeader extends React.Component<PropsType> {
shouldComponentUpdate(nextProps: PropsType): boolean {
const {props} = this;
return (
nextProps.selectedCategories.length !== props.selectedCategories.length
);
}
getChipRender = (category: ClubCategoryType, key: string): React.Node => {
const {props} = this;
const onPress = (): void => props.onChipSelect(category.id);
return (
<Chip
selected={isItemInCategoryFilter(props.selectedCategories, [
category.id,
null,
])}
mode="outlined"
onPress={onPress}
style={{marginRight: 5, marginLeft: 5, marginBottom: 5}}
key={key}>
{category.name}
</Chip>
);
};
getCategoriesRender(): React.Node {
const {props} = this;
const final = [];
props.categories.forEach((cat: ClubCategoryType) => {
final.push(this.getChipRender(cat, cat.id.toString()));
});
return final;
}
render(): React.Node {
return (
<Card style={styles.card}>
<AnimatedAccordion
title={i18n.t('screens.clubs.categories')}
left={({size}: {size: number}): React.Node => (
<List.Icon size={size} icon="star" />
)}
opened>
<Text style={styles.text}>
{i18n.t('screens.clubs.categoriesFilterMessage')}
</Text>
<View style={styles.chipContainer}>{this.getCategoriesRender()}</View>
</AnimatedAccordion>
</Card>
);
}
} }
class ClubListHeader extends React.Component<Props> {
shouldComponentUpdate(nextProps: Props) {
return nextProps.selectedCategories.length !== this.props.selectedCategories.length;
}
getChipRender = (category: category, key: string) => {
const onPress = () => this.props.onChipSelect(category.id);
return <Chip
selected={isItemInCategoryFilter(this.props.selectedCategories, [category.id])}
mode={'outlined'}
onPress={onPress}
style={{marginRight: 5, marginLeft: 5, marginBottom: 5}}
key={key}
>
{category.name}
</Chip>;
};
getCategoriesRender() {
let final = [];
for (let i = 0; i < this.props.categories.length; i++) {
final.push(this.getChipRender(this.props.categories[i], this.props.categories[i].id.toString()));
}
return final;
}
render() {
return (
<Card style={styles.card}>
<AnimatedAccordion
title={i18n.t("screens.clubs.categories")}
left={props => <List.Icon {...props} icon="star"/>}
opened={true}
>
<Text style={styles.text}>{i18n.t("screens.clubs.categoriesFilterMessage")}</Text>
<View style={styles.chipContainer}>
{this.getCategoriesRender()}
</View>
</AnimatedAccordion>
</Card>
);
}
}
const styles = StyleSheet.create({
card: {
margin: 5
},
text: {
paddingLeft: 0,
marginTop: 5,
marginBottom: 10,
marginLeft: 'auto',
marginRight: 'auto',
},
chipContainer: {
justifyContent: 'space-around',
flexDirection: 'row',
flexWrap: 'wrap',
paddingLeft: 0,
marginBottom: 5,
},
});
export default ClubListHeader; export default ClubListHeader;

151
src/components/Lists/Clubs/ClubListItem.js
View file

@ -2,93 +2,84 @@
import * as React from 'react'; import * as React from 'react';
import {Avatar, Chip, List, withTheme} from 'react-native-paper'; import {Avatar, Chip, List, withTheme} from 'react-native-paper';
import {View} from 'react-native'; import {View} from "react-native";
import type { import type {category, club} from "../../../screens/Amicale/Clubs/ClubListScreen";
ClubCategoryType, import type {CustomTheme} from "../../../managers/ThemeManager";
ClubType,
} from '../../../screens/Amicale/Clubs/ClubListScreen';
import type {CustomThemeType} from '../../../managers/ThemeManager';
type PropsType = { type Props = {
onPress: () => void, onPress: () => void,
categoryTranslator: (id: number) => ClubCategoryType, categoryTranslator: (id: number) => category,
item: ClubType, item: club,
height: number, height: number,
theme: CustomThemeType, theme: CustomTheme,
}; }
class ClubListItem extends React.Component<PropsType> { class ClubListItem extends React.Component<Props> {
hasManagers: boolean;
constructor(props: PropsType) { hasManagers: boolean;
super(props);
this.hasManagers = props.item.responsibles.length > 0;
}
shouldComponentUpdate(): boolean { constructor(props) {
return false; super(props);
} this.hasManagers = props.item.responsibles.length > 0;
}
getCategoriesRender(categories: Array<number | null>): React.Node { shouldComponentUpdate() {
const {props} = this; return false;
const final = []; }
categories.forEach((cat: number | null) => {
if (cat != null) {
const category: ClubCategoryType = props.categoryTranslator(cat);
final.push(
<Chip
style={{marginRight: 5, marginBottom: 5}}
key={`${props.item.id}:${category.id}`}>
{category.name}
</Chip>,
);
}
});
return <View style={{flexDirection: 'row'}}>{final}</View>;
}
render(): React.Node { getCategoriesRender(categories: Array<number | null>) {
const {props} = this; let final = [];
const categoriesRender = (): React.Node => for (let i = 0; i < categories.length; i++) {
this.getCategoriesRender(props.item.category); if (categories[i] !== null) {
const {colors} = props.theme; const category: category = this.props.categoryTranslator(categories[i]);
return ( final.push(
<List.Item <Chip
title={props.item.name} style={{marginRight: 5, marginBottom: 5}}
description={categoriesRender} key={this.props.item.id + ':' + category.id}
onPress={props.onPress} >
left={(): React.Node => ( {category.name}
<Avatar.Image </Chip>
style={{ );
backgroundColor: 'transparent',
marginLeft: 10,
marginRight: 10,
}}
size={64}
source={{uri: props.item.logo}}
/>
)}
right={(): React.Node => (
<Avatar.Icon
style={{
marginTop: 'auto',
marginBottom: 'auto',
backgroundColor: 'transparent',
}}
size={48}
icon={
this.hasManagers ? 'check-circle-outline' : 'alert-circle-outline'
} }
color={this.hasManagers ? colors.success : colors.primary} }
/> return <View style={{flexDirection: 'row'}}>{final}</View>;
)} }
style={{
height: props.height, render() {
justifyContent: 'center', const categoriesRender = this.getCategoriesRender.bind(this, this.props.item.category);
}} const colors = this.props.theme.colors;
/> return (
); <List.Item
} title={this.props.item.name}
description={categoriesRender}
onPress={this.props.onPress}
left={(props) => <Avatar.Image
{...props}
style={{
backgroundColor: 'transparent',
marginLeft: 10,
marginRight: 10,
}}
size={64}
source={{uri: this.props.item.logo}}/>}
right={(props) => <Avatar.Icon
{...props}
style={{
marginTop: 'auto',
marginBottom: 'auto',
backgroundColor: 'transparent',
}}
size={48}
icon={this.hasManagers ? "check-circle-outline" : "alert-circle-outline"}
color={this.hasManagers ? colors.success : colors.primary}
/>}
style={{
height: this.props.height,
justifyContent: 'center',
}}
/>
);
}
} }
export default withTheme(ClubListItem); export default withTheme(ClubListItem);

137
src/components/Lists/DashboardEdit/DashboardEditAccordion.js
View file

@ -2,88 +2,71 @@
import * as React from 'react'; import * as React from 'react';
import {withTheme} from 'react-native-paper'; import {withTheme} from 'react-native-paper';
import {FlatList, Image, View} from 'react-native'; import {FlatList, Image, View} from "react-native";
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import DashboardEditItem from "./DashboardEditItem";
import DashboardEditItem from './DashboardEditItem'; import AnimatedAccordion from "../../Animations/AnimatedAccordion";
import AnimatedAccordion from '../../Animations/AnimatedAccordion'; import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
import type { import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
ServiceCategoryType, import type {CustomTheme} from "../../../managers/ThemeManager";
ServiceItemType,
} from '../../../managers/ServicesManager';
import type {CustomThemeType} from '../../../managers/ThemeManager';
type PropsType = { type Props = {
item: ServiceCategoryType, item: ServiceCategory,
activeDashboard: Array<string>, activeDashboard: Array<string>,
onPress: (service: ServiceItemType) => void, onPress: (service: ServiceItem) => void,
theme: CustomThemeType, theme: CustomTheme,
}; }
const LIST_ITEM_HEIGHT = 64; const LIST_ITEM_HEIGHT = 64;
class DashboardEditAccordion extends React.Component<PropsType> { class DashboardEditAccordion extends React.Component<Props> {
getRenderItem = ({item}: {item: ServiceItemType}): React.Node => {
const {props} = this;
return (
<DashboardEditItem
height={LIST_ITEM_HEIGHT}
item={item}
isActive={props.activeDashboard.includes(item.key)}
onPress={() => {
props.onPress(item);
}}
/>
);
};
getItemLayout = ( renderItem = ({item}: { item: ServiceItem }) => {
data: ?Array<ServiceItemType>, return (
index: number, <DashboardEditItem
): {length: number, offset: number, index: number} => ({ height={LIST_ITEM_HEIGHT}
length: LIST_ITEM_HEIGHT, item={item}
offset: LIST_ITEM_HEIGHT * index, isActive={this.props.activeDashboard.includes(item.key)}
index, onPress={() => this.props.onPress(item)}/>
}); );
}
render(): React.Node { itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
const {props} = this;
const {item} = props; render() {
return ( const item = this.props.item;
<View> return (
<AnimatedAccordion <View>
title={item.title} <AnimatedAccordion
left={(): React.Node => title={item.title}
typeof item.image === 'number' ? ( left={props => typeof item.image === "number"
<Image ? <Image
source={item.image} {...props}
style={{ source={item.image}
width: 40, style={{
height: 40, width: 40,
}} height: 40
/> }}
) : ( />
<MaterialCommunityIcons : <MaterialCommunityIcons
// $FlowFixMe //$FlowFixMe
name={item.image} name={item.image}
color={props.theme.colors.primary} color={this.props.theme.colors.primary}
size={40} size={40}/>}
/> >
) {/*$FlowFixMe*/}
}> <FlatList
{/* $FlowFixMe */} data={item.content}
<FlatList extraData={this.props.activeDashboard.toString()}
data={item.content} renderItem={this.renderItem}
extraData={props.activeDashboard.toString()} listKey={item.key}
renderItem={this.getRenderItem} // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
listKey={item.key} getItemLayout={this.itemLayout}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration removeClippedSubviews={true}
getItemLayout={this.getItemLayout} />
removeClippedSubviews </AnimatedAccordion>
/> </View>
</AnimatedAccordion> );
</View> }
);
}
} }
export default withTheme(DashboardEditAccordion); export default withTheme(DashboardEditAccordion)

94
src/components/Lists/DashboardEdit/DashboardEditItem.js
View file

@ -1,61 +1,55 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Image} from 'react-native'; import {Image} from "react-native";
import {List, withTheme} from 'react-native-paper'; import {List, withTheme} from 'react-native-paper';
import type {CustomThemeType} from '../../../managers/ThemeManager'; import type {CustomTheme} from "../../../managers/ThemeManager";
import type {ServiceItemType} from '../../../managers/ServicesManager'; import type {ServiceItem} from "../../../managers/ServicesManager";
type PropsType = { type Props = {
item: ServiceItemType, item: ServiceItem,
isActive: boolean, isActive: boolean,
height: number, height: number,
onPress: () => void, onPress: () => void,
theme: CustomThemeType, theme: CustomTheme,
}; }
class DashboardEditItem extends React.Component<PropsType> { class DashboardEditItem extends React.Component<Props> {
shouldComponentUpdate(nextProps: PropsType): boolean {
const {isActive} = this.props;
return nextProps.isActive !== isActive;
}
render(): React.Node { shouldComponentUpdate(nextProps: Props) {
const {props} = this; return (nextProps.isActive !== this.props.isActive);
return ( }
<List.Item
title={props.item.title} render() {
description={props.item.subtitle} return (
onPress={props.isActive ? null : props.onPress} <List.Item
left={(): React.Node => ( title={this.props.item.title}
<Image description={this.props.item.subtitle}
source={{uri: props.item.image}} onPress={this.props.isActive ? null : this.props.onPress}
style={{ left={props =>
width: 40, <Image
height: 40, {...props}
}} source={{uri: this.props.item.image}}
/> style={{
)} width: 40,
right={({size}: {size: number}): React.Node => height: 40
props.isActive ? ( }}
<List.Icon />}
size={size} right={props => this.props.isActive
icon="check" ? <List.Icon
color={props.theme.colors.success} {...props}
icon={"check"}
color={this.props.theme.colors.success}
/> : null}
style={{
height: this.props.height,
justifyContent: 'center',
paddingLeft: 30,
backgroundColor: this.props.isActive ? this.props.theme.colors.proxiwashFinishedColor : "transparent"
}}
/> />
) : null );
} }
style={{
height: props.height,
justifyContent: 'center',
paddingLeft: 30,
backgroundColor: props.isActive
? props.theme.colors.proxiwashFinishedColor
: 'transparent',
}}
/>
);
}
} }
export default withTheme(DashboardEditItem); export default withTheme(DashboardEditItem);

88
src/components/Lists/DashboardEdit/DashboardEditPreviewItem.js
View file

@ -2,57 +2,57 @@
import * as React from 'react'; import * as React from 'react';
import {TouchableRipple, withTheme} from 'react-native-paper'; import {TouchableRipple, withTheme} from 'react-native-paper';
import {Dimensions, Image, View} from 'react-native'; import {Dimensions, Image, View} from "react-native";
import type {CustomThemeType} from '../../../managers/ThemeManager'; import type {CustomTheme} from "../../../managers/ThemeManager";
type PropsType = { type Props = {
image: string, image: string,
isActive: boolean, isActive: boolean,
onPress: () => void, onPress: () => void,
theme: CustomThemeType, theme: CustomTheme,
}; };
/** /**
* Component used to render a small dashboard item * Component used to render a small dashboard item
*/ */
class DashboardEditPreviewItem extends React.Component<PropsType> { class DashboardEditPreviewItem extends React.Component<Props> {
itemSize: number;
constructor(props: PropsType) { itemSize: number;
super(props);
this.itemSize = Dimensions.get('window').width / 8; constructor(props: Props) {
} super(props);
this.itemSize = Dimensions.get('window').width / 8;
}
render() {
const props = this.props;
return (
<TouchableRipple
onPress={this.props.onPress}
borderless={true}
style={{
marginLeft: 5,
marginRight: 5,
backgroundColor: this.props.isActive ? this.props.theme.colors.textDisabled : "transparent",
borderRadius: 5
}}
>
<View style={{
width: this.itemSize,
height: this.itemSize,
}}>
<Image
source={{uri: props.image}}
style={{
width: "100%",
height: "100%",
}}
/>
</View>
</TouchableRipple>
);
}
render(): React.Node {
const {props} = this;
return (
<TouchableRipple
onPress={props.onPress}
borderless
style={{
marginLeft: 5,
marginRight: 5,
backgroundColor: props.isActive
? props.theme.colors.textDisabled
: 'transparent',
borderRadius: 5,
}}>
<View
style={{
width: this.itemSize,
height: this.itemSize,
}}>
<Image
source={{uri: props.image}}
style={{
width: '100%',
height: '100%',
}}
/>
</View>
</TouchableRipple>
);
}
} }
export default withTheme(DashboardEditPreviewItem); export default withTheme(DashboardEditPreviewItem)

193
src/components/Lists/Equipment/EquipmentListItem.js
View file

@ -2,112 +2,111 @@
import * as React from 'react'; import * as React from 'react';
import {Avatar, List, withTheme} from 'react-native-paper'; import {Avatar, List, withTheme} from 'react-native-paper';
import i18n from 'i18n-js'; import type {CustomTheme} from "../../../managers/ThemeManager";
import {StackNavigationProp} from '@react-navigation/stack'; import type {Device} from "../../../screens/Amicale/Equipment/EquipmentListScreen";
import type {CustomThemeType} from '../../../managers/ThemeManager'; import i18n from "i18n-js";
import type {DeviceType} from '../../../screens/Amicale/Equipment/EquipmentListScreen';
import { import {
getFirstEquipmentAvailability, getFirstEquipmentAvailability,
getRelativeDateString, getRelativeDateString,
isEquipmentAvailable, isEquipmentAvailable
} from '../../../utils/EquipmentBooking'; } from "../../../utils/EquipmentBooking";
import {StackNavigationProp} from "@react-navigation/stack";
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
userDeviceRentDates: [string, string], userDeviceRentDates: [string, string],
item: DeviceType, item: Device,
height: number, height: number,
theme: CustomThemeType, theme: CustomTheme,
}; }
class EquipmentListItem extends React.Component<PropsType> { class EquipmentListItem extends React.Component<Props> {
shouldComponentUpdate(nextProps: PropsType): boolean {
const {userDeviceRentDates} = this.props;
return nextProps.userDeviceRentDates !== userDeviceRentDates;
}
render(): React.Node { shouldComponentUpdate(nextProps: Props): boolean {
const {item, userDeviceRentDates, navigation, height, theme} = this.props; return nextProps.userDeviceRentDates !== this.props.userDeviceRentDates;
const isRented = userDeviceRentDates != null; }
const isAvailable = isEquipmentAvailable(item);
const firstAvailability = getFirstEquipmentAvailability(item);
let onPress; render() {
if (isRented) const colors = this.props.theme.colors;
onPress = () => { const item = this.props.item;
navigation.navigate('equipment-confirm', { const userDeviceRentDates = this.props.userDeviceRentDates;
item, const isRented = userDeviceRentDates != null;
dates: userDeviceRentDates, const isAvailable = isEquipmentAvailable(item);
}); const firstAvailability = getFirstEquipmentAvailability(item);
};
else
onPress = () => {
navigation.navigate('equipment-rent', {item});
};
let description; let onPress;
if (isRented) { if (isRented)
const start = new Date(userDeviceRentDates[0]); onPress = () => this.props.navigation.navigate("equipment-confirm", {
const end = new Date(userDeviceRentDates[1]); item: item,
if (start.getTime() !== end.getTime()) dates: userDeviceRentDates
description = i18n.t('screens.equipment.bookingPeriod', { });
begin: getRelativeDateString(start), else
end: getRelativeDateString(end), onPress = () => this.props.navigation.navigate("equipment-rent", {item: item});
});
else
description = i18n.t('screens.equipment.bookingDay', {
date: getRelativeDateString(start),
});
} else if (isAvailable)
description = i18n.t('screens.equipment.bail', {cost: item.caution});
else
description = i18n.t('screens.equipment.available', {
date: getRelativeDateString(firstAvailability),
});
let icon; let description;
if (isRented) icon = 'bookmark-check'; if (isRented) {
else if (isAvailable) icon = 'check-circle-outline'; const start = new Date(userDeviceRentDates[0]);
else icon = 'update'; const end = new Date(userDeviceRentDates[1]);
if (start.getTime() !== end.getTime())
description = i18n.t('screens.equipment.bookingPeriod', {
begin: getRelativeDateString(start),
end: getRelativeDateString(end)
});
else
description = i18n.t('screens.equipment.bookingDay', {
date: getRelativeDateString(start)
});
} else if (isAvailable)
description = i18n.t('screens.equipment.bail', {cost: item.caution});
else
description = i18n.t('screens.equipment.available', {date: getRelativeDateString(firstAvailability)});
let color; let icon;
if (isRented) color = theme.colors.warning; if (isRented)
else if (isAvailable) color = theme.colors.success; icon = "bookmark-check";
else color = theme.colors.primary; else if (isAvailable)
icon = "check-circle-outline";
else
icon = "update";
return ( let color;
<List.Item if (isRented)
title={item.name} color = colors.warning;
description={description} else if (isAvailable)
onPress={onPress} color = colors.success;
left={({size}: {size: number}): React.Node => ( else
<Avatar.Icon color = colors.primary;
size={size}
style={{ return (
backgroundColor: 'transparent', <List.Item
}} title={item.name}
icon={icon} description={description}
color={color} onPress={onPress}
/> left={(props) => <Avatar.Icon
)} {...props}
right={(): React.Node => ( style={{
<Avatar.Icon backgroundColor: 'transparent',
style={{ }}
marginTop: 'auto', icon={icon}
marginBottom: 'auto', color={color}
backgroundColor: 'transparent', />}
}} right={(props) => <Avatar.Icon
size={48} {...props}
icon="chevron-right" style={{
/> marginTop: 'auto',
)} marginBottom: 'auto',
style={{ backgroundColor: 'transparent',
height, }}
justifyContent: 'center', size={48}
}} icon={"chevron-right"}
/> />}
); style={{
} height: this.props.height,
justifyContent: 'center',
}}
/>
);
}
} }
export default withTheme(EquipmentListItem); export default withTheme(EquipmentListItem);

200
src/components/Lists/PlanexGroups/GroupListAccordion.js
View file

@ -2,116 +2,96 @@
import * as React from 'react'; import * as React from 'react';
import {List, withTheme} from 'react-native-paper'; import {List, withTheme} from 'react-native-paper';
import {FlatList, View} from 'react-native'; import {FlatList, View} from "react-native";
import {stringMatchQuery} from '../../../utils/Search'; import {stringMatchQuery} from "../../../utils/Search";
import GroupListItem from './GroupListItem'; import GroupListItem from "./GroupListItem";
import AnimatedAccordion from '../../Animations/AnimatedAccordion'; import AnimatedAccordion from "../../Animations/AnimatedAccordion";
import type { import type {group, groupCategory} from "../../../screens/Planex/GroupSelectionScreen";
PlanexGroupType, import type {CustomTheme} from "../../../managers/ThemeManager";
PlanexGroupCategoryType,
} from '../../../screens/Planex/GroupSelectionScreen';
import type {CustomThemeType} from '../../../managers/ThemeManager';
type PropsType = { type Props = {
item: PlanexGroupCategoryType, item: groupCategory,
favorites: Array<PlanexGroupType>, onGroupPress: (group) => void,
onGroupPress: (PlanexGroupType) => void, onFavoritePress: (group) => void,
onFavoritePress: (PlanexGroupType) => void, currentSearchString: string,
currentSearchString: string, favoriteNumber: number,
height: number, height: number,
theme: CustomThemeType, theme: CustomTheme,
};
const LIST_ITEM_HEIGHT = 64;
const REPLACE_REGEX = /_/g;
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
);
}
getRenderItem = ({item}: {item: PlanexGroupType}): React.Node => {
const {props} = this;
const onPress = () => {
props.onGroupPress(item);
};
const onStarPress = () => {
props.onFavoritePress(item);
};
return (
<GroupListItem
height={LIST_ITEM_HEIGHT}
item={item}
favorites={props.favorites}
onPress={onPress}
onStarPress={onStarPress}
/>
);
};
getData(): Array<PlanexGroupType> {
const {props} = this;
const originalData = props.item.content;
const displayData = [];
originalData.forEach((data: PlanexGroupType) => {
if (stringMatchQuery(data.name, props.currentSearchString))
displayData.push(data);
});
return displayData;
}
itemLayout = (
data: ?Array<PlanexGroupType>,
index: number,
): {length: number, offset: number, index: number} => ({
length: LIST_ITEM_HEIGHT,
offset: LIST_ITEM_HEIGHT * index,
index,
});
keyExtractor = (item: PlanexGroupType): string => item.id.toString();
render(): React.Node {
const {props} = this;
const {item} = this.props;
return (
<View>
<AnimatedAccordion
title={item.name.replace(REPLACE_REGEX, ' ')}
style={{
height: props.height,
justifyContent: 'center',
}}
left={({size}: {size: number}): React.Node =>
item.id === 0 ? (
<List.Icon
size={size}
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
/>
</AnimatedAccordion>
</View>
);
}
} }
export default withTheme(GroupListAccordion); const LIST_ITEM_HEIGHT = 64;
class GroupListAccordion extends React.Component<Props> {
shouldComponentUpdate(nextProps: Props) {
return (nextProps.currentSearchString !== this.props.currentSearchString)
|| (nextProps.favoriteNumber !== this.props.favoriteNumber)
|| (nextProps.item.content.length !== this.props.item.content.length);
}
keyExtractor = (item: group) => item.id.toString();
renderItem = ({item}: { item: group }) => {
const onPress = () => this.props.onGroupPress(item);
const onStarPress = () => this.props.onFavoritePress(item);
return (
<GroupListItem
height={LIST_ITEM_HEIGHT}
item={item}
onPress={onPress}
onStarPress={onStarPress}/>
);
}
getData() {
const originalData = this.props.item.content;
let displayData = [];
for (let i = 0; i < originalData.length; i++) {
if (stringMatchQuery(originalData[i].name, this.props.currentSearchString))
displayData.push(originalData[i]);
}
return displayData;
}
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
render() {
const item = this.props.item;
return (
<View>
<AnimatedAccordion
title={item.name}
style={{
height: this.props.height,
justifyContent: 'center',
}}
left={props =>
item.id === 0
? <List.Icon
{...props}
icon={"star"}
color={this.props.theme.colors.tetrisScore}
/>
: null}
unmountWhenCollapsed={true}// Only render list if expanded for increased performance
opened={this.props.item.id === 0 || this.props.currentSearchString.length > 0}
>
{/*$FlowFixMe*/}
<FlatList
data={this.getData()}
extraData={this.props.currentSearchString}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
listKey={item.id.toString()}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
getItemLayout={this.itemLayout}
removeClippedSubviews={true}
/>
</AnimatedAccordion>
</View>
);
}
}
export default withTheme(GroupListAccordion)

120
src/components/Lists/PlanexGroups/GroupListItem.js
View file

@ -2,85 +2,65 @@
import * as React from 'react'; import * as React from 'react';
import {IconButton, List, withTheme} from 'react-native-paper'; import {IconButton, List, withTheme} from 'react-native-paper';
import * as Animatable from 'react-native-animatable'; import type {CustomTheme} from "../../../managers/ThemeManager";
import type {CustomThemeType} from '../../../managers/ThemeManager'; import type {group} from "../../../screens/Planex/GroupSelectionScreen";
import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
type PropsType = { type Props = {
theme: CustomThemeType, theme: CustomTheme,
onPress: () => void, onPress: () => void,
onStarPress: () => void, onStarPress: () => void,
item: PlanexGroupType, item: group,
favorites: Array<PlanexGroupType>, height: number,
height: number, }
};
const REPLACE_REGEX = /_/g; type State = {
isFav: boolean,
}
class GroupListItem extends React.Component<PropsType> { class GroupListItem extends React.Component<Props, State> {
isFav: boolean;
starRef = {current: null | IconButton}; constructor(props) {
super(props);
constructor(props: PropsType) { this.state = {
super(props); isFav: (props.item.isFav !== undefined && props.item.isFav),
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;
}
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;
}
onStarPress = () => { shouldComponentUpdate(prevProps: Props, prevState: State) {
const {props} = this; return (prevState.isFav !== this.state.isFav);
if (this.starRef.current != null) {
if (this.isFav) this.starRef.current.rubberBand();
else this.starRef.current.swing();
} }
props.onStarPress();
};
render(): React.Node { onStarPress = () => {
const {props} = this; this.setState({isFav: !this.state.isFav});
const {colors} = props.theme; this.props.onStarPress();
return ( }
<List.Item
title={props.item.name.replace(REPLACE_REGEX, ' ')} render() {
onPress={props.onPress} const colors = this.props.theme.colors;
left={({size}: {size: number}): React.Node => ( return (
<List.Icon size={size} icon="chevron-right" /> <List.Item
)} title={this.props.item.name}
right={({size, color}: {size: number, color: string}): React.Node => ( onPress={this.props.onPress}
<Animatable.View ref={this.starRef} useNativeDriver> left={props =>
<IconButton <List.Icon
size={size} {...props}
icon="star" icon={"chevron-right"}/>}
onPress={this.onStarPress} right={props =>
color={this.isFav ? colors.tetrisScore : color} <IconButton
{...props}
icon={"star"}
onPress={this.onStarPress}
color={this.state.isFav
? colors.tetrisScore
: props.color}
/>}
style={{
height: this.props.height,
justifyContent: 'center',
}}
/> />
</Animatable.View> );
)} }
style={{
height: props.height,
justifyContent: 'center',
}}
/>
);
}
} }
export default withTheme(GroupListItem); export default withTheme(GroupListItem);

78
src/components/Lists/Proximo/ProximoListItem.js
View file

@ -2,48 +2,48 @@
import * as React from 'react'; import * as React from 'react';
import {Avatar, List, Text, withTheme} from 'react-native-paper'; import {Avatar, List, Text, withTheme} from 'react-native-paper';
import i18n from 'i18n-js'; import i18n from "i18n-js";
import type {ProximoArticleType} from '../../../screens/Services/Proximo/ProximoMainScreen';
type PropsType = { type Props = {
onPress: () => void, onPress: Function,
color: string, color: string,
item: ProximoArticleType, item: Object,
height: number, height: number,
}; }
class ProximoListItem extends React.Component<PropsType> { class ProximoListItem extends React.Component<Props> {
shouldComponentUpdate(): boolean {
return false;
}
render(): React.Node { colors: Object;
const {props} = this;
return ( constructor(props) {
<List.Item super(props);
title={props.item.name} this.colors = props.theme.colors;
description={`${props.item.quantity} ${i18n.t( }
'screens.proximo.inStock',
)}`} shouldComponentUpdate() {
descriptionStyle={{color: props.color}} return false;
onPress={props.onPress} }
left={(): React.Node => (
<Avatar.Image render() {
style={{backgroundColor: 'transparent'}} return (
size={64} <List.Item
source={{uri: props.item.image}} title={this.props.item.name}
/> description={this.props.item.quantity + ' ' + i18n.t('screens.proximo.inStock')}
)} descriptionStyle={{color: this.props.color}}
right={(): React.Node => ( onPress={this.props.onPress}
<Text style={{fontWeight: 'bold'}}>{props.item.price}€</Text> left={() => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
)} source={{uri: this.props.item.image}}/>}
style={{ right={() =>
height: props.height, <Text style={{fontWeight: "bold"}}>
justifyContent: 'center', {this.props.item.price}€
}} </Text>}
/> style={{
); height: this.props.height,
} justifyContent: 'center',
}}
/>
);
}
} }
export default withTheme(ProximoListItem); export default withTheme(ProximoListItem);

378
src/components/Lists/Proxiwash/ProxiwashListItem.js
View file

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

122
src/components/Lists/Proxiwash/ProxiwashSectionHeader.js
View file

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

474
src/components/Mascot/Mascot.js
View file

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

529
src/components/Mascot/MascotPopup.js
View file

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

66
src/components/Mascot/SpeechArrow.js
View file

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

101
src/components/Overrides/CustomAgenda.js
View file

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

79
src/components/Overrides/CustomHTML.js
View file

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

46
src/components/Overrides/CustomHeaderButton.js
View file

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

756
src/components/Overrides/CustomIntroSlider.js
View file

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

49
src/components/Overrides/CustomModal.js
View file

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

85
src/components/Overrides/CustomSlider.js
View file

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

44
src/components/Screens/BasicLoadingScreen.js
View file

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

365
src/components/Screens/ErrorView.js
View file

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

466
src/components/Screens/WebSectionList.js
View file

@ -1,55 +1,44 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import i18n from 'i18n-js'; import {ERROR_TYPE, readData} from "../../utils/WebData";
import i18n from "i18n-js";
import {Snackbar} from 'react-native-paper'; import {Snackbar} from 'react-native-paper';
import {RefreshControl, View} from 'react-native'; import {RefreshControl, View} from "react-native";
import ErrorView from "./ErrorView";
import BasicLoadingScreen from "./BasicLoadingScreen";
import {withCollapsible} from "../../utils/withCollapsible";
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
import {Collapsible} from 'react-navigation-collapsible'; import CustomTabBar from "../Tabbar/CustomTabBar";
import {StackNavigationProp} from '@react-navigation/stack'; import {Collapsible} from "react-navigation-collapsible";
import ErrorView from './ErrorView'; import {StackNavigationProp} from "@react-navigation/stack";
import BasicLoadingScreen from './BasicLoadingScreen'; import CollapsibleSectionList from "../Collapsible/CollapsibleSectionList";
import withCollapsible from '../../utils/withCollapsible';
import CustomTabBar from '../Tabbar/CustomTabBar';
import {ERROR_TYPE, readData} from '../../utils/WebData';
import CollapsibleSectionList from '../Collapsible/CollapsibleSectionList';
import type {ApiGenericDataType} from '../../utils/WebData';
export type SectionListDataType<T> = Array<{ type Props = {
title: string, navigation: StackNavigationProp,
data: Array<T>, fetchUrl: string,
keyExtractor?: (T) => string, autoRefreshTime: number,
}>; refreshOnFocus: boolean,
renderItem: (data: { [key: string]: any }) => React.Node,
createDataset: (data: { [key: string]: any } | null, isLoading?: boolean) => Array<Object>,
onScroll: (event: SyntheticEvent<EventTarget>) => void,
collapsibleStack: Collapsible,
type PropsType<T> = { showError: boolean,
navigation: StackNavigationProp, itemHeight?: number,
fetchUrl: string, updateData?: number,
autoRefreshTime: number, renderListHeaderComponent?: (data: { [key: string]: any } | null) => React.Node,
refreshOnFocus: boolean, renderSectionHeader?: (data: { section: { [key: string]: any } }, isLoading?: boolean) => React.Node,
renderItem: (data: {item: T}) => React.Node, stickyHeader?: boolean,
createDataset: ( }
data: ApiGenericDataType | null,
isLoading?: boolean,
) => SectionListDataType<T>,
onScroll: (event: SyntheticEvent<EventTarget>) => void,
collapsibleStack: Collapsible,
showError?: boolean, type State = {
itemHeight?: number | null, refreshing: boolean,
updateData?: number, firstLoading: boolean,
renderListHeaderComponent?: (data: ApiGenericDataType | null) => React.Node, fetchedData: { [key: string]: any } | null,
renderSectionHeader?: ( snackbarVisible: boolean
data: {section: {title: string}},
isLoading?: boolean,
) => React.Node,
stickyHeader?: boolean,
}; };
type StateType = {
refreshing: boolean,
fetchedData: ApiGenericDataType | null,
snackbarVisible: boolean,
};
const MIN_REFRESH_TIME = 5 * 1000; const MIN_REFRESH_TIME = 5 * 1000;
@ -59,216 +48,211 @@ const MIN_REFRESH_TIME = 5 * 1000;
* This is a pure component, meaning it will only update if a shallow comparison of state and props is different. * 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. * To force the component to update, change the value of updateData.
*/ */
class WebSectionList<T> extends React.PureComponent<PropsType<T>, StateType> { class WebSectionList extends React.PureComponent<Props, State> {
static defaultProps = {
showError: true,
itemHeight: null,
updateData: 0,
renderListHeaderComponent: (): React.Node => null,
renderSectionHeader: (): React.Node => null,
stickyHeader: false,
};
refreshInterval: IntervalID; static defaultProps = {
stickyHeader: false,
lastRefresh: Date | null; updateData: 0,
showError: true,
constructor() {
super();
this.state = {
refreshing: false,
fetchedData: null,
snackbarVisible: false,
}; };
}
/** refreshInterval: IntervalID;
* Registers react navigation events on first screen load. lastRefresh: Date | null;
* 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 = null;
this.onRefresh();
}
/** state = {
* Refreshes data when focusing the screen and setup a refresh interval if asked to refreshing: false,
*/ firstLoading: true,
onScreenFocus = () => { fetchedData: null,
const {props} = this; snackbarVisible: false
if (props.refreshOnFocus && this.lastRefresh) this.onRefresh();
if (props.autoRefreshTime > 0)
this.refreshInterval = setInterval(this.onRefresh, props.autoRefreshTime);
};
/**
* Removes any interval on un-focus
*/
onScreenBlur = () => {
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: ApiGenericDataType) => {
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 = (
data: T,
index: number,
): {length: number, offset: number, index: number} | null => {
const {itemHeight} = this.props;
if (itemHeight == null) return null;
return {
length: itemHeight,
offset: itemHeight * index,
index,
}; };
};
getRenderSectionHeader = (data: {section: {title: string}}): React.Node => { /**
const {renderSectionHeader} = this.props; * Registers react navigation events on first screen load.
const {refreshing} = this.state; * Allows to detect when the screen is focused
if (renderSectionHeader != null) { */
return ( componentDidMount() {
<Animatable.View animation="fadeInUp" duration={500} useNativeDriver> this.props.navigation.addListener('focus', this.onScreenFocus);
{renderSectionHeader(data, refreshing)} this.props.navigation.addListener('blur', this.onScreenBlur);
</Animatable.View> this.lastRefresh = null;
); this.onRefresh();
} }
return null;
};
getRenderItem = (data: {item: T}): React.Node => { /**
const {renderItem} = this.props; * Refreshes data when focusing the screen and setup a refresh interval if asked to
return ( */
<Animatable.View animation="fadeInUp" duration={500} useNativeDriver> onScreenFocus = () => {
{renderItem(data)} if (this.props.refreshOnFocus && this.lastRefresh)
</Animatable.View> this.onRefresh();
); if (this.props.autoRefreshTime > 0)
}; this.refreshInterval = setInterval(this.onRefresh, this.props.autoRefreshTime)
}
onScroll = (event: SyntheticEvent<EventTarget>) => { /**
const {onScroll} = this.props; * Removes any interval on un-focus
if (onScroll != null) onScroll(event); */
}; onScreenBlur = () => {
clearInterval(this.refreshInterval);
}
render(): React.Node {
const {props, state} = this;
let dataset = [];
if (
state.fetchedData != null ||
(state.fetchedData == null && !props.showError)
)
dataset = props.createDataset(state.fetchedData, state.refreshing);
const {containerPaddingTop} = props.collapsibleStack; /**
return ( * Callback used when fetch is successful.
<View> * It will update the displayed data and stop the refresh animation
<CollapsibleSectionList *
sections={dataset} * @param fetchedData The newly fetched data
extraData={props.updateData} */
refreshControl={ onFetchSuccess = (fetchedData: { [key: string]: any }) => {
<RefreshControl this.setState({
progressViewOffset={containerPaddingTop} fetchedData: fetchedData,
refreshing={state.refreshing} refreshing: false,
onRefresh={this.onRefresh} firstLoading: false
/> });
} this.lastRefresh = new Date();
renderSectionHeader={this.getRenderSectionHeader} };
renderItem={this.getRenderItem}
stickySectionHeadersEnabled={props.stickyHeader} /**
style={{minHeight: '100%'}} * Callback used when fetch encountered an error.
ListHeaderComponent={ * It will reset the displayed data and show an error.
props.renderListHeaderComponent != null */
? props.renderListHeaderComponent(state.fetchedData) onFetchError = () => {
: null this.setState({
} fetchedData: null,
ListEmptyComponent={ refreshing: false,
state.refreshing ? ( firstLoading: false
<BasicLoadingScreen /> });
) : ( this.showSnackBar();
<ErrorView };
navigation={props.navigation}
errorCode={ERROR_TYPE.CONNECTION_ERROR} /**
onRefresh={this.onRefresh} * Refreshes data and shows an animations while doing it
/> */
) onRefresh = () => {
} let canRefresh;
getItemLayout={props.itemHeight != null ? this.getItemLayout : null} if (this.lastRefresh != null) {
onScroll={this.onScroll} const last = this.lastRefresh;
hasTab canRefresh = (new Date().getTime() - last.getTime()) > MIN_REFRESH_TIME;
/> } else
<Snackbar canRefresh = true;
visible={state.snackbarVisible} if (canRefresh) {
onDismiss={this.hideSnackBar} this.setState({refreshing: true});
action={{ readData(this.props.fetchUrl)
label: 'OK', .then(this.onFetchSuccess)
onPress: () => {}, .catch(this.onFetchError);
}} }
duration={4000} };
style={{
bottom: CustomTabBar.TAB_BAR_HEIGHT, /**
}}> * Shows the error popup
{i18n.t('general.listUpdateFail')} */
</Snackbar> showSnackBar = () => this.setState({snackbarVisible: true});
</View>
); /**
} * Hides the error popup
*/
hideSnackBar = () => this.setState({snackbarVisible: false});
itemLayout = (data: { [key: string]: any }, index: number) => {
const height = this.props.itemHeight;
if (height == null)
return undefined;
return {
length: height,
offset: height * index,
index
}
};
renderSectionHeader = (data: { section: { [key: string]: any } }) => {
if (this.props.renderSectionHeader != null) {
return (
<Animatable.View
animation={"fadeInUp"}
duration={500}
useNativeDriver
>
{this.props.renderSectionHeader(data, this.state.refreshing)}
</Animatable.View>
);
} else
return null;
}
renderItem = (data: {
item: { [key: string]: any },
index: number,
section: { [key: string]: any },
separators: { [key: string]: any },
}) => {
return (
<Animatable.View
animation={"fadeInUp"}
duration={500}
useNativeDriver
>
{this.props.renderItem(data)}
</Animatable.View>
);
}
onScroll = (event: SyntheticEvent<EventTarget>) => {
if (this.props.onScroll)
this.props.onScroll(event);
}
render() {
let dataset = [];
if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing);
}
const {containerPaddingTop} = this.props.collapsibleStack;
return (
<View>
<CollapsibleSectionList
sections={dataset}
extraData={this.props.updateData}
refreshControl={
<RefreshControl
progressViewOffset={containerPaddingTop}
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
/>
}
renderSectionHeader={this.renderSectionHeader}
renderItem={this.renderItem}
stickySectionHeadersEnabled={this.props.stickyHeader}
style={{minHeight: '100%'}}
ListHeaderComponent={this.props.renderListHeaderComponent != null
? this.props.renderListHeaderComponent(this.state.fetchedData)
: null}
ListEmptyComponent={this.state.refreshing
? <BasicLoadingScreen/>
: <ErrorView
{...this.props}
errorCode={ERROR_TYPE.CONNECTION_ERROR}
onRefresh={this.onRefresh}/>
}
getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined}
onScroll={this.onScroll}
hasTab={true}
/>
<Snackbar
visible={this.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 withCollapsible(WebSectionList); export default withCollapsible(WebSectionList);

436
src/components/Screens/WebViewScreen.js
View file

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

355
src/components/Tabbar/CustomTabBar.js
View file

@ -1,217 +1,180 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated} from 'react-native';
import {withTheme} from 'react-native-paper'; import {withTheme} from 'react-native-paper';
import {Collapsible} from 'react-navigation-collapsible'; import TabIcon from "./TabIcon";
import {StackNavigationProp} from '@react-navigation/stack'; import TabHomeIcon from "./TabHomeIcon";
import TabIcon from './TabIcon'; import {Animated} from 'react-native';
import TabHomeIcon from './TabHomeIcon'; import {Collapsible} from "react-navigation-collapsible";
import type {CustomThemeType} from '../../managers/ThemeManager';
type RouteType = { type Props = {
name: string, state: Object,
key: string, descriptors: Object,
params: {collapsible: Collapsible}, navigation: Object,
state: { theme: Object,
index: number, collapsibleStack: Object,
routes: Array<RouteType>, }
},
};
type PropsType = { type State = {
state: { translateY: AnimatedValue,
index: number, barSynced: boolean,
routes: Array<RouteType>, }
},
descriptors: {
[key: string]: {
options: {
tabBarLabel: string,
title: string,
},
},
},
navigation: StackNavigationProp,
theme: CustomThemeType,
};
type StateType = {
// eslint-disable-next-line flowtype/no-weak-types
translateY: any,
};
const TAB_ICONS = { const TAB_ICONS = {
proxiwash: 'tshirt-crew', proxiwash: 'tshirt-crew',
services: 'account-circle', services: 'account-circle',
planning: 'calendar-range', planning: 'calendar-range',
planex: 'clock', planex: 'clock',
}; };
class CustomTabBar extends React.Component<PropsType, StateType> { class CustomTabBar extends React.Component<Props, State> {
static TAB_BAR_HEIGHT = 48;
constructor() { static TAB_BAR_HEIGHT = 48;
super();
this.state = {
translateY: new Animated.Value(0),
};
}
/** state = {
* Navigates to the given route if it is different from the current one translateY: new Animated.Value(0),
*
* @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;
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (currentIndex !== destIndex && !event.defaultPrevented)
navigation.navigate(route.name);
}
/**
* Navigates to tetris screen on home button long press
*
* @param route
*/
onItemLongPress(route: RouteType) {
const {navigation} = this.props;
const event = navigation.emit({
type: 'tabLongPress',
target: route.key,
canPreventDefault: true,
});
if (route.name === 'home' && !event.defaultPrevented)
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): React.Node => {
let icon = TAB_ICONS[route.name];
icon = focused ? icon : `${icon}-outline`;
if (route.name !== 'home') return icon;
return null;
};
/**
* 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): React.Node => {
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}
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(): React.Node { syncTabBar = (route, index) => {
const {props} = this; const state = this.props.state;
return props.state.routes.map(this.getRenderIcon); const isFocused = state.index === index;
} if (isFocused) {
const stackState = route.state;
const stackRoute = stackState ? stackState.routes[stackState.index] : undefined;
const params: { collapsible: Collapsible } = stackRoute ? stackRoute.params : undefined;
const collapsible = params ? params.collapsible : undefined;
if (collapsible) {
this.setState({
translateY: Animated.multiply(-1.5, collapsible.translateY), // Hide tab bar faster than header bar
});
}
}
};
syncTabBar = (route: RouteType, index: number) => { /**
const {state} = this.props; * Navigates to the given route if it is different from the current one
const isFocused = state.index === index; *
if (isFocused) { * @param route Destination route
const stackState = route.state; * @param currentIndex The current route index
const stackRoute = * @param destIndex The destination route index
stackState != null ? stackState.routes[stackState.index] : null; */
const params: {collapsible: Collapsible} | null = onItemPress(route: Object, currentIndex: number, destIndex: number) {
stackRoute != null ? stackRoute.params : null; const event = this.props.navigation.emit({
const collapsible = params != null ? params.collapsible : null; type: 'tabPress',
if (collapsible != null) { target: route.key,
this.setState({ canPreventDefault: true,
translateY: Animated.multiply(-1.5, collapsible.translateY), // Hide tab bar faster than header bar
}); });
} if (currentIndex !== destIndex && !event.defaultPrevented)
this.props.navigation.navigate(route.name);
} }
};
render(): React.Node { /**
const {props, state} = this; * Navigates to tetris screen on home button long press
props.navigation.addListener('state', this.onRouteChange); *
const icons = this.getIcons(); * @param route
return ( */
// $FlowFixMe onItemLongPress(route: Object) {
<Animated.View const event = this.props.navigation.emit({
useNativeDriver type: 'tabLongPress',
style={{ target: route.key,
flexDirection: 'row', canPreventDefault: true,
height: CustomTabBar.TAB_BAR_HEIGHT, });
width: '100%', if (route.name === "home" && !event.defaultPrevented)
position: 'absolute', this.props.navigation.navigate('game-start');
bottom: 0, }
left: 0,
backgroundColor: props.theme.colors.surface, /**
transform: [{translateY: state.translateY}], * Gets an icon for the given route if it is not the home one as it uses a custom button
}}> *
{icons} * @param route
</Animated.View> * @param focused
); * @returns {null}
} */
tabBarIcon = (route, focused) => {
let icon = TAB_ICONS[route.name];
icon = focused ? icon : icon + ('-outline');
if (route.name !== "home")
return icon;
else
return null;
};
/**
* Finds the active route and syncs the tab bar animation with the header bar
*/
onRouteChange = () => {
this.props.state.routes.map(this.syncTabBar)
}
/**
* Gets a tab icon render.
* If the given route is focused, it syncs the tab bar and header bar animations together
*
* @param route The route for the icon
* @param index The index of the current route
* @returns {*}
*/
renderIcon = (route, index) => {
const state = this.props.state;
const {options} = this.props.descriptors[route.key];
const label =
options.tabBarLabel != null
? options.tabBarLabel
: options.title != null
? options.title
: route.name;
const onPress = () => this.onItemPress(route, state.index, index);
const onLongPress = () => this.onItemLongPress(route);
const isFocused = state.index === index;
const color = isFocused ? this.props.theme.colors.primary : this.props.theme.colors.tabIcon;
if (route.name !== "home") {
return <TabIcon
onPress={onPress}
onLongPress={onLongPress}
icon={this.tabBarIcon(route, isFocused)}
color={color}
label={label}
focused={isFocused}
extraData={state.index > index}
key={route.key}
/>
} else
return <TabHomeIcon
onPress={onPress}
onLongPress={onLongPress}
focused={isFocused}
key={route.key}
tabBarHeight={CustomTabBar.TAB_BAR_HEIGHT}
/>
};
getIcons() {
return this.props.state.routes.map(this.renderIcon);
}
render() {
this.props.navigation.addListener('state', this.onRouteChange);
const icons = this.getIcons();
return (
<Animated.View
useNativeDriver
style={{
flexDirection: 'row',
height: CustomTabBar.TAB_BAR_HEIGHT,
width: '100%',
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: this.props.theme.colors.surface,
transform: [{translateY: this.state.translateY}],
}}
>
{icons}
</Animated.View>
);
}
} }
export default withTheme(CustomTabBar); export default withTheme(CustomTabBar);

207
src/components/Tabbar/TabHomeIcon.js
View file

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

199
src/components/Tabbar/TabIcon.js
View file

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

24
src/constants/AvailableWebsites.js
View file

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

36
src/constants/ProxiwashConstants.js
View file

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

82
src/constants/Update.js
View file

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

236
src/managers/AprilFoolsManager.js
View file

@ -1,138 +1,130 @@
// @flow // @flow
import type {ProxiwashMachineType} from '../screens/Proxiwash/ProxiwashScreen'; import type {Machine} from "../screens/Proxiwash/ProxiwashScreen";
import type {CustomThemeType} from './ThemeManager';
import type {RuFoodCategoryType} from '../screens/Services/SelfMenuScreen';
/** /**
* Singleton class used to manage april fools * Singleton class used to manage april fools
*/ */
export default class AprilFoolsManager { export default class AprilFoolsManager {
static instance: AprilFoolsManager | null = null;
static fakeMachineNumber = [ static instance: AprilFoolsManager | null = null;
'', static fakeMachineNumber = [
'cos(ln(1))', "",
'0,5⁻¹', "cos(ln(1))",
'567/189', "0,5⁻¹",
'√2×√8', "567/189",
'√50×sin(9π/4)', "√2×√8",
'⌈π+e⌉', "√50×sin(9π/4)",
'div(rot(B))+7', "⌈π+e⌉",
'4×cosh(0)+4', "div(rot(B))+7",
'8-(-i)²', "4×cosh(0)+4",
'|5√2+5√2i|', "8-(-i)²",
'1×10¹+1×10⁰', "|5√2+5√2i|",
'Re(√192e^(iπ/6))', "1×10¹+1×10⁰",
]; "Re(√192e^(iπ/6))",
];
aprilFoolsEnabled: boolean;
aprilFoolsEnabled: boolean; constructor() {
let today = new Date();
constructor() { this.aprilFoolsEnabled = (today.getDate() === 1 && today.getMonth() === 3);
const today = new Date();
this.aprilFoolsEnabled = today.getDate() === 1 && today.getMonth() === 3;
}
/**
* Get this class instance or create one if none is found
* @returns {ThemeManager}
*/
static getInstance(): AprilFoolsManager {
if (AprilFoolsManager.instance == null)
AprilFoolsManager.instance = new AprilFoolsManager();
return AprilFoolsManager.instance;
}
/**
* Adds fake menu entries
*
* @param menu
* @returns {Object}
*/
static getFakeMenuItem(
menu: Array<RuFoodCategoryType>,
): Array<RuFoodCategoryType> {
menu[1].dishes.splice(4, 0, {name: 'Coq au vin'});
menu[1].dishes.splice(2, 0, {name: "Bat'Soupe"});
menu[1].dishes.splice(1, 0, {name: 'Pave de loup'});
menu[1].dishes.splice(0, 0, {name: 'Béranger à point'});
menu[1].dishes.splice(0, 0, {name: "Pieds d'Arnaud"});
return menu;
}
/**
* Changes proxiwash dryers order
*
* @param dryers
*/
static getNewProxiwashDryerOrderedList(
dryers: Array<ProxiwashMachineType> | null,
) {
if (dryers != null) {
const second = dryers[1];
dryers.splice(1, 1);
dryers.push(second);
} }
}
/** /**
* Changes proxiwash washers order * Get this class instance or create one if none is found
* * @returns {ThemeManager}
* @param washers */
*/ static getInstance(): AprilFoolsManager {
static getNewProxiwashWasherOrderedList( return AprilFoolsManager.instance === null ?
washers: Array<ProxiwashMachineType> | null, AprilFoolsManager.instance = new AprilFoolsManager() :
) { AprilFoolsManager.instance;
if (washers != null) {
const first = washers[0];
const second = washers[1];
const fifth = washers[4];
const ninth = washers[8];
washers.splice(8, 1, second);
washers.splice(4, 1, ninth);
washers.splice(1, 1, first);
washers.splice(0, 1, fifth);
} }
}
/** /**
* Gets the new display number for the given machine number * Adds fake menu entries
* *
* @param number * @param menu
* @returns {string} * @returns {Object}
*/ */
static getProxiwashMachineDisplayNumber(number: number): string { static getFakeMenuItem(menu: Array<{dishes: Array<{name: string}>}>) {
return AprilFoolsManager.fakeMachineNumber[number]; menu[1]["dishes"].splice(4, 0, {name: "Coq au vin"});
} menu[1]["dishes"].splice(2, 0, {name: "Bat'Soupe"});
menu[1]["dishes"].splice(1, 0, {name: "Pave de loup"});
menu[1]["dishes"].splice(0, 0, {name: "Béranger à point"});
menu[1]["dishes"].splice(0, 0, {name: "Pieds d'Arnaud"});
return menu;
}
/** /**
* Gets the new and ugly april fools theme * Changes proxiwash dryers order
* *
* @param currentTheme * @param dryers
* @returns {{colors: {textDisabled: string, agendaDayTextColor: string, surface: string, background: string, dividerBackground: string, accent: string, agendaBackgroundColor: string, tabIcon: string, card: string, primary: string}}} */
*/ static getNewProxiwashDryerOrderedList(dryers: Array<Machine> | null) {
static getAprilFoolsTheme(currentTheme: CustomThemeType): CustomThemeType { if (dryers != null) {
return { let second = dryers[1];
...currentTheme, dryers.splice(1, 1);
colors: { dryers.push(second);
...currentTheme.colors, }
primary: '#00be45', }
accent: '#00be45',
background: '#d02eee',
tabIcon: '#380d43',
card: '#eed639',
surface: '#eed639',
dividerBackground: '#c72ce4',
textDisabled: '#b9b9b9',
// Calendar/Agenda /**
agendaBackgroundColor: '#c72ce4', * Changes proxiwash washers order
agendaDayTextColor: '#6d6d6d', *
}, * @param washers
}; */
} static getNewProxiwashWasherOrderedList(washers: Array<Machine> | null) {
if (washers != null) {
let first = washers[0];
let second = washers[1];
let fifth = washers[4];
let ninth = washers[8];
washers.splice(8, 1, second);
washers.splice(4, 1, ninth);
washers.splice(1, 1, first);
washers.splice(0, 1, fifth);
}
}
isAprilFoolsEnabled(): boolean { /**
return this.aprilFoolsEnabled; * Gets the new display number for the given machine number
} *
} * @param number
* @returns {string}
*/
static getProxiwashMachineDisplayNumber(number: number) {
return AprilFoolsManager.fakeMachineNumber[number];
}
/**
* Gets the new and ugly april fools theme
*
* @param currentTheme
* @returns {{colors: {textDisabled: string, agendaDayTextColor: string, surface: string, background: string, dividerBackground: string, accent: string, agendaBackgroundColor: string, tabIcon: string, card: string, primary: string}}}
*/
static getAprilFoolsTheme(currentTheme: Object) {
return {
...currentTheme,
colors: {
...currentTheme.colors,
primary: '#00be45',
accent: '#00be45',
background: '#d02eee',
tabIcon: "#380d43",
card: "#eed639",
surface: "#eed639",
dividerBackground: '#c72ce4',
textDisabled: '#b9b9b9',
// Calendar/Agenda
agendaBackgroundColor: '#c72ce4',
agendaDayTextColor: '#6d6d6d',
},
};
}
isAprilFoolsEnabled() {
return this.aprilFoolsEnabled;
}
};

445
src/managers/AsyncStorageManager.js
View file

@ -1,7 +1,7 @@
// @flow // @flow
import AsyncStorage from '@react-native-community/async-storage'; import AsyncStorage from '@react-native-community/async-storage';
import {SERVICES_KEY} from './ServicesManager'; import {SERVICES_KEY} from "./ServicesManager";
/** /**
* Singleton used to manage preferences. * Singleton used to manage preferences.
@ -10,232 +10,227 @@ import {SERVICES_KEY} from './ServicesManager';
*/ */
export default class AsyncStorageManager { export default class AsyncStorageManager {
static instance: AsyncStorageManager | null = null;
static PREFERENCES = { static instance: AsyncStorageManager | null = null;
debugUnlocked: {
key: 'debugUnlocked',
default: '0',
},
showIntro: {
key: 'showIntro',
default: '1',
},
updateNumber: {
key: 'updateNumber',
default: '0',
},
proxiwashNotifications: {
key: 'proxiwashNotifications',
default: '5',
},
nightModeFollowSystem: {
key: 'nightModeFollowSystem',
default: '1',
},
nightMode: {
key: 'nightMode',
default: '1',
},
defaultStartScreen: {
key: 'defaultStartScreen',
default: 'home',
},
servicesShowBanner: {
key: 'servicesShowBanner',
default: '1',
},
proxiwashShowBanner: {
key: 'proxiwashShowBanner',
default: '1',
},
homeShowBanner: {
key: 'homeShowBanner',
default: '1',
},
eventsShowBanner: {
key: 'eventsShowBanner',
default: '1',
},
planexShowBanner: {
key: 'planexShowBanner',
default: '1',
},
loginShowBanner: {
key: 'loginShowBanner',
default: '1',
},
voteShowBanner: {
key: 'voteShowBanner',
default: '1',
},
equipmentShowBanner: {
key: 'equipmentShowBanner',
default: '1',
},
gameStartShowBanner: {
key: 'gameStartShowBanner',
default: '1',
},
proxiwashWatchedMachines: {
key: 'proxiwashWatchedMachines',
default: '[]',
},
showAprilFoolsStart: {
key: 'showAprilFoolsStart',
default: '1',
},
planexCurrentGroup: {
key: 'planexCurrentGroup',
default: '',
},
planexFavoriteGroups: {
key: 'planexFavoriteGroups',
default: '[]',
},
dashboardItems: {
key: 'dashboardItems',
default: JSON.stringify([
SERVICES_KEY.EMAIL,
SERVICES_KEY.WASHERS,
SERVICES_KEY.PROXIMO,
SERVICES_KEY.TUTOR_INSA,
SERVICES_KEY.RU,
]),
},
gameScores: {
key: 'gameScores',
default: '[]',
},
};
#currentPreferences: {[key: string]: string}; static PREFERENCES = {
debugUnlocked: {
constructor() { key: 'debugUnlocked',
this.#currentPreferences = {}; default: '0',
} },
showIntro: {
/** key: 'showIntro',
* Get this class instance or create one if none is found default: '1',
* @returns {AsyncStorageManager} },
*/ updateNumber: {
static getInstance(): AsyncStorageManager { key: 'updateNumber',
if (AsyncStorageManager.instance == null) default: '0',
AsyncStorageManager.instance = new AsyncStorageManager(); },
return AsyncStorageManager.instance; proxiwashNotifications: {
} key: 'proxiwashNotifications',
default: '5',
/** },
* Saves the value associated to the given key to preferences. nightModeFollowSystem: {
* key: 'nightModeFollowSystem',
* @param key default: '1',
* @param value },
*/ nightMode: {
static set( key: 'nightMode',
key: string, default: '1',
// eslint-disable-next-line flowtype/no-weak-types },
value: number | string | boolean | {...} | Array<any>, defaultStartScreen: {
) { key: 'defaultStartScreen',
AsyncStorageManager.getInstance().setPreference(key, value); default: 'home',
} },
servicesShowBanner: {
/** key: 'servicesShowBanner',
* Gets the string value of the given preference default: '1',
* },
* @param key proxiwashShowBanner: {
* @returns {string} key: 'proxiwashShowBanner',
*/ default: '1',
static getString(key: string): string { },
const value = AsyncStorageManager.getInstance().getPreference(key); homeShowBanner: {
return value != null ? value : ''; key: 'homeShowBanner',
} default: '1',
},
/** eventsShowBanner: {
* Gets the boolean value of the given preference key: 'eventsShowBanner',
* default: '1',
* @param key },
* @returns {boolean} planexShowBanner: {
*/ key: 'planexShowBanner',
static getBool(key: string): boolean { default: '1',
const value = AsyncStorageManager.getString(key); },
return value === '1' || value === 'true'; loginShowBanner: {
} key: 'loginShowBanner',
default: '1',
/** },
* Gets the number value of the given preference voteShowBanner: {
* key: 'voteShowBanner',
* @param key default: '1',
* @returns {number} },
*/ equipmentShowBanner: {
static getNumber(key: string): number { key: 'equipmentShowBanner',
return parseFloat(AsyncStorageManager.getString(key)); default: '1',
} },
gameStartShowBanner: {
/** key: 'gameStartShowBanner',
* Gets the object value of the given preference default: '1',
* },
* @param key proxiwashWatchedMachines: {
* @returns {{...}} key: 'proxiwashWatchedMachines',
*/ default: '[]',
// eslint-disable-next-line flowtype/no-weak-types },
static getObject(key: string): any { showAprilFoolsStart: {
return JSON.parse(AsyncStorageManager.getString(key)); key: 'showAprilFoolsStart',
} default: '1',
},
/** planexCurrentGroup: {
* Set preferences object current values from AsyncStorage. key: 'planexCurrentGroup',
* This function should be called at the app's start. default: '',
* },
* @return {Promise<void>} planexFavoriteGroups: {
*/ key: 'planexFavoriteGroups',
async loadPreferences() { default: '[]',
const prefKeys = []; },
// Get all available keys dashboardItems: {
Object.keys(AsyncStorageManager.PREFERENCES).forEach((key: string) => { key: 'dashboardItems',
prefKeys.push(key); default: JSON.stringify([
}); SERVICES_KEY.EMAIL,
// Get corresponding values SERVICES_KEY.WASHERS,
const resultArray = await AsyncStorage.multiGet(prefKeys); SERVICES_KEY.PROXIMO,
// Save those values for later use SERVICES_KEY.TUTOR_INSA,
resultArray.forEach((item: [string, string | null]) => { SERVICES_KEY.RU,
const key = item[0]; ]),
let val = item[1]; },
if (val === null) val = AsyncStorageManager.PREFERENCES[key].default; gameScores: {
this.#currentPreferences[key] = val; key: 'gameScores',
}); default: '[]',
} },
}
/**
* Saves the value associated to the given key to preferences. #currentPreferences: {[key: string]: string};
* This updates the preferences object and saves it to AsyncStorage.
* constructor() {
* @param key this.#currentPreferences = {};
* @param value }
*/
setPreference( /**
key: string, * Get this class instance or create one if none is found
// eslint-disable-next-line flowtype/no-weak-types * @returns {AsyncStorageManager}
value: number | string | boolean | {...} | Array<any>, */
) { static getInstance(): AsyncStorageManager {
if (AsyncStorageManager.PREFERENCES[key] != null) { return AsyncStorageManager.instance === null ?
let convertedValue; AsyncStorageManager.instance = new AsyncStorageManager() :
if (typeof value === 'string') convertedValue = value; AsyncStorageManager.instance;
else if (typeof value === 'boolean' || typeof value === 'number') }
convertedValue = value.toString();
else convertedValue = JSON.stringify(value); /**
this.#currentPreferences[key] = convertedValue; * Set preferences object current values from AsyncStorage.
AsyncStorage.setItem(key, convertedValue); * This function should be called at the app's start.
*
* @return {Promise<void>}
*/
async loadPreferences() {
let prefKeys = [];
// Get all available keys
for (let key in AsyncStorageManager.PREFERENCES) {
prefKeys.push(key);
}
// Get corresponding values
let resultArray: Array<Array<string>> = await AsyncStorage.multiGet(prefKeys);
// Save those values for later use
for (let i = 0; i < resultArray.length; i++) {
let key: string = resultArray[i][0];
let val: string | null = resultArray[i][1];
if (val === null)
val = AsyncStorageManager.PREFERENCES[key].default;
this.#currentPreferences[key] = val;
}
}
/**
* Saves the value associated to the given key to preferences.
* This updates the preferences object and saves it to AsyncStorage.
*
* @param key
* @param value
*/
setPreference(key: string, value: any) {
if (AsyncStorageManager.PREFERENCES[key] != null) {
let convertedValue = "";
if (typeof value === "string")
convertedValue = value;
else if (typeof value === "boolean" || typeof value === "number")
convertedValue = value.toString();
else
convertedValue = JSON.stringify(value);
this.#currentPreferences[key] = convertedValue;
AsyncStorage.setItem(key, convertedValue);
}
}
/**
* Gets the value at the given key.
* If the key is not available, returns null
*
* @param key
* @returns {string|null}
*/
getPreference(key: string) {
return this.#currentPreferences[key];
}
/**
* aves the value associated to the given key to preferences.
*
* @param key
* @param value
*/
static set(key: string, value: any) {
AsyncStorageManager.getInstance().setPreference(key, value);
}
/**
* Gets the string value of the given preference
*
* @param key
* @returns {boolean}
*/
static getString(key: string) {
return AsyncStorageManager.getInstance().getPreference(key);
}
/**
* Gets the boolean value of the given preference
*
* @param key
* @returns {boolean}
*/
static getBool(key: string) {
const value = AsyncStorageManager.getString(key);
return value === "1" || value === "true";
}
/**
* Gets the number value of the given preference
*
* @param key
* @returns {boolean}
*/
static getNumber(key: string) {
return parseFloat(AsyncStorageManager.getString(key));
}
/**
* Gets the object value of the given preference
*
* @param key
* @returns {boolean}
*/
static getObject(key: string) {
return JSON.parse(AsyncStorageManager.getString(key));
} }
}
/**
* Gets the value at the given key.
* If the key is not available, returns null
*
* @param key
* @returns {string|null}
*/
getPreference(key: string): string | null {
return this.#currentPreferences[key];
}
} }

297
src/managers/ConnectionManager.js
View file

@ -1,8 +1,7 @@
// @flow // @flow
import * as Keychain from 'react-native-keychain'; import * as Keychain from 'react-native-keychain';
import type {ApiDataLoginType, ApiGenericDataType} from '../utils/WebData'; import {apiRequest, ERROR_TYPE} from "../utils/WebData";
import {apiRequest, ERROR_TYPE} from '../utils/WebData';
/** /**
* champ: error * champ: error
@ -15,167 +14,161 @@ import {apiRequest, ERROR_TYPE} from '../utils/WebData';
* 500 : SERVER_ERROR -> pb coté serveur * 500 : SERVER_ERROR -> pb coté serveur
*/ */
const SERVER_NAME = 'amicale-insat.fr'; const SERVER_NAME = "amicale-insat.fr";
const AUTH_PATH = 'password'; const AUTH_PATH = "password";
export default class ConnectionManager { export default class ConnectionManager {
static instance: ConnectionManager | null = null; static instance: ConnectionManager | null = null;
#email: string; #email: string;
#token: string | null;
#token: string | null; constructor() {
this.#token = null;
}
constructor() { /**
this.#token = null; * Gets this class instance or create one if none is found
} *
* @returns {ConnectionManager}
*/
static getInstance(): ConnectionManager {
return ConnectionManager.instance === null ?
ConnectionManager.instance = new ConnectionManager() :
ConnectionManager.instance;
}
/** /**
* Gets this class instance or create one if none is found * Gets the current token
* *
* @returns {ConnectionManager} * @returns {string | null}
*/ */
static getInstance(): ConnectionManager { getToken(): string | null {
if (ConnectionManager.instance == null) return this.#token;
ConnectionManager.instance = new ConnectionManager(); }
return ConnectionManager.instance;
}
/** /**
* Gets the current token * Tries to recover login token from the secure keychain
* *
* @returns {string | null} * @returns {Promise<R>}
*/ */
getToken(): string | null { async recoverLogin() {
return this.#token; return new Promise((resolve, reject) => {
} if (this.getToken() !== null)
resolve(this.getToken());
else {
Keychain.getInternetCredentials(SERVER_NAME)
.then((data) => {
if (data) {
this.#token = data.password;
resolve(this.#token);
} else
reject(false);
})
.catch(() => {
reject(false);
});
}
});
}
/** /**
* Tries to recover login token from the secure keychain * Check if the user has a valid token
* *
* @returns Promise<string> * @returns {boolean}
*/ */
async recoverLogin(): Promise<string> { isLoggedIn() {
return new Promise( return this.getToken() !== null;
(resolve: (token: string) => void, reject: () => void) => { }
const token = this.getToken();
if (token != null) resolve(token);
else {
Keychain.getInternetCredentials(SERVER_NAME)
.then((data: Keychain.UserCredentials | false) => {
if (
data != null &&
data.password != null &&
typeof data.password === 'string'
) {
this.#token = data.password;
resolve(this.#token);
} else reject();
})
.catch((): void => reject());
}
},
);
}
/** /**
* Check if the user has a valid token * Saves the login token in the secure keychain
* *
* @returns {boolean} * @param email
*/ * @param token
isLoggedIn(): boolean { * @returns {Promise<R>}
return this.getToken() !== null; */
} async saveLogin(email: string, token: string) {
return new Promise((resolve, reject) => {
Keychain.setInternetCredentials(SERVER_NAME, 'token', token)
.then(() => {
this.#token = token;
this.#email = email;
resolve(true);
})
.catch(() => {
reject(false);
});
});
}
/** /**
* Saves the login token in the secure keychain * Deletes the login token from the keychain
* *
* @param email * @returns {Promise<R>}
* @param token */
* @returns Promise<void> async disconnect() {
*/ return new Promise((resolve, reject) => {
async saveLogin(email: string, token: string): Promise<void> { Keychain.resetInternetCredentials(SERVER_NAME)
return new Promise((resolve: () => void, reject: () => void) => { .then(() => {
Keychain.setInternetCredentials(SERVER_NAME, 'token', token) this.#token = null;
.then(() => { resolve(true);
this.#token = token; })
this.#email = email; .catch(() => {
resolve(); reject(false);
}) });
.catch((): void => reject()); });
}); }
}
/**
* Deletes the login token from the keychain
*
* @returns Promise<void>
*/
async disconnect(): Promise<void> {
return new Promise((resolve: () => void, reject: () => void) => {
Keychain.resetInternetCredentials(SERVER_NAME)
.then(() => {
this.#token = null;
resolve();
})
.catch((): void => reject());
});
}
/** /**
* Sends the given login and password to the api. * Sends the given login and password to the api.
* If the combination is valid, the login token is received and saved in the secure keychain. * If the combination is valid, the login token is received and saved in the secure keychain.
* If not, the promise is rejected with the corresponding error code. * If not, the promise is rejected with the corresponding error code.
* *
* @param email * @param email
* @param password * @param password
* @returns Promise<void> * @returns {Promise<R>}
*/ */
async connect(email: string, password: string): Promise<void> { async connect(email: string, password: string) {
return new Promise( return new Promise((resolve, reject) => {
(resolve: () => void, reject: (error: number) => void) => { const data = {
const data = { email: email,
email, password: password,
password, };
}; apiRequest(AUTH_PATH, 'POST', data)
apiRequest(AUTH_PATH, 'POST', data) .then((response) => {
.then((response: ApiDataLoginType) => { this.saveLogin(email, response.token)
if (response.token != null) { .then(() => {
this.saveLogin(email, response.token) resolve(true);
.then((): void => resolve()) })
.catch((): void => reject(ERROR_TYPE.TOKEN_SAVE)); .catch(() => {
} else reject(ERROR_TYPE.SERVER_ERROR); reject(ERROR_TYPE.TOKEN_SAVE);
}) });
.catch((error: number): void => reject(error)); })
}, .catch((error) => reject(error));
); });
} }
/** /**
* Sends an authenticated request with the login token to the API * Sends an authenticated request with the login token to the API
* *
* @param path * @param path
* @param params * @param params
* @returns Promise<ApiGenericDataType> * @returns {Promise<R>}
*/ */
async authenticatedRequest( async authenticatedRequest(path: string, params: Object) {
path: string, return new Promise((resolve, reject) => {
params: {...}, if (this.getToken() !== null) {
): Promise<ApiGenericDataType> { let data = {
return new Promise( token: this.getToken(),
( ...params
resolve: (response: ApiGenericDataType) => void, };
reject: (error: number) => void, apiRequest(path, 'POST', data)
) => { .then((response) => resolve(response))
if (this.getToken() !== null) { .catch((error) => reject(error));
const data = { } else
...params, reject(ERROR_TYPE.TOKEN_RETRIEVE);
token: this.getToken(), });
}; }
apiRequest(path, 'POST', data)
.then((response: ApiGenericDataType): void => resolve(response))
.catch((error: number): void => reject(error));
} else reject(ERROR_TYPE.TOKEN_RETRIEVE);
},
);
}
} }

38
src/managers/DashboardManager.js
View file

@ -1,21 +1,27 @@
// @flow // @flow
import type {ServiceItemType} from './ServicesManager'; import type {ServiceItem} from "./ServicesManager";
import ServicesManager from './ServicesManager'; import ServicesManager from "./ServicesManager";
import {getSublistWithIds} from '../utils/Utils'; import {StackNavigationProp} from "@react-navigation/stack";
import AsyncStorageManager from './AsyncStorageManager'; import {getSublistWithIds} from "../utils/Utils";
import AsyncStorageManager from "./AsyncStorageManager";
export default class DashboardManager extends ServicesManager { export default class DashboardManager extends ServicesManager {
getCurrentDashboard(): Array<ServiceItemType | null> {
const dashboardIdList = AsyncStorageManager.getObject( constructor(nav: StackNavigationProp) {
AsyncStorageManager.PREFERENCES.dashboardItems.key, super(nav)
); }
const allDatasets = [
...this.amicaleDataset, getCurrentDashboard(): Array<ServiceItem> {
...this.studentsDataset, const dashboardIdList = AsyncStorageManager
...this.insaDataset, .getObject(AsyncStorageManager.PREFERENCES.dashboardItems.key);
...this.specialDataset, const allDatasets = [
]; ...this.amicaleDataset,
return getSublistWithIds(dashboardIdList, allDatasets); ...this.studentsDataset,
} ...this.insaDataset,
...this.specialDataset,
];
return getSublistWithIds(dashboardIdList, allDatasets);
}
} }

107
src/managers/DateManager.js
View file

@ -7,68 +7,63 @@ import i18n from 'i18n-js';
* Translations are hardcoded as toLocaleDateString does not work on current android JS engine * Translations are hardcoded as toLocaleDateString does not work on current android JS engine
*/ */
export default class DateManager { export default class DateManager {
static instance: DateManager | null = null; static instance: DateManager | null = null;
daysOfWeek = []; daysOfWeek = [];
monthsOfYear = [];
monthsOfYear = []; constructor() {
this.daysOfWeek.push(i18n.t("date.daysOfWeek.sunday")); // 0 represents sunday
this.daysOfWeek.push(i18n.t("date.daysOfWeek.monday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.tuesday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.wednesday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.thursday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.friday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.saturday"));
constructor() { this.monthsOfYear.push(i18n.t("date.monthsOfYear.january"));
this.daysOfWeek.push(i18n.t('date.daysOfWeek.sunday')); // 0 represents sunday this.monthsOfYear.push(i18n.t("date.monthsOfYear.february"));
this.daysOfWeek.push(i18n.t('date.daysOfWeek.monday')); this.monthsOfYear.push(i18n.t("date.monthsOfYear.march"));
this.daysOfWeek.push(i18n.t('date.daysOfWeek.tuesday')); this.monthsOfYear.push(i18n.t("date.monthsOfYear.april"));
this.daysOfWeek.push(i18n.t('date.daysOfWeek.wednesday')); this.monthsOfYear.push(i18n.t("date.monthsOfYear.may"));
this.daysOfWeek.push(i18n.t('date.daysOfWeek.thursday')); this.monthsOfYear.push(i18n.t("date.monthsOfYear.june"));
this.daysOfWeek.push(i18n.t('date.daysOfWeek.friday')); this.monthsOfYear.push(i18n.t("date.monthsOfYear.july"));
this.daysOfWeek.push(i18n.t('date.daysOfWeek.saturday')); this.monthsOfYear.push(i18n.t("date.monthsOfYear.august"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.september"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.october"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.november"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.december"));
}
this.monthsOfYear.push(i18n.t('date.monthsOfYear.january')); /**
this.monthsOfYear.push(i18n.t('date.monthsOfYear.february')); * Get this class instance or create one if none is found
this.monthsOfYear.push(i18n.t('date.monthsOfYear.march')); * @returns {DateManager}
this.monthsOfYear.push(i18n.t('date.monthsOfYear.april')); */
this.monthsOfYear.push(i18n.t('date.monthsOfYear.may')); static getInstance(): DateManager {
this.monthsOfYear.push(i18n.t('date.monthsOfYear.june')); return DateManager.instance === null ?
this.monthsOfYear.push(i18n.t('date.monthsOfYear.july')); DateManager.instance = new DateManager() :
this.monthsOfYear.push(i18n.t('date.monthsOfYear.august')); DateManager.instance;
this.monthsOfYear.push(i18n.t('date.monthsOfYear.september')); }
this.monthsOfYear.push(i18n.t('date.monthsOfYear.october'));
this.monthsOfYear.push(i18n.t('date.monthsOfYear.november'));
this.monthsOfYear.push(i18n.t('date.monthsOfYear.december'));
}
/** static isWeekend(date: Date) {
* Get this class instance or create one if none is found return date.getDay() === 6 || date.getDay() === 0;
* @returns {DateManager} }
*/
static getInstance(): DateManager {
if (DateManager.instance == null) DateManager.instance = new DateManager();
return DateManager.instance;
}
static isWeekend(date: Date): boolean { getMonthsOfYear() {
return date.getDay() === 6 || date.getDay() === 0; return this.monthsOfYear;
} }
getMonthsOfYear(): Array<string> { /**
return this.monthsOfYear; * Gets a translated string representing the given date.
} *
* @param dateString The date with the format YYYY-MM-DD
* @return {string} The translated string
*/
getTranslatedDate(dateString: string) {
let dateArray = dateString.split('-');
let date = new Date();
date.setFullYear(parseInt(dateArray[0]), parseInt(dateArray[1]) - 1, parseInt(dateArray[2]));
return this.daysOfWeek[date.getDay()] + " " + date.getDate() + " " + this.monthsOfYear[date.getMonth()] + " " + date.getFullYear();
}
/**
* Gets a translated string representing the given date.
*
* @param dateString The date with the format YYYY-MM-DD
* @return {string} The translated string
*/
getTranslatedDate(dateString: string): string {
const dateArray = dateString.split('-');
const date = new Date();
date.setFullYear(
parseInt(dateArray[0], 10),
parseInt(dateArray[1], 10) - 1,
parseInt(dateArray[2], 10),
);
return `${this.daysOfWeek[date.getDay()]} ${date.getDate()} ${
this.monthsOfYear[date.getMonth()]
} ${date.getFullYear()}`;
}
} }

24
src/managers/LocaleManager.js
View file

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

698
src/managers/ServicesManager.js
View file

@ -1,384 +1,378 @@
// @flow // @flow
import i18n from 'i18n-js'; import i18n from "i18n-js";
import {StackNavigationProp} from '@react-navigation/stack'; import AvailableWebsites from "../constants/AvailableWebsites";
import AvailableWebsites from '../constants/AvailableWebsites'; import {StackNavigationProp} from "@react-navigation/stack";
import ConnectionManager from './ConnectionManager'; import ConnectionManager from "./ConnectionManager";
import type {FullDashboardType} from '../screens/Home/HomeScreen'; import type {fullDashboard} from "../screens/Home/HomeScreen";
import getStrippedServicesList from '../utils/Services';
// AMICALE // AMICALE
const CLUBS_IMAGE = const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
'https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png'; const PROFILE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProfilAmicaliste.png";
const PROFILE_IMAGE = const EQUIPMENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Materiel.png";
'https://etud.insa-toulouse.fr/~amicale_app/images/ProfilAmicaliste.png'; const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
const EQUIPMENT_IMAGE = const AMICALE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/WebsiteAmicale.png";
'https://etud.insa-toulouse.fr/~amicale_app/images/Materiel.png';
const VOTE_IMAGE = 'https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png';
const AMICALE_IMAGE =
'https://etud.insa-toulouse.fr/~amicale_app/images/WebsiteAmicale.png';
// STUDENTS // STUDENTS
const PROXIMO_IMAGE = const PROXIMO_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png"
'https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png'; const WIKETUD_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud.png";
const WIKETUD_IMAGE = const EE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/EEC.png";
'https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud.png'; const TUTORINSA_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/TutorINSA.png";
const EE_IMAGE = 'https://etud.insa-toulouse.fr/~amicale_app/images/EEC.png';
const TUTORINSA_IMAGE =
'https://etud.insa-toulouse.fr/~amicale_app/images/TutorINSA.png';
// INSA // INSA
const BIB_IMAGE = 'https://etud.insa-toulouse.fr/~amicale_app/images/Bib.png'; const BIB_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bib.png";
const RU_IMAGE = 'https://etud.insa-toulouse.fr/~amicale_app/images/RU.png'; const RU_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/RU.png";
const ROOM_IMAGE = const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png";
'https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png'; const EMAIL_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bluemind.png";
const EMAIL_IMAGE = const ENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ENT.png";
'https://etud.insa-toulouse.fr/~amicale_app/images/Bluemind.png'; const ACCOUNT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Account.png";
const ENT_IMAGE = 'https://etud.insa-toulouse.fr/~amicale_app/images/ENT.png';
const ACCOUNT_IMAGE =
'https://etud.insa-toulouse.fr/~amicale_app/images/Account.png';
// SPECIAL // SPECIAL
const WASHER_IMAGE = const WASHER_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashLaveLinge.png";
'https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashLaveLinge.png'; const DRYER_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashSecheLinge.png";
const DRYER_IMAGE =
'https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashSecheLinge.png';
const AMICALE_LOGO = require('../../assets/amicale.png'); const AMICALE_LOGO = require("../../assets/amicale.png");
export const SERVICES_KEY = { export const SERVICES_KEY = {
CLUBS: 'clubs', CLUBS: "clubs",
PROFILE: 'profile', PROFILE: "profile",
EQUIPMENT: 'equipment', EQUIPMENT: "equipment",
AMICALE_WEBSITE: 'amicale_website', AMICALE_WEBSITE: "amicale_website",
VOTE: 'vote', VOTE: "vote",
PROXIMO: 'proximo', PROXIMO: "proximo",
WIKETUD: 'wiketud', WIKETUD: "wiketud",
ELUS_ETUDIANTS: 'elus_etudiants', ELUS_ETUDIANTS: "elus_etudiants",
TUTOR_INSA: 'tutor_insa', TUTOR_INSA: "tutor_insa",
RU: 'ru', RU: "ru",
AVAILABLE_ROOMS: 'available_rooms', AVAILABLE_ROOMS: "available_rooms",
BIB: 'bib', BIB: "bib",
EMAIL: 'email', EMAIL: "email",
ENT: 'ent', ENT: "ent",
INSA_ACCOUNT: 'insa_account', INSA_ACCOUNT: "insa_account",
WASHERS: 'washers', WASHERS: "washers",
DRYERS: 'dryers', DRYERS: "dryers",
}; }
export const SERVICES_CATEGORIES_KEY = { export const SERVICES_CATEGORIES_KEY = {
AMICALE: 'amicale', AMICALE: "amicale",
STUDENTS: 'students', STUDENTS: "students",
INSA: 'insa', INSA: "insa",
SPECIAL: 'special', SPECIAL: "special",
}; }
export type ServiceItemType = {
key: string,
title: string,
subtitle: string,
image: string,
onPress: () => void,
badgeFunction?: (dashboard: FullDashboardType) => number,
};
export type ServiceCategoryType = { export type ServiceItem = {
key: string, key: string,
title: string, title: string,
subtitle: string, subtitle: string,
image: string | number, image: string,
content: Array<ServiceItemType>, onPress: () => void,
}; badgeFunction?: (dashboard: fullDashboard) => number,
}
export type ServiceCategory = {
key: string,
title: string,
subtitle: string,
image: string | number,
content: Array<ServiceItem>
}
export default class ServicesManager { export default class ServicesManager {
navigation: StackNavigationProp;
amicaleDataset: Array<ServiceItemType>; navigation: StackNavigationProp;
studentsDataset: Array<ServiceItemType>; amicaleDataset: Array<ServiceItem>;
studentsDataset: Array<ServiceItem>;
insaDataset: Array<ServiceItem>;
specialDataset: Array<ServiceItem>;
insaDataset: Array<ServiceItemType>; categoriesDataset: Array<ServiceCategory>;
specialDataset: Array<ServiceItemType>; constructor(nav: StackNavigationProp) {
this.navigation = nav;
this.amicaleDataset = [
{
key: SERVICES_KEY.CLUBS,
title: i18n.t('screens.clubs.title'),
subtitle: i18n.t('screens.services.descriptions.clubs'),
image: CLUBS_IMAGE,
onPress: () => this.onAmicaleServicePress("club-list"),
},
{
key: SERVICES_KEY.PROFILE,
title: i18n.t('screens.profile.title'),
subtitle: i18n.t('screens.services.descriptions.profile'),
image: PROFILE_IMAGE,
onPress: () => this.onAmicaleServicePress("profile"),
},
{
key: SERVICES_KEY.EQUIPMENT,
title: i18n.t('screens.equipment.title'),
subtitle: i18n.t('screens.services.descriptions.equipment'),
image: EQUIPMENT_IMAGE,
onPress: () => this.onAmicaleServicePress("equipment-list"),
},
{
key: SERVICES_KEY.AMICALE_WEBSITE,
title: i18n.t('screens.websites.amicale'),
subtitle: i18n.t('screens.services.descriptions.amicaleWebsite'),
image: AMICALE_IMAGE,
onPress: () => nav.navigate("website", {
host: AvailableWebsites.websites.AMICALE,
title: i18n.t('screens.websites.amicale')
}),
},
{
key: SERVICES_KEY.VOTE,
title: i18n.t('screens.vote.title'),
subtitle: i18n.t('screens.services.descriptions.vote'),
image: VOTE_IMAGE,
onPress: () => this.onAmicaleServicePress("vote"),
},
];
this.studentsDataset = [
{
key: SERVICES_KEY.PROXIMO,
title: i18n.t('screens.proximo.title'),
subtitle: i18n.t('screens.services.descriptions.proximo'),
image: PROXIMO_IMAGE,
onPress: () => nav.navigate("proximo"),
badgeFunction: (dashboard: fullDashboard) => dashboard.proximo_articles
},
{
key: SERVICES_KEY.WIKETUD,
title: "Wiketud",
subtitle: i18n.t('screens.services.descriptions.wiketud'),
image: WIKETUD_IMAGE,
onPress: () => nav.navigate("website", {host: AvailableWebsites.websites.WIKETUD, title: "Wiketud"}),
},
{
key: SERVICES_KEY.ELUS_ETUDIANTS,
title: "Élus Étudiants",
subtitle: i18n.t('screens.services.descriptions.elusEtudiants'),
image: EE_IMAGE,
onPress: () => nav.navigate("website", {
host: AvailableWebsites.websites.ELUS_ETUDIANTS,
title: "Élus Étudiants"
}),
},
{
key: SERVICES_KEY.TUTOR_INSA,
title: "Tutor'INSA",
subtitle: i18n.t('screens.services.descriptions.tutorInsa'),
image: TUTORINSA_IMAGE,
onPress: () => nav.navigate("website", {
host: AvailableWebsites.websites.TUTOR_INSA,
title: "Tutor'INSA"
}),
badgeFunction: (dashboard: fullDashboard) => dashboard.available_tutorials
},
];
this.insaDataset = [
{
key: SERVICES_KEY.RU,
title: i18n.t('screens.menu.title'),
subtitle: i18n.t('screens.services.descriptions.self'),
image: RU_IMAGE,
onPress: () => nav.navigate("self-menu"),
badgeFunction: (dashboard: fullDashboard) => dashboard.today_menu.length
},
{
key: SERVICES_KEY.AVAILABLE_ROOMS,
title: i18n.t('screens.websites.rooms'),
subtitle: i18n.t('screens.services.descriptions.availableRooms'),
image: ROOM_IMAGE,
onPress: () => nav.navigate("website", {
host: AvailableWebsites.websites.AVAILABLE_ROOMS,
title: i18n.t('screens.websites.rooms')
}),
},
{
key: SERVICES_KEY.BIB,
title: i18n.t('screens.websites.bib'),
subtitle: i18n.t('screens.services.descriptions.bib'),
image: BIB_IMAGE,
onPress: () => nav.navigate("website", {
host: AvailableWebsites.websites.BIB,
title: i18n.t('screens.websites.bib')
}),
},
{
key: SERVICES_KEY.EMAIL,
title: i18n.t('screens.websites.mails'),
subtitle: i18n.t('screens.services.descriptions.mails'),
image: EMAIL_IMAGE,
onPress: () => nav.navigate("website", {
host: AvailableWebsites.websites.BLUEMIND,
title: i18n.t('screens.websites.mails')
}),
},
{
key: SERVICES_KEY.ENT,
title: i18n.t('screens.websites.ent'),
subtitle: i18n.t('screens.services.descriptions.ent'),
image: ENT_IMAGE,
onPress: () => nav.navigate("website", {
host: AvailableWebsites.websites.ENT,
title: i18n.t('screens.websites.ent')
}),
},
{
key: SERVICES_KEY.INSA_ACCOUNT,
title: i18n.t('screens.insaAccount.title'),
subtitle: i18n.t('screens.services.descriptions.insaAccount'),
image: ACCOUNT_IMAGE,
onPress: () => nav.navigate("website", {
host: AvailableWebsites.websites.INSA_ACCOUNT,
title: i18n.t('screens.insaAccount.title')
}),
},
];
this.specialDataset = [
{
key: SERVICES_KEY.WASHERS,
title: i18n.t('screens.proxiwash.washers'),
subtitle: i18n.t('screens.services.descriptions.washers'),
image: WASHER_IMAGE,
onPress: () => nav.navigate("proxiwash"),
badgeFunction: (dashboard: fullDashboard) => dashboard.available_washers
},
{
key: SERVICES_KEY.DRYERS,
title: i18n.t('screens.proxiwash.dryers'),
subtitle: i18n.t('screens.services.descriptions.washers'),
image: DRYER_IMAGE,
onPress: () => nav.navigate("proxiwash"),
badgeFunction: (dashboard: fullDashboard) => dashboard.available_dryers
}
];
this.categoriesDataset = [
{
key: SERVICES_CATEGORIES_KEY.AMICALE,
title: i18n.t("screens.services.categories.amicale"),
subtitle: i18n.t("screens.services.more"),
image: AMICALE_LOGO,
content: this.amicaleDataset
},
{
key: SERVICES_CATEGORIES_KEY.STUDENTS,
title: i18n.t("screens.services.categories.students"),
subtitle: i18n.t("screens.services.more"),
image: 'account-group',
content: this.studentsDataset
},
{
key: SERVICES_CATEGORIES_KEY.INSA,
title: i18n.t("screens.services.categories.insa"),
subtitle: i18n.t("screens.services.more"),
image: 'school',
content: this.insaDataset
},
{
key: SERVICES_CATEGORIES_KEY.SPECIAL,
title: i18n.t("screens.services.categories.special"),
subtitle: i18n.t("screens.services.categories.special"),
image: 'star',
content: this.specialDataset
},
];
}
categoriesDataset: Array<ServiceCategoryType>; /**
* Redirects the user to the login screen if he is not logged in
*
* @param route
* @returns {null}
*/
onAmicaleServicePress(route: string) {
if (ConnectionManager.getInstance().isLoggedIn())
this.navigation.navigate(route);
else
this.navigation.navigate("login", {nextScreen: route});
}
constructor(nav: StackNavigationProp) { /**
this.navigation = nav; * Gets the given services list without items of the given ids
this.amicaleDataset = [ *
{ * @param idList The ids of items to remove
key: SERVICES_KEY.CLUBS, * @param sourceList The item list to use as source
title: i18n.t('screens.clubs.title'), * @returns {[]}
subtitle: i18n.t('screens.services.descriptions.clubs'), */
image: CLUBS_IMAGE, getStrippedList(idList: Array<string>, sourceList: Array<{key: string, [key: string]: any}>) {
onPress: (): void => this.onAmicaleServicePress('club-list'), let newArray = [];
}, for (let i = 0; i < sourceList.length; i++) {
{ const item = sourceList[i];
key: SERVICES_KEY.PROFILE, if (!(idList.includes(item.key)))
title: i18n.t('screens.profile.title'), newArray.push(item);
subtitle: i18n.t('screens.services.descriptions.profile'), }
image: PROFILE_IMAGE, return newArray;
onPress: (): void => this.onAmicaleServicePress('profile'), }
},
{
key: SERVICES_KEY.EQUIPMENT,
title: i18n.t('screens.equipment.title'),
subtitle: i18n.t('screens.services.descriptions.equipment'),
image: EQUIPMENT_IMAGE,
onPress: (): void => this.onAmicaleServicePress('equipment-list'),
},
{
key: SERVICES_KEY.AMICALE_WEBSITE,
title: i18n.t('screens.websites.amicale'),
subtitle: i18n.t('screens.services.descriptions.amicaleWebsite'),
image: AMICALE_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.AMICALE,
title: i18n.t('screens.websites.amicale'),
}),
},
{
key: SERVICES_KEY.VOTE,
title: i18n.t('screens.vote.title'),
subtitle: i18n.t('screens.services.descriptions.vote'),
image: VOTE_IMAGE,
onPress: (): void => this.onAmicaleServicePress('vote'),
},
];
this.studentsDataset = [
{
key: SERVICES_KEY.PROXIMO,
title: i18n.t('screens.proximo.title'),
subtitle: i18n.t('screens.services.descriptions.proximo'),
image: PROXIMO_IMAGE,
onPress: (): void => nav.navigate('proximo'),
badgeFunction: (dashboard: FullDashboardType): number =>
dashboard.proximo_articles,
},
{
key: SERVICES_KEY.WIKETUD,
title: 'Wiketud',
subtitle: i18n.t('screens.services.descriptions.wiketud'),
image: WIKETUD_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.WIKETUD,
title: 'Wiketud',
}),
},
{
key: SERVICES_KEY.ELUS_ETUDIANTS,
title: 'Élus Étudiants',
subtitle: i18n.t('screens.services.descriptions.elusEtudiants'),
image: EE_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.ELUS_ETUDIANTS,
title: 'Élus Étudiants',
}),
},
{
key: SERVICES_KEY.TUTOR_INSA,
title: "Tutor'INSA",
subtitle: i18n.t('screens.services.descriptions.tutorInsa'),
image: TUTORINSA_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.TUTOR_INSA,
title: "Tutor'INSA",
}),
badgeFunction: (dashboard: FullDashboardType): number =>
dashboard.available_tutorials,
},
];
this.insaDataset = [
{
key: SERVICES_KEY.RU,
title: i18n.t('screens.menu.title'),
subtitle: i18n.t('screens.services.descriptions.self'),
image: RU_IMAGE,
onPress: (): void => nav.navigate('self-menu'),
badgeFunction: (dashboard: FullDashboardType): number =>
dashboard.today_menu.length,
},
{
key: SERVICES_KEY.AVAILABLE_ROOMS,
title: i18n.t('screens.websites.rooms'),
subtitle: i18n.t('screens.services.descriptions.availableRooms'),
image: ROOM_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.AVAILABLE_ROOMS,
title: i18n.t('screens.websites.rooms'),
}),
},
{
key: SERVICES_KEY.BIB,
title: i18n.t('screens.websites.bib'),
subtitle: i18n.t('screens.services.descriptions.bib'),
image: BIB_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.BIB,
title: i18n.t('screens.websites.bib'),
}),
},
{
key: SERVICES_KEY.EMAIL,
title: i18n.t('screens.websites.mails'),
subtitle: i18n.t('screens.services.descriptions.mails'),
image: EMAIL_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.BLUEMIND,
title: i18n.t('screens.websites.mails'),
}),
},
{
key: SERVICES_KEY.ENT,
title: i18n.t('screens.websites.ent'),
subtitle: i18n.t('screens.services.descriptions.ent'),
image: ENT_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.ENT,
title: i18n.t('screens.websites.ent'),
}),
},
{
key: SERVICES_KEY.INSA_ACCOUNT,
title: i18n.t('screens.insaAccount.title'),
subtitle: i18n.t('screens.services.descriptions.insaAccount'),
image: ACCOUNT_IMAGE,
onPress: (): void =>
nav.navigate('website', {
host: AvailableWebsites.websites.INSA_ACCOUNT,
title: i18n.t('screens.insaAccount.title'),
}),
},
];
this.specialDataset = [
{
key: SERVICES_KEY.WASHERS,
title: i18n.t('screens.proxiwash.washers'),
subtitle: i18n.t('screens.services.descriptions.washers'),
image: WASHER_IMAGE,
onPress: (): void => nav.navigate('proxiwash'),
badgeFunction: (dashboard: FullDashboardType): number =>
dashboard.available_washers,
},
{
key: SERVICES_KEY.DRYERS,
title: i18n.t('screens.proxiwash.dryers'),
subtitle: i18n.t('screens.services.descriptions.washers'),
image: DRYER_IMAGE,
onPress: (): void => nav.navigate('proxiwash'),
badgeFunction: (dashboard: FullDashboardType): number =>
dashboard.available_dryers,
},
];
this.categoriesDataset = [
{
key: SERVICES_CATEGORIES_KEY.AMICALE,
title: i18n.t('screens.services.categories.amicale'),
subtitle: i18n.t('screens.services.more'),
image: AMICALE_LOGO,
content: this.amicaleDataset,
},
{
key: SERVICES_CATEGORIES_KEY.STUDENTS,
title: i18n.t('screens.services.categories.students'),
subtitle: i18n.t('screens.services.more'),
image: 'account-group',
content: this.studentsDataset,
},
{
key: SERVICES_CATEGORIES_KEY.INSA,
title: i18n.t('screens.services.categories.insa'),
subtitle: i18n.t('screens.services.more'),
image: 'school',
content: this.insaDataset,
},
{
key: SERVICES_CATEGORIES_KEY.SPECIAL,
title: i18n.t('screens.services.categories.special'),
subtitle: i18n.t('screens.services.categories.special'),
image: 'star',
content: this.specialDataset,
},
];
}
/** /**
* Redirects the user to the login screen if he is not logged in * Gets the list of amicale's services
* *
* @param route * @param excludedItems Ids of items to exclude from the returned list
* @returns {null} * @returns {Array<ServiceItem>}
*/ */
onAmicaleServicePress(route: string) { getAmicaleServices(excludedItems?: Array<string>) {
if (ConnectionManager.getInstance().isLoggedIn()) if (excludedItems != null)
this.navigation.navigate(route); return this.getStrippedList(excludedItems, this.amicaleDataset)
else this.navigation.navigate('login', {nextScreen: route}); else
} return this.amicaleDataset;
}
/** /**
* Gets the list of amicale's services * Gets the list of students' services
* *
* @param excludedItems Ids of items to exclude from the returned list * @param excludedItems Ids of items to exclude from the returned list
* @returns {Array<ServiceItemType>} * @returns {Array<ServiceItem>}
*/ */
getAmicaleServices(excludedItems?: Array<string>): Array<ServiceItemType> { getStudentServices(excludedItems?: Array<string>) {
if (excludedItems != null) if (excludedItems != null)
return getStrippedServicesList(excludedItems, this.amicaleDataset); return this.getStrippedList(excludedItems, this.studentsDataset)
return this.amicaleDataset; else
} return this.studentsDataset;
}
/** /**
* Gets the list of students' services * Gets the list of INSA's services
* *
* @param excludedItems Ids of items to exclude from the returned list * @param excludedItems Ids of items to exclude from the returned list
* @returns {Array<ServiceItemType>} * @returns {Array<ServiceItem>}
*/ */
getStudentServices(excludedItems?: Array<string>): Array<ServiceItemType> { getINSAServices(excludedItems?: Array<string>) {
if (excludedItems != null) if (excludedItems != null)
return getStrippedServicesList(excludedItems, this.studentsDataset); return this.getStrippedList(excludedItems, this.insaDataset)
return this.studentsDataset; else
} return this.insaDataset;
}
/** /**
* Gets the list of INSA's services * Gets the list of special services
* *
* @param excludedItems Ids of items to exclude from the returned list * @param excludedItems Ids of items to exclude from the returned list
* @returns {Array<ServiceItemType>} * @returns {Array<ServiceItem>}
*/ */
getINSAServices(excludedItems?: Array<string>): Array<ServiceItemType> { getSpecialServices(excludedItems?: Array<string>) {
if (excludedItems != null) if (excludedItems != null)
return getStrippedServicesList(excludedItems, this.insaDataset); return this.getStrippedList(excludedItems, this.specialDataset)
return this.insaDataset; else
} return this.specialDataset;
}
/** /**
* Gets the list of special services * Gets all services sorted by category
* *
* @param excludedItems Ids of items to exclude from the returned list * @param excludedItems Ids of categories to exclude from the returned list
* @returns {Array<ServiceItemType>} * @returns {Array<ServiceCategory>}
*/ */
getSpecialServices(excludedItems?: Array<string>): Array<ServiceItemType> { getCategories(excludedItems?: Array<string>) {
if (excludedItems != null) if (excludedItems != null)
return getStrippedServicesList(excludedItems, this.specialDataset); return this.getStrippedList(excludedItems, this.categoriesDataset)
return this.specialDataset; else
} return this.categoriesDataset;
}
/**
* Gets all services sorted by category
*
* @param excludedItems Ids of categories to exclude from the returned list
* @returns {Array<ServiceCategoryType>}
*/
getCategories(excludedItems?: Array<string>): Array<ServiceCategoryType> {
if (excludedItems != null)
return getStrippedServicesList(excludedItems, this.categoriesDataset);
return this.categoriesDataset;
}
} }

490
src/managers/ThemeManager.js
View file

@ -1,288 +1,282 @@
// @flow // @flow
import AsyncStorageManager from "./AsyncStorageManager";
import {DarkTheme, DefaultTheme} from 'react-native-paper'; import {DarkTheme, DefaultTheme} from 'react-native-paper';
import AprilFoolsManager from "./AprilFoolsManager";
import {Appearance} from 'react-native-appearance'; import {Appearance} from 'react-native-appearance';
import AsyncStorageManager from './AsyncStorageManager';
import AprilFoolsManager from './AprilFoolsManager';
const colorScheme = Appearance.getColorScheme(); const colorScheme = Appearance.getColorScheme();
export type CustomThemeType = { export type CustomTheme = {
...DefaultTheme, ...DefaultTheme,
colors: { colors: {
primary: string, primary: string,
accent: string, accent: string,
tabIcon: string, tabIcon: string,
card: string, card: string,
dividerBackground: string, dividerBackground: string,
ripple: string, ripple: string,
textDisabled: string, textDisabled: string,
icon: string, icon: string,
subtitle: string, subtitle: string,
success: string, success: string,
warning: string, warning: string,
danger: string, danger: string,
// Calendar/Agenda // Calendar/Agenda
agendaBackgroundColor: string, agendaBackgroundColor: string,
agendaDayTextColor: string, agendaDayTextColor: string,
// PROXIWASH // PROXIWASH
proxiwashFinishedColor: string, proxiwashFinishedColor: string,
proxiwashReadyColor: string, proxiwashReadyColor: string,
proxiwashRunningColor: string, proxiwashRunningColor: string,
proxiwashRunningNotStartedColor: string, proxiwashRunningNotStartedColor: string,
proxiwashRunningBgColor: string, proxiwashRunningBgColor: string,
proxiwashBrokenColor: string, proxiwashBrokenColor: string,
proxiwashErrorColor: string, proxiwashErrorColor: string,
proxiwashUnknownColor: string, proxiwashUnknownColor: string,
// Screens // Screens
planningColor: string, planningColor: string,
proximoColor: string, proximoColor: string,
proxiwashColor: string, proxiwashColor: string,
menuColor: string, menuColor: string,
tutorinsaColor: string, tutorinsaColor: string,
// Tetris // Tetris
tetrisBackground: string, tetrisBackground: string,
tetrisBorder: string, tetrisBorder: string,
tetrisScore: string, tetrisScore: string,
tetrisI: string, tetrisI: string,
tetrisO: string, tetrisO: string,
tetrisT: string, tetrisT: string,
tetrisS: string, tetrisS: string,
tetrisZ: string, tetrisZ: string,
tetrisJ: string, tetrisJ: string,
tetrisL: string, tetrisL: string,
gameGold: string, gameGold: string,
gameSilver: string, gameSilver: string,
gameBronze: string, gameBronze: string,
// Mascot Popup // Mascot Popup
mascotMessageArrow: string, mascotMessageArrow: string,
}, },
}; }
/** /**
* Singleton class used to manage themes * Singleton class used to manage themes
*/ */
export default class ThemeManager { export default class ThemeManager {
static instance: ThemeManager | null = null;
updateThemeCallback: null | (() => void); static instance: ThemeManager | null = null;
updateThemeCallback: Function;
constructor() { constructor() {
this.updateThemeCallback = null; this.updateThemeCallback = null;
} }
/** /**
* Gets the light theme * Gets the light theme
* *
* @return {CustomThemeType} Object containing theme variables * @return {CustomTheme} Object containing theme variables
* */ * */
static getWhiteTheme(): CustomThemeType { static getWhiteTheme(): CustomTheme {
return { return {
...DefaultTheme, ...DefaultTheme,
colors: { colors: {
...DefaultTheme.colors, ...DefaultTheme.colors,
primary: '#be1522', primary: '#be1522',
accent: '#be1522', accent: '#be1522',
tabIcon: '#929292', tabIcon: "#929292",
card: '#fff', card: "#fff",
dividerBackground: '#e2e2e2', dividerBackground: '#e2e2e2',
ripple: 'rgba(0,0,0,0.2)', ripple: "rgba(0,0,0,0.2)",
textDisabled: '#c1c1c1', textDisabled: '#c1c1c1',
icon: '#5d5d5d', icon: '#5d5d5d',
subtitle: '#707070', subtitle: '#707070',
success: '#5cb85c', success: "#5cb85c",
warning: '#f0ad4e', warning: "#f0ad4e",
danger: '#d9534f', danger: "#d9534f",
cc: 'dst', cc: 'dst',
// Calendar/Agenda // Calendar/Agenda
agendaBackgroundColor: '#f3f3f4', agendaBackgroundColor: '#f3f3f4',
agendaDayTextColor: '#636363', agendaDayTextColor: '#636363',
// PROXIWASH // PROXIWASH
proxiwashFinishedColor: '#a5dc9d', proxiwashFinishedColor: "#a5dc9d",
proxiwashReadyColor: 'transparent', proxiwashReadyColor: "transparent",
proxiwashRunningColor: '#a0ceff', proxiwashRunningColor: "#a0ceff",
proxiwashRunningNotStartedColor: '#c9e0ff', proxiwashRunningNotStartedColor: "#c9e0ff",
proxiwashRunningBgColor: '#c7e3ff', proxiwashRunningBgColor: "#c7e3ff",
proxiwashBrokenColor: '#ffa8a2', proxiwashBrokenColor: "#ffa8a2",
proxiwashErrorColor: '#ffa8a2', proxiwashErrorColor: "#ffa8a2",
proxiwashUnknownColor: '#b6b6b6', proxiwashUnknownColor: "#b6b6b6",
// Screens // Screens
planningColor: '#d9b10a', planningColor: '#d9b10a',
proximoColor: '#ec5904', proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee', proxiwashColor: '#1fa5ee',
menuColor: '#e91314', menuColor: '#e91314',
tutorinsaColor: '#f93943', tutorinsaColor: '#f93943',
// Tetris // Tetris
tetrisBackground: '#f0f0f0', tetrisBackground: '#f0f0f0',
tetrisScore: '#e2bd33', tetrisScore: '#e2bd33',
tetrisI: '#3cd9e6', tetrisI: '#3cd9e6',
tetrisO: '#ffdd00', tetrisO: '#ffdd00',
tetrisT: '#a716e5', tetrisT: '#a716e5',
tetrisS: '#09c528', tetrisS: '#09c528',
tetrisZ: '#ff0009', tetrisZ: '#ff0009',
tetrisJ: '#2a67e3', tetrisJ: '#2a67e3',
tetrisL: '#da742d', tetrisL: '#da742d',
gameGold: '#ffd610', gameGold: "#ffd610",
gameSilver: '#7b7b7b', gameSilver: "#7b7b7b",
gameBronze: '#a15218', gameBronze: "#a15218",
// Mascot Popup // Mascot Popup
mascotMessageArrow: '#dedede', mascotMessageArrow: "#dedede",
}, },
}; };
} }
/** /**
* Gets the dark theme * Gets the dark theme
* *
* @return {CustomThemeType} Object containing theme variables * @return {CustomTheme} Object containing theme variables
* */ * */
static getDarkTheme(): CustomThemeType { static getDarkTheme(): CustomTheme {
return { return {
...DarkTheme, ...DarkTheme,
colors: { colors: {
...DarkTheme.colors, ...DarkTheme.colors,
primary: '#be1522', primary: '#be1522',
accent: '#be1522', accent: '#be1522',
tabBackground: '#181818', tabBackground: "#181818",
tabIcon: '#6d6d6d', tabIcon: "#6d6d6d",
card: 'rgb(18,18,18)', card: "rgb(18,18,18)",
dividerBackground: '#222222', dividerBackground: '#222222',
ripple: 'rgba(255,255,255,0.2)', ripple: "rgba(255,255,255,0.2)",
textDisabled: '#5b5b5b', textDisabled: '#5b5b5b',
icon: '#b3b3b3', icon: '#b3b3b3',
subtitle: '#aaaaaa', subtitle: '#aaaaaa',
success: '#5cb85c', success: "#5cb85c",
warning: '#f0ad4e', warning: "#f0ad4e",
danger: '#d9534f', danger: "#d9534f",
// Calendar/Agenda // Calendar/Agenda
agendaBackgroundColor: '#171717', agendaBackgroundColor: '#171717',
agendaDayTextColor: '#6d6d6d', agendaDayTextColor: '#6d6d6d',
// PROXIWASH // PROXIWASH
proxiwashFinishedColor: '#31682c', proxiwashFinishedColor: "#31682c",
proxiwashReadyColor: 'transparent', proxiwashReadyColor: "transparent",
proxiwashRunningColor: '#213c79', proxiwashRunningColor: "#213c79",
proxiwashRunningNotStartedColor: '#1e263e', proxiwashRunningNotStartedColor: "#1e263e",
proxiwashRunningBgColor: '#1a2033', proxiwashRunningBgColor: "#1a2033",
proxiwashBrokenColor: '#7e2e2f', proxiwashBrokenColor: "#7e2e2f",
proxiwashErrorColor: '#7e2e2f', proxiwashErrorColor: "#7e2e2f",
proxiwashUnknownColor: '#535353', proxiwashUnknownColor: "#535353",
// Screens // Screens
planningColor: '#d99e09', planningColor: '#d99e09',
proximoColor: '#ec5904', proximoColor: '#ec5904',
proxiwashColor: '#1fa5ee', proxiwashColor: '#1fa5ee',
menuColor: '#b81213', menuColor: '#b81213',
tutorinsaColor: '#f93943', tutorinsaColor: '#f93943',
// Tetris // Tetris
tetrisBackground: '#181818', tetrisBackground: '#181818',
tetrisScore: '#e2d707', tetrisScore: '#e2d707',
tetrisI: '#30b3be', tetrisI: '#30b3be',
tetrisO: '#c1a700', tetrisO: '#c1a700',
tetrisT: '#9114c7', tetrisT: '#9114c7',
tetrisS: '#08a121', tetrisS: '#08a121',
tetrisZ: '#b50008', tetrisZ: '#b50008',
tetrisJ: '#0f37b9', tetrisJ: '#0f37b9',
tetrisL: '#b96226', tetrisL: '#b96226',
gameGold: '#ffd610', gameGold: "#ffd610",
gameSilver: '#7b7b7b', gameSilver: "#7b7b7b",
gameBronze: '#a15218', gameBronze: "#a15218",
// Mascot Popup // Mascot Popup
mascotMessageArrow: '#323232', mascotMessageArrow: "#323232",
}, },
}; };
} }
/** /**
* Get this class instance or create one if none is found * Get this class instance or create one if none is found
* *
* @returns {ThemeManager} * @returns {ThemeManager}
*/ */
static getInstance(): ThemeManager { static getInstance(): ThemeManager {
if (ThemeManager.instance == null) return ThemeManager.instance === null ?
ThemeManager.instance = new ThemeManager(); ThemeManager.instance = new ThemeManager() :
return ThemeManager.instance; ThemeManager.instance;
} }
/** /**
* Gets night mode status. * Gets night mode status.
* If Follow System Preferences is enabled, will first use system theme. * If Follow System Preferences is enabled, will first use system theme.
* If disabled or not available, will use value stored din preferences * If disabled or not available, will use value stored din preferences
* *
* @returns {boolean} Night mode state * @returns {boolean} Night mode state
*/ */
static getNightMode(): boolean { static getNightMode(): boolean {
return ( return (AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightMode.key) &&
(AsyncStorageManager.getBool( (!AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key)
AsyncStorageManager.PREFERENCES.nightMode.key, || colorScheme === 'no-preference')) ||
) && (AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key)
(!AsyncStorageManager.getBool( && colorScheme === 'dark');
AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key, }
) ||
colorScheme === 'no-preference')) ||
(AsyncStorageManager.getBool(
AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
) &&
colorScheme === 'dark')
);
}
/** /**
* Get the current theme based on night mode and events * Get the current theme based on night mode and events
* *
* @returns {CustomThemeType} The current theme * @returns {CustomTheme} The current theme
*/ */
static getCurrentTheme(): CustomThemeType { static getCurrentTheme(): CustomTheme {
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getWhiteTheme()); return AprilFoolsManager.getAprilFoolsTheme(ThemeManager.getWhiteTheme());
return ThemeManager.getBaseTheme(); else
} return ThemeManager.getBaseTheme()
}
/** /**
* Get the theme based on night mode * Get the theme based on night mode
* *
* @return {CustomThemeType} The theme * @return {CustomTheme} The theme
*/ */
static getBaseTheme(): CustomThemeType { static getBaseTheme(): CustomTheme {
if (ThemeManager.getNightMode()) return ThemeManager.getDarkTheme(); if (ThemeManager.getNightMode())
return ThemeManager.getWhiteTheme(); return ThemeManager.getDarkTheme();
} else
return ThemeManager.getWhiteTheme();
}
/** /**
* Sets the function to be called when the theme is changed (allows for general reload of the app) * Sets the function to be called when the theme is changed (allows for general reload of the app)
* *
* @param callback Function to call after theme change * @param callback Function to call after theme change
*/ */
setUpdateThemeCallback(callback: () => void) { setUpdateThemeCallback(callback: () => void) {
this.updateThemeCallback = callback; this.updateThemeCallback = callback;
} }
/** /**
* Set night mode and save it to preferences * Set night mode and save it to preferences
* *
* @param isNightMode True to enable night mode, false to disable * @param isNightMode True to enable night mode, false to disable
*/ */
setNightMode(isNightMode: boolean) { setNightMode(isNightMode: boolean) {
AsyncStorageManager.set( AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.nightMode.key, isNightMode);
AsyncStorageManager.PREFERENCES.nightMode.key, if (this.updateThemeCallback != null)
isNightMode, this.updateThemeCallback();
); }
if (this.updateThemeCallback != null) this.updateThemeCallback();
} };
}

395
src/navigation/MainNavigator.js
View file

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

487
src/navigation/TabNavigator.js
View file

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

102
src/screens/About/AboutDependenciesScreen.js
View file

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

673
src/screens/About/AboutScreen.js
View file

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

356
src/screens/About/DebugScreen.js
View file

@ -1,211 +1,183 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {View} from 'react-native'; import {View} from "react-native";
import { import AsyncStorageManager from "../../managers/AsyncStorageManager";
Button, import CustomModal from "../../components/Overrides/CustomModal";
List, import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
Subheading, import {StackNavigationProp} from "@react-navigation/stack";
TextInput, import {Modalize} from "react-native-modalize";
Title, import type {CustomTheme} from "../../managers/ThemeManager";
withTheme, import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
} from 'react-native-paper';
import {Modalize} from 'react-native-modalize';
import CustomModal from '../../components/Overrides/CustomModal';
import AsyncStorageManager from '../../managers/AsyncStorageManager';
import type {CustomThemeType} from '../../managers/ThemeManager';
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
type PreferenceItemType = { type PreferenceItem = {
key: string, key: string,
default: string, default: string,
current: string, current: string,
}
type Props = {
navigation: StackNavigationProp,
theme: CustomTheme
}; };
type PropsType = { type State = {
theme: CustomThemeType, modalCurrentDisplayItem: PreferenceItem,
}; currentPreferences: Array<PreferenceItem>,
}
type StateType = {
modalCurrentDisplayItem: PreferenceItemType,
currentPreferences: Array<PreferenceItemType>,
};
/** /**
* Class defining the Debug screen. * Class defining the Debug screen.
* This screen allows the user to get and modify information on the app/device. * This screen allows the user to get and modify information on the app/device.
*/ */
class DebugScreen extends React.Component<PropsType, StateType> { class DebugScreen extends React.Component<Props, State> {
modalRef: Modalize;
modalInputValue: string; modalRef: Modalize;
modalInputValue: string;
/** /**
* Copies user preferences to state for easier manipulation * Copies user preferences to state for easier manipulation
* *
* @param props * @param props
*/ */
constructor(props: PropsType) { constructor(props) {
super(props); super(props);
this.modalInputValue = ''; this.modalInputValue = "";
const currentPreferences: Array<PreferenceItemType> = []; let currentPreferences : Array<PreferenceItem> = [];
// eslint-disable-next-line flowtype/no-weak-types Object.values(AsyncStorageManager.PREFERENCES).map((object: any) => {
Object.values(AsyncStorageManager.PREFERENCES).forEach((object: any) => { let newObject: PreferenceItem = {...object};
const newObject: PreferenceItemType = {...object}; newObject.current = AsyncStorageManager.getString(newObject.key);
newObject.current = AsyncStorageManager.getString(newObject.key); currentPreferences.push(newObject);
currentPreferences.push(newObject); });
}); this.state = {
this.state = { modalCurrentDisplayItem: {},
modalCurrentDisplayItem: {}, currentPreferences: currentPreferences
currentPreferences, };
};
}
/**
* Gets the edit modal content
*
* @return {*}
*/
getModalContent(): React.Node {
const {props, state} = this;
return (
<View
style={{
flex: 1,
padding: 20,
}}>
<Title>{state.modalCurrentDisplayItem.key}</Title>
<Subheading>
Default: {state.modalCurrentDisplayItem.default}
</Subheading>
<Subheading>
Current: {state.modalCurrentDisplayItem.current}
</Subheading>
<TextInput
label="New Value"
onChangeText={(text: string) => {
this.modalInputValue = text;
}}
/>
<View
style={{
flexDirection: 'row',
marginTop: 10,
}}>
<Button
mode="contained"
dark
color={props.theme.colors.success}
onPress={() => {
this.saveNewPrefs(
state.modalCurrentDisplayItem.key,
this.modalInputValue,
);
}}>
Save new value
</Button>
<Button
mode="contained"
dark
color={props.theme.colors.danger}
onPress={() => {
this.saveNewPrefs(
state.modalCurrentDisplayItem.key,
state.modalCurrentDisplayItem.default,
);
}}>
Reset to default
</Button>
</View>
</View>
);
}
getRenderItem = ({item}: {item: PreferenceItemType}): React.Node => {
return (
<List.Item
title={item.key}
description="Click to edit"
onPress={() => {
this.showEditModal(item);
}}
/>
);
};
/**
* Callback used when receiving the modal ref
*
* @param ref
*/
onModalRef = (ref: Modalize) => {
this.modalRef = ref;
};
/**
* Shows the edit modal
*
* @param item
*/
showEditModal(item: PreferenceItemType) {
this.setState({
modalCurrentDisplayItem: item,
});
if (this.modalRef) this.modalRef.open();
}
/**
* Finds the index of the given key in the preferences array
*
* @param key THe key to find the index of
* @returns {number}
*/
findIndexOfKey(key: string): number {
const {currentPreferences} = this.state;
let index = -1;
for (let i = 0; i < currentPreferences.length; i += 1) {
if (currentPreferences[i].key === key) {
index = i;
break;
}
} }
return index;
}
/** /**
* Saves the new value of the given preference * Shows the edit modal
* *
* @param key The pref key * @param item
* @param value The pref value */
*/ showEditModal(item: PreferenceItem) {
saveNewPrefs(key: string, value: string) { this.setState({
this.setState((prevState: StateType): { modalCurrentDisplayItem: item
currentPreferences: Array<PreferenceItemType>, });
} => { if (this.modalRef) {
const currentPreferences = [...prevState.currentPreferences]; this.modalRef.open();
currentPreferences[this.findIndexOfKey(key)].current = value; }
return {currentPreferences}; }
});
AsyncStorageManager.set(key, value);
this.modalRef.close();
}
render(): React.Node { /**
const {state} = this; * Gets the edit modal content
return ( *
<View> * @return {*}
<CustomModal onRef={this.onModalRef}> */
{this.getModalContent()} getModalContent() {
</CustomModal> return (
{/* $FlowFixMe */} <View style={{
<CollapsibleFlatList flex: 1,
data={state.currentPreferences} padding: 20
extraData={state.currentPreferences} }}>
renderItem={this.getRenderItem} <Title>{this.state.modalCurrentDisplayItem.key}</Title>
/> <Subheading>Default: {this.state.modalCurrentDisplayItem.default}</Subheading>
</View> <Subheading>Current: {this.state.modalCurrentDisplayItem.current}</Subheading>
); <TextInput
} label='New Value'
onChangeText={(text) => this.modalInputValue = text}
/>
<View style={{
flexDirection: 'row',
marginTop: 10,
}}>
<Button
mode="contained"
dark={true}
color={this.props.theme.colors.success}
onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
Save new value
</Button>
<Button
mode="contained"
dark={true}
color={this.props.theme.colors.danger}
onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}>
Reset to default
</Button>
</View>
</View>
);
}
/**
* Finds the index of the given key in the preferences array
*
* @param key THe key to find the index of
* @returns {number}
*/
findIndexOfKey(key: string) {
let index = -1;
for (let i = 0; i < this.state.currentPreferences.length; i++) {
if (this.state.currentPreferences[i].key === key) {
index = i;
break;
}
}
return index;
}
/**
* Saves the new value of the given preference
*
* @param key The pref key
* @param value The pref value
*/
saveNewPrefs(key: string, value: string) {
this.setState((prevState) => {
let currentPreferences = [...prevState.currentPreferences];
currentPreferences[this.findIndexOfKey(key)].current = value;
return {currentPreferences};
});
AsyncStorageManager.set(key, value);
this.modalRef.close();
}
/**
* Callback used when receiving the modal ref
*
* @param ref
*/
onModalRef = (ref: Modalize) => {
this.modalRef = ref;
}
renderItem = ({item}: {item: PreferenceItem}) => {
return (
<List.Item
title={item.key}
description={'Click to edit'}
onPress={() => this.showEditModal(item)}
/>
);
};
render() {
return (
<View>
<CustomModal onRef={this.onModalRef}>
{this.getModalContent()}
</CustomModal>
{/*$FlowFixMe*/}
<CollapsibleFlatList
data={this.state.currentPreferences}
extraData={this.state.currentPreferences}
renderItem={this.renderItem}
/>
</View>
);
}
} }
export default withTheme(DebugScreen); export default withTheme(DebugScreen);

256
src/screens/Amicale/AmicaleContactScreen.js
View file

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

80
src/screens/Amicale/Clubs/ClubAboutScreen.js
View file

@ -4,49 +4,49 @@ import * as React from 'react';
import {Image, View} from 'react-native'; import {Image, View} from 'react-native';
import {Card, List, Text, withTheme} from 'react-native-paper'; import {Card, List, Text, withTheme} from 'react-native-paper';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import Autolink from 'react-native-autolink'; import Autolink from "react-native-autolink";
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView'; import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
import AMICALE_ICON from '../../../../assets/amicale.png';
type Props = {};
const CONTACT_LINK = 'clubs@amicale-insat.fr'; const CONTACT_LINK = 'clubs@amicale-insat.fr';
// eslint-disable-next-line react/prefer-stateless-function class ClubAboutScreen extends React.Component<Props> {
class ClubAboutScreen extends React.Component<null> {
render(): React.Node { render() {
return ( return (
<CollapsibleScrollView style={{padding: 5}}> <CollapsibleScrollView style={{padding: 5}}>
<View <View style={{
style={{ width: '100%',
width: '100%', height: 100,
height: 100, marginTop: 20,
marginTop: 20, marginBottom: 20,
marginBottom: 20, justifyContent: 'center',
justifyContent: 'center', alignItems: 'center'
alignItems: 'center', }}>
}}> <Image
<Image source={require('../../../../assets/amicale.png')}
source={AMICALE_ICON} style={{flex: 1, resizeMode: "contain"}}
style={{flex: 1, resizeMode: 'contain'}} resizeMode="contain"/>
resizeMode="contain" </View>
/> <Text>{i18n.t("screens.clubs.about.text")}</Text>
</View> <Card style={{margin: 5}}>
<Text>{i18n.t('screens.clubs.about.text')}</Text> <Card.Title
<Card style={{margin: 5}}> title={i18n.t("screens.clubs.about.title")}
<Card.Title subtitle={i18n.t("screens.clubs.about.subtitle")}
title={i18n.t('screens.clubs.about.title')} left={props => <List.Icon {...props} icon={'information'}/>}
subtitle={i18n.t('screens.clubs.about.subtitle')} />
left={({size}: {size: number}): React.Node => ( <Card.Content>
<List.Icon size={size} icon="information" /> <Text>{i18n.t("screens.clubs.about.message")}</Text>
)} <Autolink
/> text={CONTACT_LINK}
<Card.Content> component={Text}
<Text>{i18n.t('screens.clubs.about.message')}</Text> />
<Autolink text={CONTACT_LINK} component={Text} /> </Card.Content>
</Card.Content> </Card>
</Card> </CollapsibleScrollView>
</CollapsibleScrollView> );
); }
}
} }
export default withTheme(ClubAboutScreen); export default withTheme(ClubAboutScreen);

464
src/screens/Amicale/Clubs/ClubDisplayScreen.js
View file

@ -2,276 +2,252 @@
import * as React from 'react'; import * as React from 'react';
import {Linking, View} from 'react-native'; import {Linking, View} from 'react-native';
import { import {Avatar, Button, Card, Chip, Paragraph, withTheme} from 'react-native-paper';
Avatar,
Button,
Card,
Chip,
Paragraph,
withTheme,
} from 'react-native-paper';
import ImageModal from 'react-native-image-modal'; import ImageModal from 'react-native-image-modal';
import i18n from 'i18n-js'; import i18n from "i18n-js";
import {StackNavigationProp} from '@react-navigation/stack'; import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen'; import CustomHTML from "../../../components/Overrides/CustomHTML";
import CustomHTML from '../../../components/Overrides/CustomHTML'; import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
import CustomTabBar from '../../../components/Tabbar/CustomTabBar'; import type {category, club} from "./ClubListScreen";
import type {ClubCategoryType, ClubType} from './ClubListScreen'; import type {CustomTheme} from "../../../managers/ThemeManager";
import type {CustomThemeType} from '../../../managers/ThemeManager'; import {StackNavigationProp} from "@react-navigation/stack";
import {ERROR_TYPE} from '../../../utils/WebData'; import {ERROR_TYPE} from "../../../utils/WebData";
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView'; import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
import type {ApiGenericDataType} from '../../../utils/WebData';
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
route: { route: {
params?: { params?: {
data?: ClubType, data?: club,
categories?: Array<ClubCategoryType>, categories?: Array<category>,
clubId?: number, clubId?: number,
}, ...
}, },
... theme: CustomTheme
},
theme: CustomThemeType,
}; };
const AMICALE_MAIL = 'clubs@amicale-insat.fr'; type State = {
imageModalVisible: boolean,
};
const AMICALE_MAIL = "clubs@amicale-insat.fr";
/** /**
* Class defining a club event information page. * Class defining a club event information page.
* If called with data and categories navigation parameters, will use those to display the data. * If called with data and categories navigation parameters, will use those to display the data.
* If called with clubId parameter, will fetch the information on the server * If called with clubId parameter, will fetch the information on the server
*/ */
class ClubDisplayScreen extends React.Component<PropsType> { class ClubDisplayScreen extends React.Component<Props, State> {
displayData: ClubType | null;
categories: Array<ClubCategoryType> | null; displayData: club | null;
categories: Array<category> | null;
clubId: number;
clubId: number; shouldFetchData: boolean;
shouldFetchData: boolean; state = {
imageModalVisible: false,
};
constructor(props: PropsType) { constructor(props) {
super(props); super(props);
if (props.route.params != null) { if (this.props.route.params != null) {
if ( if (this.props.route.params.data != null && this.props.route.params.categories != null) {
props.route.params.data != null && this.displayData = this.props.route.params.data;
props.route.params.categories != null this.categories = this.props.route.params.categories;
) { this.clubId = this.props.route.params.data.id;
this.displayData = props.route.params.data; this.shouldFetchData = false;
this.categories = props.route.params.categories; } else if (this.props.route.params.clubId != null) {
this.clubId = props.route.params.data.id; this.displayData = null;
this.shouldFetchData = false; this.categories = null;
} else if (props.route.params.clubId != null) { this.clubId = this.props.route.params.clubId;
this.displayData = null; this.shouldFetchData = true;
this.categories = null; }
this.clubId = props.route.params.clubId; }
this.shouldFetchData = true;
}
} }
}
/** /**
* Gets the name of the category with the given ID * Gets the name of the category with the given ID
* *
* @param id The category's ID * @param id The category's ID
* @returns {string|*} * @returns {string|*}
*/ */
getCategoryName(id: number): string { getCategoryName(id: number) {
let categoryName = ''; if (this.categories !== null) {
if (this.categories !== null) { for (let i = 0; i < this.categories.length; i++) {
this.categories.forEach((item: ClubCategoryType) => { if (id === this.categories[i].id)
if (id === item.id) categoryName = item.name; return this.categories[i].name;
}); }
}
return "";
} }
return categoryName;
}
/** /**
* Gets the view for rendering categories * Gets the view for rendering categories
* *
* @param categories The categories to display (max 2) * @param categories The categories to display (max 2)
* @returns {null|*} * @returns {null|*}
*/ */
getCategoriesRender(categories: Array<number | null>): React.Node { getCategoriesRender(categories: [number, number]) {
if (this.categories == null) return null; if (this.categories === null)
return null;
const final = []; let final = [];
categories.forEach((cat: number | null) => { for (let i = 0; i < categories.length; i++) {
if (cat != null) { let cat = categories[i];
final.push( if (cat !== null) {
<Chip style={{marginRight: 5}} key={cat}> final.push(
{this.getCategoryName(cat)} <Chip
</Chip>, style={{marginRight: 5}}
key={i.toString()}>
{this.getCategoryName(cat)}
</Chip>
);
}
}
return <View style={{flexDirection: 'row', marginTop: 5}}>{final}</View>;
}
/**
* Gets the view for rendering club managers if any
*
* @param managers The list of manager names
* @param email The club contact email
* @returns {*}
*/
getManagersRender(managers: Array<string>, email: string | null) {
let managersListView = [];
for (let i = 0; i < managers.length; i++) {
managersListView.push(<Paragraph key={i.toString()}>{managers[i]}</Paragraph>)
}
const hasManagers = managers.length > 0;
return (
<Card style={{marginTop: 10, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
<Card.Title
title={i18n.t('screens.clubs.managers')}
subtitle={hasManagers ? i18n.t('screens.clubs.managersSubtitle') : i18n.t('screens.clubs.managersUnavailable')}
left={(props) => <Avatar.Icon
{...props}
style={{backgroundColor: 'transparent'}}
color={hasManagers ? this.props.theme.colors.success : this.props.theme.colors.primary}
icon="account-tie"/>}
/>
<Card.Content>
{managersListView}
{this.getEmailButton(email, hasManagers)}
</Card.Content>
</Card>
); );
}
});
return <View style={{flexDirection: 'row', marginTop: 5}}>{final}</View>;
}
/**
* Gets the view for rendering club managers if any
*
* @param managers The list of manager names
* @param email The club contact email
* @returns {*}
*/
getManagersRender(managers: Array<string>, email: string | null): React.Node {
const {props} = this;
const managersListView = [];
managers.forEach((item: string) => {
managersListView.push(<Paragraph key={item}>{item}</Paragraph>);
});
const hasManagers = managers.length > 0;
return (
<Card
style={{marginTop: 10, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
<Card.Title
title={i18n.t('screens.clubs.managers')}
subtitle={
hasManagers
? i18n.t('screens.clubs.managersSubtitle')
: i18n.t('screens.clubs.managersUnavailable')
}
left={({size}: {size: number}): React.Node => (
<Avatar.Icon
size={size}
style={{backgroundColor: 'transparent'}}
color={
hasManagers
? props.theme.colors.success
: props.theme.colors.primary
}
icon="account-tie"
/>
)}
/>
<Card.Content>
{managersListView}
{ClubDisplayScreen.getEmailButton(email, hasManagers)}
</Card.Content>
</Card>
);
}
/**
* Gets the email button to contact the club, or the amicale if the club does not have any managers
*
* @param email The club contact email
* @param hasManagers True if the club has managers
* @returns {*}
*/
static getEmailButton(
email: string | null,
hasManagers: boolean,
): React.Node {
const destinationEmail =
email != null && hasManagers ? email : AMICALE_MAIL;
const text =
email != null && hasManagers
? i18n.t('screens.clubs.clubContact')
: i18n.t('screens.clubs.amicaleContact');
return (
<Card.Actions>
<Button
icon="email"
mode="contained"
onPress={() => {
Linking.openURL(`mailto:${destinationEmail}`);
}}
style={{marginLeft: 'auto'}}>
{text}
</Button>
</Card.Actions>
);
}
getScreen = (response: Array<ApiGenericDataType | null>): React.Node => {
const {props} = this;
let data: ClubType | null = null;
if (response[0] != null) {
[data] = response;
this.updateHeaderTitle(data);
} }
if (data != null) {
return (
<CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab>
{this.getCategoriesRender(data.category)}
{data.logo !== null ? (
<View
style={{
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 10,
marginBottom: 10,
}}>
<ImageModal
resizeMode="contain"
imageBackgroundColor={props.theme.colors.background}
style={{
width: 300,
height: 300,
}}
source={{
uri: data.logo,
}}
/>
</View>
) : (
<View />
)}
{data.description !== null ? ( /**
// Surround description with div to allow text styling if the description is not html * Gets the email button to contact the club, or the amicale if the club does not have any managers
<Card.Content> *
<CustomHTML html={data.description} /> * @param email The club contact email
</Card.Content> * @param hasManagers True if the club has managers
) : ( * @returns {*}
<View /> */
)} getEmailButton(email: string | null, hasManagers: boolean) {
{this.getManagersRender(data.responsibles, data.email)} const destinationEmail = email != null && hasManagers
</CollapsibleScrollView> ? email
); : AMICALE_MAIL;
const text = email != null && hasManagers
? i18n.t("screens.clubs.clubContact")
: i18n.t("screens.clubs.amicaleContact");
return (
<Card.Actions>
<Button
icon="email"
mode="contained"
onPress={() => Linking.openURL('mailto:' + destinationEmail)}
style={{marginLeft: 'auto'}}
>
{text}
</Button>
</Card.Actions>
);
} }
return null;
};
/** /**
* Updates the header title to match the given club * Updates the header title to match the given club
* *
* @param data The club data * @param data The club data
*/ */
updateHeaderTitle(data: ClubType) { updateHeaderTitle(data: club) {
const {props} = this; this.props.navigation.setOptions({title: data.name})
props.navigation.setOptions({title: data.name}); }
}
render(): React.Node { getScreen = (response: Array<{ [key: string]: any } | null>) => {
const {props} = this; let data: club | null = null;
if (this.shouldFetchData) if (response[0] != null) {
return ( data = response[0];
<AuthenticatedScreen this.updateHeaderTitle(data);
navigation={props.navigation} }
requests={[ if (data != null) {
{ return (
link: 'clubs/info', <CollapsibleScrollView
params: {id: this.clubId}, style={{paddingLeft: 5, paddingRight: 5}}
mandatory: true, hasTab={true}
}, >
]} {this.getCategoriesRender(data.category)}
renderFunction={this.getScreen} {data.logo !== null ?
errorViewOverride={[ <View style={{
{ marginLeft: 'auto',
errorCode: ERROR_TYPE.BAD_INPUT, marginRight: 'auto',
message: i18n.t('screens.clubs.invalidClub'), marginTop: 10,
icon: 'account-question', marginBottom: 10,
showRetryButton: false, }}>
}, <ImageModal
]} resizeMode="contain"
/> imageBackgroundColor={this.props.theme.colors.background}
); style={{
return this.getScreen([this.displayData]); width: 300,
} height: 300,
}}
source={{
uri: data.logo,
}}
/>
</View>
: <View/>}
{data.description !== null ?
// Surround description with div to allow text styling if the description is not html
<Card.Content>
<CustomHTML html={data.description}/>
</Card.Content>
: <View/>}
{this.getManagersRender(data.responsibles, data.email)}
</CollapsibleScrollView>
);
} else
return null;
};
render() {
if (this.shouldFetchData)
return <AuthenticatedScreen
{...this.props}
requests={[
{
link: 'clubs/info',
params: {'id': this.clubId},
mandatory: true
}
]}
renderFunction={this.getScreen}
errorViewOverride={[
{
errorCode: ERROR_TYPE.BAD_INPUT,
message: i18n.t("screens.clubs.invalidClub"),
icon: "account-question",
showRetryButton: false
}
]}
/>;
else
return this.getScreen([this.displayData]);
}
} }
export default withTheme(ClubDisplayScreen); export default withTheme(ClubDisplayScreen);

450
src/screens/Amicale/Clubs/ClubListScreen.js
View file

@ -1,271 +1,237 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Platform} from 'react-native'; import {Platform} from "react-native";
import {Searchbar} from 'react-native-paper'; import {Searchbar} from 'react-native-paper';
import i18n from 'i18n-js'; import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
import {StackNavigationProp} from '@react-navigation/stack'; import i18n from "i18n-js";
import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen'; import ClubListItem from "../../../components/Lists/Clubs/ClubListItem";
import ClubListItem from '../../../components/Lists/Clubs/ClubListItem'; import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
import {isItemInCategoryFilter, stringMatchQuery} from '../../../utils/Search'; import ClubListHeader from "../../../components/Lists/Clubs/ClubListHeader";
import ClubListHeader from '../../../components/Lists/Clubs/ClubListHeader'; import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
import MaterialHeaderButtons, { import {StackNavigationProp} from "@react-navigation/stack";
Item, import type {CustomTheme} from "../../../managers/ThemeManager";
} from '../../../components/Overrides/CustomHeaderButton'; import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
export type ClubCategoryType = { export type category = {
id: number, id: number,
name: string, name: string,
}; };
export type ClubType = { export type club = {
id: number, id: number,
name: string, name: string,
description: string, description: string,
logo: string, logo: string,
email: string | null, email: string | null,
category: Array<number | null>, category: [number, number],
responsibles: Array<string>, responsibles: Array<string>,
}; };
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
}; theme: CustomTheme,
}
type StateType = { type State = {
currentlySelectedCategories: Array<number>, currentlySelectedCategories: Array<number>,
currentSearchString: string, currentSearchString: string,
}; }
const LIST_ITEM_HEIGHT = 96; const LIST_ITEM_HEIGHT = 96;
class ClubListScreen extends React.Component<PropsType, StateType> { class ClubListScreen extends React.Component<Props, State> {
categories: Array<ClubCategoryType>;
constructor() { state = {
super(); currentlySelectedCategories: [],
this.state = { currentSearchString: '',
currentlySelectedCategories: [],
currentSearchString: '',
}; };
}
/** categories: Array<category>;
* Creates the header content
*/
componentDidMount() {
const {props} = this;
props.navigation.setOptions({
headerTitle: this.getSearchBar,
headerRight: this.getHeaderButtons,
headerBackTitleVisible: false,
headerTitleContainerStyle:
Platform.OS === 'ios'
? {marginHorizontal: 0, width: '70%'}
: {marginHorizontal: 0, right: 50, left: 50},
});
}
/** /**
* Callback used when clicking an article in the list. * Creates the header content
* It opens the modal to show detailed information about the article */
* componentDidMount() {
* @param item The article pressed this.props.navigation.setOptions({
*/ headerTitle: this.getSearchBar,
onListItemPress(item: ClubType) { headerRight: this.getHeaderButtons,
const {props} = this; headerBackTitleVisible: false,
props.navigation.navigate('club-information', { headerTitleContainerStyle: Platform.OS === 'ios' ?
data: item, {marginHorizontal: 0, width: '70%'} :
categories: this.categories, {marginHorizontal: 0, right: 50, left: 50},
}); });
} }
/** /**
* Callback used when the search changes * Gets the header search bar
* *
* @param str The new search string * @return {*}
*/ */
onSearchStringChange = (str: string) => { getSearchBar = () => {
this.updateFilteredData(str, null); return (
}; <Searchbar
placeholder={i18n.t('screens.proximo.search')}
/** onChangeText={this.onSearchStringChange}
* Gets the header search bar />
* );
* @return {*}
*/
getSearchBar = (): React.Node => {
return (
<Searchbar
placeholder={i18n.t('screens.proximo.search')}
onChangeText={this.onSearchStringChange}
/>
);
};
onChipSelect = (id: number) => {
this.updateFilteredData(null, id);
};
/**
* Gets the header button
* @return {*}
*/
getHeaderButtons = (): React.Node => {
const onPress = () => {
const {props} = this;
props.navigation.navigate('club-about');
}; };
return (
<MaterialHeaderButtons>
<Item title="main" iconName="information" onPress={onPress} />
</MaterialHeaderButtons>
);
};
getScreen = ( /**
data: Array<{ * Gets the header button
categories: Array<ClubCategoryType>, * @return {*}
clubs: Array<ClubType>, */
} | null>, getHeaderButtons = () => {
): React.Node => { const onPress = () => this.props.navigation.navigate("club-about");
let categoryList = []; return <MaterialHeaderButtons>
let clubList = []; <Item title="main" iconName="information" onPress={onPress}/>
if (data[0] != null) { </MaterialHeaderButtons>;
categoryList = data[0].categories;
clubList = data[0].clubs;
}
this.categories = categoryList;
return (
<CollapsibleFlatList
data={clubList}
keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem}
ListHeaderComponent={this.getListHeader()}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
removeClippedSubviews
getItemLayout={this.itemLayout}
/>
);
};
/**
* Gets the list header, with controls to change the categories filter
*
* @returns {*}
*/
getListHeader(): React.Node {
const {state} = this;
return (
<ClubListHeader
categories={this.categories}
selectedCategories={state.currentlySelectedCategories}
onChipSelect={this.onChipSelect}
/>
);
}
/**
* Gets the category object of the given ID
*
* @param id The ID of the category to find
* @returns {*}
*/
getCategoryOfId = (id: number): ClubCategoryType | null => {
let cat = null;
this.categories.forEach((item: ClubCategoryType) => {
if (id === item.id) cat = item;
});
return cat;
};
getRenderItem = ({item}: {item: ClubType}): React.Node => {
const onPress = () => {
this.onListItemPress(item);
}; };
if (this.shouldRenderItem(item)) {
return ( /**
<ClubListItem * Callback used when the search changes
categoryTranslator={this.getCategoryOfId} *
item={item} * @param str The new search string
onPress={onPress} */
height={LIST_ITEM_HEIGHT} onSearchStringChange = (str: string) => {
/> this.updateFilteredData(str, null);
); };
keyExtractor = (item: club) => item.id.toString();
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
getScreen = (data: Array<{ categories: Array<category>, clubs: Array<club> } | null>) => {
let categoryList = [];
let clubList = [];
if (data[0] != null) {
categoryList = data[0].categories;
clubList = data[0].clubs;
}
this.categories = categoryList;
return (
<CollapsibleFlatList
data={clubList}
keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem}
ListHeaderComponent={this.getListHeader()}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
removeClippedSubviews={true}
getItemLayout={this.itemLayout}
/>
)
};
onChipSelect = (id: number) => this.updateFilteredData(null, id);
/**
* Updates the search string and category filter, saving them to the State.
*
* If the given category is already in the filter, it removes it.
* Otherwise it adds it to the filter.
*
* @param filterStr The new filter string to use
* @param categoryId The category to add/remove from the filter
*/
updateFilteredData(filterStr: string | null, categoryId: number | null) {
let newCategoriesState = [...this.state.currentlySelectedCategories];
let newStrState = this.state.currentSearchString;
if (filterStr !== null)
newStrState = filterStr;
if (categoryId !== null) {
let index = newCategoriesState.indexOf(categoryId);
if (index === -1)
newCategoriesState.push(categoryId);
else
newCategoriesState.splice(index, 1);
}
if (filterStr !== null || categoryId !== null)
this.setState({
currentSearchString: newStrState,
currentlySelectedCategories: newCategoriesState,
})
} }
return null;
};
keyExtractor = (item: ClubType): string => item.id.toString(); /**
* Gets the list header, with controls to change the categories filter
itemLayout = ( *
data: {...}, * @returns {*}
index: number, */
): {length: number, offset: number, index: number} => ({ getListHeader() {
length: LIST_ITEM_HEIGHT, return <ClubListHeader
offset: LIST_ITEM_HEIGHT * index, categories={this.categories}
index, selectedCategories={this.state.currentlySelectedCategories}
}); onChipSelect={this.onChipSelect}
/>;
/**
* Updates the search string and category filter, saving them to the State.
*
* If the given category is already in the filter, it removes it.
* Otherwise it adds it to the filter.
*
* @param filterStr The new filter string to use
* @param categoryId The category to add/remove from the filter
*/
updateFilteredData(filterStr: string | null, categoryId: number | null) {
const {state} = this;
const newCategoriesState = [...state.currentlySelectedCategories];
let newStrState = state.currentSearchString;
if (filterStr !== null) newStrState = filterStr;
if (categoryId !== null) {
const index = newCategoriesState.indexOf(categoryId);
if (index === -1) newCategoriesState.push(categoryId);
else newCategoriesState.splice(index, 1);
} }
if (filterStr !== null || categoryId !== null)
this.setState({
currentSearchString: newStrState,
currentlySelectedCategories: newCategoriesState,
});
}
/** /**
* Checks if the given item should be rendered according to current name and category filters * Gets the category object of the given ID
* *
* @param item The club to check * @param id The ID of the category to find
* @returns {boolean} * @returns {*}
*/ */
shouldRenderItem(item: ClubType): boolean { getCategoryOfId = (id: number) => {
const {state} = this; for (let i = 0; i < this.categories.length; i++) {
let shouldRender = if (id === this.categories[i].id)
state.currentlySelectedCategories.length === 0 || return this.categories[i];
isItemInCategoryFilter(state.currentlySelectedCategories, item.category); }
if (shouldRender) };
shouldRender = stringMatchQuery(item.name, state.currentSearchString);
return shouldRender;
}
render(): React.Node { /**
const {props} = this; * Checks if the given item should be rendered according to current name and category filters
return ( *
<AuthenticatedScreen * @param item The club to check
navigation={props.navigation} * @returns {boolean}
requests={[ */
{ shouldRenderItem(item: club) {
link: 'clubs/list', let shouldRender = this.state.currentlySelectedCategories.length === 0
params: {}, || isItemInCategoryFilter(this.state.currentlySelectedCategories, item.category);
mandatory: true, if (shouldRender)
}, shouldRender = stringMatchQuery(item.name, this.state.currentSearchString);
]} return shouldRender;
renderFunction={this.getScreen} }
/>
); getRenderItem = ({item}: { item: club }) => {
} const onPress = this.onListItemPress.bind(this, item);
if (this.shouldRenderItem(item)) {
return (
<ClubListItem
categoryTranslator={this.getCategoryOfId}
item={item}
onPress={onPress}
height={LIST_ITEM_HEIGHT}
/>
);
} else
return null;
};
/**
* Callback used when clicking an article in the list.
* It opens the modal to show detailed information about the article
*
* @param item The article pressed
*/
onListItemPress(item: club) {
this.props.navigation.navigate("club-information", {data: item, categories: this.categories});
}
render() {
return (
<AuthenticatedScreen
{...this.props}
requests={[
{
link: 'clubs/list',
params: {},
mandatory: true,
}
]}
renderFunction={this.getScreen}
/>
);
}
} }
export default ClubListScreen; export default ClubListScreen;

179
src/screens/Amicale/Equipment/EquipmentConfirmScreen.js
View file

@ -1,102 +1,105 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper';
Button, import {StackNavigationProp} from "@react-navigation/stack";
Caption, import type {CustomTheme} from "../../../managers/ThemeManager";
Card, import type {Device} from "./EquipmentListScreen";
Headline, import {View} from "react-native";
Paragraph, import i18n from "i18n-js";
withTheme, import {getRelativeDateString} from "../../../utils/EquipmentBooking";
} from 'react-native-paper'; import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
import {View} from 'react-native';
import i18n from 'i18n-js';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import type {DeviceType} from './EquipmentListScreen';
import {getRelativeDateString} from '../../../utils/EquipmentBooking';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
type PropsType = { type Props = {
route: { navigation: StackNavigationProp,
params?: { route: {
item?: DeviceType, params?: {
dates: [string, string], item?: Device,
dates: [string, string]
},
}, },
}, theme: CustomTheme,
theme: CustomThemeType, }
};
class EquipmentConfirmScreen extends React.Component<PropsType> {
item: DeviceType | null;
dates: [string, string] | null; class EquipmentConfirmScreen extends React.Component<Props> {
constructor(props: PropsType) { item: Device | null;
super(props); dates: [string, string] | null;
if (props.route.params != null) {
if (props.route.params.item != null) this.item = props.route.params.item; constructor(props: Props) {
else this.item = null; super(props);
if (props.route.params.dates != null) if (this.props.route.params != null) {
this.dates = props.route.params.dates; if (this.props.route.params.item != null)
else this.dates = null; this.item = this.props.route.params.item;
else
this.item = null;
if (this.props.route.params.dates != null)
this.dates = this.props.route.params.dates;
else
this.dates = null;
}
} }
}
render(): React.Node { render() {
const {item, dates, props} = this; const item = this.item;
if (item != null && dates != null) { const dates = this.dates;
const start = new Date(dates[0]); if (item != null && dates != null) {
const end = new Date(dates[1]); const start = new Date(dates[0]);
let buttonText; const end = new Date(dates[1]);
if (start == null) buttonText = i18n.t('screens.equipment.booking'); return (
else if (end != null && start.getTime() !== end.getTime()) <CollapsibleScrollView>
buttonText = i18n.t('screens.equipment.bookingPeriod', { <Card style={{margin: 5}}>
begin: getRelativeDateString(start), <Card.Content>
end: getRelativeDateString(end), <View style={{flex: 1}}>
}); <View style={{
else marginLeft: "auto",
buttonText = i18n.t('screens.equipment.bookingDay', { marginRight: "auto",
date: getRelativeDateString(start), flexDirection: "row",
}); flexWrap: "wrap",
return ( }}>
<CollapsibleScrollView> <Headline style={{textAlign: "center"}}>
<Card style={{margin: 5}}> {item.name}
<Card.Content> </Headline>
<View style={{flex: 1}}> <Caption style={{
<View textAlign: "center",
style={{ lineHeight: 35,
marginLeft: 'auto', marginLeft: 10,
marginRight: 'auto', }}>
flexDirection: 'row', ({i18n.t('screens.equipment.bail', {cost: item.caution})})
flexWrap: 'wrap', </Caption>
}}> </View>
<Headline style={{textAlign: 'center'}}>{item.name}</Headline> </View>
<Caption <Button
style={{ icon={"check-circle-outline"}
textAlign: 'center', color={this.props.theme.colors.success}
lineHeight: 35, mode="text"
marginLeft: 10, >
}}> {
({i18n.t('screens.equipment.bail', {cost: item.caution})}) start == null
</Caption> ? i18n.t('screens.equipment.booking')
</View> : end != null && start.getTime() !== end.getTime()
</View> ? i18n.t('screens.equipment.bookingPeriod', {
<Button begin: getRelativeDateString(start),
icon="check-circle-outline" end: getRelativeDateString(end)
color={props.theme.colors.success} })
mode="text"> : i18n.t('screens.equipment.bookingDay', {
{buttonText} date: getRelativeDateString(start)
</Button> })
<Paragraph style={{textAlign: 'center'}}> }
{i18n.t('screens.equipment.bookingConfirmedMessage')} </Button>
</Paragraph> <Paragraph style={{textAlign: "center"}}>
</Card.Content> {i18n.t("screens.equipment.bookingConfirmedMessage")}
</Card> </Paragraph>
</CollapsibleScrollView> </Card.Content>
); </Card>
</CollapsibleScrollView>
);
} else
return null;
} }
return null;
}
} }
export default withTheme(EquipmentConfirmScreen); export default withTheme(EquipmentConfirmScreen);

340
src/screens/Amicale/Equipment/EquipmentListScreen.js
View file

@ -1,197 +1,193 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {View} from 'react-native'; import {View} from "react-native";
import {Button, withTheme} from 'react-native-paper'; import {Button, withTheme} from 'react-native-paper';
import {StackNavigationProp} from '@react-navigation/stack'; import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
import i18n from 'i18n-js'; import {StackNavigationProp} from "@react-navigation/stack";
import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen'; import type {CustomTheme} from "../../../managers/ThemeManager";
import type {ClubType} from '../Clubs/ClubListScreen'; import i18n from "i18n-js";
import EquipmentListItem from '../../../components/Lists/Equipment/EquipmentListItem'; import type {club} from "../Clubs/ClubListScreen";
import MascotPopup from '../../../components/Mascot/MascotPopup'; import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentListItem";
import {MASCOT_STYLE} from '../../../components/Mascot/Mascot'; import MascotPopup from "../../../components/Mascot/MascotPopup";
import AsyncStorageManager from '../../../managers/AsyncStorageManager'; import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList'; import AsyncStorageManager from "../../../managers/AsyncStorageManager";
import type {ApiGenericDataType} from '../../../utils/WebData'; import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme,
}
type State = {
mascotDialogVisible: boolean,
}
export type Device = {
id: number,
name: string,
caution: number,
booked_at: Array<{ begin: string, end: string }>,
}; };
type StateType = { export type RentedDevice = {
mascotDialogVisible: boolean, device_id: number,
}; device_name: string,
begin: string,
export type DeviceType = { end: string,
id: number, }
name: string,
caution: number,
booked_at: Array<{begin: string, end: string}>,
};
export type RentedDeviceType = {
device_id: number,
device_name: string,
begin: string,
end: string,
};
const LIST_ITEM_HEIGHT = 64; const LIST_ITEM_HEIGHT = 64;
class EquipmentListScreen extends React.Component<PropsType, StateType> { class EquipmentListScreen extends React.Component<Props, State> {
data: Array<DeviceType>;
userRents: Array<RentedDeviceType>; state = {
mascotDialogVisible: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.equipmentShowBanner.key),
}
authRef: {current: null | AuthenticatedScreen}; data: Array<Device>;
userRents: Array<RentedDevice>;
canRefresh: boolean; authRef: { current: null | AuthenticatedScreen };
canRefresh: boolean;
constructor(props: PropsType) { constructor(props: Props) {
super(props); super(props);
this.state = { this.canRefresh = false;
mascotDialogVisible: AsyncStorageManager.getBool( this.authRef = React.createRef();
AsyncStorageManager.PREFERENCES.equipmentShowBanner.key, this.props.navigation.addListener('focus', this.onScreenFocus);
), }
onScreenFocus = () => {
if (this.canRefresh && this.authRef.current != null)
this.authRef.current.reload();
this.canRefresh = true;
}; };
this.canRefresh = false;
this.authRef = React.createRef();
props.navigation.addListener('focus', this.onScreenFocus);
}
onScreenFocus = () => { getRenderItem = ({item}: { item: Device }) => {
if (this.canRefresh && this.authRef.current != null) return (
this.authRef.current.reload(); <EquipmentListItem
this.canRefresh = true; navigation={this.props.navigation}
}; item={item}
userDeviceRentDates={this.getUserDeviceRentDates(item)}
height={LIST_ITEM_HEIGHT}/>
);
};
getRenderItem = ({item}: {item: DeviceType}): React.Node => { getUserDeviceRentDates(item: Device) {
const {navigation} = this.props; let dates = null;
return ( for (let i = 0; i < this.userRents.length; i++) {
<EquipmentListItem let device = this.userRents[i];
navigation={navigation} if (item.id === device.device_id) {
item={item} dates = [device.begin, device.end];
userDeviceRentDates={this.getUserDeviceRentDates(item)} break;
height={LIST_ITEM_HEIGHT} }
/> }
); return dates;
};
getUserDeviceRentDates(item: DeviceType): [number, number] | null {
let dates = null;
this.userRents.forEach((device: RentedDeviceType) => {
if (item.id === device.device_id) {
dates = [device.begin, device.end];
}
});
return dates;
}
/**
* Gets the list header, with explains this screen's purpose
*
* @returns {*}
*/
getListHeader(): React.Node {
return (
<View
style={{
width: '100%',
marginTop: 10,
marginBottom: 10,
}}>
<Button
mode="contained"
icon="help-circle"
onPress={this.showMascotDialog}
style={{
marginRight: 'auto',
marginLeft: 'auto',
}}>
{i18n.t('screens.equipment.mascotDialog.title')}
</Button>
</View>
);
}
keyExtractor = (item: ClubType): string => item.id.toString();
/**
* Gets the main screen component with the fetched data
*
* @param data The data fetched from the server
* @returns {*}
*/
getScreen = (data: Array<ApiGenericDataType | null>): React.Node => {
if (data[0] != null) {
const fetchedData = data[0];
if (fetchedData != null) this.data = fetchedData.devices;
} }
if (data[1] != null) {
const fetchedData = data[1]; /**
if (fetchedData != null) this.userRents = fetchedData.locations; * Gets the list header, with explains this screen's purpose
*
* @returns {*}
*/
getListHeader() {
return (
<View style={{
width: "100%",
marginTop: 10,
marginBottom: 10,
}}>
<Button
mode={"contained"}
icon={"help-circle"}
onPress={this.showMascotDialog}
style={{
marginRight: "auto",
marginLeft: "auto",
}}>
{i18n.t("screens.equipment.mascotDialog.title")}
</Button>
</View>
);
} }
return (
<CollapsibleFlatList
keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem}
ListHeaderComponent={this.getListHeader()}
data={this.data}
/>
);
};
showMascotDialog = () => { keyExtractor = (item: club) => item.id.toString();
this.setState({mascotDialogVisible: true});
};
hideMascotDialog = () => { /**
AsyncStorageManager.set( * Gets the main screen component with the fetched data
AsyncStorageManager.PREFERENCES.equipmentShowBanner.key, *
false, * @param data The data fetched from the server
); * @returns {*}
this.setState({mascotDialogVisible: false}); */
}; getScreen = (data: Array<{ [key: string]: any } | null>) => {
if (data[0] != null) {
const fetchedData = data[0];
if (fetchedData != null)
this.data = fetchedData["devices"];
}
if (data[1] != null) {
const fetchedData = data[1];
if (fetchedData != null)
this.userRents = fetchedData["locations"];
}
return (
<CollapsibleFlatList
keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem}
ListHeaderComponent={this.getListHeader()}
data={this.data}
/>
)
};
render(): React.Node { showMascotDialog = () => {
const {props, state} = this; this.setState({mascotDialogVisible: true})
return ( };
<View style={{flex: 1}}>
<AuthenticatedScreen hideMascotDialog = () => {
navigation={props.navigation} AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.equipmentShowBanner.key, false);
ref={this.authRef} this.setState({mascotDialogVisible: false})
requests={[ };
{
link: 'location/all', render() {
params: {}, return (
mandatory: true, <View style={{flex: 1}}>
}, <AuthenticatedScreen
{ {...this.props}
link: 'location/my', ref={this.authRef}
params: {}, requests={[
mandatory: false, {
}, link: 'location/all',
]} params: {},
renderFunction={this.getScreen} mandatory: true,
/> },
<MascotPopup {
visible={state.mascotDialogVisible} link: 'location/my',
title={i18n.t('screens.equipment.mascotDialog.title')} params: {},
message={i18n.t('screens.equipment.mascotDialog.message')} mandatory: false,
icon="vote" }
buttons={{ ]}
action: null, renderFunction={this.getScreen}
cancel: { />
message: i18n.t('screens.equipment.mascotDialog.button'), <MascotPopup
icon: 'check', visible={this.state.mascotDialogVisible}
onPress: this.hideMascotDialog, title={i18n.t("screens.equipment.mascotDialog.title")}
}, message={i18n.t("screens.equipment.mascotDialog.message")}
}} icon={"vote"}
emotion={MASCOT_STYLE.WINK} buttons={{
/> action: null,
</View> cancel: {
); message: i18n.t("screens.equipment.mascotDialog.button"),
} icon: "check",
onPress: this.hideMascotDialog,
}
}}
emotion={MASCOT_STYLE.WINK}
/>
</View>
);
}
} }
export default withTheme(EquipmentListScreen); export default withTheme(EquipmentListScreen);

816
src/screens/Amicale/Equipment/EquipmentRentScreen.js
View file

@ -1,441 +1,441 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Button, Caption, Card, Headline, Subheading, withTheme} from 'react-native-paper';
import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager";
import type {Device} from "./EquipmentListScreen";
import {BackHandler, View} from "react-native";
import * as Animatable from "react-native-animatable";
import i18n from "i18n-js";
import {CalendarList} from "react-native-calendars";
import LoadingConfirmDialog from "../../../components/Dialogs/LoadingConfirmDialog";
import ErrorDialog from "../../../components/Dialogs/ErrorDialog";
import { import {
Button, generateMarkedDates,
Caption, getFirstEquipmentAvailability,
Card, getISODate,
Headline, getRelativeDateString,
Subheading, getValidRange,
withTheme, isEquipmentAvailable
} from 'react-native-paper'; } from "../../../utils/EquipmentBooking";
import {StackNavigationProp} from '@react-navigation/stack'; import ConnectionManager from "../../../managers/ConnectionManager";
import {BackHandler, View} from 'react-native'; import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
import * as Animatable from 'react-native-animatable';
import i18n from 'i18n-js';
import {CalendarList} from 'react-native-calendars';
import type {DeviceType} from './EquipmentListScreen';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import LoadingConfirmDialog from '../../../components/Dialogs/LoadingConfirmDialog';
import ErrorDialog from '../../../components/Dialogs/ErrorDialog';
import {
generateMarkedDates,
getFirstEquipmentAvailability,
getISODate,
getRelativeDateString,
getValidRange,
isEquipmentAvailable,
} from '../../../utils/EquipmentBooking';
import ConnectionManager from '../../../managers/ConnectionManager';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
route: { route: {
params?: { params?: {
item?: DeviceType, item?: Device,
},
}, },
}, theme: CustomTheme,
theme: CustomThemeType, }
};
export type MarkedDatesObjectType = { type State = {
[key: string]: {startingDay: boolean, endingDay: boolean, color: string}, dialogVisible: boolean,
}; errorDialogVisible: boolean,
markedDates: { [key: string]: { startingDay: boolean, endingDay: boolean, color: string } },
currentError: number,
}
type StateType = { class EquipmentRentScreen extends React.Component<Props, State> {
dialogVisible: boolean,
errorDialogVisible: boolean,
markedDates: MarkedDatesObjectType,
currentError: number,
};
class EquipmentRentScreen extends React.Component<PropsType, StateType> { state = {
item: DeviceType | null; dialogVisible: false,
errorDialogVisible: false,
bookedDates: Array<string>; markedDates: {},
currentError: 0,
bookRef: {current: null | Animatable.View};
canBookEquipment: boolean;
lockedDates: {
[key: string]: {startingDay: boolean, endingDay: boolean, color: string},
};
constructor(props: PropsType) {
super(props);
this.state = {
dialogVisible: false,
errorDialogVisible: false,
markedDates: {},
currentError: 0,
};
this.resetSelection();
this.bookRef = React.createRef();
this.canBookEquipment = false;
this.bookedDates = [];
if (props.route.params != null) {
if (props.route.params.item != null) this.item = props.route.params.item;
else this.item = null;
} }
const {item} = this;
if (item != null) {
this.lockedDates = {};
item.booked_at.forEach((date: {begin: string, end: string}) => {
const range = getValidRange(
new Date(date.begin),
new Date(date.end),
null,
);
this.lockedDates = {
...this.lockedDates,
...generateMarkedDates(false, props.theme, range),
};
});
}
}
/** item: Device | null;
* Captures focus and blur events to hook on android back button bookedDates: Array<string>;
*/
componentDidMount() {
const {navigation} = this.props;
navigation.addListener('focus', () => {
BackHandler.addEventListener(
'hardwareBackPress',
this.onBackButtonPressAndroid,
);
});
navigation.addListener('blur', () => {
BackHandler.removeEventListener(
'hardwareBackPress',
this.onBackButtonPressAndroid,
);
});
}
/** bookRef: { current: null | Animatable.View }
* Overrides default android back button behaviour to deselect date if any is selected. canBookEquipment: boolean;
*
* @return {boolean}
*/
onBackButtonPressAndroid = (): boolean => {
if (this.bookedDates.length > 0) {
this.resetSelection();
this.updateMarkedSelection();
return true;
}
return false;
};
onDialogDismiss = () => { lockedDates: { [key: string]: { startingDay: boolean, endingDay: boolean, color: string } }
this.setState({dialogVisible: false});
};
onErrorDialogDismiss = () => { constructor(props: Props) {
this.setState({errorDialogVisible: false}); super(props);
};
/**
* Sends the selected data to the server and waits for a response.
* If the request is a success, navigate to the recap screen.
* If it is an error, display the error to the user.
*
* @returns {Promise<void>}
*/
onDialogAccept = (): Promise<void> => {
return new Promise((resolve: () => void) => {
const {item, props} = this;
const start = this.getBookStartDate();
const end = this.getBookEndDate();
if (item != null && start != null && end != null) {
ConnectionManager.getInstance()
.authenticatedRequest('location/booking', {
device: item.id,
begin: getISODate(start),
end: getISODate(end),
})
.then(() => {
this.onDialogDismiss();
props.navigation.replace('equipment-confirm', {
item: this.item,
dates: [getISODate(start), getISODate(end)],
});
resolve();
})
.catch((error: number) => {
this.onDialogDismiss();
this.showErrorDialog(error);
resolve();
});
} else {
this.onDialogDismiss();
resolve();
}
});
};
getBookStartDate(): Date | null {
return this.bookedDates.length > 0 ? new Date(this.bookedDates[0]) : null;
}
getBookEndDate(): Date | null {
const {length} = this.bookedDates;
return length > 0 ? new Date(this.bookedDates[length - 1]) : null;
}
/**
* Selects a new date on the calendar.
* If both start and end dates are already selected, unselect all.
*
* @param day The day selected
*/
selectNewDate = (day: {
dateString: string,
day: number,
month: number,
timestamp: number,
year: number,
}) => {
const selected = new Date(day.dateString);
const start = this.getBookStartDate();
if (!this.lockedDates[day.dateString] != null) {
if (start === null) {
this.updateSelectionRange(selected, selected);
this.enableBooking();
} else if (start.getTime() === selected.getTime()) {
this.resetSelection(); this.resetSelection();
} else if (this.bookedDates.length === 1) { this.bookRef = React.createRef();
this.updateSelectionRange(start, selected); this.canBookEquipment = false;
this.enableBooking(); this.bookedDates = [];
} else this.resetSelection(); if (this.props.route.params != null) {
this.updateMarkedSelection(); if (this.props.route.params.item != null)
this.item = this.props.route.params.item;
else
this.item = null;
}
const item = this.item;
if (item != null) {
this.lockedDates = {};
for (let i = 0; i < item.booked_at.length; i++) {
const range = getValidRange(new Date(item.booked_at[i].begin), new Date(item.booked_at[i].end), null);
this.lockedDates = {
...this.lockedDates,
...generateMarkedDates(
false,
this.props.theme,
range
)
};
}
}
} }
};
showErrorDialog = (error: number) => { /**
this.setState({ * Captures focus and blur events to hook on android back button
errorDialogVisible: true, */
currentError: error, componentDidMount() {
}); this.props.navigation.addListener(
}; 'focus',
() =>
showDialog = () => { BackHandler.addEventListener(
this.setState({dialogVisible: true}); 'hardwareBackPress',
}; this.onBackButtonPressAndroid
)
/** );
* Shows the book button by plying a fade animation this.props.navigation.addListener(
*/ 'blur',
showBookButton() { () =>
if (this.bookRef.current != null) { BackHandler.removeEventListener(
this.bookRef.current.fadeInUp(500); 'hardwareBackPress',
this.onBackButtonPressAndroid
)
);
} }
}
/** /**
* Hides the book button by plying a fade animation * Overrides default android back button behaviour to deselect date if any is selected.
*/ *
hideBookButton() { * @return {boolean}
if (this.bookRef.current != null) { */
this.bookRef.current.fadeOutDown(500); onBackButtonPressAndroid = () => {
if (this.bookedDates.length > 0) {
this.resetSelection();
this.updateMarkedSelection();
return true;
} else
return false;
};
/**
* Selects a new date on the calendar.
* If both start and end dates are already selected, unselect all.
*
* @param day The day selected
*/
selectNewDate = (day: { dateString: string, day: number, month: number, timestamp: number, year: number }) => {
const selected = new Date(day.dateString);
const start = this.getBookStartDate();
if (!(this.lockedDates.hasOwnProperty(day.dateString))) {
if (start === null) {
this.updateSelectionRange(selected, selected);
this.enableBooking();
} else if (start.getTime() === selected.getTime()) {
this.resetSelection();
} else if (this.bookedDates.length === 1) {
this.updateSelectionRange(start, selected);
this.enableBooking();
} else
this.resetSelection();
this.updateMarkedSelection();
}
} }
}
enableBooking() { updateSelectionRange(start: Date, end: Date) {
if (!this.canBookEquipment) { this.bookedDates = getValidRange(start, end, this.item);
this.showBookButton();
this.canBookEquipment = true;
} }
}
resetSelection() { updateMarkedSelection() {
if (this.canBookEquipment) this.hideBookButton(); this.setState({
this.canBookEquipment = false; markedDates: generateMarkedDates(
this.bookedDates = []; true,
} this.props.theme,
this.bookedDates
),
});
}
updateSelectionRange(start: Date, end: Date) { enableBooking() {
this.bookedDates = getValidRange(start, end, this.item); if (!this.canBookEquipment) {
} this.showBookButton();
this.canBookEquipment = true;
}
}
updateMarkedSelection() { resetSelection() {
const {theme} = this.props; if (this.canBookEquipment)
this.setState({ this.hideBookButton();
markedDates: generateMarkedDates(true, theme, this.bookedDates), this.canBookEquipment = false;
}); this.bookedDates = [];
} }
render(): React.Node { /**
const {item, props, state} = this; * Shows the book button by plying a fade animation
const start = this.getBookStartDate(); */
const end = this.getBookEndDate(); showBookButton() {
let subHeadingText; if (this.bookRef.current != null) {
if (start == null) subHeadingText = i18n.t('screens.equipment.booking'); this.bookRef.current.fadeInUp(500);
else if (end != null && start.getTime() !== end.getTime()) }
subHeadingText = i18n.t('screens.equipment.bookingPeriod', { }
begin: getRelativeDateString(start),
end: getRelativeDateString(end), /**
}); * Hides the book button by plying a fade animation
else */
i18n.t('screens.equipment.bookingDay', { hideBookButton() {
date: getRelativeDateString(start), if (this.bookRef.current != null) {
}); this.bookRef.current.fadeOutDown(500);
if (item != null) { }
const isAvailable = isEquipmentAvailable(item); }
const firstAvailability = getFirstEquipmentAvailability(item);
return ( showDialog = () => {
<View style={{flex: 1}}> this.setState({dialogVisible: true});
<CollapsibleScrollView> }
<Card style={{margin: 5}}>
<Card.Content> showErrorDialog = (error: number) => {
this.setState({
errorDialogVisible: true,
currentError: error,
});
}
onDialogDismiss = () => {
this.setState({dialogVisible: false});
}
onErrorDialogDismiss = () => {
this.setState({errorDialogVisible: false});
}
/**
* Sends the selected data to the server and waits for a response.
* If the request is a success, navigate to the recap screen.
* If it is an error, display the error to the user.
*
* @returns {Promise<R>}
*/
onDialogAccept = () => {
return new Promise((resolve) => {
const item = this.item;
const start = this.getBookStartDate();
const end = this.getBookEndDate();
if (item != null && start != null && end != null) {
console.log({
"device": item.id,
"begin": getISODate(start),
"end": getISODate(end),
})
ConnectionManager.getInstance().authenticatedRequest(
"location/booking",
{
"device": item.id,
"begin": getISODate(start),
"end": getISODate(end),
})
.then(() => {
this.onDialogDismiss();
this.props.navigation.replace("equipment-confirm", {
item: this.item,
dates: [getISODate(start), getISODate(end)]
});
resolve();
})
.catch((error: number) => {
this.onDialogDismiss();
this.showErrorDialog(error);
resolve();
});
} else {
this.onDialogDismiss();
resolve();
}
});
}
getBookStartDate() {
return this.bookedDates.length > 0 ? new Date(this.bookedDates[0]) : null;
}
getBookEndDate() {
const length = this.bookedDates.length;
return length > 0 ? new Date(this.bookedDates[length - 1]) : null;
}
render() {
const item = this.item;
const start = this.getBookStartDate();
const end = this.getBookEndDate();
if (item != null) {
const isAvailable = isEquipmentAvailable(item);
const firstAvailability = getFirstEquipmentAvailability(item);
return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View <CollapsibleScrollView>
style={{ <Card style={{margin: 5}}>
marginLeft: 'auto', <Card.Content>
marginRight: 'auto', <View style={{flex: 1}}>
flexDirection: 'row', <View style={{
flexWrap: 'wrap', marginLeft: "auto",
}}> marginRight: "auto",
<Headline style={{textAlign: 'center'}}> flexDirection: "row",
{item.name} flexWrap: "wrap",
</Headline> }}>
<Caption <Headline style={{textAlign: "center"}}>
style={{ {item.name}
textAlign: 'center', </Headline>
lineHeight: 35, <Caption style={{
marginLeft: 10, textAlign: "center",
}}> lineHeight: 35,
({i18n.t('screens.equipment.bail', {cost: item.caution})}) marginLeft: 10,
</Caption> }}>
</View> ({i18n.t('screens.equipment.bail', {cost: item.caution})})
</Caption>
</View>
</View>
<Button
icon={isAvailable ? "check-circle-outline" : "update"}
color={isAvailable ? this.props.theme.colors.success : this.props.theme.colors.primary}
mode="text"
>
{i18n.t('screens.equipment.available', {date: getRelativeDateString(firstAvailability)})}
</Button>
<Subheading style={{
textAlign: "center",
marginBottom: 10,
minHeight: 50
}}>
{
start == null
? i18n.t('screens.equipment.booking')
: end != null && start.getTime() !== end.getTime()
? i18n.t('screens.equipment.bookingPeriod', {
begin: getRelativeDateString(start),
end: getRelativeDateString(end)
})
: i18n.t('screens.equipment.bookingDay', {
date: getRelativeDateString(start)
})
}
</Subheading>
</Card.Content>
</Card>
<CalendarList
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={new Date()}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={0}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={3}
// Enable horizontal scrolling, default = false
horizontal={true}
// Enable paging on horizontal, default = false
pagingEnabled={true}
// Handler which gets executed on day press. Default = undefined
onDayPress={this.selectNewDate}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={1}
// Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
disableAllTouchEventsForDisabledDays={true}
// Hide month navigation arrows.
hideArrows={false}
// Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
markingType={'period'}
markedDates={{...this.lockedDates, ...this.state.markedDates}}
theme={{
backgroundColor: this.props.theme.colors.agendaBackgroundColor,
calendarBackground: this.props.theme.colors.background,
textSectionTitleColor: this.props.theme.colors.agendaDayTextColor,
selectedDayBackgroundColor: this.props.theme.colors.primary,
selectedDayTextColor: '#ffffff',
todayTextColor: this.props.theme.colors.text,
dayTextColor: this.props.theme.colors.text,
textDisabledColor: this.props.theme.colors.agendaDayTextColor,
dotColor: this.props.theme.colors.primary,
selectedDotColor: '#ffffff',
arrowColor: this.props.theme.colors.primary,
monthTextColor: this.props.theme.colors.text,
indicatorColor: this.props.theme.colors.primary,
textDayFontFamily: 'monospace',
textMonthFontFamily: 'monospace',
textDayHeaderFontFamily: 'monospace',
textDayFontWeight: '300',
textMonthFontWeight: 'bold',
textDayHeaderFontWeight: '300',
textDayFontSize: 16,
textMonthFontSize: 16,
textDayHeaderFontSize: 16,
'stylesheet.day.period': {
base: {
overflow: 'hidden',
height: 34,
width: 34,
alignItems: 'center',
}
}
}}
style={{marginBottom: 50}}
/>
</CollapsibleScrollView>
<LoadingConfirmDialog
visible={this.state.dialogVisible}
onDismiss={this.onDialogDismiss}
onAccept={this.onDialogAccept}
title={i18n.t('screens.equipment.dialogTitle')}
titleLoading={i18n.t('screens.equipment.dialogTitleLoading')}
message={i18n.t('screens.equipment.dialogMessage')}
/>
<ErrorDialog
visible={this.state.errorDialogVisible}
onDismiss={this.onErrorDialogDismiss}
errorCode={this.state.currentError}
/>
<Animatable.View
ref={this.bookRef}
style={{
position: "absolute",
bottom: 0,
left: 0,
width: "100%",
flex: 1,
transform: [
{translateY: 100},
]
}}>
<Button
icon="bookmark-check"
mode="contained"
onPress={this.showDialog}
style={{
width: "80%",
flex: 1,
marginLeft: "auto",
marginRight: "auto",
marginBottom: 20,
borderRadius: 10
}}
>
{i18n.t('screens.equipment.bookButton')}
</Button>
</Animatable.View>
</View> </View>
<Button )
icon={isAvailable ? 'check-circle-outline' : 'update'} } else
color={ return <View/>;
isAvailable
? props.theme.colors.success
: props.theme.colors.primary
}
mode="text">
{i18n.t('screens.equipment.available', {
date: getRelativeDateString(firstAvailability),
})}
</Button>
<Subheading
style={{
textAlign: 'center',
marginBottom: 10,
minHeight: 50,
}}>
{subHeadingText}
</Subheading>
</Card.Content>
</Card>
<CalendarList
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={new Date()}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={0}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={3}
// Enable horizontal scrolling, default = false
horizontal
// Enable paging on horizontal, default = false
pagingEnabled
// Handler which gets executed on day press. Default = undefined
onDayPress={this.selectNewDate}
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
firstDay={1}
// Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
disableAllTouchEventsForDisabledDays
// Hide month navigation arrows.
hideArrows={false}
// Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
markingType="period"
markedDates={{...this.lockedDates, ...state.markedDates}}
theme={{
backgroundColor: props.theme.colors.agendaBackgroundColor,
calendarBackground: props.theme.colors.background,
textSectionTitleColor: props.theme.colors.agendaDayTextColor,
selectedDayBackgroundColor: props.theme.colors.primary,
selectedDayTextColor: '#ffffff',
todayTextColor: props.theme.colors.text,
dayTextColor: props.theme.colors.text,
textDisabledColor: props.theme.colors.agendaDayTextColor,
dotColor: props.theme.colors.primary,
selectedDotColor: '#ffffff',
arrowColor: props.theme.colors.primary,
monthTextColor: props.theme.colors.text,
indicatorColor: props.theme.colors.primary,
textDayFontFamily: 'monospace',
textMonthFontFamily: 'monospace',
textDayHeaderFontFamily: 'monospace',
textDayFontWeight: '300',
textMonthFontWeight: 'bold',
textDayHeaderFontWeight: '300',
textDayFontSize: 16,
textMonthFontSize: 16,
textDayHeaderFontSize: 16,
'stylesheet.day.period': {
base: {
overflow: 'hidden',
height: 34,
width: 34,
alignItems: 'center',
},
},
}}
style={{marginBottom: 50}}
/>
</CollapsibleScrollView>
<LoadingConfirmDialog
visible={state.dialogVisible}
onDismiss={this.onDialogDismiss}
onAccept={this.onDialogAccept}
title={i18n.t('screens.equipment.dialogTitle')}
titleLoading={i18n.t('screens.equipment.dialogTitleLoading')}
message={i18n.t('screens.equipment.dialogMessage')}
/>
<ErrorDialog
visible={state.errorDialogVisible}
onDismiss={this.onErrorDialogDismiss}
errorCode={state.currentError}
/>
<Animatable.View
ref={this.bookRef}
style={{
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
flex: 1,
transform: [{translateY: 100}],
}}>
<Button
icon="bookmark-check"
mode="contained"
onPress={this.showDialog}
style={{
width: '80%',
flex: 1,
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: 20,
borderRadius: 10,
}}>
{i18n.t('screens.equipment.bookButton')}
</Button>
</Animatable.View>
</View>
);
} }
return null;
}
} }
export default withTheme(EquipmentRentScreen); export default withTheme(EquipmentRentScreen);

793
src/screens/Amicale/LoginScreen.js
View file

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

883
src/screens/Amicale/ProfileScreen.js
View file

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

624
src/screens/Amicale/VoteScreen.js
View file

@ -1,47 +1,46 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {RefreshControl, View} from 'react-native'; import {RefreshControl, View} from "react-native";
import {StackNavigationProp} from '@react-navigation/stack'; import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
import i18n from 'i18n-js'; import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
import {Button} from 'react-native-paper'; import VoteTease from "../../components/Amicale/Vote/VoteTease";
import AuthenticatedScreen from '../../components/Amicale/AuthenticatedScreen'; import VoteSelect from "../../components/Amicale/Vote/VoteSelect";
import {getTimeOnlyString, stringToDate} from '../../utils/Planning'; import VoteResults from "../../components/Amicale/Vote/VoteResults";
import VoteTease from '../../components/Amicale/Vote/VoteTease'; import VoteWait from "../../components/Amicale/Vote/VoteWait";
import VoteSelect from '../../components/Amicale/Vote/VoteSelect'; import {StackNavigationProp} from "@react-navigation/stack";
import VoteResults from '../../components/Amicale/Vote/VoteResults'; import i18n from "i18n-js";
import VoteWait from '../../components/Amicale/Vote/VoteWait'; import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
import {MASCOT_STYLE} from '../../components/Mascot/Mascot'; import MascotPopup from "../../components/Mascot/MascotPopup";
import MascotPopup from '../../components/Mascot/MascotPopup'; import AsyncStorageManager from "../../managers/AsyncStorageManager";
import AsyncStorageManager from '../../managers/AsyncStorageManager'; import {Button} from "react-native-paper";
import VoteNotAvailable from '../../components/Amicale/Vote/VoteNotAvailable'; import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList'; import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
import type {ApiGenericDataType} from '../../utils/WebData';
export type VoteTeamType = { export type team = {
id: number, id: number,
name: string, name: string,
votes: number, votes: number,
}
type teamResponse = {
has_voted: boolean,
teams: Array<team>,
}; };
type TeamResponseType = { type stringVoteDates = {
has_voted: boolean, date_begin: string,
teams: Array<VoteTeamType>, date_end: string,
}; date_result_begin: string,
date_result_end: string,
}
type VoteDatesStringType = { type objectVoteDates = {
date_begin: string, date_begin: Date,
date_end: string, date_end: Date,
date_result_begin: string, date_result_begin: Date,
date_result_end: string, date_result_end: Date,
}; }
type VoteDatesObjectType = {
date_begin: Date,
date_end: Date,
date_result_begin: Date,
date_result_end: Date,
};
// const FAKE_DATE = { // const FAKE_DATE = {
// "date_begin": "2020-08-19 15:50", // "date_begin": "2020-08-19 15:50",
@ -93,322 +92,287 @@ type VoteDatesObjectType = {
const MIN_REFRESH_TIME = 5 * 1000; const MIN_REFRESH_TIME = 5 * 1000;
type PropsType = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp
}; }
type StateType = { type State = {
hasVoted: boolean, hasVoted: boolean,
mascotDialogVisible: boolean, mascotDialogVisible: boolean,
}; }
/** /**
* Screen displaying vote information and controls * Screen displaying vote information and controls
*/ */
export default class VoteScreen extends React.Component<PropsType, StateType> { export default class VoteScreen extends React.Component<Props, State> {
teams: Array<VoteTeamType>;
hasVoted: boolean; state = {
hasVoted: false,
datesString: null | VoteDatesStringType; mascotDialogVisible: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.voteShowBanner.key),
dates: null | VoteDatesObjectType;
today: Date;
mainFlatListData: Array<{key: string}>;
lastRefresh: Date | null;
authRef: {current: null | AuthenticatedScreen};
constructor() {
super();
this.state = {
hasVoted: false,
mascotDialogVisible: AsyncStorageManager.getBool(
AsyncStorageManager.PREFERENCES.voteShowBanner.key,
),
}; };
this.hasVoted = false;
this.today = new Date();
this.authRef = React.createRef();
this.lastRefresh = null;
this.mainFlatListData = [{key: 'main'}, {key: 'info'}];
}
/** teams: Array<team>;
* Gets the string representation of the given date. hasVoted: boolean;
* datesString: null | stringVoteDates;
* If the given date is the same day as today, only return the tile. dates: null | objectVoteDates;
* Otherwise, return the full date.
*
* @param date The Date object representation of the wanted date
* @param dateString The string representation of the wanted date
* @returns {string}
*/
getDateString(date: Date, dateString: string): string {
if (this.today.getDate() === date.getDate()) {
const str = getTimeOnlyString(dateString);
return str != null ? str : '';
}
return dateString;
}
getMainRenderItem = ({item}: {item: {key: string}}): React.Node => { today: Date;
if (item.key === 'info')
return (
<View>
<Button
mode="contained"
icon="help-circle"
onPress={this.showMascotDialog}
style={{
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 20,
}}>
{i18n.t('screens.vote.mascotDialog.title')}
</Button>
</View>
);
return this.getContent();
};
getScreen = (data: Array<ApiGenericDataType | null>): React.Node => { mainFlatListData: Array<{ key: string }>;
const {state} = this; lastRefresh: Date | null;
// data[0] = FAKE_TEAMS2;
// data[1] = FAKE_DATE;
this.lastRefresh = new Date();
const teams: TeamResponseType | null = data[0]; authRef: { current: null | AuthenticatedScreen };
const dateStrings: VoteDatesStringType | null = data[1];
if (dateStrings != null && dateStrings.date_begin == null) constructor() {
this.datesString = null; super();
else this.datesString = dateStrings; this.hasVoted = false;
this.today = new Date();
if (teams != null) { this.authRef = React.createRef();
this.teams = teams.teams; this.lastRefresh = null;
this.hasVoted = teams.has_voted; this.mainFlatListData = [
{key: 'main'},
{key: 'info'},
]
} }
this.generateDateObject(); /**
return ( * Reloads vote data if last refresh delta is smaller than the minimum refresh time
<CollapsibleFlatList */
data={this.mainFlatListData} reloadData = () => {
refreshControl={ let canRefresh;
<RefreshControl refreshing={false} onRefresh={this.reloadData} /> const lastRefresh = this.lastRefresh;
if (lastRefresh != null)
canRefresh = (new Date().getTime() - lastRefresh.getTime()) > MIN_REFRESH_TIME;
else
canRefresh = true;
if (canRefresh && this.authRef.current != null)
this.authRef.current.reload()
};
/**
* Generates the objects containing string and Date representations of key vote dates
*/
generateDateObject() {
const strings = this.datesString;
if (strings != null) {
const dateBegin = stringToDate(strings.date_begin);
const dateEnd = stringToDate(strings.date_end);
const dateResultBegin = stringToDate(strings.date_result_begin);
const dateResultEnd = stringToDate(strings.date_result_end);
if (dateBegin != null && dateEnd != null && dateResultBegin != null && dateResultEnd != null) {
this.dates = {
date_begin: dateBegin,
date_end: dateEnd,
date_result_begin: dateResultBegin,
date_result_end: dateResultEnd,
};
} else
this.dates = null;
} else
this.dates = null;
}
/**
* Gets the string representation of the given date.
*
* If the given date is the same day as today, only return the tile.
* Otherwise, return the full date.
*
* @param date The Date object representation of the wanted date
* @param dateString The string representation of the wanted date
* @returns {string}
*/
getDateString(date: Date, dateString: string): string {
if (this.today.getDate() === date.getDate()) {
const str = getTimeOnlyString(dateString);
return str != null ? str : "";
} else
return dateString;
}
isVoteRunning() {
return this.dates != null && this.today > this.dates.date_begin && this.today < this.dates.date_end;
}
isVoteStarted() {
return this.dates != null && this.today > this.dates.date_begin;
}
isResultRunning() {
return this.dates != null && this.today > this.dates.date_result_begin && this.today < this.dates.date_result_end;
}
isResultStarted() {
return this.dates != null && this.today > this.dates.date_result_begin;
}
mainRenderItem = ({item}: { item: { key: string } }) => {
if (item.key === 'info')
return (
<View>
<Button
mode={"contained"}
icon={"help-circle"}
onPress={this.showMascotDialog}
style={{
marginLeft: "auto",
marginRight: "auto",
marginTop: 20
}}>
{i18n.t("screens.vote.mascotDialog.title")}
</Button>
</View>
);
else
return this.getContent();
};
getScreen = (data: Array<{ [key: string]: any } | null>) => {
// data[0] = FAKE_TEAMS2;
// data[1] = FAKE_DATE;
this.lastRefresh = new Date();
const teams: teamResponse | null = data[0];
const dateStrings: stringVoteDates | null = data[1];
if (dateStrings != null && dateStrings.date_begin == null)
this.datesString = null;
else
this.datesString = dateStrings;
if (teams != null) {
this.teams = teams.teams;
this.hasVoted = teams.has_voted;
} }
extraData={state.hasVoted.toString()}
renderItem={this.getMainRenderItem}
/>
);
};
getContent(): React.Node { this.generateDateObject();
const {state} = this; return (
if (!this.isVoteStarted()) return this.getTeaseVoteCard(); <CollapsibleFlatList
if (this.isVoteRunning() && !this.hasVoted && !state.hasVoted) data={this.mainFlatListData}
return this.getVoteCard(); refreshControl={
if (!this.isResultStarted()) return this.getWaitVoteCard(); <RefreshControl
if (this.isResultRunning()) return this.getVoteResultCard(); refreshing={false}
return <VoteNotAvailable />; onRefresh={this.reloadData}
} />
}
extraData={this.state.hasVoted.toString()}
renderItem={this.mainRenderItem}
/>
);
};
onVoteSuccess = (): void => this.setState({hasVoted: true}); getContent() {
if (!this.isVoteStarted())
return this.getTeaseVoteCard();
else if (this.isVoteRunning() && (!this.hasVoted && !this.state.hasVoted))
return this.getVoteCard();
else if (!this.isResultStarted())
return this.getWaitVoteCard();
else if (this.isResultRunning())
return this.getVoteResultCard();
else
return <VoteNotAvailable/>;
}
/** onVoteSuccess = () => this.setState({hasVoted: true});
* The user has not voted yet, and the votes are open
*/
getVoteCard(): React.Node {
return (
<VoteSelect
teams={this.teams}
onVoteSuccess={this.onVoteSuccess}
onVoteError={this.reloadData}
/>
);
}
/** /**
* Votes have ended, results can be displayed * The user has not voted yet, and the votes are open
*/ */
getVoteResultCard(): React.Node { getVoteCard() {
if (this.dates != null && this.datesString != null) return <VoteSelect teams={this.teams} onVoteSuccess={this.onVoteSuccess} onVoteError={this.reloadData}/>;
return ( }
<VoteResults
teams={this.teams}
dateEnd={this.getDateString(
this.dates.date_result_end,
this.datesString.date_result_end,
)}
/>
);
return <VoteNotAvailable />;
}
/** /**
* Vote will open shortly * Votes have ended, results can be displayed
*/ */
getTeaseVoteCard(): React.Node { getVoteResultCard() {
if (this.dates != null && this.datesString != null) if (this.dates != null && this.datesString != null)
return ( return <VoteResults
<VoteTease teams={this.teams}
startDate={this.getDateString( dateEnd={this.getDateString(
this.dates.date_begin, this.dates.date_result_end,
this.datesString.date_begin, this.datesString.date_result_end)}
)} />;
/> else
); return <VoteNotAvailable/>;
return <VoteNotAvailable />; }
}
/** /**
* Votes have ended, or user has voted waiting for results * Vote will open shortly
*/ */
getWaitVoteCard(): React.Node { getTeaseVoteCard() {
const {state} = this; if (this.dates != null && this.datesString != null)
let startDate = null; return <VoteTease
if ( startDate={this.getDateString(this.dates.date_begin, this.datesString.date_begin)}/>;
this.dates != null && else
this.datesString != null && return <VoteNotAvailable/>;
this.dates.date_result_begin != null }
)
startDate = this.getDateString(
this.dates.date_result_begin,
this.datesString.date_result_begin,
);
return (
<VoteWait
startDate={startDate}
hasVoted={this.hasVoted || state.hasVoted}
justVoted={state.hasVoted}
isVoteRunning={this.isVoteRunning()}
/>
);
}
/** /**
* Reloads vote data if last refresh delta is smaller than the minimum refresh time * Votes have ended, or user has voted waiting for results
*/ */
reloadData = () => { getWaitVoteCard() {
let canRefresh; let startDate = null;
const {lastRefresh} = this; if (this.dates != null && this.datesString != null && this.dates.date_result_begin != null)
if (lastRefresh != null) startDate = this.getDateString(this.dates.date_result_begin, this.datesString.date_result_begin);
canRefresh = return <VoteWait startDate={startDate} hasVoted={this.hasVoted || this.state.hasVoted}
new Date().getTime() - lastRefresh.getTime() > MIN_REFRESH_TIME; justVoted={this.state.hasVoted}
else canRefresh = true; isVoteRunning={this.isVoteRunning()}/>;
if (canRefresh && this.authRef.current != null) }
this.authRef.current.reload();
};
showMascotDialog = () => { showMascotDialog = () => {
this.setState({mascotDialogVisible: true}); this.setState({mascotDialogVisible: true})
}; };
hideMascotDialog = () => { hideMascotDialog = () => {
AsyncStorageManager.set( AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.voteShowBanner.key, false);
AsyncStorageManager.PREFERENCES.voteShowBanner.key, this.setState({mascotDialogVisible: false})
false, };
);
this.setState({mascotDialogVisible: false});
};
isVoteStarted(): boolean { /**
return this.dates != null && this.today > this.dates.date_begin; * Renders the authenticated screen.
} *
* Teams and dates are not mandatory to allow showing the information box even if api requests fail
isResultRunning(): boolean { *
return ( * @returns {*}
this.dates != null && */
this.today > this.dates.date_result_begin && render() {
this.today < this.dates.date_result_end return (
); <View style={{flex: 1}}>
} <AuthenticatedScreen
{...this.props}
isResultStarted(): boolean { ref={this.authRef}
return this.dates != null && this.today > this.dates.date_result_begin; requests={[
} {
link: 'elections/teams',
isVoteRunning(): boolean { params: {},
return ( mandatory: false,
this.dates != null && },
this.today > this.dates.date_begin && {
this.today < this.dates.date_end link: 'elections/dates',
); params: {},
} mandatory: false,
},
/** ]}
* Generates the objects containing string and Date representations of key vote dates renderFunction={this.getScreen}
*/ />
generateDateObject() { <MascotPopup
const strings = this.datesString; visible={this.state.mascotDialogVisible}
if (strings != null) { title={i18n.t("screens.vote.mascotDialog.title")}
const dateBegin = stringToDate(strings.date_begin); message={i18n.t("screens.vote.mascotDialog.message")}
const dateEnd = stringToDate(strings.date_end); icon={"vote"}
const dateResultBegin = stringToDate(strings.date_result_begin); buttons={{
const dateResultEnd = stringToDate(strings.date_result_end); action: null,
if ( cancel: {
dateBegin != null && message: i18n.t("screens.vote.mascotDialog.button"),
dateEnd != null && icon: "check",
dateResultBegin != null && onPress: this.hideMascotDialog,
dateResultEnd != null }
) { }}
this.dates = { emotion={MASCOT_STYLE.CUTE}
date_begin: dateBegin, />
date_end: dateEnd, </View>
date_result_begin: dateResultBegin, );
date_result_end: dateResultEnd, }
};
} else this.dates = null;
} else this.dates = null;
}
/**
* Renders the authenticated screen.
*
* Teams and dates are not mandatory to allow showing the information box even if api requests fail
*
* @returns {*}
*/
render(): React.Node {
const {props, state} = this;
return (
<View style={{flex: 1}}>
<AuthenticatedScreen
navigation={props.navigation}
ref={this.authRef}
requests={[
{
link: 'elections/teams',
params: {},
mandatory: false,
},
{
link: 'elections/dates',
params: {},
mandatory: false,
},
]}
renderFunction={this.getScreen}
/>
<MascotPopup
visible={state.mascotDialogVisible}
title={i18n.t('screens.vote.mascotDialog.title')}
message={i18n.t('screens.vote.mascotDialog.message')}
icon="vote"
buttons={{
action: null,
cancel: {
message: i18n.t('screens.vote.mascotDialog.button'),
icon: 'check',
onPress: this.hideMascotDialog,
},
}}
emotion={MASCOT_STYLE.CUTE}
/>
</View>
);
}
} }

188
src/screens/Game/Shapes/BaseShape.js
View file

@ -1,13 +1,13 @@
// @flow // @flow
import type {CustomThemeType} from '../../../managers/ThemeManager'; import type {CustomTheme} from "../../../managers/ThemeManager";
export type CoordinatesType = { export type Coordinates = {
x: number, x: number,
y: number, y: number,
}; }
export type ShapeType = Array<Array<number>>; type Shape = Array<Array<number>>;
/** /**
* Abstract class used to represent a BaseShape. * Abstract class used to represent a BaseShape.
@ -15,98 +15,96 @@ export type ShapeType = Array<Array<number>>;
* and in methods to implement * and in methods to implement
*/ */
export default class BaseShape { export default class BaseShape {
#currentShape: ShapeType;
#rotation: number; #currentShape: Shape;
#rotation: number;
position: Coordinates;
theme: CustomTheme;
position: CoordinatesType; /**
* Prevent instantiation if classname is BaseShape to force class to be abstract
theme: CustomThemeType; */
constructor(theme: CustomTheme) {
/** if (this.constructor === BaseShape)
* Prevent instantiation if classname is BaseShape to force class to be abstract throw new Error("Abstract class can't be instantiated");
*/ this.theme = theme;
constructor(theme: CustomThemeType) { this.#rotation = 0;
if (this.constructor === BaseShape) this.position = {x: 0, y: 0};
throw new Error("Abstract class can't be instantiated"); this.#currentShape = this.getShapes()[this.#rotation];
this.theme = theme;
this.#rotation = 0;
this.position = {x: 0, y: 0};
this.#currentShape = this.getShapes()[this.#rotation];
}
/**
* Gets this shape's color.
* Must be implemented by child class
*/
// eslint-disable-next-line class-methods-use-this
getColor(): string {
throw new Error("Method 'getColor()' must be implemented");
}
/**
* Gets this object's all possible shapes as an array.
* Must be implemented by child class.
*
* Used by tests to read private fields
*/
// eslint-disable-next-line class-methods-use-this
getShapes(): Array<ShapeType> {
throw new Error("Method 'getShapes()' must be implemented");
}
/**
* Gets this object's current shape.
*/
getCurrentShape(): ShapeType {
return this.#currentShape;
}
/**
* Gets this object's coordinates.
* This will return an array of coordinates representing the positions of the cells used by this object.
*
* @param isAbsolute Should we take into account the current position of the object?
* @return {Array<CoordinatesType>} This object cells coordinates
*/
getCellsCoordinates(isAbsolute: boolean): Array<CoordinatesType> {
const coordinates = [];
for (let row = 0; row < this.#currentShape.length; row += 1) {
for (let col = 0; col < this.#currentShape[row].length; col += 1) {
if (this.#currentShape[row][col] === 1) {
if (isAbsolute) {
coordinates.push({
x: this.position.x + col,
y: this.position.y + row,
});
} else coordinates.push({x: col, y: row});
}
}
} }
return coordinates;
}
/** /**
* Rotate this object * Gets this shape's color.
* * Must be implemented by child class
* @param isForward Should we rotate clockwise? */
*/ getColor(): string {
rotate(isForward: boolean) { throw new Error("Method 'getColor()' must be implemented");
if (isForward) this.#rotation += 1; }
else this.#rotation -= 1;
if (this.#rotation > 3) this.#rotation = 0; /**
else if (this.#rotation < 0) this.#rotation = 3; * Gets this object's all possible shapes as an array.
this.#currentShape = this.getShapes()[this.#rotation]; * Must be implemented by child class.
} *
* Used by tests to read private fields
*/
getShapes(): Array<Shape> {
throw new Error("Method 'getShapes()' must be implemented");
}
/**
* Gets this object's current shape.
*/
getCurrentShape(): Shape {
return this.#currentShape;
}
/**
* Gets this object's coordinates.
* This will return an array of coordinates representing the positions of the cells used by this object.
*
* @param isAbsolute Should we take into account the current position of the object?
* @return {Array<Coordinates>} This object cells coordinates
*/
getCellsCoordinates(isAbsolute: boolean): Array<Coordinates> {
let coordinates = [];
for (let row = 0; row < this.#currentShape.length; row++) {
for (let col = 0; col < this.#currentShape[row].length; col++) {
if (this.#currentShape[row][col] === 1)
if (isAbsolute)
coordinates.push({x: this.position.x + col, y: this.position.y + row});
else
coordinates.push({x: col, y: row});
}
}
return coordinates;
}
/**
* Rotate this object
*
* @param isForward Should we rotate clockwise?
*/
rotate(isForward: boolean) {
if (isForward)
this.#rotation++;
else
this.#rotation--;
if (this.#rotation > 3)
this.#rotation = 0;
else if (this.#rotation < 0)
this.#rotation = 3;
this.#currentShape = this.getShapes()[this.#rotation];
}
/**
* Move this object
*
* @param x Position X offset to add
* @param y Position Y offset to add
*/
move(x: number, y: number) {
this.position.x += x;
this.position.y += y;
}
/**
* Move this object
*
* @param x Position X offset to add
* @param y Position Y offset to add
*/
move(x: number, y: number) {
this.position.x += x;
this.position.y += y;
}
} }

77
src/screens/Game/Shapes/ShapeI.js
View file

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

69
src/screens/Game/Shapes/ShapeJ.js
View file

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

69
src/screens/Game/Shapes/ShapeL.js
View file

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

61
src/screens/Game/Shapes/ShapeO.js
View file

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

69
src/screens/Game/Shapes/ShapeS.js
View file

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

69
src/screens/Game/Shapes/ShapeT.js
View file

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

69
src/screens/Game/Shapes/ShapeZ.js
View file

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

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