Added comments to PostsContainer

src/components/PostsContainer.tsx

@@ -8,6 +8,14 @@ import { VirtualizedList } from "react-native";
 
 const WINDOW_SIZE = 20;
 
+/**
+ * PostsContainer component for displaying a list of posts.
+ *
+ * @component
+ * @param {object} props - React component props.
+ * @param {object} props.navigation - Navigation object for navigating between screens.
+ * @returns {JSX.Element} - Rendered PostsContainer component.
+ */
 export function PostsContainer({ navigation }): JSX.Element {
   const [postData, setPostData] = React.useState<Post[]>([]);
   const [offset, setOffset] = React.useState<number>(0);
@@ -18,6 +26,11 @@ export function PostsContainer({ navigation }): JSX.Element {
     fetchMorePosts();
   };
 
+  /**
+   * Handles the pull-to-refresh action.
+   * @function
+   * @returns {void}
+   */
   function onRefresh(): void {
     refreshPosts();
   }
@@ -26,22 +39,35 @@ export function PostsContainer({ navigation }): JSX.Element {
     refreshPosts();
   }, []);
 
-  // Full refresh
+  /**
+   * Full refresh of posts.
+   * @function
+   * @returns {void}
+   */
   function refreshPosts(): void {
     setRefreshing(true);
     setPostData([]);
     setOffset(WINDOW_SIZE);
+
+    // Fetches posts from the API and updates the state.
     async function fetchPosts(): Promise<void> {
       setPostData(await getPostsInterval(0, WINDOW_SIZE));
     }
+
     fetchPosts();
     setRefreshing(false);
   }
 
+  /**
+   * Fetches more posts from the API and updates the state.
+   * @function
+   * @returns {void}
+   */
   function fetchMorePosts(): void {
     async function fetchPosts(): Promise<void> {
       setPostData([...postData, ...(await getPostsInterval(offset, WINDOW_SIZE))]);
     }
+
     fetchPosts();
   }
 
@@ -52,8 +78,10 @@ export function PostsContainer({ navigation }): JSX.Element {
 
   return (
     <>
+      {/* Navigation button to create a new post */}
       <NavButton onPress={() => navigation.navigate("New")} text="New Post" />
       <SafeAreaView style={style.postsContainer}>
+        {/* VirtualizedList to render the list of posts */}
         <VirtualizedList
           data={postData}
           initialNumToRender={4}
@@ -76,6 +104,15 @@ export function PostsContainer({ navigation }): JSX.Element {
   );
 }
 
+/**
+ * NavButton component for rendering a navigation button.
+ *
+ * @component
+ * @param {object} props - React component props.
+ * @param {Function} props.onPress - Function to be called on button press.
+ * @param {string} props.text - Text to be displayed on the button.
+ * @returns {JSX.Element} - Rendered NavButton component.
+ */
 function NavButton({
   onPress,
   text,
@@ -84,4 +121,4 @@ function NavButton({
   text: string;
 }): JSX.Element {
   return <Button title={text} onPress={onPress} />;
-}
+}