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----
const numColumns=1;
const WIDTH=Dimensions.get('window').width

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(()=>{
    db.allDocs(function(err, docs) {
           if (err) {     
              return console.log(err);
           } else {
              if (docs.rows.length){console.log("hello")}
             //  console.log (docs.rows.length);
                 //setRow(docs.rows)
           }
        });
   })
     
  //     }
    const fetchData = async () => {
      try{
          const documents=await db.allDocs({include_docs: true, descending: true}, function(err, doc) {
            const {id, title, assigne, description, priority, datetime}=documents.docs.rows;
            setId(id)
            setTitle(title)
            setAss(assigne)
            setDes(description)
            setPriority(priority)
            setDate(datetime)

          });
  //----------Update Data in State----------
      }catch(error){console.error(error);}
    }
    

    // Delete Task-----
 //Empty row handle
const formatData= (datalist, numColumns) =>{
  const totalRows = Math.floor(datalist.length / numColumns)
  let totalLastRow=datalist.length-(totalRows * numColumns)
      while(totalLastRow !== 0 && totalLastRow !==numColumns){
          datalist.push({key:"blank", image:"blank", empty: true })
          totalLastRow++
      }
      return datalist
  }
  //
    //Render Items for Flatlist
  const _renderItem=({item, index}) => {
    let {mainflex, userText, itemInvisible, itemimg, dateText, firstflex, secondflex, desText} = styles
    return(
      <TouchableOpacity onPress={() =>navigation.navigate('CreatePostScreen')}>
      <Card>
      <Card.Title h4 >{title+id}</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}>{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}>{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}>{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}>{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={formatData(datalist, numColumns)}
            renderItem={_renderItem}
            keyExtractor={(item, index)=> index.toString()}
            numColumns={numColumns}
            
          />
          <View style={{alignItems:"flex-end", padding:5}}>
          <Icon name='add-circle-sharp' type='ionicon' color='#228B22' size={60}
          onPress={() => navigation.navigate('CreatePostScreen')}
          />
        </View>
        <View style={{alignItems:"flex-end", padding:5}}>
         <Icon name='add-circle-sharp' type='ionicon' color='#228B22' size={60}
          
          />
        </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

Popular posts from this blog

RecyclerView Complete App

App.js // In App.js in a new project import * as React from ' react ' ; import { NavigationContainer } from ' @react-navigation/native ' ; import { createStackNavigator } from ' @react-navigation/stack ' ; import HomeScreen from " ./HomeScreen " ; import RecyclerView from " ./RecyclerView " ; const Stack = createStackNavigator (); function App () { return ( < NavigationContainer > < Stack.Navigator > < Stack.Screen name = " Home " component ={ HomeScreen } /> < Stack.Screen name = " RecyclerView " component ={ RecyclerView } /> </ Stack.Navigator > </ NavigationContainer > ); } export default App ;      Recyclerview.js import React, {Component} from ' react ' ; import { StyleSheet, View, Dimensions, Text, Image, MaskedViewBase } from ' react-native ' ; import faker from ' faker ' ; import { Recycl...
Read more
  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 . ...
Read more

Integrating Google maps with React native

Image
Integrating Google maps with React native   React Native Map React Native Map Example  is to integrate the Google Map into your React Native Application. To integrate the Map in our example we will use a very good library called  react-native-maps . Which provides MapView component which is very easy to use. So let’s get started. To Make a React Native App Getting started with React Native  will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the  react-native-cli  command line utility. Open the terminal and go to the workspace and run npm install -g react-native-cli Run the following commands to create a new React Native project react-native init ProjectName If you want to start a new project with a specific React Native version, you can use the — version argument: react-native init ProjectName --ver...
Read more