actions refactor

src/components/Post/PostActions.jsx

@@ -7,6 +7,64 @@ import { ReactComponent as Twitter } from '../../images/twitter.svg'
 import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 import { ReactComponent as GitHub } from '../../images/github.svg'
 
+const ActionContent = ({ title, text, textLink }) => (
+  <>
+    <h1 className={styles.actionTitle}>{title}</h1>
+    <p className={styles.actionText}>
+      {text} <span className={styles.link}>{textLink}</span>
+    </p>
+  </>
+)
+
+const ActionTwitter = ({ url, slug }) => (
+  <a
+    className={styles.action}
+    href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
+  >
+    <Twitter />
+    <ActionContent
+      title="Have a comment?"
+      text="Hit me up on Twitter"
+      textLink="@kremalicious"
+    />
+  </a>
+)
+
+ActionTwitter.propTypes = {
+  url: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired
+}
+
+const ActionCrypto = ({ toggleModal }) => (
+  <button className={styles.action} onClick={toggleModal}>
+    <Bitcoin />
+    <ActionContent
+      title="Found something useful?"
+      text="Say thanks with"
+      textLink="Bitcoins or Ether"
+    />
+  </button>
+)
+
+ActionCrypto.propTypes = {
+  toggleModal: PropTypes.func.isRequired
+}
+
+const ActionGitHub = ({ githubLink }) => (
+  <a className={styles.action} href={githubLink}>
+    <GitHub />
+    <ActionContent
+      title="Edit on GitHub"
+      text="Contribute to this post on"
+      textLink="GitHub"
+    />
+  </a>
+)
+
+ActionGitHub.propTypes = {
+  githubLink: PropTypes.string.isRequired
+}
+
 export default class PostActions extends PureComponent {
   state = {
     showModal: false
@@ -28,39 +86,15 @@ export default class PostActions extends PureComponent {
     return (
       <aside className={styles.actions}>
         <div>
-          <a
-            className={styles.action}
-            href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${url}${slug}`}
-          >
-            <Twitter />
-            <h1 className={styles.actionTitle}>Have a comment?</h1>
-            <p className={styles.actionText}>
-              Hit me up on Twitter{' '}
-              <span className={styles.link}>@kremalicious</span>.
-            </p>
-          </a>
+          <ActionTwitter url={url} slug={slug} />
         </div>
 
         <div>
-          <button className={styles.action} onClick={this.toggleModal}>
-            <Bitcoin />
-            <h1 className={styles.actionTitle}>Found something useful?</h1>
-            <p className={styles.actionText}>
-              Say thanks{' '}
-              <span className={styles.link}>with Bitcoins or Ether</span>.
-            </p>
-          </button>
+          <ActionCrypto toggleModal={this.toggleModal} />
         </div>
 
         <div>
-          <a className={styles.action} href={githubLink}>
-            <GitHub />
-            <h1 className={styles.actionTitle}>Edit on GitHub</h1>
-            <p className={styles.actionText}>
-              Contribute to this post on{' '}
-              <span className={styles.link}>GitHub</span>.
-            </p>
-          </a>
+          <ActionGitHub githubLink={githubLink} />
         </div>
 
         {this.state.showModal && (