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
	
	 dDogge
						dDogge