feat: add switch of actions saving

graasp · Mar 8, 2023 · 6027d90 · 6027d90
1 parent def82e5
commit 6027d90
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 2 deletions.
diff --git a/src/components/item/settings/ItemSettings.tsx b/src/components/item/settings/ItemSettings.tsx
@@ -18,6 +18,7 @@ import {
   DEFAULT_COLLAPSIBLE_SETTING,
   DEFAULT_PINNED_SETTING,
   DEFAULT_RESIZE_SETTING,
+  DEFAULT_SAVE_ACTIONS_SETTING,
   DEFAULT_SHOW_CHATBOX_SETTING,
 } from '../../../config/constants';
 import { useBuilderTranslation } from '../../../config/i18n';
@@ -27,6 +28,7 @@ import {
   SETTINGS_COLLAPSE_TOGGLE_ID,
   SETTINGS_PINNED_TOGGLE_ID,
   SETTINGS_RESIZE_TOGGLE_ID,
+  SETTINGS_SAVE_ACTIONS_TOGGLE_ID,
 } from '../../../config/selectors';
 import AdminChatSettings from './AdminChatSettings';
 import LinkSettings from './LinkSettings';
@@ -173,6 +175,30 @@ const ItemSettings: FC<Props> = ({ item }) => {
     );
   };
 
