Upload image
This commit is contained in:
parent
8fbd692403
commit
6a7593be67
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
export type EventStatus = "confirmed" | "canceled"
|
||||
export type EventImageType = "cover" | "thumb" | "gallery" | "poster"
|
||||
declare module "*.png"
|
||||
declare module "*.svg"
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 />
|
||||
) : (
|
||||
|
|
|
@ -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
|
|
@ -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
|
||||
|
|
|
@ -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>) =>
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue