From f0738aca27c336620bf289ba2041df86bbdc1753 Mon Sep 17 00:00:00 2001
From: Christoph Lienhard <christoph-lienhard@gmx.de>
Date: Sun, 13 Jun 2021 11:54:16 +0200
Subject: [PATCH] #20 Refetch AllPersons on changeRole

Cache update seems too complicated since there is more
than one field "allPerson" when only the cached query
witch sorts by role needs to be updated.

Automatically refetching the query solves the problem
sufficiently good.
---
 redaktions-app/src/components/ChangeRole.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/redaktions-app/src/components/ChangeRole.tsx b/redaktions-app/src/components/ChangeRole.tsx
index d4b05b3..1469148 100644
--- a/redaktions-app/src/components/ChangeRole.tsx
+++ b/redaktions-app/src/components/ChangeRole.tsx
@@ -2,31 +2,30 @@ import React from "react";
 import { IconButton, MenuItem } from "@material-ui/core";
 import Menu from "@material-ui/core/Menu";
 import EditIcon from "@material-ui/icons/Edit";
-import { UppercaseUserRole, UPPERCASE_USER_ROLES } from "../jwt/jwt";
+import { UPPERCASE_USER_ROLES, UppercaseUserRole } from "../jwt/jwt";
 import { useMutation } from "@apollo/client";
-import { useHistory } from "react-router-dom";
 import {
+  CHANGE_ROLE,
   ChangeRoleResponse,
   ChangeRoleVariables,
-  CHANGE_ROLE,
 } from "../backend/mutations/userRole";
+import { useSnackbar } from "notistack";
+import { GET_PERSONS_SORTED_BY_ROLE } from "../backend/queries/person";
 
 interface ChangeRoleProps {
   currentRole: UppercaseUserRole;
   currentUserRowId: number;
 }
-
 export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
-  const history = useHistory();
+  const { enqueueSnackbar } = useSnackbar();
   const otherRoles = UPPERCASE_USER_ROLES.filter(
     (role) => role != props.currentRole
   );
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
-
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -34,21 +33,22 @@ export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
     CHANGE_ROLE,
     {
       onCompleted() {
-        console.log("Role changed");
-        history.go(0);
         handleClose();
       },
       onError(e) {
         console.error(e);
         handleClose();
+        enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {
+          variant: "error",
+        });
       },
+      refetchQueries: [{ query: GET_PERSONS_SORTED_BY_ROLE }],
     }
   );
-
   const displayRole = (role: UppercaseUserRole) => {
     switch (role) {
       case "CANDYMAT_CANDIDATE":
-        return "zu * machen";
+        return "zu Kandidat:in machen";
       case "CANDYMAT_EDITOR":
         return "zu RedakteurIn machen";
       case "CANDYMAT_PERSON":