Compare commits
No commits in common. "93d12b27f8c19020caa6a2d422977e5597dadf12" and "925bded69bba0af20237fb52d96a72c498718e0b" have entirely different histories.
93d12b27f8
...
925bded69b
30 changed files with 2884 additions and 3099 deletions
|
|
@ -1,114 +1,101 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {View} from "react-native";
|
||||
import {List, withTheme} from 'react-native-paper';
|
||||
import Collapsible from 'react-native-collapsible';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import Collapsible from "react-native-collapsible";
|
||||
import * as Animatable from "react-native-animatable";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
|
||||
type PropsType = {
|
||||
theme: CustomTheme,
|
||||
title: string,
|
||||
subtitle?: string,
|
||||
left?: () => React.Node,
|
||||
opened?: boolean,
|
||||
unmountWhenCollapsed?: boolean,
|
||||
children?: React.Node,
|
||||
};
|
||||
type Props = {
|
||||
theme: CustomTheme,
|
||||
title: string,
|
||||
subtitle?: string,
|
||||
left?: (props: { [keys: string]: any }) => React.Node,
|
||||
opened?: boolean,
|
||||
unmountWhenCollapsed: boolean,
|
||||
children?: React.Node,
|
||||
}
|
||||
|
||||
type StateType = {
|
||||
expanded: boolean,
|
||||
};
|
||||
type State = {
|
||||
expanded: boolean,
|
||||
}
|
||||
|
||||
const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
|
||||
|
||||
class AnimatedAccordion extends React.Component<PropsType, StateType> {
|
||||
static defaultProps = {
|
||||
subtitle: '',
|
||||
left: null,
|
||||
opened: null,
|
||||
unmountWhenCollapsed: false,
|
||||
children: null,
|
||||
};
|
||||
class AnimatedAccordion extends React.Component<Props, State> {
|
||||
|
||||
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) {
|
||||
super(props);
|
||||
this.state = {
|
||||
expanded: props.opened != null ? props.opened : false,
|
||||
toggleAccordion = () => {
|
||||
if (this.chevronRef.current != null) {
|
||||
this.chevronRef.current.transitionTo({rotate: this.state.expanded ? this.animStart : this.animEnd});
|
||||
this.setState({expanded: !this.state.expanded})
|
||||
}
|
||||
};
|
||||
this.chevronRef = React.createRef();
|
||||
this.setupChevron();
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {state, props} = this;
|
||||
if (nextProps.opened != null && nextProps.opened !== props.opened)
|
||||
state.expanded = nextProps.opened;
|
||||
return true;
|
||||
}
|
||||
|
||||
setupChevron() {
|
||||
const {state} = this;
|
||||
if (state.expanded) {
|
||||
this.chevronIcon = 'chevron-up';
|
||||
this.animStart = '180deg';
|
||||
this.animEnd = '0deg';
|
||||
} else {
|
||||
this.chevronIcon = 'chevron-down';
|
||||
this.animStart = '0deg';
|
||||
this.animEnd = '180deg';
|
||||
shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
|
||||
if (nextProps.opened != null && nextProps.opened !== this.props.opened)
|
||||
this.state.expanded = nextProps.opened;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleAccordion = () => {
|
||||
const {state} = this;
|
||||
if (this.chevronRef.current != null) {
|
||||
this.chevronRef.current.transitionTo({
|
||||
rotate: state.expanded ? this.animStart : this.animEnd,
|
||||
});
|
||||
this.setState({expanded: !state.expanded});
|
||||
render() {
|
||||
const colors = this.props.theme.colors;
|
||||
return (
|
||||
<View>
|
||||
<List.Item
|
||||
{...this.props}
|
||||
title={this.props.title}
|
||||
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} : undefined}
|
||||
onPress={this.toggleAccordion}
|
||||
right={({size}: {size: number}): React.Node => (
|
||||
<AnimatedListIcon
|
||||
ref={this.chevronRef}
|
||||
size={size}
|
||||
icon={this.chevronIcon}
|
||||
color={state.expanded ? colors.primary : undefined}
|
||||
useNativeDriver
|
||||
/>
|
||||
)}
|
||||
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);
|
||||
|
|
@ -1,178 +1,170 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
import {FAB, IconButton, Surface, withTheme} from 'react-native-paper';
|
||||
import {StyleSheet, View} from "react-native";
|
||||
import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
|
||||
import AutoHideHandler from "../../utils/AutoHideHandler";
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import AutoHideHandler from '../../utils/AutoHideHandler';
|
||||
import CustomTabBar from '../Tabbar/CustomTabBar';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import CustomTabBar from "../Tabbar/CustomTabBar";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
|
||||
const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
|
||||
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
onPress: (action: string, data?: string) => void,
|
||||
seekAttention: boolean,
|
||||
};
|
||||
|
||||
type StateType = {
|
||||
currentMode: string,
|
||||
};
|
||||
|
||||
const DISPLAY_MODES = {
|
||||
DAY: 'agendaDay',
|
||||
WEEK: 'agendaWeek',
|
||||
MONTH: 'month',
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
position: 'absolute',
|
||||
left: '5%',
|
||||
width: '90%',
|
||||
},
|
||||
surface: {
|
||||
position: 'relative',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
borderRadius: 50,
|
||||
elevation: 2,
|
||||
},
|
||||
fabContainer: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
fab: {
|
||||
position: 'absolute',
|
||||
alignSelf: 'center',
|
||||
top: '-25%',
|
||||
},
|
||||
});
|
||||
|
||||
class AnimatedBottomBar extends React.Component<PropsType, StateType> {
|
||||
ref: {current: null | Animatable.View};
|
||||
|
||||
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: SyntheticEvent<EventTarget>) => {
|
||||
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 Props = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
onPress: (action: string, data: any) => void,
|
||||
seekAttention: boolean,
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -1,63 +1,66 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {StyleSheet} from 'react-native';
|
||||
import {FAB} from 'react-native-paper';
|
||||
import {StyleSheet} from "react-native";
|
||||
import {FAB} from "react-native-paper";
|
||||
import AutoHideHandler from "../../utils/AutoHideHandler";
|
||||
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 = {
|
||||
icon: string,
|
||||
onPress: () => void,
|
||||
};
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
icon: string,
|
||||
onPress: () => void,
|
||||
}
|
||||
|
||||
const AnimatedFab = Animatable.createAnimatableComponent(FAB);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
fab: {
|
||||
position: 'absolute',
|
||||
margin: 16,
|
||||
right: 0,
|
||||
},
|
||||
});
|
||||
export default class AnimatedFAB extends React.Component<Props> {
|
||||
|
||||
export default class AnimatedFAB extends React.Component<PropsType> {
|
||||
ref: {current: null | Animatable.View};
|
||||
ref: { current: null | Animatable.View };
|
||||
hideHandler: AutoHideHandler;
|
||||
|
||||
hideHandler: AutoHideHandler;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.ref = React.createRef();
|
||||
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);
|
||||
constructor() {
|
||||
super();
|
||||
this.ref = React.createRef();
|
||||
this.hideHandler = new AutoHideHandler(false);
|
||||
this.hideHandler.addListener(this.onHideChange);
|
||||
}
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<AnimatedFab
|
||||
ref={this.ref}
|
||||
useNativeDriver
|
||||
icon={props.icon}
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.fab,
|
||||
bottom: CustomTabBar.TAB_BAR_HEIGHT,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
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() {
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,59 +1,51 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Collapsible} from 'react-navigation-collapsible';
|
||||
import {withCollapsible} from '../../utils/withCollapsible';
|
||||
import CustomTabBar from '../Tabbar/CustomTabBar';
|
||||
import {withCollapsible} from "../../utils/withCollapsible";
|
||||
import {Collapsible} from "react-navigation-collapsible";
|
||||
import CustomTabBar from "../Tabbar/CustomTabBar";
|
||||
|
||||
export type CollapsibleComponentPropsType = {
|
||||
children?: React.Node,
|
||||
hasTab?: boolean,
|
||||
onScroll?: (event: SyntheticEvent<EventTarget>) => void,
|
||||
export type CollapsibleComponentProps = {
|
||||
children?: React.Node,
|
||||
hasTab?: boolean,
|
||||
onScroll?: (event: SyntheticEvent<EventTarget>) => void,
|
||||
};
|
||||
|
||||
type PropsType = {
|
||||
...CollapsibleComponentPropsType,
|
||||
collapsibleStack: Collapsible,
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
component: any,
|
||||
};
|
||||
type Props = {
|
||||
...CollapsibleComponentProps,
|
||||
collapsibleStack: Collapsible,
|
||||
component: any,
|
||||
}
|
||||
|
||||
class CollapsibleComponent extends React.Component<PropsType> {
|
||||
static defaultProps = {
|
||||
children: null,
|
||||
hasTab: false,
|
||||
onScroll: null,
|
||||
};
|
||||
class CollapsibleComponent extends React.Component<Props> {
|
||||
|
||||
onScroll = (event: SyntheticEvent<EventTarget>) => {
|
||||
const {props} = this;
|
||||
if (props.onScroll) props.onScroll(event);
|
||||
};
|
||||
static defaultProps = {
|
||||
hasTab: false,
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const Comp = props.component;
|
||||
const {
|
||||
containerPaddingTop,
|
||||
scrollIndicatorInsetTop,
|
||||
onScrollWithListener,
|
||||
} = props.collapsibleStack;
|
||||
onScroll = (event: SyntheticEvent<EventTarget>) => {
|
||||
if (this.props.onScroll)
|
||||
this.props.onScroll(event);
|
||||
}
|
||||
|
||||
return (
|
||||
<Comp
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...props}
|
||||
onScroll={onScrollWithListener(this.onScroll)}
|
||||
contentContainerStyle={{
|
||||
paddingTop: containerPaddingTop,
|
||||
paddingBottom: props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
|
||||
minHeight: '100%',
|
||||
}}
|
||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
|
||||
{props.children}
|
||||
</Comp>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const Comp = this.props.component;
|
||||
const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
|
||||
return (
|
||||
<Comp
|
||||
{...this.props}
|
||||
onScroll={onScrollWithListener(this.onScroll)}
|
||||
contentContainerStyle={{
|
||||
paddingTop: containerPaddingTop,
|
||||
paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
|
||||
minHeight: '100%'
|
||||
}}
|
||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
||||
>
|
||||
{this.props.children}
|
||||
</Comp>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withCollapsible(CollapsibleComponent);
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Animated} from 'react-native';
|
||||
import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
|
||||
import CollapsibleComponent from './CollapsibleComponent';
|
||||
import {Animated} from "react-native";
|
||||
import type {CollapsibleComponentProps} from "./CollapsibleComponent";
|
||||
import CollapsibleComponent from "./CollapsibleComponent";
|
||||
|
||||
type PropsType = {
|
||||
...CollapsibleComponentPropsType,
|
||||
};
|
||||
type Props = {
|
||||
...CollapsibleComponentProps
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
class CollapsibleFlatList extends React.Component<PropsType> {
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...props}
|
||||
component={Animated.FlatList}>
|
||||
{props.children}
|
||||
</CollapsibleComponent>
|
||||
);
|
||||
}
|
||||
class CollapsibleFlatList extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CollapsibleComponent
|
||||
{...this.props}
|
||||
component={Animated.FlatList}
|
||||
>
|
||||
{this.props.children}
|
||||
</CollapsibleComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CollapsibleFlatList;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Animated} from 'react-native';
|
||||
import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
|
||||
import CollapsibleComponent from './CollapsibleComponent';
|
||||
import {Animated} from "react-native";
|
||||
import type {CollapsibleComponentProps} from "./CollapsibleComponent";
|
||||
import CollapsibleComponent from "./CollapsibleComponent";
|
||||
|
||||
type PropsType = {
|
||||
...CollapsibleComponentPropsType,
|
||||
};
|
||||
type Props = {
|
||||
...CollapsibleComponentProps
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
class CollapsibleScrollView extends React.Component<PropsType> {
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...props}
|
||||
component={Animated.ScrollView}>
|
||||
{props.children}
|
||||
</CollapsibleComponent>
|
||||
);
|
||||
}
|
||||
class CollapsibleScrollView extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CollapsibleComponent
|
||||
{...this.props}
|
||||
component={Animated.ScrollView}
|
||||
>
|
||||
{this.props.children}
|
||||
</CollapsibleComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CollapsibleScrollView;
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Animated} from 'react-native';
|
||||
import type {CollapsibleComponentPropsType} from './CollapsibleComponent';
|
||||
import CollapsibleComponent from './CollapsibleComponent';
|
||||
import {Animated} from "react-native";
|
||||
import type {CollapsibleComponentProps} from "./CollapsibleComponent";
|
||||
import CollapsibleComponent from "./CollapsibleComponent";
|
||||
|
||||
type PropsType = {
|
||||
...CollapsibleComponentPropsType,
|
||||
};
|
||||
type Props = {
|
||||
...CollapsibleComponentProps
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
class CollapsibleSectionList extends React.Component<PropsType> {
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<CollapsibleComponent // eslint-disable-next-line react/jsx-props-no-spreading
|
||||
{...props}
|
||||
component={Animated.SectionList}>
|
||||
{props.children}
|
||||
</CollapsibleComponent>
|
||||
);
|
||||
}
|
||||
class CollapsibleSectionList extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CollapsibleComponent
|
||||
{...this.props}
|
||||
component={Animated.SectionList}
|
||||
>
|
||||
{this.props.children}
|
||||
</CollapsibleComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CollapsibleSectionList;
|
||||
|
|
|
|||
|
|
@ -2,46 +2,37 @@
|
|||
|
||||
import * as React from 'react';
|
||||
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 {StackNavigationProp} from '@react-navigation/stack';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
};
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
|
||||
class ActionsDashBoardItem extends React.Component<PropsType> {
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {props} = this;
|
||||
return nextProps.theme.dark !== props.theme.dark;
|
||||
}
|
||||
class ActionsDashBoardItem extends React.Component<Props> {
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<View>
|
||||
<List.Item
|
||||
title={i18n.t('screens.feedback.homeButtonTitle')}
|
||||
description={i18n.t('screens.feedback.homeButtonSubtitle')}
|
||||
left={({size}: {size: number}): React.Node => (
|
||||
<List.Icon size={size} icon="comment-quote" />
|
||||
)}
|
||||
right={({size}: {size: number}): React.Node => (
|
||||
<List.Icon size={size} icon="chevron-right" />
|
||||
)}
|
||||
onPress={(): void => props.navigation.navigate('feedback')}
|
||||
style={{
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
shouldComponentUpdate(nextProps: Props): boolean {
|
||||
return (nextProps.theme.dark !== this.props.theme.dark);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<List.Item
|
||||
title={i18n.t("screens.feedback.homeButtonTitle")}
|
||||
description={i18n.t("screens.feedback.homeButtonSubtitle")}
|
||||
left={props => <List.Icon {...props} icon={"comment-quote"}/>}
|
||||
right={props => <List.Icon {...props} icon={"chevron-right"}/>}
|
||||
onPress={() => this.props.navigation.navigate("feedback")}
|
||||
style={{paddingTop: 0, paddingBottom: 0, marginLeft: 10, marginRight: 10}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(ActionsDashBoardItem);
|
||||
|
|
|
|||
|
|
@ -1,96 +1,91 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Avatar,
|
||||
Card,
|
||||
Text,
|
||||
TouchableRipple,
|
||||
withTheme,
|
||||
} from 'react-native-paper';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
import i18n from 'i18n-js';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import {Avatar, Card, Text, TouchableRipple, withTheme} from 'react-native-paper';
|
||||
import {StyleSheet, View} from "react-native";
|
||||
import i18n from "i18n-js";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
|
||||
type PropsType = {
|
||||
eventNumber: number,
|
||||
clickAction: () => void,
|
||||
theme: CustomTheme,
|
||||
children?: React.Node,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
width: 'auto',
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
marginTop: 10,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
avatar: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
});
|
||||
type Props = {
|
||||
eventNumber: number;
|
||||
clickAction: () => void,
|
||||
theme: CustomTheme,
|
||||
children?: React.Node
|
||||
}
|
||||
|
||||
/**
|
||||
* Component used to display a dashboard item containing a preview event
|
||||
*/
|
||||
class EventDashBoardItem extends React.Component<PropsType> {
|
||||
static defaultProps = {
|
||||
children: null,
|
||||
};
|
||||
class EventDashBoardItem extends React.Component<Props> {
|
||||
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {props} = this;
|
||||
return (
|
||||
nextProps.theme.dark !== props.theme.dark ||
|
||||
nextProps.eventNumber !== props.eventNumber
|
||||
);
|
||||
}
|
||||
shouldComponentUpdate(nextProps: Props) {
|
||||
return (nextProps.theme.dark !== this.props.theme.dark)
|
||||
|| (nextProps.eventNumber !== this.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);
|
||||
|
|
|
|||
|
|
@ -2,114 +2,126 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Button, Card, Text, TouchableRipple} from 'react-native-paper';
|
||||
import {Image, View} from 'react-native';
|
||||
import Autolink from 'react-native-autolink';
|
||||
import i18n from 'i18n-js';
|
||||
import {Image, View} from "react-native";
|
||||
import Autolink from "react-native-autolink";
|
||||
import i18n from "i18n-js";
|
||||
import ImageModal from 'react-native-image-modal';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import type {FeedItemType} from '../../screens/Home/HomeScreen';
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
import type {feedItem} from "../../screens/Home/HomeScreen";
|
||||
|
||||
const ICON_AMICALE = require('../../../assets/amicale.png');
|
||||
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
item: FeedItemType,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
height: number,
|
||||
};
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
item: feedItem,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
height: number,
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Component used to display a feed item
|
||||
*/
|
||||
class FeedItem extends React.Component<PropsType> {
|
||||
shouldComponentUpdate(): boolean {
|
||||
return false;
|
||||
}
|
||||
class FeedItem extends React.Component<Props> {
|
||||
|
||||
onPress = () => {
|
||||
const {props} = this;
|
||||
props.navigation.navigate('feed-information', {
|
||||
data: props.item,
|
||||
date: props.subtitle,
|
||||
});
|
||||
};
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const {item} = props;
|
||||
const hasImage =
|
||||
item.full_picture !== '' && item.full_picture !== undefined;
|
||||
|
||||
const cardMargin = 10;
|
||||
const cardHeight = props.height - 2 * cardMargin;
|
||||
const imageSize = 250;
|
||||
const titleHeight = 80;
|
||||
const actionsHeight = 60;
|
||||
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={{
|
||||
/**
|
||||
* Gets the amicale INSAT logo
|
||||
*
|
||||
* @return {*}
|
||||
*/
|
||||
getAvatar() {
|
||||
return (
|
||||
<Image
|
||||
size={48}
|
||||
source={ICON_AMICALE}
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
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>
|
||||
);
|
||||
}
|
||||
}}/>
|
||||
);
|
||||
}
|
||||
|
||||
onPress = () => {
|
||||
this.props.navigation.navigate(
|
||||
'feed-information',
|
||||
{
|
||||
data: this.props.item,
|
||||
date: this.props.subtitle
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const item = this.props.item;
|
||||
const hasImage = item.full_picture !== '' && item.full_picture !== undefined;
|
||||
|
||||
const cardMargin = 10;
|
||||
const cardHeight = this.props.height - 2 * cardMargin;
|
||||
const imageSize = 250;
|
||||
const titleHeight = 80;
|
||||
const actionsHeight = 60;
|
||||
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={this.props.title}
|
||||
subtitle={this.props.subtitle}
|
||||
left={this.getAvatar}
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,100 +1,94 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
import i18n from 'i18n-js';
|
||||
import {StyleSheet, View} from "react-native";
|
||||
import i18n from "i18n-js";
|
||||
import {Avatar, Button, Card, TouchableRipple} from 'react-native-paper';
|
||||
import {getFormattedEventTime, isDescriptionEmpty} from '../../utils/Planning';
|
||||
import CustomHTML from '../Overrides/CustomHTML';
|
||||
import type {EventType} from '../../screens/Home/HomeScreen';
|
||||
import {getFormattedEventTime, isDescriptionEmpty} from "../../utils/Planning";
|
||||
import CustomHTML from "../Overrides/CustomHTML";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
import type {event} from "../../screens/Home/HomeScreen";
|
||||
|
||||
type PropsType = {
|
||||
event?: EventType | null,
|
||||
clickAction: () => void,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
content: {
|
||||
maxHeight: 150,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
actions: {
|
||||
marginLeft: 'auto',
|
||||
marginTop: 'auto',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
avatar: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
});
|
||||
type Props = {
|
||||
event?: event,
|
||||
clickAction: () => void,
|
||||
theme?: CustomTheme,
|
||||
}
|
||||
|
||||
/**
|
||||
* 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<PropsType> {
|
||||
static defaultProps = {
|
||||
event: null,
|
||||
};
|
||||
class PreviewEventDashboardItem extends React.Component<Props> {
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const {event} = props;
|
||||
const isEmpty =
|
||||
event == null ? true : isDescriptionEmpty(event.description);
|
||||
render() {
|
||||
const props = this.props;
|
||||
const isEmpty = props.event == null
|
||||
? true
|
||||
: isDescriptionEmpty(props.event.description);
|
||||
|
||||
if (event != null) {
|
||||
const hasImage = event.logo !== '' && event.logo != null;
|
||||
const getImage = (): React.Node => (
|
||||
<Avatar.Image
|
||||
source={{uri: event.logo}}
|
||||
size={50}
|
||||
style={styles.avatar}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<Card style={styles.card} elevation={3}>
|
||||
<TouchableRipple style={{flex: 1}} onPress={props.clickAction}>
|
||||
<View>
|
||||
{hasImage ? (
|
||||
<Card.Title
|
||||
title={event.title}
|
||||
subtitle={getFormattedEventTime(
|
||||
event.date_begin,
|
||||
event.date_end,
|
||||
)}
|
||||
left={getImage}
|
||||
/>
|
||||
) : (
|
||||
<Card.Title
|
||||
title={event.title}
|
||||
subtitle={getFormattedEventTime(
|
||||
event.date_begin,
|
||||
event.date_end,
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{!isEmpty ? (
|
||||
<Card.Content style={styles.content}>
|
||||
<CustomHTML html={event.description} />
|
||||
</Card.Content>
|
||||
) : null}
|
||||
if (props.event != null) {
|
||||
const event = props.event;
|
||||
const hasImage = event.logo !== '' && event.logo != null;
|
||||
const getImage = () => <Avatar.Image
|
||||
source={{uri: event.logo}}
|
||||
size={50}
|
||||
style={styles.avatar}/>;
|
||||
return (
|
||||
<Card
|
||||
style={styles.card}
|
||||
elevation={3}
|
||||
>
|
||||
<TouchableRipple
|
||||
style={{flex: 1}}
|
||||
onPress={props.clickAction}>
|
||||
<View>
|
||||
{hasImage ?
|
||||
<Card.Title
|
||||
title={event.title}
|
||||
subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
|
||||
left={getImage}
|
||||
/> :
|
||||
<Card.Title
|
||||
title={event.title}
|
||||
subtitle={getFormattedEventTime(event.date_begin, event.date_end)}
|
||||
/>}
|
||||
{!isEmpty ?
|
||||
<Card.Content style={styles.content}>
|
||||
<CustomHTML html={event.description}/>
|
||||
</Card.Content> : null}
|
||||
|
||||
<Card.Actions style={styles.actions}>
|
||||
<Button icon="chevron-right">
|
||||
{i18n.t('screens.home.dashboard.seeMore')}
|
||||
</Button>
|
||||
</Card.Actions>
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
</Card>
|
||||
);
|
||||
<Card.Actions style={styles.actions}>
|
||||
<Button
|
||||
icon={'chevron-right'}
|
||||
>
|
||||
{i18n.t("screens.home.dashboard.seeMore")}
|
||||
</Button>
|
||||
</Card.Actions>
|
||||
</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;
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Badge, TouchableRipple, withTheme} from 'react-native-paper';
|
||||
import {Dimensions, Image, View} from 'react-native';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import {Dimensions, Image, View} from "react-native";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
import * as Animatable from "react-native-animatable";
|
||||
|
||||
type PropsType = {
|
||||
image: string | null,
|
||||
onPress: () => void | null,
|
||||
badgeCount: number | null,
|
||||
theme: CustomTheme,
|
||||
type Props = {
|
||||
image: string,
|
||||
onPress: () => void,
|
||||
badgeCount: number | null,
|
||||
theme: CustomTheme,
|
||||
};
|
||||
|
||||
const AnimatableBadge = Animatable.createAnimatableComponent(Badge);
|
||||
|
|
@ -18,68 +18,69 @@ const AnimatableBadge = Animatable.createAnimatableComponent(Badge);
|
|||
/**
|
||||
* Component used to render a small dashboard item
|
||||
*/
|
||||
class SmallDashboardItem extends React.Component<PropsType> {
|
||||
itemSize: number;
|
||||
class SmallDashboardItem extends React.Component<Props> {
|
||||
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.itemSize = Dimensions.get('window').width / 8;
|
||||
}
|
||||
itemSize: number;
|
||||
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {props} = this;
|
||||
return (
|
||||
nextProps.theme.dark !== props.theme.dark ||
|
||||
nextProps.badgeCount !== props.badgeCount
|
||||
);
|
||||
}
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.itemSize = Dimensions.get('window').width / 8;
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -1,73 +1,72 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Animated, Dimensions} from 'react-native';
|
||||
import type {ViewStyle} from 'react-native/Libraries/StyleSheet/StyleSheet';
|
||||
import ImageListItem from './ImageListItem';
|
||||
import CardListItem from './CardListItem';
|
||||
import type {ServiceItemType} from '../../../managers/ServicesManager';
|
||||
import {Animated, Dimensions} from "react-native";
|
||||
import ImageListItem from "./ImageListItem";
|
||||
import CardListItem from "./CardListItem";
|
||||
import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
|
||||
|
||||
type PropsType = {
|
||||
dataset: Array<ServiceItemType>,
|
||||
isHorizontal?: boolean,
|
||||
contentContainerStyle?: ViewStyle | null,
|
||||
type Props = {
|
||||
dataset: Array<cardItem>,
|
||||
isHorizontal: boolean,
|
||||
contentContainerStyle?: ViewStyle,
|
||||
}
|
||||
|
||||
export type cardItem = {
|
||||
key: string,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
image: string | number,
|
||||
onPress: () => void,
|
||||
};
|
||||
|
||||
export default class CardList extends React.Component<PropsType> {
|
||||
static defaultProps = {
|
||||
isHorizontal: false,
|
||||
contentContainerStyle: null,
|
||||
};
|
||||
export type cardList = Array<cardItem>;
|
||||
|
||||
windowWidth: number;
|
||||
|
||||
horizontalItemSize: number;
|
||||
export default class CardList extends React.Component<Props> {
|
||||
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
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',
|
||||
};
|
||||
static defaultProps = {
|
||||
isHorizontal: false,
|
||||
}
|
||||
return (
|
||||
<Animated.FlatList
|
||||
data={props.dataset}
|
||||
renderItem={this.getRenderItem}
|
||||
keyExtractor={this.keyExtractor}
|
||||
numColumns={props.isHorizontal ? undefined : 2}
|
||||
horizontal={props.isHorizontal}
|
||||
contentContainerStyle={
|
||||
props.isHorizontal ? containerStyle : props.contentContainerStyle
|
||||
|
||||
windowWidth: number;
|
||||
horizontalItemSize: number;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
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
|
||||
}
|
||||
|
||||
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}
|
||||
snapToInterval={
|
||||
props.isHorizontal ? (this.horizontalItemSize + 5) * 3 : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Animated.FlatList
|
||||
{...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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,41 +2,50 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Caption, Card, Paragraph, TouchableRipple} from 'react-native-paper';
|
||||
import {View} from 'react-native';
|
||||
import type {ServiceItemType} from '../../../managers/ServicesManager';
|
||||
import {View} from "react-native";
|
||||
import type {cardItem} from "./CardList";
|
||||
|
||||
type PropsType = {
|
||||
item: ServiceItemType,
|
||||
};
|
||||
|
||||
export default class CardListItem extends React.Component<PropsType> {
|
||||
shouldComponentUpdate(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const {item} = props;
|
||||
const source =
|
||||
typeof item.image === 'number' ? item.image : {uri: item.image};
|
||||
return (
|
||||
<Card
|
||||
style={{
|
||||
width: '40%',
|
||||
margin: 5,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}>
|
||||
<TouchableRipple style={{flex: 1}} onPress={item.onPress}>
|
||||
<View>
|
||||
<Card.Cover style={{height: 80}} source={source} />
|
||||
<Card.Content>
|
||||
<Paragraph>{item.title}</Paragraph>
|
||||
<Caption>{item.subtitle}</Caption>
|
||||
</Card.Content>
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
type Props = {
|
||||
item: cardItem,
|
||||
}
|
||||
|
||||
export default class CardListItem extends React.Component<Props> {
|
||||
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const item = props.item;
|
||||
const source = typeof item.image === "number"
|
||||
? item.image
|
||||
: {uri: item.image};
|
||||
return (
|
||||
<Card
|
||||
style={{
|
||||
width: '40%',
|
||||
margin: 5,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
>
|
||||
<TouchableRipple
|
||||
style={{flex: 1}}
|
||||
onPress={item.onPress}>
|
||||
<View>
|
||||
<Card.Cover
|
||||
style={{height: 80}}
|
||||
source={source}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>{item.title}</Paragraph>
|
||||
<Caption>{item.subtitle}</Caption>
|
||||
</Card.Content>
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,52 +3,53 @@
|
|||
import * as React from 'react';
|
||||
import {Text, TouchableRipple} from 'react-native-paper';
|
||||
import {Image, View} from 'react-native';
|
||||
import type {ServiceItemType} from '../../../managers/ServicesManager';
|
||||
import type {cardItem} from "./CardList";
|
||||
|
||||
type PropsType = {
|
||||
item: ServiceItemType,
|
||||
width: number,
|
||||
};
|
||||
|
||||
export default class ImageListItem extends React.Component<PropsType> {
|
||||
shouldComponentUpdate(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const {item} = props;
|
||||
const source =
|
||||
typeof item.image === 'number' ? item.image : {uri: item.image};
|
||||
return (
|
||||
<TouchableRipple
|
||||
style={{
|
||||
width: props.width,
|
||||
height: props.width + 40,
|
||||
margin: 5,
|
||||
}}
|
||||
onPress={item.onPress}>
|
||||
<View>
|
||||
<Image
|
||||
style={{
|
||||
width: props.width - 20,
|
||||
height: props.width - 20,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
source={source}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
marginTop: 5,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
);
|
||||
}
|
||||
type Props = {
|
||||
item: cardItem,
|
||||
width: number,
|
||||
}
|
||||
|
||||
export default class ImageListItem extends React.Component<Props> {
|
||||
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
const item = this.props.item;
|
||||
const source = typeof item.image === "number"
|
||||
? item.image
|
||||
: {uri: item.image};
|
||||
return (
|
||||
<TouchableRipple
|
||||
style={{
|
||||
width: this.props.width,
|
||||
height: this.props.width + 40,
|
||||
margin: 5,
|
||||
}}
|
||||
onPress={item.onPress}
|
||||
>
|
||||
<View>
|
||||
<Image
|
||||
style={{
|
||||
width: this.props.width - 20,
|
||||
height: this.props.width - 20,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
source={source}
|
||||
/>
|
||||
<Text style={{
|
||||
marginTop: 5,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,90 +2,82 @@
|
|||
|
||||
import * as React from 'react';
|
||||
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 AnimatedAccordion from '../../Animations/AnimatedAccordion';
|
||||
import {isItemInCategoryFilter} from '../../../utils/Search';
|
||||
import type {ClubCategoryType} from '../../../screens/Amicale/Clubs/ClubListScreen';
|
||||
import AnimatedAccordion from "../../Animations/AnimatedAccordion";
|
||||
import {isItemInCategoryFilter} from "../../../utils/Search";
|
||||
import type {category} from "../../../screens/Amicale/Clubs/ClubListScreen";
|
||||
|
||||
type PropsType = {
|
||||
categories: Array<ClubCategoryType>,
|
||||
onChipSelect: (id: number) => void,
|
||||
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>
|
||||
);
|
||||
}
|
||||
type Props = {
|
||||
categories: Array<category>,
|
||||
onChipSelect: (id: number) => void,
|
||||
selectedCategories: Array<number>,
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -2,93 +2,84 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Avatar, Chip, List, withTheme} from 'react-native-paper';
|
||||
import {View} from 'react-native';
|
||||
import type {
|
||||
ClubCategoryType,
|
||||
ClubType,
|
||||
} from '../../../screens/Amicale/Clubs/ClubListScreen';
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
import {View} from "react-native";
|
||||
import type {category, club} from "../../../screens/Amicale/Clubs/ClubListScreen";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
|
||||
type PropsType = {
|
||||
onPress: () => void,
|
||||
categoryTranslator: (id: number) => ClubCategoryType,
|
||||
item: ClubType,
|
||||
height: number,
|
||||
theme: CustomTheme,
|
||||
};
|
||||
type Props = {
|
||||
onPress: () => void,
|
||||
categoryTranslator: (id: number) => category,
|
||||
item: club,
|
||||
height: number,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
|
||||
class ClubListItem extends React.Component<PropsType> {
|
||||
hasManagers: boolean;
|
||||
class ClubListItem extends React.Component<Props> {
|
||||
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.hasManagers = props.item.responsibles.length > 0;
|
||||
}
|
||||
hasManagers: boolean;
|
||||
|
||||
shouldComponentUpdate(): boolean {
|
||||
return false;
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.hasManagers = props.item.responsibles.length > 0;
|
||||
}
|
||||
|
||||
getCategoriesRender(categories: Array<number | null>): React.Node {
|
||||
const {props} = this;
|
||||
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>;
|
||||
}
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const categoriesRender = (): React.Node =>
|
||||
this.getCategoriesRender(props.item.category);
|
||||
const {colors} = props.theme;
|
||||
return (
|
||||
<List.Item
|
||||
title={props.item.name}
|
||||
description={categoriesRender}
|
||||
onPress={props.onPress}
|
||||
left={(): React.Node => (
|
||||
<Avatar.Image
|
||||
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'
|
||||
getCategoriesRender(categories: Array<number | null>) {
|
||||
let final = [];
|
||||
for (let i = 0; i < categories.length; i++) {
|
||||
if (categories[i] !== null) {
|
||||
const category: category = this.props.categoryTranslator(categories[i]);
|
||||
final.push(
|
||||
<Chip
|
||||
style={{marginRight: 5, marginBottom: 5}}
|
||||
key={this.props.item.id + ':' + category.id}
|
||||
>
|
||||
{category.name}
|
||||
</Chip>
|
||||
);
|
||||
}
|
||||
color={this.hasManagers ? colors.success : colors.primary}
|
||||
/>
|
||||
)}
|
||||
style={{
|
||||
height: props.height,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
return <View style={{flexDirection: 'row'}}>{final}</View>;
|
||||
}
|
||||
|
||||
render() {
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
// @flow
|
||||
|
||||
import type {ServiceItemType} from './ServicesManager';
|
||||
import type {ServiceItem} from './ServicesManager';
|
||||
import ServicesManager from './ServicesManager';
|
||||
import {getSublistWithIds} from '../utils/Utils';
|
||||
import AsyncStorageManager from './AsyncStorageManager';
|
||||
|
||||
export default class DashboardManager extends ServicesManager {
|
||||
getCurrentDashboard(): Array<ServiceItemType | null> {
|
||||
getCurrentDashboard(): Array<ServiceItem | null> {
|
||||
const dashboardIdList = AsyncStorageManager.getObject(
|
||||
AsyncStorageManager.PREFERENCES.dashboardItems.key,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,384 +1,378 @@
|
|||
// @flow
|
||||
|
||||
import i18n from 'i18n-js';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import AvailableWebsites from '../constants/AvailableWebsites';
|
||||
import ConnectionManager from './ConnectionManager';
|
||||
import type {FullDashboardType} from '../screens/Home/HomeScreen';
|
||||
import getStrippedServicesList from '../utils/Services';
|
||||
import i18n from "i18n-js";
|
||||
import AvailableWebsites from "../constants/AvailableWebsites";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import ConnectionManager from "./ConnectionManager";
|
||||
import type {fullDashboard} from "../screens/Home/HomeScreen";
|
||||
|
||||
// AMICALE
|
||||
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 EQUIPMENT_IMAGE =
|
||||
'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';
|
||||
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 EQUIPMENT_IMAGE = "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
|
||||
const PROXIMO_IMAGE =
|
||||
'https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png';
|
||||
const WIKETUD_IMAGE =
|
||||
'https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud.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';
|
||||
const PROXIMO_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png"
|
||||
const WIKETUD_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Wiketud.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
|
||||
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 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';
|
||||
const ACCOUNT_IMAGE =
|
||||
'https://etud.insa-toulouse.fr/~amicale_app/images/Account.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 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";
|
||||
const ACCOUNT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Account.png";
|
||||
|
||||
// SPECIAL
|
||||
const WASHER_IMAGE =
|
||||
'https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashLaveLinge.png';
|
||||
const DRYER_IMAGE =
|
||||
'https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashSecheLinge.png';
|
||||
const WASHER_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ProxiwashLaveLinge.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 = {
|
||||
CLUBS: 'clubs',
|
||||
PROFILE: 'profile',
|
||||
EQUIPMENT: 'equipment',
|
||||
AMICALE_WEBSITE: 'amicale_website',
|
||||
VOTE: 'vote',
|
||||
PROXIMO: 'proximo',
|
||||
WIKETUD: 'wiketud',
|
||||
ELUS_ETUDIANTS: 'elus_etudiants',
|
||||
TUTOR_INSA: 'tutor_insa',
|
||||
RU: 'ru',
|
||||
AVAILABLE_ROOMS: 'available_rooms',
|
||||
BIB: 'bib',
|
||||
EMAIL: 'email',
|
||||
ENT: 'ent',
|
||||
INSA_ACCOUNT: 'insa_account',
|
||||
WASHERS: 'washers',
|
||||
DRYERS: 'dryers',
|
||||
};
|
||||
CLUBS: "clubs",
|
||||
PROFILE: "profile",
|
||||
EQUIPMENT: "equipment",
|
||||
AMICALE_WEBSITE: "amicale_website",
|
||||
VOTE: "vote",
|
||||
PROXIMO: "proximo",
|
||||
WIKETUD: "wiketud",
|
||||
ELUS_ETUDIANTS: "elus_etudiants",
|
||||
TUTOR_INSA: "tutor_insa",
|
||||
RU: "ru",
|
||||
AVAILABLE_ROOMS: "available_rooms",
|
||||
BIB: "bib",
|
||||
EMAIL: "email",
|
||||
ENT: "ent",
|
||||
INSA_ACCOUNT: "insa_account",
|
||||
WASHERS: "washers",
|
||||
DRYERS: "dryers",
|
||||
}
|
||||
|
||||
export const SERVICES_CATEGORIES_KEY = {
|
||||
AMICALE: 'amicale',
|
||||
STUDENTS: 'students',
|
||||
INSA: 'insa',
|
||||
SPECIAL: 'special',
|
||||
};
|
||||
AMICALE: "amicale",
|
||||
STUDENTS: "students",
|
||||
INSA: "insa",
|
||||
SPECIAL: "special",
|
||||
}
|
||||
|
||||
export type ServiceItemType = {
|
||||
key: string,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
image: string,
|
||||
onPress: () => void,
|
||||
badgeFunction?: (dashboard: FullDashboardType) => number,
|
||||
};
|
||||
|
||||
export type ServiceCategoryType = {
|
||||
key: string,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
image: string | number,
|
||||
content: Array<ServiceItemType>,
|
||||
};
|
||||
export type ServiceItem = {
|
||||
key: string,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
image: string,
|
||||
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 {
|
||||
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;
|
||||
this.amicaleDataset = [
|
||||
{
|
||||
key: SERVICES_KEY.CLUBS,
|
||||
title: i18n.t('screens.clubs.title'),
|
||||
subtitle: i18n.t('screens.services.descriptions.clubs'),
|
||||
image: CLUBS_IMAGE,
|
||||
onPress: (): void => 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: (): 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,
|
||||
},
|
||||
];
|
||||
}
|
||||
/**
|
||||
* Gets the given services list without items of the given ids
|
||||
*
|
||||
* @param idList The ids of items to remove
|
||||
* @param sourceList The item list to use as source
|
||||
* @returns {[]}
|
||||
*/
|
||||
getStrippedList(idList: Array<string>, sourceList: Array<{key: string, [key: string]: any}>) {
|
||||
let newArray = [];
|
||||
for (let i = 0; i < sourceList.length; i++) {
|
||||
const item = sourceList[i];
|
||||
if (!(idList.includes(item.key)))
|
||||
newArray.push(item);
|
||||
}
|
||||
return newArray;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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});
|
||||
}
|
||||
/**
|
||||
* Gets the list of amicale's services
|
||||
*
|
||||
* @param excludedItems Ids of items to exclude from the returned list
|
||||
* @returns {Array<ServiceItem>}
|
||||
*/
|
||||
getAmicaleServices(excludedItems?: Array<string>) {
|
||||
if (excludedItems != null)
|
||||
return this.getStrippedList(excludedItems, this.amicaleDataset)
|
||||
else
|
||||
return this.amicaleDataset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the list of amicale's services
|
||||
*
|
||||
* @param excludedItems Ids of items to exclude from the returned list
|
||||
* @returns {Array<ServiceItemType>}
|
||||
*/
|
||||
getAmicaleServices(excludedItems?: Array<string>): Array<ServiceItemType> {
|
||||
if (excludedItems != null)
|
||||
return getStrippedServicesList(excludedItems, this.amicaleDataset);
|
||||
return this.amicaleDataset;
|
||||
}
|
||||
/**
|
||||
* Gets the list of students' services
|
||||
*
|
||||
* @param excludedItems Ids of items to exclude from the returned list
|
||||
* @returns {Array<ServiceItem>}
|
||||
*/
|
||||
getStudentServices(excludedItems?: Array<string>) {
|
||||
if (excludedItems != null)
|
||||
return this.getStrippedList(excludedItems, this.studentsDataset)
|
||||
else
|
||||
return this.studentsDataset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the list of students' services
|
||||
*
|
||||
* @param excludedItems Ids of items to exclude from the returned list
|
||||
* @returns {Array<ServiceItemType>}
|
||||
*/
|
||||
getStudentServices(excludedItems?: Array<string>): Array<ServiceItemType> {
|
||||
if (excludedItems != null)
|
||||
return getStrippedServicesList(excludedItems, this.studentsDataset);
|
||||
return this.studentsDataset;
|
||||
}
|
||||
/**
|
||||
* Gets the list of INSA's services
|
||||
*
|
||||
* @param excludedItems Ids of items to exclude from the returned list
|
||||
* @returns {Array<ServiceItem>}
|
||||
*/
|
||||
getINSAServices(excludedItems?: Array<string>) {
|
||||
if (excludedItems != null)
|
||||
return this.getStrippedList(excludedItems, this.insaDataset)
|
||||
else
|
||||
return this.insaDataset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the list of INSA's services
|
||||
*
|
||||
* @param excludedItems Ids of items to exclude from the returned list
|
||||
* @returns {Array<ServiceItemType>}
|
||||
*/
|
||||
getINSAServices(excludedItems?: Array<string>): Array<ServiceItemType> {
|
||||
if (excludedItems != null)
|
||||
return getStrippedServicesList(excludedItems, this.insaDataset);
|
||||
return this.insaDataset;
|
||||
}
|
||||
/**
|
||||
* Gets the list of special services
|
||||
*
|
||||
* @param excludedItems Ids of items to exclude from the returned list
|
||||
* @returns {Array<ServiceItem>}
|
||||
*/
|
||||
getSpecialServices(excludedItems?: Array<string>) {
|
||||
if (excludedItems != null)
|
||||
return this.getStrippedList(excludedItems, this.specialDataset)
|
||||
else
|
||||
return this.specialDataset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the list of special services
|
||||
*
|
||||
* @param excludedItems Ids of items to exclude from the returned list
|
||||
* @returns {Array<ServiceItemType>}
|
||||
*/
|
||||
getSpecialServices(excludedItems?: Array<string>): Array<ServiceItemType> {
|
||||
if (excludedItems != null)
|
||||
return getStrippedServicesList(excludedItems, this.specialDataset);
|
||||
return this.specialDataset;
|
||||
}
|
||||
/**
|
||||
* Gets all services sorted by category
|
||||
*
|
||||
* @param excludedItems Ids of categories to exclude from the returned list
|
||||
* @returns {Array<ServiceCategory>}
|
||||
*/
|
||||
getCategories(excludedItems?: Array<string>) {
|
||||
if (excludedItems != null)
|
||||
return this.getStrippedList(excludedItems, this.categoriesDataset)
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,49 +4,49 @@ import * as React from 'react';
|
|||
import {Image, View} from 'react-native';
|
||||
import {Card, List, Text, withTheme} from 'react-native-paper';
|
||||
import i18n from 'i18n-js';
|
||||
import Autolink from 'react-native-autolink';
|
||||
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
|
||||
import AMICALE_ICON from '../../../../assets/amicale.png';
|
||||
import Autolink from "react-native-autolink";
|
||||
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const CONTACT_LINK = 'clubs@amicale-insat.fr';
|
||||
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
class ClubAboutScreen extends React.Component<null> {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<CollapsibleScrollView style={{padding: 5}}>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 100,
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Image
|
||||
source={AMICALE_ICON}
|
||||
style={{flex: 1, resizeMode: 'contain'}}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</View>
|
||||
<Text>{i18n.t('screens.clubs.about.text')}</Text>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.clubs.about.title')}
|
||||
subtitle={i18n.t('screens.clubs.about.subtitle')}
|
||||
left={({size}: {size: number}): React.Node => (
|
||||
<List.Icon size={size} icon="information" />
|
||||
)}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Text>{i18n.t('screens.clubs.about.message')}</Text>
|
||||
<Autolink text={CONTACT_LINK} component={Text} />
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</CollapsibleScrollView>
|
||||
);
|
||||
}
|
||||
class ClubAboutScreen extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CollapsibleScrollView style={{padding: 5}}>
|
||||
<View style={{
|
||||
width: '100%',
|
||||
height: 100,
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Image
|
||||
source={require('../../../../assets/amicale.png')}
|
||||
style={{flex: 1, resizeMode: "contain"}}
|
||||
resizeMode="contain"/>
|
||||
</View>
|
||||
<Text>{i18n.t("screens.clubs.about.text")}</Text>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t("screens.clubs.about.title")}
|
||||
subtitle={i18n.t("screens.clubs.about.subtitle")}
|
||||
left={props => <List.Icon {...props} icon={'information'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Text>{i18n.t("screens.clubs.about.message")}</Text>
|
||||
<Autolink
|
||||
text={CONTACT_LINK}
|
||||
component={Text}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</CollapsibleScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(ClubAboutScreen);
|
||||
|
|
|
|||
|
|
@ -2,276 +2,252 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Linking, View} from 'react-native';
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Chip,
|
||||
Paragraph,
|
||||
withTheme,
|
||||
} from 'react-native-paper';
|
||||
import {Avatar, Button, Card, Chip, Paragraph, withTheme} from 'react-native-paper';
|
||||
import ImageModal from 'react-native-image-modal';
|
||||
import i18n from 'i18n-js';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen';
|
||||
import CustomHTML from '../../../components/Overrides/CustomHTML';
|
||||
import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
|
||||
import type {ClubCategoryType, ClubType} from './ClubListScreen';
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
import {ERROR_TYPE} from '../../../utils/WebData';
|
||||
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
|
||||
import type {ApiGenericDataType} from '../../../utils/WebData';
|
||||
import i18n from "i18n-js";
|
||||
import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
|
||||
import CustomHTML from "../../../components/Overrides/CustomHTML";
|
||||
import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
|
||||
import type {category, club} from "./ClubListScreen";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import {ERROR_TYPE} from "../../../utils/WebData";
|
||||
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
|
||||
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
route: {
|
||||
params?: {
|
||||
data?: ClubType,
|
||||
categories?: Array<ClubCategoryType>,
|
||||
clubId?: number,
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
route: {
|
||||
params?: {
|
||||
data?: club,
|
||||
categories?: Array<category>,
|
||||
clubId?: number,
|
||||
}, ...
|
||||
},
|
||||
...
|
||||
},
|
||||
theme: CustomTheme,
|
||||
theme: CustomTheme
|
||||
};
|
||||
|
||||
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.
|
||||
* 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
|
||||
*/
|
||||
class ClubDisplayScreen extends React.Component<PropsType> {
|
||||
displayData: ClubType | null;
|
||||
class ClubDisplayScreen extends React.Component<Props, State> {
|
||||
|
||||
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) {
|
||||
super(props);
|
||||
if (props.route.params != null) {
|
||||
if (
|
||||
props.route.params.data != null &&
|
||||
props.route.params.categories != null
|
||||
) {
|
||||
this.displayData = props.route.params.data;
|
||||
this.categories = props.route.params.categories;
|
||||
this.clubId = props.route.params.data.id;
|
||||
this.shouldFetchData = false;
|
||||
} else if (props.route.params.clubId != null) {
|
||||
this.displayData = null;
|
||||
this.categories = null;
|
||||
this.clubId = props.route.params.clubId;
|
||||
this.shouldFetchData = true;
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
if (this.props.route.params != null) {
|
||||
if (this.props.route.params.data != null && this.props.route.params.categories != null) {
|
||||
this.displayData = this.props.route.params.data;
|
||||
this.categories = this.props.route.params.categories;
|
||||
this.clubId = this.props.route.params.data.id;
|
||||
this.shouldFetchData = false;
|
||||
} else if (this.props.route.params.clubId != null) {
|
||||
this.displayData = null;
|
||||
this.categories = null;
|
||||
this.clubId = this.props.route.params.clubId;
|
||||
this.shouldFetchData = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the name of the category with the given ID
|
||||
*
|
||||
* @param id The category's ID
|
||||
* @returns {string|*}
|
||||
*/
|
||||
getCategoryName(id: number): string {
|
||||
let categoryName = '';
|
||||
if (this.categories !== null) {
|
||||
this.categories.forEach((item: ClubCategoryType) => {
|
||||
if (id === item.id) categoryName = item.name;
|
||||
});
|
||||
/**
|
||||
* Gets the name of the category with the given ID
|
||||
*
|
||||
* @param id The category's ID
|
||||
* @returns {string|*}
|
||||
*/
|
||||
getCategoryName(id: number) {
|
||||
if (this.categories !== null) {
|
||||
for (let i = 0; i < this.categories.length; i++) {
|
||||
if (id === this.categories[i].id)
|
||||
return this.categories[i].name;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
return categoryName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the view for rendering categories
|
||||
*
|
||||
* @param categories The categories to display (max 2)
|
||||
* @returns {null|*}
|
||||
*/
|
||||
getCategoriesRender(categories: Array<number | null>): React.Node {
|
||||
if (this.categories == null) return null;
|
||||
/**
|
||||
* Gets the view for rendering categories
|
||||
*
|
||||
* @param categories The categories to display (max 2)
|
||||
* @returns {null|*}
|
||||
*/
|
||||
getCategoriesRender(categories: [number, number]) {
|
||||
if (this.categories === null)
|
||||
return null;
|
||||
|
||||
const final = [];
|
||||
categories.forEach((cat: number | null) => {
|
||||
if (cat != null) {
|
||||
final.push(
|
||||
<Chip style={{marginRight: 5}} key={cat}>
|
||||
{this.getCategoryName(cat)}
|
||||
</Chip>,
|
||||
let final = [];
|
||||
for (let i = 0; i < categories.length; i++) {
|
||||
let cat = categories[i];
|
||||
if (cat !== null) {
|
||||
final.push(
|
||||
<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
|
||||
<Card.Content>
|
||||
<CustomHTML html={data.description} />
|
||||
</Card.Content>
|
||||
) : (
|
||||
<View />
|
||||
)}
|
||||
{this.getManagersRender(data.responsibles, data.email)}
|
||||
</CollapsibleScrollView>
|
||||
);
|
||||
/**
|
||||
* 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 {*}
|
||||
*/
|
||||
getEmailButton(email: string | null, hasManagers: boolean) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the header title to match the given club
|
||||
*
|
||||
* @param data The club data
|
||||
*/
|
||||
updateHeaderTitle(data: ClubType) {
|
||||
const {props} = this;
|
||||
props.navigation.setOptions({title: data.name});
|
||||
}
|
||||
/**
|
||||
* Updates the header title to match the given club
|
||||
*
|
||||
* @param data The club data
|
||||
*/
|
||||
updateHeaderTitle(data: club) {
|
||||
this.props.navigation.setOptions({title: data.name})
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
if (this.shouldFetchData)
|
||||
return (
|
||||
<AuthenticatedScreen
|
||||
navigation={props.navigation}
|
||||
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,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
return this.getScreen([this.displayData]);
|
||||
}
|
||||
getScreen = (response: Array<{ [key: string]: any } | null>) => {
|
||||
let data: club | null = null;
|
||||
if (response[0] != null) {
|
||||
data = response[0];
|
||||
this.updateHeaderTitle(data);
|
||||
}
|
||||
if (data != null) {
|
||||
return (
|
||||
<CollapsibleScrollView
|
||||
style={{paddingLeft: 5, paddingRight: 5}}
|
||||
hasTab={true}
|
||||
>
|
||||
{this.getCategoriesRender(data.category)}
|
||||
{data.logo !== null ?
|
||||
<View style={{
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
<ImageModal
|
||||
resizeMode="contain"
|
||||
imageBackgroundColor={this.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
|
||||
<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);
|
||||
|
|
|
|||
|
|
@ -1,271 +1,237 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Platform} from 'react-native';
|
||||
import {Platform} from "react-native";
|
||||
import {Searchbar} from 'react-native-paper';
|
||||
import i18n from 'i18n-js';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen';
|
||||
import ClubListItem from '../../../components/Lists/Clubs/ClubListItem';
|
||||
import {isItemInCategoryFilter, stringMatchQuery} from '../../../utils/Search';
|
||||
import ClubListHeader from '../../../components/Lists/Clubs/ClubListHeader';
|
||||
import MaterialHeaderButtons, {
|
||||
Item,
|
||||
} from '../../../components/Overrides/CustomHeaderButton';
|
||||
import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
|
||||
import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
|
||||
import i18n from "i18n-js";
|
||||
import ClubListItem from "../../../components/Lists/Clubs/ClubListItem";
|
||||
import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
|
||||
import ClubListHeader from "../../../components/Lists/Clubs/ClubListHeader";
|
||||
import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
|
||||
|
||||
export type ClubCategoryType = {
|
||||
id: number,
|
||||
name: string,
|
||||
export type category = {
|
||||
id: number,
|
||||
name: string,
|
||||
};
|
||||
|
||||
export type ClubType = {
|
||||
id: number,
|
||||
name: string,
|
||||
description: string,
|
||||
logo: string,
|
||||
email: string | null,
|
||||
category: Array<number | null>,
|
||||
responsibles: Array<string>,
|
||||
export type club = {
|
||||
id: number,
|
||||
name: string,
|
||||
description: string,
|
||||
logo: string,
|
||||
email: string | null,
|
||||
category: [number, number],
|
||||
responsibles: Array<string>,
|
||||
};
|
||||
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
};
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
|
||||
type StateType = {
|
||||
currentlySelectedCategories: Array<number>,
|
||||
currentSearchString: string,
|
||||
};
|
||||
type State = {
|
||||
currentlySelectedCategories: Array<number>,
|
||||
currentSearchString: string,
|
||||
}
|
||||
|
||||
const LIST_ITEM_HEIGHT = 96;
|
||||
|
||||
class ClubListScreen extends React.Component<PropsType, StateType> {
|
||||
categories: Array<ClubCategoryType>;
|
||||
class ClubListScreen extends React.Component<Props, State> {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
currentlySelectedCategories: [],
|
||||
currentSearchString: '',
|
||||
state = {
|
||||
currentlySelectedCategories: [],
|
||||
currentSearchString: '',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 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},
|
||||
});
|
||||
}
|
||||
categories: Array<category>;
|
||||
|
||||
/**
|
||||
* 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: ClubType) {
|
||||
const {props} = this;
|
||||
props.navigation.navigate('club-information', {
|
||||
data: item,
|
||||
categories: this.categories,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Creates the header content
|
||||
*/
|
||||
componentDidMount() {
|
||||
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 the search changes
|
||||
*
|
||||
* @param str The new search string
|
||||
*/
|
||||
onSearchStringChange = (str: string) => {
|
||||
this.updateFilteredData(str, null);
|
||||
};
|
||||
|
||||
/**
|
||||
* 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');
|
||||
/**
|
||||
* Gets the header search bar
|
||||
*
|
||||
* @return {*}
|
||||
*/
|
||||
getSearchBar = () => {
|
||||
return (
|
||||
<Searchbar
|
||||
placeholder={i18n.t('screens.proximo.search')}
|
||||
onChangeText={this.onSearchStringChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<MaterialHeaderButtons>
|
||||
<Item title="main" iconName="information" onPress={onPress} />
|
||||
</MaterialHeaderButtons>
|
||||
);
|
||||
};
|
||||
|
||||
getScreen = (
|
||||
data: Array<{
|
||||
categories: Array<ClubCategoryType>,
|
||||
clubs: Array<ClubType>,
|
||||
} | null>,
|
||||
): React.Node => {
|
||||
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
|
||||
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);
|
||||
/**
|
||||
* Gets the header button
|
||||
* @return {*}
|
||||
*/
|
||||
getHeaderButtons = () => {
|
||||
const onPress = () => this.props.navigation.navigate("club-about");
|
||||
return <MaterialHeaderButtons>
|
||||
<Item title="main" iconName="information" onPress={onPress}/>
|
||||
</MaterialHeaderButtons>;
|
||||
};
|
||||
if (this.shouldRenderItem(item)) {
|
||||
return (
|
||||
<ClubListItem
|
||||
categoryTranslator={this.getCategoryOfId}
|
||||
item={item}
|
||||
onPress={onPress}
|
||||
height={LIST_ITEM_HEIGHT}
|
||||
/>
|
||||
);
|
||||
|
||||
/**
|
||||
* Callback used when the search changes
|
||||
*
|
||||
* @param str The new search string
|
||||
*/
|
||||
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();
|
||||
|
||||
itemLayout = (
|
||||
data: {...},
|
||||
index: number,
|
||||
): {length: number, offset: number, index: number} => ({
|
||||
length: LIST_ITEM_HEIGHT,
|
||||
offset: LIST_ITEM_HEIGHT * index,
|
||||
index,
|
||||
});
|
||||
|
||||
/**
|
||||
* 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);
|
||||
/**
|
||||
* Gets the list header, with controls to change the categories filter
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getListHeader() {
|
||||
return <ClubListHeader
|
||||
categories={this.categories}
|
||||
selectedCategories={this.state.currentlySelectedCategories}
|
||||
onChipSelect={this.onChipSelect}
|
||||
/>;
|
||||
}
|
||||
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
|
||||
*
|
||||
* @param item The club to check
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldRenderItem(item: ClubType): boolean {
|
||||
const {state} = this;
|
||||
let shouldRender =
|
||||
state.currentlySelectedCategories.length === 0 ||
|
||||
isItemInCategoryFilter(state.currentlySelectedCategories, item.category);
|
||||
if (shouldRender)
|
||||
shouldRender = stringMatchQuery(item.name, state.currentSearchString);
|
||||
return shouldRender;
|
||||
}
|
||||
/**
|
||||
* Gets the category object of the given ID
|
||||
*
|
||||
* @param id The ID of the category to find
|
||||
* @returns {*}
|
||||
*/
|
||||
getCategoryOfId = (id: number) => {
|
||||
for (let i = 0; i < this.categories.length; i++) {
|
||||
if (id === this.categories[i].id)
|
||||
return this.categories[i];
|
||||
}
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
return (
|
||||
<AuthenticatedScreen
|
||||
navigation={props.navigation}
|
||||
requests={[
|
||||
{
|
||||
link: 'clubs/list',
|
||||
params: {},
|
||||
mandatory: true,
|
||||
},
|
||||
]}
|
||||
renderFunction={this.getScreen}
|
||||
/>
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Checks if the given item should be rendered according to current name and category filters
|
||||
*
|
||||
* @param item The club to check
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldRenderItem(item: club) {
|
||||
let shouldRender = this.state.currentlySelectedCategories.length === 0
|
||||
|| isItemInCategoryFilter(this.state.currentlySelectedCategories, item.category);
|
||||
if (shouldRender)
|
||||
shouldRender = stringMatchQuery(item.name, this.state.currentSearchString);
|
||||
return shouldRender;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -4,114 +4,108 @@ import * as React from 'react';
|
|||
import {Linking, View} from 'react-native';
|
||||
import {Avatar, Card, Text, withTheme} from 'react-native-paper';
|
||||
import ImageModal from 'react-native-image-modal';
|
||||
import Autolink from 'react-native-autolink';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import MaterialHeaderButtons, {
|
||||
Item,
|
||||
} from '../../components/Overrides/CustomHeaderButton';
|
||||
import CustomTabBar from '../../components/Tabbar/CustomTabBar';
|
||||
import type {FeedItemType} from './HomeScreen';
|
||||
import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
|
||||
import Autolink from "react-native-autolink";
|
||||
import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
|
||||
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import type {feedItem} from "./HomeScreen";
|
||||
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
|
||||
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
route: {params: {data: FeedItemType, date: string}},
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
route: { params: { data: feedItem, date: string } }
|
||||
};
|
||||
|
||||
const ICON_AMICALE = require('../../../assets/amicale.png');
|
||||
|
||||
const NAME_AMICALE = 'Amicale INSA Toulouse';
|
||||
|
||||
/**
|
||||
* Class defining a feed item page.
|
||||
*/
|
||||
class FeedItemScreen extends React.Component<PropsType> {
|
||||
displayData: FeedItemType;
|
||||
class FeedItemScreen extends React.Component<Props> {
|
||||
|
||||
date: string;
|
||||
displayData: feedItem;
|
||||
date: string;
|
||||
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.displayData = props.route.params.data;
|
||||
this.date = props.route.params.date;
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.displayData = props.route.params.data;
|
||||
this.date = props.route.params.date;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {props} = this;
|
||||
props.navigation.setOptions({
|
||||
headerRight: this.getHeaderButton,
|
||||
});
|
||||
}
|
||||
componentDidMount() {
|
||||
this.props.navigation.setOptions({
|
||||
headerRight: this.getHeaderButton,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the feed item out link in browser or compatible app
|
||||
*/
|
||||
onOutLinkPress = () => {
|
||||
Linking.openURL(this.displayData.permalink_url);
|
||||
};
|
||||
/**
|
||||
* Opens the feed item out link in browser or compatible app
|
||||
*/
|
||||
onOutLinkPress = () => {
|
||||
Linking.openURL(this.displayData.permalink_url);
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the out link header button
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getHeaderButton = (): React.Node => {
|
||||
return (
|
||||
<MaterialHeaderButtons>
|
||||
<Item
|
||||
title="main"
|
||||
iconName="facebook"
|
||||
color="#2e88fe"
|
||||
onPress={this.onOutLinkPress}
|
||||
/>
|
||||
</MaterialHeaderButtons>
|
||||
);
|
||||
};
|
||||
/**
|
||||
* Gets the out link header button
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getHeaderButton = () => {
|
||||
return <MaterialHeaderButtons>
|
||||
<Item title="main" iconName={'facebook'} color={"#2e88fe"} onPress={this.onOutLinkPress}/>
|
||||
</MaterialHeaderButtons>;
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
const hasImage =
|
||||
this.displayData.full_picture !== '' &&
|
||||
this.displayData.full_picture != null;
|
||||
return (
|
||||
<CollapsibleScrollView style={{margin: 5}} hasTab>
|
||||
<Card.Title
|
||||
title={NAME_AMICALE}
|
||||
subtitle={this.date}
|
||||
left={(): React.Node => (
|
||||
<Avatar.Image
|
||||
size={48}
|
||||
source={ICON_AMICALE}
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{hasImage ? (
|
||||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
<ImageModal
|
||||
resizeMode="contain"
|
||||
imageBackgroundColor="#000"
|
||||
style={{
|
||||
width: 250,
|
||||
height: 250,
|
||||
}}
|
||||
source={{
|
||||
uri: this.displayData.full_picture,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
) : null}
|
||||
<Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
|
||||
{this.displayData.message !== undefined ? (
|
||||
<Autolink
|
||||
text={this.displayData.message}
|
||||
hashtag="facebook"
|
||||
component={Text}
|
||||
/>
|
||||
) : null}
|
||||
</Card.Content>
|
||||
</CollapsibleScrollView>
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Gets the Amicale INSA avatar
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getAvatar() {
|
||||
return (
|
||||
<Avatar.Image size={48} source={ICON_AMICALE}
|
||||
style={{backgroundColor: 'transparent'}}/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture != null;
|
||||
return (
|
||||
<CollapsibleScrollView
|
||||
style={{margin: 5,}}
|
||||
hasTab={true}
|
||||
>
|
||||
<Card.Title
|
||||
title={NAME_AMICALE}
|
||||
subtitle={this.date}
|
||||
left={this.getAvatar}
|
||||
/>
|
||||
{hasImage ?
|
||||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
<ImageModal
|
||||
resizeMode="contain"
|
||||
imageBackgroundColor={"#000"}
|
||||
style={{
|
||||
width: 250,
|
||||
height: 250,
|
||||
}}
|
||||
source={{
|
||||
uri: this.displayData.full_picture,
|
||||
}}
|
||||
/></View> : null}
|
||||
<Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
|
||||
{this.displayData.message !== undefined ?
|
||||
<Autolink
|
||||
text={this.displayData.message}
|
||||
hashtag="facebook"
|
||||
component={Text}
|
||||
/> : null
|
||||
}
|
||||
</Card.Content>
|
||||
</CollapsibleScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(FeedItemScreen);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,237 +1,238 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Linking, Platform, StyleSheet, View} from 'react-native';
|
||||
import {Linking, Platform, StyleSheet, View} from "react-native";
|
||||
import {Button, Text, withTheme} from 'react-native-paper';
|
||||
import {RNCamera} from 'react-native-camera';
|
||||
import {BarcodeMask} from '@nartc/react-native-barcode-mask';
|
||||
import URLHandler from "../../utils/URLHandler";
|
||||
import AlertDialog from "../../components/Dialogs/AlertDialog";
|
||||
import i18n from 'i18n-js';
|
||||
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
||||
import LoadingConfirmDialog from "../../components/Dialogs/LoadingConfirmDialog";
|
||||
import {PERMISSIONS, request, RESULTS} from 'react-native-permissions';
|
||||
import URLHandler from '../../utils/URLHandler';
|
||||
import AlertDialog from '../../components/Dialogs/AlertDialog';
|
||||
import CustomTabBar from '../../components/Tabbar/CustomTabBar';
|
||||
import LoadingConfirmDialog from '../../components/Dialogs/LoadingConfirmDialog';
|
||||
import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
||||
import MascotPopup from '../../components/Mascot/MascotPopup';
|
||||
import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
|
||||
import MascotPopup from "../../components/Mascot/MascotPopup";
|
||||
|
||||
type StateType = {
|
||||
hasPermission: boolean,
|
||||
scanned: boolean,
|
||||
dialogVisible: boolean,
|
||||
mascotDialogVisible: boolean,
|
||||
loading: boolean,
|
||||
type Props = {};
|
||||
type State = {
|
||||
hasPermission: boolean,
|
||||
scanned: boolean,
|
||||
dialogVisible: boolean,
|
||||
mascotDialogVisible: boolean,
|
||||
dialogTitle: string,
|
||||
dialogMessage: string,
|
||||
loading: boolean,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
button: {
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
width: '80%',
|
||||
left: '10%',
|
||||
},
|
||||
});
|
||||
class ScannerScreen extends React.Component<Props, State> {
|
||||
|
||||
class ScannerScreen extends React.Component<null, StateType> {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
hasPermission: false,
|
||||
scanned: false,
|
||||
mascotDialogVisible: false,
|
||||
dialogVisible: false,
|
||||
loading: false,
|
||||
state = {
|
||||
hasPermission: false,
|
||||
scanned: false,
|
||||
mascotDialogVisible: false,
|
||||
dialogVisible: false,
|
||||
dialogTitle: "",
|
||||
dialogMessage: "",
|
||||
loading: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.requestPermissions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a view asking user for permission to use the camera
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getPermissionScreen(): React.Node {
|
||||
return (
|
||||
<View style={{marginLeft: 10, marginRight: 10}}>
|
||||
<Text>{i18n.t('screens.scanner.permissions.error')}</Text>
|
||||
<Button
|
||||
icon="camera"
|
||||
mode="contained"
|
||||
onPress={this.requestPermissions}
|
||||
style={{
|
||||
marginTop: 10,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}>
|
||||
{i18n.t('screens.scanner.permissions.button')}
|
||||
</Button>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a view with the scanner.
|
||||
* This scanner uses the back camera, can only scan qr codes and has a square mask on the center.
|
||||
* The mask is only for design purposes as a code is scanned as soon as it enters the camera view
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getScanner(): React.Node {
|
||||
const {state} = this;
|
||||
return (
|
||||
<RNCamera
|
||||
onBarCodeRead={state.scanned ? null : this.onCodeScanned}
|
||||
type={RNCamera.Constants.Type.back}
|
||||
barCodeScannerSettings={{
|
||||
barCodeTypes: [RNCamera.Constants.BarCodeType.qr],
|
||||
}}
|
||||
style={StyleSheet.absoluteFill}
|
||||
captureAudio={false}>
|
||||
<BarcodeMask
|
||||
backgroundColor="#000"
|
||||
maskOpacity={0.5}
|
||||
animatedLineThickness={1}
|
||||
animationDuration={1000}
|
||||
width={250}
|
||||
height={250}
|
||||
/>
|
||||
</RNCamera>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Requests permission to use the camera
|
||||
*/
|
||||
requestPermissions = () => {
|
||||
if (Platform.OS === 'android')
|
||||
request(PERMISSIONS.ANDROID.CAMERA).then(this.updatePermissionStatus);
|
||||
else request(PERMISSIONS.IOS.CAMERA).then(this.updatePermissionStatus);
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the state permission status
|
||||
*
|
||||
* @param result
|
||||
*/
|
||||
updatePermissionStatus = (result: RESULTS) => {
|
||||
this.setState({
|
||||
hasPermission: result === RESULTS.GRANTED,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a dialog indicating the user the scanned code was invalid
|
||||
*/
|
||||
// eslint-disable-next-line react/sort-comp
|
||||
showErrorDialog() {
|
||||
this.setState({
|
||||
dialogVisible: true,
|
||||
scanned: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a dialog indicating how to use the scanner
|
||||
*/
|
||||
showHelpDialog = () => {
|
||||
this.setState({
|
||||
mascotDialogVisible: true,
|
||||
scanned: true,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a loading dialog
|
||||
*/
|
||||
showOpeningDialog = () => {
|
||||
this.setState({
|
||||
loading: true,
|
||||
scanned: true,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide any dialog
|
||||
*/
|
||||
onDialogDismiss = () => {
|
||||
this.setState({
|
||||
dialogVisible: false,
|
||||
scanned: false,
|
||||
});
|
||||
};
|
||||
|
||||
onMascotDialogDismiss = () => {
|
||||
this.setState({
|
||||
mascotDialogVisible: false,
|
||||
scanned: false,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Opens scanned link if it is a valid app link or shows and error dialog
|
||||
*
|
||||
* @param type The barcode type
|
||||
* @param data The scanned value
|
||||
*/
|
||||
onCodeScanned = ({data}: {data: string}) => {
|
||||
if (!URLHandler.isUrlValid(data)) this.showErrorDialog();
|
||||
else {
|
||||
this.showOpeningDialog();
|
||||
Linking.openURL(data);
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
};
|
||||
|
||||
render(): React.Node {
|
||||
const {state} = this;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
...styles.container,
|
||||
marginBottom: CustomTabBar.TAB_BAR_HEIGHT,
|
||||
}}>
|
||||
{state.hasPermission ? this.getScanner() : this.getPermissionScreen()}
|
||||
<Button
|
||||
icon="information"
|
||||
mode="contained"
|
||||
onPress={this.showHelpDialog}
|
||||
style={styles.button}>
|
||||
{i18n.t('screens.scanner.help.button')}
|
||||
</Button>
|
||||
<MascotPopup
|
||||
visible={state.mascotDialogVisible}
|
||||
title={i18n.t('screens.scanner.mascotDialog.title')}
|
||||
message={i18n.t('screens.scanner.mascotDialog.message')}
|
||||
icon="camera-iris"
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t('screens.scanner.mascotDialog.button'),
|
||||
icon: 'check',
|
||||
onPress: this.onMascotDialogDismiss,
|
||||
},
|
||||
}}
|
||||
emotion={MASCOT_STYLE.NORMAL}
|
||||
/>
|
||||
<AlertDialog
|
||||
visible={state.dialogVisible}
|
||||
onDismiss={this.onDialogDismiss}
|
||||
title={i18n.t('screens.scanner.error.title')}
|
||||
message={i18n.t('screens.scanner.error.message')}
|
||||
/>
|
||||
<LoadingConfirmDialog
|
||||
visible={state.loading}
|
||||
titleLoading={i18n.t('general.loading')}
|
||||
startLoading
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
componentDidMount() {
|
||||
this.requestPermissions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Requests permission to use the camera
|
||||
*/
|
||||
requestPermissions = () => {
|
||||
if (Platform.OS === 'android')
|
||||
request(PERMISSIONS.ANDROID.CAMERA).then(this.updatePermissionStatus)
|
||||
else
|
||||
request(PERMISSIONS.IOS.CAMERA).then(this.updatePermissionStatus)
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the state permission status
|
||||
*
|
||||
* @param result
|
||||
*/
|
||||
updatePermissionStatus = (result) => this.setState({hasPermission: result === RESULTS.GRANTED});
|
||||
|
||||
/**
|
||||
* Opens scanned link if it is a valid app link or shows and error dialog
|
||||
*
|
||||
* @param type The barcode type
|
||||
* @param data The scanned value
|
||||
*/
|
||||
handleCodeScanned = ({type, data}) => {
|
||||
if (!URLHandler.isUrlValid(data))
|
||||
this.showErrorDialog();
|
||||
else {
|
||||
this.showOpeningDialog();
|
||||
Linking.openURL(data);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets a view asking user for permission to use the camera
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getPermissionScreen() {
|
||||
return <View style={{marginLeft: 10, marginRight: 10}}>
|
||||
<Text>{i18n.t("screens.scanner.permissions.error")}</Text>
|
||||
<Button
|
||||
icon="camera"
|
||||
mode="contained"
|
||||
onPress={this.requestPermissions}
|
||||
style={{
|
||||
marginTop: 10,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
>
|
||||
{i18n.t("screens.scanner.permissions.button")}
|
||||
</Button>
|
||||
</View>
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a dialog indicating how to use the scanner
|
||||
*/
|
||||
showHelpDialog = () => {
|
||||
this.setState({
|
||||
mascotDialogVisible: true,
|
||||
scanned: true,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a loading dialog
|
||||
*/
|
||||
showOpeningDialog = () => {
|
||||
this.setState({
|
||||
loading: true,
|
||||
scanned: true,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a dialog indicating the user the scanned code was invalid
|
||||
*/
|
||||
showErrorDialog() {
|
||||
this.setState({
|
||||
dialogVisible: true,
|
||||
scanned: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide any dialog
|
||||
*/
|
||||
onDialogDismiss = () => this.setState({
|
||||
dialogVisible: false,
|
||||
scanned: false,
|
||||
});
|
||||
|
||||
onMascotDialogDismiss = () => this.setState({
|
||||
mascotDialogVisible: false,
|
||||
scanned: false,
|
||||
});
|
||||
|
||||
/**
|
||||
* Gets a view with the scanner.
|
||||
* This scanner uses the back camera, can only scan qr codes and has a square mask on the center.
|
||||
* The mask is only for design purposes as a code is scanned as soon as it enters the camera view
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
getScanner() {
|
||||
return (
|
||||
<RNCamera
|
||||
onBarCodeRead={this.state.scanned ? undefined : this.handleCodeScanned}
|
||||
type={RNCamera.Constants.Type.back}
|
||||
barCodeScannerSettings={{
|
||||
barCodeTypes: [RNCamera.Constants.BarCodeType.qr],
|
||||
}}
|
||||
style={StyleSheet.absoluteFill}
|
||||
captureAudio={false}
|
||||
>
|
||||
<BarcodeMask
|
||||
backgroundColor={"#000"}
|
||||
maskOpacity={0.5}
|
||||
animatedLineThickness={1}
|
||||
animationDuration={1000}
|
||||
width={250}
|
||||
height={250}
|
||||
/>
|
||||
</RNCamera>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={{
|
||||
...styles.container,
|
||||
marginBottom: CustomTabBar.TAB_BAR_HEIGHT
|
||||
}}>
|
||||
{this.state.hasPermission
|
||||
? this.getScanner()
|
||||
: this.getPermissionScreen()
|
||||
}
|
||||
<Button
|
||||
icon="information"
|
||||
mode="contained"
|
||||
onPress={this.showHelpDialog}
|
||||
style={styles.button}
|
||||
>
|
||||
{i18n.t("screens.scanner.help.button")}
|
||||
</Button>
|
||||
<MascotPopup
|
||||
visible={this.state.mascotDialogVisible}
|
||||
title={i18n.t("screens.scanner.mascotDialog.title")}
|
||||
message={i18n.t("screens.scanner.mascotDialog.message")}
|
||||
icon={"camera-iris"}
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t("screens.scanner.mascotDialog.button"),
|
||||
icon: "check",
|
||||
onPress: this.onMascotDialogDismiss,
|
||||
}
|
||||
}}
|
||||
emotion={MASCOT_STYLE.NORMAL}
|
||||
/>
|
||||
<AlertDialog
|
||||
visible={this.state.dialogVisible}
|
||||
onDismiss={this.onDialogDismiss}
|
||||
title={i18n.t("screens.scanner.error.title")}
|
||||
message={i18n.t("screens.scanner.error.message")}
|
||||
/>
|
||||
<LoadingConfirmDialog
|
||||
visible={this.state.loading}
|
||||
titleLoading={i18n.t("general.loading")}
|
||||
startLoading={true}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
button: {
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
width: '80%',
|
||||
left: '10%'
|
||||
},
|
||||
});
|
||||
|
||||
export default withTheme(ScannerScreen);
|
||||
|
|
|
|||
|
|
@ -1,162 +1,149 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Image, View} from 'react-native';
|
||||
import {
|
||||
Avatar,
|
||||
Card,
|
||||
Divider,
|
||||
List,
|
||||
TouchableRipple,
|
||||
withTheme,
|
||||
} from 'react-native-paper';
|
||||
import type {cardList} from "../../components/Lists/CardList/CardList";
|
||||
import CardList from "../../components/Lists/CardList/CardList";
|
||||
import {Image, View} from "react-native";
|
||||
import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
import i18n from 'i18n-js';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import CardList from '../../components/Lists/CardList/CardList';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import MaterialHeaderButtons, {
|
||||
Item,
|
||||
} from '../../components/Overrides/CustomHeaderButton';
|
||||
import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
||||
import MascotPopup from '../../components/Mascot/MascotPopup';
|
||||
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
||||
import ServicesManager, {
|
||||
SERVICES_CATEGORIES_KEY,
|
||||
} from '../../managers/ServicesManager';
|
||||
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
|
||||
import type {ServiceCategoryType} from '../../managers/ServicesManager';
|
||||
import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
|
||||
import MascotPopup from "../../components/Mascot/MascotPopup";
|
||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
||||
import ServicesManager, {SERVICES_CATEGORIES_KEY} from "../../managers/ServicesManager";
|
||||
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
|
||||
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
};
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
|
||||
class ServicesScreen extends React.Component<PropsType> {
|
||||
finalDataset: Array<ServiceCategoryType>;
|
||||
export type listItem = {
|
||||
title: string,
|
||||
description: string,
|
||||
image: string | number,
|
||||
content: cardList,
|
||||
}
|
||||
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
const services = new ServicesManager(props.navigation);
|
||||
this.finalDataset = services.getCategories([
|
||||
SERVICES_CATEGORIES_KEY.SPECIAL,
|
||||
]);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const {props} = this;
|
||||
props.navigation.setOptions({
|
||||
headerRight: this.getAboutButton,
|
||||
});
|
||||
}
|
||||
class ServicesScreen extends React.Component<Props> {
|
||||
|
||||
getAboutButton = (): React.Node => (
|
||||
<MaterialHeaderButtons>
|
||||
<Item
|
||||
title="information"
|
||||
iconName="information"
|
||||
onPress={this.onAboutPress}
|
||||
/>
|
||||
</MaterialHeaderButtons>
|
||||
);
|
||||
finalDataset: Array<listItem>
|
||||
|
||||
onAboutPress = () => {
|
||||
const {props} = this;
|
||||
props.navigation.navigate('amicale-contact');
|
||||
};
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const services = new ServicesManager(props.navigation);
|
||||
this.finalDataset = services.getCategories([SERVICES_CATEGORIES_KEY.SPECIAL])
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 source The source image to display. Can be a string for icons or a number for local images
|
||||
* @returns {*}
|
||||
*/
|
||||
getListTitleImage(source: string | number): React.Node {
|
||||
const {props} = this;
|
||||
if (typeof source === 'number')
|
||||
return (
|
||||
<Image
|
||||
size={48}
|
||||
source={source}
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<Avatar.Icon
|
||||
size={48}
|
||||
icon={source}
|
||||
color={props.theme.colors.primary}
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
componentDidMount() {
|
||||
this.props.navigation.setOptions({
|
||||
headerRight: this.getAboutButton,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* A list item showing a list of available services for the current category
|
||||
*
|
||||
* @param item
|
||||
* @returns {*}
|
||||
*/
|
||||
getRenderItem = ({item}: {item: ServiceCategoryType}): React.Node => {
|
||||
const {props} = this;
|
||||
return (
|
||||
<TouchableRipple
|
||||
style={{
|
||||
margin: 5,
|
||||
marginBottom: 20,
|
||||
}}
|
||||
onPress={() => {
|
||||
props.navigation.navigate('services-section', {data: item});
|
||||
}}>
|
||||
<View>
|
||||
<Card.Title
|
||||
title={item.title}
|
||||
subtitle={item.subtitle}
|
||||
left={(): React.Node => this.getListTitleImage(item.image)}
|
||||
right={({size}: {size: number}): React.Node => (
|
||||
<List.Icon size={size} icon="chevron-right" />
|
||||
)}
|
||||
/>
|
||||
<CardList dataset={item.content} isHorizontal />
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
);
|
||||
};
|
||||
getAboutButton = () =>
|
||||
<MaterialHeaderButtons>
|
||||
<Item title="information" iconName="information" onPress={this.onAboutPress}/>
|
||||
</MaterialHeaderButtons>;
|
||||
|
||||
keyExtractor = (item: ServiceCategoryType): string => item.title;
|
||||
onAboutPress = () => this.props.navigation.navigate('amicale-contact');
|
||||
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View>
|
||||
<CollapsibleFlatList
|
||||
data={this.finalDataset}
|
||||
renderItem={this.getRenderItem}
|
||||
keyExtractor={this.keyExtractor}
|
||||
ItemSeparatorComponent={(): React.Node => <Divider />}
|
||||
hasTab
|
||||
/>
|
||||
<MascotPopup
|
||||
prefKey={AsyncStorageManager.PREFERENCES.servicesShowBanner.key}
|
||||
title={i18n.t('screens.services.mascotDialog.title')}
|
||||
message={i18n.t('screens.services.mascotDialog.message')}
|
||||
icon="cloud-question"
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t('screens.services.mascotDialog.button'),
|
||||
icon: 'check',
|
||||
},
|
||||
}}
|
||||
emotion={MASCOT_STYLE.WINK}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
/**
|
||||
* 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 <Image
|
||||
size={48}
|
||||
source={source}
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
}}/>
|
||||
else
|
||||
return <Avatar.Icon
|
||||
{...props}
|
||||
size={48}
|
||||
icon={source}
|
||||
color={this.props.theme.colors.primary}
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
}
|
||||
|
||||
/**
|
||||
* A list item showing a list of available services for the current category
|
||||
*
|
||||
* @param item
|
||||
* @returns {*}
|
||||
*/
|
||||
renderItem = ({item}: { item: listItem }) => {
|
||||
return (
|
||||
<TouchableRipple
|
||||
style={{
|
||||
margin: 5,
|
||||
marginBottom: 20,
|
||||
}}
|
||||
onPress={() => this.props.navigation.navigate("services-section", {data: item})}
|
||||
>
|
||||
<View>
|
||||
<Card.Title
|
||||
title={item.title}
|
||||
subtitle={item.description}
|
||||
left={(props) => this.getListTitleImage(props, item.image)}
|
||||
right={(props) => <List.Icon {...props} icon="chevron-right"/>}
|
||||
/>
|
||||
<CardList
|
||||
dataset={item.content}
|
||||
isHorizontal={true}
|
||||
/>
|
||||
</View>
|
||||
</TouchableRipple>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
keyExtractor = (item: listItem) => {
|
||||
return item.title;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<CollapsibleFlatList
|
||||
data={this.finalDataset}
|
||||
renderItem={this.renderItem}
|
||||
keyExtractor={this.keyExtractor}
|
||||
ItemSeparatorComponent={() => <Divider/>}
|
||||
hasTab={true}
|
||||
/>
|
||||
<MascotPopup
|
||||
prefKey={AsyncStorageManager.PREFERENCES.servicesShowBanner.key}
|
||||
title={i18n.t("screens.services.mascotDialog.title")}
|
||||
message={i18n.t("screens.services.mascotDialog.message")}
|
||||
icon={"cloud-question"}
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t("screens.services.mascotDialog.button"),
|
||||
icon: "check",
|
||||
onPress: this.onHideMascotDialog,
|
||||
}
|
||||
}}
|
||||
emotion={MASCOT_STYLE.WINK}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(ServicesScreen);
|
||||
|
|
|
|||
|
|
@ -1,65 +1,58 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Collapsible} from 'react-navigation-collapsible';
|
||||
import {CommonActions} from '@react-navigation/native';
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import CardList from '../../components/Lists/CardList/CardList';
|
||||
import CustomTabBar from '../../components/Tabbar/CustomTabBar';
|
||||
import {withCollapsible} from '../../utils/withCollapsible';
|
||||
import type {ServiceCategoryType} from '../../managers/ServicesManager';
|
||||
import CardList from "../../components/Lists/CardList/CardList";
|
||||
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
||||
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 PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
route: {params: {data: ServiceCategoryType | null}},
|
||||
collapsibleStack: Collapsible,
|
||||
};
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
route: { params: { data: listItem | null } },
|
||||
collapsibleStack: Collapsible,
|
||||
}
|
||||
|
||||
class ServicesSectionScreen extends React.Component<PropsType> {
|
||||
finalDataset: ServiceCategoryType;
|
||||
class ServicesSectionScreen extends React.Component<Props> {
|
||||
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.handleNavigationParams();
|
||||
}
|
||||
finalDataset: listItem;
|
||||
|
||||
/**
|
||||
* Recover the list to display from navigation parameters
|
||||
*/
|
||||
handleNavigationParams() {
|
||||
const {props} = this;
|
||||
if (props.route.params != null) {
|
||||
if (props.route.params.data != null) {
|
||||
this.finalDataset = props.route.params.data;
|
||||
// reset params to prevent infinite loop
|
||||
props.navigation.dispatch(CommonActions.setParams({data: null}));
|
||||
props.navigation.setOptions({
|
||||
headerTitle: this.finalDataset.title,
|
||||
});
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleNavigationParams();
|
||||
}
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const {
|
||||
containerPaddingTop,
|
||||
scrollIndicatorInsetTop,
|
||||
onScroll,
|
||||
} = props.collapsibleStack;
|
||||
return (
|
||||
<CardList
|
||||
dataset={this.finalDataset.content}
|
||||
isHorizontal={false}
|
||||
onScroll={onScroll}
|
||||
contentContainerStyle={{
|
||||
paddingTop: containerPaddingTop,
|
||||
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20,
|
||||
}}
|
||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Recover the list to display from navigation parameters
|
||||
*/
|
||||
handleNavigationParams() {
|
||||
if (this.props.route.params != null) {
|
||||
if (this.props.route.params.data != null) {
|
||||
this.finalDataset = this.props.route.params.data;
|
||||
// reset params to prevent infinite loop
|
||||
this.props.navigation.dispatch(CommonActions.setParams({data: null}));
|
||||
this.props.navigation.setOptions({
|
||||
headerTitle: this.finalDataset.title,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
||||
return <CardList
|
||||
dataset={this.finalDataset.content}
|
||||
isHorizontal={false}
|
||||
onScroll={onScroll}
|
||||
contentContainerStyle={{
|
||||
paddingTop: containerPaddingTop,
|
||||
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
|
||||
}}
|
||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
export default withCollapsible(ServicesSectionScreen);
|
||||
|
|
|
|||
|
|
@ -1,123 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import {stringToDate} from './Planning';
|
||||
import type {EventType} from '../screens/Home/HomeScreen';
|
||||
|
||||
/**
|
||||
* Gets the time limit depending on the current day:
|
||||
* 17:30 for every day of the week except for thursday 11:30
|
||||
* 00:00 on weekends
|
||||
*/
|
||||
export function getTodayEventTimeLimit(): Date {
|
||||
const now = new Date();
|
||||
if (now.getDay() === 4)
|
||||
// Thursday
|
||||
now.setHours(11, 30, 0);
|
||||
else if (now.getDay() === 6 || now.getDay() === 0)
|
||||
// Weekend
|
||||
now.setHours(0, 0, 0);
|
||||
else now.setHours(17, 30, 0);
|
||||
return now;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the duration (in milliseconds) of an event
|
||||
*
|
||||
* @param event {EventType}
|
||||
* @return {number} The number of milliseconds
|
||||
*/
|
||||
export function getEventDuration(event: EventType): number {
|
||||
const start = stringToDate(event.date_begin);
|
||||
const end = stringToDate(event.date_end);
|
||||
let duration = 0;
|
||||
if (start != null && end != null) duration = end - start;
|
||||
return duration;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets events starting after the limit
|
||||
*
|
||||
* @param events
|
||||
* @param limit
|
||||
* @return {Array<Object>}
|
||||
*/
|
||||
export function getEventsAfterLimit(
|
||||
events: Array<EventType>,
|
||||
limit: Date,
|
||||
): Array<EventType> {
|
||||
const validEvents = [];
|
||||
events.forEach((event: EventType) => {
|
||||
const startDate = stringToDate(event.date_begin);
|
||||
if (startDate != null && startDate >= limit) {
|
||||
validEvents.push(event);
|
||||
}
|
||||
});
|
||||
return validEvents;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the event with the longest duration in the given array.
|
||||
* If all events have the same duration, return the first in the array.
|
||||
*
|
||||
* @param events
|
||||
*/
|
||||
export function getLongestEvent(events: Array<EventType>): EventType {
|
||||
let longestEvent = events[0];
|
||||
let longestTime = 0;
|
||||
events.forEach((event: EventType) => {
|
||||
const time = getEventDuration(event);
|
||||
if (time > longestTime) {
|
||||
longestTime = time;
|
||||
longestEvent = event;
|
||||
}
|
||||
});
|
||||
return longestEvent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets events that have not yet ended/started
|
||||
*
|
||||
* @param events
|
||||
*/
|
||||
export function getFutureEvents(events: Array<EventType>): Array<EventType> {
|
||||
const validEvents = [];
|
||||
const now = new Date();
|
||||
events.forEach((event: EventType) => {
|
||||
const startDate = stringToDate(event.date_begin);
|
||||
const endDate = stringToDate(event.date_end);
|
||||
if (startDate != null) {
|
||||
if (startDate > now) validEvents.push(event);
|
||||
else if (endDate != null) {
|
||||
if (endDate > now || endDate < startDate)
|
||||
// Display event if it ends the following day
|
||||
validEvents.push(event);
|
||||
}
|
||||
}
|
||||
});
|
||||
return validEvents;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the event to display in the preview
|
||||
*
|
||||
* @param events
|
||||
* @return {EventType | null}
|
||||
*/
|
||||
export function getDisplayEvent(events: Array<EventType>): EventType | null {
|
||||
let displayEvent = null;
|
||||
if (events.length > 1) {
|
||||
const eventsAfterLimit = getEventsAfterLimit(
|
||||
events,
|
||||
getTodayEventTimeLimit(),
|
||||
);
|
||||
if (eventsAfterLimit.length > 0) {
|
||||
if (eventsAfterLimit.length === 1) [displayEvent] = eventsAfterLimit;
|
||||
else displayEvent = getLongestEvent(events);
|
||||
} else {
|
||||
displayEvent = getLongestEvent(events);
|
||||
}
|
||||
} else if (events.length === 1) {
|
||||
[displayEvent] = events;
|
||||
}
|
||||
return displayEvent;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
// @flow
|
||||
|
||||
|
||||
/**
|
||||
* Sanitizes the given string to improve search performance.
|
||||
*
|
||||
|
|
@ -9,12 +10,11 @@
|
|||
* @return {string} The sanitized string
|
||||
*/
|
||||
export function sanitizeString(str: string): string {
|
||||
return str
|
||||
.toLowerCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/ /g, '')
|
||||
.replace(/_/g, '');
|
||||
return str.toLowerCase()
|
||||
.normalize("NFD")
|
||||
.replace(/[\u0300-\u036f]/g, "")
|
||||
.replace(/ /g, "")
|
||||
.replace(/_/g, "");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -24,8 +24,8 @@ export function sanitizeString(str: string): string {
|
|||
* @param query The query string used to find a match
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function stringMatchQuery(str: string, query: string): boolean {
|
||||
return sanitizeString(str).includes(sanitizeString(query));
|
||||
export function stringMatchQuery(str: string, query: string) {
|
||||
return sanitizeString(str).includes(sanitizeString(query));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -35,13 +35,10 @@ export function stringMatchQuery(str: string, query: string): boolean {
|
|||
* @param categories The item's categories tuple
|
||||
* @returns {boolean} True if at least one entry is in both arrays
|
||||
*/
|
||||
export function isItemInCategoryFilter(
|
||||
filter: Array<number>,
|
||||
categories: Array<number | null>,
|
||||
): boolean {
|
||||
let itemFound = false;
|
||||
categories.forEach((cat: number | null) => {
|
||||
if (cat != null && filter.indexOf(cat) !== -1) itemFound = true;
|
||||
});
|
||||
return itemFound;
|
||||
export function isItemInCategoryFilter(filter: Array<number>, categories: [number, number]) {
|
||||
for (const category of categories) {
|
||||
if (filter.indexOf(category) !== -1)
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
// @flow
|
||||
|
||||
/**
|
||||
* Gets the given services list without items of the given ids
|
||||
*
|
||||
* @param idList The ids of items to remove
|
||||
* @param sourceList The item list to use as source
|
||||
* @returns {[]}
|
||||
*/
|
||||
export default function getStrippedServicesList<T>(
|
||||
idList: Array<string>,
|
||||
sourceList: Array<{key: string, ...T}>,
|
||||
): Array<{key: string, ...T}> {
|
||||
const newArray = [];
|
||||
sourceList.forEach((item: {key: string, ...T}) => {
|
||||
if (!idList.includes(item.key)) newArray.push(item);
|
||||
});
|
||||
return newArray;
|
||||
}
|
||||
Loading…
Reference in a new issue