Create Post Page

The CreatePostPage provides a streamlined interface for users to share standard social updates, photos, or videos with their community. It acts as the social counterpart to the marketplace, keeping users engaged with non-transactional content.

The page is constrained to a 640px maximum width to maintain a focused, distraction-free authoring environment.

Component Architecture

The interface is built to handle local media previews smoothly before committing any data to the server.

1. Media Handling & Previews

  • Constraints: Users can upload a maximum of 10 photos OR 1 video (capped at 100MB). The component actively prevents mixing media types.
  • Memory Management: When files are selected, the app generates local URL.createObjectURL() strings for instantaneous preview rendering. A useEffect cleanup function ensures URL.revokeObjectURL() is called when items are removed or the component unmounts, strictly preventing browser memory leaks.
  • Hidden Inputs: Uses hidden native <input type="file" /> elements triggered programmatically by styled UI buttons to maintain a clean aesthetic.

2. Upload UI & Error States

  • Dynamic Overlay: Utilizes a PendingSkeleton component to block the UI and display a real-time progress bar during the upload phase.
  • Partial Failure Banner: If the text post succeeds but the network drops during media upload, a specific error banner allows the user to retry only the failed media uploads without creating a duplicate text post.

State Management & Sequential Upload Logic

Content creation utilizes a custom @tanstack/react-query mutation hook (useCreateProductPost) designed for robust, sequential file handling.

  • Caching Strategy: The hook maintains a local createdPostCache state.
  • Step 1 (Text Payload): The application first sends the text caption with is_product: false. The backend responds with the newly created Post ID.
  • Step 2 (Media Loop): If media exists, the hook iterates through the mediaFiles array. It uses FormData (multipart/form-data) to upload each file sequentially, attaching the cached Post ID to each request.
  • Global Progress Tracking: The hook intercepts Axios onUploadProgress events, mathematically combining the progress of individual files into a single, global percentage (0-100%) for the UI loader.

API Endpoints & Data Structures

The page interacts with three endpoints via the globally configured Axios authApi instance.

1. Fetch User Stats (Header UI)

Retrieves the user's basic profile details to display their avatar and name in the composer.

  • Endpoint: GET /users/stat/

2. Create Post Payload

Creates the base post object in the database.

  • Endpoint: POST /posts/create_post/
  • Payload (PostProductRequestType context): 
    {
  "is_product": false,
  "caption": "string | null"
}
  • Authorization: Required (Bearer Token)

3. Upload Media (Sequential)

Attaches a file to the previously created post. Called multiple times if multiple photos are selected.

  • Endpoint: POST /posts/create_post_media/
  • Headers: Content-Type: multipart/form-data
  • FormData Payload:
  • post: "post_id_string"
  • file: [Binary File Data]
  • Authorization: Required (Bearer Token)