Get distinct genres

Author: cbullinger

mflix/client/app/components/FilterBar/FilterBar.tsx

@@ -2,14 +2,7 @@
 
 import { useState, useCallback, useEffect } from 'react';
 import styles from './FilterBar.module.css';
-import type { MovieFilterParams } from '@/lib/api';
-
-const GENRES = [
-  'Action', 'Adventure', 'Animation', 'Biography', 'Comedy', 'Crime',
-  'Documentary', 'Drama', 'Family', 'Fantasy', 'Film-Noir', 'History',
-  'Horror', 'Music', 'Musical', 'Mystery', 'Romance', 'Sci-Fi',
-  'Short', 'Sport', 'Thriller', 'War', 'Western'
-];
+import { fetchGenres, type MovieFilterParams } from '@/lib/api';
 
 const SORT_OPTIONS = [
   { value: 'title', label: 'Title' },
@@ -29,6 +22,19 @@ export default function FilterBar({
   initialFilters = {}
 }: FilterBarProps) {
   const [filters, setFilters] = useState<MovieFilterParams>(initialFilters);
+  const [genres, setGenres] = useState<string[]>([]);
+  const [isLoadingGenres, setIsLoadingGenres] = useState(true);
+
+  // Fetch genres from the API on mount
+  useEffect(() => {
+    async function loadGenres() {
+      setIsLoadingGenres(true);
+      const fetchedGenres = await fetchGenres();
+      setGenres(fetchedGenres);
+      setIsLoadingGenres(false);
+    }
+    loadGenres();
+  }, []);
 
   // Sync internal state when initialFilters changes (e.g. from URL navigation)
   useEffect(() => {
@@ -97,10 +103,10 @@ export default function FilterBar({
             className={styles.filterSelect}
             value={filters.genre || ''}
             onChange={(e) => handleFilterChange('genre', e.target.value)}
-            disabled={isLoading}
+            disabled={isLoading || isLoadingGenres}
           >
-            <option value="">All Genres</option>
-            {GENRES.map(genre => (
+            <option value="">{isLoadingGenres ? 'Loading...' : 'All Genres'}</option>
+            {genres.map(genre => (
               <option key={genre} value={genre}>{genre}</option>
             ))}
           </select>

mflix/client/app/lib/api.ts

@@ -20,8 +20,8 @@ export interface MovieFilterParams {
 }
 
 /**
- * Fetches movies from the backend API with pagination and filtering support.
- * Demonstrates using MongoDB find() with query filters.
+ * Fetches movies from the backend API with pagination and filtering support
+ * using MongoDB find() with query filters.
  */
 export async function fetchMovies(
   limit: number = 20,
@@ -99,6 +99,34 @@ export async function fetchMovies(
   }
 }
 
+/**
+ * Fetches all unique genres from the backend API
+ * using MongoDB's distinct() operation.
+ */
+export async function fetchGenres(): Promise<string[]> {
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/movies/genres`, {
+      next: { revalidate: 3600 }, // Cache genres for 1 hour since they rarely change
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch genres: ${response.status}`);
+    }
+
+    const result: { success: boolean; data: string[]; message: string } = await response.json();
+
+    if (!result.success) {
+      throw new Error('API returned error response');
+    }
+
+    return result.data;
+  } catch (error) {
+    console.error('Error fetching genres:', error);
+    // Return empty array on error - FilterBar will handle gracefully
+    return [];
+  }
+}
+
 /**
  * Fetch a single movie by ID
  */

mflix/server/js-express/src/controllers/movieController.ts

@@ -134,6 +134,34 @@ export async function getAllMovies(req: Request, res: Response): Promise<void> {
   res.json(createSuccessResponse(movies, `Found ${movies.length} movies`));
 }
 
+/**
+ * GET /api/movies/genres
+ *
+ * Retrieves all unique genres from the movies collection.
+ * Demonstrates the distinct() operation.
+ *
+ * Returns an array of unique genre strings, sorted alphabetically.
+ */
+export async function getDistinctGenres(
+  req: Request,
+  res: Response
+): Promise<void> {
+  const moviesCollection = getCollection("movies");
+
+  // Use distinct() to get all unique values from the genres array field
+  // MongoDB automatically flattens array fields when using distinct()
+  const genres = await moviesCollection.distinct("genres");
+
+  // Filter out null/empty values and sort alphabetically
+  const validGenres = genres
+    .filter((genre): genre is string => typeof genre === "string" && genre.length > 0)
+    .sort((a, b) => a.localeCompare(b));
+
+  res.json(
+    createSuccessResponse(validGenres, `Found ${validGenres.length} distinct genres`)
+  );
+}
+
 /**
  * GET /api/movies/:id
  *

mflix/server/js-express/src/routes/movies.ts

@@ -118,6 +118,31 @@ const router = express.Router();
  */
 router.get("/", asyncHandler(movieController.getAllMovies));
 
+/**
+ * @swagger
+ * /api/movies/genres:
+ *   get:
+ *     summary: Get all distinct genres
+ *     description: Retrieves all unique genres from the movies collection. Demonstrates the MongoDB distinct() operation.
+ *     tags: [Movies]
+ *     responses:
+ *       200:
+ *         description: List of distinct genres
+ *         content:
+ *           application/json:
+ *             schema:
+ *               allOf:
+ *                 - $ref: '#/components/schemas/SuccessResponse'
+ *                 - type: object
+ *                   properties:
+ *                     data:
+ *                       type: array
+ *                       items:
+ *                         type: string
+ *                       example: ["Action", "Adventure", "Animation", "Comedy", "Drama"]
+ */
+router.get("/genres", asyncHandler(movieController.getDistinctGenres));
+
 /**
  * @swagger
  * /api/movies/search: