import React, { Component, useEffect } from 'react';
import { AsyncStorage } from 'react-native';
import { useIsFocused } from "@react-navigation/native";
import { Card, Icon} from 'react-native-elements'
import PouchDB from 'pouchdb-react-native'
import {TouchableOpacity, View, FlatList, StyleSheet, Text, StatusBar, Dimensions, Image, Alert} from 'react-native';
//------Deside how many grid Display in main Activity----
var db = PouchDB('todo');
export default function MainActivity({ navigation, route, props}) {
const isFocused = useIsFocused();
//----define State----
const [id, setId] = React.useState('');
const [title, setTitle] = React.useState('');
const [assigne, setAss] = React.useState('');
const [description, setDes] = React.useState('');
const [priority, setPriority] = React.useState('');
const [date, setDate] = React.useState('');
const [datalist, setRow]=React.useState();
/////-----Create Object for isFocused----/////
useEffect(() => {
const fetchdata = async () => {
db.allDocs(function(err, docs) {
if (err) {
return console.log(err);
} else {
console.log (docs.rows);
setRow(docs.rows)
}
});
// db.allDocs({
// include_docs: true,
// attachments: true,
// })
// .then(function (result) {
// console.log(result.rows)
// if (result.rows && result.rows.length)
// {
// let itemid=[]
// for (var i=0; i<itemid.length; i++) {
// db.get(id[i]).then(function (doc) {
// console.log(doc)
// //setRow([doc])
// setRow([DATA])
// }).catch(function (err) {
// console.log(err)
// })
// }
// }
// return [];
// })
// .catch(function (err) {
// console.log(err);
// });
// ////Working this code
// // db.get('6683').then(function (doc) {
// // console.log(doc)
// // setRow([doc])
// // }).catch(function (err) {
// // // oh noes! we got an error
// // });
}
fetchdata()
},[isFocused])
console.log()
//Render Items for Flatlist
const renderItem=({item, index}) => {
let {mainflex, userText, dateText, firstflex, secondflex, desText} = styles
return(
<TouchableOpacity onPress={() =>navigation.navigate('CreatePostScreen')}>
<Card>
<Card.Title h4 >{item.doc.title}</Card.Title>
<Card.Divider/>
<View style={mainflex}>
<View style={firstflex}>
<View style={{flex:1, flexDirection:'row', alignItems:"flex-start", alignItems:"center"}}>
<Icon name='person' type='ionicon' color='#2A7FAA' size={20}/>
<Text style={userText}>{item.doc.assigne}</Text>
</View>
<Card.Divider/>
<View style={{flex:1, flexDirection:'row', alignItems:"flex-start", alignItems:"center"}}>
<Icon name='information-circle' type='ionicon' color='#2A7FAA' size={20}/>
<Text style={desText}>{item.doc.description}</Text>
</View>
<Card.Divider/>
<View style={{flex:1, flexDirection:'row', alignItems:"flex-start", alignItems:"center"}}>
<Icon name='time-sharp' type='ionicon' color='#2A7FAA' size={20}/>
<Text style={dateText}>{item.doc.priority}</Text>
</View>
<Card.Divider/>
<View style={{flex:1, flexDirection:'row', alignItems:"flex-start", alignItems:"center"}}>
<Icon name='time-sharp' type='ionicon' color='#2A7FAA' size={20}/>
<Text style={dateText}>{item.doc.date}</Text>
</View>
<Card.Divider/>
</View>
<View style={secondflex}>
<Icon name='cloud-download-outline' type='ionicon' color='#4169E1' size={25}/>
<Icon name='create-outline' type='ionicon' color='green' size={25}/>
<Icon name='trash-outline' type='ionicon' color='#FF0000' size={25}
onPress={()=> deleteTask()}
/>
</View>
</View>
</Card>
</TouchableOpacity>
)
}
let {container}= styles
return(
<View style={container}>
<FlatList
data={datalist}
renderItem={renderItem}
keyExtractor={(item, index)=> index.toString()}
/>
<View style={{alignItems:"flex-end", padding:5}}>
<Icon name='add-circle-sharp' type='ionicon' color='#228B22' size={60}
onPress={() => navigation.navigate('CreatePostScreen')}
/>
</View>
</View>
)
}
const styles= StyleSheet.create({
container:{
flex: 1,
},
mainflex:{
flex:1,
flexDirection:"row",
},
firstflex:{
flex:5,
flexDirection:"column",
},
secondflex:{
flex:1,
alignItems:"flex-end",
justifyContent:"space-around",
flexDirection:"column",
},
userText:{
paddingLeft:5,
color:'#000000',
fontWeight: "bold",
fontSize:20,
},
desText:{
paddingLeft:5,
color:'#000000',
fontSize:15,
},
dateText:{
margin:5,
color:'#000000',
fontWeight: "bold",
fontSize:15,
},
itemInvisible:{
backgroundColor: 'transparent'
}
})
Comments
Post a Comment