fix: update settings

graasp · Apr 24, 2024 · df11b7e · df11b7e
1 parent 310c255
commit df11b7e
Show file tree

Hide file tree

Showing 20 changed files with 213 additions and 227 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@graasp/query-client": "3.5.0",
     "@graasp/sdk": "4.7.6",
     "@graasp/translations": "1.27.0",
-    "@graasp/ui": "4.15.1",
+    "@graasp/ui": "github:graasp/graasp-ui#update-table-for-background",
     "@mui/icons-material": "5.15.15",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.15",
@@ -50,6 +50,7 @@
     "lodash.isequal": "4.5.0",
     "lodash.partition": "4.6.0",
     "lodash.truncate": "4.4.2",
+    "lucide-react": "0.373.0",
     "papaparse": "5.4.1",
     "react": "18.2.0",
     "react-beautiful-dnd": "13.1.1",

diff --git a/src/components/common/MemberAvatar.tsx b/src/components/common/MemberAvatar.tsx
@@ -5,21 +5,18 @@ import { Avatar } from '@graasp/ui';
 import { AVATAR_ICON_HEIGHT } from '../../config/constants';
 import { useCommonTranslation } from '../../config/i18n';
 import { hooks } from '../../config/queryClient';
-import { buildMemberAvatarClass } from '../../config/selectors';
-import defaultImage from '../../resources/avatar.png';
+import { buildMemberAvatarId } from '../../config/selectors';
 
 type Props = {
   id?: string;
   maxWidth?: number;
   maxHeight?: number;
-  component?: string;
 };
 
 const MemberAvatar = ({
   id,
   maxWidth = AVATAR_ICON_HEIGHT,
   maxHeight = AVATAR_ICON_HEIGHT,
-  component = 'avatar',
 }: Props): JSX.Element => {
   const { t } = useCommonTranslation();
   const { data: member, isLoading } = hooks.useMember(id);
@@ -29,11 +26,11 @@ const MemberAvatar = ({
   });
   return (
     <Avatar
-      url={avatarUrl ?? defaultImage}
+      id={buildMemberAvatarId(member?.id)}
+      url={avatarUrl}
       isLoading={isLoading || isLoadingAvatar}
-      className={buildMemberAvatarClass(member?.id)}
       alt={member?.name ?? t(COMMON.AVATAR_DEFAULT_ALT)}
-      component={component}
+      component="avatar"
       maxWidth={maxWidth}
       maxHeight={maxHeight}
       sx={{ mx: 1 }}

diff --git a/src/components/item/publish/CustomizedTagsEdit.tsx b/src/components/item/publish/CustomizedTagsEdit.tsx
@@ -5,7 +5,7 @@ import type { TextFieldProps } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
 import { COMMON } from '@graasp/translations';
-import { Loader, SaveButton } from '@graasp/ui';
+import { SaveButton } from '@graasp/ui';
 
 import {
   useBuilderTranslation,
@@ -18,7 +18,6 @@ import {
   buildCustomizedTagsSelector,
 } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
-import { useCurrentUserContext } from '../../context/CurrentUserContext';
 
 type Props = { item: DiscriminatedItem; disabled?: boolean };
 
@@ -27,11 +26,7 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
   const { t: translateCommon } = useCommonTranslation();
   const { mutate: updateCustomizedTags } = mutations.useEditItem();
 
-  // user
-  const { isLoading: isMemberLoading } = useCurrentUserContext();
-
-  const settings = item?.settings;
-  const itemId = item?.id;
+  const { settings, id: itemId } = item;
 
   const [displayValues, setDisplayValues] = useState<string>();
 
@@ -41,8 +36,6 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
     }
   }, [settings]);
 
-  if (isMemberLoading) return <Loader />;
-
   const handleChange: TextFieldProps['onChange'] = (event) => {
     setDisplayValues(event.target.value);
   };
