Add fb share page (#3876)

packages/web/src/pages/App.js

@@ -164,6 +164,7 @@ import { ChatPageProvider } from './chat-page/ChatPageProvider'
 import { CollectiblesPlaylistPage } from './collectibles-playlist-page'
 import { DeactivateAccountPage } from './deactivate-account-page/DeactivateAccountPage'
 import ExploreCollectionsPage from './explore-page/ExploreCollectionsPage'
+import { FbSharePage } from './fb-share-page/FbSharePage'
 import FollowersPage from './followers-page/FollowersPage'
 import FollowingPage from './following-page/FollowingPage'
 import SettingsPage from './settings-page/SettingsPage'
@@ -489,6 +490,12 @@ class App extends Component {
                   />
                 ))}
 
+                <Route
+                  exact
+                  path={'/fb/share'}
+                  render={(props) => <FbSharePage />}
+                />
+
                 <Route
                   exact
                   path={SIGN_IN_PAGE}

packages/web/src/pages/fb-share-page/FbSharePage.module.css

@@ -0,0 +1,10 @@
+.root {
+  background: var(--white);
+  border-radius: 8px;
+  padding: 16px;
+  margin: 80px;
+}
+
+.share {
+  margin-top: 16px;
+}

packages/web/src/pages/fb-share-page/FbSharePage.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react'
+
+import { accountSelectors } from '@audius/common'
+import cn from 'classnames'
+
+import { Text } from 'components/typography'
+import { useSelector } from 'utils/reducer'
+
+import styles from './FbSharePage.module.css'
+
+const PUBLIC_HOSTNAME = process.env.REACT_APP_PUBLIC_HOSTNAME
+
+const messages = {
+  share: 'Share your profile with your friends on Facebook!'
+}
+
+const injectScript = function () {
+  const scriptElement = document.createElement('script')
+  scriptElement.innerHTML = `(function(d, s, id) {
+var js, fjs = d.getElementsByTagName(s)[0];
+if (d.getElementById(id)) return;
+js = d.createElement(s); js.id = id;
+js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
+fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));`
+  document.head.appendChild(scriptElement)
+}
+
+export const FbSharePage = () => {
+  useEffect(() => {
+    injectScript()
+  }, [])
+  const handle = useSelector(accountSelectors.getUserHandle)
+  return (
+    <div className={styles.root}>
+      <div id='fb-root'></div>
+      <Text>{messages.share}</Text>
+      {handle ? (
+        <div
+          className={cn('fb-share-button', styles.share)}
+          data-href={`https://${PUBLIC_HOSTNAME}/${handle}`}
+          data-layout='button'
+          data-size='large'
+        />
+      ) : null}
+    </div>
+  )
+}