feat: share footer for mobile devices

components/ShareBar.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement } from 'react';
 import styled from 'styled-components';
 import { laptop } from '../styles/media';
 import { postPageMaxWidth } from '../styles/utilities';
@@ -11,6 +11,7 @@ import FacebookIcon from '../icons/facebook.svg';
 import ReactGA from 'react-ga';
 import { Post } from '../graphql/posts';
 import { typoNuggets } from '../styles/typography';
+import { useCopyPostLink } from '../lib/useCopyPostLink';
 
 const barWidth = size7;
 
@@ -59,20 +60,7 @@ const ColorfulShareButton = styled(ShareButton)`
 
 export default function ShareBar({ post }: { post: Post }): ReactElement {
   const href = encodeURIComponent(window.location.href);
-  const [copying, setCopying] = useState<boolean>(false);
-
-  const copyLink = async () => {
-    await navigator.clipboard.writeText(window.location.href);
-    setCopying(true);
-    ReactGA.event({
-      category: 'Post',
-      action: 'Share',
-      label: 'Copy',
-    });
-    setTimeout(() => {
-      setCopying(false);
-    }, 1000);
-  };
+  const [copying, copyLink] = useCopyPostLink();
 
   return (
     <Container>

components/ShareMobile.tsx

@@ -0,0 +1,52 @@
+import React, { ReactElement } from 'react';
+import styled from 'styled-components';
+import { laptop } from '../styles/media';
+import CopyIcon from '../icons/copy.svg';
+import ShareIcon from '../icons/share.svg';
+import { FloatButton } from './Buttons';
+import { size1, size10 } from '../styles/sizes';
+import { useCopyPostLink } from '../lib/useCopyPostLink';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: ${size10};
+
+  ${laptop} {
+    display: none;
+  }
+
+  ${FloatButton} {
+    margin: ${size1} 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+export interface Props {
+  share: () => Promise<void>;
+}
+
+export function ShareMobile({ share }: Props): ReactElement {
+  const [copying, copyLink] = useCopyPostLink();
+
+  return (
+    <Container>
+      <FloatButton onClick={copyLink} done={copying}>
+        <CopyIcon />
+        {copying ? 'Copied!' : 'Copy link'}
+      </FloatButton>
+      <FloatButton onClick={share}>
+        <ShareIcon />
+        Share with your friends
+      </FloatButton>
+    </Container>
+  );
+}

lib/useCopyPostLink.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import ReactGA from 'react-ga';
+
+export function useCopyPostLink(): [boolean, () => Promise<void>] {
+  const [copying, setCopying] = useState(false);
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(window.location.href);
+    setCopying(true);
+    ReactGA.event({
+      category: 'Post',
+      action: 'Share',
+      label: 'Copy',
+    });
+    setTimeout(() => {
+      setCopying(false);
+    }, 1000);
+  };
+
+  return [copying, copy];
+}

pages/posts/[id].tsx

@@ -60,6 +60,7 @@ import { laptop, mobileL, mobileM, tablet } from '../../styles/media';
 import { colorPepper90 } from '../../styles/colors';
 import { focusOutline, postPageMaxWidth } from '../../styles/utilities';
 import { NextSeoProps } from 'next-seo/lib/types';
+import { ShareMobile } from '../../components/ShareMobile';
 
 const NewCommentModal = dynamic(() =>
   import('../../components/NewCommentModal'),
@@ -491,6 +492,7 @@ export default function PostPage({ id }: Props): ReactElement {
           💡 Hint: The comment with most upvotes will be featured on the main
           feed of daily.dev browser extension.
         </Hint>
+        <ShareMobile share={sharePost} />
         <NewCommentContainer>
           <NewCommentButton onClick={openNewComment}>
             {user && (