continue fixing builder

graasp · Jan 15, 2025 · 9d08a24 · 9d08a24
1 parent c866e5a
commit 9d08a24
Show file tree

Hide file tree

Showing 21 changed files with 105 additions and 184 deletions.
diff --git a/src/locales/en/enums.json b/src/locales/en/enums.json
@@ -58,5 +58,9 @@
   "uncollapse-item": "un-collapse item",
   "member-login": "member login",
   "ask-reset-password": "request password reset",
-  "reset-password": "password reset"
+  "reset-password": "password reset",
+
+  "level": "Level",
+  "discipline": "Discipline",
+  "resource-type": "Resource Type"
 }
diff --git a/src/modules/builder/components/App.tsx b/src/modules/builder/components/App.tsx
diff --git a/src/modules/builder/components/input/MultiSelectTagChipInput.tsx b/src/modules/builder/components/input/MultiSelectTagChipInput.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import {
   Autocomplete,
   AutocompleteRenderGetTagProps,
@@ -12,7 +14,7 @@ import {
 
 import { DiscriminatedItem, TagCategory } from '@graasp/sdk';
 
-import { useBuilderTranslation, useEnumsTranslation } from '@/config/i18n';
+import { NS } from '@/config/constants';
 import { hooks } from '@/config/queryClient';
 import {
   MULTI_SELECT_CHIP_CONTAINER_ID,
@@ -34,7 +36,7 @@ export const MultiSelectTagChipInput = ({
   helpertext,
 }: Props): JSX.Element | null => {
   const { t } = useTranslation(NS.Builder);
-  const { t: translateEnums } = useEnumsTranslation();
+  const { t: translateEnums } = useTranslation(NS.Enums);
   const {
     currentValue,
     error,
@@ -62,7 +64,6 @@ export const MultiSelectTagChipInput = ({
           data-cy={buildMultiSelectChipsSelector(index)}
           variant="outlined"
           label={option}
-          // eslint-disable-next-line react/jsx-props-no-spreading
           {...getTagProps({ index })}
           onDelete={() => {
             const tagId = tagsPerCategory?.[tagCategory].find(
@@ -80,7 +81,6 @@ export const MultiSelectTagChipInput = ({
 
   const renderInput = (params: AutocompleteRenderInputParams) => (
     <TextField
-      // eslint-disable-next-line react/jsx-props-no-spreading
       {...params}
       variant="outlined"
       // show plural version

diff --git a/src/modules/builder/components/item/form/link/LinkForm.tsx b/src/modules/builder/components/item/form/link/LinkForm.tsx
@@ -26,7 +26,6 @@ import {
   buildLinkExtra,
   getLinkThumbnailUrl,
 } from '@graasp/sdk';
-import { COMMON } from '@graasp/translations';
 import { Button, LinkCard, LinkItem } from '@graasp/ui';
 
 import { NS } from '@/config/constants';

diff --git a/src/modules/builder/components/item/publish/EditItemDescription.tsx b/src/modules/builder/components/item/publish/EditItemDescription.tsx
@@ -1,19 +1,20 @@
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import EditIcon from '@mui/icons-material/Edit';
 import WarningIcon from '@mui/icons-material/Warning';
 import { IconButton, Stack, Tooltip, Typography } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
-import { TextDisplay } from '@graasp/ui';
+import { TextDisplay, useButtonColor } from '@graasp/ui';
 
-import { useDataSyncContext } from '@/components/context/DataSyncContext';
-import useModalStatus from '@/components/hooks/useModalStatus';
-import DebouncedTextEditor from '@/components/input/DebouncedTextEditor';
-import { WARNING_COLOR } from '@/config/constants';
-import { useBuilderTranslation } from '@/config/i18n';
+import { NS } from '@/config/constants';
 import { mutations } from '@/config/queryClient';
-import { BUILDER } from '@/langs/constants';
+
+import { useDataSyncContext } from '~builder/components/context/DataSyncContext';
+import useModalStatus from '~builder/components/hooks/useModalStatus';
+import DebouncedTextEditor from '~builder/components/input/DebouncedTextEditor';
+import { BUILDER } from '~builder/langs/constants';
 
 import PublicationModal from './PublicationModal';
 
@@ -28,6 +29,7 @@ export const EditItemDescription = ({ item }: Props): JSX.Element => {
   const { t } = useTranslation(NS.Builder);
   const { computeStatusFor } = useDataSyncContext();
   const { isOpen, openModal, closeModal } = useModalStatus();
+  const { color } = useButtonColor('warning');
 
   const {
     mutate: updateItem,
@@ -69,7 +71,7 @@ export const EditItemDescription = ({ item }: Props): JSX.Element => {
     <Tooltip
       title={t(BUILDER.LIBRARY_SETTINGS_ITEM_DESCRIPTION_MISSING_WARNING)}
     >
-      <WarningIcon htmlColor={WARNING_COLOR} />
+      <WarningIcon htmlColor={color} />
     </Tooltip>
   ) : null;
 
@@ -85,7 +87,7 @@ export const EditItemDescription = ({ item }: Props): JSX.Element => {
   const descriptionContent = (
     <Stack direction="row" alignItems="center" spacing={1} pb={1}>
       <TextDisplay
-        content={description || t(BUILDER.LIBRARY_SETTINGS_ITEM_NO_DESCRIPTION)}
+        content={description ?? t(BUILDER.LIBRARY_SETTINGS_ITEM_NO_DESCRIPTION)}
       />
       {noDescriptionToolTip}
     </Stack>

diff --git a/src/modules/builder/components/item/publish/PublicVisibilityModal.tsx b/src/modules/builder/components/item/publish/PublicVisibilityModal.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import {
   Button,
   Dialog,
@@ -9,10 +11,11 @@ import {
 
 import { PackedItem } from '@graasp/sdk';
 
-import { SETTINGS } from '@/config/constants';
-import { useBuilderTranslation } from '@/config/i18n';
+import { NS } from '@/config/constants';
 import { PUBLIC_VISIBILITY_MODAL_VALIDATE_BUTTON } from '@/config/selectors';
-import { BUILDER } from '@/langs/constants';
+
+import { SETTINGS } from '~builder/config/constants';
+import { BUILDER } from '~builder/langs/constants';
 
 import useVisibility from '../../hooks/useVisibility';
 

diff --git a/src/modules/builder/components/item/publish/customizedTags/PublishCustomizedTags.tsx b/src/modules/builder/components/item/publish/customizedTags/PublishCustomizedTags.tsx
@@ -1,14 +1,16 @@
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import WarningIcon from '@mui/icons-material/Warning';
 import { Tooltip } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
+import { useButtonColor } from '@graasp/ui';
 
-import { useDataSyncContext } from '@/components/context/DataSyncContext';
-import { WARNING_COLOR } from '@/config/constants';
-import { useBuilderTranslation } from '@/config/i18n';
-import { BUILDER } from '@/langs/constants';
+import { NS } from '@/config/constants';
+
+import { useDataSyncContext } from '~builder/components/context/DataSyncContext';
+import { BUILDER } from '~builder/langs/constants';
 
 import CustomizedTags from './CustomizedTags';
 import { useTagsManager } from './useTagsManager';
@@ -33,6 +35,7 @@ export const PublishCustomizedTags = ({
   });
   const { computeStatusFor } = useDataSyncContext();
   const showWarning = !tags?.length;
+  const { color } = useButtonColor('warning');
 
   useEffect(
     () => computeStatusFor(SYNC_STATUS_KEY, { isLoading, isSuccess, isError }),
@@ -45,7 +48,7 @@ export const PublishCustomizedTags = ({
 
       {showWarning && (
         <Tooltip title={t(BUILDER.ITEM_TAGS_MISSING_WARNING)}>
-          <WarningIcon htmlColor={WARNING_COLOR} />
+          <WarningIcon htmlColor={color} />
         </Tooltip>
       )}
     </>

diff --git a/src/modules/builder/components/item/publish/customizedTags/useTagsManager.tsx b/src/modules/builder/components/item/publish/customizedTags/useTagsManager.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { DiscriminatedItem, Tag, TagCategory } from '@graasp/sdk';
 
 import groupBy from 'lodash.groupby';
 
-import { useBuilderTranslation } from '@/config/i18n';
+import { NS } from '@/config/constants';
 import { hooks, mutations } from '@/config/queryClient';
-import { BUILDER } from '@/langs/constants';
 
 const EMPTY_STRING = '';
 type Props = {
@@ -65,7 +65,7 @@ export const useTagsManager = ({ itemId }: Props): UseMultiSelectChipInput => {
 
   const validateData = (tag: Pick<Tag, 'category' | 'name'>) => {
     if (valueExist(tag)) {
-      setError(t(BUILDER.CHIPS_ALREADY_EXIST, { element: tag.name }));
+      setError(t('CHIPS_ALREADY_EXIST', { element: tag.name }));
       return false;
     }
     setError(undefined);

diff --git a/src/modules/builder/components/item/publish/publicationButtons/PublishedChildrenButton.tsx b/src/modules/builder/components/item/publish/publicationButtons/PublishedChildrenButton.tsx
@@ -1,14 +1,15 @@
+import { useTranslation } from 'react-i18next';
+
 import { Alert } from '@mui/material';
 
-import { useBuilderTranslation } from '@/config/i18n';
-import { BUILDER } from '@/langs/constants';
+import { NS } from '@/config/constants';
 
 export const PublishedChildrenButton = (): JSX.Element => {
   const { t } = useTranslation(NS.Builder);
 
   return (
     <Alert severity="success">
-      {t(BUILDER.LIBRARY_SETTINGS_CHILD_PUBLISHED_STATUS)}
+      {t('LIBRARY_SETTINGS_CHILD_PUBLISHED_STATUS')}
     </Alert>
   );
 };

diff --git a/src/modules/builder/components/item/settings/ItemMetadataContent.tsx b/src/modules/builder/components/item/settings/ItemMetadataContent.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import { Box } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -13,23 +15,22 @@ import {
   getFileExtra,
   getS3FileExtra,
 } from '@graasp/sdk';
-import { COMMON } from '@graasp/translations';
 
-import { hooks } from '../../../config/queryClient';
-import {
-  ITEM_PANEL_NAME_ID,
-  ITEM_PANEL_TABLE_ID,
-} from '../../../config/selectors';
+import { NS } from '@/config/constants';
+import { hooks } from '@/config/queryClient';
+import { ITEM_PANEL_NAME_ID, ITEM_PANEL_TABLE_ID } from '@/config/selectors';
+
+import { useOutletContext } from '~builder/contexts/OutletContext';
+
 import { BUILDER } from '../../../langs/constants';
-import { OutletType } from '../../pages/item/type';
 import LanguageSelect from './LanguageSelect';
 
 const { useMember } = hooks;
 
 const ItemMetadataContent = (): JSX.Element => {
-  const { t: translateBuilder } = useTranslation(NS.Builder);
-  const { t: translateCommon } = useCommonTranslation();
-  const { item } = useOutletContext<OutletType>();
+  const { t: translateBuilder, i18n } = useTranslation(NS.Builder);
+  const { t: translateCommon } = useTranslation(NS.Common);
+  const { item } = useOutletContext();
 
   const { data: creator } = useMember(item?.creator?.id);
 
@@ -102,7 +103,7 @@ const ItemMetadataContent = (): JSX.Element => {
               <TableCell align="right">
                 {formatDate(item.createdAt, {
                   locale: i18n.language,
-                  defaultValue: translateCommon(COMMON.UNKNOWN_DATE),
+                  defaultValue: translateCommon('UNKNOWN_DATE'),
                 })}
               </TableCell>
             </TableRow>
@@ -113,7 +114,7 @@ const ItemMetadataContent = (): JSX.Element => {
               <TableCell align="right">
                 {formatDate(item.updatedAt, {
                   locale: i18n.language,
-                  defaultValue: translateCommon(COMMON.UNKNOWN_DATE),
+                  defaultValue: translateCommon('UNKNOWN_DATE'),
                 })}
               </TableCell>
             </TableRow>