<file_sep>import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem, Text, Body ,Left, Right, Title,Button,Icon,  } from 'native-base';
import { Alert} from 'react-native'

import { connect } from 'react-redux'
import { getColor,postKategori } from '../public/redux/actions/kategori'
import Data from '../Data/Note'

class Register extends Component {

  constructor(props) {
    super(props)
    this.state = {
      data: props.navigation.getParam('data'),
    }
  }
  
  delete =() => {

    Data.splice( (this.state.data.id_note - 1) , 1);

    Alert.alert(
      'Alert Title',
      'My Alert Msg',
      [
        {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {text: 'OK', onPress: () => this.props.navigation.goBack()},
      ],
      {cancelable: false},
    );
  }


  render() {
    return (
      <Container>
 <Header>
          <Left>
            <Button onPress={() => this.props.navigation.goBack()} transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body>
            <Title><Text>detail note</Text></Title>
          </Body>
          <Right>
            <Button onPress={() => this.delete()} transparent>
              <Icon name='trash' />
            </Button>
          </Right>
        </Header>   
        
        <Content>
          <Card>
            <CardItem header>
              <Text>{this.state.data.title}</Text>
            </CardItem>
            <CardItem>
              <Body>
                <Text>
                {this.state.data.text}
                </Text>
              </Body>
            </CardItem>
            <CardItem footer>
              <Text>{this.state.data.category_name}</Text>
            </CardItem>
         </Card>
        </Content>
      </Container>
    );
  }
}
const mapStateToProps = state => {
  return {
      kategoriP: state.reKategori.ListKategori.result
  }
}

export default connect(mapStateToProps)(Register)<file_sep>import axios from 'axios';
import URL from "../URL";
// let URL = 'http://192.168.6.169:5000'
//let URL = 'http://localhost:5000'

/////////////////////////////////////////////

export const getNote = () => {
  return {
    type: 'GET_NOTE',
    payload: axios.get(URL+'/note'),
  };
};

/////////////////////////////////////////////

export const postNote = (data) => {
  return {
    type: "POST_NOTE",
    payload: axios.post(URL+'/note', data,{})
  };
};
/////////////////////////////////////////////

export const deleteNote = (param) =>{
	return{
    type: 'DELETE_NOTE',
		payload: axios.delete(URL +`/note/${param}`)
	}
}
/////////////////////////////////////////////

export const getNote1 = (bookid) => {
  console.log("book id: " + bookid)
  return {
      type: 'GET_NOTE1',
      payload: axios.get(URL +`/note/byCategory/${bookid}`)
  }
}
/////////////////////////////////////////////

export const updateNote = (bookid, data) => {
  return {
      type: 'UPDATE_NOTE',
      payload: axios.patch(URL +`/note/${bookid}`, data)
  }
}<file_sep>import React, { Component } from 'react'
import { TouchableOpacity, Image, View, AsyncStorage as storage, ActivityIndicator, StyleSheet, FlatList, RefreshControl } from 'react-native'
import { FlatGrid } from 'react-native-super-grid';
import { Button, Item, Card, CardItem, Icon, Fab, Text, Container, Header, Left, Body, Right, Title, Subtitle } from 'native-base';
import DonateBook from './AddNote'
import Data from '../Data/Note'

//import redux
import { connect } from 'react-redux'

class Home extends Component {
    constructor(props) {
			super(props)
      this.initData = Data;
      
			this.state = {
        data: this.initData,
				isLoading: false,
				noteS: [],
				iduser: '',
        name: '',
        refreshing: false,

			}
    }

    pullDownRefresh =  () => {
        this.setState({ isLoading: true })
        setTimeout(() => {
          this.setState({data: Data, isLoading: false })
        }, 500)
        
      }

    _onRefresh = () => {
      this.setState({refreshing: true});
      fetchData().then(() => {
        this.setState({refreshing: false});
      });
    }

