Fix edit event cache issues

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-03 16:54:56 +02:00
parent 84ee6bd5db
commit 74efd81a0a
4 changed files with 115 additions and 9 deletions

View File

@ -52,6 +52,7 @@ const optionsQuery = `
program,
commentModeration,
showParticipationPrice
__typename
`;
export const FETCH_EVENT = gql`
@ -62,7 +63,6 @@ export const FETCH_EVENT = gql`
url,
local,
title,
slug,
description,
beginsOn,
endsOn,
@ -244,6 +244,9 @@ export const CREATE_EVENT = gql`
},
options {
${optionsQuery}
},
organizerActor {
id
}
}
}
@ -289,6 +292,8 @@ export const EDIT_EVENT = gql`
id,
uuid,
title,
url,
local,
description,
beginsOn,
endsOn,
@ -307,6 +312,20 @@ export const EDIT_EVENT = gql`
physicalAddress {
${physicalAddressQuery}
},
organizerActor {
avatar {
url
},
preferredUsername,
domain,
name,
url,
id,
},
participantStats {
approved,
unapproved
},
tags {
${tagsQuery}
},

View File

@ -1,4 +1,4 @@
import { IParticipant } from '@/types/event.model';
import { IEvent, IParticipant } from '@/types/event.model';
export enum ICurrentUserRole {
USER = 'USER',
@ -12,4 +12,5 @@ export interface ICurrentUser {
isLoggedIn: boolean;
role: ICurrentUserRole;
participations: IParticipant[];
drafts: IEvent[];
}

View File

@ -1,3 +1,4 @@
import {ParticipantRole} from "@/types/event.model";
<template>
<section>
<div class="container">
@ -234,13 +235,15 @@
import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT } from '@/graphql/event';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import {
CommentModeration, EventJoinOptions,
CommentModeration,
EventJoinOptions,
EventModel,
EventStatus,
EventVisibility, IEvent,
} from '@/types/event.model';
import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { IActor, Person } from '@/types/actor';
EventVisibility,
IEvent, ParticipantRole,
} from '@/types/event.model';
import { CURRENT_ACTOR_CLIENT, IDENTITIES, LOGGED_USER_DRAFTS, LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor';
import { Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue';
import Editor from '@/components/Editor.vue';
import DateTimePicker from '@/components/Event/DateTimePicker.vue';
@ -250,6 +253,7 @@ import { ITag } from '@/types/tag.model';
import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
import { ICurrentUser } from '@/types/current-user.model';
@Component({
components: { IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor },
@ -361,6 +365,41 @@ export default class EditEvent extends Vue {
const { data } = await this.$apollo.mutate({
mutation: CREATE_EVENT,
variables: this.buildVariables(),
update: (store, { data: { createEvent } }) => {
if (createEvent.draft) {
const data = store.readQuery<{ loggedUser: ICurrentUser }>({ query: LOGGED_USER_DRAFTS, variables: {
page: 1,
limit: 10,
} });
if (data) {
data.loggedUser.drafts.push(createEvent);
store.writeQuery({ query: LOGGED_USER_DRAFTS, variables: {
page: 1,
limit: 10,
}, data });
}
} else {
const data = store.readQuery<{ loggedUser: ICurrentUser }>({ query: LOGGED_USER_PARTICIPATIONS, variables: {
page: 1,
limit: 10,
afterDateTime: (new Date()).toISOString(),
} });
if (data) {
data.loggedUser.participations.push({
role: ParticipantRole.CREATOR,
actor: createEvent.organizerActor,
event: createEvent,
});
store.writeQuery({ query: LOGGED_USER_PARTICIPATIONS, variables: {
page: 1,
limit: 10,
afterDateTime: (new Date()).toISOString(),
}, data });
}
}
},
});
console.log('Event created', data);
@ -379,6 +418,50 @@ export default class EditEvent extends Vue {
await this.$apollo.mutate({
mutation: EDIT_EVENT,
variables: this.buildVariables(),
update: (store, { data: { updateEvent } }) => {
if (updateEvent.draft) {
const data = store.readQuery<{ loggedUser: ICurrentUser }>({ query: LOGGED_USER_DRAFTS, variables: {
page: 1,
limit: 10,
} });
if (data) {
data.loggedUser.drafts.push(updateEvent);
store.writeQuery({ query: LOGGED_USER_DRAFTS, data });
}
} else {
let participationData: { loggedUser: ICurrentUser}|null = null;
try {
participationData = store.readQuery<{ loggedUser: ICurrentUser }>({
query: LOGGED_USER_PARTICIPATIONS, variables: {
page: 1,
limit: 10,
afterDateTime: (new Date()).toISOString(),
},
});
} catch (e) {
// no worries, it seems we can't update participation cache because it's not linked to an ID
}
if (participationData) {
participationData.loggedUser.participations.push({
role: ParticipantRole.CREATOR,
actor: updateEvent.organizerActor,
event: updateEvent,
});
store.writeQuery({ query: LOGGED_USER_PARTICIPATIONS, variables: {
page: 1,
limit: 10,
afterDateTime: (new Date()).toISOString(),
}, data: participationData });
}
const resultEvent: IEvent = Object.assign({}, updateEvent);
resultEvent.organizerActor = this.event.organizerActor;
resultEvent.relatedEvents = [];
store.writeQuery({ query: FETCH_EVENT, variables: { uuid: updateEvent.uuid }, data: { event: resultEvent } });
}
},
});
await this.$router.push({

View File

@ -83,6 +83,7 @@ import EventCard from '@/components/Event/EventCard.vue';
apollo: {
futureParticipations: {
query: LOGGED_USER_PARTICIPATIONS,
fetchPolicy: 'network-only',
variables: {
page: 1,
limit: 10,
@ -92,6 +93,7 @@ import EventCard from '@/components/Event/EventCard.vue';
},
drafts: {
query: LOGGED_USER_DRAFTS,
fetchPolicy: 'network-only',
variables: {
page: 1,
limit: 10,
@ -100,6 +102,7 @@ import EventCard from '@/components/Event/EventCard.vue';
},
pastParticipations: {
query: LOGGED_USER_PARTICIPATIONS,
fetchPolicy: 'network-only',
variables: {
page: 1,
limit: 10,