| import React, {useState} from 'react'; |
| import {View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, Modal} from 'react-native'; |
| import {Ionicons} from '@expo/vector-icons'; |
| import {TodosModal} from "./Todos"; |
| import {useDB} from "../context/DBcontex"; |
| import moment from "moment"; |
|
|
| export const Header = () => { |
| return ( |
| <View style={{backgroundColor: '#1C2833', paddingTop: 25}}> |
| <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center',}}> |
| <Text style={styles.todo}>Todo</Text> |
| <Text style={styles.list}>List</Text> |
| </View> |
| <View style={{alignSelf: 'flex-end', marginRight: 5}}> |
| <Text style={{color: 'grey'}}>by Jesse</Text> |
| </View> |
| </View> |
| ) |
| } |
|
|
| export const HomeScreen = () => { |
| const [showModal, setShowModal] = useState(false) |
| const [currentList, setCurrentList] = useState({}) |
|
|
| const {lists, deleteList, loading} = useDB() |
|
|
| if (loading) { |
| return ( |
| <View> |
| <Text>Loading</Text> |
| </View> |
| ) |
| } |
|
|
| const toggleModal = (listData = null) => { |
| setCurrentList(listData) |
| setShowModal(prev => !prev) |
| } |
|
|
| const onDelete = async (list) => { |
| await deleteList(list) |
| } |
|
|
|
|
| const OneListCard = ({item}) => ( |
| <TouchableOpacity onPress={() => {toggleModal(item)}}> |
| <View style={[styles.item, {backgroundColor: item.color}]}> |
| <View style={{flex: 1}}> |
| <Text style={{fontSize: 27, alignSelf: 'center', fontWeight: 'bold'}}>{item.title}</Text> |
| <View style={{ |
| flexDirection: 'row', |
| justifyContent: 'center', |
| paddingHorizontal: 1, |
| marginTop: 10}}> |
| <Text style={{fontSize: 12}}>{moment(item.createdAt.toDate()).calendar()}</Text> |
| </View> |
| </View> |
| <TouchableOpacity style={{alignItems: 'center', justifyContent: 'center'}} |
| onPress={() => onDelete(item)}> |
| <Ionicons name="trash-outline" size={41} color="#fb634c"/> |
| </TouchableOpacity> |
| </View> |
| </TouchableOpacity> |
| ); |
|
|
| return ( |
| <View style={styles.container}> |
| <Modal |
| animationType="slide" |
| visible={showModal} |
| onRequestClose={() => {toggleModal()}}> |
| <TodosModal closeModal={() => toggleModal()} data={currentList}/> |
| </Modal> |
| |
| <FlatList |
| style={styles.flatList} |
| data={lists} |
| renderItem={({item}) => <OneListCard item={item}/>} |
| keyExtractor={(item) => item.title} |
| showsVerticalScrollIndicator={false} |
| /> |
| </View> |
| ) |
| } |
|
|
| const styles = StyleSheet.create({ |
| item: { |
| flexDirection: 'row', |
| borderRadius: 10, |
| paddingVertical: 12, |
| paddingHorizontal: 5, |
| marginHorizontal: 50, |
| marginTop: 20, |
| }, |
| flatList: {}, |
| todo: { |
| fontSize: 30, |
| fontWeight: 'bold', |
| color: 'grey' |
| }, |
| list: { |
| fontSize: 30, |
| color: '#53abbf' |
| }, |
| header: { |
| borderWidth: 2, |
| flexDirection: 'row', |
| marginTop: 20, |
| alignItems: 'center', |
| justifyContent: 'center' |
| }, |
| container: { |
| flex: 1, |
| backgroundColor: '#14141c' |
| } |
| }) |
|
|
|
|