    render() {
			console.log('object', this.state.noteS)
        return (
					<Container >
          
					<Header>
						<Left>
							<Button transparent>
								<Icon name='person' />
							</Button>
						</Left>
						<Body>
							<Title>Title</Title>
							<Subtitle>Subtitle</Subtitle>
						</Body>
						<Right>
            <Button transparent>
              <Icon name='funnel' />
            </Button>
          </Right>
					</Header>
						<View style={styles.FlatList}>
            <FlatList
              refreshing={this.state.isLoading}
							onRefresh={this.pullDownRefresh}
              data={this.state.data}
              numColumns={2}
              keyExtractor={item => item.id_item}
              renderItem={({ item, index }) => {
                return (
                  <TouchableOpacity onPress={()=> this.props.navigation.navigate('Detail', { data: item })} >
                  <Card style={{width:170}}>
										<CardItem style={{backgroundColor:`${item.color}`}} header>
											<Text>{item.title}</Text>
										</CardItem>
										<CardItem style={{backgroundColor:`${item.color}`}}>
											<Body>
												<Text>
													{item.text}
												</Text>
											</Body>
										</CardItem>
										<CardItem style={{backgroundColor:`${item.color}`}} footer>
											<Text> {item.category_name}</Text>
										</CardItem>
								</Card>
                </TouchableOpacity>
                );
              }}
            />
          </View>

						<Fab	style={{ backgroundColor: '#5067FF' }}	onPress={() => this.props.navigation.navigate('AddNote')}>
							<Icon name="add" />
						</Fab>
					</Container>
        )
    }
}
const mapStateToProps = state => {
	return {
			noteP: state.reNote.ListNote.result,
	}
}

export default connect(mapStateToProps)(Home)

const styles = StyleSheet.create({
  header: {
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#fff",
    height: 60
  },
  text: {
    fontSize: 30
  },
  Borrowed: {
    fontSize: 10,
    color: "white",
    textAlign: "center",
    backgroundColor: "grey",
    borderRadius: 10,
    paddingTop: 2,
    justifyContent: "center",
    position: "absolute",
    zIndex: 1,
    width: 60,
    height: 20,
    marginTop: 192
  },

  image: {
    width: 170,
    height: 211,
    borderRadius: 10
  },

  searchBar: {
    zIndex: 1,
    backgroundColor: "#fff",
    borderBottomColor: "transparent",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 5
    },
    shadowOpacity: 0.34,
    shadowRadius: 6.27,
    elevation: 5,
    marginTop: 15,
    alignSelf: "center",
    marginRight: 0,
    height: 38,
    width: 307,
    position: "absolute",
    borderRadius: 20
  },
  FlatList: {
    alignItems: "center",
    display: "flex",
    justifyContent: "center"
  },
  item: {
    backgroundColor: "black",
    margin: 15,
    borderRadius: 8,
    elevation: 6,
    width: 145,
    height: 215
  }
});
<file_sep>const initialState = {
  ListNote: [],
  isLoading: false,
  isFulfilled: false,
  isRejected: false,
};

const buku = (state = initialState, action) => {
  switch (action.type) {
/////////////////////////////////////////////////////    
  case 'GET_NOTE_PENDING':
    return {
      ...state,
      isLoading: true,
      isFulfilled: false,
      isRejected: false,
    };
  case 'GET_NOTE_REJECTED':
    return {
      ...state,
      isLoading: false,
      isRejected: true,
    };
  case 'GET_NOTE_FULFILLED':
    return {
      ...state,
      isLoading: false,
      isFulfilled: true,
      ListNote: action.payload.data,
    };
/////get limit////////////////////////////////////////////////    
  case 'GET_NOTE_LIMIT_PENDING':
    return {
      ...state,
      isLoading: true,
      isFulfilled: false,
      isRejected: false,
    };
  case 'GET_NOTE_LIMIT_REJECTED':
    return {
      ...state,
      isLoading: false,
      isRejected: true,
    };
  case 'GET_NOTE_LIMIT_FULFILLED':
    return {
      ...state,
      isLoading: false,
      isFulfilled: true,
      ListNote: action.payload.data,
    };
///////////POST////////////////////////////////////////////
    case "POST_NOTE_PENDING":
        return {
          ...state,
          isLoading: true,
          isRejected: false,
          isFulfilled: false
        };
    case "POST_NOTE_REJECTED":
      return {
        ...state,
        isLoading: false,
        isRejected: true
      };
    case "POST_NOTE_FULFILLED":
      return {
        ...state,
        isLoading: false,
        isFulfilled: true,
        ListNote: action.payload.data
      };
/////////////GET1//////////////////////////////////////////
    case 'GET_NOTE1_PENDING': // in case when loading post data
      return {
        ...state,
        isLoading: true,
        isFulFilled: false,
        isRejected: false
        }
    case 'GET_NOTE1_REJECTED': // in case error network/else
        return {
            ...state,
            isLoading: false,
            isRejected: true,
        }
    case 'GET_NOTE1_FULFILLED': // in case successfuly post data
        return {
            ...state,
            isLoading: false,
            isFulFilled: true,
            ListNote: action.payload.data,
        }
///////////////DELETE////////////////////////////////////////        
      case 'DELETE_NOTE_PENDING': // in case when loading post data
          return {
              ...state,
              isLoading: true,
              isFulFilled: false,
              isRejected: false
          }
      case 'DELETE_NOTE_REJECTED': // in case error network/else
          return {
              ...state,
              isLoading: false,
              isRejected: true,
          }
      case 'DELETE_NOTE_FULFILLED': // in case successfuly post data
          return {
              ...state,
              isLoading: false,
              isFulFilled: true,
              ListNote: [state.ListNote, action.payload.data[0]],
          }
//////////////UPDATE/////////////////////////////////////////          
      case 'UPDATE_NOTE_PENDING': // in case when loading post data
          return {
              ...state,
              isLoading: true,
              isFulFilled: false,
              isRejected: false
          }
      case 'UPDATE_NOTE_REJECTED': // in case error network/else
          return {
              ...state,
              isLoading: false,
              isRejected: true,
          }
      case 'UPDATE_NOTE_FULFILLED': // in case successfuly post data
          return {
              ...state,
              isLoading: false,
              isFulFilled: true,
              ListNote: [state.ListNote, action.payload.data[0]],
          }
    default:
      return state;
  }
};

