feat: add language selections

graasp · May 24, 2022 · 69584ef · 69584ef
1 parent 28d0fd2
commit 69584ef
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 66 deletions.
diff --git a/cypress/integration/item/publish/categories.spec.js b/cypress/integration/item/publish/categories.spec.js
@@ -1,9 +1,8 @@
 import {
+  buildCategoriesSelectionValueSelector,
   buildCategoryMenuOptions,
+  buildCategorySelectionId,
   buildPublishButtonId,
-  CATEGORIES_SELECTION_VALUE_SELECTOR,
-  SHARE_ITEM_CATEGORY_DISCIPLINE,
-  SHARE_ITEM_CATEGORY_LEVEL,
 } from '../../../../src/config/selectors';
 import { buildItemPath } from '../../../../src/config/paths';
 import {
@@ -22,14 +21,14 @@ const findCategoryNameById = (id) =>
   SAMPLE_CATEGORIES.find((entry) => entry.id === id)?.name;
 
 export const deleteOption = (index) => {
-  cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`).click();
-  cy.get(buildCategoryMenuOptions(SHARE_ITEM_CATEGORY_LEVEL, index)).click();
+  cy.get(`#${buildCategorySelectionId('Level')}`).click();
+  cy.get(buildCategoryMenuOptions(buildCategorySelectionId('Level'), index)).click();
 };
 
 export const addOption = (index) => {
-  cy.get(`#${SHARE_ITEM_CATEGORY_DISCIPLINE}`).click();
+  cy.get(`#${buildCategorySelectionId('Discipline')}`).click();
   cy.get(
-    buildCategoryMenuOptions(SHARE_ITEM_CATEGORY_DISCIPLINE, index),
+    buildCategoryMenuOptions(buildCategorySelectionId('Discipline'), index),
   ).click();
 };
 
@@ -43,15 +42,15 @@ describe('Categories', () => {
 
   it('Display Item Categories', () => {
     // check for displaying value
-    const levelValue = cy.get(CATEGORIES_SELECTION_VALUE_SELECTOR);
+    const levelValue = cy.get(buildCategoriesSelectionValueSelector('Level'));
     levelValue
       .first()
       .contains(findCategoryNameById(item.categories[0].categoryId));
   });
 
   it('Display item without category', () => {
     // check for not displaying if no categories
-    const disciplineValue = cy.get(`#${SHARE_ITEM_CATEGORY_DISCIPLINE}`);
+    const disciplineValue = cy.get(`#${buildCategorySelectionId('Discipline')}`);
     disciplineValue.should('be.empty');
   });
 
@@ -91,7 +90,7 @@ describe('Categories permissions', () => {
     });
     cy.visit(buildItemPath(item.id));
     openPublishItemTab(item.id);
-    const levelValue = cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`);
+    const levelValue = cy.get(`#${buildCategorySelectionId('Level')}`);
     levelValue.should('not.exist');
   });
 
@@ -104,7 +103,7 @@ describe('Categories permissions', () => {
     });
     cy.visit(buildItemPath(item.id));
     openPublishItemTab(item.id);
-    const levelValue = cy.get(`#${SHARE_ITEM_CATEGORY_LEVEL}`);
+    const levelValue = cy.get(`#${buildCategorySelectionId('Level')}`);
     levelValue.should('not.exist');
   });
 });
diff --git a/src/components/item/publish/CategorySelection.js b/src/components/item/publish/CategorySelection.js
@@ -5,20 +5,14 @@ import { Map } from 'immutable';
 import { makeStyles } from '@material-ui/core/styles';
 import { useTranslation } from 'react-i18next';
 import Typography from '@material-ui/core/Typography';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/lab/Autocomplete';
 import { useParams } from 'react-router';
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { hooks, useMutation } from '../../../config/queryClient';
-import {
-  SHARE_ITEM_CATEGORY_LEVEL,
-  SHARE_ITEM_CATEGORY_DISCIPLINE,
-  SHARE_ITEM_CATEGORY_LEVEL_TITLE_ID,
-} from '../../../config/selectors';
 import { CurrentUserContext } from '../../context/CurrentUserContext';
 import ErrorAlert from '../../common/ErrorAlert';
 import { CATEGORY_TYPES } from '../../../config/constants';
 import { sortByName } from '../../../utils/item';
+import DropdownMenu from './DropdownMenu';
 
 const { useCategoryTypes, useCategories, useItemCategories } = hooks;
 const { POST_ITEM_CATEGORY, DELETE_ITEM_CATEGORY } = MUTATION_KEYS;
@@ -71,6 +65,11 @@ const CategorySelection = ({ item }) => {
     )
     ?.toArray()
     .sort(sortByName);
+  const languageList = categoriesMap
+    ?.get(
+      categoryTypes?.find((type) => type.name === CATEGORY_TYPES.LANGUAGE)?.id,
+    )
+    ?.toArray();
 
   // initialize state variable
   const [selectedValues, setSelectedValues] = useState([]);
@@ -132,51 +131,23 @@ const CategorySelection = ({ item }) => {
       <Typography variant="h6" className={classes.selection}>
         {t('Category')}
       </Typography>
-      <Typography variant="body1" id={SHARE_ITEM_CATEGORY_LEVEL_TITLE_ID}>
-        {t('Level')}
-      </Typography>
-      <Autocomplete
-        className={classes.dropMenu}
-        disabled={!levelList}
-        multiple
-        disableClearable
-        id={SHARE_ITEM_CATEGORY_LEVEL}
-        value={levelList?.filter((value) => selectedValues.includes(value))}
-        getOptionSelected={(option, value) => option.id === value.id}
-        options={levelList}
-        getOptionLabel={(option) => option.name}
-        onChange={handleChange('level')}
-        renderInput={(params) => (
-          <TextField
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...params}
-            variant="outlined"
-            placeholder={t('Please choose from list')}
-          />
-        )}
+      <DropdownMenu
+        title={t('Level')}
+        handleChange={handleChange('level')}
+        valueList={levelList}
+        selectedValues={selectedValues}
+      />
+      <DropdownMenu
+        title={t('Discipline')}
+        handleChange={handleChange('discipline')}
+        valueList={disciplineList}
+        selectedValues={selectedValues}
       />
