More tags support

packages/qpa/App/Context/AppContext.tsx

@@ -7,6 +7,7 @@ interface IAppContext {
   isSSR: boolean
   supportedLocales: string[]
   refetch: () => void
+  language: string
 }
 
 interface Props {
@@ -20,6 +21,7 @@ const AppContext = React.createContext<IAppContext>({
   me: null,
   isSSR: false,
   supportedLocales: SUPPORTED_LOCALES,
+  language: "es",
   refetch: () => {}
 })
 
@@ -38,6 +40,7 @@ const AppContextProvider = (props: Props) => {
         me: data.me,
         isSSR: props.isSSR,
         supportedLocales: SUPPORTED_LOCALES,
+        language: "es",
         refetch,
       }}
     >

packages/qpa/App/Event/EventDetails.tsx

@@ -1,9 +1,9 @@
+import Chip from "qpa-components/Chip"
 import styled from "qpa-emotion"
 import { Button, Spinner } from "qpa-components"
 import * as React from "react"
 import { hot } from "react-hot-loader"
 import { RouteComponentProps, withRouter } from "react-router"
-import { Link } from "react-router-dom"
 import { useAppContext } from "../Context/AppContext"
 import useEventDetailsQuery from "./useEventDetailsQuery"
 
@@ -15,9 +15,9 @@ interface RouteParams {
 interface Props extends RouteComponentProps<RouteParams> {}
 
 const EventDetails = (props: Props) => {
-  const { me } = useAppContext()
+  const { me, language } = useAppContext()
   const { data, loading, error } = useEventDetailsQuery({
-    variables: { eventId: props.match.params.eventId },
+    variables: { eventId: props.match.params.eventId, language },
   })
   if (loading) {
     return <Spinner />
@@ -32,6 +32,11 @@ const EventDetails = (props: Props) => {
   return (
     <Root>
       <Title>{info.title}</Title>
+      <Tags>
+        {event.tags.map(tag => (
+          <Chip color="primary" label={tag.translation.text} key={tag.id} />
+        ))}
+      </Tags>
       <Info>{info.description}</Info>
       {meIsOwner ? (
         <EditButton
@@ -64,9 +69,13 @@ const Root = styled.div`
   grid-template-rows:
     [title-start small-button-start] 24px
     [small-button-end] 24px
-    [title-end info-start] 1fr
+    [title-end tags-start] 48px
+    [tags-end info-start] 1fr
     [info-end];
   grid-gap: 12px;
 `
 
+const Tags = styled.div`
+  grid-row: tags;
+`
 export default hot(module)(withRouter(EventDetails))

packages/qpa/App/Event/useEventDetailsQuery.ts

@@ -1,8 +1,10 @@
 import { QueryHookOptions, useQuery } from "@apollo/react-hooks"
 import gql from "graphql-tag"
+import {EventTagData, TranslationDataFragment} from "../../EventTags/useGetAvaiableTagsQuery"
 
 const query = gql`
-  query GetOccurrenceDetails($eventId: ID!) {
+  ${TranslationDataFragment}
+  query GetOccurrenceDetails($eventId: ID!, $language: String!) {
     event(id: $eventId) {
       id
       owner {
@@ -14,6 +16,13 @@ const query = gql`
         language
         title
       }
+      tags {
+        id
+        name
+        translation(language: $language) {
+          ...TranslationData
+        }
+      }
       occurrences {
         id
         start
@@ -39,6 +48,7 @@ export interface EventDetailsData {
     start: string
     end: string
   }
+  tags: EventTagData[]
 }
 
 interface Data {
@@ -46,6 +56,7 @@ interface Data {
 }
 interface Variables {
   eventId: string
+  language: string
 }
 
 const useEventDetailsQuery = (

packages/qpa/App/__tests__/remove-typename.spec.ts

@@ -5,7 +5,6 @@ describe('Remove Typename Util', () => {
     const input = {
       "input": {
         "id": "4b18628f-6069-4d6f-9708-f85862b2c3e6",
-        "meta": {"tags": []},
         "time": {
           "start": "2019-06-12T10:00",
           "end": "2019-06-12T12:00",
@@ -26,7 +25,6 @@ describe('Remove Typename Util', () => {
     const expected = {
       "input": {
         "id": "4b18628f-6069-4d6f-9708-f85862b2c3e6",
-        "meta": {"tags": []},
         "time": {
           "start": "2019-06-12T10:00",
           "end": "2019-06-12T12:00",

packages/qpa/Calendar/List/ListItem.tsx

@@ -1,3 +1,4 @@
+import Chip from "qpa-components/Chip"
 import styled, { css } from "qpa-emotion"
 import * as React from "react"
 import { hot } from "react-hot-loader"
@@ -35,6 +36,11 @@ const ListItem = (props: Props) => {
       </Link>
       <Location>{event.location.name}</Location>
       <Address>{event.location.address}</Address>
+      <Tags>
+        {event.tags.map(tag => (
+          <Chip key={tag.id} label={tag.translation.text} size="small" />
+        ))}
+      </Tags>
       {props.canEdit ? (
         <EditLink to={`/event/${event.id}/edit`}>Edit</EditLink>
       ) : null}
@@ -43,7 +49,7 @@ const ListItem = (props: Props) => {
 }
 const Root = styled.div`
   display: grid;
-  grid-template-columns: [time] 48px [details] 1fr [edit] 24px;
+  grid-template-columns: [time] 48px [details] 1fr [tags] 1fr [edit] 24px;
   grid-template-rows: [main] 24px [small1] 24px [small2] 24px;
 `
 const EditLink = styled(Link)`
@@ -67,5 +73,7 @@ const Location = styled(SubInfoLine)`
 const Address = styled(SubInfoLine)`
   grid-row: small2;
 `
-
+const Tags = styled.div`
+  grid-column: tags;
+`
 export default hot(module)(ListItem)

packages/qpa/Calendar/RangedCalendar.tsx

@@ -1,5 +1,6 @@
 import { Spinner } from "qpa-components"
 import * as React from "react"
+import {useAppContext} from "../App/Context/AppContext"
 import useOccurrencesQuery from "../Event/useOccurrencesQuery"
 import List from "./List"
 import { format } from "date-fns"
@@ -17,8 +18,10 @@ const RangedCalendar = (props: Props) => {
     "en-GB": messages.en,
     "es-ES": messages.es ,
   })
+  const { language } = useAppContext()
   const { data, error, loading } = useOccurrencesQuery({
     variables: {
+      language,
       filter: {
         from: format(props.from, "yyyy-MM-dd'T'HH:mm"),
         to: format(props.to, "yyyy-MM-dd'T'HH:mm"),

packages/qpa/Event/CreateEvent.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { useMessageCenter } from "qpa-message-center"
-import {RouteComponentProps, withRouter} from "react-router"
+import { RouteComponentProps, withRouter } from "react-router"
 import { useAppContext } from "../App/Context/AppContext"
 import useCreateEventMutation from "./useCreateEventMutation"
 import EventForm, { EventFormData } from "./EventForm"
@@ -10,12 +10,12 @@ const CreateEvent = (props: RouteComponentProps) => {
   const { addMessage } = useMessageCenter()
   const { supportedLocales } = useAppContext()
   const [createEvent, { loading }] = useCreateEventMutation({
-    onCompleted: (data) =>{
-        addMessage({
-            type: "success",
-            text: intl.get("event-create-success"),
-        })
-        props.history.push(`/event/${data.createEvent.id}/edit`)
+    onCompleted: data => {
+      addMessage({
+        type: "success",
+        text: intl.get("event-create-success"),
+      })
+      props.history.push(`/event/${data.createEvent.id}/edit`)
     },
     onError: error => {
       addMessage({
@@ -40,7 +40,7 @@ const CreateEvent = (props: RouteComponentProps) => {
                   timeZone: "Europe/Madrid",
                 },
                 status: "confirmed",
-                meta: values.meta,
+                tagNames: values.tagNames,
               },
             },
           })

packages/qpa/Event/EditEvent.tsx

@@ -44,7 +44,7 @@ const EditEvent = (props: Props) => {
     onError: error => {
       addMessage({
         type: "error",
-        text: intl.get("event-edit-error", { message: error.message }),
+        text: intl.get("event-edit-error", { error: error.message }),
       })
     },
   })
@@ -73,6 +73,7 @@ const EditEvent = (props: Props) => {
         })
       }}
       onSubmit={values => {
+        const { ...restValues} = values
         editEvent({
           variables: {
             input: {
@@ -83,9 +84,7 @@ const EditEvent = (props: Props) => {
         })
       }}
       values={{
-        meta: {
-          tags: event.meta.tags,
-        },
+        tagNames: data.event.tags.map(tag => tag.name),
         time: event.time,
         location: {
           address: event.location.address || "",

packages/qpa/Event/EventForm.tsx

@@ -42,9 +42,6 @@ export interface EventFormData {
     name: string
   }
   status: EventStatus
-  meta: {
-    tags: string[]
-  }
   tagNames: string[]
 }
 

packages/qpa/Event/useOccurrencesQuery.ts

@@ -2,7 +2,7 @@ import {QueryHookOptions, useQuery} from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 
 const query = gql`
-  query EventsQuery($filter: OccurrencesQueryFilter!) {
+  query EventsQuery($filter: OccurrencesQueryFilter!, $language: String!) {
     occurrences(filter: $filter) {
       id
       start
@@ -17,13 +17,23 @@ const query = gql`
           language
           title
         }
+        tags {
+          id
+          name
+          translation(language: $language) {
+            id
+            language
+            text
+          }
+        }
       }
     }
   }
 `
 
 interface Variables {
-  filter: GQL.IOccurrencesQueryFilter
+  filter: GQL.IOccurrencesQueryFilter,
+  language: string
 }
 
 export interface InfoData {
@@ -31,6 +41,16 @@ export interface InfoData {
   title: string
 }
 
+interface TagData {
+  id: string
+  name: string
+  translation: {
+    id: string
+    language: string
+    text: string
+  }
+}
+
 export interface OccurrenceData {
   id: string
   start: string
@@ -42,6 +62,7 @@ export interface OccurrenceData {
       address: string
       name: string
     }
+    tags: TagData[]
   }
 }
 

packages/qpa/EventTags/EventTagForm.msg.json

@@ -10,7 +10,7 @@
   "es": {
     "tag-update-success": "Etiqueta {name} está correctamente actualizada",
     "tag-update-error":"Hubo un error en modificar la etiqueta: {error}",
-    "event-tag-create-success": "Etiqueta {nase} ha sido sorrectamento creato",
+    "event-tag-create-success": "Etiqueta {name} ha sido sorrectamento creato",
     "event-tag-create-error":"Hubo un error en crear una etiqueta: {error}",
     "edit-tag-button": "Modificar",
     "create-tag-button":"Crear"