Skip to content

Commit

Permalink
use toast, placeholder message and fetch on Edit
Browse files Browse the repository at this point in the history
  • Loading branch information
@nileshgulia1
nileshgulia1 committed Aug 11, 2021
1 parent c52bcf3 commit 0b7b89f
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 103 deletions.
237 changes: 135 additions & 102 deletions src/PrivacyProtection/PrivacyProtection.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,27 @@
import React, { useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor';
import { Placeholder } from 'semantic-ui-react';
import { Placeholder, Dimmer, Loader } from 'semantic-ui-react';
import cookie from 'react-cookie';
import { Button, Checkbox } from 'semantic-ui-react';
import { defineMessages, injectIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { toast } from 'react-toastify';
import config from '@plone/volto/registry';
import '../css/embed-styles.css';
import { createImageUrl } from './helpers';
import { getBaseUrl } from '@plone/volto/helpers';
import { Toast } from '@plone/volto/components';

const messages = defineMessages({
success: {
id: 'Success',
defaultMessage: 'Success',
},
image: {
id: 'Live image generated',
defaultMessage: 'Live image generated',
},
});

const key = (domain_key) => `accept-${domain_key}`;

Expand All @@ -30,113 +44,132 @@ function canShow(domain_key) {
return cookie.load(key(domain_key)) === 'true';
}

export default ({ children, data = {}, block, path, ...rest }) => {
const { dataprotection = {} } = data;
const { background_image: bgImg, enabled = false } = dataprotection;
const [image, setImage] = React.useState(null);
const dispatch = useDispatch();

React.useEffect(() => {
if (bgImg) {
setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
}
}, [bgImg]);
export default injectIntl(
({ children, data = {}, block, isEditMode, intl, path, ...rest }) => {
const { dataprotection = {} } = data;
const { background_image: bgImg, enabled = false } = dataprotection;
const [image, setImage] = React.useState(null);
const dispatch = useDispatch();

React.useEffect(() => {
if (enabled && !bgImg) {
fetch(
`${getBaseUrl(
path || '',
)}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${
data.url
}&w=1920&waitfor=4000`,
)
.then((e) => e.blob())
.then((blob) => setImage(URL.createObjectURL(blob)));
}
}, [enabled, data.url, path, dispatch, bgImg]);
React.useEffect(() => {
if (bgImg) {
setImage(createImageUrl(bgImg)); //create imageUrl from uploaded image
}
}, [bgImg]);

const [visible, setVisibility] = useState(false);
const defaultShow = canShow(dataprotection.privacy_cookie_key);
const [show, setShow] = useState(defaultShow);
const [remember, setRemember] = useState(defaultShow);
React.useEffect(() => {
if (enabled && !bgImg) {
fetch(
`${getBaseUrl(
path || '',
)}/cors-proxy/https://screenshot.eea.europa.eu/api/v1/retrieve_image_for_url?url=${
data.url
}&w=1920&waitfor=4000`,
)
.then((e) => e.blob())
.then((blob) => {
setImage(URL.createObjectURL(blob));
if (isEditMode) {
toast.success(
<Toast
success
title={intl.formatMessage(messages.success)}
content={intl.formatMessage(messages.image)}
/>,
);
}
});
}
}, [enabled, data.url, path, dispatch, bgImg, intl, isEditMode]);

return (
<VisibilitySensor
onChange={(isVisible) => {
!visible && isVisible && setVisibility(true);
}}
partialVisibility={true}
offset={{ bottom: 200 }}
>
{visible ? (
<div>
{!dataprotection.enabled || show ? (
children
) : (
<div
className="privacy-protection"
{...rest}
style={
image
? {
backgroundImage: `url(${image})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: 'cover',
}
: {}
}
>
<div className="overlay">
<div className="wrapped">
<div
className="privacy-statement"
dangerouslySetInnerHTML={{
__html: dataprotection.privacy_statement,
}}
/>
<div className="privacy-button">
<Button
primary
onClick={() => {
setShow(true);
if (remember) {
saveCookie(dataprotection.privacy_cookie_key);
}
}}
>
Show external content
</Button>
</div>
const [visible, setVisibility] = useState(false);
const defaultShow = canShow(dataprotection.privacy_cookie_key);
const [show, setShow] = useState(defaultShow);
const [remember, setRemember] = useState(defaultShow);

<div className="privacy-toggle">
<Checkbox
toggle
label="Remember my choice"
id={`remember-choice-${block}`}
onChange={(ev, { checked }) => {
setRemember(checked);
return (
<VisibilitySensor
onChange={(isVisible) => {
!visible && isVisible && setVisibility(true);
}}
partialVisibility={true}
offset={{ bottom: 200 }}
>
{visible ? (
<div>
{!dataprotection.enabled || show ? (
children
) : !image ? (
<Dimmer active>
<Loader />
</Dimmer>
) : (
<div
className="privacy-protection"
{...rest}
style={
image
? {
backgroundImage: `url(${image})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: 'cover',
}
: {}
}
>
<div className="overlay">
<div className="wrapped">
<div
className="privacy-statement"
dangerouslySetInnerHTML={{
__html: dataprotection.privacy_statement,
}}
checked={remember}
/>
</div>
<div className="privacy-button">
<Button
primary
onClick={() => {
setShow(true);
if (remember) {
saveCookie(dataprotection.privacy_cookie_key);
}
}}
>
Show external content
</Button>
</div>

{!isEditMode && (
<div className="privacy-toggle">
<Checkbox
toggle
label="Remember my choice"
id={`remember-choice-${block}`}
onChange={(ev, { checked }) => {
setRemember(checked);
}}
checked={remember}
/>
</div>
)}

<p className="discreet">
Your choice will be saved in a cookie managed by{' '}
{config.settings.ownDomain || '.eea.europa.eu'} that will
expire in {getExpDays()} days.
</p>
<p className="discreet">
Your choice will be saved in a cookie managed by{' '}
{config.settings.ownDomain || '.eea.europa.eu'} that will
expire in {getExpDays()} days.
</p>
</div>
</div>
</div>
</div>
)}
</div>
) : (
<Placeholder style={{ height: '100%', width: '100%' }}>
<Placeholder.Image rectangular />
</Placeholder>
)}
</VisibilitySensor>
);
};
)}
</div>
) : (
<Placeholder style={{ height: '100%', width: '100%' }}>
<Placeholder.Image rectangular />
</Placeholder>
)}
</VisibilitySensor>
);
},
);
3 changes: 2 additions & 1 deletion src/PrivacyProtection/schema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export const ProtectionSchema = () => ({
},
background_image: {
title: 'Background image',
description: 'Set a placeholder image',
description:
'Set a placeholder image. This will override the existing one',
widget: 'file',
},
},
Expand Down

0 comments on commit 0b7b89f

Please sign in to comment.