update

src/network/Resource.js

@@ -19,12 +19,13 @@ class Resource {
 
   async createTask(body){
     const header = {
-      "Authorization": "",
+      "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJrYXJ5YXdhbiIsInN1YiI6MiwiaWF0IjoxNTYxOTE2NzI5LCJleHAiOjMxNzEzMTQzNjcyOX0.JfmOjuyl39_yDsDEj2DjW21Q1QKroxWvRQ3UU5xQnzI",
+      "Content-Type": "application/json",
     }
 
-    let bodyForm = Object.keys(body).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(body[key])).join('&');
+    console.log(JSON.stringify(body))
 
-    let res = await Request.post(URI.RESOURCE + URI.ENDPOINT_CREATE_TASK, header, bodyForm);
+    let res = await Request.post(URI.RESOURCE + URI.ENDPOINT_CREATE_TASK, header, JSON.stringify(body));
 
     return new Promise((resolve, reject) => {
       try{

src/routing/main.js

@@ -3,6 +3,7 @@ import { Text, View } from 'react-native'
 import {createStackNavigator, createMaterialTopTabNavigator} from 'react-navigation'
 import mainScreen from '../screens/main'
 import createScreen from '../screens/create'
+import detailScreen from '../screens/detail'
 import profileScreen from '../screens/profile'
 
 const HeaderStyle = () => ({
@@ -62,6 +63,12 @@ export default Main = createStackNavigator({
         title: "Beranda",
       })
   },
+  DetailScreen:{
+      screen: detailScreen,
+      navigationOptions: (props) => ({
+        title: "Detail",
+      })
+  },
   CreateScreen:{
       screen: createScreen,
       navigationOptions: (props) => ({

src/screens/create.js

@@ -1,7 +1,21 @@
 import React, { Component } from 'react'
-import { Text, View, TextInput } from 'react-native'
+import { Text, View, TextInput, StyleSheet, TouchableOpacity} from 'react-native'
+import Resource from '../network/Resource'
+
+const myStyle = StyleSheet.create({
+  form: {
+    borderColor: "#EFEFEF", 
+    backgroundColor: "#FEFEFE",
+    borderWidth: 1, 
+    height: 30, 
+    paddingVertical: 5, 
+    paddingHorizontal: 10, 
+    marginBottom: 10
+  }
+})
 
 export default class create extends Component {
+
   constructor(props){
     super(props)
 
@@ -20,13 +34,121 @@ export default class create extends Component {
     }
   }
 
+  submitTask(){
+    let body = {
+      "category_id" : this.state.category_id,
+      "nama" : this.state.nama,
+      "pic" : this.state.pic,
+      "anggota" : this.state.anggota,
+      "notes" : this.state.notes,
+      "jenis_task" : this.state.jenis_task,
+      "tindak_lanjut" : this.state.tindak_lanjut,
+      "task_start" : this.state.task_start,
+      "task_end" : this.state.task_end,
+      "task_date" : this.state.task_date,
+      "task_due" : this.state.task_due
+    }
+
+    Resource.createTask(body)
+    .then((res) => {
+      this.resetForm();
+      alert("Submit Sukses")
+    })
+    .catch((err) => {
+      alert(JSON.stringify(err))
+    })
+  }
+
+  resetForm(){
+    this.setState({
+      category_id : "",
+      nama : "",
+      pic : "",
+      anggota : "",
+      notes : "",
+      jenis_task : "",
+      tindak_lanjut : "",
+      task_start : "",
+      task_end : "",
+      task_date : "",
+      task_due : ""
+    })
+  }
+
   render() {
     return (
       <View style={{padding: 30}}>
         <TextInput 
-          style={{borderColor: "#CCC", borderWidth: 1, height: 30, paddingVertical: 5, paddingHorizontal: 10}} 
+          style={myStyle.form} 
+          value={this.state.category_id}
+          onChangeText={(category_id) => this.setState({category_id})}
+          placeholder="Category"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.nama}
+          onChangeText={(nama) => this.setState({nama})}
           placeholder="Nama"
         />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.pic}
+          onChangeText={(pic) => this.setState({pic})}
+          placeholder="P.I.C"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.anggota}
+          onChangeText={(anggota) => this.setState({anggota})}
+          placeholder="Anggota"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.notes}
+          onChangeText={(notes) => this.setState({notes})}
+          placeholder="Notes"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.jenis_task}
+          onChangeText={(jenis_task) => this.setState({jenis_task})}
+          placeholder="Jenis Task"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.tindak_lanjut}
+          onChangeText={(tindak_lanjut) => this.setState({tindak_lanjut})}
+          placeholder="Tindak Lanjut"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.task_start}
+          onChangeText={(task_start) => this.setState({task_start})}
+          placeholder="Task Start"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.task_end}
+          onChangeText={(task_end) => this.setState({task_end})}
+          placeholder="Task End"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.task_date}
+          onChangeText={(task_date) => this.setState({task_date})}
+          placeholder="Task Date"
+        />
+        <TextInput 
+          style={myStyle.form} 
+          value={this.state.task_due}
+          onChangeText={(task_due) => this.setState({task_due})}
+          placeholder="Task Due"
+        />
+        <TouchableOpacity style={{marginTop: 20}} onPress={() => this.submitTask()}>
+          <View style={{backgroundColor:"#F7CA18", padding: 10}}>
+            <Text style={{color:"#FFF", textAlign:"center"}}>SUBMIT</Text>
+          </View>
+        </TouchableOpacity>
       </View>
     )
   }

