From 2b917b0908747a21f7513272d7500a91d48c003b Mon Sep 17 00:00:00 2001
From: Amit Jakubowicz <jakubowicz.amit@gmail.com>
Date: Mon, 25 Nov 2019 19:19:51 +0100
Subject: [PATCH] Refactor event details to show the occurrence

---
 packages/qpa/App/Event/EventDetails.tsx             | 5 +++--
 packages/qpa/App/Event/OccurrenceDetails.tsx        | 2 +-
 packages/qpa/App/Event/useOccurrenceDetailsQuery.ts | 2 ++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/qpa/App/Event/EventDetails.tsx b/packages/qpa/App/Event/EventDetails.tsx
index 6edad40..57c40ee 100644
--- a/packages/qpa/App/Event/EventDetails.tsx
+++ b/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))
diff --git a/packages/qpa/App/Event/OccurrenceDetails.tsx b/packages/qpa/App/Event/OccurrenceDetails.tsx
index 5e2553f..7472610 100644
--- a/packages/qpa/App/Event/OccurrenceDetails.tsx
+++ b/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)
diff --git a/packages/qpa/App/Event/useOccurrenceDetailsQuery.ts b/packages/qpa/App/Event/useOccurrenceDetailsQuery.ts
index 4e351b0..74f64df 100644
--- a/packages/qpa/App/Event/useOccurrenceDetailsQuery.ts
+++ b/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