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 { 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 {
 | 
			
		||||
  /**
 | 
			
		||||
   * State hook for managing the current input text.
 | 
			
		||||
   * @type {[string, React.Dispatch<React.SetStateAction<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>("");
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <View style={style.newPostContainer}>
 | 
			
		||||
      {/* Input field for the new post */}
 | 
			
		||||
      <TextInput
 | 
			
		||||
        style={style.newPostInput}
 | 
			
		||||
        placeholder="New Post"
 | 
			
		||||
| 
						 | 
				
			
			@ -18,28 +36,50 @@ export function NewPostContainer({ navigation }): JSX.Element {
 | 
			
		|||
        }}
 | 
			
		||||
        value={currentInput}
 | 
			
		||||
      />
 | 
			
		||||
 | 
			
		||||
      {/* Button to submit the new post */}
 | 
			
		||||
      <Button
 | 
			
		||||
        title="Post"
 | 
			
		||||
        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> {
 | 
			
		||||
            // Submit login to obtain user token
 | 
			
		||||
            const user = (await submitLogin("demouser", "demopw")) ?? {
 | 
			
		||||
              token: "",
 | 
			
		||||
            };
 | 
			
		||||
            const p: NewPost = {
 | 
			
		||||
 | 
			
		||||
            // Create new post object
 | 
			
		||||
            const newPost: NewPost = {
 | 
			
		||||
              content: currentInput,
 | 
			
		||||
              token: user.token,
 | 
			
		||||
            };
 | 
			
		||||
            await createPost(p);
 | 
			
		||||
 | 
			
		||||
            // Call API to create the post
 | 
			
		||||
            await createPost(newPost);
 | 
			
		||||
 | 
			
		||||
            // Reset the input field
 | 
			
		||||
            setCurrentInput("");
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          // Check if the input is not empty before submitting
 | 
			
		||||
          if (currentInput.length > 0) {
 | 
			
		||||
            submit();
 | 
			
		||||
            // Navigate to the Home screen after successful post submission
 | 
			
		||||
            navigation.navigate("Home");
 | 
			
		||||
          } else {
 | 
			
		||||
            // Set an error message if the input is empty
 | 
			
		||||
            setCurrentInputError("Post must not be empty!");
 | 
			
		||||
          }
 | 
			
		||||
        }}
 | 
			
		||||
      />
 | 
			
		||||
 | 
			
		||||
      {/* Display error message if there's any */}
 | 
			
		||||
      <Text style={style.errorText}>{currentInputError}</Text>
 | 
			
		||||
    </View>
 | 
			
		||||
  );
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue