mutations

app/containers/Accounts/index.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import gql from 'graphql-tag';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery, useMutation } from '@apollo/react-hooks';
-import { Alert, Spin } from 'antd';
+import { Alert, Spin, notification } from 'antd';
 
 import { Accounts as AccountsPage } from '@tip-wlan/wlan-cloud-ui-library';
 
@@ -18,10 +18,99 @@ const GET_ALL_USERS = gql`
     }
   }
 `;
+const UPDATE_USER = gql`
+  mutation UpdateUser(
+    $id: Int!
+    $username: String!
+    $password: String!
+    $role: String!
+    $customerId: Int!
+    $lastModifiedTimestamp: String
+  ) {
+    updateUser(
+      id: $id
+      username: $username
+      password: $password
+      role: $role
+      customerId: $customerId
+      lastModifiedTimestamp: $lastModifiedTimestamp
+    ) {
+      id
+      username
+      role
+      customerId
+      lastModifiedTimestamp
+    }
+  }
+`;
+
+const CREATE_USER = gql`
+  mutation CreateUser($username: String!, $password: String!, $role: String!, $customerId: Int!) {
+    createUser(username: $username, password: $password, role: $role, customerId: $customerId) {
+      username
+      role
+      customerId
+    }
+  }
+`;
 
 const Accounts = () => {
   const { customerId } = useContext(UserContext);
-  const { loading, error, data } = useQuery(GET_ALL_USERS, { variables: { customerId } });
+  const { loading, error, data, refetch } = useQuery(GET_ALL_USERS, { variables: { customerId } });
+
+  const [createUser] = useMutation(CREATE_USER);
+  const [updateUser] = useMutation(UPDATE_USER);
+
+  const handleCreateUser = (email, password, role) => {
+    createUser({
+      variables: {
+        username: email,
+        password,
+        role,
+        customerId,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Account successfully created.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Account could not be created.',
+        })
+      );
+  };
+
+  const handleEditUser = (email, password, role) => {
+    const { id, lastModifiedTimestamp } = data.getAllUsers;
+    updateUser({
+      variables: {
+        id,
+        username: email,
+        password,
+        role,
+        customerId,
+        lastModifiedTimestamp,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Account successfully edited.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Account could not be updated.',
+        })
+      );
+  };
 
   if (loading) {
     return <Spin size="large" />;
@@ -31,6 +120,12 @@ const Accounts = () => {
     return <Alert message="Error" description="Failed to load Users." type="error" showIcon />;
   }
 
-  return <AccountsPage data={data.getAllUsers.items} />;
+  return (
+    <AccountsPage
+      data={data.getAllUsers.items}
+      onCreateUser={handleCreateUser}
+      onEditUser={handleEditUser}
+    />
+  );
 };
 export default Accounts;