refactor: apply typeorm changes

package.json

@@ -147,7 +147,6 @@
     "wait-on": "7.0.1"
   },
   "resolutions": {
-    "@graasp/ui": "0.11.1",
     "@mui/icons-material": "5.11.0",
     "@mui/material": "5.11.6",
     "ansi-html": "0.0.8",
@@ -159,7 +158,9 @@
     "node-forge": "1.3.0",
     "nth-check": "2.0.1",
     "react-error-overlay": "6.0.9",
-    "@graasp/translations": "1.4.0"
+    "@graasp/translations": "1.4.0",
+    "@graasp/query-client": "github:graasp/graasp-query-client#typeorm",
+    "@graasp/sdk": "github:graasp/graasp-sdk#typeorm"
   },
   "packageManager": "[email protected]"
 }

src/components/common/Chatbox.tsx

@@ -12,7 +12,7 @@ import { hooks, useMutation } from '../../config/queryClient';
 import { CHATBOX_ID, CHATBOX_INPUT_BOX_ID } from '../../config/selectors';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
 
-const { useItemChat, useMembers, useAvatar, useItemMemberships } = hooks;
+const { useItemChat, useAvatar, useItemMemberships } = hooks;
 
 type Props = {
   item: ItemRecord;
@@ -47,7 +47,7 @@ const Chatbox = ({ item }: Props): JSX.Element => {
 
   // only show export chat when user has admin right on the item
   const isAdmin =
-    itemPermissions?.find((perms) => perms.memberId === currentMember.id)
+    itemPermissions?.find((perms) => perms.member.id === currentMember.id)
       ?.permission === PermissionLevel.Admin;
 
   return (

src/components/item/ItemMetadataContent.tsx

@@ -106,7 +106,7 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
                 {translateBuilder(BUILDER.ITEM_METADATA_CREATED_AT_TITLE)}
               </TableCell>
               <TableCell align="right">
-                {formatDate(item.createdAt, {
+                {formatDate(item.createdAt as unknown as string, {
                   locale: i18n.language,
                   defaultValue: translateCommon(COMMON.UNKNOWN_DATE),
                 })}
@@ -117,7 +117,7 @@ const ItemMetadataContent = ({ item }: Props): JSX.Element => {
                 {translateBuilder(BUILDER.ITEM_METADATA_UPDATED_AT_TITLE)}
               </TableCell>
               <TableCell align="right">
-                {formatDate(item.updatedAt, {
+                {formatDate(item.updatedAt as unknown as string, {
                   locale: i18n.language,
                   defaultValue: translateCommon(COMMON.UNKNOWN_DATE),
                 })}

src/components/item/header/ItemHeaderActions.tsx

@@ -58,7 +58,6 @@ const ItemHeaderActions = ({
   const { data: member } = useCurrentUserContext();
 
   const { data: memberships } = useItemMemberships(id);
-  console.log(memberships, id);
   const canEdit = isItemUpdateAllowedForUser({
     memberships,
     memberId: member?.id,

src/components/item/publish/CategorySelection.tsx

@@ -1,26 +1,27 @@
+import { List } from 'immutable';
+
 import { AutocompleteChangeReason, Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
 import { FC, SyntheticEvent } from 'react';
 import { useParams } from 'react-router';
 
-import { MUTATION_KEYS } from '@graasp/query-client';
-import { Category } from '@graasp/sdk';
+import { Category, CategoryType } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 import { Loader } from '@graasp/ui';
 
 import {
   useBuilderTranslation,
   useCategoriesTranslation,
 } from '../../../config/i18n';
-import { hooks, useMutation } from '../../../config/queryClient';
+import { hooks, mutations } from '../../../config/queryClient';
 import { LIBRARY_SETTINGS_CATEGORIES_ID } from '../../../config/selectors';
 import { sortByName } from '../../../utils/item';
 import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import DropdownMenu from './DropdownMenu';
 
-const { useCategoryTypes, useCategories, useItemCategories } = hooks;
-const { POST_ITEM_CATEGORY, DELETE_ITEM_CATEGORY } = MUTATION_KEYS;
+const { useCategories, useItemCategories } = hooks;
+const { usePostItemCategory, useDeleteItemCategory } = mutations;
 
 const SELECT_OPTION = 'selectOption';
 const REMOVE_OPTION = 'removeOption';
@@ -32,22 +33,8 @@ type Props = {
 const CategorySelection: FC<Props> = ({ disabled }) => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { t: translateCategories } = useCategoriesTranslation();
-  const { mutate: createItemCategory } = useMutation<
-    any,
-    any,
-    {
-      itemId: string;
-      categoryId: string;
-    }
-  >(POST_ITEM_CATEGORY);
-  const { mutate: deleteItemCategory } = useMutation<
-    any,
-    any,
-    {
-      itemId: string;
-      itemCategoryId: string;
-    }
-  >(DELETE_ITEM_CATEGORY);
+  const { mutate: createItemCategory } = usePostItemCategory();
+  const { mutate: deleteItemCategory } = useDeleteItemCategory();
 
   // user
   const { isLoading: isMemberLoading } = useCurrentUserContext();
@@ -58,84 +45,72 @@ const CategorySelection: FC<Props> = ({ disabled }) => {
   // get itemCategories, categoryTypes and allCategories
   const { data: itemCategories, isLoading: isItemCategoriesLoading } =
     useItemCategories(itemId);
-  const { data: categoryTypes, isLoading: isCategoryTypesLoading } =
-    useCategoryTypes();
   const { data: allCategories, isLoading: isCategoriesLoading } =
     useCategories();
 
   // process data
   const categoriesMap = allCategories?.groupBy((entry) => entry.type);
 
-  if (
-    isMemberLoading ||
-    isItemCategoriesLoading ||
-    isCategoryTypesLoading ||
-    isCategoriesLoading
-  ) {
+  if (isMemberLoading || isItemCategoriesLoading || isCategoriesLoading) {
     return <Loader />;
   }
 
-  const handleChange =
-    (_valueList: Category[]) =>
-    (
-      event: SyntheticEvent,
-      _values: Category[],
-      reason: AutocompleteChangeReason,
-    ) => {
-      if (!itemId) {
-        console.error('No item id is defined');
-        return;
-      }
+  if (!categoriesMap.size) {
+    return null;
+  }
 
-      const target = event.target as HTMLOptionElement;
-      if (reason === SELECT_OPTION) {
-        // post new category
-        const newCategoryId = target.getAttribute('data-id');
-        createItemCategory({
+  const handleChange = (
+    event: SyntheticEvent,
+    _values: Category[],
+    reason: AutocompleteChangeReason,
+  ) => {
+    if (!itemId) {
+      console.error('No item id is defined');
+      return;
+    }
+
+    const target = event.target as HTMLOptionElement;
+    if (reason === SELECT_OPTION) {
+      // post new category
+      const newCategoryId = target.getAttribute('data-id');
+      createItemCategory({
+        itemId,
+        categoryId: newCategoryId,
+      });
+    } else if (reason === REMOVE_OPTION) {
+      const deletedCategoryId = target.getAttribute('data-id');
+      const itemCategoryIdToDelete = itemCategories.find(
+        ({ category }) => category.id === deletedCategoryId,
+      )?.id;
+      if (itemCategoryIdToDelete) {
+        deleteItemCategory({
           itemId,
-          categoryId: newCategoryId,
+          itemCategoryId: itemCategoryIdToDelete,
         });
-      } else if (reason === REMOVE_OPTION) {
-        const deletedCategoryId = target.getAttribute('data-id');
-        const itemCategoryIdToDelete = itemCategories.find(
-          ({ categoryId }) => categoryId === deletedCategoryId,
-        )?.id;
-        if (itemCategoryIdToDelete) {
-          deleteItemCategory({
-            itemId,
-            itemCategoryId: itemCategoryIdToDelete,
-          });
-        }
       }
-    };
+    }
+  };
 
   return (
     <Box mt={2} id={LIBRARY_SETTINGS_CATEGORIES_ID}>
       <Typography variant="h6" mt={2}>
         {translateBuilder(BUILDER.ITEM_CATEGORIES_SELECTION_TITLE)}
       </Typography>
-      {categoryTypes?.map(({ id, name }) => {
-        let values = categoriesMap?.get(id)?.toJS() as Category[];
-
-        values =
-          values
+      {List(categoriesMap)?.map(([type, categories]) => {
+        const values =
+          categories
             .map((c) => ({ ...c, name: translateCategories(c.name) }))
-            ?.sort(sortByName) ?? ([] as Category[]);
-
-        if (!values.length) {
-          return null;
-        }
+            ?.sort(sortByName) ?? List();
 
         return (
           <DropdownMenu
-            key={id}
+            key={type as CategoryType}
             disabled={disabled}
-            title={translateCategories(name)}
-            handleChange={handleChange(values)}
+            title={translateCategories(type)}
+            handleChange={handleChange}
             values={values}
-            // todo: fix with query client
-            selectedValues={itemCategories as any}
-            typeId={id}
+            selectedValues={itemCategories}
+            type={type}
           />
         );
       })}

src/components/item/publish/DropdownMenu.tsx

@@ -9,7 +9,8 @@ import Typography from '@mui/material/Typography';
 
 import { FC, SyntheticEvent } from 'react';
 
-import { Category, ItemCategory } from '@graasp/sdk';
+import { Category, CategoryType, ItemCategory } from '@graasp/sdk';
+import { CategoryRecord, ItemCategoryRecord } from '@graasp/sdk/frontend';
 import { BUILDER } from '@graasp/translations';
 
 import { useBuilderTranslation } from '../../../config/i18n';
@@ -21,10 +22,10 @@ import {
 
 type Props = {
   disabled: boolean;
-  typeId: string;
+  type: CategoryType;
   title: string;
-  values: Category[];
-  selectedValues?: List<ItemCategory>;
+  values: List<CategoryRecord>;
+  selectedValues?: List<ItemCategoryRecord>;
   handleChange: (
     _event: SyntheticEvent,
     value: Category[],
@@ -34,31 +35,35 @@ type Props = {
 
 const DropdownMenu: FC<Props> = ({
   disabled,
-  typeId,
+  type,
   title,
   handleChange,
   values,
   selectedValues,
 }) => {
   const { t: translateBuilder } = useBuilderTranslation();
 
+  if (!values.size) {
+    return null;
+  }
+
   const selected = values.filter(({ id }) =>
-    selectedValues?.find(({ categoryId }) => categoryId === id),
+    selectedValues?.find(({ category }) => category.id === id),
   );
 
   return (
     <Box mt={2}>
-      <Typography variant="body1" id={buildCategorySelectionTitleId(typeId)}>
+      <Typography variant="body1" id={buildCategorySelectionTitleId(type)}>
         {title}
       </Typography>
       <Autocomplete
         sx={{ width: 'auto', maxWidth: '85%' }}
         disabled={disabled || !values}
         multiple
         disableClearable
-        id={buildCategorySelectionId(typeId)}
-        value={selected}
-        options={values}
+        id={buildCategorySelectionId(type)}
+        value={selected.toArray()}
+        options={values.toArray()}
         getOptionLabel={(option: Category) => option.name}
         onChange={handleChange}
         renderInput={(params) => (
@@ -75,7 +80,7 @@ const DropdownMenu: FC<Props> = ({
             {...props}
             // necessary for test
             data-id={option.id}
-            id={buildCategorySelectionOptionId(typeId, option.id)}
+            id={buildCategorySelectionOptionId(type, option.id)}
           >
             {option.name}
           </li>