-      <Typography variant="body1">{t('Discipline')}</Typography>
-      <Autocomplete
-        className={classes.dropMenu}
-        disabled={!levelList}
-        multiple
-        disableClearable
-        id={SHARE_ITEM_CATEGORY_DISCIPLINE}
-        value={disciplineList?.filter((value) =>
-          selectedValues.includes(value),
-        )}
-        getOptionSelected={(option, value) => option.id === value.id}
-        options={disciplineList}
-        getOptionLabel={(option) => option.name}
-        onChange={handleChange('discipline')}
-        renderInput={(params) => (
-          <TextField
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...params}
-            variant="outlined"
-            placeholder={t('Please choose from list')}
-          />
-        )}
+      <DropdownMenu
+        title={t('Language')}
+        handleChange={handleChange('language')}
+        valueList={languageList}
+        selectedValues={selectedValues}
       />
     </div>
   );

diff --git a/src/components/item/publish/DropdownMenu.js b/src/components/item/publish/DropdownMenu.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import { useTranslation } from 'react-i18next';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import {
+  buildCategorySelectionId,
+  buildCategorySelectionTitleId,
+} from '../../../config/selectors';
+import ErrorAlert from '../../common/ErrorAlert';
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    marginTop: theme.spacing(2),
+  },
+  selection: {
+    marginTop: theme.spacing(2),
+  },
+  dropMenu: {
+    width: 'auto',
+    maxWidth: '85%',
+  },
+}));
+
+const DropdownMenu = ({ title, handleChange, valueList, selectedValues }) => {
+  const { t } = useTranslation();
+  const classes = useStyles();
+
+  if (!valueList) {
+    return <ErrorAlert />;
+  }
+
+  return (
+    <div className={classes.wrapper}>
+      <Typography variant="body1" id={buildCategorySelectionTitleId(title)}>
+        {title}
+      </Typography>
+      <Autocomplete
+        className={classes.dropMenu}
+        disabled={!valueList}
+        multiple
+        disableClearable
+        id={buildCategorySelectionId(title)}
+        value={valueList?.filter((value) => selectedValues.includes(value))}
+        getOptionSelected={(option, value) => option.id === value.id}
+        options={valueList}
+        getOptionLabel={(option) => option.name}
+        onChange={handleChange}
+        renderInput={(params) => (
+          <TextField
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...params}
+            variant="outlined"
+            placeholder={t('Please choose from list')}
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+DropdownMenu.propTypes = {
+  title: PropTypes.string.isRequired,
+  valueList: PropTypes.instanceOf(Array).isRequired,
+  selectedValues: PropTypes.instanceOf(Array).isRequired,
+  handleChange: PropTypes.instanceOf(Function).isRequired,
+};
+
+export default DropdownMenu;
diff --git a/src/config/constants.js b/src/config/constants.js
@@ -189,6 +189,7 @@ export const THUMBNAIL_SETTING_MAX_HEIGHT = 200;
 export const CATEGORY_TYPES = {
   LEVEL: 'level',
   DISCIPLINE: 'discipline',
+  LANGUAGE: 'language',
 };
 
 // todo: factor out in graasp constants/utils

diff --git a/src/config/selectors.js b/src/config/selectors.js
@@ -144,9 +144,10 @@ export const CHATBOX_ID = 'chatbox';
 export const CHATBOX_INPUT_BOX_ID = 'chatboxInputBox';
 export const CONFIRM_RECYCLE_BUTTON_ID = 'confirmRecycleButton';
 export const SHARE_ITEM_VISIBILITY_SELECT_ID = 'shareItemVisiblitySelect';
-export const SHARE_ITEM_CATEGORY_LEVEL_TITLE_ID = 'shareItemCategoryLevelTitle';
-export const SHARE_ITEM_CATEGORY_LEVEL = 'shareItemCategoryLevel';
-export const SHARE_ITEM_CATEGORY_DISCIPLINE = 'shareItemCategoryDiscipline';
+export const buildCategorySelectionTitleId = (title) =>
+  `itemCategoryTitle-${title}`;
+export const buildCategorySelectionId = (title) =>
+  `itemCategoryDropdown-${title}`;
 export const SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID =
   'shareItemPseudonymizedSchema';
 export const ITEM_RECYCLE_BUTTON_CLASS = 'itemRecycleButton';
@@ -174,7 +175,8 @@ export const ITEM_TAGS_EDIT_SUBMIT_BUTTON_ID = 'itemTagsEditSubmitButton';
 export const buildCustomizedTagsSelector = (index) =>
   `customizedTagsPreview-${index}`;
 
-export const CATEGORIES_SELECTION_VALUE_SELECTOR = `#${SHARE_ITEM_CATEGORY_LEVEL_TITLE_ID}+div span`;
+export const buildCategoriesSelectionValueSelector = (title) =>
+  `#${buildCategorySelectionTitleId(title)}+div span`;
 
 export const buildCategoryMenuOptions = (menuName, optionIndex) =>
   `#${menuName}-popup li[data-option-index="${optionIndex}"]`;