diff --git a/package.json b/package.json index 53140ccd1..58eac2da4 100644 --- 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 index b252f29af..4eca3f232 100644 --- a/src/components/item/sharing/CCLicenseSelection.js +++ b/src/components/item/sharing/CCLicenseSelection.js @@ -1,13 +1,12 @@ 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, @@ -15,11 +14,14 @@ import { 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 ( - - Creative Commons License - - ); - } - if (optionValue === 'conditional') { - return ( - - Creative Commons License - - ); - } - return <>; + const url = 'https://creativecommons.org/about/cclicenses/'; + redirect(url, { OpenInNewTab: true }); }; return ( @@ -125,11 +97,14 @@ const CCLicenseSelection = ({ item, edit }) => { {t( - 'All content published on Graasp-Explorer does not allow commercial use.', + 'All content published on Graasp Explorer does not allow commercial use.', )} @@ -137,22 +112,21 @@ const CCLicenseSelection = ({ item, edit }) => { } label={t('Yes')} /> } label={t('Only if others share alike')} /> - {}