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…
	
	Add table
		Add a link
		
	
		Reference in a new issue