feat: add sharing buttons

mfrederic · Nov 18, 2024 · 9ba5e5e · 9ba5e5e
1 parent a9074bc
commit 9ba5e5e
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 53 deletions.
diff --git a/backend/package.json b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "realt-properties-map-backend",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "license": "Apache-2.0",
   "main": "src/index.ts",
   "scripts": {

diff --git a/backend/src/index.ts b/backend/src/index.ts
@@ -10,11 +10,14 @@ dotEnv.config();
 
 const app = express();
 
-const CORS_ORIGIN = process.env.CORS_ORIGIN ? process.env.CORS_ORIGIN.split(',') : [];
+const CORS_ORIGIN = (process.env.CORS_ORIGIN
+  ? process.env.CORS_ORIGIN.split(',')
+  : []).map(url => new URL(url).hostname);
+
 app.use(cors({
   origin: function(origin, callback){
     if(!origin) return callback(null, true);
-    if(CORS_ORIGIN.indexOf(origin) === -1){
+    if(CORS_ORIGIN.indexOf(new URL(origin).hostname) === -1){
       var msg = 'The CORS policy for this site does not ' +
                 'allow access from the specified Origin.';
       return callback(new Error(msg), false);

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "realt-properties-map-frontend",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "license": "Apache-2.0",
   "scripts": {
     "start": "PORT=3010 react-scripts start",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -25,7 +25,7 @@ function App() {
               <HotkeysProvider>
                 <SplashScreen onVisibleChange={setDisplay} />
                 <MapWrapper />
-                <AppActions display={!display} />
+                {!display && <AppActions />}
               </HotkeysProvider>
             </MantineProviders>
           </QueryProvider>

diff --git a/frontend/src/components/PropertyPanel/PropertyPanelActions.tsx b/frontend/src/components/PropertyPanel/PropertyPanelActions.tsx
@@ -1,12 +1,18 @@
 import { useTranslation } from "react-i18next";
 import Env from "../../utils/env";
-import { ActionIcon, Button, Grid } from "@mantine/core";
+import { ActionIcon, Button, Flex, Grid } from "@mantine/core";
 import GoogleIcon from '@mui/icons-material/Google';
+import XIcon from '@mui/icons-material/X';
+import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
 import { AffixBtn } from "../Common/AffixBtn";
 import { useCopyUrl } from "../../hooks/useCopyUrl";
 import { useViewportSize } from "@mantine/hooks";
 import { Property } from "../../types/property";
 
+function encodeUrlUsingPercentEncoding(url: string) {
+  return encodeURI(url);
+}
+
 export function PropertyPanelActions({
   marketplaceLink,
   address,
@@ -22,6 +28,8 @@ export function PropertyPanelActions({
   const { t } = useTranslation('common');
   const { copied, onCopyUrl } = useCopyUrl();
 
+  const twitterIntent = `https://twitter.com/intent/tweet?size=large&text=Check out this property on RealT Property Map.&url=${window.location.href}&hashtags=RealT,RealToken,RPM,RealtPropertyMap&related=RealTPlatform`;
+  const threadsIntent = `https://www.threads.net/intent/post?url=${window.location.href}&text=Check out this property on RealT Property Map. #RealT #RealToken #RPM #RealtPropertyMap`;
   return (
     <Grid className="px-4">
       <Grid.Col span={{
@@ -58,17 +66,38 @@ export function PropertyPanelActions({
         base: 6,
         md: 6,
       }}>
-        <Button
-          variant="default"
-          fullWidth
-          component="a"
-          title={t('settings.googleMaps.viewOnGoogleMaps')}
-          target="_blank"
-          referrerPolicy="no-referrer"
-          href={`https://maps.google.com/?q=${coordinates.lat},${coordinates.lng}`}
-          leftSection={<GoogleIcon fontSize="medium" />}>
-          {t('settings.googleMaps.title')}
-        </Button>
+        <Flex gap="sm">
+          <ActionIcon
+            variant="default"
+            component="a"
+            title={t('settings.googleMaps.viewOnGoogleMaps')}
+            target="_blank"
+            size="lg"
+            referrerPolicy="no-referrer"
+            href={`https://maps.google.com/?q=${coordinates.lat},${coordinates.lng}`}>
+            <GoogleIcon fontSize="medium" />
+          </ActionIcon>
+          <ActionIcon
+            variant="default"
+            component="a"
+            title={t('settings.x.shareOnX')}
+            target="_blank"
+            size="lg"
+            referrerPolicy="no-referrer"
+            href={encodeUrlUsingPercentEncoding(twitterIntent)}>
+            <XIcon fontSize="medium" />
+          </ActionIcon>
+          <ActionIcon
+            variant="default"
+            component="a"
+            title={t('settings.threads.shareOnThreads')}
+            target="_blank"
+            size="lg"
+            referrerPolicy="no-referrer"
+            href={encodeUrlUsingPercentEncoding(threadsIntent)}>
+            <AlternateEmailIcon fontSize="medium" />
+          </ActionIcon>
+        </Flex>
       </Grid.Col>
       <Grid.Col span={{
         base: 0,

diff --git a/frontend/src/components/Settings/AppActions.tsx b/frontend/src/components/Settings/AppActions.tsx
@@ -15,11 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { SearchBar } from './SearchBar';
 import HelpPanel from './Help/HelpPanel';
 
-export function AppActions({
-  display,
-}: {
-  display: boolean;
-}) {
+export function AppActions() {
   const { t } = useTranslation('common');
   const { copied, onCopyUrl } = useCopyUrl();
 
@@ -55,38 +51,33 @@ export function AppActions({
 
   return (
     <>
+      <WalletsPanel opened={walletsOpened} close={closeWallets} />
+      <MapOptionsPanel opened={mapOptionsOpened} close={closeMapOptions} />
+      <HelpPanel opened={helpOpened} close={closeHelp} />
       {
-        display &&
-        <>
-          <WalletsPanel opened={walletsOpened} close={closeWallets} />
-          <MapOptionsPanel opened={mapOptionsOpened} close={closeMapOptions} />
-          <HelpPanel opened={helpOpened} close={closeHelp} />
-          {
-          !mapOptionsOpened && !walletsOpened && !helpOpened &&
-            <AffixBtn>
-              <Flex align="end" className="ml-2 sm:ml-0">
-                <SearchBar />
-                <AppActionsButton opened={false} open={onCopyUrl} label={t('actions.copyUrl')} color={copied ? 'teal' : ''}>
-                  {
-                    !copied
-                      ? <LinkIcon fontSize="large" />
-                      : <CheckIcon fontSize="large" />
-                  }
-                </AppActionsButton>
-                <StartTooltip />
-                <AppActionsButton opened={false} open={onOpenWallets} label={t('actions.openWalletsPanel')}>
-                  <WalletIcon fontSize="large" />
-                </AppActionsButton>
-                <AppActionsButton opened={false} open={onOpenMapOptions} label={t('actions.openSettingsPanel')}>
-                  <SettingsIcon fontSize="large" />
-                </AppActionsButton>
-                <AppActionsButton opened={false} open={onOpenHelp} label={t('actions.openHelpPanel')} color="lime">
-                  <RecommendIcon fontSize="large" />
-                </AppActionsButton>
-              </Flex>
-            </AffixBtn>
-          }
-        </>
+      !mapOptionsOpened && !walletsOpened && !helpOpened &&
+        <AffixBtn>
+          <Flex align="end" className="ml-2 sm:ml-0">
+            <SearchBar />
+            <AppActionsButton opened={false} open={onCopyUrl} label={t('actions.copyUrl')} color={copied ? 'teal' : ''}>
+              {
+                !copied
+                  ? <LinkIcon fontSize="large" />
+                  : <CheckIcon fontSize="large" />
+              }
+            </AppActionsButton>
+            <StartTooltip />
+            <AppActionsButton opened={false} open={onOpenWallets} label={t('actions.openWalletsPanel')}>
+              <WalletIcon fontSize="large" />
+            </AppActionsButton>
+            <AppActionsButton opened={false} open={onOpenMapOptions} label={t('actions.openSettingsPanel')}>
+              <SettingsIcon fontSize="large" />
+            </AppActionsButton>
+            <AppActionsButton opened={false} open={onOpenHelp} label={t('actions.openHelpPanel')} color="lime">
+              <RecommendIcon fontSize="large" />
+            </AppActionsButton>
+          </Flex>
+        </AffixBtn>
       }
     </>
   )

diff --git a/frontend/src/i18next/locales/en/common.json b/frontend/src/i18next/locales/en/common.json
@@ -75,6 +75,14 @@
     "googleMaps": {
       "title": "Google Maps",
       "viewOnGoogleMaps": "View on Google Maps"
+    },
+    "x": {
+      "title": "X (Twitter)",
+      "shareOnX": "Share on X"
+    },
+    "threads": {
+      "title": "Threads",
+      "shareOnThreads": "Share on Threads"
     }
   },
   "help": {

diff --git a/frontend/src/i18next/locales/es/common.json b/frontend/src/i18next/locales/es/common.json
@@ -75,6 +75,14 @@
     "googleMaps": {
       "title": "Google Maps",
       "viewOnGoogleMaps": "Ver en Google Maps"
+    },
+    "x": {
+      "title": "X (Twitter)",
+      "share": "Compartir en X"
+    },
+    "threads": {
+      "title": "Threads",
+      "share": "Compartir en Threads"
     }
   },
   "help": {

diff --git a/frontend/src/i18next/locales/fr/common.json b/frontend/src/i18next/locales/fr/common.json
@@ -75,6 +75,14 @@
     "googleMaps": {
       "title": "Google Maps",
       "viewOnGoogleMaps": "Voir sur Google Maps"
+    },
+    "x": {
+      "title": "X (Twitter)",
+      "share": "Partager sur X"
+    },
+    "threads": {
+      "title": "Threads",
+      "share": "Partager sur Threads"
     }
   },
   "help": {