+  const renderSaveActionsSetting = () => {
+    const control = (
+      <Tooltip title="Coming soon!">
+        <span>
+          <Switch
+            id={SETTINGS_SAVE_ACTIONS_TOGGLE_ID}
+            onChange={(e) => handleOnToggle(e, 'enableSaveActions')}
+            checked={
+              settingLocal?.enableSaveActions || DEFAULT_SAVE_ACTIONS_SETTING
+            }
+            color="primary"
+            disabled
+          />
+        </span>
+      </Tooltip>
+    );
+    return (
+      <FormControlLabel
+        label={translateBuilder(BUILDER.SETTINGS_SAVE_ACTIONS)}
+        control={control}
+      />
+    );
+  };
+
   return (
     <Container disableGutters sx={{ mt: 2 }}>
       <Typography variant="h4">
@@ -184,6 +210,7 @@ const ItemSettings: FC<Props> = ({ item }) => {
         {renderCollapseSetting()}
         {item.type === ItemType.APP && renderResizeSetting()}
         {renderChatSetting()}
+        {renderSaveActionsSetting()}
       </FormGroup>
       {item.type === ItemType.LINK && <LinkSettings item={item} />}
       <ThumbnailSetting item={item} />

diff --git a/src/components/member/MemberProfileScreen.tsx b/src/components/member/MemberProfileScreen.tsx
@@ -1,15 +1,28 @@
 import FileCopyIcon from '@mui/icons-material/FileCopy';
-import { Box, Grid, IconButton, Typography } from '@mui/material';
+import {
+  Box,
+  Grid,
+  IconButton,
+  Switch,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 
+import { MUTATION_KEYS } from '@graasp/query-client';
 import { ACCOUNT, COMMON } from '@graasp/translations';
 import { Loader } from '@graasp/ui';
 
-import { DEFAULT_EMAIL_FREQUENCY, DEFAULT_LANG } from '../../config/constants';
+import {
+  DEFAULT_EMAIL_FREQUENCY,
+  DEFAULT_LANG,
+  DEFAULT_MEMBER_PROFILE_SAVE_ACTIONS_SETTING,
+} from '../../config/constants';
 import i18n, {
   useAccountTranslation,
   useCommonTranslation,
 } from '../../config/i18n';
 import notifier from '../../config/notifier';
+import { useMutation } from '../../config/queryClient';
 import {
   MEMBER_PROFILE_EMAIL_FREQ_SWITCH_ID,
   MEMBER_PROFILE_EMAIL_ID,
@@ -18,6 +31,7 @@ import {
   MEMBER_PROFILE_MEMBER_ID_COPY_BUTTON_ID,
   MEMBER_PROFILE_MEMBER_ID_ID,
   MEMBER_PROFILE_MEMBER_NAME_ID,
+  MEMBER_PROFILE_SAVE_ACTIONS_TOGGLE_ID,
 } from '../../config/selectors';
 import { COPY_MEMBER_ID_TO_CLIPBOARD } from '../../types/clipboard';
 import { copyToClipboard } from '../../utils/clipboard';
@@ -34,6 +48,11 @@ const MemberProfileScreen = (): JSX.Element => {
   const { t } = useAccountTranslation();
   const { t: translateCommon } = useCommonTranslation();
   const { data: member, isLoading } = useCurrentUserContext();
+  const { mutate: editMember } = useMutation<
+    any,
+    any,
+    { id: string; extra: { enableSaveActions: boolean } }
+  >(MUTATION_KEYS.EDIT_MEMBER);
 
   if (isLoading) {
     return <Loader />;
@@ -50,6 +69,15 @@ const MemberProfileScreen = (): JSX.Element => {
     });
   };
 
+  const handleOnToggle = (event: { target: { checked: boolean } }): void => {
+    editMember({
+      id: member.id,
+      extra: {
+        enableSaveActions: event.target.checked,
+      },
+    });
+  };
+
   return (
     <Main>
       <Box sx={{ m: 2 }}>
@@ -127,6 +155,27 @@ const MemberProfileScreen = (): JSX.Element => {
                 />
               </Grid>
             </Grid>
+            <Grid container alignItems="center">
+              <Grid item xs={4}>
+                <Typography>{t(ACCOUNT.PROFILE_SAVE_ACTIONS_TITLE)}</Typography>
+              </Grid>
+              <Grid item xs={8}>
+                <Tooltip title="Coming soon!">
+                  <span>
+                    <Switch
+                      id={MEMBER_PROFILE_SAVE_ACTIONS_TOGGLE_ID}
+                      onChange={handleOnToggle}
+                      checked={
+                        member.extra?.enableSaveActions ||
+                        DEFAULT_MEMBER_PROFILE_SAVE_ACTIONS_SETTING
+                      }
+                      color="primary"
+                      disabled
+                    />
+                  </span>
+                </Tooltip>
+              </Grid>
+            </Grid>
           </Grid>
         </Grid>
 

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -82,6 +82,9 @@ export const DEFAULT_SHOW_CHATBOX_SETTING = false;
 export const DEFAULT_PINNED_SETTING = false;
 export const DEFAULT_COLLAPSIBLE_SETTING = false;
 export const DEFAULT_RESIZE_SETTING = false;
+export const DEFAULT_SAVE_ACTIONS_SETTING = true;
+
+export const DEFAULT_MEMBER_PROFILE_SAVE_ACTIONS_SETTING = true;
 
 export const DEFAULT_PERMISSION_LEVEL = PermissionLevel.Read;
 

diff --git a/src/config/selectors.ts b/src/config/selectors.ts
@@ -117,6 +117,8 @@ export const MEMBER_PROFILE_EMAIL_FREQ_SWITCH_ID =
   'memberProfileEmailFreqSwitch';
 export const MEMBER_PROFILE_MEMBER_ID_COPY_BUTTON_ID =
   'memberProfileMemberIdCopyButton';
+export const MEMBER_PROFILE_SAVE_ACTIONS_TOGGLE_ID =
+  'memberProfileSaveActionsToggle';
 export const REDIRECTION_CONTENT_ID = 'redirectionContent';
 export const ITEM_MEMBERSHIPS_CONTENT_ID = 'itemMembershipsContent';
 export const buildMemberAvatarClass = (id?: string): string =>
@@ -180,6 +182,7 @@ export const SETTINGS_PINNED_TOGGLE_ID = 'settingsPinnedToggle';
 export const SETTINGS_CHATBOX_TOGGLE_ID = 'settingsChatboxToggle';
 export const SETTINGS_COLLAPSE_TOGGLE_ID = 'settingsCollapseToggle';
 export const SETTINGS_RESIZE_TOGGLE_ID = 'settingsResizeToggle';
+export const SETTINGS_SAVE_ACTIONS_TOGGLE_ID = 'settingsSaveActionsToggle';
 
 export const ITEMS_TABLE_RESTORE_SELECTED_ITEMS_ID =
   'itemsTableRestoreSelectedItems';