ui(admin): fix new roles not mutating swr

This commit is contained in:
Matthew Penner 2021-07-25 15:54:16 -06:00
parent 25feeaa9f5
commit ca4046e818
2 changed files with 7 additions and 31 deletions

View file

@ -1,14 +1,14 @@
import { Form, Formik, FormikHelpers } from 'formik';
import React, { useState } from 'react'; import React, { useState } from 'react';
import tw from 'twin.macro';
import { object, string } from 'yup';
import createRole from '@/api/admin/roles/createRole'; import createRole from '@/api/admin/roles/createRole';
import { AdminContext } from '@/state/admin'; import getRoles from '@/api/admin/roles/getRoles';
import FlashMessageRender from '@/components/FlashMessageRender';
import Button from '@/components/elements/Button'; import Button from '@/components/elements/Button';
import Field from '@/components/elements/Field'; import Field from '@/components/elements/Field';
import Modal from '@/components/elements/Modal'; import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash'; import useFlash from '@/plugins/useFlash';
import { Form, Formik, FormikHelpers } from 'formik';
import tw from 'twin.macro';
import { object, string } from 'yup';
interface Values { interface Values {
name: string, name: string,
@ -26,8 +26,7 @@ const schema = object().shape({
export default () => { export default () => {
const [ visible, setVisible ] = useState(false); const [ visible, setVisible ] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { clearFlashes, clearAndAddHttpError } = useFlash();
const { mutate } = getRoles();
const appendRole = AdminContext.useStoreActions(actions => actions.roles.appendRole);
const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => { const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('role:create'); clearFlashes('role:create');
@ -35,7 +34,7 @@ export default () => {
createRole(name, description) createRole(name, description)
.then(role => { .then(role => {
appendRole(role); mutate(data => ({ ...data!, items: data!.items.concat(role) }), false);
setVisible(false); setVisible(false);
}) })
.catch(error => { .catch(error => {

View file

@ -1,39 +1,16 @@
import { action, Action } from 'easy-peasy'; import { action, Action } from 'easy-peasy';
import { Role } from '@/api/admin/roles/getRoles';
export interface AdminRoleStore { export interface AdminRoleStore {
data: Role[];
selectedRoles: number[]; selectedRoles: number[];
setRoles: Action<AdminRoleStore, Role[]>;
appendRole: Action<AdminRoleStore, Role>;
removeRole: Action<AdminRoleStore, number>;
setSelectedRoles: Action<AdminRoleStore, number[]>; setSelectedRoles: Action<AdminRoleStore, number[]>;
appendSelectedRole: Action<AdminRoleStore, number>; appendSelectedRole: Action<AdminRoleStore, number>;
removeSelectedRole: Action<AdminRoleStore, number>; removeSelectedRole: Action<AdminRoleStore, number>;
} }
const roles: AdminRoleStore = { const roles: AdminRoleStore = {
data: [],
selectedRoles: [], selectedRoles: [],
setRoles: action((state, payload) => {
state.data = payload;
}),
appendRole: action((state, payload) => {
if (state.data.find(role => role.id === payload.id)) {
state.data = state.data.map(role => role.id === payload.id ? payload : role);
} else {
state.data = [ ...state.data, payload ];
}
}),
removeRole: action((state, payload) => {
state.data = [ ...state.data.filter(role => role.id !== payload) ];
}),
setSelectedRoles: action((state, payload) => { setSelectedRoles: action((state, payload) => {
state.selectedRoles = payload; state.selectedRoles = payload;
}), }),