Application Android et IOS pour l'amicale des élèves https://play.google.com/store/apps/details?id=fr.amicaleinsat.application
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

PlanexScreen.tsx 7.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. /*
  2. * Copyright (c) 2019 - 2020 Arnaud Vergnet.
  3. *
  4. * This file is part of Campus INSAT.
  5. *
  6. * Campus INSAT is free software: you can redistribute it and/or modify
  7. * it under the terms of the GNU General Public License as published by
  8. * the Free Software Foundation, either version 3 of the License, or
  9. * (at your option) any later version.
  10. *
  11. * Campus INSAT is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14. * GNU General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU General Public License
  17. * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
  18. */
  19. import React, { useCallback, useEffect, useState } from 'react';
  20. import { Title, useTheme } from 'react-native-paper';
  21. import i18n from 'i18n-js';
  22. import { StyleSheet, View } from 'react-native';
  23. import { useNavigation } from '@react-navigation/native';
  24. import Autolink from 'react-native-autolink';
  25. import AlertDialog from '../../components/Dialogs/AlertDialog';
  26. import { dateToString, getTimeOnlyString } from '../../utils/Planning';
  27. import DateManager from '../../managers/DateManager';
  28. import type { PlanexGroupType } from './GroupSelectionScreen';
  29. import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
  30. import MascotPopup from '../../components/Mascot/MascotPopup';
  31. import { getPrettierPlanexGroupName } from '../../utils/Utils';
  32. import GENERAL_STYLES from '../../constants/Styles';
  33. import PlanexWebview, {
  34. JS_LOADED_MESSAGE,
  35. } from '../../components/Screens/PlanexWebview';
  36. import PlanexBottomBar from '../../components/Animations/PlanexBottomBar';
  37. import {
  38. getPreferenceString,
  39. GeneralPreferenceKeys,
  40. PlanexPreferenceKeys,
  41. } from '../../utils/asyncStorage';
  42. import { usePlanexPreferences } from '../../context/preferencesContext';
  43. import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
  44. const styles = StyleSheet.create({
  45. container: {
  46. position: 'absolute',
  47. height: '100%',
  48. width: '100%',
  49. },
  50. popup: {
  51. borderWidth: 2,
  52. },
  53. });
  54. function PlanexScreen() {
  55. const navigation = useNavigation();
  56. const theme = useTheme();
  57. const { preferences } = usePlanexPreferences();
  58. const [dialogContent, setDialogContent] =
  59. useState<
  60. | undefined
  61. | {
  62. title: string | React.ReactElement;
  63. message: string | React.ReactElement;
  64. color: string;
  65. }
  66. >();
  67. const [injectJS, setInjectJS] = useState('');
  68. const [loading, setLoading] = useState(true);
  69. const getCurrentGroup: () => PlanexGroupType | undefined = useCallback(() => {
  70. let currentGroupString = getPreferenceString(
  71. PlanexPreferenceKeys.planexCurrentGroup,
  72. preferences
  73. );
  74. let group: PlanexGroupType;
  75. if (currentGroupString) {
  76. group = JSON.parse(currentGroupString);
  77. navigation.setOptions({
  78. title: getPrettierPlanexGroupName(group.name),
  79. });
  80. return group;
  81. }
  82. return undefined;
  83. }, [navigation, preferences]);
  84. const currentGroup = getCurrentGroup();
  85. /**
  86. * Gets the Webview, with an error view on top if no group is selected.
  87. *
  88. * @returns {*}
  89. */
  90. const getWebView = () => (
  91. <PlanexWebview
  92. currentGroup={currentGroup}
  93. injectJS={injectJS}
  94. onMessage={onMessage}
  95. />
  96. );
  97. /**
  98. * Callback used when the user clicks on the navigate to settings button.
  99. * This will hide the banner and open the SettingsScreen
  100. */
  101. const onGoToSettings = () => navigation.navigate('settings');
  102. /**
  103. * Sends a FullCalendar action to the web page inside the webview.
  104. *
  105. * @param action The action to perform, as described in the FullCalendar doc https://fullcalendar.io/docs/v3.
  106. * Or "setGroup" with the group id as data to set the selected group
  107. * @param data Data to pass to the action
  108. */
  109. const sendMessage = (action: string, data?: string) => {
  110. let command;
  111. if (action === 'setGroup') {
  112. command = `displayAde(${data})`;
  113. } else {
  114. command = `$('#calendar').fullCalendar('${action}', '${data}')`;
  115. }
  116. // String must resolve to true to prevent crash on iOS
  117. command += ';true;';
  118. // Change the injected
  119. if (command === injectJS) {
  120. command += ';true;';
  121. }
  122. setInjectJS(command);
  123. };
  124. /**
  125. * Shows a dialog when the user clicks on an event.
  126. *
  127. * @param event
  128. */
  129. const onMessage = (event: { nativeEvent: { data: string } }) => {
  130. if (event.nativeEvent.data === JS_LOADED_MESSAGE) {
  131. setLoading(false);
  132. } else {
  133. const data: {
  134. start: string;
  135. end: string;
  136. title: string;
  137. color: string;
  138. } = JSON.parse(event.nativeEvent.data);
  139. const startDate = dateToString(new Date(data.start), true);
  140. const endDate = dateToString(new Date(data.end), true);
  141. const startString = getTimeOnlyString(startDate);
  142. const endString = getTimeOnlyString(endDate);
  143. let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
  144. if (startString != null && endString != null) {
  145. msg += `${startString} - ${endString}`;
  146. }
  147. showDialog(data.title, msg, data.color);
  148. }
  149. };
  150. /**
  151. * Shows a simple dialog to the user.
  152. *
  153. * @param title The dialog's title
  154. * @param message The message to show
  155. */
  156. const showDialog = (title: string, message: string, color?: string) => {
  157. const finalColor = color ? color : theme.colors.surface;
  158. setDialogContent({
  159. title: (
  160. <Autolink
  161. text={title}
  162. hashtag={'facebook'}
  163. component={Title}
  164. truncate={32}
  165. email={true}
  166. url={true}
  167. phone={true}
  168. />
  169. ),
  170. message: message,
  171. color: finalColor,
  172. });
  173. };
  174. const hideDialog = () => setDialogContent(undefined);
  175. useEffect(() => {
  176. const group = getCurrentGroup();
  177. if (group) {
  178. sendMessage('setGroup', group.id.toString());
  179. navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
  180. }
  181. // eslint-disable-next-line react-hooks/exhaustive-deps
  182. }, [getCurrentGroup, navigation]);
  183. const showMascot =
  184. getPreferenceString(
  185. GeneralPreferenceKeys.defaultStartScreen,
  186. preferences
  187. )?.toLowerCase() !== 'planex';
  188. return (
  189. <View style={GENERAL_STYLES.flex}>
  190. {/* Allow to draw webview bellow banner */}
  191. <View style={styles.container}>
  192. {theme.dark ? ( // Force component theme update by recreating it on theme change
  193. getWebView()
  194. ) : (
  195. <View style={GENERAL_STYLES.flex}>{getWebView()}</View>
  196. )}
  197. </View>
  198. {loading ? (
  199. <View style={styles.container}>
  200. <BasicLoadingScreen />
  201. </View>
  202. ) : null}
  203. {showMascot ? (
  204. <MascotPopup
  205. title={i18n.t('screens.planex.mascotDialog.title')}
  206. message={i18n.t('screens.planex.mascotDialog.message')}
  207. icon="emoticon-kiss"
  208. buttons={{
  209. action: {
  210. message: i18n.t('screens.planex.mascotDialog.ok'),
  211. icon: 'cog',
  212. onPress: onGoToSettings,
  213. },
  214. cancel: {
  215. message: i18n.t('screens.planex.mascotDialog.cancel'),
  216. icon: 'close',
  217. color: theme.colors.warning,
  218. },
  219. }}
  220. emotion={MASCOT_STYLE.INTELLO}
  221. />
  222. ) : null}
  223. <AlertDialog
  224. visible={dialogContent !== undefined}
  225. onDismiss={hideDialog}
  226. title={dialogContent ? dialogContent.title : ''}
  227. message={dialogContent ? dialogContent.message : ''}
  228. style={
  229. dialogContent
  230. ? { borderColor: dialogContent.color, ...styles.popup }
  231. : undefined
  232. }
  233. />
  234. <PlanexBottomBar
  235. onPress={sendMessage}
  236. seekAttention={currentGroup === undefined}
  237. />
  238. </View>
  239. );
  240. }
  241. export default PlanexScreen;