From b9ba24bf080701393664d8b03aeb07c08b0e1436 Mon Sep 17 00:00:00 2001 From: Louise Wang Date: Wed, 23 Feb 2022 19:34:40 +0100 Subject: [PATCH] feat: add CC License --- .../item/sharing/CCLicenseSelection.js | 177 ++++++++++++++++++ .../item/sharing/CustomizedTagsEdit.js | 2 + src/components/item/sharing/ItemSharingTab.js | 2 + src/config/constants.js | 2 + src/langs/en.json | 8 +- 5 files changed, 190 insertions(+), 1 deletion(-) create mode 100644 src/components/item/sharing/CCLicenseSelection.js diff --git a/src/components/item/sharing/CCLicenseSelection.js b/src/components/item/sharing/CCLicenseSelection.js new file mode 100644 index 000000000..b252f29af --- /dev/null +++ b/src/components/item/sharing/CCLicenseSelection.js @@ -0,0 +1,177 @@ +import React, { useContext, useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import { Loader } 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 { useMutation } from '../../../config/queryClient'; +import { CurrentUserContext } from '../../context/CurrentUserContext'; +import { SUBMIT_BUTTON_WIDTH } from '../../../config/constants'; + +const useStyles = makeStyles((theme) => ({ + title: { + marginTop: theme.spacing(2), + }, + button: { + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + maxWidth: SUBMIT_BUTTON_WIDTH, + }, + icon: { + marginTop: theme.spacing(1), + borderWidth: 0, + }, +})); + +const { EDIT_ITEM } = MUTATION_KEYS; + +const CCLicenseSelection = ({ item, edit }) => { + const { t } = useTranslation(); + const classes = useStyles(); + const { mutate: updateCCLicense } = useMutation(EDIT_ITEM); + + // user + const { isLoading: isMemberLoading } = useContext(CurrentUserContext); + + // current item + const { itemId } = useParams(); + + const settings = item?.get('settings'); + const itemName = item?.get('name'); + + const [optionValue, setOptionValue] = useState(null); + + useEffect(() => { + if (settings) { + setOptionValue(settings.ccLicense); + } + }, [settings]); + + if (isMemberLoading) return ; + + const handleChange = (event) => { + setOptionValue(event.target.value); + }; + + const handleSubmit = (event) => { + event.preventDefault(); + updateCCLicense({ + id: itemId, + name: itemName, + settings: { ccLicense: 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 <>; + }; + + return ( + <> + + {t('Creative Commons License')} + + + + + + +
+ + + {t( + 'All content published on Graasp-Explorer does not allow commercial use.', + )} + + + {t('Allow adaptations of your work to be shared?')} + + + } + label={t('Yes')} + /> + } + label={t('Only if others share alike')} + /> + + {} + + +
+ {t('Icon Preview')} + {displayIcon()} + + ); +}; + +CCLicenseSelection.propTypes = { + item: PropTypes.instanceOf(Map).isRequired, + edit: PropTypes.bool.isRequired, +}; + +export default CCLicenseSelection; diff --git a/src/components/item/sharing/CustomizedTagsEdit.js b/src/components/item/sharing/CustomizedTagsEdit.js index 3affee981..1ebad94a4 100644 --- a/src/components/item/sharing/CustomizedTagsEdit.js +++ b/src/components/item/sharing/CustomizedTagsEdit.js @@ -19,6 +19,7 @@ import { ITEM_TAGS_EDIT_INPUT_ID, ITEM_TAGS_EDIT_SUBMIT_BUTTON_ID, } from '../../../config/selectors'; +import { SUBMIT_BUTTON_WIDTH } from '../../../config/constants'; const useStyles = makeStyles((theme) => ({ title: { @@ -27,6 +28,7 @@ const useStyles = makeStyles((theme) => ({ button: { marginTop: theme.spacing(1), marginLeft: theme.spacing(2), + maxWidth: SUBMIT_BUTTON_WIDTH, }, })); diff --git a/src/components/item/sharing/ItemSharingTab.js b/src/components/item/sharing/ItemSharingTab.js index c0b3641a1..ec180c83e 100644 --- a/src/components/item/sharing/ItemSharingTab.js +++ b/src/components/item/sharing/ItemSharingTab.js @@ -21,6 +21,7 @@ import { LayoutContext } from '../../context/LayoutContext'; import { CurrentUserContext } from '../../context/CurrentUserContext'; import CategorySelection from './CategorySelection'; import CustomizedTagsEdit from './CustomizedTagsEdit'; +import CCLicenseSelection from './CCLicenseSelection'; const useStyles = makeStyles((theme) => ({ title: { @@ -131,6 +132,7 @@ const ItemSharingTab = ({ item, memberships }) => { + {renderMembershipSettings()} diff --git a/src/config/constants.js b/src/config/constants.js index ac04afbc5..9398dacc2 100644 --- a/src/config/constants.js +++ b/src/config/constants.js @@ -184,3 +184,5 @@ export const CATEGORY_TYPES = { // todo: factor out in graasp constants/utils export const ACCEPT_COOKIES_NAME = 'accept-all-cookies'; + +export const SUBMIT_BUTTON_WIDTH = 100; diff --git a/src/langs/en.json b/src/langs/en.json index b151910aa..c9a40fc6b 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -163,6 +163,12 @@ "Reject non-essential": "Reject non-essential", "Import a Graasp Archive": "Import a Graasp Archive", "You can download your resources from graasp.eu by right clicking and choosing \"Download as ZIP\".": "You can download your resources from graasp.eu by right clicking and choosing \"Download as ZIP\".", - "Once your file is accepted, it will take several minutes for all imported files to be available.": "Once your file is accepted, it will take several minutes for all imported files to be available." + "Once your file is accepted, it will take several minutes for all imported files to be available.": "Once your file is accepted, it will take several minutes for all imported files to be available.", + "All content published on Graasp-Explorer does not allow commercial use.": "All content published on Graasp-Explorer does not allow commercial use.", + "Allow adaptations of your work to be shared?": "Allow adaptations of your work to be shared?", + "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" } }