post actions refactor

package.json

@@ -35,18 +35,18 @@
     "dms2dec": "^1.1.0",
     "fast-exif": "^1.0.1",
     "fraction.js": "^4.0.12",
-    "gatsby": "^2.17.5",
+    "gatsby": "^2.17.6",
     "gatsby-image": "^2.2.30",
     "gatsby-plugin-catch-links": "^2.1.15",
     "gatsby-plugin-feed": "^2.3.19",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^2.2.24",
+    "gatsby-plugin-manifest": "^2.2.25",
     "gatsby-plugin-matomo": "^0.7.2",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-offline": "^3.0.17",
     "gatsby-plugin-react-helmet": "^3.1.13",
     "gatsby-plugin-sass": "^2.1.20",
-    "gatsby-plugin-sharp": "^2.2.33",
+    "gatsby-plugin-sharp": "^2.2.34",
     "gatsby-plugin-sitemap": "^2.2.19",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-plugin-typescript": "^2.1.15",
@@ -58,9 +58,9 @@
     "gatsby-remark-images": "^3.1.28",
     "gatsby-remark-smartypants": "^2.1.14",
     "gatsby-remark-vscode": "^1.2.0",
-    "gatsby-source-filesystem": "^2.1.34",
+    "gatsby-source-filesystem": "^2.1.35",
     "gatsby-source-graphql": "^2.1.21",
-    "gatsby-transformer-remark": "^2.6.31",
+    "gatsby-transformer-remark": "^2.6.32",
     "gatsby-transformer-sharp": "^2.3.1",
     "graphql": "^14.5.8",
     "intersection-observer": "^0.7.0",

src/components/atoms/Exif.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ExifMap from './ExifMap'
 import styles from './Exif.module.scss'
-import { Exif as ExifMeta } from '../../@types/Post'
+import { Exif as ExifMeta } from '../../@types/Image'
 
 export default function Exif({ exif }: { exif: ExifMeta }) {
   const { iso, model, fstop, shutterspeed, focalLength, exposure, gps } = exif

src/components/molecules/Web3Donation/Alerts.tsx

@@ -16,44 +16,34 @@ export const alertMessages = (
   success: 'Confirmed. You are awesome, thanks!'
 })
 
