Delete tag and style the calendar a bit

@types/graphql.d.ts

@@ -154,6 +154,7 @@ declare namespace GQL {
     createEvent: ICalendarEvent | null;
     createEventTag: IEventTag | null;
     deleteEvent: IUser;
+    deleteEventTag: Array<IEventTag | null> | null;
     grantRole: IUser;
     requestInvite: boolean;
     revokeRole: IUser;
@@ -175,6 +176,10 @@ declare namespace GQL {
     id: string;
   }
 
+  interface IDeleteEventTagOnMutationArguments {
+    input: IDeleteEventTagInput;
+  }
+
   interface IGrantRoleOnMutationArguments {
     input: IGrantRoleInput;
   }
@@ -240,6 +245,10 @@ declare namespace GQL {
     text: string;
   }
 
+  interface IDeleteEventTagInput {
+    id: string;
+  }
+
   interface IGrantRoleInput {
     roleType: any;
     userId: string;

packages/qpa/Calendar/Calendar.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled"
 import { addWeeks, endOfWeek, startOfWeek, isBefore, format } from "date-fns"
 import { Button, Spinner } from "qpa-components"
+import { css } from "qpa-emotion"
 import * as React from "react"
 import { RouteComponentProps, withRouter } from "react-router"
 import { useAppContext } from "../App/Context/AppContext"
@@ -58,11 +59,28 @@ const Calendar = (props: Props) => {
 
   return (
     <Root>
-      <List className={props.className} occurrences={data.occurrences} />
-      <Button loading={loading} onClick={() => setToDate(addWeeks(toDate, 1))}>Load More</Button>
+      <List
+        className={props.className}
+        occurrences={data.occurrences}
+        css={css`
+          width: 100%;
+        `}
+      />
+      <Button loading={loading} onClick={() => setToDate(addWeeks(toDate, 1))}>
+        {intl.get("show-more")}
+      </Button>
     </Root>
   )
 }
-const Root = styled.div``
+const Root = styled.div`
+  padding-top: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  ${Button} {
+    margin-top: 28px;
+    max-width: 154px;
+  }
+`
 
 export default withRouter(Calendar)

packages/qpa/Calendar/List/List.tsx

@@ -69,7 +69,8 @@ const List = (props: Props) => {
   )
 }
 
-const ListRoot = styled.div``
+const ListRoot = styled.div`
+`
 
 const Items = styled.div``
 

packages/qpa/Calendar/calendar.msg.json

@@ -12,7 +12,8 @@
     "month10":"october",
     "month11":"november",
     "month12":"december",
-    "no-events": "There are no events"
+    "no-events": "There are no events",
+    "show-more": "Show More"
   },
   "es": {
     "month01":"enero",
@@ -27,6 +28,7 @@
     "month10":"octubre",
     "month11":"noviembre",
     "month12":"deciembre",
-    "no-events": "No hay eventos"
+    "no-events": "No hay eventos",
+    "show-more": "Mostrar más"
   }
 }

packages/qpa/EventTags/EditEventTag.tsx

@@ -1,3 +1,4 @@
+import {Button} from "qpa-components"
 import { useMessageCenter } from "qpa-message-center"
 import * as React from "react"
 import EventTagForm, { EventTagFormData } from "./EventTagForm"
@@ -5,13 +6,20 @@ import updateEventTagMutation from "./updateEventTagMutation"
 import { EventTagFullData } from "./useGetAllTagsWithTranslationsQuery"
 import styled from "@emotion/styled"
 import intl from "react-intl-universal"
-
+import messages from './EventTagForm.msg.json'
 interface Props {
   eventTag: EventTagFullData
   existingTags: EventTagFullData[]
+  onDelete: () => void
+  deleteLoading: boolean
 }
 
 const EditEventTag = (props: Props) => {
+  intl.load({
+    "en-GB": messages.en,
+    "es-ES": messages.es
+  })
+
   const { addMessage } = useMessageCenter()
   const [updateEventTag, { loading, error }] = updateEventTagMutation({
     onCompleted: (data) => {
@@ -49,6 +57,7 @@ const EditEventTag = (props: Props) => {
           })
         }}
       />
+      <Button onClick={props.onDelete} loading={props.deleteLoading}>{ intl.get('delete-tag-button') }</Button>
     </Root>
   )
 }

