fix: changes by review

graasp · Mar 1, 2022 · d89c773 · d89c773
1 parent b9ba24b
commit d89c773
Show file tree

Hide file tree

Showing 6 changed files with 381 additions and 354 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@graasp/chatbox": "github:graasp/graasp-chatbox.git",
     "@graasp/query-client": "github:graasp/graasp-query-client.git",
-    "@graasp/ui": "github:graasp/graasp-ui.git",
+    "@graasp/ui": "github:graasp/graasp-ui.git#92/ccLicense",
     "@graasp/utils": "github:graasp/graasp-utils.git",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "5.0.0-beta.4",

diff --git a/src/components/item/sharing/CCLicenseSelection.js b/src/components/item/sharing/CCLicenseSelection.js
@@ -1,25 +1,27 @@
 import React, { useContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loader } from '@graasp/ui';
+import { Loader, CCLicenseIcon } from '@graasp/ui';
 import { useTranslation } from 'react-i18next';
 import {
   Typography,
   FormControl,
   FormControlLabel,
   RadioGroup,
-  FormHelperText,
   Button,
   Radio,
   Tooltip,
   IconButton,
   makeStyles,
 } from '@material-ui/core';
 import HelpIcon from '@material-ui/icons/Help';
-import { useParams } from 'react-router';
 import { MUTATION_KEYS } from '@graasp/query-client';
+import { redirect } from '@graasp/utils';
 import { useMutation } from '../../../config/queryClient';
 import { CurrentUserContext } from '../../context/CurrentUserContext';
-import { SUBMIT_BUTTON_WIDTH } from '../../../config/constants';
+import {
+  CC_LICENSE_ADAPTION_OPTIONS,
+  SUBMIT_BUTTON_WIDTH,
+} from '../../../config/constants';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -42,21 +44,19 @@ const CCLicenseSelection = ({ item, edit }) => {
   const { t } = useTranslation();
   const classes = useStyles();
   const { mutate: updateCCLicense } = useMutation(EDIT_ITEM);
+  const [optionValue, setOptionValue] = useState(null);
 
   // user
   const { isLoading: isMemberLoading } = useContext(CurrentUserContext);
 
-  // current item
-  const { itemId } = useParams();
-
+  // itemId
+  const itemId = item?.get('id');
   const settings = item?.get('settings');
   const itemName = item?.get('name');
 
-  const [optionValue, setOptionValue] = useState(null);
-
   useEffect(() => {
     if (settings) {
-      setOptionValue(settings.ccLicense);
+      setOptionValue(settings.ccLicenseAdaption);
     }
   }, [settings]);
 
@@ -71,41 +71,13 @@ const CCLicenseSelection = ({ item, edit }) => {
     updateCCLicense({
       id: itemId,
       name: itemName,
-      settings: { ccLicense: optionValue },
+      settings: { ccLicenseAdaption: optionValue },
     });
   };
 
   const handleClick = () => {
-    window.open('https://creativecommons.org/about/cclicenses/', '_blank');
-  };
-
-  const displayIcon = () => {
-    if (optionValue === 'yes') {
-      return (
-        <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
-          <img
-            alt="Creative Commons License"
-            className={classes.icon}
-            src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png"
-          />
-        </a>
-      );
-    }
-    if (optionValue === 'conditional') {
-      return (
-        <a
-          rel="license"
-          href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
-        >
-          <img
-            alt="Creative Commons License"
-            className={classes.icon}
-            src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"
-          />
-        </a>
-      );
-    }
-    return <></>;
+    const url = 'https://creativecommons.org/about/cclicenses/';
+    redirect(url, { OpenInNewTab: true });
   };
 
   return (
@@ -125,34 +97,36 @@ const CCLicenseSelection = ({ item, edit }) => {
         <FormControl
           component="fieldset"
           className={classes.formControl}
-          disabled={!edit || settings?.ccLicense === 'yes'} // if choose 'yes', cannot change back
+          disabled={
+            !edit ||
+            settings?.ccLicenseAdaption === CC_LICENSE_ADAPTION_OPTIONS.ALLOW
+          } // if choose 'yes', cannot change back
         >
           <Typography variant="body1">
             {t(
-              'All content published on Graasp-Explorer does not allow commercial use.',
+              'All content published on Graasp Explorer does not allow commercial use.',
             )}
           </Typography>
           <Typography variant="body1">
             {t('Allow adaptations of your work to be shared?')}
           </Typography>
           <RadioGroup
             aria-label="CC License"
-            name="CC License"
+            name={t('CC License')}
             value={optionValue}
             onChange={handleChange}
           >
             <FormControlLabel
-              value="yes"
+              value={CC_LICENSE_ADAPTION_OPTIONS.ALLOW}
               control={<Radio color="primary" />}
               label={t('Yes')}
             />
             <FormControlLabel
-              value="conditional"
+              value={CC_LICENSE_ADAPTION_OPTIONS.ALIKE}
               control={<Radio color="primary" />}
               label={t('Only if others share alike')}
             />
           </RadioGroup>
-          <FormHelperText>{}</FormHelperText>
           <Button
             type="submit"
             variant="outlined"
@@ -164,7 +138,7 @@ const CCLicenseSelection = ({ item, edit }) => {
         </FormControl>
       </form>
       <Typography variant="subtitle1">{t('Icon Preview')}</Typography>
-      {displayIcon()}
+      <CCLicenseIcon adaption={optionValue} className={classes.icon} />
     </>
   );
 };

diff --git a/src/components/item/sharing/CustomizedTagsEdit.js b/src/components/item/sharing/CustomizedTagsEdit.js
@@ -67,8 +67,8 @@ const CustomizedTagsEdit = ({ item, edit }) => {
     const tagsList =
       displayValues
         ?.split(',')
-        .map((entry) => entry.trim())
-        .filter(Boolean) || [];
+        ?.map((entry) => entry.trim())
+        ?.filter(Boolean) || [];
     updateCustomizedTags({
       id: itemId,
       name: itemName,

diff --git a/src/config/constants.js b/src/config/constants.js
@@ -186,3 +186,8 @@ export const CATEGORY_TYPES = {
 export const ACCEPT_COOKIES_NAME = 'accept-all-cookies';
 
 export const SUBMIT_BUTTON_WIDTH = 100;
+
+export const CC_LICENSE_ADAPTION_OPTIONS = {
+  ALLOW: 'allow',
+  ALIKE: 'alike',
+};
diff --git a/src/langs/en.json b/src/langs/en.json
@@ -169,6 +169,7 @@
     "Need more info about CC License? Click here!": "Need more info about CC License? Click here!",
     "Only if others share alike": "Only if others share alike",
     "Icon Preview": "Icon Preview",
-    "Creative Commons License": "Creative Commons License"
+    "Creative Commons License": "Creative Commons License",
+    "CC License": "CC License"
   }
 }