fix: changes suggested by review

graasp · Dec 16, 2021 · f1cef8c · f1cef8c
1 parent d7ea738
commit f1cef8c
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 26 deletions.
diff --git a/src/components/item/sharing/CategorySelection.js b/src/components/item/sharing/CategorySelection.js
@@ -15,6 +15,8 @@ import {
   SHARE_ITEM_CATEGORY_DISCIPLINE,
 } from '../../../config/selectors';
 import { CurrentUserContext } from '../../context/CurrentUserContext';
+import { CATEGORY_TYPES } from '../../../config/constants';
+import { compare } from '../../../utils/item';
 
 const { useCategoryTypes, useCategories, useItemCategories } = hooks;
 const { POST_ITEM_CATEGORY, DELETE_ITEM_CATEGORY } = MUTATION_KEYS;
@@ -60,19 +62,16 @@ function CategorySelection({ item, edit }) {
     isLoading: isCategoriesLoading,
   } = useCategories();
 
-  // sort options by alphabetical order according to name
-  const compare = (a, b) => {
-    if (a.name < b.name) return -1;
-    if (a.name > b.name) return 1;
-    return 0;
-  };
   // process data
   const categoriesMap = allCategories?.groupBy((entry) => entry.type);
   const levelList = categoriesMap
-    ?.get(categoryTypes?.filter((type) => type.name === 'level').get(0).id)
+    ?.get(categoryTypes?.find((type) => type.name === CATEGORY_TYPES.LEVEL)?.id)
     ?.toArray();
   const disciplineList = categoriesMap
-    ?.get(categoryTypes?.filter((type) => type.name === 'discipline').get(0).id)
+    ?.get(
+      categoryTypes?.find((type) => type.name === CATEGORY_TYPES.DISCIPLINE)
+        ?.id,
+    )
     ?.toArray()
     .sort(compare);
 

