Home Page

This is the main page users interact with on the platform, featuring stories, posts, and communities.

Documentation for Home Component

Overview

The Home component serves as the central hub for user interactions on the platform, showcasing user-generated content such as stories and posts, and allowing users to engage with various communities.

Implementation Details

• State Management:

  • isPc: Determines if the user is on a PC or a smaller device.
  • togglePostForm: Manages the visibility of the post creation form.
  • viewCommunities: Controls the display of the communities slider.
  • addStory: Toggles the display of the story upload form.
  • showDropdown: Manages the visibility of the post filter dropdown.
  • selected & selectedFilter: Tracks the selected filter option for posts.
  • stories: An array storing story data for display in the StoriesSlider.
  • socialPosts: An array containing the posts displayed in the Posts component.

• Responsive Layout:

  • The component adjusts its layout depending on the user’s screen size (isPc), providing different layouts for larger and smaller screens.

• Component Structure:

  • Navbar: Wraps the entire page for consistent navigation.
  • LeftSection, MiddleSection, RightSection: These sections organize the content for larger screens.
  • PostFilter: A dropdown for filtering the displayed posts.
  • CreatePost: A button to open the post creation form.
  • StoriesSlider: Displays user stories at the top of the page.
  • CommunitiesSlider: Allows users to explore different communities (optional view).
  • Posts: Displays a list of social posts.
  • PostForm: A modal form for creating new posts.
  • AddStory: A modal form for adding new stories.

Code Block

import React, { useState, useEffect } from 'react';

export default function Home() {
    const [isPc, setIsPc] = useState<boolean | null>(null);
    const [togglePostForm, setTogglePostForm] = useState<boolean>(false);
    const [viewCommunities, setViewCommunities] = useState<boolean>(false);
    const [addStory, setAddStory] = useState<boolean>(false);
    const [showDropdown, setShowDropdown] = useState<boolean>(false);
    const [selected, setSelected] = useState<string>('all');
    const [selectedFilter, setSelectedFilter] = useState<string>('all');
    const [stories, setStories] = useState<Stories[]>([]);
    const [socialPosts, setSocialPosts] = useState<SocialPosts[]>([]);

    useEffect(() => {
        const handleResize = () => {
            setIsPc(window.innerWidth >= 1024);
        };

        handleResize();

        const debounceTimeout = setTimeout(() => {
            window.addEventListener('resize', handleResize);
        }, 500);

        return () => {
            clearTimeout(debounceTimeout);
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    if (isPc === null) {
        return null;
    }

    return (
        <Navbar>
            {/* Content components based on state */}
        </Navbar>
    );
}