refactor(copy): move the 'click to copy' to a separate component

mdluo · Dec 9, 2019 · 3619537 · 3619537
1 parent 139cda2
commit 3619537
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 32 deletions.
diff --git a/src/components/Copy/Copy.tsx b/src/components/Copy/Copy.tsx
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+import ClipboardJS from 'clipboard';
+
+interface Props {
+ link: string;
+}
+
+const Copy: React.FC<Props> = ({ link }) => {
+ const [tooltip, setTooltip] = useState(false);
+ useEffect(() => {
+ const clipboard = new ClipboardJS('.btn-link.text-gray-light');
+ clipboard.on('success', () => setTooltip(true));
+ });
+
+ return (
+ <span
+ className={`btn-link text-gray-light ml-1 ${tooltip &&
+ 'tooltipped tooltipped-s'}`}
+ data-clipboard-text={link}
+ aria-label="Copied"
+ onBlur={() => setTooltip(false)}
+ onMouseLeave={() => setTooltip(false)}
+ >
+ {link}
+ </span>
+ );
+};
+
+export default Copy;
diff --git a/src/components/Copy/index.ts b/src/components/Copy/index.ts
@@ -0,0 +1,2 @@
+import Copy from './Copy';
+export default Copy;
diff --git a/src/templates/post.tsx b/src/templates/post.tsx
@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import moment from 'moment';
 import { graphql } from 'gatsby';
-import ClipboardJS from 'clipboard';
 import { DiscussionEmbed } from 'disqus-react';
 
 import Octicon, { Calendar, Tag, Link } from '@primer/octicons-react';
 import { GetPostBySlugQuery } from 'generated/types/gatsby';
 
 import Layout from '../components/Layout';
 import SEO from '../components/SEO';
+import Copy from '../components/Copy';
 import '../assets/scss/styles.scss';
 
 interface Props {
@@ -19,6 +19,7 @@ export const query = graphql`
  query GetPostBySlug($slug: String!) {
  markdownRemark(frontmatter: { slug: { eq: $slug } }) {
  frontmatter {
+ type
  slug
  title
  date
@@ -42,42 +43,30 @@ const Post: React.FC<Props> = ({ data }) => {
  site: { siteMetadata },
  } = data;
 
- const [tooltip, setTooltip] = useState(false);
- useEffect(() => {
- const clipboard = new ClipboardJS('.btn-link.text-gray-light');
- clipboard.on('success', () => setTooltip(true));
- });
-
- const { title, date, slug, tags, link } = markdownRemark.frontmatter;
+ const { type, title, date, slug, tags, link } = markdownRemark.frontmatter;
 
  return (
  <Layout>
  <h1 className="mb-2">{title}</h1>
- <p className="f5 text-gray-light">
- <span className="d-inline-block mr-3">
- <Octicon icon={Calendar} />
- <span className="ml-2">{moment(date).format('MMM DD, YYYY')}</span>
- </span>
- <span className="d-inline-block mr-3">
- <Octicon icon={Tag} />
- <span className="ml-1">{(tags ?? []).join(', ')}</span>
- </span>
- {link && (
+
+ {type === 'post' && (
+ <p className="f5 text-gray-light">
  <span className="d-inline-block mr-3">
- <Octicon icon={Link} />
- <span
- className={`btn-link text-gray-light ml-1 ${tooltip &&
- 'tooltipped tooltipped-s'}`}
- data-clipboard-text={link}
- aria-label="Copied"
- onBlur={() => setTooltip(false)}
- onMouseLeave={() => setTooltip(false)}
- >
- {link}
- </span>
+ <Octicon icon={Calendar} />
+ <span className="ml-2">{moment(date).format('MMM DD, YYYY')}</span>
  </span>
- )}
- </p>
+ <span className="d-inline-block mr-3">
+ <Octicon icon={Tag} />
+ <span className="ml-1">{(tags ?? []).join(', ')}</span>
+ </span>
+ {link && (
+ <span className="d-inline-block mr-3">
+ <Octicon icon={Link} />
+ <Copy link={link} />
+ </span>
+ )}
+ </p>
+ )}
  <div
  className="markdown-body mt-5 mb-6"
  dangerouslySetInnerHTML={{ __html: markdownRemark.html }}