From f1cef8cb7cff8c7a1f7ee7da3b0fa4144b2b7cb2 Mon Sep 17 00:00:00 2001 From: Louise Wang Date: Sun, 12 Dec 2021 22:27:58 +0100 Subject: [PATCH] fix: changes suggested by review --- .../item/sharing/CategorySelection.js | 15 ++++++------ ...ustomizedTags.js => CustomizedTagsEdit.js} | 24 +++++++++++-------- src/components/item/sharing/ItemSharingTab.js | 2 +- src/config/constants.js | 5 ++++ src/utils/item.js | 7 ++++++ yarn.lock | 14 +++++------ 6 files changed, 41 insertions(+), 26 deletions(-) rename src/components/item/sharing/{CustomizedTags.js => CustomizedTagsEdit.js} (82%) diff --git a/src/components/item/sharing/CategorySelection.js b/src/components/item/sharing/CategorySelection.js index c4036c0df..9a21200b4 100644 --- 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/src/components/item/sharing/CustomizedTags.js b/src/components/item/sharing/CustomizedTagsEdit.js similarity index 82% rename from src/components/item/sharing/CustomizedTags.js rename to src/components/item/sharing/CustomizedTagsEdit.js index c3192826b..35f929f40 100644 --- a/src/components/item/sharing/CustomizedTags.js +++ b/src/components/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,9 +32,8 @@ 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); @@ -41,7 +41,7 @@ function CustomizedTagsEdit(item, edit) { if (settings) { setDisplayValues(settings.tags || []); } - }, [settings, item]); + }, [settings]); if (isMemberLoading) return ; @@ -66,12 +66,11 @@ function CustomizedTagsEdit(item, edit) { {t('Please seperate tags by comma. ')} - {t('Eg. Tag1,Tag2,Tag3,...,TagN')} + {t('Eg. English,Biology,Lab,Plants,...,Demo')}
} + endIcon={} > - {t('Submit')} + {t('Save')} ); } +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 index 741b579ae..ffd3f5e49 100644 --- 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 index 6029422b5..7e9e981a6 100644 --- 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 index e785af3d3..0ea5e7fce 100644 --- 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 index 935889e70..8c84cf2c3 100644 --- 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