Working app

1 files changed, 185 insertions, 0 deletions

diff --git a/components/NotesList.js b/components/NotesList.js
new file mode 100644
index 0000000..9525b11
--- /dev/null
+++ b/components/NotesList.js
@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { View, StyleSheet, Text, FlatList, TouchableOpacity, Alert, TextInput } from 'react-native';
+import * as SecureStore from 'expo-secure-store';
+
+import { getFont } from "./Options"
+
+export default class NotesList extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      notes: [],
+      search: '',
+      font: 0,
+      sortOrder: true,
+    }
+    this.setNotes = this.setNotes.bind(this)
+    this.setSearch = this.setSearch.bind(this)
+    this.setFont = this.setFont.bind(this)
+    this.setSortOrder = this.setSortOrder.bind(this)
+    this.funkcja = () => null;
+  }
+  setNotes(s) { this.setState({ notes: s }) }
+  setSearch(s) { this.setState({ search: s }) }
+  setFont(s) { this.setState({ font: s }) }
+  setSortOrder(s) { this.setState({ sortOrder: s }) }
+
+  componentDidMount() {
+    getNotes(this.setNotes); getFont(this.setFont);
+    this.props.navigation.addListener('focus', () => { getNotes(this.setNotes); getFont(this.setFont); })
+  }
+  componentWillUnmount() {
+    this.funkcja();
+  }
+  render() {
+    const filterNotes = (n) => {
+      return n.title.includes(this.state.search) ||
+        n.body.includes(this.state.search) ||
+        n.category.includes(this.state.search)
+    }
+    const sortNotes = (a, b) => {
+      return this.state.sortOrder ? a.date - b.date : b.date - a.date;
+    }
+    return (
+      <View style={styles.cont} >
+        <View>
+          <TextInput
+            placeholder="SEARCH IN NOTES..."
+            placeholderTextColor="#FFFFFF"
+            onChangeText={this.setSearch}
+            style={styles.input}
+            defaultValue={this.state.search}
+          // ref={ti}
+          />
+        </View>
+        <TouchableOpacity style={styles.btn} onPress={() => this.setSortOrder(!this.state.sortOrder)}><Text style={[styles.txt, { textAlign: "center" }]}>Change sort order</Text></TouchableOpacity>
+        <View>
+          <FlatList
+            data={this.state.notes.filter(filterNotes).sort(sortNotes)}
+            renderItem={item => {
+              const note = item.item
+              let date = new Date(note.date)
+              const ms = ["Sty", "Lut", "Mar", "Kwi", "Maj", "Cze", "Lip", "Sie", "Wrz", "Paz", "Lis", "Gru"]
+              date = `${date.toISOString().substr(8, 2)} ${ms[date.getMonth()]}`
+              return (
+                <TouchableOpacity onLongPress={() =>
+                  Alert.alert("Delete?", "There's no way back", [
+                    {
+                      text: "Cancel",
+                      style: "cancel"
+                    },
+                    {
+                      text: "OK",
+                      onPress: () => deleteItem(note, this.setNotes)
+                    }
+                  ])
+                }
+                  onPress={() => this.props.navigation.navigate("editNote", { note })
+                  }
+                >
+                  <View key={item.index} style={[styles.note, { backgroundColor: note.color }]}>
+                    <View><Text style={[styles.category, { color: note.color, fontSize: this.state.font }]}>{note.category}</Text></View>
+                    <View><Text style={[styles.date, { fontSize: this.state.font }]}>{date}</Text></View>
+                    <View style={{ flex: 1 }}><Text style={[styles.title, { fontSize: this.state.font }]}>{note.title}</Text></View>
+                    <View style={{ flex: 1 }}><Text style={[styles.body, { flexWrap: "wrap", fontSize: this.state.font }]}>{note.body}</Text></View>
+                  </View>
+                </TouchableOpacity>
+              )
+            }}
+            keyExtractor={(_, i) => i.toString()}
+            contentContainerStyle={styles.list}
+            style={styles.list}
+            numColumns={2}
+          />
+        </View>
+      </View>
+    )
+  }
+}
+
+async function deleteItem(note, setNotes) {
+  let keyList = JSON.parse(await SecureStore.getItemAsync('notesKeys'))
+  await SecureStore.deleteItemAsync(note.key.toString())
+  keyList = keyList.filter(n => n !== note.key)
+  await SecureStore.setItemAsync('notesKeys', JSON.stringify(keyList))
+
+  getNotes(setNotes)
+}
+
+async function getNotes(setNotes) {
+  let notesKeys = await SecureStore.getItemAsync('notesKeys')
+  if (!notesKeys) notesKeys = []; else notesKeys = JSON.parse(notesKeys);
+  const notes = [];
+  for (const key of notesKeys) {
+    notes.push(JSON.parse(await SecureStore.getItemAsync(key.toString())))
+  }
+  setNotes(notes);
+}
+
+const styles = StyleSheet.create({
+  cont: {
+    flex: 1,
+    flexDirection: "column",
+    backgroundColor: "black",
+  },
+  note: {
+    width: 160,
+    height: 160,
+    backgroundColor: "red",
+    borderRadius: 10,
+    padding: 10,
+    marginTop: 30,
+    marginLeft: 30,
+  },
+  list: {
+    // height: 680,
+  },
+  btn: {
+    // borderColor: "red",
+    borderWidth: 3,
+    textAlign: "center",
+    flex: 0,
+  },
+  ico: {
+    width: 200,
+    height: 200,
+  },
+  input: {
+    fontSize: 25,
+    alignSelf: "center",
+    textAlign: "center",
+    width: "80%",
+    backgroundColor: "darkgrey",
+    borderRadius: 8,
+    margin: 10,
+    height: 60,
+  },
+  category: {
+    backgroundColor: "black",
+    // width: "fit-content",
+    margin: 10,
+    padding: 5,
+    borderRadius: 8,
+    alignSelf: "flex-start",
+  },
+  date: {
+    fontSize: 18,
+    color: "#FFFFFF",
+    textAlign: "right",
+  },
+  title: {
+    fontSize: 25,
+    fontWeight: "bold",
+    color: "#FFFFFF"
+  },
+  body: {
+    fontSize: 25,
+    color: "#FFFFFF"
+  },
+  txt: {
+    fontSize: 25,
+    fontWeight: "bold",
+    color: "#FFFFFF"
+  },
+})
+