feat: use item lang instead of category lang (#712)

* feat: use item lang instead of category lang * refactor: fix tests * refactor: apply PR requested changes
graasp · Oct 25, 2024 · 5977824 · 5977824
1 parent cb94f3d
commit 5977824
Show file tree

Hide file tree

Showing 21 changed files with 418 additions and 348 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -39,6 +39,7 @@
     "curly": "error",
     "@typescript-eslint/indent": "off",
     "@typescript-eslint/brace-style": "off",
+    "import/prefer-default-export": "off",
     "no-underscore-dangle": [
       "error",
       {

diff --git a/cypress/e2e/allCollections/allCollections.cy.ts b/cypress/e2e/allCollections/allCollections.cy.ts
@@ -1,17 +1,20 @@
 import { CategoryType } from '@graasp/sdk';
-import { namespaces } from '@graasp/translations';
+import { langs, namespaces } from '@graasp/translations';
 
-import { i18nConfig } from '../../../src/config/i18n';
+import { LIBRARY_NAMESPACE, i18nConfig } from '../../../src/config/i18n';
 import { ALL_COLLECTIONS_ROUTE } from '../../../src/config/routes';
 import {
   ALL_COLLECTIONS_GRID_ID,
   ALL_COLLECTIONS_TITLE_ID,
   ENABLE_IN_DEPTH_SEARCH_CHECKBOX_ID,
+  SEARCH_FILTER_LANG_ID,
+  SEARCH_FILTER_POPPER_LANG_ID,
   buildCategoryOptionSelector,
   buildCollectionCardGridId,
   buildSearchFilterCategoryId,
   buildSearchFilterPopperButtonId,
 } from '../../../src/config/selectors';
+import LIBRARY from '../../../src/langs/constants';
 import { SAMPLE_CATEGORIES } from '../../fixtures/categories';
 import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
 import { PUBLISHED_ITEMS } from '../../fixtures/items';
@@ -45,17 +48,10 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
         'contain.text',
         i18n.t(CategoryType.Discipline, { ns: namespaces.categories }),
       );
-      cy.get(`#${buildSearchFilterCategoryId(CategoryType.Language)}`).should(
+      cy.get(`#${SEARCH_FILTER_LANG_ID}`).should(
         'contain.text',
-        i18n.t(CategoryType.Language, { ns: namespaces.categories }),
+        i18n.t(LIBRARY.SEARCH_FILTER_LANG_TITLE, { ns: LIBRARY_NAMESPACE }),
       );
-      // todo: add back when license filtering is enabled
-      // cy.get(`#${buildSearchFilterCategoryId(CATEGORY_TYPES.LICENSE)}`).should(
-      //   'contain.text',
-      //   // todo: add translations
-      //   // i18n.t(CATEGORIES.EDUCATION_LEVEL, { ns: namespaces.categories }),
-      //   'License',
-      // );
 
       // verify 2 item cards are displayed (without children)
       cy.get(`#${ALL_COLLECTIONS_GRID_ID}`);
@@ -75,11 +71,7 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
 
     it('display menu options', () => {
       cy.wait(['@getCategories']);
-      [
-        CategoryType.Level,
-        CategoryType.Discipline,
-        CategoryType.Language,
-      ].forEach((categoryType) => {
+      [CategoryType.Level, CategoryType.Discipline].forEach((categoryType) => {
         cy.get(
           `#not-sticky button#${buildSearchFilterPopperButtonId(categoryType)}`,
         )
@@ -97,6 +89,16 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
       });
     });
 
+    it('display language options', () => {
+      cy.wait(['@getCategories']);
+      cy.get(`#not-sticky button#${SEARCH_FILTER_POPPER_LANG_ID}`)
+        .filter(':visible')
+        .click();
+      Object.entries(langs).forEach((l, idx) => {
+        cy.get(buildCategoryOptionSelector(idx)).contains(l[1]);
+      });
+    });
+
     it.skip('scroll to bottom and search should pop out', () => {
       cy.get(`#${ALL_COLLECTIONS_GRID_ID}`);
 

diff --git a/package.json b/package.json
@@ -33,8 +33,8 @@
     "@emotion/react": "11.13.3",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.13.0",
-    "@graasp/query-client": "5.0.0",
-    "@graasp/sdk": "4.32.1",
+    "@graasp/query-client": "5.1.0",
+    "@graasp/sdk": "4.33.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.40.0",
     "@graasp/ui": "5.4.0",

diff --git a/src/components/collection/Collection.tsx b/src/components/collection/Collection.tsx
@@ -4,7 +4,7 @@ import { validate } from 'uuid';
 
 import { useContext, useEffect } from 'react';
 
-import { Box } from '@mui/material';
+import { Box, Skeleton } from '@mui/material';
 
 import {
   AccountType,
@@ -27,11 +27,7 @@ type Props = {
 };
 const Collection = ({ id }: Props) => {
   const { hooks, mutations } = useContext(QueryClientContext);
-  const {
-    data: collection,
-    isLoading: isLoadingItem,
-    isError,
-  } = hooks.useItem(id);
+  const { data: collection, isLoading: isLoadingItem } = hooks.useItem(id);
   const { data: currentMember } = hooks.useCurrentMember();
   // get item published
   const {
@@ -68,47 +64,50 @@ const Collection = ({ id }: Props) => {
     );
   }
 
-  if (isError) {
+  if (currentMember?.type === AccountType.Guest) {
+    return null;
+  }
+  if (collection) {
     return (
-      <Box id={id} p={5}>
-        <Error code={ERROR_UNEXPECTED_ERROR_CODE} />
-      </Box>
+      <>
+        <UnpublishedItemAlert
+          itemId={id}
+          canRead={canRead}
+          canPublish={canPublish}
+          isPublished={
+            isLoadingPublishedEntry ||
+            (Boolean(itemPublishEntry) && !isErrorPublishedEntry)
+          }
+          currentMember={currentMember}
+        />
+        <Box
+          id={id}
+          px={{
+            xs: 0,
+            sm: 2,
+            md: 5,
+          }}
+          py={5}
+        >
+          <Summary
+            collection={collection}
+            publishedRoot={itemPublishEntry}
+            isLoading={isLoadingItem}
+            totalViews={itemPublishEntry?.totalViews ?? 0}
+          />
+        </Box>
+      </>
     );
   }
 
-  if (currentMember?.type === AccountType.Guest) {
-    return null;
+  if (isLoadingItem) {
+    return <Skeleton />;
   }
 
   return (
-    <>
-      <UnpublishedItemAlert
-        itemId={id}
-        canRead={canRead}
-        canPublish={canPublish}
-        isPublished={
-          isLoadingPublishedEntry ||
-          (!!itemPublishEntry && !isErrorPublishedEntry)
-        }
-        currentMember={currentMember}
-      />
-      <Box
-        id={id}
-        px={{
-          xs: 0,
-          sm: 2,
-          md: 5,
-        }}
-        py={5}
-      >
-        <Summary
-          collection={collection}
-          publishedRoot={itemPublishEntry}
-          isLoading={isLoadingItem}
-          totalViews={itemPublishEntry?.totalViews ?? 0}
-        />
-      </Box>
-    </>
+    <Box id={id} p={5}>
+      <Error code={ERROR_UNEXPECTED_ERROR_CODE} />
+    </Box>
   );
 };
 

diff --git a/src/components/collection/summary/Summary.tsx b/src/components/collection/summary/Summary.tsx
@@ -16,7 +16,7 @@ import SummaryDetails from './SummaryDetails';
 import SummaryHeader from './SummaryHeader';
 
 type SummaryProps = {
-  collection?: DiscriminatedItem;
+  collection: DiscriminatedItem;
   publishedRoot?: ItemPublished | null;
   isLoading: boolean;
   totalViews: number;

diff --git a/src/components/collection/summary/SummaryDetails.tsx b/src/components/collection/summary/SummaryDetails.tsx
@@ -18,6 +18,7 @@ import {
   DiscriminatedItem,
   formatDate,
 } from '@graasp/sdk';
+import { DEFAULT_LANG, langs } from '@graasp/translations';
 
 import { CATEGORY_COLORS, UrlSearch } from '../../../config/constants';
 import {
@@ -90,7 +91,7 @@ const CategoryDisplay = ({
 };
 
 type SummaryDetailsProps = {
-  collection?: DiscriminatedItem;
+  collection: DiscriminatedItem;
   publishedRootItem?: DiscriminatedItem;
   lang: string;
   isLoading: boolean;
@@ -126,10 +127,9 @@ const SummaryDetails: React.FC<SummaryDetailsProps> = ({
     ?.filter((c) => c.category.type === CategoryType.Discipline)
     ?.map((c) => c.category);
 
-  // TODO: should use item language
-  const languages = itemCategories
-    ?.filter((c) => c.category.type === CategoryType.Language)
-    ?.map((c) => c.category);
+  const langKey = collection.lang in langs ? collection.lang : DEFAULT_LANG;
+  // @ts-ignore
+  const langValue = langs[langKey];
 
   return (
     <Grid
@@ -175,17 +175,10 @@ const SummaryDetails: React.FC<SummaryDetailsProps> = ({
       <Grid size={{ xs: 12, sm: 6, md: 4 }}>
         <DetailCard id={SUMMARY_LANGUAGES_CONTAINER_ID}>
           <Typography variant="body1" fontWeight="bold">
-            {t(LIBRARY.COLLECTION_LANGUAGES_TITLE)}
+            {t(LIBRARY.COLLECTION_LANGUAGE_TITLE)}
           </Typography>
           <Stack gap={1} direction="row" flexWrap="wrap">
-            {languages ? (
-              <CategoryDisplay
-                categories={languages}
-                emptyText={t(LIBRARY.SUMMARY_DETAILS_NO_LANGUAGES)}
-              />
-            ) : (
-              <Skeleton width="100%" />
-            )}
+            <Chip label={langValue} />
           </Stack>
         </DetailCard>
       </Grid>

diff --git a/src/components/filters/CategoryFilter.tsx b/src/components/filters/CategoryFilter.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Category } from '@graasp/sdk';
+
+import { useCategoriesTranslation } from '../../config/i18n';
+import {
+  buildSearchFilterCategoryId,
+  buildSearchFilterPopperButtonId,
+} from '../../config/selectors';
+import { Filter, FilterProps } from './Filter';
+
+type CategoryFilterProps = {
+  category: string;
+  title: string;
+  options?: Category[];
+  selectedOptionIds: FilterProps['selectedOptionIds'];
+  onOptionChange: (key: string, newValue: boolean) => void;
+  onClearOptions: () => void;
+  isLoading: boolean;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export function CategoryFilter({
+  category,
+  title,
+  onOptionChange,
+  onClearOptions,
+  options,
+  selectedOptionIds,
+  isLoading,
+}: CategoryFilterProps) {
+  const { t: translateCategories } = useCategoriesTranslation();
+
+  return (
+    <Filter
+      id={buildSearchFilterCategoryId(category)}
+      buttonId={buildSearchFilterPopperButtonId(category)}
+      title={title}
+      isLoading={isLoading}
+      options={options?.map((c) => [c.id, translateCategories(c.name)])}
+      selectedOptionIds={selectedOptionIds}
+      onOptionChange={onOptionChange}
+      onClearOptions={onClearOptions}
+    />
+  );
+}