src/screens/detail.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { Text, View } from 'react-native'
+
+export default class detail extends Component {
+  constructor(props){
+    super(props);
+
+    this.data = this.props.navigation.getParam("data", null)
+  }
+  render() {
+    return (
+      <View style={{padding: 20}}>
+        <Text>Nama: {this.data.nama}</Text>
+        <Text>Anggota: {this.data.anggota}</Text>
+        <Text>Notes: {this.data.notes}</Text>
+      </View>
+    )
+  }
+}

src/screens/main.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Text, View, Button, Alert, FlatList} from 'react-native'
+import { Text, View, Button, Alert, FlatList, TouchableOpacity} from 'react-native'
 import Resource from '../network/Resource'
 
 export default class main extends Component {
@@ -21,14 +21,7 @@ export default class main extends Component {
 
     Resource.getTask()
     .then((res) => {
-
-      let currentdata = this.state.data;
-
-      res.result.map((item) => {
-        currentdata.push(item)
-      })
-
-      this.setState({loading: false, data: currentdata})
+      this.setState({loading: false, data: res.result})
     })
     .catch((err) => {
       alert(err)
@@ -38,19 +31,25 @@ export default class main extends Component {
   render() {
     return (
       <View>
+        <Button title="Tambah Task" onPress={() => this.props.navigation.navigate("CreateScreen")} />
         <FlatList
           refreshing={this.state.loading}
           onRefresh={() => this.getData()}
           style={{}}
           data={this.state.data}
-          renderItem={({item, i}) => (
-            <View style={{marginBottom:20, padding:20, borderBottomColor: "#aaa", borderBottomWidth: 1}}>
-              <Text>{item.nama}</Text>
-              <Text>{item.divisi_name}</Text>
-            </View>
+          renderItem={({item, index}) => (
+            <TouchableOpacity onPress={() => {
+              this.props.navigation.navigate("DetailScreen",{
+                data: this.state.data[index]
+              })}
+            }>
+              <View style={{marginBottom:20, padding:20, borderBottomColor: "#aaa", borderBottomWidth: 1}}>
+                <Text>{item.nama}</Text>
+                <Text>{item.divisi_name}</Text>
+              </View>
+            </TouchableOpacity>
           )}
         />
-        <Button title="Tambah Task" onPress={() => this.props.navigation.navigate("CreateScreen")} />
       </View>
     )
   }