问递增和递减反应钩子

EN

import {
    RefreshControl,
    View,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    Image,
} from 'react-native';
import { List, Divider, Text } from 'react-native-paper';

import { request } from '../backend/backend';
import { appDefaultTheme } from '../theme/paperTheme';
import { boldCatamaran } from '../theme/paperTheme';
import { colors } from '../theme/colors';
import { translate } from '../languages/translator';
import { config as globalConfig } from '../backend/config';
import { LoadingComponent } from '../components/LoadingComponent';
import { BottomBar } from '../components/BottomBar';
import { TopBar } from '../components/TopBar';
import moment from 'moment';
import Avatar from '../assets/images/default_image.svg';

export const WorkersListScreen = ({ route, navigation }) => {
    let array = [];

    const { projectName, projectID } = route.params;
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [workersData, setWorkersData] = useState([]);
    const [timeData, setTimeData] = useState([]);
    const [currentWeek, setCurrentWeek] = useState(moment().week());

    const [startOfWeek, setStartOfWeek] = useState(moment().startOf('isoWeek'));

    const [endOfWeek, setEndOfWeek] = useState(moment().endOf('isoWeek'));

    useEffect(() => {
        
    }, []);
    

    

    const weekIncrement = () => {
        console.log(timeData);
        setCurrentWeek(currentWeek + 1);
        setStartOfWeek(moment().week(currentWeek).startOf('isoWeek'));
        setEndOfWeek(moment().week(currentWeek).endOf('isoWeek'));
        // console.log(timeData[0].attributes);
    };

    const weekReduction = () => {
        setCurrentWeek(currentWeek - 1);
        setStartOfWeek(moment().week(currentWeek).startOf('isoWeek'));
        setEndOfWeek(moment().week(currentWeek).endOf('isoWeek'));
    };

    

    return (
        <View>
            <BottomBar
                loading={loading}
                startOfWeek={startOfWeek.format('DD.MM.YYYY')}
                endOfWeek={endOfWeek.format('DD.MM.YYYY')}
                onClickIncrement={() => weekIncrement()}
                onClickReduce={() => weekReduction()}
            />
        </View>
    );
};



export default WorkersListScreen;

import React from 'react';
import { TouchableOpacity, StyleSheet, View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Appbar, Button, Text } from 'react-native-paper';
import { colors } from '../theme/colors';
import { useNavigation } from '@react-navigation/native';
import { color } from 'react-native-reanimated';

export const BottomBar = (props) => {
    const navigation = useNavigation();
    return (
        <Appbar style={styles.bottomBarContainer}>
            <Appbar.Action
                style={styles.arrowButton}
                onPress={() => navigation.goBack()}
                icon="arrow-left"
                disabled={props.loading && true}
            />
            <Button mode="text" onPress={props.onClickReduce}>
                <Icon name="chevron-left" size={24} color="#fff" />
            </Button>
            <View>
                <Text style={{ color: colors.white, fontSize: 12 }}>
                    {props.startOfWeek}
                </Text>
                <Text style={{ color: colors.white, fontSize: 12 }}>
                    {props.endOfWeek}
                </Text>
            </View>
            <Button mode="text" onPress={props.onClickIncrement}>
                <Icon name="chevron-right" size={24} color="#fff" />
            </Button>
            <TouchableOpacity
                style={styles.timeButton}**strong text**
                disabled={props.loading && true}
            >
                <Icon name="more-time" size={24} color={colors.white} />
            </TouchableOpacity>
        </Appbar>
    );
};