Added public toggle to add note and made it consistent with edit note

This commit is contained in:
keannu125 2023-04-16 19:48:26 +08:00
parent cecc63eb7e
commit ed9715c63f
3 changed files with 79 additions and 54 deletions

View file

@ -59,6 +59,7 @@ export interface ActivationParams {
export interface AddNoteParams {
title: string;
content: string;
public: boolean;
}
export interface UpdateNoteParams {

View file

@ -15,7 +15,7 @@ export default function EditNote({ navigation, route }: any) {
const [note, setNote] = useState({
title: "",
content: "",
public: true,
public: false,
});
async function retrieve() {
let a = await GetNote(noteId);

View file

@ -1,10 +1,10 @@
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 * 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 { useState } from "react";
import {TouchableOpacity,} from "react-native";
import { TouchableOpacity } from "react-native";
import { RootDrawerParamList } from "../../Interfaces/Interfaces";
import { useNavigation } from "@react-navigation/native";
import { useMutation, useQueryClient } from "react-query";
@ -14,6 +14,7 @@ export default function NewNote() {
const [note, setNote] = useState({
title: "",
content: "",
public: false,
});
const navigation = useNavigation<RootDrawerParamList>();
@ -28,54 +29,77 @@ export default function NewNote() {
return (
<Background>
<Text style={{...styles.text_white, ...{fontSize: 32}}}>New Note</Text>
<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 });
<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",
}}
maxLength={20}
/>
>
<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,
});
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>
<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>
);