aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Sharing/Sharing.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-01-10 12:36:12 +0100
committerArmand Philippot <git@armandphilippot.com>2022-01-10 16:21:20 +0100
commitc9d5f6be49a89fad5a778c0342a27fc3452d863d (patch)
treeff821ba32fc929b45bec6a79847f0e9d58e8452f /src/components/Sharing/Sharing.tsx
parentf0b4057f15006b3b77530f68ebd754ed4ea98b89 (diff)
refactor(aside): move width from aside to sharing widget
Only the Sharing widget needs the "min-content" width.
Diffstat (limited to 'src/components/Sharing/Sharing.tsx')
-rw-r--r--src/components/Sharing/Sharing.tsx111
1 files changed, 0 insertions, 111 deletions
diff --git a/src/components/Sharing/Sharing.tsx b/src/components/Sharing/Sharing.tsx
deleted file mode 100644
index 4df8e0d..0000000
--- a/src/components/Sharing/Sharing.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import sharingMedia from '@config/sharing';
-import { t } from '@lingui/macro';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import styles from './Sharing.module.scss';
-
-type Parameters = {
- content: string;
- image: string;
- title: string;
- url: string;
-};
-
-type Website = {
- id: string;
- name: string;
- parameters: Parameters;
- url: string;
-};
-
-const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
- const [pageExcerpt, setPageExcerpt] = useState('');
- const [pageUrl, setPageUrl] = useState('');
- const [domainName, setDomainName] = useState('');
- const router = useRouter();
-
- useEffect(() => {
- const divEl = document.createElement('div');
- divEl.innerHTML = excerpt;
- const cleanExcerpt = divEl.textContent!;
- setPageExcerpt(cleanExcerpt);
- }, [excerpt]);
-
- useEffect(() => {
- const { protocol, hostname, port } = window.location;
- const currentPort = port ? `:${port}` : '';
- const fullUrl = `${protocol}//${hostname}${currentPort}${router.asPath}`;
-
- setDomainName(hostname);
- setPageUrl(fullUrl);
- }, [router.asPath]);
-
- const getSharingUrl = (website: Website): string => {
- const { id, parameters, url } = website;
- let sharingUrl = `${url}?`;
- let count = 0;
-
- for (const [key, value] of Object.entries(parameters)) {
- if (!value) continue;
-
- sharingUrl += count > 0 ? `&${value}=` : `${value}=`;
-
- switch (key) {
- case 'content':
- if (id === 'email') {
- const intro = t`Introduction:`;
- const readMore = t`Read more here:`;
- const body = `${intro}\n\n"${pageExcerpt}"\n\n${readMore} ${pageUrl}`;
- sharingUrl += encodeURI(body);
- } else {
- sharingUrl += encodeURI(pageExcerpt);
- }
- break;
- case 'title':
- const prefix = id === 'email' ? t`Seen on ${domainName}:` : '';
- sharingUrl += encodeURI(`${prefix} ${title}`);
- break;
- case 'url':
- sharingUrl += encodeURI(pageUrl);
- break;
- default:
- break;
- }
-
- count++;
- }
-
- return sharingUrl;
- };
-
- const getItems = () => {
- const websites: Website[] = sharingMedia;
-
- return websites.map((website) => {
- const { id, name } = website;
- const sharingUrl = getSharingUrl(website);
- const linkModifier = `link--${id}`;
-
- return (
- <li key={id}>
- <a
- href={sharingUrl}
- title={name}
- className={`${styles.link} ${styles[linkModifier]}`}
- >
- <span className="screen-reader-text">{name}</span>
- </a>
- </li>
- );
- });
- };
-
- return (
- <div className={styles.wrapper}>
- <h2>{t`Share`}</h2>
- <ul className={styles.list}>{getItems()}</ul>
- </div>
- );
-};
-
-export default Sharing;