Media Slice Overview

The media slice (src/redux/features/media-manager/slice.ts) manages all media-related state including file collections, upload tracking, sorting preferences, and display modes. It provides centralized state management for the media library functionality throughout the application.

Media Actions & Reducers

setMedia - Replace entire media collection

• Purpose: Complete replacement of the media array with new file data`
• How it works: Overwrites the current media state with the provided file array
• Use cases: Initial media loading, refresh operations, filtering results
• State impact: Completely replaces state.media array

setSortBy - Apply sorting to media collection

• Purpose: Sort media files by specified criteria and update sort preference
• How it works: Updates sort preference and immediately applies sorting logic to media array
• Sorting options:
  • "a-z": Alphabetical ascending using localeCompare for proper string sorting
  • "z-a": Alphabetical descending using reverse localeCompare
• State impact: Modifies both state.sortby preference and reorders state.media array
• Performance: In-place sorting using JavaScript’s native sort with locale-aware comparison

excludeMedia - Remove specific file from collection

• Purpose: Remove a file from the media collection by its path identifier
• How it works: Filters out the file matching the provided path from the media array
• Use cases: File deletion, removal from view, cleanup operations
• State impact: Reduces state.media array by removing matching file entry
• Identification: Uses file path as unique identifier for removal

addNewMedia - Prepend new files to collection

• Purpose: Add newly uploaded or discovered files to the beginning of the media collection
• How it works: Spreads new files first, then existing media, ensuring new files appear at the top
• Use cases: File upload completion, new file discovery, optimistic updates
• State impact: Extends state.media array with new files at the beginning
• Ordering: New files appear first, maintaining chronological upload order

setView - Toggle display mode

• Purpose: Switch between grid and list view modes for media display
• How it works: Updates the view preference state with the specified display mode
• View modes:
  • "grid": Grid layout for visual browsing with thumbnails
  • "list": List layout for detailed file information display
• State impact: Updates state.view preference only
• Persistence: View preference maintained across navigation and sessions

Media State Access Patterns

selectMediaInfo - Complete media state selector

• Purpose: Provides access to the entire media state object
• Returns: Complete MediaState interface with all properties
• Use cases: Components needing multiple media state properties
• Performance: Single selector for efficient state access

Usage Patterns Throughout Application

File Uploads

const handleFileUpload = (file: File) => {
  dispatch(setUploading(true));
  uploadFile(file).then(() => {
    dispatch(addNewMedia(file));
    dispatch(setUploading(false));
  });
};

File Deletion

const handleFileDelete = (filePath: string) => {
  deleteFile(filePath).then(() => {
    dispatch(excludeMedia(filePath));
  });
};

Sorting and Filtering

const handleSortChange = (sortBy: SortBy) => {
  dispatch(setSortBy(sortBy));
};