123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- /*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
- */
-
- import React, { useRef, useState } from 'react';
- import { Button, Card, Paragraph } from 'react-native-paper';
- import { FlatList, StyleSheet } from 'react-native';
- import { View } from 'react-native-animatable';
- import i18n from 'i18n-js';
- import DashboardEditAccordion from '../../../components/Lists/DashboardEdit/DashboardEditAccordion';
- import DashboardEditPreviewItem from '../../../components/Lists/DashboardEdit/DashboardEditPreviewItem';
- import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
- import {
- getCategories,
- ServiceCategoryType,
- ServiceItemType,
- } from '../../../utils/Services';
- import { useNavigation } from '@react-navigation/core';
- import { useCurrentDashboard } from '../../../context/preferencesContext';
- import { useLoginState } from '../../../context/loginContext';
-
- const styles = StyleSheet.create({
- dashboardContainer: {
- height: 50,
- },
- dashboard: {
- marginLeft: 'auto',
- marginRight: 'auto',
- marginTop: 5,
- },
- card: {
- margin: 5,
- },
- buttonContainer: {
- padding: 5,
- },
- button: {
- marginLeft: 'auto',
- marginRight: 'auto',
- marginBottom: 10,
- },
- text: {
- textAlign: 'center',
- },
- });
-
- /**
- * Class defining the Settings screen. This screen shows controls to modify app preferences.
- */
- function DashboardEditScreen() {
- const navigation = useNavigation();
- const isLoggedIn = useLoginState();
-
- const { currentDashboard, currentDashboardIdList, updateCurrentDashboard } =
- useCurrentDashboard();
- const initialDashboard = useRef(currentDashboardIdList);
- const [activeItem, setActiveItem] = useState(0);
-
- const getDashboardRowRenderItem = ({
- item,
- index,
- }: {
- item: ServiceItemType | null;
- index: number;
- }) => {
- return (
- <DashboardEditPreviewItem
- image={item?.image}
- onPress={() => {
- setActiveItem(index);
- }}
- isActive={activeItem === index}
- />
- );
- };
-
- const getDashboard = (content: Array<ServiceItemType | null>) => {
- return (
- <FlatList
- data={content}
- extraData={activeItem}
- renderItem={getDashboardRowRenderItem}
- horizontal
- contentContainerStyle={styles.dashboard}
- />
- );
- };
-
- const getRenderItem = ({ item }: { item: ServiceCategoryType }) => {
- return (
- <DashboardEditAccordion
- item={item}
- onPress={updateDashboard}
- activeDashboard={currentDashboardIdList}
- />
- );
- };
-
- const getListHeader = () => {
- return (
- <Card style={styles.card}>
- <Card.Content>
- <View style={styles.buttonContainer}>
- <Button
- mode={'contained'}
- onPress={undoDashboard}
- style={styles.button}
- >
- {i18n.t('screens.settings.dashboardEdit.undo')}
- </Button>
- <View style={styles.dashboardContainer}>
- {getDashboard(currentDashboard)}
- </View>
- </View>
- <Paragraph style={styles.text}>
- {i18n.t('screens.settings.dashboardEdit.message')}
- </Paragraph>
- </Card.Content>
- </Card>
- );
- };
-
- const updateDashboard = (service: ServiceItemType) => {
- updateCurrentDashboard(
- currentDashboardIdList.map((id, index) =>
- index === activeItem ? service.key : id
- )
- );
- };
-
- const undoDashboard = () => {
- updateCurrentDashboard(initialDashboard.current);
- };
-
- return (
- <CollapsibleFlatList
- data={getCategories(navigation.navigate, isLoggedIn)}
- renderItem={getRenderItem}
- ListHeaderComponent={getListHeader()}
- style={{}}
- />
- );
- }
-
- export default DashboardEditScreen;
|