-export default function Alerts({
-  transactionHash,
-  message
-}: {
-  transactionHash: string | null
-  message: { text?: string; status?: string } | null
-}) {
-  const constructMessage = () => {
-    let messageOutput
+interface AlertProps {
+  transactionHash: string
+  message?: { text?: string; status?: string }
+}
 
-    if (transactionHash) {
-      messageOutput =
-        message &&
-        message.text +
-          '<br />' +
-          alertMessages(null, transactionHash).transaction
-    } else {
-      messageOutput = message && message.text
-    }
+const constructMessage = (
+  transactionHash: string,
+  message?: { text?: string }
+) =>
+  transactionHash
+    ? message &&
+      message.text + '<br />' + alertMessages(null, transactionHash).transaction
+    : message && message.text
 
-    return messageOutput
-  }
-
-  const classes = () => {
-    const { status } = message
-
-    if (status === 'success') {
-      return styles.success
-    } else if (status === 'error') {
-      return styles.error
-    }
-    return styles.alert
-  }
+const classes = (status: string) =>
+  status === 'success'
+    ? styles.success
+    : status === 'error'
+    ? styles.error
+    : styles.alert
 
+export default function Alerts({ transactionHash, message }: AlertProps) {
   return (
     <div
-      className={classes()}
-      dangerouslySetInnerHTML={{ __html: `${constructMessage()}` }}
+      className={classes(message.status)}
+      dangerouslySetInnerHTML={{
+        __html: `${constructMessage(transactionHash, message)}`
+      }}
     />
   )
 }

src/components/organisms/ModalThanks.tsx

@@ -2,12 +2,11 @@ import React, { lazy, Suspense } from 'react'
 import shortid from 'shortid'
 import { Author } from '../../@types/Site'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
-
+import Qr from '../atoms/Qr'
 import Modal from '../atoms/Modal'
 import styles from './ModalThanks.module.scss'
 
 const Web3Donation = lazy(() => import('../molecules/Web3Donation'))
-const Qr = lazy(() => import('../atoms/Qr'))
 
 const Coin = ({ address, author }: { address: string; author: Author }) => (
   <div className={styles.coin}>

src/templates/Post/PostActions.module.scss

@@ -9,32 +9,16 @@
   padding-top: $spacer;
   padding-bottom: $spacer;
   border-radius: $border-radius;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  gap: $spacer / 2;
+
+  @media (min-width: $screen-sm) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 
   :global(.dark) & {
     background: darken($body-background-color--dark, 2%);
   }
-
-  > div {
-    flex: 1 1 100%;
-    border-bottom: 1px dashed rgba($brand-grey-light, 0.3);
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    @media (min-width: $screen-sm) {
-      flex: 0 0 33%;
-      border-bottom: 0;
-      border-left: 1px dashed rgba($brand-grey-light, 0.3);
-
-      &:first-child {
-        border-left: 0;
-      }
-    }
-  }
 }
 
 .link {
@@ -66,9 +50,25 @@
   padding-right: $spacer;
   position: relative;
   text-align: left;
+  border-bottom: 1px dashed rgba($brand-grey-light, 0.3);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  @media (min-width: $screen-sm) {
+    border-bottom: 0;
+    border-left: 1px dashed rgba($brand-grey-light, 0.3);
+
+    &:first-child {
+      border-left: 0;
+    }
+  }
 
   &:hover,
   &:focus {
+    cursor: pointer;
+
     .link,
     .actionTitle,
     .actionText {

src/templates/Post/PostActions.tsx

@@ -7,47 +7,32 @@ import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 import { ReactComponent as GitHub } from '../../images/github.svg'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-const ActionContent = ({ title, text }: { title: string; text: string }) => (
-  <>
-    <h1 className={styles.actionTitle}>{title}</h1>
-    <p className={styles.actionText}>{text}</p>
-  </>
-)
+interface ActionProps {
+  title: string
+  text: string
+  url?: string
+  onClick?(): void
+}
 
-const ActionTwitter = ({ slug }: { slug: string }) => {
-  const { siteUrl } = useSiteMetadata()
+const Icon = ({ text }: { text: string }) =>
+  text.includes('GitHub') ? (
+    <GitHub />
+  ) : text.includes('Bitcoin') ? (
+    <Bitcoin />
+  ) : (
+    <Twitter />
+  )
 
+const Action = ({ title, text, url, onClick }: ActionProps) => {
   return (
-    <a
-      className={styles.action}
-      href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`}
-    >
-      <Twitter />
-      <ActionContent title="Have a comment?" text="Hit me up @kremalicious" />
+    <a className={styles.action} href={url} onClick={onClick}>
+      <Icon text={text} />
+      <h1 className={styles.actionTitle}>{title}</h1>
+      <p className={styles.actionText}>{text}</p>
     </a>
   )
 }
 
-const ActionCrypto = ({ toggleModal }: { toggleModal(): void }) => (
-  <button className={styles.action} onClick={toggleModal}>
-    <Bitcoin />
-    <ActionContent
-      title="Found something useful?"
-      text="Say thanks with Bitcoins or Ether"
-    />
-  </button>
-)
-
-const ActionGitHub = ({ githubLink }: { githubLink: string }) => (
-  <a className={styles.action} href={githubLink}>
-    <GitHub />
-    <ActionContent
-      title="Edit on GitHub"
-      text="Contribute to this post on GitHub"
-    />
-  </a>
-)
-
 export default function PostActions({
   slug,
   githubLink
@@ -55,7 +40,9 @@ export default function PostActions({
   slug: string
   githubLink: string
 }) {
+  const { siteUrl } = useSiteMetadata()
   const [showModal, setShowModal] = useState(false)
+  const urlTwitter = `https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`
 
   const toggleModal = () => {
     setShowModal(!showModal)
@@ -63,17 +50,21 @@ export default function PostActions({
 
   return (
     <aside className={styles.actions}>
-      <div>
-        <ActionTwitter slug={slug} />
-      </div>
-
-      <div>
-        <ActionCrypto toggleModal={toggleModal} />
-      </div>
-
-      <div>
-        <ActionGitHub githubLink={githubLink} />
-      </div>
+      <Action
+        title="Have a comment?"
+        text="Hit me up @kremalicious"
+        url={urlTwitter}
+      />
+      <Action
+        title="Found something useful?"
+        text="Say thanks with Bitcoins or Ether"
+        onClick={toggleModal}
+      />
+      <Action
+        title="Edit on GitHub"
+        text="Contribute to this post on GitHub"
+        url={githubLink}
+      />
 
       {showModal && (
         <ModalThanks isOpen={showModal} handleCloseModal={toggleModal} />