TOP-203 show the things

wearefuturegov · Sep 5, 2024 · f79df86 · f79df86
1 parent e01e9ac
commit f79df86
Show file tree

Hide file tree

Showing 2 changed files with 176 additions and 41 deletions.
diff --git a/src/components/DetailDialog/ScheduleTable.jsx b/src/components/DetailDialog/ScheduleTable.jsx
@@ -1,30 +1,102 @@
 import React from "react"
+import styled from "styled-components"
 import { Crosshead, CrossheadSub, Columns, Table } from "./DetailDialog.styles"
 import { twelveHourTime } from "../../lib/utils"
 
+export const EventList = styled.div`
+  margin-bottom: 30px;
+  &:last-of-type {
+    margin-bottom: 0px;
+  }
+  div {
+    margin-bottom: 20px;
+    &:last-of-type {
+      margin-bottom: 0px;
+    }
+  }
+  /* @supports (display: grid) {
+    @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      column-gap: 35px;
+      row-gap: 25px;
+      div {
+        margin-bottom: 0px;
+      }
+    }
+  } */
+`
+
+export const List = styled.ul`
+  padding-left: 30px;
+`
+
+export const ListItem = styled.li`
+  position: relative;
+  line-height: 1.5;
+  padding-left: 15px;
+  margin-bottom: 10px;
+  &:last-of-type {
+    margin-bottom: 0px;
+  }
+`
+
 const ScheduleTable = ({ title, subtitle, regular_schedules }) => {
+  const { event_times, opening_times } = regular_schedules.reduce(
+    (acc, sched) => {
+      if (sched.dtstart) {
+        acc.event_times.push(sched)
+      } else {
+        acc.opening_times.push(sched)
+      }
+      return acc
+    },
+    { event_times: [], opening_times: [] }
+  )
+
+  const OpeningTimes = () => (
+    <Table>
+      <tbody>
+        {opening_times.map((sched, i) => (
+          <tr key={i}>
+            <td>
+              <strong>{sched.weekday}s</strong>
+            </td>
+            <td>
+              {twelveHourTime(sched.opens_at)} to{" "}
+              {twelveHourTime(sched.closes_at)}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  )
+
+  const EventTimes = () => (
+    <List>
+      {event_times.map((sched, i) => (
+        <ListItem>{sched.description}</ListItem>
+      ))}
+    </List>
+  )
+
   return (
-    regular_schedules.length > 0 && (
-      <Columns>
-        {title && <Crosshead>{title}</Crosshead>}
-        {subtitle && <CrossheadSub>{subtitle}</CrossheadSub>}
-        <Table>
-          <tbody>
-            {regular_schedules.map((sched, i) => (
-              <tr key={i}>
-                <td>
-                  <strong>{sched.weekday}s</strong>
-                </td>
-                <td>
-                  {twelveHourTime(sched.opens_at)} to{" "}
-                  {twelveHourTime(sched.closes_at)}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      </Columns>
-    )
+    <>
+      {opening_times.length > 0 && (
+        <Columns>
+          {title && <Crosshead>{title}</Crosshead>}
+          {subtitle && <CrossheadSub>{subtitle}</CrossheadSub>}
+          <OpeningTimes />
+        </Columns>
+      )}
+      {event_times.length > 0 && (
+        <EventList>
+          {title && <Crosshead>{title}</Crosshead>}
+          {subtitle && <CrossheadSub>{subtitle}</CrossheadSub>}
+          <EventTimes />
+        </EventList>
+      )}
+    </>
   )
 }
 

diff --git a/src/components/DetailDialog/index.jsx b/src/components/DetailDialog/index.jsx
@@ -149,6 +149,43 @@ const DetailDialog = ({ serviceId, location, navigate }) => {
   if (service.name) {
     let goodToKnow = buildGoodToKnow(service)
     let categories = service.taxonomies
+
+    const all_location_regular_schedules = service.regular_schedules.filter(
+      v => v.service_at_location === null
+    )
+
+    const {
+      all_location_event_times,
+      all_location_opening_times,
+    } = all_location_regular_schedules.reduce(
+      (acc, sched) => {
+        if (sched.dtstart) {
+          acc.all_location_event_times.push(sched)
+        } else {
+          acc.all_location_opening_times.push(sched)
+        }
+        return acc
+      },
+      { all_location_event_times: [], all_location_opening_times: [] }
+    )
+
+    const location_regular_schedules = service.service_at_locations.reduce(
+      (acc, schedule) => {
+        if (schedule.regular_schedule && schedule.regular_schedule.length > 0) {
+          const locationId = schedule.location_id
+          if (!acc[locationId]) {
+            acc[locationId] = {
+              location: schedule.location,
+              regular_schedules: [],
+            }
+          }
+          acc[locationId].regular_schedules.push(...schedule.regular_schedule)
+        }
+        return acc
+      },
+      {}
+    )
+
     return (
       <Dialog handleDismiss={handleDismiss} dialogTitle={service.name}>
         <Helmet>
@@ -321,32 +358,58 @@ const DetailDialog = ({ serviceId, location, navigate }) => {
                   </TickList>
                 </Columns>
               )}
+            {/* 4 options
+
+              just opening hours
+              just event times
+
+              event times and opening hours
 
-            {service.regular_schedules.length > 0 && (
+              all at location */}
+            {/* opening times for all locations and locations */}
+            {all_location_opening_times.length > 0 && (
               <ScheduleTable
                 title="Hours"
-                regular_schedules={service.regular_schedules.filter(
-                  v => v.service_at_location === null
-                )}
+                regular_schedules={all_location_opening_times}
               />
             )}
-
-            {service.service_at_locations.length > 1 && (
-              <>
-                {service.service_at_locations.map((service_at_location, i) => (
-                  <ScheduleTable
-                    key={service_at_location.id}
-                    subtitle={
-                      service_at_location.location.name ||
-                      service_at_location.location.address_1 ||
-                      `Location ${i + 1}`
-                    }
-                    regular_schedules={service_at_location.regular_schedule}
-                  />
-                ))}
-              </>
+            {Object.entries(location_regular_schedules).map(
+              ([location_id, location]) => (
+                <ScheduleTable
+                  key={location_id}
+                  subtitle={
+                    location.name ||
+                    location.address_1 ||
+                    `Location ${location_id}`
+                  }
+                  regular_schedules={location.regular_schedules.filter(
+                    v => v.dtstart === null
+                  )}
+                />
+              )
+            )}
+            {/* event times for all locations and locations */}
+            {all_location_event_times.length > 0 && (
+              <ScheduleTable
+                title="Times"
+                regular_schedules={all_location_event_times}
+              />
+            )}{" "}
+            {Object.entries(location_regular_schedules).map(
+              ([location_id, location]) => (
+                <ScheduleTable
+                  key={location_id}
+                  subtitle={
+                    location.name ||
+                    location.address_1 ||
+                    `Location ${location_id}`
+                  }
+                  regular_schedules={location.regular_schedules.filter(
+                    v => v.dtstart !== null
+                  )}
+                />
+              )
             )}
-
             {service.cost_options.length > 0 && (
               <Columns>
                 <Crosshead>Fees</Crosshead>