Added comments to NewPostContainer
This commit is contained in:
parent
39833cabf2
commit
7b01c9e69a
1 changed files with 42 additions and 2 deletions
|
@ -3,12 +3,30 @@ import { View, Text, TextInput, Button } from "react-native";
|
||||||
import { style } from "../util/style";
|
import { style } from "../util/style";
|
||||||
import { createPost, NewPost, submitLogin } from "../util/api";
|
import { createPost, NewPost, submitLogin } from "../util/api";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* NewPostContainer component for handling new post creation.
|
||||||
|
*
|
||||||
|
* @component
|
||||||
|
* @param {object} props - React component props.
|
||||||
|
* @param {object} props.navigation - Navigation object for navigating between screens.
|
||||||
|
* @returns {JSX.Element} - Rendered NewPostContainer component.
|
||||||
|
*/
|
||||||
export function NewPostContainer({ navigation }): JSX.Element {
|
export function NewPostContainer({ navigation }): JSX.Element {
|
||||||
|
/**
|
||||||
|
* State hook for managing the current input text.
|
||||||
|
* @type {[string, React.Dispatch<React.SetStateAction<string>>]}
|
||||||
|
*/
|
||||||
const [currentInput, setCurrentInput] = React.useState<string>("");
|
const [currentInput, setCurrentInput] = React.useState<string>("");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* State hook for managing the current input error message.
|
||||||
|
* @type {[string, React.Dispatch<React.SetStateAction<string>>]}
|
||||||
|
*/
|
||||||
const [currentInputError, setCurrentInputError] = React.useState<string>("");
|
const [currentInputError, setCurrentInputError] = React.useState<string>("");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={style.newPostContainer}>
|
<View style={style.newPostContainer}>
|
||||||
|
{/* Input field for the new post */}
|
||||||
<TextInput
|
<TextInput
|
||||||
style={style.newPostInput}
|
style={style.newPostInput}
|
||||||
placeholder="New Post"
|
placeholder="New Post"
|
||||||
|
@ -18,28 +36,50 @@ export function NewPostContainer({ navigation }): JSX.Element {
|
||||||
}}
|
}}
|
||||||
value={currentInput}
|
value={currentInput}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Button to submit the new post */}
|
||||||
<Button
|
<Button
|
||||||
title="Post"
|
title="Post"
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
|
/**
|
||||||
|
* Asynchronously submits the new post.
|
||||||
|
*
|
||||||
|
* @async
|
||||||
|
* @function
|
||||||
|
* @returns {Promise<void>} - A Promise that resolves when the post is successfully submitted.
|
||||||
|
*/
|
||||||
async function submit(): Promise<void> {
|
async function submit(): Promise<void> {
|
||||||
|
// Submit login to obtain user token
|
||||||
const user = (await submitLogin("demouser", "demopw")) ?? {
|
const user = (await submitLogin("demouser", "demopw")) ?? {
|
||||||
token: "",
|
token: "",
|
||||||
};
|
};
|
||||||
const p: NewPost = {
|
|
||||||
|
// Create new post object
|
||||||
|
const newPost: NewPost = {
|
||||||
content: currentInput,
|
content: currentInput,
|
||||||
token: user.token,
|
token: user.token,
|
||||||
};
|
};
|
||||||
await createPost(p);
|
|
||||||
|
// Call API to create the post
|
||||||
|
await createPost(newPost);
|
||||||
|
|
||||||
|
// Reset the input field
|
||||||
setCurrentInput("");
|
setCurrentInput("");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check if the input is not empty before submitting
|
||||||
if (currentInput.length > 0) {
|
if (currentInput.length > 0) {
|
||||||
submit();
|
submit();
|
||||||
|
// Navigate to the Home screen after successful post submission
|
||||||
navigation.navigate("Home");
|
navigation.navigate("Home");
|
||||||
} else {
|
} else {
|
||||||
|
// Set an error message if the input is empty
|
||||||
setCurrentInputError("Post must not be empty!");
|
setCurrentInputError("Post must not be empty!");
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* Display error message if there's any */}
|
||||||
<Text style={style.errorText}>{currentInputError}</Text>
|
<Text style={style.errorText}>{currentInputError}</Text>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue