fix: provide dynamic titles for pages (#1153)

graasp · Apr 17, 2024 · fc1daa1 · fc1daa1
1 parent c3ae649
commit fc1daa1
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 99 deletions.
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "react-csv": "2.2.2",
     "react-dom": "18.2.0",
     "react-ga4": "2.1.0",
+    "react-helmet": "6.1.0",
     "react-i18next": "14.1.0",
     "react-image-crop": "11.0.5",
     "react-qr-code": "2.0.12",
@@ -126,6 +127,7 @@
     "@types/react": "18.2.61",
     "@types/react-csv": "1.1.10",
     "@types/react-dom": "18.2.19",
+    "@types/react-helmet": "^6",
     "@types/uuid": "9.0.8",
     "@types/validator": "13.11.9",
     "@typescript-eslint/eslint-plugin": "7.4.0",

diff --git a/src/components/item/ItemMain.tsx b/src/components/item/ItemMain.tsx
@@ -1,3 +1,5 @@
+import { Helmet } from 'react-helmet';
+
 import { Box, Divider, Typography, styled } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
@@ -52,32 +54,37 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
   const { isChatboxMenuOpen, setIsChatboxMenuOpen } = useLayoutContext();
 
   return (
-    <Box id={id} p={2} className={ITEM_MAIN_CLASS} height="100%">
-      {isChatboxMenuOpen && (
-        <ItemPanel open={isChatboxMenuOpen}>
-          <DrawerHeader
-            handleDrawerClose={() => {
-              setIsChatboxMenuOpen(false);
-            }}
-            // todo
-            direction="rtl"
-          >
-            <Typography variant="h6">
-              {translateBuilder(BUILDER.ITEM_CHATBOX_TITLE, {
-                name: item.name,
-              })}
-            </Typography>
-          </DrawerHeader>
-          <Divider />
-          <Chatbox item={item} />
-        </ItemPanel>
-      )}
-      <StyledContainer open={isChatboxMenuOpen}>
-        <ItemHeader showNavigation />
+    <>
+      <Helmet>
+        <title>{item.name}</title>
+      </Helmet>
+      <Box id={id} p={2} className={ITEM_MAIN_CLASS} height="100%">
+        {isChatboxMenuOpen && (
+          <ItemPanel open={isChatboxMenuOpen}>
+            <DrawerHeader
+              handleDrawerClose={() => {
+                setIsChatboxMenuOpen(false);
+              }}
+              // todo
+              direction="rtl"
+            >
+              <Typography variant="h6">
+                {translateBuilder(BUILDER.ITEM_CHATBOX_TITLE, {
+                  name: item.name,
+                })}
+              </Typography>
+            </DrawerHeader>
+            <Divider />
+            <Chatbox item={item} />
+          </ItemPanel>
+        )}
+        <StyledContainer open={isChatboxMenuOpen}>
+          <ItemHeader showNavigation />
 
-        {children}
-      </StyledContainer>
-    </Box>
+          {children}
+        </StyledContainer>
+      </Box>
+    </>
   );
 };
 

diff --git a/src/components/pages/BookmarkedItemsScreen.tsx b/src/components/pages/BookmarkedItemsScreen.tsx
@@ -1,3 +1,5 @@
+import { Helmet } from 'react-helmet';
+
 import { Box } from '@mui/material';
 
 import { Loader } from '@graasp/ui';
@@ -27,14 +29,19 @@ const BookmarkedItemsLoadableContent = (): JSX.Element | null => {
 
   if (filteredData) {
     return (
-      <Box m={2}>
-        <ItemHeader showNavigation={false} />
-        <Items
-          id={BOOKMARKED_ITEMS_ID}
-          title={translateBuilder(BUILDER.BOOKMARKED_ITEMS_TITLE)}
-          items={filteredData.map((d) => d.item)}
-        />
-      </Box>
+      <>
+        <Helmet>
+          <title>{translateBuilder(BUILDER.BOOKMARKED_ITEMS_TITLE)}</title>
+        </Helmet>
+        <Box m={2}>
+          <ItemHeader showNavigation={false} />
+          <Items
+            id={BOOKMARKED_ITEMS_ID}
+            title={translateBuilder(BUILDER.BOOKMARKED_ITEMS_TITLE)}
+            items={filteredData.map((d) => d.item)}
+          />
+        </Box>
+      </>
     );
   }
 

diff --git a/src/components/pages/HomeScreen.tsx b/src/components/pages/HomeScreen.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import { Box, LinearProgress } from '@mui/material';
 
@@ -104,35 +105,40 @@ const HomeLoadableContent = (): JSX.Element => {
 
   if (accessibleItems) {
     return (
-      <UppyContextProvider enable={isSuccess}>
-        <FileUploader />
-        <Box p={2} height="100%">
-          <ItemHeader showNavigation={false} />
-          <Items
-            id={ACCESSIBLE_ITEMS_TABLE_ID}
-            title={translateBuilder(BUILDER.MY_ITEMS_TITLE)}
-            items={accessibleItems.data}
-            headerElements={[
-              itemSearch.input,
-              <NewItemButton key="newButton" />,
-            ]}
-            ToolbarActions={ItemActions}
-            onShowOnlyMeChange={onShowOnlyMeChange}
-            showOnlyMe={showOnlyMe}
-            page={page}
-            setPage={setPage}
-            totalCount={accessibleItems.totalCount}
-            onSortChanged={onSortChanged}
-            pageSize={ITEM_PAGE_SIZE}
-            showDropzoneHelper
-          />
-          {isFetching && (
-            <Box sx={{ width: '100%' }}>
-              <LinearProgress />
-            </Box>
-          )}
-        </Box>
-      </UppyContextProvider>
+      <>
+        <Helmet>
+          <title>{translateBuilder(BUILDER.MY_ITEMS_TITLE)}</title>
+        </Helmet>
+        <UppyContextProvider enable={isSuccess}>
+          <FileUploader />
+          <Box p={2} height="100%">
+            <ItemHeader showNavigation={false} />
+            <Items
+              id={ACCESSIBLE_ITEMS_TABLE_ID}
+              title={translateBuilder(BUILDER.MY_ITEMS_TITLE)}
+              items={accessibleItems.data}
+              headerElements={[
+                itemSearch.input,
+                <NewItemButton key="newButton" />,
+              ]}
+              ToolbarActions={ItemActions}
+              onShowOnlyMeChange={onShowOnlyMeChange}
+              showOnlyMe={showOnlyMe}
+              page={page}
+              setPage={setPage}
+              totalCount={accessibleItems.totalCount}
+              onSortChanged={onSortChanged}
+              pageSize={ITEM_PAGE_SIZE}
+              showDropzoneHelper
+            />
+            {isFetching && (
+              <Box sx={{ width: '100%' }}>
+                <LinearProgress />
+              </Box>
+            )}
+          </Box>
+        </UppyContextProvider>
+      </>
     );
   }
 

diff --git a/src/components/pages/PublishedItemsScreen.tsx b/src/components/pages/PublishedItemsScreen.tsx
@@ -1,3 +1,5 @@
+import { Helmet } from 'react-helmet';
+
 import { Box } from '@mui/material';
 
 import { Loader } from '@graasp/ui';
@@ -29,14 +31,19 @@ const PublishedItemsLoadableContent = (): JSX.Element | null => {
 
   if (filteredData) {
     return (
-      <Box mx={2}>
-        <ItemHeader showNavigation={false} />
-        <Items
-          id={PUBLISHED_ITEMS_ID}
-          title={translateBuilder(BUILDER.PUBLISHED_ITEMS_TITLE)}
-          items={filteredData ?? []}
-        />
-      </Box>
+      <>
+        <Helmet>
+          <title>{translateBuilder(BUILDER.PUBLISHED_ITEMS_TITLE)}</title>
+        </Helmet>
+        <Box mx={2}>
+          <ItemHeader showNavigation={false} />
+          <Items
+            id={PUBLISHED_ITEMS_ID}
+            title={translateBuilder(BUILDER.PUBLISHED_ITEMS_TITLE)}
+            items={filteredData ?? []}
+          />
+        </Box>
+      </>
     );
   }
 

diff --git a/src/components/pages/RecycledItemsScreen.tsx b/src/components/pages/RecycledItemsScreen.tsx
@@ -1,3 +1,5 @@
+import { Helmet } from 'react-helmet';
+
 import { Box } from '@mui/material';
 
 import { Loader } from '@graasp/ui';
@@ -58,20 +60,25 @@ const RecycleBinLoadableContent = (): JSX.Element | null => {
 
   if (filteredData) {
     return (
-      <Box id={RECYCLED_ITEMS_ROOT_CONTAINER} mx={2}>
-        <ItemHeader showNavigation={false} />
-        <Items
-          id={RECYCLED_ITEMS_ID}
-          clickable={false}
-          title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
-          items={filteredData}
-          actions={RowActions}
-          ToolbarActions={ToolbarActions}
-          showThumbnails={false}
-          enableMemberships={false}
-          totalCount={recycledItems?.length}
-        />
-      </Box>
+      <>
+        <Helmet>
+          <title>{translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}</title>
+        </Helmet>
+        <Box id={RECYCLED_ITEMS_ROOT_CONTAINER} mx={2}>
+          <ItemHeader showNavigation={false} />
+          <Items
+            id={RECYCLED_ITEMS_ID}
+            clickable={false}
+            title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
+            items={filteredData}
+            actions={RowActions}
+            ToolbarActions={ToolbarActions}
+            showThumbnails={false}
+            enableMemberships={false}
+            totalCount={recycledItems?.length}
+          />
+        </Box>
+      </>
     );
   }
 

diff --git a/src/components/pages/SharedItemsScreen.tsx b/src/components/pages/SharedItemsScreen.tsx
@@ -1,3 +1,5 @@
+import { Helmet } from 'react-helmet';
+
 import { Alert, Box } from '@mui/material';
 
 import { Loader } from '@graasp/ui';
@@ -25,21 +27,26 @@ const SharedItemsLoadableContent = (): JSX.Element | null => {
 
   if (filteredItems) {
     return (
-      <Box id={SHARED_ITEMS_ROOT_CONTAINER} mx={2}>
-        <Alert severity="warning" sx={{ mt: 3 }}>
-          {translateBuilder(
-            "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.",
-          )}
-        </Alert>
-        <ItemHeader showNavigation={false} />
-        <Items
-          id={SHARED_ITEMS_ID}
-          title={translateBuilder(BUILDER.SHARED_ITEMS_TITLE)}
-          items={filteredItems}
-          canMove={false}
-          totalCount={filteredItems?.length}
-        />
-      </Box>
+      <>
+        <Helmet>
+          <title>{translateBuilder(BUILDER.SHARED_ITEMS_TITLE)}</title>
+        </Helmet>
+        <Box id={SHARED_ITEMS_ROOT_CONTAINER} mx={2}>
+          <Alert severity="warning" sx={{ mt: 3 }}>
+            {translateBuilder(
+              "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.",
+            )}
+          </Alert>
+          <ItemHeader showNavigation={false} />
+          <Items
+            id={SHARED_ITEMS_ID}
+            title={translateBuilder(BUILDER.SHARED_ITEMS_TITLE)}
+            items={filteredItems}
+            canMove={false}
+            totalCount={filteredItems?.length}
+          />
+        </Box>
+      </>
     );
   }
   if (isError) {