@@ -60,8 +53,8 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
   };
 
   return (
-    <>
-      <Typography variant="h6" mt={2}>
+    <Stack direction="column">
+      <Typography variant="h4">
         {translateBuilder(BUILDER.ITEM_TAGS_TITLE)}
       </Typography>
       <Typography variant="body1">
@@ -76,9 +69,9 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
             defaultValue={displayValues}
             onChange={handleChange}
             id={ITEM_TAGS_EDIT_INPUT_ID}
-            sx={{ mt: 1, mb: 1 }}
             disabled={disabled}
             fullWidth
+            size="small"
             placeholder={translateBuilder(BUILDER.ITEM_TAGS_PLACEHOLDER)}
           />
         </Stack>
@@ -108,7 +101,7 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
           </Stack>
         </>
       )}
-    </>
+    </Stack>
   );
 };
 

diff --git a/src/components/item/settings/AdminChatSettings.tsx b/src/components/item/settings/AdminChatSettings.tsx
@@ -1,14 +1,12 @@
-import { Stack, Typography } from '@mui/material';
-
 import { DiscriminatedItem, PermissionLevel } from '@graasp/sdk';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { BUILDER } from '@/langs/constants';
 
-import { hooks, mutations } from '../../../config/queryClient';
-import { ButtonVariants } from '../../../enums';
+import { hooks } from '../../../config/queryClient';
 import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import ClearChatButton from './ClearChatButton';
+import ItemSettingProperty from './ItemSettingProperty';
 
 type Props = {
   item: DiscriminatedItem;
@@ -25,23 +23,17 @@ const AdminChatSettings = ({ item }: Props): JSX.Element | null => {
     ? itemPermissions?.find((perms) => perms.member.id === currentMember.id)
         ?.permission === PermissionLevel.Admin
     : false;
-  const { mutate: clearChatHook } = mutations.useClearItemChat();
 
   if (!isAdmin || isLoadingItemPermissions) {
     return null;
   }
 
   return (
-    <Stack direction="column" spacing={1} mt={1}>
-      <Typography variant="h6">
-        {t(BUILDER.ITEM_SETTINGS_CHAT_SETTINGS_TITLE)}
-      </Typography>
-      <ClearChatButton
-        variant={ButtonVariants.Button}
-        chatId={itemId}
-        clearChat={clearChatHook}
-      />
-    </Stack>
+    <ItemSettingProperty
+      title={t(BUILDER.ITEM_SETTINGS_CHAT_SETTINGS_TITLE)}
+      valueText={t(BUILDER.ITEM_SETTINGS_CLEAR_CHAT_EXPLANATION)}
+      inputSetting={<ClearChatButton chatId={itemId} />}
+    />
   );
 };
 

diff --git a/src/components/item/settings/ClearChatButton.tsx b/src/components/item/settings/ClearChatButton.tsx
@@ -7,15 +7,14 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
   Stack,
-  Tooltip,
   Typography,
 } from '@mui/material';
 
 import { CHATBOX } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
