fix: empty email field after invite completes

graasp · Apr 26, 2022 · 994df52 · 994df52
1 parent b6f6b21
commit 994df52
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/cypress/integration/memberships/createItemMembership.spec.js b/cypress/integration/memberships/createItemMembership.spec.js
@@ -1,10 +1,13 @@
 import { PERMISSION_LEVELS } from '../../../src/enums';
 import { buildItemPath } from '../../../src/config/paths';
-import { buildShareButtonId } from '../../../src/config/selectors';
+import {
+  buildShareButtonId,
+  SHARE_ITEM_EMAIL_INPUT_ID,
+} from '../../../src/config/selectors';
 import { SAMPLE_ITEMS } from '../../fixtures/items';
 import { MEMBERS } from '../../fixtures/members';
 
-const shareItem = ({ member, permission, id }) => {
+const shareItem = ({ id, member, permission }) => {
   cy.get(`#${buildShareButtonId(id)}`).click();
 
   cy.fillShareForm({ member, permission });
@@ -28,5 +31,8 @@ describe('Create Membership', () => {
       expect(body?.permission).to.equal(permission);
       expect(body?.memberId).to.equal(member.id);
     });
+
+    // check that the email field is emptied after sharing completes
+    cy.get(`#${SHARE_ITEM_EMAIL_INPUT_ID}`).should('be.empty');
   });
 });
diff --git a/src/components/item/sharing/CreateItemMembershipForm.js b/src/components/item/sharing/CreateItemMembershipForm.js
@@ -34,17 +34,17 @@ const useStyles = makeStyles((theme) => ({
 
 const CreateItemMembershipForm = ({ id }) => {
   const [mailError, setMailError] = useState(false);
+  const [email, setEmail] = useState('');
   const mutation = useMutation(MUTATION_KEYS.SHARE_ITEM);
   const { t } = useTranslation();
   const classes = useStyles();
 
   // refs
-  let email = '';
   let permission = '';
 
   const checkSubmission = () => {
     // check mail validity
-    if (!validator.isEmail(email.value)) {
+    if (!validator.isEmail(email)) {
       setMailError(t('This mail is not valid'));
       return false;
     }
@@ -60,23 +60,26 @@ const CreateItemMembershipForm = ({ id }) => {
     if (checkSubmission()) {
       mutation.mutate({
         id,
-        email: email.value,
+        email,
         permission: permission.value,
       });
-      email = '';
+      setEmail('');
     }
   };
 
+  const onChangeEmail = ({ target }) => {
+    setEmail(target.value);
+  };
+
   return (
-    <Grid container spacing={1} alignItems="center" justify="center">
+    <Grid container spacing={1} alignItems="center" justifyContent="center">
       <Grid item xs={7}>
         <TextField
           className={classes.emailInput}
           id={SHARE_ITEM_EMAIL_INPUT_ID}
           variant="outlined"
-          inputRef={(c) => {
-            email = c;
-          }}
+          value={email}
+          onChange={onChangeEmail}
           label={t('Email')}
           error={Boolean(mailError)}
           helperText={mailError}