diff --git a/locales/en.json b/locales/en.json index 4d572c5..4a2f67b 100644 --- a/locales/en.json +++ b/locales/en.json @@ -136,7 +136,13 @@ "planex": { "title": "Planex", "noGroupSelected": "No group selected. Please select your group using the big beautiful red button bellow.", - "favorites": "Favorites", + "favorites": { + "title": "Favorites", + "empty": { + "title": "No favorites", + "subtitle": "Clic on the star next to a group to add it to the favorites" + } + }, "mascotDialog": { "title": "Don't skip class", "message": "Here is Planex! You can set your class and your crush's to favorites in order to find them back easily!\n\nIf you mainly use Campus for Planex, go to the settings to make the app directly start on it!", diff --git a/locales/fr.json b/locales/fr.json index 808f547..0d695da 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -136,7 +136,13 @@ "planex": { "title": "Planex", "noGroupSelected": "Pas de groupe sélectionné. Choisis un groupe avec le beau bouton rouge ci-dessous.", - "favorites": "Favoris", + "favorites": { + "title": "Favoris", + "empty": { + "title": "Aucun favoris", + "subtitle": "Cliquez sur l'étoile à côté d'un groupe pour l'ajouter aux favoris" + } + }, "mascotDialog": { "title": "Sécher c'est mal", "message": "Ici c'est Planex ! Tu peux mettre en favoris ta classe et celle de ton crush pour l'espio... les retrouver facilement !\n\nSi tu utilises Campus surtout pour Planex, vas dans les paramètres pour faire démarrer l'appli direct dessus !", diff --git a/src/components/Animations/AnimatedAccordion.tsx b/src/components/Animations/AnimatedAccordion.tsx index 3634348..3d3efa1 100644 --- a/src/components/Animations/AnimatedAccordion.tsx +++ b/src/components/Animations/AnimatedAccordion.tsx @@ -17,17 +17,14 @@ * along with Campus INSAT. If not, see . */ -import * as React from 'react'; -import { View, ViewProps, ViewStyle } from 'react-native'; -import { List, withTheme } from 'react-native-paper'; +import React, { useEffect, useRef } from 'react'; +import { View, ViewStyle } from 'react-native'; +import { List, useTheme } from 'react-native-paper'; import Collapsible from 'react-native-collapsible'; import * as Animatable from 'react-native-animatable'; -import { AnimatableProperties } from 'react-native-animatable'; -import { ClassicComponent } from 'react'; import GENERAL_STYLES from '../../constants/Styles'; type PropsType = { - theme: ReactNativePaper.Theme; title: string; subtitle?: string; style?: ViewStyle; @@ -40,133 +37,102 @@ type PropsType = { }) => React.ReactNode; opened?: boolean; unmountWhenCollapsed?: boolean; + enabled?: boolean; children?: React.ReactNode; }; -type StateType = { - expanded: boolean; -}; +function AnimatedAccordion(props: PropsType) { + const theme = useTheme(); -class AnimatedAccordion extends React.Component { - viewRef: - | null - | (ClassicComponent> & ViewProps); - handleViewRef = ( - ref: ClassicComponent> & ViewProps - ) => (this.viewRef = ref); + const [expanded, setExpanded] = React.useState(props.opened); + const lastOpenedProp = useRef(props.opened); + const chevronIcon = useRef(props.opened ? 'chevron-up' : 'chevron-down'); + const animStart = useRef(props.opened ? '180deg' : '0deg'); + const animEnd = useRef(props.opened ? '0deg' : '180deg'); + const enabled = props.enabled !== false; - chevronIcon: string; - - animStart: string; - - animEnd: string; - - getAccordionAnimation(): + const getAccordionAnimation = (): | Animatable.Animation | string - | Animatable.CustomAnimation { + | Animatable.CustomAnimation => { // I don't knwo why ts is complaining // The type definitions must be broken because this is a valid style and it works - if (this.state.expanded) { - return { - from: { - // @ts-ignore - rotate: this.animStart, - }, - to: { - // @ts-ignore - rotate: this.animEnd, - }, - }; - } else { - return { - from: { - // @ts-ignore - rotate: this.animEnd, - }, - to: { - // @ts-ignore - rotate: this.animStart, - }, - }; - } - } - - constructor(props: PropsType) { - super(props); - this.chevronIcon = ''; - this.animStart = ''; - this.animEnd = ''; - this.state = { - expanded: props.opened != null ? props.opened : false, - }; - this.viewRef = null; - this.setupChevron(); - } - - shouldComponentUpdate(nextProps: PropsType): boolean { - const { state, props } = this; - // TODO refactor this, it shouldn't even work - if (nextProps.opened != null && nextProps.opened !== props.opened) { - state.expanded = nextProps.opened; - } - return true; - } - - setupChevron() { - const { expanded } = this.state; if (expanded) { - this.chevronIcon = 'chevron-up'; - this.animStart = '180deg'; - this.animEnd = '0deg'; + return { + from: { + // @ts-ignore + rotate: animStart.current, + }, + to: { + // @ts-ignore + rotate: animEnd.current, + }, + }; } else { - this.chevronIcon = 'chevron-down'; - this.animStart = '0deg'; - this.animEnd = '180deg'; + return { + from: { + // @ts-ignore + rotate: animEnd.current, + }, + to: { + // @ts-ignore + rotate: animStart.current, + }, + }; } - } - - toggleAccordion = () => { - // const { expanded } = this.state; - this.setState((prevState: StateType): { expanded: boolean } => ({ - expanded: !prevState.expanded, - })); }; - render() { - const { props, state } = this; - const { colors } = props.theme; - return ( - - ( - - - - )} - left={props.left} - /> - + useEffect(() => { + // Force the expanded state to follow the prop when changing + if (!enabled) { + setExpanded(false); + } else if ( + props.opened !== undefined && + props.opened !== lastOpenedProp.current + ) { + setExpanded(props.opened); + } + }, [enabled, props.opened]); + + const toggleAccordion = () => setExpanded(!expanded); + + return ( + + ( + + + + ) + : undefined + } + left={props.left} + /> + {enabled ? ( + {!props.unmountWhenCollapsed || - (props.unmountWhenCollapsed && state.expanded) + (props.unmountWhenCollapsed && expanded) ? props.children : null} - - ); - } + ) : null} + + ); } -export default withTheme(AnimatedAccordion); +export default AnimatedAccordion; diff --git a/src/components/Lists/PlanexGroups/GroupListAccordion.tsx b/src/components/Lists/PlanexGroups/GroupListAccordion.tsx index dd18927..f6137ab 100644 --- a/src/components/Lists/PlanexGroups/GroupListAccordion.tsx +++ b/src/components/Lists/PlanexGroups/GroupListAccordion.tsx @@ -27,6 +27,7 @@ import type { PlanexGroupType, PlanexGroupCategoryType, } from '../../../screens/Planex/GroupSelectionScreen'; +import i18n from 'i18n-js'; type PropsType = { item: PlanexGroupCategoryType; @@ -101,22 +102,37 @@ class GroupListAccordion extends React.Component { render() { const { props } = this; const { item } = this.props; + var isFavorite = item.id === 0; + var isEmptyFavorite = isFavorite && props.favorites.length === 0; return ( - item.id === 0 ? ( + isFavorite ? ( - ) : null + ) : undefined } - unmountWhenCollapsed={item.id !== 0} // Only render list if expanded for increased performance - opened={props.currentSearchString.length > 0} + unmountWhenCollapsed={!isFavorite} // Only render list if expanded for increased performance + opened={ + props.currentSearchString.length > 0 || + (isFavorite && !isEmptyFavorite) + } + enabled={!isEmptyFavorite} > { )} right={(iconProps) => ( diff --git a/src/screens/Planex/GroupSelectionScreen.tsx b/src/screens/Planex/GroupSelectionScreen.tsx index d4ccb26..9e29430 100644 --- a/src/screens/Planex/GroupSelectionScreen.tsx +++ b/src/screens/Planex/GroupSelectionScreen.tsx @@ -220,7 +220,7 @@ function GroupSelectionScreen() { ); data.sort(sortName); data.unshift({ - name: i18n.t('screens.planex.favorites'), + name: i18n.t('screens.planex.favorites.title'), id: 0, content: favoriteGroups, });