From 6a7593be678f3bc4b82188a8989571ff9e4a1011 Mon Sep 17 00:00:00 2001
From: Amit Jakubowicz <jakubowicz.amit@gmail.com>
Date: Mon, 25 Nov 2019 10:05:18 +0100
Subject: [PATCH] Upload image

---
 .graphqlconfig                                |  2 +-
 @types/graphql.d.ts                           | 12 ++++-----
 @types/index.d.ts                             |  1 +
 packages/qpa/App/Event/EventDetails.msg.json  |  8 ++++--
 packages/qpa/App/Event/EventDetails.tsx       | 19 ++++++++++++--
 ...entCoverImage.tsx => EventImageUpload.tsx} | 19 ++++++++------
 .../qpa/App/Event/useEventDetailsQuery.ts     | 26 ++++++++++++++++---
 ...seSetCoverImage.ts => useSetEventImage.ts} | 14 +++++++---
 schema.graphql                                | 16 ++++++------
 9 files changed, 84 insertions(+), 33 deletions(-)
 rename packages/qpa/App/Event/{EventCoverImage.tsx => EventImageUpload.tsx} (58%)
 rename packages/qpa/App/Event/{useSetCoverImage.ts => useSetEventImage.ts} (62%)

diff --git a/.graphqlconfig b/.graphqlconfig
index 91238e8..6d005fe 100644
--- a/.graphqlconfig
+++ b/.graphqlconfig
@@ -4,7 +4,7 @@
   "extensions": {
     "endpoints": {
       "Default GraphQL Endpoint": {
-        "url": "http://localhost:4000/graphql",
+        "url": "https://alpha.quepasaalpujarra.com/graphql",
         "headers": {
           "user-agent": "JS GraphQL"
         },
diff --git a/@types/graphql.d.ts b/@types/graphql.d.ts
index f5f1ed7..ecd7628 100644
--- a/@types/graphql.d.ts
+++ b/@types/graphql.d.ts
@@ -71,14 +71,14 @@ declare namespace GQL {
 
   interface IEventImages {
     __typename: 'EventImages';
-    cover: IImage | null;
-    gallery: Array<IImage> | null;
-    poster: IImage | null;
-    thumb: IImage | null;
+    cover: IEventImage | null;
+    gallery: Array<IEventImage> | null;
+    poster: IEventImage | null;
+    thumb: IEventImage | null;
   }
 
-  interface IImage {
-    __typename: 'Image';
+  interface IEventImage {
+    __typename: 'EventImage';
     url: string;
   }
 
diff --git a/@types/index.d.ts b/@types/index.d.ts
index a5ef514..b957515 100644
--- a/@types/index.d.ts
+++ b/@types/index.d.ts
@@ -1,3 +1,4 @@
 export type EventStatus = "confirmed" | "canceled"
+export type EventImageType = "cover" | "thumb" | "gallery" | "poster"
 declare module "*.png"
 declare module "*.svg"
diff --git a/packages/qpa/App/Event/EventDetails.msg.json b/packages/qpa/App/Event/EventDetails.msg.json
index a0452b4..835847e 100644
--- a/packages/qpa/App/Event/EventDetails.msg.json
+++ b/packages/qpa/App/Event/EventDetails.msg.json
@@ -1,8 +1,12 @@
 {
   "en-GB": {
-    "event-not-found": "The event behind the link you entered does not exist."
+    "event-not-found": "The event behind the link you entered does not exist.",
+    "upload-cover-image": "Upload cover image",
+    "upload-poster-image": "Upload poster image"
   },
   "es-ES": {
-    "event-not-found": "El evento atras del enlace que has entrado no existe."
+    "event-not-found": "El evento atras del enlace que has entrado no existe.",
+    "upload-cover-image": "Subir imagen de fondo",
+    "upload-poster-image": "Subir imagen de cartel"
   }
 }
diff --git a/packages/qpa/App/Event/EventDetails.tsx b/packages/qpa/App/Event/EventDetails.tsx
index ca612d2..f7e78c6 100644
--- a/packages/qpa/App/Event/EventDetails.tsx
+++ b/packages/qpa/App/Event/EventDetails.tsx
@@ -8,7 +8,7 @@ import { RouteComponentProps, withRouter } from "react-router"
 import { useGetAvailableTagsQuery } from "../../EventTags/useGetAvaiableTagsQuery"
 import { useAppContext } from "../Context/AppContext"
 import useEventDetailsQuery from "./useEventDetailsQuery"
-import EventCoverImage from "./EventCoverImage"
+import EventImageUpload from "./EventImageUpload"
 import intl from "react-intl-universal"
 import messages from "./EventDetails.msg.json"
 
@@ -60,8 +60,23 @@ const EventDetails = (props: Props) => {
   const info = event.infos[0]
   return (
     <Root>
-      <EventCoverImage event={event} canEdit={canEdit} />
+      <EventImageUpload
+        event={event}
+        canEdit={canEdit}
+        imageType="cover"
+        title={intl.get("upload-cover-image")}
+      />
+      <EventImageUpload
+        event={event}
+        canEdit={canEdit}
+        imageType="poster"
+        title={intl.get("upload-poster-image")}
+      />
       <Title>{info.title}</Title>
+      {
+        event.images?.cover?.url ? <img src={event.images.cover.url}/> : null
+      }
+
       {availableTagsLoading ? (
         <Spinner />
       ) : (
diff --git a/packages/qpa/App/Event/EventCoverImage.tsx b/packages/qpa/App/Event/EventImageUpload.tsx
similarity index 58%
rename from packages/qpa/App/Event/EventCoverImage.tsx
rename to packages/qpa/App/Event/EventImageUpload.tsx
index ef2963a..3946305 100644
--- a/packages/qpa/App/Event/EventCoverImage.tsx
+++ b/packages/qpa/App/Event/EventImageUpload.tsx
@@ -1,19 +1,22 @@
-import { useFormik } from "formik"
 import { Button } from "qpa-components"
 import * as React from "react"
 import styled from "@emotion/styled"
+import { EventImageType } from "../../../../@types"
 import { EventDetailsData } from "./useEventDetailsQuery"
-import useSetCoverImage from "./useSetCoverImage"
+import useSetEventImage from "./useSetEventImage"
 
 interface Props {
   event: EventDetailsData
   canEdit: boolean
+  imageType: EventImageType
+  title?: string
 }
 
-const EventCoverImage = (props: Props) => {
-  const [uploadImage, { data, loading, error }] = useSetCoverImage()
+const EventImageUpload = (props: Props) => {
+  const [uploadImage, { data, loading, error }] = useSetEventImage()
   return (
     <Root>
+      {props.canEdit && props.title ? <span>{props.title}</span> : null}
       <img src={props.event?.images?.cover?.url} />
       <input
         type="file"
@@ -23,16 +26,16 @@ const EventCoverImage = (props: Props) => {
           uploadImage({
             variables: {
               eventId: props.event.id,
-              file
-            }
+              file,
+              imageType: props.imageType,
+            },
           })
         }}
       />
-      <Button label="upload" />
     </Root>
   )
 }
 
 const Root = styled.div``
 
-export default EventCoverImage
+export default EventImageUpload
diff --git a/packages/qpa/App/Event/useEventDetailsQuery.ts b/packages/qpa/App/Event/useEventDetailsQuery.ts
index f51453b..db11329 100644
--- a/packages/qpa/App/Event/useEventDetailsQuery.ts
+++ b/packages/qpa/App/Event/useEventDetailsQuery.ts
@@ -5,7 +5,16 @@ import {
   TranslationDataFragment,
 } from "../../EventTags/useGetAvaiableTagsQuery"
 
+export const EventImageDataFragment = gql`
+  fragment EventImageData on EventImage {
+    url,
+  }
+`
+export interface EventImageData {
+  url: string
+}
 export const EventDetailsDataFragment = gql`
+  ${EventImageDataFragment}
   fragment EventDetailsData on CalendarEvent {
     id
     owner {
@@ -26,6 +35,17 @@ export const EventDetailsDataFragment = gql`
       start
       end
     }
+    images {
+      cover {
+        ...EventImageData
+      }
+      thumb {
+        ...EventImageData
+      }
+      poster {
+        ...EventImageData
+      }
+    }
   }
 `
 const query = gql`
@@ -36,12 +56,12 @@ const query = gql`
     }
   }
 `
-export interface EventImageData {
-  url: string
-}
 export interface EventImagesData {
   cover?: EventImageData
+  thumb?: EventImagesData
+  poster?: EventImagesData
 }
+
 export interface EventTagData {
   id: string
   name: string
diff --git a/packages/qpa/App/Event/useSetCoverImage.ts b/packages/qpa/App/Event/useSetEventImage.ts
similarity index 62%
rename from packages/qpa/App/Event/useSetCoverImage.ts
rename to packages/qpa/App/Event/useSetEventImage.ts
index c5d5cc5..3af1884 100644
--- a/packages/qpa/App/Event/useSetCoverImage.ts
+++ b/packages/qpa/App/Event/useSetEventImage.ts
@@ -1,5 +1,6 @@
 import { MutationHookOptions, useMutation } from "@apollo/react-hooks"
 import gql from "graphql-tag"
+import {EventImageType} from "../../../../@types"
 import {
   EventDetailsData,
   EventDetailsDataFragment,
@@ -7,8 +8,14 @@ import {
 
 const mutation = gql`
   ${EventDetailsDataFragment}
-  mutation SetCoverImage($eventId: ID!, $file: Upload!) {
-    setEventCoverImage(input: { id: $eventId, file: $file }) {
+  mutation SetEventImage(
+    $eventId: ID!
+    $file: Upload!
+    $imageType: EventImageType!
+  ) {
+    setEventImage(
+      input: { eventId: $eventId, file: $file, imageType: $imageType }
+    ) {
       id
       ...EventDetailsData
     }
@@ -17,10 +24,11 @@ const mutation = gql`
 interface Variables {
   eventId: string
   file: any // todo what's the right type here?
+  imageType: EventImageType
 }
 
 interface Data {
-  setEventCoverImage: EventDetailsData
+  setEventImage: EventDetailsData
 }
 
 export default (options?: MutationHookOptions<Data, Variables>) =>
diff --git a/schema.graphql b/schema.graphql
index 2110bbb..680dba8 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -23,11 +23,15 @@ type Error {
     path: String!
 }
 
+type EventImage {
+    url: String!
+}
+
 type EventImages {
-    cover: Image
-    gallery: [Image!]
-    poster: Image
-    thumb: Image
+    cover: EventImage
+    gallery: [EventImage!]
+    poster: EventImage
+    thumb: EventImage
 }
 
 type EventInformation {
@@ -64,10 +68,6 @@ type EventTime {
     timeZone: TimeZone
 }
 
-type Image {
-    url: String!
-}
-
 type Location {
     address: String
     name: String