Upload image

.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"
         },

@types/graphql.d.ts

@@ -71,14 +71,14 @@ declare namespace GQL {
 
   interface IEventImages {
     __typename: 'EventImages';
-    cover: IImage | null;
+    cover: IEventImage | null;
-    gallery: Array<IImage> | null;
+    gallery: Array<IEventImage> | null;
-    poster: IImage | null;
+    poster: IEventImage | null;
-    thumb: IImage | null;
+    thumb: IEventImage | null;
   }
 
-  interface IImage {
+  interface IEventImage {
-    __typename: 'Image';
+    __typename: 'EventImage';
     url: string;
   }
 

@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"

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"
   }
 }

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 />
       ) : (

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 EventImageUpload = (props: Props) => {
-  const [uploadImage, { data, loading, error }] = useSetCoverImage()
+  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

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

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!) {
+  mutation SetEventImage(
-    setEventCoverImage(input: { id: $eventId, file: $file }) {
+    $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>) =>

schema.graphql

@@ -23,11 +23,15 @@ type Error {
     path: String!
 }
 
+type EventImage {
+    url: String!
+}
+
 type EventImages {
-    cover: Image
+    cover: EventImage
-    gallery: [Image!]
+    gallery: [EventImage!]
-    poster: Image
+    poster: EventImage
-    thumb: Image
+    thumb: EventImage
 }
 
 type EventInformation {
@@ -64,10 +68,6 @@ type EventTime {
     timeZone: TimeZone
 }
 
-type Image {
-    url: String!
-}
-
 type Location {
     address: String
     name: String