Refactor event details to show the occurrence

packages/qpa/App/Event/EventDetails.tsx

@@ -1,3 +1,4 @@
+import {format} from "date-fns"
 import styled, { css } from "qpa-emotion"
 import { Button, Spinner } from "qpa-components"
 import { useMessageCenter } from "qpa-message-center"
@@ -62,7 +63,7 @@ const EventDetails = (props: Props) => {
       {
         props.occurrence ? (
             <OccurrenceTime>
-              { props.occurrence.start }
+              { format(new Date(props.occurrence.start), 'yyyy-MM-dd HH:mm') }
             </OccurrenceTime>
         ) : null
       }
@@ -125,6 +126,6 @@ const StyledEventTags = styled(EventTags)`
 `
 
 const OccurrenceTime = styled.div`
-
+  grid-column: content;
 `
 export default hot(module)(withRouter(EventDetails))

packages/qpa/App/Event/OccurrenceDetails.tsx

@@ -34,7 +34,7 @@ const OccurrenceDetails = (props: Props) => {
     props.history.push("/")
     return <br />
   }
-  return <EventDetails event={data.occurrence.event} />
+  return <EventDetails event={data.occurrence.event} occurrence={data.occurrence}/>
 }
 
 export default withRouter(OccurrenceDetails)

packages/qpa/App/Event/useOccurrenceDetailsQuery.ts

@@ -9,6 +9,7 @@ const query = gql`
   ${EventDetailsDataFragment}
   query GetOccurrenceDetails($id: ID!) {
     occurrence(id: $id) {
+      id
       start
       end
       event {
@@ -20,6 +21,7 @@ const query = gql`
 
 interface Data {
   occurrence: {
+    id: string
     start: string
     end: string
     event: EventDetailsData