remove status bage from grid page, change text size on mobile

transitmatters · May 27, 2024 · f82df13 · f82df13
1 parent 225a561
commit f82df13
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 37 deletions.
diff --git a/src/components/Shutdowns/ChartContainer.tsx b/src/components/Shutdowns/ChartContainer.tsx
@@ -52,7 +52,7 @@ const ChartContainer = ({ before, after, line, shutdown, title }: ChartContainer
             {!isMobile ? 'Before' : 'Before shutdown'}
           </dt>
           <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight">
-            {getFormattedTimeValue(beforeAvg, true)}
+            {getFormattedTimeValue(beforeAvg, !!isMobile)}
           </dd>
         </div>
         <div className={`flex flex-col flex-1 ${cardStyles} justify-center text-center`}>
@@ -61,13 +61,13 @@ const ChartContainer = ({ before, after, line, shutdown, title }: ChartContainer
             {!isMobile ? 'After' : 'After shutdown'}
           </dt>
           <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight">
-            {getFormattedTimeValue(afterAvg, true)}
+            {getFormattedTimeValue(afterAvg, !!isMobile)}
           </dd>
         </div>
         <div className={`flex flex-col flex-1 ${cardStyles} justify-center text-center`}>
           <dt className="md:truncate text-sm font-medium text-gray-700 dark:text-white">Change</dt>
           <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight">
-            {getFormattedTimeValue(difference, true, direction)}
+            {getFormattedTimeValue(difference, !!isMobile, direction)}
           </dd>
         </div>
       </div>

diff --git a/src/components/Shutdowns/ShutdownContainer.tsx b/src/components/Shutdowns/ShutdownContainer.tsx
@@ -13,39 +13,84 @@ export const ShutdownCards: React.FunctionComponent<ShutdownCardsProps> = ({
 }) => {
   const { range } = useStore();
 
-  const mappedShutdowns = useMemo(
-    () =>
-      Object.entries(shutdowns)
-        .filter(([line]) => line === selectedLine || selectedLine === 'all')
-        .map(([line, shutdowns]) =>
-          shutdowns
-            .filter((sd) => {
-              if (range === 'past') {
-                return (
-                  dayjs(sd.stop_date).isBefore(dayjs(), 'day') ||
-                  dayjs(sd.stop_date).isSame(dayjs(), 'day')
-                );
-              } else if (range === 'future') {
-                return (
-                  dayjs(sd.start_date).isAfter(dayjs(), 'day') ||
-                  dayjs(sd.stop_date).isSame(dayjs(), 'day')
-                );
+  const groupedAndSortedShutdowns = useMemo(() => {
+    const now = dayjs();
+
+    const shutdownsByGroup = Object.entries(shutdowns)
+      .filter(([line]) => line === selectedLine || selectedLine === 'all')
+      .reduce(
+        (acc, [line, shutdownList]) => {
+          shutdownList.forEach((sd, index) => {
+            if (
+              (range === 'past' &&
+                (dayjs(sd.stop_date).isBefore(now, 'day') ||
+                  dayjs(sd.stop_date).isSame(now, 'day'))) ||
+              (range === 'future' &&
+                (dayjs(sd.start_date).isAfter(now, 'day') ||
+                  dayjs(sd.stop_date).isSame(now, 'day'))) ||
+              range === 'all'
+            ) {
+              const shutdownCard = (
+                <ShutdownCard
+                  key={`${line}-${sd.start_date}-${sd.stop_date}-${index}`}
+                  line={line as Lines}
+                  shutdown={sd}
+                />
+              );
+
+              if (dayjs(sd.start_date).isAfter(now, 'day')) {
+                acc.upcoming.push({ card: shutdownCard, date: dayjs(sd.start_date) });
+              } else if (dayjs(sd.stop_date).isBefore(now, 'day')) {
+                acc.completed.push({ card: shutdownCard, date: dayjs(sd.start_date) });
+              } else {
+                acc.active.push({ card: shutdownCard, date: dayjs(sd.start_date) });
               }
-              return true;
-            })
-            .sort((a, b) => (dayjs(a.start_date).isAfter(dayjs(b.start_date)) ? 1 : -1))
-            .map((sd, index) => (
-              <ShutdownCard
-                key={`${line}-${sd.start_date}-${sd.stop_date}-${index}`}
-                line={line as Lines}
-                shutdown={sd}
-              />
-            ))
-        ),
-    [range, selectedLine]
-  );
+            }
+          });
+          return acc;
+        },
+        {
+          active: [] as { card: JSX.Element; date: dayjs.Dayjs }[],
+          upcoming: [] as { card: JSX.Element; date: dayjs.Dayjs }[],
+          completed: [] as { card: JSX.Element; date: dayjs.Dayjs }[],
+        }
+      );
+
+    const sortByDate = (
+      a: { card: JSX.Element; date: dayjs.Dayjs },
+      b: { card: JSX.Element; date: dayjs.Dayjs }
+    ) => a.date.diff(b.date);
+
+    const sortedActive = shutdownsByGroup.active.sort(sortByDate).map((item) => item.card);
+    const sortedUpcoming = shutdownsByGroup.upcoming.sort(sortByDate).map((item) => item.card);
+    const sortedCompleted = shutdownsByGroup.completed.sort(sortByDate).map((item) => item.card);
+
+    return { active: sortedActive, upcoming: sortedUpcoming, completed: sortedCompleted };
+  }, [range, selectedLine]);
 
   return (
-    <div className="w-full overflow-y-hidden my-8 grid md:grid-cols-3 gap-4">{mappedShutdowns}</div>
+    <div>
+      {!!groupedAndSortedShutdowns.active.length && (
+        <div className="md:my-8 my-4">
+          <div className="md:text-xl font-medium mb-4">Active Shutdowns</div>
+          <div className="w-full overflow-y-hidden grid md:grid-cols-3 gap-4">
+            {groupedAndSortedShutdowns.active}
+          </div>
+        </div>
+      )}
+      <div className="md:my-8 my-4">
+        <div className="md:text-xl font-medium mb-4">Upcoming Shutdowns</div>
+        <div className="w-full overflow-y-hidden grid md:grid-cols-3 gap-4">
+          {groupedAndSortedShutdowns.upcoming}
+        </div>
+      </div>
+
+      <div className="md:my-8 my-4">
+        <div className="md:text-xl mb-4 font-medium">Completed Shutdowns</div>
+        <div className="w-full overflow-y-hidden  grid md:grid-cols-3 gap-4">
+          {groupedAndSortedShutdowns.completed}
+        </div>
+      </div>
+    </div>
   );
 };
diff --git a/src/components/Shutdowns/ShutdownTitle.tsx b/src/components/Shutdowns/ShutdownTitle.tsx
@@ -5,7 +5,6 @@ import { abbreviateStationName } from '../../constants/stations';
 import { Shutdown } from '../../types';
 import { useBreakpoint } from '../../hooks/useBreakpoint';
 import { Lines } from '../../store';
-import StatusBadge from './StatusBadge';
 
 const ShutdownTitle = ({ shutdown, line }: { shutdown: Shutdown; line: Lines }) => {
   const isMobile = useBreakpoint('sm');
@@ -20,8 +19,6 @@ const ShutdownTitle = ({ shutdown, line }: { shutdown: Shutdown; line: Lines })
             {' - '}
             {abbreviateStationName(shutdown.end_station?.stop_name, isMobile)}
           </div>
-
-          <StatusBadge start_date={shutdown.start_date} stop_date={shutdown.stop_date} />
         </div>
         <div className="text-xs mt-1 text-gray-500 dark:text-slate-400">
           {dayjs(shutdown.start_date).format('MM/DD/YY')} -{' '}