Add the ability to display multiple medias on the same day by looping over the filtered medias for each service type

Fixes #5

components/calendar/CalendarComponent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-children-prop */
 import { Indicator, Popover, Box, Center, ScrollArea, Divider } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
@@ -29,7 +30,7 @@ export default function CalendarComponent(props: any) {
     }
     if (radarrService) {
       fetch(
-        `${radarrService?.url}api/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
+        `${radarrService?.url}api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
       ).then((response) => {
         response.json().then((data) => setRadarrMedias(data));
       });
@@ -39,7 +40,6 @@ export default function CalendarComponent(props: any) {
   if (sonarrMedias === undefined && radarrMedias === undefined) {
     return <Calendar />;
   }
-
   return (
     <Calendar
       onChange={(day: any) => {}}
@@ -70,7 +70,7 @@ function DayComponent(props: any) {
     return date.getDate() === day && date.getMonth() === renderdate.getMonth();
   });
   const radarrFiltered = radarrmedias.filter((media: any) => {
-    const date = new Date(media.airDate);
+    const date = new Date(media.inCinemas);
     // Return true if the date is renerdate without counting hours and minutes
     return date.getDate() === day && date.getMonth() === renderdate.getMonth();
   });
@@ -89,7 +89,13 @@ function DayComponent(props: any) {
     >
       <Center>
         {/* TODO: #6 Make the color of the indicator dependant on the type of medias avilable */}
-        <Indicator size={10} color="red">
+        <>
+          {radarrFiltered.length > 0 && (
+            <Indicator size={8} offset={10} position="bottom-center" color="yellow" children={null} />
+          )}
+          {sonarrFiltered.length > 0 && (
+            <Indicator size={8} offset={-12} position="top-end" color="blue" children={null} />
+          )}
           <Popover
             position="left"
             width={700}
@@ -99,11 +105,11 @@ function DayComponent(props: any) {
           >
             <ScrollArea style={{ height: 400 }}>
               {sonarrFiltered.length > 0 && <SonarrMediaDisplay media={sonarrFiltered[0]} />}
-              <Divider variant="dashed" my="xl" />
+              {(radarrFiltered.length > 0 && sonarrFiltered.length > 0) && <Divider variant="dashed" my="xl" />}
               {radarrFiltered.length > 0 && <RadarrMediaDisplay media={radarrFiltered[0]} />}
             </ScrollArea>
           </Popover>
-        </Indicator>
+        </>
       </Center>
     </Box>
   );

components/calendar/MediaDisplay.tsx

@@ -13,14 +13,14 @@ export interface IMedia {
 export function RadarrMediaDisplay(props: any) {
   const { media }: { media: any } = props;
   // Find a poster CoverType
-  const poster = media.series.images.find((image: any) => image.coverType === 'poster');
+  const poster = media.images.find((image: any) => image.coverType === 'poster');
   // Return a movie poster containting the title and the description
   return (
     <Group noWrap align="self-start">
       <Image
         fit="cover"
         src={poster.url}
-        alt={media.series.title}
+        alt={media.title}
         style={{
           maxWidth: 300,
         }}
@@ -33,26 +33,18 @@ export function RadarrMediaDisplay(props: any) {
       >
         <Group direction="column">
           <Group>
-            <Title order={3}>{media.series.title}</Title>
+            <Title order={3}>{media.title}</Title>
-            <Anchor href={`https://www.imdb.com/title/${media.series.imdbId}`} target="_blank">
+            <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
               <ActionIcon>
                 <Link />
               </ActionIcon>
             </Anchor>
           </Group>
-          <Text
+          <Text>{media.overview}</Text>
-            style={{
-              textAlign: 'center',
-              color: '#a0aec0',
-            }}
-          >
-            Season {media.seasonNumber} episode {media.episodeNumber}
-          </Text>
-          <Text>{media.series.overview}</Text>
         </Group>
         {/*Add the genres at the bottom of the poster*/}
         <Group>
-          {media.series.genres.map((genre: string, i: number) => (
+          {media.genres.map((genre: string, i: number) => (
             <Badge key={i}>{genre}</Badge>
           ))}
         </Group>
@@ -69,12 +61,11 @@ export function SonarrMediaDisplay(props: any) {
   return (
     <Group noWrap align="self-start">
       <Image
-        fit="cover"
         src={poster.url}
+        fit="cover"
+        width={300}
+        height={400}
         alt={media.series.title}
-        style={{
-          maxWidth: 300,
-        }}
       />
       <Stack
         justify="space-between"