From 7a6126b978b5f77f85ba4c33fed9d0591d3dc8e9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 23 Dec 2022 14:51:57 -0600
Subject: [PATCH] Move FloatingActionButton to its own component

---
 .../ui/components/floating-action-button.tsx  | 38 +++++++++++++++++++
 app/soapbox/features/ui/index.tsx             | 30 +++------------
 app/styles/ui.scss                            | 13 -------
 3 files changed, 43 insertions(+), 38 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/floating-action-button.tsx

diff --git a/app/soapbox/features/ui/components/floating-action-button.tsx b/app/soapbox/features/ui/components/floating-action-button.tsx
new file mode 100644
index 000000000..e837cf128
--- /dev/null
+++ b/app/soapbox/features/ui/components/floating-action-button.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import { Icon } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
+});
+
+interface IFloatingActionButton {
+}
+
+/** FloatingActionButton (aka FAB), a composer button that floats in the corner on mobile. */
+const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const handleOpenComposeModal = () => {
+    dispatch(openModal('COMPOSE'));
+  };
+
+  return (
+    <button
+      onClick={handleOpenComposeModal}
+      className='z-40 lg:hidden transition-all fixed bottom-24 right-4 p-4 text-white bg-accent-300 hover:bg-accent-500 rounded-full'
+      aria-label={intl.formatMessage(messages.publish)}
+    >
+      <Icon
+        src={require('@tabler/icons/pencil-plus.svg')}
+        className='w-6 h-6 stroke-[1.5px]'
+      />
+    </button>
+  );
+};
+
+export default FloatingActionButton;
\ No newline at end of file
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index bc643efff..9945afd1b 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useRef } from 'react';
 import { HotKeys } from 'react-hotkeys';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom';
 
 import { fetchFollowRequests } from 'soapbox/actions/accounts';
@@ -20,7 +20,6 @@ import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses';
 import { connectUserStream } from 'soapbox/actions/streaming';
 import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions';
 import { expandHomeTimeline } from 'soapbox/actions/timelines';
-import Icon from 'soapbox/components/icon';
 import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import ThumbNavigation from 'soapbox/components/thumb-navigation';
 import { Layout } from 'soapbox/components/ui';
@@ -39,6 +38,7 @@ import { getAccessToken, getVapidKey } from 'soapbox/utils/auth';
 import { isStandalone } from 'soapbox/utils/state';
 
 import BackgroundShapes from './components/background-shapes';
+import FloatingActionButton from './components/floating-action-button';
 import { supportedPolicyIds } from './components/modals/policy-modal';
 import Navbar from './components/navbar';
 import BundleContainer from './containers/bundle-container';
@@ -121,11 +121,6 @@ import 'soapbox/components/status';
 
 const EmptyPage = HomePage;
 
-const messages = defineMessages({
-  beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave.' },
-  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
-});
-
 const keyMap = {
   help: '?',
   new: 'n',
@@ -597,10 +592,6 @@ const UI: React.FC = ({ children }) => {
     history.push('/follow_requests');
   };
 
-  const handleOpenComposeModal = () => {
-    dispatch(openModal('COMPOSE'));
-  };
-
   const shouldHideFAB = (): boolean => {
     const path = location.pathname;
     return Boolean(path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/));
@@ -627,19 +618,6 @@ const UI: React.FC = ({ children }) => {
     goToRequests: handleHotkeyGoToRequests,
   };
 
-  const fabElem = (
-    <button
-      key='floating-action-button'
-      onClick={handleOpenComposeModal}
-      className='floating-action-button'
-      aria-label={intl.formatMessage(messages.publish)}
-    >
-      <Icon src={require('@tabler/icons/pencil-plus.svg')} />
-    </button>
-  );
-
-  const floatingActionButton = shouldHideFAB() ? null : fabElem;
-
   const style: React.CSSProperties = {
     pointerEvents: dropdownMenuIsOpen ? 'none' : undefined,
   };
@@ -662,7 +640,9 @@ const UI: React.FC = ({ children }) => {
             </SwitchingColumnsArea>
           </Layout>
 
-          {me && floatingActionButton}
+          {(me && !shouldHideFAB()) && (
+            <FloatingActionButton />
+          )}
 
           <BundleContainer fetchComponent={UploadArea}>
             {Component => <Component active={draggingOver} onClose={closeUploadModal} />}
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index c49c54562..92ffc77e2 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -241,19 +241,6 @@
   }
 }
 
-.floating-action-button {
-  @apply z-40 lg:hidden transition-all fixed bottom-24 right-4 p-4 text-white bg-accent-300 hover:bg-accent-500 rounded-full;
-
-  .svg-icon {
-    @apply w-6 h-6;
-
-    svg {
-      @apply w-6; // iOS fix
-      stroke-width: 1.5px;
-    }
-  }
-}
-
 .slist {
   &--flex {
     display: flex;