forked from vergnet/application-amicale
Improved doc and typing
This commit is contained in:
parent
fe9efc4008
commit
869a8e5ec0
14 changed files with 338 additions and 182 deletions
|
@ -41,7 +41,7 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
customPaddingFunction: null,
|
||||
};
|
||||
|
||||
webviewRef: Object;
|
||||
webviewRef: { current: null | WebView };
|
||||
|
||||
canGoBack: boolean;
|
||||
|
||||
|
@ -52,7 +52,7 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
/**
|
||||
* Creates refresh button after mounting
|
||||
* Creates header buttons and listens to events after mounting
|
||||
*/
|
||||
componentDidMount() {
|
||||
this.props.navigation.setOptions({
|
||||
|
@ -78,6 +78,11 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Goes back on the webview or on the navigation stack if we cannot go back anymore
|
||||
*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
onBackButtonPressAndroid = () => {
|
||||
if (this.canGoBack) {
|
||||
this.onGoBackClicked();
|
||||
|
@ -87,7 +92,7 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
};
|
||||
|
||||
/**
|
||||
* Gets a header refresh button
|
||||
* Gets header refresh and open in browser buttons
|
||||
*
|
||||
* @return {*}
|
||||
*/
|
||||
|
@ -106,6 +111,12 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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>
|
||||
|
@ -141,14 +152,28 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
/**
|
||||
* Callback to use when refresh button is clicked. Reloads the webview.
|
||||
*/
|
||||
onRefreshClicked = () => this.webviewRef.current.reload();
|
||||
onGoBackClicked = () => this.webviewRef.current.goBack();
|
||||
onGoForwardClicked = () => this.webviewRef.current.goForward();
|
||||
|
||||
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) => {
|
||||
this.webviewRef.current.injectJavaScript(script);
|
||||
if (this.webviewRef.current != null)
|
||||
this.webviewRef.current.injectJavaScript(script);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -158,6 +183,13 @@ class WebViewScreen extends React.PureComponent<Props> {
|
|||
*/
|
||||
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 (
|
||||
|
|
|
@ -26,6 +26,12 @@ Stp corrige le pb, bien cordialement.`,
|
|||
|
||||
class FeedbackScreen extends React.Component<Props> {
|
||||
|
||||
/**
|
||||
* Gets link buttons
|
||||
*
|
||||
* @param isBug True if buttons should redirect to bug report methods
|
||||
* @returns {*}
|
||||
*/
|
||||
getButtons(isBug: boolean) {
|
||||
return (
|
||||
<Card.Actions style={{
|
||||
|
@ -106,4 +112,4 @@ class FeedbackScreen extends React.Component<Props> {
|
|||
}
|
||||
}
|
||||
|
||||
export default withTheme(FeedbackScreen);
|
||||
export default withTheme(FeedbackScreen);
|
||||
|
|
|
@ -31,6 +31,9 @@ class SettingsScreen extends React.Component<Props, State> {
|
|||
|
||||
savedNotificationReminder: number;
|
||||
|
||||
/**
|
||||
* Loads user preferences into state
|
||||
*/
|
||||
constructor() {
|
||||
super();
|
||||
let notifReminder = AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current;
|
||||
|
@ -49,7 +52,7 @@ class SettingsScreen extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
/**
|
||||
* Unlocks debug mode
|
||||
* Unlocks debug mode and saves its state to user preferences
|
||||
*/
|
||||
unlockDebugMode = () => {
|
||||
this.setState({isDebugUnlocked: true});
|
||||
|
@ -227,7 +230,7 @@ class SettingsScreen extends React.Component<Props, State> {
|
|||
left={props => <List.Icon {...props} icon="bug-check"/>}
|
||||
onPress={() => this.props.navigation.navigate("debug")}
|
||||
/>
|
||||
:null}
|
||||
: null}
|
||||
<List.Item
|
||||
title={i18n.t('screens.about')}
|
||||
description={i18n.t('aboutScreen.buttonDesc')}
|
||||
|
|
|
@ -45,7 +45,7 @@ const GROUPS_URL = 'http://planex.insa-toulouse.fr/wsAdeGrp.php?projectId=1';
|
|||
const REPLACE_REGEX = /_/g;
|
||||
|
||||
/**
|
||||
* Class defining proximo's article list of a certain category.
|
||||
* Class defining planex group selection screen.
|
||||
*/
|
||||
class GroupSelectionScreen extends React.Component<Props, State> {
|
||||
|
||||
|
@ -106,10 +106,21 @@ class GroupSelectionScreen extends React.Component<Props, State> {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when the user clicks on the favorite button
|
||||
*
|
||||
* @param item The item to add/remove from favorites
|
||||
*/
|
||||
onListFavoritePress = (item: group) => {
|
||||
this.updateGroupFavorites(item);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if the given group is in the favorites list
|
||||
*
|
||||
* @param group The group to check
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isGroupInFavorites(group: group) {
|
||||
let isFav = false;
|
||||
for (let i = 0; i < this.state.favoriteGroups.length; i++) {
|
||||
|
@ -121,6 +132,12 @@ class GroupSelectionScreen extends React.Component<Props, State> {
|
|||
return isFav;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the given group from the given array
|
||||
*
|
||||
* @param favorites The array containing favorites groups
|
||||
* @param group The group to remove from the array
|
||||
*/
|
||||
removeGroupFromFavorites(favorites: Array<group>, group: group) {
|
||||
for (let i = 0; i < favorites.length; i++) {
|
||||
if (group.id === favorites[i].id) {
|
||||
|
@ -130,12 +147,24 @@ class GroupSelectionScreen extends React.Component<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds the given group to the given array
|
||||
*
|
||||
* @param favorites The array containing favorites groups
|
||||
* @param group The group to add to the array
|
||||
*/
|
||||
addGroupToFavorites(favorites: Array<group>, group: group) {
|
||||
group.isFav = true;
|
||||
favorites.push(group);
|
||||
favorites.sort(sortName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
|
||||
* Favorites are then saved in user preferences
|
||||
*
|
||||
* @param group The group to add/remove to favorites
|
||||
*/
|
||||
updateGroupFavorites(group: group) {
|
||||
let newFavorites = [...this.state.favoriteGroups]
|
||||
if (this.isGroupInFavorites(group))
|
||||
|
@ -148,6 +177,12 @@ class GroupSelectionScreen extends React.Component<Props, State> {
|
|||
JSON.stringify(newFavorites));
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether to display the given group category, depending on user search query
|
||||
*
|
||||
* @param item The group category
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldDisplayAccordion(item: groupCategory) {
|
||||
let shouldDisplay = false;
|
||||
for (let i = 0; i < item.content.length; i++) {
|
||||
|
@ -181,6 +216,13 @@ class GroupSelectionScreen extends React.Component<Props, State> {
|
|||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Generates the dataset to be used in the FlatList.
|
||||
* This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
|
||||
*
|
||||
* @param fetchedData The raw data fetched from the server
|
||||
* @returns {[]}
|
||||
*/
|
||||
generateData(fetchedData: { [key: string]: groupCategory }) {
|
||||
let data = [];
|
||||
for (let key in fetchedData) {
|
||||
|
@ -192,6 +234,11 @@ class GroupSelectionScreen extends React.Component<Props, State> {
|
|||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Replaces underscore by spaces and sets the favorite state of every group in the given category
|
||||
*
|
||||
* @param item The category containing groups to format
|
||||
*/
|
||||
formatGroups(item: groupCategory) {
|
||||
for (let i = 0; i < item.content.length; i++) {
|
||||
item.content[i].name = item.content[i].name.replace(REPLACE_REGEX, " ")
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
import ThemeManager from "../../managers/ThemeManager";
|
||||
import WebViewScreen from "../../components/Screens/WebViewScreen";
|
||||
import {Avatar, Banner, withTheme} from "react-native-paper";
|
||||
|
@ -14,12 +15,15 @@ import DateManager from "../../managers/DateManager";
|
|||
import AnimatedBottomBar from "../../components/Animations/AnimatedBottomBar";
|
||||
import {CommonActions} from "@react-navigation/native";
|
||||
import ErrorView from "../../components/Screens/ErrorView";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import {Collapsible} from "react-navigation-collapsible";
|
||||
import type {group} from "./GroupSelectionScreen";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object,
|
||||
theme: Object,
|
||||
collapsibleStack: Object,
|
||||
navigation: StackNavigationProp,
|
||||
route: { params: { group: group } },
|
||||
theme: CustomTheme,
|
||||
collapsibleStack: Collapsible,
|
||||
}
|
||||
|
||||
type State = {
|
||||
|
@ -27,7 +31,7 @@ type State = {
|
|||
dialogVisible: boolean,
|
||||
dialogTitle: string,
|
||||
dialogMessage: string,
|
||||
currentGroup: Object,
|
||||
currentGroup: group,
|
||||
}
|
||||
|
||||
|
||||
|
@ -62,7 +66,7 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
|
|||
// removeAlpha($(this));
|
||||
// });
|
||||
|
||||
// Watch for changes in the calendar and call the remove alpha function
|
||||
// Watch for changes in the calendar and call the remove alpha function to prevent invisible events
|
||||
const OBSERVE_MUTATIONS_INJECTED =
|
||||
'function removeAlpha(node) {\n' +
|
||||
' let bg = node.css("background-color");\n' +
|
||||
|
@ -91,6 +95,7 @@ const OBSERVE_MUTATIONS_INJECTED =
|
|||
' removeAlpha($(this));\n' +
|
||||
'});';
|
||||
|
||||
// Overrides default settings to send a message to the webview when clicking on an event
|
||||
const FULL_CALENDAR_SETTINGS = `
|
||||
var calendar = $('#calendar').fullCalendar('getCalendar');
|
||||
calendar.option({
|
||||
|
@ -105,16 +110,6 @@ calendar.option({
|
|||
}
|
||||
});`;
|
||||
|
||||
const EXEC_COMMAND = `
|
||||
function execCommand(event) {
|
||||
alert(JSON.stringify(event));
|
||||
var data = JSON.parse(event.data);
|
||||
if (data.action === "setGroup")
|
||||
displayAde(data.data);
|
||||
else
|
||||
$('#calendar').fullCalendar(data.action, data.data);
|
||||
};`
|
||||
|
||||
const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}.fc-toolbar .fc-center{width:100%}.fc-toolbar .fc-center>*{float:none;width:100%;margin:0}#entite{margin-bottom:5px!important}#entite,#groupe{width:calc(100% - 20px);margin:0 10px}#groupe_visibility{width:100%}#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}";
|
||||
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}";
|
||||
|
||||
|
@ -129,8 +124,8 @@ $('head').append('<style>` + CUSTOM_CSS + `</style>');
|
|||
*/
|
||||
class PlanexScreen extends React.Component<Props, State> {
|
||||
|
||||
webScreenRef: Object;
|
||||
barRef: Object;
|
||||
webScreenRef: { current: null | WebViewScreen };
|
||||
barRef: { current: null | AnimatedBottomBar };
|
||||
|
||||
customInjectedJS: string;
|
||||
|
||||
|
@ -144,7 +139,7 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
|
||||
let currentGroup = AsyncStorageManager.getInstance().preferences.planexCurrentGroup.current;
|
||||
if (currentGroup === '')
|
||||
currentGroup = {name: "SELECT GROUP", id: -1};
|
||||
currentGroup = {name: "SELECT GROUP", id: -1, isFav: false};
|
||||
else {
|
||||
currentGroup = JSON.parse(currentGroup);
|
||||
props.navigation.setOptions({title: currentGroup.name})
|
||||
|
@ -159,6 +154,9 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
this.generateInjectedJS(currentGroup.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register for events and show the banner after 2 seconds
|
||||
*/
|
||||
componentDidMount() {
|
||||
this.props.navigation.addListener('focus', this.onScreenFocus);
|
||||
setTimeout(this.onBannerTimeout, 2000);
|
||||
|
@ -172,54 +170,6 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
})
|
||||
}
|
||||
|
||||
onScreenFocus = () => {
|
||||
this.handleNavigationParams();
|
||||
};
|
||||
|
||||
handleNavigationParams = () => {
|
||||
if (this.props.route.params !== undefined) {
|
||||
if (this.props.route.params.group !== undefined && this.props.route.params.group !== null) {
|
||||
// reset params to prevent infinite loop
|
||||
this.selectNewGroup(this.props.route.params.group);
|
||||
this.props.navigation.dispatch(CommonActions.setParams({group: null}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
selectNewGroup(group: Object) {
|
||||
this.sendMessage('setGroup', group.id);
|
||||
this.setState({currentGroup: group});
|
||||
AsyncStorageManager.getInstance().savePref(
|
||||
AsyncStorageManager.getInstance().preferences.planexCurrentGroup.key,
|
||||
JSON.stringify(group));
|
||||
this.props.navigation.setOptions({title: group.name})
|
||||
this.generateInjectedJS(group.id);
|
||||
}
|
||||
|
||||
generateInjectedJS(groupID: number) {
|
||||
this.customInjectedJS = "$(document).ready(function() {"
|
||||
+ OBSERVE_MUTATIONS_INJECTED
|
||||
+ FULL_CALENDAR_SETTINGS
|
||||
+ "displayAde(" + groupID + ");" // Reset Ade
|
||||
+ (DateManager.isWeekend(new Date()) ? "calendar.next()" : "")
|
||||
+ INJECT_STYLE;
|
||||
|
||||
if (ThemeManager.getNightMode())
|
||||
this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
|
||||
|
||||
this.customInjectedJS +=
|
||||
'removeAlpha();'
|
||||
+ '});'
|
||||
+ EXEC_COMMAND
|
||||
+ 'true;'; // Prevents crash on ios
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Props): boolean {
|
||||
if (nextProps.theme.dark !== this.props.theme.dark)
|
||||
this.generateInjectedJS(this.state.currentGroup.id);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback used when closing the banner.
|
||||
* This hides the banner and saves to preferences to prevent it from reopening
|
||||
|
@ -232,34 +182,122 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Callback used when the used click 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
|
||||
*
|
||||
*/
|
||||
onGoToSettings = () => {
|
||||
this.onHideBanner();
|
||||
this.props.navigation.navigate('settings');
|
||||
};
|
||||
|
||||
onScreenFocus = () => {
|
||||
this.handleNavigationParams();
|
||||
};
|
||||
|
||||
/**
|
||||
* If navigations parameters contain a group, set it as selected
|
||||
*/
|
||||
handleNavigationParams = () => {
|
||||
if (this.props.route.params != null) {
|
||||
if (this.props.route.params.group !== undefined && this.props.route.params.group !== null) {
|
||||
// reset params to prevent infinite loop
|
||||
this.selectNewGroup(this.props.route.params.group);
|
||||
this.props.navigation.dispatch(CommonActions.setParams({group: null}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Sends the webpage a message with the new group to select and save it to preferences
|
||||
*
|
||||
* @param group The group object selected
|
||||
*/
|
||||
selectNewGroup(group: group) {
|
||||
this.sendMessage('setGroup', group.id);
|
||||
this.setState({currentGroup: group});
|
||||
AsyncStorageManager.getInstance().savePref(
|
||||
AsyncStorageManager.getInstance().preferences.planexCurrentGroup.key,
|
||||
JSON.stringify(group)
|
||||
);
|
||||
this.props.navigation.setOptions({title: group.name});
|
||||
this.generateInjectedJS(group.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates custom JavaScript to be injected into the webpage
|
||||
*
|
||||
* @param groupID The current group selected
|
||||
*/
|
||||
generateInjectedJS(groupID: number) {
|
||||
this.customInjectedJS = "$(document).ready(function() {"
|
||||
+ OBSERVE_MUTATIONS_INJECTED
|
||||
+ FULL_CALENDAR_SETTINGS
|
||||
+ "displayAde(" + groupID + ");" // Reset Ade
|
||||
+ (DateManager.isWeekend(new Date()) ? "calendar.next()" : "")
|
||||
+ INJECT_STYLE;
|
||||
|
||||
if (ThemeManager.getNightMode())
|
||||
this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
|
||||
|
||||
this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
||||
}
|
||||
|
||||
/**
|
||||
* Only update the screen if the dark theme changed
|
||||
*
|
||||
* @param nextProps
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldComponentUpdate(nextProps: Props): boolean {
|
||||
if (nextProps.theme.dark !== this.props.theme.dark)
|
||||
this.generateInjectedJS(this.state.currentGroup.id);
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Sends a FullCalendar action to the web page inside the webview.
|
||||
*
|
||||
* @param action The action to perform, as described in the FullCalendar doc https://fullcalendar.io/docs/v3.
|
||||
* Or "setGroup" with the group id as data to set the selected group
|
||||
* @param data Data to pass to the action
|
||||
*/
|
||||
sendMessage = (action: string, data: any) => {
|
||||
let command;
|
||||
if (action === "setGroup")
|
||||
command = "displayAde(" + data + ")";
|
||||
else
|
||||
command = "$('#calendar').fullCalendar('" + action + "', '" + data + "')";
|
||||
this.webScreenRef.current.injectJavaScript(command + ';true;');
|
||||
}
|
||||
if (this.webScreenRef.current != null)
|
||||
this.webScreenRef.current.injectJavaScript(command + ';true;'); // Injected javascript must end with true
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a dialog when the user clicks on an event.
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
onMessage = (event: { nativeEvent: { data: string } }) => {
|
||||
const data: { start: string, end: string, title: string, color: string } = JSON.parse(event.nativeEvent.data);
|
||||
const startDate = dateToString(new Date(data.start), true);
|
||||
const endDate = dateToString(new Date(data.end), true);
|
||||
const startString = getTimeOnlyString(startDate);
|
||||
const endString = getTimeOnlyString(endDate);
|
||||
|
||||
onMessage = (event: Object) => {
|
||||
let data = JSON.parse(event.nativeEvent.data);
|
||||
let startDate = dateToString(new Date(data.start), true);
|
||||
let endDate = dateToString(new Date(data.end), true);
|
||||
let msg = DateManager.getInstance().getTranslatedDate(startDate) + "\n";
|
||||
msg += getTimeOnlyString(startDate) + ' - ' + getTimeOnlyString(endDate);
|
||||
if (startString != null && endString != null)
|
||||
msg += startString + ' - ' + endDate;
|
||||
this.showDialog(data.title, msg)
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a simple dialog to the user.
|
||||
*
|
||||
* @param title The dialog's title
|
||||
* @param message The message to show
|
||||
*/
|
||||
showDialog = (title: string, message: string) => {
|
||||
this.setState({
|
||||
dialogVisible: true,
|
||||
|
@ -268,16 +306,30 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Hides the dialog
|
||||
*/
|
||||
hideDialog = () => {
|
||||
this.setState({
|
||||
dialogVisible: false,
|
||||
});
|
||||
};
|
||||
|
||||
onScroll = (event: Object) => {
|
||||
this.barRef.current.onScroll(event);
|
||||
/**
|
||||
* Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
onScroll = (event: SyntheticEvent<EventTarget>) => {
|
||||
if (this.barRef.current != null)
|
||||
this.barRef.current.onScroll(event);
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the Webview, with an error view on top if no group is selected.
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getWebView() {
|
||||
const showWebview = this.state.currentGroup.id !== -1;
|
||||
|
||||
|
@ -291,7 +343,6 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
showRetryButton={false}
|
||||
/>
|
||||
: null}
|
||||
|
||||
<WebViewScreen
|
||||
ref={this.webScreenRef}
|
||||
navigation={this.props.navigation}
|
||||
|
@ -317,7 +368,7 @@ class PlanexScreen extends React.Component<Props, State> {
|
|||
height: '100%',
|
||||
width: '100%',
|
||||
}}>
|
||||
{this.props.theme.dark // Force component theme update
|
||||
{this.props.theme.dark // Force component theme update by recreating it on theme change
|
||||
? this.getWebView()
|
||||
: <View style={{height: '100%'}}>{this.getWebView()}</View>}
|
||||
</View>
|
||||
|
|
|
@ -12,10 +12,13 @@ import ErrorView from "../../components/Screens/ErrorView";
|
|||
import CustomHTML from "../../components/Overrides/CustomHTML";
|
||||
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
||||
import i18n from 'i18n-js';
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object
|
||||
navigation: StackNavigationProp,
|
||||
route: { params: { data: Object, id: number, eventId: number } },
|
||||
theme: CustomTheme
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
@ -34,13 +37,15 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
|
|||
eventId: number;
|
||||
errorCode: number;
|
||||
|
||||
colors: Object;
|
||||
|
||||
/**
|
||||
* Generates data depending on whether the screen was opened from the planning or from a link
|
||||
*
|
||||
* @param props
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.colors = props.theme.colors;
|
||||
|
||||
if (this.props.route.params.data !== undefined) {
|
||||
if (this.props.route.params.data != null) {
|
||||
this.displayData = this.props.route.params.data;
|
||||
this.eventId = this.displayData.id;
|
||||
this.shouldFetchData = false;
|
||||
|
@ -61,6 +66,9 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches data for the current event id from the API
|
||||
*/
|
||||
fetchData = () => {
|
||||
this.setState({loading: true});
|
||||
apiRequest(CLUB_INFO_PATH, 'POST', {id: this.eventId})
|
||||
|
@ -68,16 +76,31 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
|
|||
.catch(this.onFetchError);
|
||||
};
|
||||
|
||||
/**
|
||||
* Hides loading and saves fetched data
|
||||
*
|
||||
* @param data Received data
|
||||
*/
|
||||
onFetchSuccess = (data: Object) => {
|
||||
this.displayData = data;
|
||||
this.setState({loading: false});
|
||||
};
|
||||
|
||||
/**
|
||||
* Hides loading and saves the error code
|
||||
*
|
||||
* @param error
|
||||
*/
|
||||
onFetchError = (error: number) => {
|
||||
this.errorCode = error;
|
||||
this.setState({loading: false});
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets content to display
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getContent() {
|
||||
let subtitle = getFormattedEventTime(
|
||||
this.displayData["date_begin"], this.displayData["date_end"]);
|
||||
|
@ -94,7 +117,7 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
|
|||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
<ImageModal
|
||||
resizeMode="contain"
|
||||
imageBackgroundColor={this.colors.background}
|
||||
imageBackgroundColor={this.props.theme.colors.background}
|
||||
style={{
|
||||
width: 300,
|
||||
height: 300,
|
||||
|
@ -114,9 +137,15 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows an error view and use a custom message if the event does not exist
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getErrorView() {
|
||||
if (this.errorCode === ERROR_TYPE.BAD_INPUT)
|
||||
return <ErrorView {...this.props} showRetryButton={false} message={i18n.t("planningScreen.invalidEvent")} icon={"calendar-remove"}/>;
|
||||
return <ErrorView {...this.props} showRetryButton={false} message={i18n.t("planningScreen.invalidEvent")}
|
||||
icon={"calendar-remove"}/>;
|
||||
else
|
||||
return <ErrorView {...this.props} errorCode={this.errorCode} onRefresh={this.fetchData}/>;
|
||||
}
|
||||
|
|
|
@ -14,6 +14,7 @@ import {
|
|||
} from '../../utils/Planning';
|
||||
import {Avatar, Divider, List} from 'react-native-paper';
|
||||
import CustomAgenda from "../../components/Overrides/CustomAgenda";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
|
||||
LocaleConfig.locales['fr'] = {
|
||||
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
|
||||
|
@ -25,8 +26,7 @@ LocaleConfig.locales['fr'] = {
|
|||
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object,
|
||||
navigation: StackNavigationProp,
|
||||
}
|
||||
|
||||
type State = {
|
||||
|
@ -48,22 +48,12 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
lastRefresh: Date;
|
||||
minTimeBetweenRefresh = 60;
|
||||
|
||||
didFocusSubscription: Function;
|
||||
willBlurSubscription: Function;
|
||||
|
||||
state = {
|
||||
refreshing: false,
|
||||
agendaItems: {},
|
||||
calendarShowing: false,
|
||||
};
|
||||
|
||||
onRefresh: Function;
|
||||
onCalendarToggled: Function;
|
||||
getRenderItem: Function;
|
||||
getRenderEmptyDate: Function;
|
||||
onAgendaRef: Function;
|
||||
onCalendarToggled: Function;
|
||||
onBackButtonPressAndroid: Function;
|
||||
currentDate = getDateOnlyString(getCurrentDateString());
|
||||
|
||||
constructor(props: any) {
|
||||
|
@ -71,15 +61,6 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
if (i18n.currentLocale().startsWith("fr")) {
|
||||
LocaleConfig.defaultLocale = 'fr';
|
||||
}
|
||||
|
||||
// Create references for functions required in the render function
|
||||
this.onRefresh = this.onRefresh.bind(this);
|
||||
this.onCalendarToggled = this.onCalendarToggled.bind(this);
|
||||
this.getRenderItem = this.getRenderItem.bind(this);
|
||||
this.getRenderEmptyDate = this.getRenderEmptyDate.bind(this);
|
||||
this.onAgendaRef = this.onAgendaRef.bind(this);
|
||||
this.onCalendarToggled = this.onCalendarToggled.bind(this);
|
||||
this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -87,7 +68,7 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
*/
|
||||
componentDidMount() {
|
||||
this.onRefresh();
|
||||
this.didFocusSubscription = this.props.navigation.addListener(
|
||||
this.props.navigation.addListener(
|
||||
'focus',
|
||||
() =>
|
||||
BackHandler.addEventListener(
|
||||
|
@ -95,7 +76,7 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
this.onBackButtonPressAndroid
|
||||
)
|
||||
);
|
||||
this.willBlurSubscription = this.props.navigation.addListener(
|
||||
this.props.navigation.addListener(
|
||||
'blur',
|
||||
() =>
|
||||
BackHandler.removeEventListener(
|
||||
|
@ -110,7 +91,7 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
*
|
||||
* @return {boolean}
|
||||
*/
|
||||
onBackButtonPressAndroid() {
|
||||
onBackButtonPressAndroid = () => {
|
||||
if (this.state.calendarShowing) {
|
||||
this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
|
||||
return true;
|
||||
|
@ -166,7 +147,7 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
*
|
||||
* @param ref
|
||||
*/
|
||||
onAgendaRef(ref: Object) {
|
||||
onAgendaRef = (ref: Object) => {
|
||||
this.agendaRef = ref;
|
||||
}
|
||||
|
||||
|
@ -175,7 +156,7 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
*
|
||||
* @param isCalendarOpened True is the calendar is already open, false otherwise
|
||||
*/
|
||||
onCalendarToggled(isCalendarOpened: boolean) {
|
||||
onCalendarToggled = (isCalendarOpened: boolean) => {
|
||||
this.setState({calendarShowing: isCalendarOpened});
|
||||
}
|
||||
|
||||
|
@ -185,7 +166,7 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
* @param item The current event to render
|
||||
* @return {*}
|
||||
*/
|
||||
getRenderItem(item: eventObject) {
|
||||
getRenderItem = (item: eventObject) => {
|
||||
const onPress = this.props.navigation.navigate.bind(this, 'planning-information', {data: item});
|
||||
if (item.logo !== null) {
|
||||
return (
|
||||
|
@ -221,11 +202,7 @@ class PlanningScreen extends React.Component<Props, State> {
|
|||
*
|
||||
* @return {*}
|
||||
*/
|
||||
getRenderEmptyDate() {
|
||||
return (
|
||||
<Divider/>
|
||||
);
|
||||
}
|
||||
getRenderEmptyDate = () => <Divider/>;
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
|
|
@ -6,9 +6,7 @@ import i18n from "i18n-js";
|
|||
import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
|
||||
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
};
|
||||
type Props = {};
|
||||
|
||||
const LOGO = "https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png";
|
||||
|
||||
|
|
|
@ -5,9 +5,10 @@ import {Image, ScrollView, View} from 'react-native';
|
|||
import i18n from "i18n-js";
|
||||
import {Card, List, Paragraph, Text} from 'react-native-paper';
|
||||
import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
navigation: StackNavigationProp,
|
||||
};
|
||||
|
||||
const LOGO = "https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png";
|
||||
|
|
|
@ -9,6 +9,9 @@ import {stringMatchQuery} from "../../../utils/Search";
|
|||
import ProximoListItem from "../../../components/Lists/Proximo/ProximoListItem";
|
||||
import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
|
||||
import {withCollapsible} from "../../../utils/withCollapsible";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import {Collapsible} from "react-navigation-collapsible";
|
||||
|
||||
function sortPrice(a, b) {
|
||||
return a.price - b.price;
|
||||
|
@ -37,10 +40,10 @@ function sortNameReverse(a, b) {
|
|||
const LIST_ITEM_HEIGHT = 84;
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object,
|
||||
theme: Object,
|
||||
collapsibleStack: Object,
|
||||
navigation: StackNavigationProp,
|
||||
route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
|
||||
theme: CustomTheme,
|
||||
collapsibleStack: Collapsible,
|
||||
}
|
||||
|
||||
type State = {
|
||||
|
|
|
@ -6,13 +6,15 @@ import i18n from "i18n-js";
|
|||
import WebSectionList from "../../../components/Screens/WebSectionList";
|
||||
import {List, withTheme} from 'react-native-paper';
|
||||
import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
|
||||
const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
|
||||
const LIST_ITEM_HEIGHT = 84;
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object,
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
|
||||
type State = {
|
||||
|
@ -27,22 +29,6 @@ class ProximoMainScreen extends React.Component<Props, State> {
|
|||
|
||||
articles: Object;
|
||||
|
||||
onPressSearchBtn: Function;
|
||||
onPressAboutBtn: Function;
|
||||
getRenderItem: Function;
|
||||
createDataset: Function;
|
||||
|
||||
colors: Object;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onPressSearchBtn = this.onPressSearchBtn.bind(this);
|
||||
this.onPressAboutBtn = this.onPressAboutBtn.bind(this);
|
||||
this.getRenderItem = this.getRenderItem.bind(this);
|
||||
this.createDataset = this.createDataset.bind(this);
|
||||
this.colors = props.theme.colors;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function used to sort items in the list.
|
||||
* Makes the All category stick to the top and sorts the others by name ascending
|
||||
|
@ -83,7 +69,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
|
|||
* Callback used when the search button is pressed.
|
||||
* This will open a new ProximoListScreen with all items displayed
|
||||
*/
|
||||
onPressSearchBtn() {
|
||||
onPressSearchBtn = () => {
|
||||
let searchScreenData = {
|
||||
shouldFocusSearchBar: true,
|
||||
data: {
|
||||
|
@ -97,13 +83,13 @@ class ProximoMainScreen extends React.Component<Props, State> {
|
|||
},
|
||||
};
|
||||
this.props.navigation.navigate('proximo-list', searchScreenData);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when the about button is pressed.
|
||||
* This will open the ProximoAboutScreen
|
||||
*/
|
||||
onPressAboutBtn() {
|
||||
onPressAboutBtn = () => {
|
||||
this.props.navigation.navigate('proximo-about');
|
||||
}
|
||||
|
||||
|
@ -134,7 +120,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
|
|||
* @param fetchedData
|
||||
* @return {*}
|
||||
* */
|
||||
createDataset(fetchedData: Object) {
|
||||
createDataset = (fetchedData: Object) => {
|
||||
return [
|
||||
{
|
||||
title: '',
|
||||
|
@ -202,7 +188,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
|
|||
* @param item The category to render
|
||||
* @return {*}
|
||||
*/
|
||||
getRenderItem({item}: Object) {
|
||||
getRenderItem = ({item}: Object) => {
|
||||
let dataToSend = {
|
||||
shouldFocusSearchBar: false,
|
||||
data: item,
|
||||
|
@ -218,7 +204,7 @@ class ProximoMainScreen extends React.Component<Props, State> {
|
|||
left={props => <List.Icon
|
||||
{...props}
|
||||
icon={item.type.icon}
|
||||
color={this.colors.primary}/>}
|
||||
color={this.props.theme.colors.primary}/>}
|
||||
right={props => <List.Icon {...props} icon={'chevron-right'}/>}
|
||||
style={{
|
||||
height: LIST_ITEM_HEIGHT,
|
||||
|
|
|
@ -12,14 +12,22 @@ import type {CustomTheme} from "../../managers/ThemeManager";
|
|||
import i18n from 'i18n-js';
|
||||
import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
|
||||
import ConnectionManager from "../../managers/ConnectionManager";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object,
|
||||
navigation: StackNavigationProp,
|
||||
collapsibleStack: Collapsible,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
|
||||
export type listItem = {
|
||||
title: string,
|
||||
description: string,
|
||||
image: string | number,
|
||||
shouldLogin: boolean,
|
||||
content: cardList,
|
||||
}
|
||||
|
||||
const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
|
||||
const PROFILE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProfilAmicaliste.png";
|
||||
const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
|
||||
|
@ -36,17 +44,7 @@ const ROOM_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Salles.png
|
|||
const EMAIL_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bluemind.png";
|
||||
const ENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ENT.png";
|
||||
|
||||
export type listItem = {
|
||||
title: string,
|
||||
description: string,
|
||||
image: string | number,
|
||||
shouldLogin: boolean,
|
||||
content: cardList,
|
||||
}
|
||||
|
||||
type State = {}
|
||||
|
||||
class ServicesScreen extends React.Component<Props, State> {
|
||||
class ServicesScreen extends React.Component<Props> {
|
||||
|
||||
amicaleDataset: cardList;
|
||||
studentsDataset: cardList;
|
||||
|
@ -179,7 +177,17 @@ class ServicesScreen extends React.Component<Props, State> {
|
|||
|
||||
onAboutPress = () => this.props.navigation.navigate('amicale-contact');
|
||||
|
||||
getAvatar(props, source: string | number) {
|
||||
/**
|
||||
* Gets the list title image for the list.
|
||||
*
|
||||
* If the source is a string, we are using an icon.
|
||||
* If the source is a number, we are using an internal image.
|
||||
*
|
||||
* @param props Props to pass to the component
|
||||
* @param source The source image to display. Can be a string for icons or a number for local images
|
||||
* @returns {*}
|
||||
*/
|
||||
getListTitleImage(props, source: string | number) {
|
||||
if (typeof source === "number")
|
||||
return <Avatar.Image
|
||||
{...props}
|
||||
|
@ -197,6 +205,11 @@ class ServicesScreen extends React.Component<Props, State> {
|
|||
/>
|
||||
}
|
||||
|
||||
/**
|
||||
* Redirects to the given route or to the login screen if user is not logged in.
|
||||
*
|
||||
* @param route The route to navigate to
|
||||
*/
|
||||
onAmicaleServicePress(route: string) {
|
||||
if (ConnectionManager.getInstance().isLoggedIn())
|
||||
this.props.navigation.navigate(route);
|
||||
|
@ -204,6 +217,12 @@ class ServicesScreen extends React.Component<Props, State> {
|
|||
this.props.navigation.navigate("login", {nextScreen: route});
|
||||
}
|
||||
|
||||
/**
|
||||
* A list item showing a list of available services for the current category
|
||||
*
|
||||
* @param item
|
||||
* @returns {*}
|
||||
*/
|
||||
renderItem = ({item}: { item: listItem }) => {
|
||||
return (
|
||||
<TouchableRipple
|
||||
|
@ -216,7 +235,7 @@ class ServicesScreen extends React.Component<Props, State> {
|
|||
<View>
|
||||
<Card.Title
|
||||
title={item.title}
|
||||
left={(props) => this.getAvatar(props, item.image)}
|
||||
left={(props) => this.getListTitleImage(props, item.image)}
|
||||
right={(props) => <List.Icon {...props} icon="chevron-right"/>}
|
||||
/>
|
||||
<CardList
|
||||
|
|
|
@ -7,10 +7,11 @@ import {withCollapsible} from "../../utils/withCollapsible";
|
|||
import {Collapsible} from "react-navigation-collapsible";
|
||||
import {CommonActions} from "@react-navigation/native";
|
||||
import type {listItem} from "./ServicesScreen";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
|
||||
type Props = {
|
||||
navigation: Object,
|
||||
route: Object,
|
||||
navigation: StackNavigationProp,
|
||||
route: { params: { data: listItem | null } },
|
||||
collapsibleStack: Collapsible,
|
||||
}
|
||||
|
||||
|
@ -23,6 +24,9 @@ class ServicesSectionScreen extends React.Component<Props> {
|
|||
this.handleNavigationParams();
|
||||
}
|
||||
|
||||
/**
|
||||
* Recover the list to display from navigation parameters
|
||||
*/
|
||||
handleNavigationParams() {
|
||||
if (this.props.route.params != null) {
|
||||
if (this.props.route.params.data != null) {
|
||||
|
|
|
@ -32,7 +32,7 @@ const API_ENDPOINT = "https://www.amicale-insat.fr/api/";
|
|||
* @param params The params to use for this request
|
||||
* @returns {Promise<R>}
|
||||
*/
|
||||
export async function apiRequest(path: string, method: string, params: ?{ [key: string]: string }) {
|
||||
export async function apiRequest(path: string, method: string, params: ?{ [key: string]: string | number }) {
|
||||
if (params === undefined || params === null)
|
||||
params = {};
|
||||
|
||||
|
|
Loading…
Reference in a new issue