diff --git a/...components/item/sharing/CustomizedTags.js → ...onents/item/sharing/CustomizedTagsEdit.js b/...components/item/sharing/CustomizedTags.js → ...onents/item/sharing/CustomizedTagsEdit.js
@@ -1,8 +1,9 @@
 import React, { useContext, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { Loader } from '@graasp/ui';
 import { useTranslation } from 'react-i18next';
 import { Typography, TextField, Button, makeStyles } from '@material-ui/core';
-import SendIcon from '@material-ui/icons/Send';
+import SaveIcon from '@material-ui/icons/Save';
 import { useParams } from 'react-router';
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { useMutation } from '../../../config/queryClient';
@@ -20,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
 
 const { EDIT_ITEM } = MUTATION_KEYS;
 
-function CustomizedTagsEdit(item, edit) {
+function CustomizedTagsEdit({ item, edit }) {
   const { t } = useTranslation();
   const classes = useStyles();
   const { mutate: updateCustomizedTags } = useMutation(EDIT_ITEM);
@@ -31,17 +32,16 @@ function CustomizedTagsEdit(item, edit) {
   // current item
   const { itemId } = useParams();
 
-  const { item: itemObj } = item;
-  const settings = itemObj.get('settings');
-  const itemName = itemObj.get('name');
+  const settings = item?.get('settings');
+  const itemName = item?.get('name');
 
   const [displayValues, setDisplayValues] = useState(false);
 
   useEffect(() => {
     if (settings) {
       setDisplayValues(settings.tags || []);
     }
-  }, [settings, item]);
+  }, [settings]);
 
   if (isMemberLoading) return <Loader />;
 
@@ -66,12 +66,11 @@ function CustomizedTagsEdit(item, edit) {
       </Typography>
       <Typography variant="body1">
         {t('Please seperate tags by comma. ')}
-        {t('Eg. Tag1,Tag2,Tag3,...,TagN')}
+        {t('Eg. English,Biology,Lab,Plants,...,Demo')}
       </Typography>
       <form className={classes.container} onSubmit={handleSubmit}>
         <TextField
           disabled={!edit}
-          id="customized-tags-input-box"
           variant="outlined"
           label="Input"
           multiline
@@ -84,13 +83,18 @@ function CustomizedTagsEdit(item, edit) {
           variant="outlined"
           color="primary"
           className={classes.button}
-          endIcon={<SendIcon />}
+          endIcon={<SaveIcon />}
         >
-          {t('Submit')}
+          {t('Save')}
         </Button>
       </form>
     </>
   );
 }
 
+CustomizedTagsEdit.propTypes = {
+  item: PropTypes.instanceOf(Map).isRequired,
+  edit: PropTypes.bool.isRequired,
+};
+
 export default CustomizedTagsEdit;
diff --git a/src/components/item/sharing/ItemSharingTab.js b/src/components/item/sharing/ItemSharingTab.js
@@ -20,7 +20,7 @@ import { getItemLoginSchema } from '../../../utils/itemExtra';
 import { LayoutContext } from '../../context/LayoutContext';
 import { CurrentUserContext } from '../../context/CurrentUserContext';
 import CategorySelection from './CategorySelection';
-import CustomizedTagsEdit from './CustomizedTags';
+import CustomizedTagsEdit from './CustomizedTagsEdit';
 
 const useStyles = makeStyles((theme) => ({
   title: {

diff --git a/src/config/constants.js b/src/config/constants.js
@@ -160,3 +160,8 @@ export const THUMBNAIL_ASPECT = 1;
 export const THUMBNAIL_EXTENSION = 'image/jpeg';
 export const THUMBNAIL_SETTING_MAX_WIDTH = 300;
 export const THUMBNAIL_SETTING_MAX_HEIGHT = 200;
+
+export const CATEGORY_TYPES = {
+  LEVEL: 'level',
+  DISCIPLINE: 'discipline',
+};
diff --git a/src/utils/item.js b/src/utils/item.js
@@ -146,3 +146,10 @@ export const getChildrenOrderFromFolderExtra = (item) =>
   item?.get('extra')?.folder?.childrenOrder ?? [];
 
 export const stripHtml = (str) => str?.replace(/<[^>]*>?/gm, '');
+
+// sort objects by alphabetical order according to name
+export const compare = (a, b) => {
+  if (a.name < b.name) return -1;
+  if (a.name > b.name) return 1;
+  return 0;
+};
diff --git a/yarn.lock b/yarn.lock
@@ -11549,9 +11549,9 @@ __metadata:
   linkType: hard
 
 "is-negative-zero@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "is-negative-zero@npm:2.0.1"
-  checksum: a46f2e0cb5e16fdb8f2011ed488979386d7e68d381966682e3f4c98fc126efe47f26827912baca2d06a02a644aee458b9cba307fb389f6b161e759125db7a3b8
+  version: 2.0.2
+  resolution: "is-negative-zero@npm:2.0.2"
+  checksum: f3232194c47a549da60c3d509c9a09be442507616b69454716692e37ae9f37c4dea264fb208ad0c9f3efd15a796a46b79df07c7e53c6227c32170608b809149a
   languageName: node
   linkType: hard
 
@@ -11766,11 +11766,11 @@ __metadata:
   linkType: hard
 
 "is-weakref@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-weakref@npm:1.0.1"
+  version: 1.0.2
+  resolution: "is-weakref@npm:1.0.2"
   dependencies:
-    call-bind: ^1.0.0
-  checksum: fdafb7b955671dd2f9658ff47c86e4025c0650fc68a3542a40e5a75898a763b1abd6b1e1f9f13207eed49541cdd76af67d73c44989ea358b201b70274cf8f6c1
+    call-bind: ^1.0.2
+  checksum: 95bd9a57cdcb58c63b1c401c60a474b0f45b94719c30f548c891860f051bc2231575c290a6b420c6bc6e7ed99459d424c652bd5bf9a1d5259505dc35b4bf83de
   languageName: node
   linkType: hard