keannu125/Reactnative-notesapp
1
0
Fork 0
mirror of https://github.com/lemeow125/Reactnative-notesapp.git synced 2025-05-16 11:28:15 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Integrated Api for New Notes

Browse source
This commit is contained in:
toledo 2023-04-08 22:39:18 +08:00
parent 837299bcc0
commit e8d447d7ab
4 changed files with 102 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx
View file

@ -44,12 +44,12 @@ export default function CustomDrawerContent(props: {}) {
color="Green"
width={width}
onPress={() => {
navigation.navigate("Add Note");
navigation.navigate("New Note");
}}
>
<AddIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Add Note
New Note
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft

2
src/Routes/Home/Home.tsx
View file

@ -27,7 +27,7 @@ export default function Home() {
<View style={styles.homecont}>
<TouchableOpacity
onPress={() => {
navigation.navigate("Add Note");
navigation.navigate("New Note");
}}
>
<Text style={styles.newnote}>+</Text>

136
src/Routes/AddNote/AddNote.tsx → src/Routes/NewNote/NewNote.tsx
View file

@ -1,54 +1,82 @@
import * as React from 'react';
import {View, Text, TextInput} from 'react-native';
import styles from '../../styles';
import Background from '../../Components/Background/Background';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useState } from "react";
import {TouchableOpacity,} from "react-native";
import { RootDrawerParamList } from "../../Interfaces/Interfaces";
import { useNavigation } from "@react-navigation/native";
export default function AddNote() {
const [addnote, setNote] = useState("");
const [addtitle, setTitle] = useState("");
const navigation = useNavigation<RootDrawerParamList>();
return (
<Background>
<Text style={{...styles.text_white, ...{fontSize: 32}}}>Add Note</Text>
<SafeAreaView>
<View style={styles.addnotecont}>
<View style={styles.tle}>
<TextInput
style={styles.title}
placeholder="Title"
placeholderTextColor="white"
onChangeText={setTitle}
value={addtitle}
/>
</View>
<View style={styles.typehere}>
<TextInput
style={styles.typeinput}
placeholder="Type here...."
placeholderTextColor="white"
onChangeText={setNote}
value={addnote}
/>
</View>
<TouchableOpacity style={styles.savebtn}>
<Text style={styles.savenote}>SAVE</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.cancelbtn}
onPress={() => {
navigation.navigate("Home");
}}>
<Text style={styles.cancel}>CANCEL</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</Background>
);
}
import * as React from 'react';
import {View, Text, TextInput} from 'react-native';
import styles from '../../styles';
import Background from '../../Components/Background/Background';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useState } from "react";
import {TouchableOpacity,} from "react-native";
import { RootDrawerParamList } from "../../Interfaces/Interfaces";
import { useNavigation } from "@react-navigation/native";
import { useMutation, useQueryClient } from "react-query";
import { AddNote } from "../../Components/Api/Api";
export default function NewNote() {
const [note, setNote] = useState({
title: "",
content: "",
});
const navigation = useNavigation<RootDrawerParamList>();
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: AddNote,
onSuccess: () => {
queryClient.invalidateQueries("notes");
},
});
return (
<Background>
<Text style={{...styles.text_white, ...{fontSize: 32}}}>New Note</Text>
<SafeAreaView>
<View style={styles.addnotecont}>
<View style={styles.tle}>
<TextInput
style={styles.title}
placeholder="Title"
placeholderTextColor="white"
value={note.title}
onChangeText={(text) => {
setNote({ ...note, title: text });
}}
maxLength={20}
/>
</View>
<View style={styles.typehere}>
<TextInput
style={styles.typeinput}
placeholder="Type here...."
placeholderTextColor="white"
value={note.content}
onChangeText={async (text) => {
await setNote({ ...note, content: text });
}}
/>
</View>
<TouchableOpacity style={styles.savebtn}
onPress={async () => {
try {
await mutation.mutate({
title: note.title,
content: note.content,
});
navigation.navigate("Home");
} catch (error) {}
console.log(note.content)
}}>
<Text style={styles.savenote}>SAVE</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.cancelbtn}
onPress={() => {
navigation.navigate("Home");
}}>
<Text style={styles.cancel}>CANCEL</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</Background>
);
}