PFTracker/ViewRoutines.js at master · chastain1337/PFTracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, {useState, useEffect} from 'react';
import {View, Text,ActivityIndicator, TouchableOpacity, StyleSheet, FlatList, TouchableWithoutFeedback} from 'react-native';
import UpsertRoutine from './UpsertRoutine';
import api from "./api"
import { MaterialCommunityIcons, AntDesign } from '@expo/vector-icons';
import Swipeable from 'react-native-gesture-handler/Swipeable';

/**
 *
 * @param {{machines: Array}} props
 */
export default function ViewRoutines(props) {

    const [createRoutine, setCreateRoutine] = useState(false);
    const [ready, setReady] = useState(false)
    const [routines, setRoutines] = useState([])
    const [routineInEdit, setRoutineInEdit] = useState(null)

    useEffect( () => {
        async function setup() {
            const _routines = await api.routines.getFull();
            setRoutines(_routines);
            setReady(true);
        }
        setup()
    },[])

    const returnFromCreatedRoutine = async () => {
        setReady(false);
        setRoutineInEdit(null);
        setCreateRoutine(false);
        const _routines = await api.routines.getFull();
        setRoutines(_routines);
        setReady(true);
    }

    const deleteRoutine = index => {
        api.routines.delete(routines[index].ID);

        const routinesCopy = [...routines]
        routinesCopy.splice(index,1)
        setRoutines(routinesCopy);
    }


    if (!ready) {return (<View style={{flex: 1, justifyContent: "center", alignContent: "center"}}><ActivityIndicator size="large" /></View>)}

    if (createRoutine) { return (<UpsertRoutine onReturn={returnFromCreatedRoutine} machines={props.machines} routineID={routineInEdit} />)}

    if (routines.length === 0) {return (
      <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
        <Text style={{fontSize: 16, color: "gray"}}>No routines yet.</Text>
        <TouchableOpacity style={{backgroundColor: "white", marginTop: 10, borderRadius: 10, padding: 15}} onPress={() => setCreateRoutine(true)} ><Text style={{fontSize: 20}}>Create a Routine</Text></TouchableOpacity>
      </View>
    )}

    const RightActions = (index) => { return (
        <TouchableOpacity style={{ backgroundColor: 'red', justifyContent: 'center', paddingHorizontal: 10, marginVertical: 5,  }} onPress={() => deleteRoutine(index)}>
            <MaterialCommunityIcons name="minus-circle-outline" size={26} color="white" />
        </TouchableOpacity>
    )}

    const handlePress = (index) => {
        setRoutineInEdit(routines[index].ID);
        setCreateRoutine(true)
    }

    const footer = () => {
        return (
                <TouchableOpacity style={{alignSelf: "center", margin: 10, padding: 10}} onPress={() => setCreateRoutine(true)}>
                    <AntDesign name="plus" size={30} color="green" />
                </TouchableOpacity>
            )
    }

    const renderItem = (routine,index) => {
        return (
        <Swipeable renderRightActions={() => RightActions(index)}>
            <TouchableWithoutFeedback onPress={() => handlePress(index)}>
                <View style={{paddingVertical: 10, marginVertical: 5, backgroundColor: "white",}}>
                    <View style={{flexDirection: "row", alignItems: "center"}}>
                        <AntDesign name="filetext1" size={20} color="black" style={{marginHorizontal: 10}} />
                        <View>
                            <Text style={{fontSize: 20}}>{routine.Name}</Text>
                        </View>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        </Swipeable>)
    }

    return (
        <FlatList
            data={routines}
            renderItem={( {item, index} ) =>  renderItem(item,index)}
            ListFooterComponent={footer}
            keyExtractor={item=>item.ID.toString()}
        />
    )


}

const styles = StyleSheet.create({

})