feat: add published tab

package.json

@@ -145,7 +145,8 @@
     "nth-check": "2.1.1",
     "react-error-overlay": "6.0.11",
     "@types/react": "17.0.62",
-    "@svgr/webpack": "8.0.1"
+    "@svgr/webpack": "8.0.1",
+    "@graasp/translations": "portal:/home/momochan/dev/graasp/graasp-translations"
   },
   "packageManager": "[email protected]"
 }

src/components/main/ItemsTable.tsx

@@ -16,7 +16,6 @@ import { ItemRecord, ResultOfRecord } from '@graasp/sdk/frontend';
 import { BUILDER, COMMON } from '@graasp/translations';
 import { Table as GraaspTable } from '@graasp/ui/dist/table';
 
-import { ITEMS_TABLE_CONTAINER_HEIGHT } from '../../config/constants';
 import i18n, {
   useBuilderTranslation,
   useCommonTranslation,
@@ -273,7 +272,7 @@ const ItemsTable = ({
       <GraaspTable
         id={tableId}
         columnDefs={columnDefs}
-        tableHeight={ITEMS_TABLE_CONTAINER_HEIGHT}
+        // tableHeight={ITEMS_TABLE_CONTAINER_HEIGHT}
         rowData={rows.toJS() as DiscriminatedItem[]}
         emptyMessage={translateBuilder(BUILDER.ITEMS_TABLE_EMPTY_MESSAGE)}
         onDragEnd={onDragEnd}

src/components/main/PublishedItems.tsx

@@ -1,22 +1,61 @@
+import { List } from 'immutable';
+
 import { Box } from '@mui/material';
 
+import { Member } from '@graasp/sdk';
+import { BUILDER } from '@graasp/translations';
+import { Loader } from '@graasp/ui';
+
+import { useBuilderTranslation } from '../../config/i18n';
+import { hooks } from '../../config/queryClient';
+import {
+  PUBLISHED_ITEMS_ERROR_ALERT_ID,
+  PUBLISHED_ITEMS_ID,
+} from '../../config/selectors';
+import ErrorAlert from '../common/ErrorAlert';
+import { useCurrentUserContext } from '../context/CurrentUserContext';
 import ItemHeader from '../item/header/ItemHeader';
+import Items from './Items';
 import Main from './Main';
 
-// todo: remove
-/* eslint-disable */
+const PublishedItemsDisplay = ({ member }: { member: Member }): JSX.Element => {
+  const { t: translateBuilder } = useBuilderTranslation();
+  const {
+    data: sharedItems,
+    isLoading,
+    isError,
+  } = hooks.usePublishedItemsForMember(member.id);
 
-interface Props {}
+  if (isError) {
+    return <ErrorAlert id={PUBLISHED_ITEMS_ERROR_ALERT_ID} />;
+  }
+
+  if (isLoading) {
+    return <Loader />;
+  }
 
-const PublishedItems = ({}: Props): JSX.Element => {
   return (
     <Main>
       <Box mx={2}>
         <ItemHeader showNavigation={false} />
-        {}
+        <Items
+          id={PUBLISHED_ITEMS_ID}
+          title={translateBuilder(BUILDER.PUBLISHED_ITEMS_TITLE)}
+          items={sharedItems ?? List()}
+        />
       </Box>
     </Main>
   );
 };
 
+const PublishedItems = (): JSX.Element => {
+  const { data: member, isError } = useCurrentUserContext();
+
+  if (!member || isError) {
+    return <ErrorAlert id={PUBLISHED_ITEMS_ERROR_ALERT_ID} />;
+  }
+
+  return <PublishedItemsDisplay member={member} />;
+};
+
 export default PublishedItems;

src/config/selectors.ts

@@ -45,6 +45,7 @@ export const DELETE_MEMBER_BUTTON_ID = 'deleteMemberButton';
 
 export const MODE_GRID_BUTTON_ID = 'modeCardButton';
 export const SHARED_ITEMS_ID = 'sharedItems';
+export const PUBLISHED_ITEMS_ID = 'publishedItems';
 export const FAVORITE_ITEMS_ID = 'favoriteItems';
 export const RECYCLED_ITEMS_ID = 'recycledItems';
 export const OWNED_ITEMS_ID = 'ownedItems';
@@ -88,6 +89,7 @@ export const ITEM_LOGIN_SIGN_IN_MODE_ID = 'itemLoginSignInMode';
 export const ITEM_MAIN_CLASS = 'itemMain';
 export const HOME_ERROR_ALERT_ID = 'homeErrorAlert';
 export const SHARED_ITEMS_ERROR_ALERT_ID = 'sharedItemsErrorAlert';
+export const PUBLISHED_ITEMS_ERROR_ALERT_ID = 'publishedItemsErrorAlert';
 export const FAVORITE_ITEMS_ERROR_ALERT_ID = 'favoriteItemsErrorAlert';
 export const ITEM_MENU_SHORTCUT_BUTTON_CLASS = 'itemMenuShortcutButton';
 export const ITEM_MENU_FAVORITE_BUTTON_CLASS = 'itemMenuFavoriteButton';

yarn.lock

@@ -3834,7 +3834,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.22.3
   resolution: "@babel/runtime@npm:7.22.3"
   dependencies:
@@ -3843,6 +3843,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.20.6":
+  version: 7.22.6
+  resolution: "@babel/runtime@npm:7.22.6"
+  dependencies:
+    regenerator-runtime: ^0.13.11
+  checksum: e585338287c4514a713babf4fdb8fc2a67adcebab3e7723a739fc62c79cfda875b314c90fd25f827afb150d781af97bc16c85bfdbfa2889f06053879a1ddb597
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.21.9, @babel/template@npm:^7.3.3":
   version: 7.21.9
   resolution: "@babel/template@npm:7.21.9"
@@ -4768,14 +4777,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/translations@npm:1.15.0":
-  version: 1.15.0
-  resolution: "@graasp/translations@npm:1.15.0"
+"@graasp/translations@portal:/home/momochan/dev/graasp/graasp-translations::locator=graasp-builder%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@graasp/translations@portal:/home/momochan/dev/graasp/graasp-translations::locator=graasp-builder%40workspace%3A."
   dependencies:
     i18next: 22.4.15
-  checksum: e073b83374462f2d108f1d697b7aa14460d05f4ec2e10757db0e0a0a72574bff4721f997851d8e88e871f3704c8bcf887533590dd7acdcbf9d607109bae25c8a
   languageName: node
-  linkType: hard
+  linkType: soft
 
 "@graasp/ui@npm:3.2.1":
   version: 3.2.1