Schedule Component for Ionic Mobile Application

schedule.tsx

import {
  IonPage,
  IonAvatar,
  IonList,
  IonLabel,
  IonItem,
  IonIcon,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButtons,
  IonMenuButton,
  IonBreadcrumbs,
  IonBreadcrumb,
  IonChip,
} from "@ionic/react";

import { starOutline, starSharp, bookmarkOutline } from "ionicons/icons";

import { makeReadableDate, getDayOfWeek } from "./utils";

import React, { useState, useEffect } from "react";
import { ScheduleEvent, useGetScheduleEventsQuery } from "./schedule-api-slice";

interface DailySchedules {
  [key: string]: ScheduleEvent[];
}

export const Layout: React.FC = () => {
  const [selectedDay, setSelectedDay] = useState("Monday");
  const [dailySchedules, setDailySchedules] = useState<DailySchedules>({});
  const [dailySchedule, setDailySchedule] = useState<ScheduleEvent[]>([]);

  const {
    data: scheduleEvents = [],
    isLoading: isScheduleLoading,
    isError: isScheduleError,
  } = useGetScheduleEventsQuery(1, {
    refetchOnFocus: true,
  });

  useEffect(() => {
    if (scheduleEvents.length > 0) {
      const scheduleReducer = scheduleEvents.reduce((acc, scheduleEvent) => {
        const day: string = getDayOfWeek(scheduleEvent.start_time);
        if (!acc[day]) {
          acc[day] = [];
        }
        acc[day].push(scheduleEvent);
        return acc;
      }, {} as DailySchedules);

      setDailySchedules(scheduleReducer);
    }
  }, [scheduleEvents]);

  useEffect(() => {
    if (dailySchedules[selectedDay]) {
      setDailySchedule(dailySchedules[selectedDay]);
    } else {
      const key: string = Object.keys(dailySchedules)[0];
      const daily: ScheduleEvent[] = dailySchedules[key];
      setDailySchedule(daily);
    }
  }, [dailySchedules, selectedDay]);

  if (isScheduleLoading) {
    return <IonPage>Loading...</IonPage>;
  }
  if (isScheduleError) {
    return <IonPage>Error!</IonPage>;
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton></IonMenuButton>
          </IonButtons>
          <IonTitle>
            <h1>Schedule Shit</h1>
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonBreadcrumbs>
          {Object.keys(dailySchedules).map((day, index) => (
            <IonBreadcrumb key={index} onClick={() => setSelectedDay(day)}>
              <IonChip>
                <IonAvatar>
                  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
                </IonAvatar>
                <IonLabel>{day}</IonLabel>
              </IonChip>
            </IonBreadcrumb>
          ))}
        </IonBreadcrumbs>
        <div>
          <IonList>
            {!!dailySchedule &&
              dailySchedule
                .sort(
                  (a: ScheduleEvent, b: ScheduleEvent) =>
                    new Date(a.start_time).getDate() -
                    new Date(b.start_time).getDate()
                )
                .map((scheduleEvent) => (
                  <ScheduleListItem key={scheduleEvent.id} {...scheduleEvent} />
                ))}
          </IonList>
        </div>
      </IonContent>
    </IonPage>
  );
};

const ScheduleListItem: React.FC<ScheduleEvent> = ({
  start_time,
  end_time,
  title,
  location,
  description,
  time_zone,
}) => {
  const start = makeReadableDate(start_time);
  const end = makeReadableDate(end_time);

  return (
    <IonItem>
      <IonAvatar slot="start">
        <IonIcon ios={starOutline} md={starSharp} />
      </IonAvatar>
      <IonLabel>
        <h2>{title}</h2>
        <h3>
          {start} - {end}
        </h3>
        <h4>location: {location}</h4>
        <p>
          <small>{description}</small>
        </p>
      </IonLabel>
    </IonItem>
  );
};