export default buku;
<file_sep>export default Data = [
  {
    id_category: 1,
    category_name: 'personal',
    icon: 'https://thegorbalsla.com/wp-content/uploads/2019/07/Hama-dan-Penyakit-Ikan-Kerapu-700x700.jpg',
    id_color: "#ed5565",
  },
  {
    id_category: 2,
    category_name: 'Work',
    icon: 'https://ecs7.tokopedia.net/img/cache/700/product-1/2018/2/21/0/0_fdcb14bf-83e9-473e-86b6-c84e31656cfe_800_800.jpg',
    id_color: "#00FFFF",
  },
  {
    id_category: 3,
    category_name: 'shoping',
    icon: 'https://ecs7.tokopedia.net/img/cache/700/product-1/2017/8/3/9244288/9244288_02cf5a39-7533-4bfa-93bf-d3d944f3548f_850_864.jpg',
    id_color: "#ebe134",
  },
];<file_sep>import React, { Component } from 'react';
import { FlatList, StyleSheet } from "react-native";
import { Container, Header, Content, List, ListItem, Thumbnail, Text, Left, Body, Title, Button } from 'native-base';
import { connect } from 'react-redux'
import { getKategory } from '../public/redux/actions/kategori'
import { withNavigation } from 'react-navigation';
import Data from '../Data/Kategori'

class Register extends Component {

  constructor(props) {
      super(props)
      this.initData = Data;

      this.state = {
          data: this.initData,
          text: '',
          title:'',
          id_category: '',
          selected: undefined,
          kategoriS:[]
      }
  }

  // componentDidMount = async () => {
  //   await this.props.dispatch( getKategory() )
    
  //   this.setState({	kategoriS: this.props.kategoriP })
  // }
  



  render() {
    return (
      <Container>
         <Header>
          <Body>
            <Title>kategori</Title>
          </Body>
         
        </Header>
        <Content>
          <List>
            <FlatList
              data={this.state.data}
              renderItem={({ item: rowData }) => {
                return (
                  <ListItem onPress={() => this.props.navigation.navigate('CategoryHome', { idCat: rowData.category_name })} thumbnail>
                    <Left>
                      <Thumbnail square source={{ uri: `${rowData.icon}` }} />
                    </Left>
                    <Body>
                      <Text>{rowData.category_name}</Text>
                    </Body>
                  </ListItem>
                  );
                }}
                keyExtractor={(item, index) => index}
              />
            </List>
          </Content>

        <ListItem style={{top:'0%'}} onPress={() => { this.props.navigation.navigate('AddCategory') }} thumbnail>
          <Left>
            <Thumbnail square source={{ uri: `http://pluspng.com/img-png/a-plus-logo-vector-png-free-vector-plus-icon-png-560.png` }} />
          </Left>
          <Body >
            <Text>Add categroy</Text>
          </Body>
        </ListItem>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
      kategoriP: state.reKategori.ListKategori.result
  }
}
export default connect(mapStateToProps)(withNavigation(Register))
