diff --git a/notes/App.js b/notes/App.js index ca989be396c02d3a3a3071c6689aeddf11de7065..e51cd83fd3573adc627d5f5c164eb31dcaf3eed8 100644 --- a/notes/App.js +++ b/notes/App.js @@ -3,37 +3,55 @@ import { Text, View, Button, ActivityIndicator, TextInput, ScrollView } from 're import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { StyleSheet } from "react-native" +import AsyncStorage from '@react-native-async-storage/async-storage'; class Notes extends React.Component { state = { + loading: true, tmpText: '', + newNote: null, 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() { + if (this.state.loading) { + return ( + <View> + <ActivityIndicator animating={true} /> + </View> + ) + } + + if (this.state.error) { + return ( + <View> + <Text>Failed to load notes!</Text> + </View> + ) + } + return ( <ScrollView> {this.state.notes.map(note => @@ -57,11 +75,33 @@ class Notes extends React.Component { let notes = this.state.notes let nextId = this.state.notes.length + 1 let newNote = {"id":nextId,"name":this.state.tmpText} + this.state.newNote = newNote let newNotes = notes.concat(newNote) this.state.notes = newNotes console.log('notes:'+this.state.notes) + AsyncStorage.getItem('@notesarray') + .then(res => + { + console.log('loaded from async'+res); + this.addNoteToAsync(res); + } + ) 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) => { diff --git a/notes/README.txt b/notes/README.txt new file mode 100644 index 0000000000000000000000000000000000000000..108bfa77dbf1ab4f69880e364053c4b5af2b128d --- /dev/null +++ b/notes/README.txt @@ -0,0 +1,11 @@ +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 diff --git a/notes/package-lock.json b/notes/package-lock.json index cecc2ce9d7edceaaa28c55acd4ca46d3a1276dfd..16b312227157b54383679ebcdab9474a82295e96 100644 --- a/notes/package-lock.json +++ b/notes/package-lock.json @@ -8,6 +8,7 @@ "name": "notes", "version": "1.0.0", "dependencies": { + "@react-native-async-storage/async-storage": "^1.17.3", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/native": "^6.0.10", "@react-navigation/stack": "^6.2.1", @@ -2233,6 +2234,17 @@ "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": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-5.0.1.tgz", @@ -5499,6 +5511,14 @@ "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": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", @@ -6278,6 +6298,17 @@ "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": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -11329,6 +11360,14 @@ "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": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-5.0.1.tgz", @@ -13890,6 +13929,11 @@ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "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": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", @@ -14495,6 +14539,14 @@ "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": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", diff --git a/notes/package.json b/notes/package.json index 11fe5ad68f1f33f7e3e76dc210960ab50f59e519..4392a7433f28fcdbd450a99fff474b2530e8d320 100644 --- a/notes/package.json +++ b/notes/package.json @@ -10,6 +10,7 @@ "eject": "expo eject" }, "dependencies": { + "@react-native-async-storage/async-storage": "^1.17.3", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/native": "^6.0.10", "@react-navigation/stack": "^6.2.1",