packages/qpa/EventTags/EditEventTags.tsx

@@ -1,10 +1,13 @@
 import { Fab, Spinner, TagIcon } from "qpa-components"
+import { useMessageCenter } from "qpa-message-center"
 import * as React from "react"
 import { RouteComponentProps, withRouter } from "react-router"
 import CreateEventTag from "./CreateEventTag"
 import EditEventTag from "./EditEventTag"
+import useDeleteEventTagMutation from "./useDeleteEventTagMutation"
 import useGetAllTagsWithTranslationsQuery from "./useGetAllTagsWithTranslationsQuery"
 import styled from "@emotion/styled"
+import intl from "react-intl-universal"
 
 interface Props extends RouteComponentProps {}
 const EditEventTags = (props: Props) => {
@@ -14,6 +17,18 @@ const EditEventTags = (props: Props) => {
     error,
   } = useGetAllTagsWithTranslationsQuery()
   const [isAddMode, setAddMode] = React.useState(false)
+  const { addMessage } = useMessageCenter()
+  const [
+    deleteEventTag,
+    { data, loading: deleteLoading, error: deleteError },
+  ] = useDeleteEventTagMutation({
+    onCompleted: () => {
+      addMessage({
+        type: "success",
+        text: intl.get("event-tag-delete-success"),
+      })
+    },
+  })
   if (loading) {
     return <Spinner />
   }
@@ -28,6 +43,12 @@ const EditEventTags = (props: Props) => {
           key={tag.id}
           eventTag={tag}
           existingTags={allTagsData.tags}
+          onDelete={() => deleteEventTag({
+            variables: {
+              id: tag.id
+            }
+          })}
+          deleteLoading={deleteLoading}
         />
       ))}
       {isAddMode ? (

packages/qpa/EventTags/EventTagForm.msg.json

@@ -5,7 +5,9 @@
     "event-tag-create-success": "Tag {name} was successfully created",
     "event-tag-create-error":"There was an error creating a tag: {error}",
     "edit-tag-button": "Edit",
-    "create-tag-button":"Create"
+    "create-tag-button":"Create",
+    "delete-tag-button": "Delete",
+    "event-tag-delete-success": "Event tag was successfully deleted"
   },
   "es": {
     "tag-update-success": "Etiqueta {name} está correctamente actualizada",
@@ -13,6 +15,8 @@
     "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"
+    "create-tag-button":"Crear",
+    "delete-tag-button": "Borrar",
+    "event-tag-delete-success": "Etiqueta de evento ha sido borrado"
   }
 }

packages/qpa/EventTags/useDeleteEventTagMutation.ts

@@ -0,0 +1,27 @@
+import { MutationHookOptions, useMutation } from "@apollo/react-hooks"
+import gql from "graphql-tag"
+import {
+  EventTagFullData,
+  EventTagFullDataFragment,
+} from "./useGetAllTagsWithTranslationsQuery"
+
+const mutation = gql`
+  ${EventTagFullDataFragment}
+  mutation DeleteEventTag($id: ID!) {
+    deleteEventTag(input: { id: $id }) {
+      ...EventTagFullData
+    }
+  }
+`
+interface Data {
+  deleteEventTag: EventTagFullData[]
+}
+interface Variables {
+  id: string
+}
+
+const useDeleteEventTagMutation = (
+  options: MutationHookOptions<Data, Variables>
+) => useMutation<Data, Variables>(mutation, options)
+
+export default useDeleteEventTagMutation

schema.graphql

@@ -65,6 +65,7 @@ type Mutation {
     createEvent(input: CreateEventInput!): CalendarEvent
     createEventTag(input: CreateEventTagInput!): EventTag
     deleteEvent(id: ID!): User!
+    deleteEventTag(input: DeleteEventTagInput!): [EventTag]
     grantRole(input: GrantRoleInput!): User!
     requestInvite(input: RequestInviteInput!): Boolean!
     revokeRole(input: GrantRoleInput!): User!
@@ -123,6 +124,10 @@ input CreateModifyEventTagTranslationInput {
     text: String!
 }
 
+input DeleteEventTagInput {
+    id: ID!
+}
+
 input EventInformationInput {
     description: String
     language: String!