feat: add email notification checkbox

graasp · Jul 4, 2022 · bd87388 · bd87388
1 parent 4810c06
commit bd87388
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 19 deletions.
diff --git a/src/components/item/publish/CoEditorSettings.js b/src/components/item/publish/CoEditorSettings.js
@@ -9,11 +9,10 @@ import {
   RadioGroup,
   FormControlLabel,
 } from '@material-ui/core';
-import { useParams } from 'react-router';
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { useMutation } from '../../../config/queryClient';
 import { CurrentUserContext } from '../../context/CurrentUserContext';
-import { DISPLAY_CO_EDITOR_OPTIONS } from '../../../config/constants';
+import { DISPLAY_CO_EDITORS_OPTIONS } from '../../../config/constants';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -36,14 +35,13 @@ const CoEditorSettings = ({ item }) => {
   const { isLoading: isMemberLoading } = useContext(CurrentUserContext);
 
   // current item
-  const { itemId } = useParams();
-
+  const itemId = item?.get('id');
   const settings = item?.get('settings');
   const itemName = item?.get('name');
 
   // by default, co editors will not be displayed
   const [optionValue, setOptionValue] = useState(
-    DISPLAY_CO_EDITOR_OPTIONS.NO.value,
+    DISPLAY_CO_EDITORS_OPTIONS.NO.value,
   );
 
   useEffect(() => {
@@ -71,7 +69,7 @@ const CoEditorSettings = ({ item }) => {
       </Typography>
       <Typography variant="body1">
         {t(
-          'Do you want to display co-editors after published? All users with edit permission will be displayed.',
+          'Do you want to display co-editors on the publication page? All users with edit or admin permissions will be displayed.',
         )}
       </Typography>
       <RadioGroup
@@ -80,16 +78,15 @@ const CoEditorSettings = ({ item }) => {
         value={optionValue}
         onChange={handleChange}
       >
-        <FormControlLabel
-          value={DISPLAY_CO_EDITOR_OPTIONS.YES.value}
-          control={<Radio color="primary" />}
-          label={t(DISPLAY_CO_EDITOR_OPTIONS.YES.label)}
-        />
-        <FormControlLabel
-          value={DISPLAY_CO_EDITOR_OPTIONS.NO.value}
-          control={<Radio color="primary" />}
-          label={t(DISPLAY_CO_EDITOR_OPTIONS.NO.label)}
-        />
+        {
+          Object.values(DISPLAY_CO_EDITORS_OPTIONS).map((option) => (
+            <FormControlLabel
+              value={option.value}
+              control={<Radio color="primary" />}
+              label={t(option.label)}
+            />
+          ))
+        }
       </RadioGroup>
     </>
   );

diff --git a/src/components/item/publish/ItemPublishButton.js b/src/components/item/publish/ItemPublishButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 import { Loader } from '@graasp/ui';
-import { Button, makeStyles, Typography } from '@material-ui/core';
+import { Button, makeStyles, Typography, FormControlLabel, Checkbox } from '@material-ui/core';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { useMutation, hooks } from '../../../config/queryClient';
@@ -20,7 +20,7 @@ import {
 } from '../../../config/selectors';
 
 const { POST_ITEM_TAG, DELETE_ITEM_TAG } = MUTATION_KEYS;
-const { useTags, useItemTags } = hooks;
+const { useTags, useItemTags, useItemMemberships } = hooks;
 
 const useStyles = makeStyles((theme) => ({
   button: {
@@ -38,6 +38,7 @@ const ItemPublishButton = ({ item, isValidated }) => {
   // current item
   const { itemId } = useParams();
 
+  // item tags
   const { mutate: postItemTag } = useMutation(POST_ITEM_TAG);
   const { mutate: deleteItemTag } = useMutation(DELETE_ITEM_TAG);
 
@@ -48,8 +49,15 @@ const ItemPublishButton = ({ item, isValidated }) => {
     isError,
   } = useItemTags(itemId);
 
+  // item memberships for co-editors
+  const { data: memberships } = useItemMemberships([itemId]);
+
+  // TODO: send emails to co-editors, this can be moved to backend
+  const coEditors = memberships.filter((membership) => membership?.permission === "admin" || membership?.permission === "write");
+
   const [isPublished, setIsPublished] = useState(false);
   const [isDisabled, setIsDisabled] = useState(false);
+  const [emailNotification, setEmailNotification] = useState(false);
 
   // update state variables depending on fetch values
   useEffect(() => {
@@ -97,6 +105,10 @@ const ItemPublishButton = ({ item, isValidated }) => {
     }
   };
 
+  const toggleEmailNotification = () => {
+    setEmailNotification(!emailNotification);
+  }
+
   return (
     <>
       <Button
@@ -119,6 +131,19 @@ const ItemPublishButton = ({ item, isValidated }) => {
       >
         {t('Unpublish')}
       </Button>
+      <div>
+        <FormControlLabel
+          control={(
+            <Checkbox
+              checked={emailNotification}
+              onChange={toggleEmailNotification}
+              name="emailNotification"
+              color="primary"
+            />
+          )}
+          label="Send email notifications to all co-editors"
+        />
+      </div>
       {isPublished && (
         <Typography variant="body1">
           {t(

diff --git a/src/config/constants.js b/src/config/constants.js
@@ -254,7 +254,7 @@ export const MEMBERSHIP_TABLE_ROW_HEIGHT = 75;
 // signin page path from auth host
 export const SIGN_IN_PATH = buildSignInPath({ host: AUTHENTICATION_HOST });
 
-export const DISPLAY_CO_EDITOR_OPTIONS = {
+export const DISPLAY_CO_EDITORS_OPTIONS = {
   YES: {
     value: 'yes',
     label: 'Yes',