Add typing to remove any. Update error handling. Update styling.

Author: peeweetje

netflix-create-react-vite-app/src/components/details/MediaDetail.tsx

@@ -19,12 +19,30 @@ interface MediaDetailProps {
   type: 'movie' | 'tv';
 }
 
-export const MediaDetail: React.FC<MediaDetailProps> = ({ type }) => {
+interface MediaData {
+  id: number;
+  title?: string;
+  name?: string;
+  poster_path?: string;
+  tagline?: string;
+ 
+}
+
+interface CastMember {
+  cast_id?: number;
+  credit_id: string;
+  name: string;
+  profile_path?: string;
+  character?: string;
+}
+
+
+export const MediaDetail = ({ type }: MediaDetailProps) => {
   const { id } = useParams<{ id: string }>();
-  const [media, setMedia] = useState<any>(null);
+  const [media, setMedia] = useState<MediaData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [cast, setCast] = useState<any[]>([]);
+  const [cast, setCast] = useState<CastMember[]>([]);
 
   useEffect(() => {
     const fetchMedia = async () => {
@@ -55,7 +73,9 @@ export const MediaDetail: React.FC<MediaDetailProps> = ({ type }) => {
         const data = await response.json();
         setCast(data.cast || []);
       } catch (err) {
-        // Optionally set error for cast
+         console.error('Failed to fetch cast data:', err);
+        setError('Failed to fetch cast data');
+        setLoading(false);
       }
     };
     fetchCast();

netflix-create-react-vite-app/src/components/details/details-styles.tsx

@@ -75,7 +75,6 @@ export const ImageColumn = styled.div`
 
 export const Tagline = styled.p`
   width: 300px; 
-  flex-wrap: wrap;
   margin-top: ${({ theme }) => theme.space[3]};
   text-align: center;
   word-break: break-word;
@@ -105,7 +104,6 @@ export const RightColumn = styled.div`
 
 export const Title = styled.h2`
   width: 300px;
-  flex-wrap: wrap;
   align-items: center;
   word-break: break-word;
   text-align: center;