feat: add published tab and fix flickering in main menu (#695)

graasp · Jul 27, 2023 · a187372 · a187372
1 parent 848213e
commit a187372
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 51 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -10,6 +10,7 @@ import {
   HOME_PATH,
   ITEMS_PATH,
   MEMBER_PROFILE_PATH,
+  PUBLISHED_ITEMS_PATH,
   RECYCLE_BIN_PATH,
   REDIRECT_PATH,
   SHARED_ITEMS_PATH,
@@ -21,6 +22,7 @@ import { useCurrentUserContext } from './context/CurrentUserContext';
 import FavoriteItems from './main/FavoriteItems';
 import Home from './main/Home';
 import ItemScreen from './main/ItemScreen';
+import PublishedItems from './main/PublishedItems';
 import Redirect from './main/Redirect';
 import MemberProfileScreen from './member/MemberProfileScreen';
 
@@ -57,6 +59,10 @@ const App = (): JSX.Element => {
     RecycleBinScreen,
     withAuthorizationProps,
   );
+  const PublishedWithAuthorization = withAuthorization(
+    PublishedItems,
+    withAuthorizationProps,
+  );
 
   return (
     <Routes>
@@ -66,6 +72,10 @@ const App = (): JSX.Element => {
         path={FAVORITE_ITEMS_PATH}
         element={<FavoriteWithAuthorization />}
       />
+      <Route
+        path={PUBLISHED_ITEMS_PATH}
+        element={<PublishedWithAuthorization />}
+      />
       <Route path={buildItemPath()} element={<ItemScreen />} />
       <Route path={MEMBER_PROFILE_PATH} element={<MemberWithAuthorization />} />
       <Route path={RECYCLE_BIN_PATH} element={<RecycleWithAuthorization />} />

diff --git a/src/components/RecycleBinScreen.tsx b/src/components/RecycleBinScreen.tsx
@@ -50,7 +50,7 @@ const ToolbarActions = ({ selectedIds }: ToolbarActionsProps): JSX.Element => (
   </>
 );
 
-const RecycleBinScreen = (): JSX.Element => {
+const RecycleBinLoadableContent = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const {
     data: recycledEntries,
@@ -66,24 +66,26 @@ const RecycleBinScreen = (): JSX.Element => {
   }
 
   return (
-    <Main>
-      <Box mx={2}>
-        <ItemHeader showNavigation={false} />
-        <Items
-          id={RECYCLED_ITEMS_ID}
-          clickable={false}
-          title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
-          items={
-            recycledEntries?.map(({ item }) => item as ItemRecord) ?? List()
-          }
-          actions={RowActions}
-          ToolbarActions={ToolbarActions}
-          showThumbnails={false}
-          enableMemberships={false}
-        />
-      </Box>
-    </Main>
+    <Box mx={2}>
+      <ItemHeader showNavigation={false} />
+      <Items
+        id={RECYCLED_ITEMS_ID}
+        clickable={false}
+        title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
+        items={recycledEntries?.map(({ item }) => item as ItemRecord) ?? List()}
+        actions={RowActions}
+        ToolbarActions={ToolbarActions}
+        showThumbnails={false}
+        enableMemberships={false}
+      />
+    </Box>
   );
 };
 
+const RecycleBinScreen = (): JSX.Element => (
+  <Main>
+    <RecycleBinLoadableContent />
+  </Main>
+);
+
 export default RecycleBinScreen;
diff --git a/src/components/SharedItems.tsx b/src/components/SharedItems.tsx
@@ -16,7 +16,7 @@ import ItemHeader from './item/header/ItemHeader';
 import Items from './main/Items';
 import Main from './main/Main';
 
-const SharedItems = (): JSX.Element => {
+const SharedItemsLoadableContent = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { data: sharedItems, isLoading, isError } = hooks.useSharedItems();
 
@@ -29,18 +29,22 @@ const SharedItems = (): JSX.Element => {
   }
 
   return (
-    <Main>
-      <Box mx={2}>
-        <ItemHeader showNavigation={false} />
-        <Items
-          id={SHARED_ITEMS_ID}
-          title={translateBuilder(BUILDER.SHARED_ITEMS_TITLE)}
-          items={sharedItems ?? List()}
-          showCreator
-        />
-      </Box>
-    </Main>
+    <Box mx={2}>
+      <ItemHeader showNavigation={false} />
+      <Items
+        id={SHARED_ITEMS_ID}
+        title={translateBuilder(BUILDER.SHARED_ITEMS_TITLE)}
+        items={sharedItems ?? List()}
+        showCreator
+      />
+    </Box>
   );
 };
 
+const SharedItems = (): JSX.Element => (
+  <Main>
+    <SharedItemsLoadableContent />
+  </Main>
+);
+
 export default SharedItems;
diff --git a/src/components/main/Home.tsx b/src/components/main/Home.tsx
@@ -15,7 +15,7 @@ import Items from './Items';
 import Main from './Main';
 import NewItemButton from './NewItemButton';
 
-const Home = (): JSX.Element => {
+const HomeLoadableContent = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { data: ownItems, isLoading, isError, isSuccess } = hooks.useOwnItems();
 
@@ -28,23 +28,27 @@ const Home = (): JSX.Element => {
   }
 
   return (
-    <Main>
-      <UppyContextProvider enable={isSuccess}>
-        <FileUploader />
-        <Box mx={2}>
-          <ItemHeader showNavigation={false} />
-          <Items
-            id={OWNED_ITEMS_ID}
-            defaultSortedColumn={{ updatedAt: 'desc' }}
-            title={translateBuilder(BUILDER.MY_ITEMS_TITLE)}
-            items={ownItems}
-            headerElements={[<NewItemButton key="newButton" />]}
-            ToolbarActions={ItemActionsRenderer}
-          />
-        </Box>
-      </UppyContextProvider>
-    </Main>
+    <UppyContextProvider enable={isSuccess}>
+      <FileUploader />
+      <Box mx={2}>
+        <ItemHeader showNavigation={false} />
+        <Items
+          id={OWNED_ITEMS_ID}
+          defaultSortedColumn={{ updatedAt: 'desc' }}
+          title={translateBuilder(BUILDER.MY_ITEMS_TITLE)}
+          items={ownItems}
+          headerElements={[<NewItemButton key="newButton" />]}
+          ToolbarActions={ItemActionsRenderer}
+        />
+      </Box>
+    </UppyContextProvider>
   );
 };
 
+const Home = (): JSX.Element => (
+  <Main>
+    <HomeLoadableContent />
+  </Main>
+);
+
 export default Home;
diff --git a/src/components/main/MainMenu.tsx b/src/components/main/MainMenu.tsx
@@ -3,19 +3,20 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import FolderIcon from '@mui/icons-material/Folder';
 import FolderSharedIcon from '@mui/icons-material/FolderShared';
 import Star from '@mui/icons-material/Star';
-import { styled } from '@mui/material';
+import { styled, useTheme } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 
 import { useLocation, useNavigate } from 'react-router';
 
 import { BUILDER } from '@graasp/translations';
-import { MainMenu as GraaspMainMenu, MenuItem } from '@graasp/ui';
+import { MainMenu as GraaspMainMenu, LibraryIcon, MenuItem } from '@graasp/ui';
 
 import { TUTORIALS_LINK } from '../../config/constants';
 import { useBuilderTranslation } from '../../config/i18n';
 import {
   FAVORITE_ITEMS_PATH,
   HOME_PATH,
+  PUBLISHED_ITEMS_PATH,
   RECYCLE_BIN_PATH,
   SHARED_ITEMS_PATH,
 } from '../../config/paths';
@@ -47,6 +48,9 @@ const MainMenu = (): JSX.Element => {
   const { pathname } = useLocation();
   const { data: member } = useCurrentUserContext();
 
+  const theme = useTheme();
+  const iconColor = theme.palette.action.active;
+
   const goTo = (path: string) => {
     navigate(path);
   };
@@ -91,6 +95,18 @@ const MainMenu = (): JSX.Element => {
           text={translateBuilder(BUILDER.FAVORITE_ITEMS_TITLE)}
           icon={<Star />}
         />
+        <MenuItem
+          onClick={() => goTo(PUBLISHED_ITEMS_PATH)}
+          selected={pathname === PUBLISHED_ITEMS_PATH}
+          text="Published items"
+          icon={
+            <LibraryIcon
+              primaryColor={iconColor}
+              secondaryColor="#fff"
+              size={24}
+            />
+          }
+        />
         <MenuItem
           onClick={() => goTo(RECYCLE_BIN_PATH)}
           selected={pathname === RECYCLE_BIN_PATH}

diff --git a/src/components/main/PublishedItems.tsx b/src/components/main/PublishedItems.tsx
@@ -0,0 +1,63 @@
+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';
+
+const PublishedItemsDisplay = ({ member }: { member: Member }): JSX.Element => {
+  const { t: translateBuilder } = useBuilderTranslation();
+  const {
+    data: sharedItems,
+    isLoading,
+    isError,
+  } = hooks.usePublishedItemsForMember(member.id);
+
+  if (isError) {
+    return <ErrorAlert id={PUBLISHED_ITEMS_ERROR_ALERT_ID} />;
+  }
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <Box mx={2}>
+      <ItemHeader showNavigation={false} />
+      <Items
+        id={PUBLISHED_ITEMS_ID}
+        title={translateBuilder(BUILDER.PUBLISHED_ITEMS_TITLE)}
+        items={sharedItems ?? List()}
+      />
+    </Box>
+  );
+};
+
+const PublishedItems = (): JSX.Element => {
+  const { data: member, isError } = useCurrentUserContext();
+
+  if (!member || isError) {
+    return <ErrorAlert id={PUBLISHED_ITEMS_ERROR_ALERT_ID} />;
+  }
+
+  return (
+    <Main>
+      <PublishedItemsDisplay member={member} />
+    </Main>
+  );
+};
+
+export default PublishedItems;
diff --git a/src/config/paths.ts b/src/config/paths.ts
@@ -3,6 +3,7 @@ import { GRAASP_PERFORM_HOST } from './constants';
 export const HOME_PATH = '/';
 export const SHARED_ITEMS_PATH = '/shared';
 export const FAVORITE_ITEMS_PATH = '/favorite';
+export const PUBLISHED_ITEMS_PATH = '/published';
 export const SIGN_UP_PATH = '/signUp';
 export const ITEMS_PATH = '/items';
 export const buildItemPath = (id = ':itemId'): string => `${ITEMS_PATH}/${id}`;

diff --git a/src/config/selectors.ts b/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';

diff --git a/yarn.lock b/yarn.lock
@@ -3443,7 +3443,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:
@@ -3452,7 +3452,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.22.6":
+"@babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.22.6":
   version: 7.22.6
   resolution: "@babel/runtime@npm:7.22.6"
   dependencies: