geindre/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

refactor planex screen to functionnal component

Browse source
This commit is contained in:
Arnaud Vergnet 2021-05-10 21:21:15 +02:00
parent a8dde29654
commit aefeb8373a
1 changed files with 138 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

312
src/screens/Planex/PlanexScreen.tsx
View file

@ -17,8 +17,8 @@
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
*/ */
import * as React from 'react'; import React, { useCallback, useRef, useState } from 'react';
import { Title, withTheme } from 'react-native-paper'; import { Title, useTheme } from 'react-native-paper';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import { import {
NativeScrollEvent, NativeScrollEvent,
@ -26,8 +26,11 @@ import {
StyleSheet, StyleSheet,
View, View,
} from 'react-native'; } from 'react-native';
import { CommonActions } from '@react-navigation/native'; import {
import { StackNavigationProp } from '@react-navigation/stack'; CommonActions,
useFocusEffect,
useNavigation,
} from '@react-navigation/native';
import Autolink from 'react-native-autolink'; import Autolink from 'react-native-autolink';
import ThemeManager from '../../managers/ThemeManager'; import ThemeManager from '../../managers/ThemeManager';
import WebViewScreen from '../../components/Screens/WebViewScreen'; import WebViewScreen from '../../components/Screens/WebViewScreen';
@ -43,20 +46,7 @@ import MascotPopup from '../../components/Mascot/MascotPopup';
import { getPrettierPlanexGroupName } from '../../utils/Utils'; import { getPrettierPlanexGroupName } from '../../utils/Utils';
import GENERAL_STYLES from '../../constants/Styles'; import GENERAL_STYLES from '../../constants/Styles';
import Urls from '../../constants/Urls'; import Urls from '../../constants/Urls';
import { useMountEffect } from '../../utils/customHooks';
type PropsType = {
navigation: StackNavigationProp<any>;
route: { params: { group: PlanexGroupType } };
theme: ReactNativePaper.Theme;
};
type StateType = {
dialogVisible: boolean;
dialogTitle: string | React.ReactNode;
dialogMessage: string;
currentGroup: PlanexGroupType;
injectJS: string;
};
// // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing // // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing
// // Remove alpha from given Jquery node // // Remove alpha from given Jquery node
@ -131,14 +121,19 @@ calendar.option({
} }
});`; });`;
// Mobile friendly CSS
const CUSTOM_CSS = const CUSTOM_CSS =
'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}'; 'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
// Dark mode CSS, to be used with the mobile friendly css
const CUSTOM_CSS_DARK = const CUSTOM_CSS_DARK =
'body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}'; 'body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
const INJECT_STYLE = ` // Inject the custom css into the webpage
$('head').append('<style>${CUSTOM_CSS}</style>'); const INJECT_STYLE = `$('head').append('<style>${CUSTOM_CSS}</style>');`;
`;
// Inject the dark mode into the webpage, to call after the custom css inject above
const INJECT_STYLE_DARK = `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -148,60 +143,64 @@ const styles = StyleSheet.create({
}, },
}); });
/** type Props = {
* Class defining the app's Planex screen. route: {
* This screen uses a webview to render the page params: {
*/ group?: PlanexGroupType;
class PlanexScreen extends React.Component<PropsType, StateType> { };
barRef: { current: null | AnimatedBottomBar }; };
};
/** function PlanexScreen(props: Props) {
* Defines custom injected JavaScript to improve the page display on mobile const navigation = useNavigation();
*/ const theme = useTheme();
constructor(props: PropsType) { const barRef = useRef<typeof AnimatedBottomBar>();
super(props);
this.barRef = React.createRef(); const [dialogContent, setDialogContent] = useState<
| undefined
| {
title: string | React.ReactElement;
message: string | React.ReactElement;
}
>();
const [injectJS, setInjectJS] = useState('');
const [currentGroup, setCurrentGroup] = useState<
PlanexGroupType | undefined
>();
useMountEffect(() => {
let currentGroupString = AsyncStorageManager.getString( let currentGroupString = AsyncStorageManager.getString(
AsyncStorageManager.PREFERENCES.planexCurrentGroup.key AsyncStorageManager.PREFERENCES.planexCurrentGroup.key
); );
let currentGroup: PlanexGroupType; let group: PlanexGroupType;
if (currentGroupString === '') { if (currentGroupString !== '') {
currentGroup = { name: 'SELECT GROUP', id: -1 }; group = JSON.parse(currentGroupString);
} else { navigation.setOptions({
currentGroup = JSON.parse(currentGroupString); title: getPrettierPlanexGroupName(group.name),
props.navigation.setOptions({
title: getPrettierPlanexGroupName(currentGroup.name),
}); });
setCurrentGroup(group);
} }
this.state = { });
dialogVisible: false,
dialogTitle: '',
dialogMessage: '',
currentGroup,
injectJS: '',
};
}
/**
* Register for events and show the banner after 2 seconds
*/
componentDidMount() {
const { navigation } = this.props;
navigation.addListener('focus', this.onScreenFocus);
}
useFocusEffect(
useCallback(() => {
if (props.route.params?.group) {
// reset params to prevent infinite loop
selectNewGroup(props.route.params.group);
navigation.dispatch(CommonActions.setParams({ group: undefined }));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
);
/** /**
* Gets the Webview, with an error view on top if no group is selected. * Gets the Webview, with an error view on top if no group is selected.
* *
* @returns {*} * @returns {*}
*/ */
getWebView() { const getWebView = () => {
const { state } = this;
const showWebview = state.currentGroup.id !== -1;
return ( return (
<View style={GENERAL_STYLES.flex}> <View style={GENERAL_STYLES.flex}>
{!showWebview ? ( {!currentGroup ? (
<ErrorView <ErrorView
icon={'account-clock'} icon={'account-clock'}
message={i18n.t('screens.planex.noGroupSelected')} message={i18n.t('screens.planex.noGroupSelected')}
@ -209,28 +208,21 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
) : null} ) : null}
<WebViewScreen <WebViewScreen
url={Urls.planex.planning} url={Urls.planex.planning}
initialJS={this.generateInjectedJS(this.state.currentGroup.id)} initialJS={generateInjectedJS(currentGroup)}
injectJS={this.state.injectJS} injectJS={injectJS}
onMessage={this.onMessage} onMessage={onMessage}
onScroll={this.onScroll} onScroll={onScroll}
showAdvancedControls={false} showAdvancedControls={false}
/> />
</View> </View>
); );
} };
/** /**
* Callback used when the user clicks on the navigate to settings button. * Callback used when the user clicks on the navigate to settings button.
* This will hide the banner and open the SettingsScreen * This will hide the banner and open the SettingsScreen
*/ */
onGoToSettings = () => { const onGoToSettings = () => navigation.navigate('settings');
const { navigation } = this.props;
navigation.navigate('settings');
};
onScreenFocus = () => {
this.handleNavigationParams();
};
/** /**
* Sends a FullCalendar action to the web page inside the webview. * Sends a FullCalendar action to the web page inside the webview.
@ -239,7 +231,7 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
* Or "setGroup" with the group id as data to set the selected group * Or "setGroup" with the group id as data to set the selected group
* @param data Data to pass to the action * @param data Data to pass to the action
*/ */
sendMessage = (action: string, data?: string) => { const sendMessage = (action: string, data?: string) => {
let command; let command;
if (action === 'setGroup') { if (action === 'setGroup') {
command = `displayAde(${data})`; command = `displayAde(${data})`;
@ -249,10 +241,10 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
// String must resolve to true to prevent crash on iOS // String must resolve to true to prevent crash on iOS
command += ';true;'; command += ';true;';
// Change the injected // Change the injected
if (command === this.state.injectJS) { if (command === injectJS) {
command += ';true;'; command += ';true;';
} }
this.setState({ injectJS: command }); setInjectJS(command);
}; };
/** /**
@ -260,7 +252,7 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
* *
* @param event * @param event
*/ */
onMessage = (event: { nativeEvent: { data: string } }) => { const onMessage = (event: { nativeEvent: { data: string } }) => {
const data: { const data: {
start: string; start: string;
end: string; end: string;
@ -276,7 +268,7 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
if (startString != null && endString != null) { if (startString != null && endString != null) {
msg += `${startString} - ${endString}`; msg += `${startString} - ${endString}`;
} }
this.showDialog(data.title, msg); showDialog(data.title, msg);
}; };
/** /**
@ -285,10 +277,9 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
* @param title The dialog's title * @param title The dialog's title
* @param message The message to show * @param message The message to show
*/ */
showDialog = (title: string, message: string) => { const showDialog = (title: string, message: string) => {
this.setState({ setDialogContent({
dialogVisible: true, title: (
dialogTitle: (
<Autolink <Autolink
text={title} text={title}
hashtag={'facebook'} hashtag={'facebook'}
@ -299,44 +290,20 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
phone={true} phone={true}
/> />
), ),
dialogMessage: message, message: message,
}); });
}; };
/** const hideDialog = () => setDialogContent(undefined);
* Hides the dialog
*/
hideDialog = () => {
this.setState({
dialogVisible: false,
});
};
/** /**
* Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed * Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed
* *
* @param event * @param event
*/ */
onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => { const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
if (this.barRef.current != null) { if (barRef.current) {
this.barRef.current.onScroll(event); barRef.current.onScroll(event);
}
};
/**
* If navigations parameters contain a group, set it as selected
*/
handleNavigationParams = () => {
const { props } = this;
if (props.route.params != null) {
if (
props.route.params.group !== undefined &&
props.route.params.group !== null
) {
// reset params to prevent infinite loop
this.selectNewGroup(props.route.params.group);
props.navigation.dispatch(CommonActions.setParams({ group: null }));
}
} }
}; };
@ -345,89 +312,86 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
* *
* @param group The group object selected * @param group The group object selected
*/ */
selectNewGroup(group: PlanexGroupType) { const selectNewGroup = (group: PlanexGroupType) => {
const { navigation } = this.props; sendMessage('setGroup', group.id.toString());
this.sendMessage('setGroup', group.id.toString()); setCurrentGroup(group);
this.setState({ currentGroup: group });
AsyncStorageManager.set( AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.planexCurrentGroup.key, AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
group group
); );
navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) }); navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
} };
/** /**
* Generates custom JavaScript to be injected into the webpage * Generates custom JavaScript to be injected into the webpage
* *
* @param groupID The current group selected * @param groupID The current group selected
*/ */
generateInjectedJS(groupID: number) { const generateInjectedJS = (group: PlanexGroupType | undefined) => {
let customInjectedJS = `$(document).ready(function() { let customInjectedJS = `$(document).ready(function() {
${OBSERVE_MUTATIONS_INJECTED} ${OBSERVE_MUTATIONS_INJECTED}
${FULL_CALENDAR_SETTINGS} ${INJECT_STYLE}
displayAde(${groupID}); ${FULL_CALENDAR_SETTINGS}`;
${INJECT_STYLE}`; if (group) {
customInjectedJS += `displayAde(${group.id});`;
}
if (DateManager.isWeekend(new Date())) { if (DateManager.isWeekend(new Date())) {
customInjectedJS += `calendar.next();`; customInjectedJS += `calendar.next();`;
} }
if (ThemeManager.getNightMode()) { if (ThemeManager.getNightMode()) {
customInjectedJS += `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`; customInjectedJS += INJECT_STYLE_DARK;
} }
customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
return customInjectedJS; return customInjectedJS;
} };
render() { return (
const { props, state } = this; <View style={GENERAL_STYLES.flex}>
return ( {/* Allow to draw webview bellow banner */}
<View style={GENERAL_STYLES.flex}> <View style={styles.container}>
{/* Allow to draw webview bellow banner */} {theme.dark ? ( // Force component theme update by recreating it on theme change
<View style={styles.container}> getWebView()
{props.theme.dark ? ( // Force component theme update by recreating it on theme change ) : (
this.getWebView() <View style={GENERAL_STYLES.flex}>{getWebView()}</View>
) : ( )}
<View style={GENERAL_STYLES.flex}>{this.getWebView()}</View>
)}
</View>
{AsyncStorageManager.getString(
AsyncStorageManager.PREFERENCES.defaultStartScreen.key
).toLowerCase() !== 'planex' ? (
<MascotPopup
prefKey={AsyncStorageManager.PREFERENCES.planexShowMascot.key}
title={i18n.t('screens.planex.mascotDialog.title')}
message={i18n.t('screens.planex.mascotDialog.message')}
icon="emoticon-kiss"
buttons={{
action: {
message: i18n.t('screens.planex.mascotDialog.ok'),
icon: 'cog',
onPress: this.onGoToSettings,
},
cancel: {
message: i18n.t('screens.planex.mascotDialog.cancel'),
icon: 'close',
color: props.theme.colors.warning,
},
}}
emotion={MASCOT_STYLE.INTELLO}
/>
) : null}
<AlertDialog
visible={state.dialogVisible}
onDismiss={this.hideDialog}
title={state.dialogTitle}
message={state.dialogMessage}
/>
<AnimatedBottomBar
navigation={props.navigation}
ref={this.barRef}
onPress={this.sendMessage}
seekAttention={state.currentGroup.id === -1}
/>
</View> </View>
); {AsyncStorageManager.getString(
} AsyncStorageManager.PREFERENCES.defaultStartScreen.key
).toLowerCase() !== 'planex' ? (
<MascotPopup
prefKey={AsyncStorageManager.PREFERENCES.planexShowMascot.key}
title={i18n.t('screens.planex.mascotDialog.title')}
message={i18n.t('screens.planex.mascotDialog.message')}
icon="emoticon-kiss"
buttons={{
action: {
message: i18n.t('screens.planex.mascotDialog.ok'),
icon: 'cog',
onPress: onGoToSettings,
},
cancel: {
message: i18n.t('screens.planex.mascotDialog.cancel'),
icon: 'close',
color: theme.colors.warning,
},
}}
emotion={MASCOT_STYLE.INTELLO}
/>
) : null}
<AlertDialog
visible={dialogContent !== undefined}
onDismiss={hideDialog}
title={dialogContent ? dialogContent.title : ''}
message={dialogContent ? dialogContent.message : ''}
/>
<AnimatedBottomBar
navigation={navigation}
ref={barRef}
onPress={sendMessage}
seekAttention={currentGroup !== undefined}
/>
</View>
);
} }
export default withTheme(PlanexScreen); export default PlanexScreen;