Skip to content
Snippets Groups Projects
Commit 063cd0e5 authored by Heikki Koski's avatar Heikki Koski
Browse files

add async store

parent c3c127d0
No related branches found
No related tags found
No related merge requests found
...@@ -3,37 +3,55 @@ import { Text, View, Button, ActivityIndicator, TextInput, ScrollView } from 're ...@@ -3,37 +3,55 @@ import { Text, View, Button, ActivityIndicator, TextInput, ScrollView } from 're
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import { StyleSheet } from "react-native" import { StyleSheet } from "react-native"
import AsyncStorage from '@react-native-async-storage/async-storage';
class Notes extends React.Component { class Notes extends React.Component {
state = { state = {
loading: true,
tmpText: '', tmpText: '',
newNote: null,
notes: [ notes: [
{
"id": 2,
"name": "note2"
},
{
"id": 3,
"name": "note3"
},
{
"id": 1,
"name": "note1"
}
] ]
} }
componentDidMount() { handleAsyncStoreRes(response) {
if(response !== null){
this.state.notes = JSON.parse(response)
console.log('loaded from async'+response)
}
this.state.loading = false
this.setState(this.state)
}
componentDidMount() {
AsyncStorage.getItem('@notesarray')
.then(res => this.handleAsyncStoreRes(res))
.catch(e => this.setState({ error: true, loading: false }))
} }
render() { render() {
if (this.state.loading) {
return (
<View>
<ActivityIndicator animating={true} />
</View>
)
}
if (this.state.error) {
return (
<View>
<Text>Failed to load notes!</Text>
</View>
)
}
return ( return (
<ScrollView> <ScrollView>
{this.state.notes.map(note => {this.state.notes.map(note =>
...@@ -57,11 +75,33 @@ class Notes extends React.Component { ...@@ -57,11 +75,33 @@ class Notes extends React.Component {
let notes = this.state.notes let notes = this.state.notes
let nextId = this.state.notes.length + 1 let nextId = this.state.notes.length + 1
let newNote = {"id":nextId,"name":this.state.tmpText} let newNote = {"id":nextId,"name":this.state.tmpText}
this.state.newNote = newNote
let newNotes = notes.concat(newNote) let newNotes = notes.concat(newNote)
this.state.notes = newNotes this.state.notes = newNotes
console.log('notes:'+this.state.notes) console.log('notes:'+this.state.notes)
AsyncStorage.getItem('@notesarray')
.then(res =>
{
console.log('loaded from async'+res);
this.addNoteToAsync(res);
}
)
this.setState(this.state) this.setState(this.state)
} }
addNoteToAsync(response) {
let arr = JSON.parse(response)
console.log('arr1:'+arr)
console.log(this.state.newNote)
arr = arr.concat(this.state.newNote);
console.log('arr2:'+arr)
console.log('saving to async'+arr)
let value = JSON.stringify(arr)
AsyncStorage.setItem('@notesarray',value)
.then(
res => { console.log('saving note worked'+this.state.newNote); this.state.newNote = null }
)
}
} }
const Note = (props) => { const Note = (props) => {
......
Löytyy myös gitistä
https://gitlab.utu.fi/htmkos/notereactnative
Sisältää seuraavat tehtävät:
4.1
4.2
4.3
4.5
4.8
\ No newline at end of file
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"name": "notes", "name": "notes",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@react-native-async-storage/async-storage": "^1.17.3",
"@react-native-community/masked-view": "^0.1.11", "@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.0.10", "@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1", "@react-navigation/stack": "^6.2.1",
...@@ -2233,6 +2234,17 @@ ...@@ -2233,6 +2234,17 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@react-native-async-storage/async-storage": {
"version": "1.17.3",
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.17.3.tgz",
"integrity": "sha512-2dxdlGwBjBP2qYu6F72U7cRRFshISYiNEWCaQNOJtxUERCMaYRWcniYqhL248KSbGUMpRhFCEtliztsiGoYYMA==",
"dependencies": {
"merge-options": "^3.0.4"
},
"peerDependencies": {
"react-native": "^0.0.0-0 || 0.60 - 0.68 || 1000.0.0"
}
},
"node_modules/@react-native-community/cli": { "node_modules/@react-native-community/cli": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-5.0.1.tgz", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-5.0.1.tgz",
...@@ -5499,6 +5511,14 @@ ...@@ -5499,6 +5511,14 @@
"node": ">=0.12.0" "node": ">=0.12.0"
} }
}, },
"node_modules/is-plain-obj": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
"engines": {
"node": ">=8"
}
},
"node_modules/is-plain-object": { "node_modules/is-plain-object": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
...@@ -6278,6 +6298,17 @@ ...@@ -6278,6 +6298,17 @@
"node": ">=0.10" "node": ">=0.10"
} }
}, },
"node_modules/merge-options": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
"integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
"dependencies": {
"is-plain-obj": "^2.1.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/merge-stream": { "node_modules/merge-stream": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
...@@ -11329,6 +11360,14 @@ ...@@ -11329,6 +11360,14 @@
"fastq": "^1.6.0" "fastq": "^1.6.0"
} }
}, },
"@react-native-async-storage/async-storage": {
"version": "1.17.3",
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.17.3.tgz",
"integrity": "sha512-2dxdlGwBjBP2qYu6F72U7cRRFshISYiNEWCaQNOJtxUERCMaYRWcniYqhL248KSbGUMpRhFCEtliztsiGoYYMA==",
"requires": {
"merge-options": "^3.0.4"
}
},
"@react-native-community/cli": { "@react-native-community/cli": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-5.0.1.tgz", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-5.0.1.tgz",
...@@ -13890,6 +13929,11 @@ ...@@ -13890,6 +13929,11 @@
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
}, },
"is-plain-obj": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA=="
},
"is-plain-object": { "is-plain-object": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
...@@ -14495,6 +14539,14 @@ ...@@ -14495,6 +14539,14 @@
"buffer-alloc": "^1.1.0" "buffer-alloc": "^1.1.0"
} }
}, },
"merge-options": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
"integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
"requires": {
"is-plain-obj": "^2.1.0"
}
},
"merge-stream": { "merge-stream": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"eject": "expo eject" "eject": "expo eject"
}, },
"dependencies": { "dependencies": {
"@react-native-async-storage/async-storage": "^1.17.3",
"@react-native-community/masked-view": "^0.1.11", "@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.0.10", "@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1", "@react-navigation/stack": "^6.2.1",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment