Merge branch 'feature/NewNote_api' into feature/initial_frontend

This commit is contained in:
keannu125 2023-04-14 21:24:56 +08:00
commit eafbfaaf43
4 changed files with 102 additions and 72 deletions

32
App.tsx
View file

@ -7,7 +7,7 @@ import DrawerScreenSettings from "./src/Components/Drawer/DrawerScreenSettings/D
import Home from "./src/Routes/Home/Home"; import Home from "./src/Routes/Home/Home";
import UserInfo from "./src/Routes/UserInfo/UserInfo"; import UserInfo from "./src/Routes/UserInfo/UserInfo";
import AddNote from "./src/Routes/AddNote/AddNote"; import NewNote from "./src/Routes/NewNote/NewNote";
import Login from "./src/Routes/Login/Login"; import Login from "./src/Routes/Login/Login";
import Register from "./src/Routes/Register/Register"; import Register from "./src/Routes/Register/Register";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
@ -16,25 +16,27 @@ import { QueryClient, QueryClientProvider } from "react-query";
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();
const queryClient = new QueryClient();
export default function App() { export default function App() {
return ( return (
<Provider store={Store}> <Provider store={Store}>
<NavigationContainer> <QueryClientProvider client={queryClient}>
<Drawer.Navigator <NavigationContainer>
initialRouteName="Home" <Drawer.Navigator
drawerContent={CustomDrawerContent} initialRouteName="Home"
screenOptions={DrawerScreenSettings} drawerContent={CustomDrawerContent}
> screenOptions={DrawerScreenSettings}
<Drawer.Screen name="Home" component={Home} /> >
<Drawer.Screen name="Add Note" component={AddNote} /> <Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="User Info" component={UserInfo} /> <Drawer.Screen name="New Note" component={NewNote} />
<Drawer.Screen name="Login" component={Login} /> <Drawer.Screen name="User Info" component={UserInfo} />
<Drawer.Screen name="Register" component={Register} /> <Drawer.Screen name="Login" component={Login} />
<Drawer.Screen name="Register" component={Register} />
</Drawer.Navigator> </Drawer.Navigator>
</NavigationContainer> </NavigationContainer>
</QueryClientProvider>
</Provider> </Provider>
); );
} }

View file

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

View file

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

View file

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