diff --git a/App.js b/App.js
index 4c282a2..e0f1d8e 100644
--- a/App.js
+++ b/App.js
@@ -1,21 +1,171 @@
-import { SafeAreaView, Text } from 'react-native';
-import tw, { useDeviceContext } from 'twrnc';
+import MasonryList from '@react-native-seoul/masonry-list';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, Image, SafeAreaView, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import 'react-native-reanimated';
import { Provider } from 'react-redux';
+import tw, { useDeviceContext } from 'twrnc';
+import { useAddNoteMutation, useDeleteNoteMutation, useFetchNotesQuery, useSearchNotesQuery, useUpdateNoteMutation } from './db';
import { store } from './store';
-import 'react-native-reanimated';
+
+//Daniel Flemming
+
+const Stack = createNativeStackNavigator();
+
+//This is the note object. Can be added dynamically
+const Note = ({item, nav}) => {
+
+ titleCalculator = () => {
+ if(item.title.length >= 40){
+ return item.title.substring(0, 70) + "..."
+ }
+ return item.title
+ }
+
+ contentCalculator = () => {
+ if(item.content.length >=40){
+ return item.content.substring(0, 256) + "..."
+ }
+ return item.content
+ }
+ return (
+ {nav.navigate('Details', {note : item});}} style = {[tw`m-1 p-5 rounded-lg bg-[#2F0082]`]}>
+
+ {titleCalculator()}
+ {contentCalculator()}
+
+
+ );
+}
+
+// HomeScreen component handles the main functionality of adding, searching, and displaying notes
+function HomeScreen({route, navigation}){
+ const [addNote, {data : addNoteData}] = useAddNoteMutation();
+ const {data, error, isLoading} = useFetchNotesQuery();
+ const [text, setText] = useState("");
+ const {data : filteredData, isLoading : searchNotesLoading} = useSearchNotesQuery(""+text);
+
+ useEffect(() => {
+ if(addNoteData != undefined){
+ navigation.navigate('Details', {note : addNoteData});
+ console.log(addNoteData);
+ }
+ }, [addNoteData])
+
+ if(isLoading || searchNotesLoading){
+ return(
+
+
+
+ );
+ }
+
+ if(error){
+ return(
+
+ Failed to load notes
+
+ );
+ }
+
+ return(
+
+
+ Search/Quick add
+ {setText(text)}}>
+
+ item.id}
+ renderItem = {({item}) => }
+ numColumns = {2}
+ contentContainerStyle={tw`p-4`}
+ />
+ {await addNote({title : " ", content: ""+text});}}>
+
+
+
+ );
+}
+
+// DetailsScreen component handles the display, editing, and deletion of a single note
+function DetailsScreen({route, navigation}){
+ const [updateNote] = useUpdateNoteMutation();
+ const {note} = route.params;
+ const [title, setTitle] = useState(note.title);
+ const [text, setText] = useState(note.content);
+ const [deleteNote] = useDeleteNoteMutation();
+ noteDelete = false;
+ const deleteThisNote = () => {
+ noteDelete = true;
+ deleteNote(note);
+ navigation.popToTop();
+ }
+ React.useEffect(() => {
+ navigation.setOptions({
+ headerRight: () =>
+
+
+
+ });
+ const unsubscribe = navigation.addListener('beforeRemove', (e) => {
+ // Prevent default behavior of leaving the screen
+ e.preventDefault();
+ // Save the note before leaving
+ if(!noteDelete)
+ {saveNote();}
+ // Manually trigger the default behavior
+ navigation.dispatch(e.data.action);
+ });
+
+ return unsubscribe;
+ }, [navigation, title, text]);
+
+ saveNote = () => {
+ updateNote({id : note.id, content : text, title : title});
+ //navigation.popToTop();
+ }
+
+ return(
+
+ setTitle(text)} placeholder='Type here'>{note.title}
+ setText(text)} placeholder='Type here'>{note.content}
+
+ DONE
+
+
+ );
+}
function App() {
useDeviceContext(tw);
-
return (
-
-
- Your app code goes here.
-
+
+
+
+
+
+
+
+ , headerShadowVisible:false, headerTintColor: '#ffffff'}}/>
+
+
- )
+ );
}
-export default App;
+export default App;
\ No newline at end of file
diff --git a/README.md b/README.md
index d462ea0..1c8d8a1 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,26 @@
-# SKNotesStarter
+# Notes Management App
+
+This is a simple Notes Management app built with React Native. It allows users to add, search, update, and delete notes. The app uses Redux Toolkit Query for data fetching and state management, and AsyncStorage for local data persistence.
+
+## Features
+
+- Add new notes
+- Search notes by content
+- Update existing notes
+- Delete notes
+- Delete all notes
+
+## Technologies Used
+
+- React Native
+- Redux Toolkit Query
+- AsyncStorage
+- UUID
+
+## Installation
+
+1. Clone the repository:
+ ```bash
+ git clone https://github.com/PerfectOctogon/NotesJS.git
View the [ShiftKey Labs Notion](https://shiftkeylabs.notion.site/Project-Install-Instructions-f937641104bc42e098fcfefcf7349608) for detailed installation instructions.
\ No newline at end of file
diff --git a/app.json b/app.json
index fbb2022..01927c0 100644
--- a/app.json
+++ b/app.json
@@ -18,10 +18,16 @@
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
- }
+ },
+ "package": "com.perfectoctogon.SKNotesStarter"
},
"web": {
"favicon": "./assets/favicon.png"
+ },
+ "extra": {
+ "eas": {
+ "projectId": "8572402e-b966-48a4-a7d8-7c79fd4323f2"
+ }
}
}
}
diff --git a/assets/add.png b/assets/add.png
new file mode 100644
index 0000000..f20ec50
Binary files /dev/null and b/assets/add.png differ
diff --git a/assets/delete.png b/assets/delete.png
new file mode 100644
index 0000000..1b61ff0
Binary files /dev/null and b/assets/delete.png differ
diff --git a/eas.json b/eas.json
new file mode 100644
index 0000000..7dfd688
--- /dev/null
+++ b/eas.json
@@ -0,0 +1,18 @@
+{
+ "cli": {
+ "version": ">= 9.1.0"
+ },
+ "build": {
+ "development": {
+ "developmentClient": true,
+ "distribution": "internal"
+ },
+ "preview": {
+ "distribution": "internal"
+ },
+ "production": {}
+ },
+ "submit": {
+ "production": {}
+ }
+}