mirror of
https://github.com/lemeow125/Reactnative-notesapp.git
synced 2024-11-17 06:29:27 +08:00
Merge pull request #21 from lemeow125/feature/edit_note
Feature/edit note
This commit is contained in:
commit
3ce0a4b0e2
8 changed files with 306 additions and 79 deletions
42
App.tsx
42
App.tsx
|
@ -13,31 +13,31 @@ import Register from "./src/Routes/Register/Register";
|
||||||
import { Provider } from "react-redux";
|
import { Provider } from "react-redux";
|
||||||
import Store from "./src/Features/Redux/Store/Store";
|
import Store from "./src/Features/Redux/Store/Store";
|
||||||
import { QueryClient, QueryClientProvider } from "react-query";
|
import { QueryClient, QueryClientProvider } from "react-query";
|
||||||
|
import EditNote from "./src/Routes/EditNote/EditNote";
|
||||||
|
|
||||||
const Drawer = createDrawerNavigator();
|
const Drawer = createDrawerNavigator();
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<Provider store={Store}>
|
<Provider store={Store}>
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<NavigationContainer>
|
<NavigationContainer>
|
||||||
<Drawer.Navigator
|
<Drawer.Navigator
|
||||||
initialRouteName="Home"
|
initialRouteName="Home"
|
||||||
drawerContent={CustomDrawerContent}
|
drawerContent={CustomDrawerContent}
|
||||||
screenOptions={DrawerScreenSettings}
|
screenOptions={DrawerScreenSettings}
|
||||||
>
|
>
|
||||||
<Drawer.Screen name="Home" component={Home} />
|
<Drawer.Screen name="Home" component={Home} />
|
||||||
<Drawer.Screen name="New Note" component={NewNote} />
|
<Drawer.Screen name="New Note" component={NewNote} />
|
||||||
<Drawer.Screen name="User Info" component={UserInfo} />
|
<Drawer.Screen name="User Info" component={UserInfo} />
|
||||||
<Drawer.Screen name="Login" component={Login} />
|
<Drawer.Screen name="Login" component={Login} />
|
||||||
<Drawer.Screen name="Register" component={Register} />
|
<Drawer.Screen name="Register" component={Register} />
|
||||||
<Drawer.Screen name="LogOut" component={Register} />
|
<Drawer.Screen name="LogOut" component={Register} />
|
||||||
|
<Drawer.Screen name="EditNote" component={EditNote} />
|
||||||
</Drawer.Navigator>
|
</Drawer.Navigator>
|
||||||
</NavigationContainer>
|
</NavigationContainer>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
</Provider>
|
</Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,22 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { View, Text, TextInput, ScrollView } from "react-native";
|
import { View, Text, TextInput, ScrollView } from "react-native";
|
||||||
import styles from "../../styles";
|
import styles from "../../styles";
|
||||||
import { NoteProps } from "../../Interfaces/Interfaces";
|
import { NoteProps, RootDrawerParamList } from "../../Interfaces/Interfaces";
|
||||||
|
import ButtonCentered from "../Buttons/ButtonCentered/ButtonCentered";
|
||||||
|
import { useQueryClient, useMutation } from "react-query";
|
||||||
|
import { DeleteNote } from "../Api/Api";
|
||||||
|
import { useNavigation } from "@react-navigation/native";
|
||||||
|
|
||||||
export default function Note(props: NoteProps) {
|
export default function Note(props: NoteProps) {
|
||||||
|
const navigation = useNavigation<RootDrawerParamList>();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: DeleteNote,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries("notes");
|
||||||
|
queryClient.invalidateQueries("public_notes");
|
||||||
|
},
|
||||||
|
});
|
||||||
return (
|
return (
|
||||||
<View style={styles.addnotecont}>
|
<View style={styles.addnotecont}>
|
||||||
<View style={styles.tle}>
|
<View style={styles.tle}>
|
||||||
|
@ -19,6 +32,32 @@ export default function Note(props: NoteProps) {
|
||||||
<Text style={styles.typeinput}>{props.content}</Text>
|
<Text style={styles.typeinput}>{props.content}</Text>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</View>
|
</View>
|
||||||
|
<View style={styles.flex_row}>
|
||||||
|
<ButtonCentered
|
||||||
|
color={"Red"}
|
||||||
|
onPress={() => {
|
||||||
|
console.log("Deleted note id " + props.id);
|
||||||
|
mutation.mutate(props.id);
|
||||||
|
}}
|
||||||
|
width={64}
|
||||||
|
>
|
||||||
|
<Text style={{ ...styles.text_white, ...{ fontSize: 16 } }}>
|
||||||
|
Delete Note
|
||||||
|
</Text>
|
||||||
|
</ButtonCentered>
|
||||||
|
<ButtonCentered
|
||||||
|
color={"Yellow"}
|
||||||
|
onPress={() => {
|
||||||
|
navigation.navigate("EditNote", { noteId: props.id });
|
||||||
|
console.log("Editing note id " + props.id);
|
||||||
|
}}
|
||||||
|
width={64}
|
||||||
|
>
|
||||||
|
<Text style={{ ...styles.text_white, ...{ fontSize: 16 } }}>
|
||||||
|
Edit Note
|
||||||
|
</Text>
|
||||||
|
</ButtonCentered>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
24
src/Components/PublicNote/PublicNote.tsx
Normal file
24
src/Components/PublicNote/PublicNote.tsx
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { View, Text, TextInput, ScrollView } from "react-native";
|
||||||
|
import styles from "../../styles";
|
||||||
|
import { NoteProps } from "../../Interfaces/Interfaces";
|
||||||
|
|
||||||
|
export default function PublicNote(props: NoteProps) {
|
||||||
|
return (
|
||||||
|
<View style={styles.addnotecont}>
|
||||||
|
<View style={styles.tle}>
|
||||||
|
<TextInput
|
||||||
|
style={styles.title}
|
||||||
|
value={props.title}
|
||||||
|
maxLength={20}
|
||||||
|
editable={false}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={styles.typehere}>
|
||||||
|
<ScrollView style={styles.typeinput} nestedScrollEnabled={true}>
|
||||||
|
<Text style={styles.typeinput}>{props.content}</Text>
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
|
@ -8,6 +8,7 @@ import { RootState } from "../../Features/Redux/Store/Store";
|
||||||
import { NoteProps, RootDrawerParamList } from "../../Interfaces/Interfaces";
|
import { NoteProps, RootDrawerParamList } from "../../Interfaces/Interfaces";
|
||||||
import { useNavigation } from "@react-navigation/native";
|
import { useNavigation } from "@react-navigation/native";
|
||||||
import Note from "../Note/Note";
|
import Note from "../Note/Note";
|
||||||
|
import PublicNote from "../PublicNote/PublicNote";
|
||||||
|
|
||||||
export default function PublicNotes() {
|
export default function PublicNotes() {
|
||||||
const navigation = useNavigation<RootDrawerParamList>();
|
const navigation = useNavigation<RootDrawerParamList>();
|
||||||
|
@ -39,7 +40,7 @@ export default function PublicNotes() {
|
||||||
<ScrollView contentContainerStyle={{ justifyContent: "center" }}>
|
<ScrollView contentContainerStyle={{ justifyContent: "center" }}>
|
||||||
{notes.map((note: NoteProps, index: number) => {
|
{notes.map((note: NoteProps, index: number) => {
|
||||||
return (
|
return (
|
||||||
<Note
|
<PublicNote
|
||||||
id={note.id}
|
id={note.id}
|
||||||
key={index}
|
key={index}
|
||||||
title={note.title}
|
title={note.title}
|
||||||
|
|
|
@ -59,10 +59,12 @@ export interface ActivationParams {
|
||||||
export interface AddNoteParams {
|
export interface AddNoteParams {
|
||||||
title: string;
|
title: string;
|
||||||
content: string;
|
content: string;
|
||||||
|
public: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UpdateNoteParams {
|
export interface UpdateNoteParams {
|
||||||
id: number;
|
id: number;
|
||||||
title: string;
|
title: string;
|
||||||
content: string;
|
content: string;
|
||||||
|
public: boolean;
|
||||||
}
|
}
|
||||||
|
|
135
src/Routes/EditNote/EditNote.tsx
Normal file
135
src/Routes/EditNote/EditNote.tsx
Normal file
|
@ -0,0 +1,135 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { View, Text, TextInput, Switch } from "react-native";
|
||||||
|
import styles from "../../styles";
|
||||||
|
import Background from "../../Components/Background/Background";
|
||||||
|
import { SafeAreaView } from "react-native-safe-area-context";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { TouchableOpacity } from "react-native";
|
||||||
|
import { RootDrawerParamList } from "../../Interfaces/Interfaces";
|
||||||
|
import { useNavigation } from "@react-navigation/native";
|
||||||
|
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||||
|
import { AddNote, GetNote, UpdateNote } from "../../Components/Api/Api";
|
||||||
|
|
||||||
|
export default function EditNote({ navigation, route }: any) {
|
||||||
|
const { noteId } = route.params;
|
||||||
|
const [note, setNote] = useState({
|
||||||
|
title: "",
|
||||||
|
content: "",
|
||||||
|
public: false,
|
||||||
|
});
|
||||||
|
async function retrieve() {
|
||||||
|
let a = await GetNote(noteId);
|
||||||
|
setNote(a);
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
const { data, isLoading, error } = useQuery("note", retrieve, {
|
||||||
|
retry: 0,
|
||||||
|
});
|
||||||
|
useEffect(() => {
|
||||||
|
setNote(data);
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: UpdateNote,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries("notes");
|
||||||
|
queryClient.invalidateQueries("public_notes");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<Background>
|
||||||
|
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
|
||||||
|
Error retrieving specific note
|
||||||
|
</Text>
|
||||||
|
</Background>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<Background>
|
||||||
|
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
|
||||||
|
Loading note...
|
||||||
|
</Text>
|
||||||
|
</Background>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (data && note) {
|
||||||
|
return (
|
||||||
|
<Background>
|
||||||
|
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
|
||||||
|
Edit Note
|
||||||
|
</Text>
|
||||||
|
<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}
|
||||||
|
multiline={true}
|
||||||
|
onChangeText={async (text) => {
|
||||||
|
await setNote({ ...note, content: text });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
marginLeft: 16,
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Switch
|
||||||
|
onValueChange={() => setNote({ ...note, public: !note.public })}
|
||||||
|
value={note.public}
|
||||||
|
/>
|
||||||
|
<Text style={{ ...styles.text_white, ...{ fontSize: 16 } }}>
|
||||||
|
Public?
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.savebtn}
|
||||||
|
onPress={async () => {
|
||||||
|
try {
|
||||||
|
await mutation.mutate({
|
||||||
|
title: note.title,
|
||||||
|
content: note.content,
|
||||||
|
public: note.public,
|
||||||
|
id: noteId,
|
||||||
|
});
|
||||||
|
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>
|
||||||
|
</Background>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,10 +1,10 @@
|
||||||
import * as React from 'react';
|
import * as React from "react";
|
||||||
import {View, Text, TextInput} from 'react-native';
|
import { View, Text, TextInput, Switch } from "react-native";
|
||||||
import styles from '../../styles';
|
import styles from "../../styles";
|
||||||
import Background from '../../Components/Background/Background';
|
import Background from "../../Components/Background/Background";
|
||||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
import { SafeAreaView } from "react-native-safe-area-context";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import {TouchableOpacity,} from "react-native";
|
import { TouchableOpacity } from "react-native";
|
||||||
import { RootDrawerParamList } from "../../Interfaces/Interfaces";
|
import { RootDrawerParamList } from "../../Interfaces/Interfaces";
|
||||||
import { useNavigation } from "@react-navigation/native";
|
import { useNavigation } from "@react-navigation/native";
|
||||||
import { useMutation, useQueryClient } from "react-query";
|
import { useMutation, useQueryClient } from "react-query";
|
||||||
|
@ -14,10 +14,11 @@ export default function NewNote() {
|
||||||
const [note, setNote] = useState({
|
const [note, setNote] = useState({
|
||||||
title: "",
|
title: "",
|
||||||
content: "",
|
content: "",
|
||||||
|
public: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const navigation = useNavigation<RootDrawerParamList>();
|
const navigation = useNavigation<RootDrawerParamList>();
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: AddNote,
|
mutationFn: AddNote,
|
||||||
|
@ -28,54 +29,77 @@ export default function NewNote() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Background>
|
<Background>
|
||||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>New Note</Text>
|
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
|
||||||
<SafeAreaView>
|
New Note
|
||||||
<View style={styles.addnotecont}>
|
</Text>
|
||||||
<View style={styles.tle}>
|
<SafeAreaView>
|
||||||
<TextInput
|
<View style={styles.addnotecont}>
|
||||||
style={styles.title}
|
<View style={styles.tle}>
|
||||||
placeholder="Title"
|
<TextInput
|
||||||
placeholderTextColor="white"
|
style={styles.title}
|
||||||
value={note.title}
|
placeholder="Title"
|
||||||
onChangeText={(text) => {
|
placeholderTextColor="white"
|
||||||
setNote({ ...note, title: text });
|
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}
|
||||||
|
multiline={true}
|
||||||
|
onChangeText={async (text) => {
|
||||||
|
await setNote({ ...note, content: text });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
marginLeft: 16,
|
||||||
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
maxLength={20}
|
>
|
||||||
/>
|
<Switch
|
||||||
</View>
|
onValueChange={() => setNote({ ...note, public: !note.public })}
|
||||||
<View style={styles.typehere}>
|
value={note.public}
|
||||||
<TextInput
|
/>
|
||||||
style={styles.typeinput}
|
<Text style={{ ...styles.text_white, ...{ fontSize: 16 } }}>
|
||||||
placeholder="Type here...."
|
Public?
|
||||||
placeholderTextColor="white"
|
</Text>
|
||||||
value={note.content}
|
</View>
|
||||||
onChangeText={async (text) => {
|
<TouchableOpacity
|
||||||
await setNote({ ...note, content: text });
|
style={styles.savebtn}
|
||||||
|
onPress={async () => {
|
||||||
|
try {
|
||||||
|
await mutation.mutate({
|
||||||
|
title: note.title,
|
||||||
|
content: note.content,
|
||||||
|
public: note.public,
|
||||||
|
});
|
||||||
|
navigation.navigate("Home");
|
||||||
|
} catch (error) {}
|
||||||
|
console.log(note.content);
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
</View>
|
<Text style={styles.savenote}>SAVE</Text>
|
||||||
<TouchableOpacity style={styles.savebtn}
|
</TouchableOpacity>
|
||||||
onPress={async () => {
|
<TouchableOpacity
|
||||||
try {
|
style={styles.cancelbtn}
|
||||||
await mutation.mutate({
|
onPress={() => {
|
||||||
title: note.title,
|
navigation.navigate("Home");
|
||||||
content: note.content,
|
}}
|
||||||
});
|
>
|
||||||
navigation.navigate("Home");
|
<Text style={styles.cancel}>CANCEL</Text>
|
||||||
} catch (error) {}
|
</TouchableOpacity>
|
||||||
console.log(note.content)
|
</View>
|
||||||
}}>
|
|
||||||
|
|
||||||
<Text style={styles.savenote}>SAVE</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity style={styles.cancelbtn}
|
|
||||||
onPress={() => {
|
|
||||||
navigation.navigate("Home");
|
|
||||||
}}>
|
|
||||||
<Text style={styles.cancel}>CANCEL</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
</Background>
|
</Background>
|
||||||
);
|
);
|
||||||
|
|
|
@ -158,9 +158,10 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
typeinput: {
|
typeinput: {
|
||||||
color: "white",
|
color: "white",
|
||||||
flex: 1,
|
marginBottom: 16,
|
||||||
paddingBottom: 250,
|
|
||||||
marginLeft: 5,
|
marginLeft: 5,
|
||||||
|
minHeight: 128,
|
||||||
|
maxHeight: 768,
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
color: "white",
|
color: "white",
|
||||||
|
@ -179,7 +180,8 @@ const styles = StyleSheet.create({
|
||||||
addnotecont: {
|
addnotecont: {
|
||||||
marginTop: 30,
|
marginTop: 30,
|
||||||
marginLeft: 22,
|
marginLeft: 22,
|
||||||
height: 500,
|
paddingBottom: 30,
|
||||||
|
minHeight: 500,
|
||||||
width: 350,
|
width: 350,
|
||||||
borderRadius: 25,
|
borderRadius: 25,
|
||||||
backgroundColor: "black",
|
backgroundColor: "black",
|
||||||
|
|
Loading…
Reference in a new issue