Merge pull request #21 from lemeow125/feature/edit_note

Feature/edit note
This commit is contained in:
lemeow125 2023-04-16 19:52:25 +08:00 committed by GitHub
commit 3ce0a4b0e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 306 additions and 79 deletions

42
App.tsx
View file

@ -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>
); );
} }

View file

@ -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>
); );
} }

View 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>
);
}

View file

@ -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}

View file

@ -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;
} }

View 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>
);
}
}

View file

@ -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>
); );

View file

@ -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",