Cory feedback

Author: jordan-smith721

client/app/aggregations/aggregations.module.css

@@ -3,7 +3,7 @@
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem;
-  font-family: var(--font-system);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
 }
 
 .title {
@@ -78,12 +78,10 @@
 
 .year {
   font-weight: 600;
-  color: #3498db;
 }
 
 .rank {
   font-weight: 700;
-  color: #e74c3c;
 }
 
 .directorName {

client/app/aggregations/page.tsx

@@ -1,57 +1,31 @@
 import React from 'react';
 import { fetchMoviesWithComments, fetchMoviesByYear, fetchDirectorStats } from '../lib/api';
+import { MovieWithComments, YearlyStats, DirectorStats } from '../types/aggregations';
 import styles from './aggregations.module.css';
 
-// Type definitions for better type safety
-interface MovieWithComments {
-  _id: string;
-  title: string;
-  year: number;
-  genres: string[];
-  imdbRating: number;
-  totalComments: number;
-  recentComments: Array<{
-    userName: string;
-    userEmail: string;
-    text: string;
-    date: string;
-  }>;
-}
-
-interface YearlyStats {
-  year: number;
-  movieCount: number;
-  averageRating: number;
-  highestRating: number;
-  lowestRating: number;
-  totalVotes: number;
-}
-
-interface DirectorStats {
-  director: string;
-  movieCount: number;
-  averageRating: number;
-}
-
 export default async function AggregationsPage() {
+  const MOVIES_WITH_COMMENTS_LIMIT = 5;
+  const DIRECTOR_STATS_LIMIT = 15;
 
   // Fetch all aggregation data with error handling
   const [commentsResult, yearResult, directorsResult] = await Promise.allSettled([
-    fetchMoviesWithComments(5),
+    fetchMoviesWithComments(MOVIES_WITH_COMMENTS_LIMIT),
     fetchMoviesByYear(),
-    fetchDirectorStats(15)
+    fetchDirectorStats(DIRECTOR_STATS_LIMIT)
   ]);
 
   // Process results with fallbacks
   const commentsData = commentsResult.status === 'fulfilled' ? commentsResult.value : { success: false, error: 'Failed to fetch comments data' };
   const yearData = yearResult.status === 'fulfilled' ? yearResult.value : { success: false, error: 'Failed to fetch year data' };
   const directorsData = directorsResult.status === 'fulfilled' ? directorsResult.value : { success: false, error: 'Failed to fetch directors data' };
 
-  console.log('Aggregations SSR: Data fetch completed', {
-    comments: commentsData.success,
-    year: yearData.success,
-    directors: directorsData.success
-  });
+  if (process.env.NODE_ENV === 'development') {
+    console.log('Aggregations SSR: Data fetch completed', {
+      comments: commentsData.success,
+      year: yearData.success,
+      directors: directorsData.success
+    });
+  }
 
   return (
     <div className={styles.container}>
@@ -85,7 +59,7 @@ export default async function AggregationsPage() {
                     <td>
                       <div className={styles.commentsContainer}>
                         {movie.recentComments?.slice(0, 2).map((comment, index) => (
-                          <div key={index} className={styles.comment}>
+                          <div key={`${movie._id}-${comment.date}-${index}`} className={styles.comment}>
                             <div className={styles.commentText}>
                               &ldquo;{(comment.text || 'No text').slice(0, 80)}{comment.text?.length > 80 ? '...' : ''}&rdquo;
                             </div>

client/app/types/aggregations.ts

@@ -0,0 +1,31 @@
+// Type definitions for aggregations page
+
+export interface MovieWithComments {
+  _id: string;
+  title: string;
+  year: number;
+  genres: string[];
+  imdbRating: number;
+  totalComments: number;
+  recentComments: Array<{
+    userName: string;
+    userEmail: string;
+    text: string;
+    date: string;
+  }>;
+}
+
+export interface YearlyStats {
+  year: number;
+  movieCount: number;
+  averageRating: number;
+  highestRating: number;
+  lowestRating: number;
+  totalVotes: number;
+}
+
+export interface DirectorStats {
+  director: string;
+  movieCount: number;
+  averageRating: number;
+}