+import { mutations } from '@/config/queryClient';
 import { BUILDER } from '@/langs/constants';
 
 import {
@@ -28,69 +27,38 @@ import {
   CLEAR_CHAT_DIALOG_ID,
   CLEAR_CHAT_SETTING_ID,
 } from '../../../config/selectors';
-import { ButtonVariants } from '../../../enums';
 
 type Props = {
   chatId: string;
-  clearChat?: (chatId: string) => void;
-  variant: ButtonVariants;
 };
 
-const ClearChatButton = ({
-  chatId,
-  clearChat,
-  variant = ButtonVariants.Button,
-}: Props): JSX.Element | null => {
+const ClearChatButton = ({ chatId }: Props): JSX.Element | null => {
   const [openConfirmation, setOpenConfirmation] = useState(false);
   const { t } = useChatboxTranslation();
   const { t: translateBuilder } = useBuilderTranslation();
-
-  if (!clearChat) {
-    return null;
-  }
+  const { mutate: clearChat } = mutations.useClearItemChat();
 
   const handleClearChat = () => {
     clearChat(chatId);
   };
 
-  const getContent = (contentType: ButtonVariants) => {
-    const text = t(CHATBOX.CLEAR_ALL_CHAT);
-
-    switch (contentType) {
-      case ButtonVariants.IconButton:
-        return (
-          <Tooltip title={text}>
-            <IconButton
-              id={CLEAR_CHAT_SETTING_ID}
-              onClick={() => setOpenConfirmation(true)}
-            >
-              <DeleteForever color="primary" />
-            </IconButton>
-          </Tooltip>
-        );
-      case ButtonVariants.Button:
-      default:
-        return (
+  return (
+    <>
+      <Stack direction="column" spacing={2}>
+        <Typography variant="body1" maxWidth="50ch">
+          {}
+        </Typography>
+        <Box width="max-content">
           <Button
             id={CLEAR_CHAT_SETTING_ID}
             startIcon={<DeleteForever />}
             variant="outlined"
             color="error"
             onClick={() => setOpenConfirmation(true)}
           >
-            <Typography noWrap>{text}</Typography>
+            <Typography noWrap>{t(CHATBOX.CLEAR_ALL_CHAT)}</Typography>
           </Button>
-        );
-    }
-  };
-
-  return (
-    <>
-      <Stack direction="column" spacing={2}>
-        <Typography variant="body1" maxWidth="50ch">
-          {translateBuilder(BUILDER.ITEM_SETTINGS_CLEAR_CHAT_EXPLANATION)}
-        </Typography>
-        <Box width="max-content">{getContent(variant)}</Box>
+        </Box>
       </Stack>
       <Dialog open={openConfirmation} id={CLEAR_CHAT_DIALOG_ID}>
         <DialogTitle>{t(CHATBOX.CLEAR_ALL_CHAT_TITLE)}</DialogTitle>

diff --git a/src/components/item/settings/FileSettings.tsx b/src/components/item/settings/FileSettings.tsx
@@ -1,13 +1,17 @@
-import { Box, SelectChangeEvent, Stack, Typography } from '@mui/material';
+import { SelectChangeEvent } from '@mui/material';
 
 import { LocalFileItemType, MaxWidth, S3FileItemType } from '@graasp/sdk';
 import { Select } from '@graasp/ui';
 
+import { Expand as ExpandIcon } from 'lucide-react';
+
 import { useBuilderTranslation, useEnumsTranslation } from '@/config/i18n';
 import { mutations } from '@/config/queryClient';
 import { FILE_SETTING_MAX_WIDTH_ID } from '@/config/selectors';
 import { BUILDER } from '@/langs/constants';
 
+import ItemSettingProperty from './ItemSettingProperty';
+
 const FileSettings = ({
   item,
 }: {
@@ -25,30 +29,23 @@ const FileSettings = ({
   };
 
   return (
-    <Box mt={4} my={4}>
-      <Typography variant="h6" m={0} p={0}>
-        {translateBuilder(BUILDER.SETTINGS_FILE_SETTINGS_TITLE)}
-      </Typography>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Stack>
-          <Typography variant="body1">
-            {translateBuilder('Maximum width')}
-          </Typography>
-        </Stack>
-        <Stack>
-          <Select
-            id={FILE_SETTING_MAX_WIDTH_ID}
-            size="small"
-            values={Object.values(MaxWidth).map((s) => ({
-              text: translateEnum(s),
-              value: s,
-            }))}
-            onChange={onChange}
-            defaultValue={item.settings.maxWidth || MaxWidth.ExtraLarge}
-          />
-        </Stack>
-      </Stack>
-    </Box>
+    <ItemSettingProperty
+      title={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
+      valueText={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
+      icon={<ExpandIcon />}
+      inputSetting={
+        <Select
+          id={FILE_SETTING_MAX_WIDTH_ID}
+          size="small"
+          values={Object.values(MaxWidth).map((s) => ({
+            text: translateEnum(s),
+            value: s,
+          }))}
+          onChange={onChange}
+          defaultValue={item.settings.maxWidth || MaxWidth.ExtraLarge}
+        />
+      }
+    />
   );
 };