Merge pull request #476 from kronaemmanuel/shareCTA

Sharing buttons on both Country and Measurement pages
ooni · Sep 30, 2020 · 6d3e781 · 6d3e781
2 parents cd702b8 + dcba6d2
commit 6d3e781
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 31 deletions.
diff --git a/components/SocialButtons.js b/components/SocialButtons.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link, Flex } from 'ooni-components'
+import { Text } from 'rebass'
+import { MdShare } from 'react-icons/lib/md'
+
+function SocialButtons({ url }){
+  const text = 'Data from OONI Explorer';
+  return(
+    <Flex px={2} alignItems='center'>
+      <MdShare height='20px' width='20px'/>
+      <Text pl={2} textAlign='right'>
+        Share on
+        <Link color='blue7' target="_blank" href={`https://www.facebook.com/sharer/sharer.php?u=https://explorer.ooni.org/${url}`}> Facebook </Link>
+        or
+        <Link color='blue7' target="_blank" href={`https://twitter.com/intent/tweet?text=${text}&url=https://explorer.ooni.org/${url}`}> Twitter</Link>
+      </Text>
+    </Flex>
+  )
+}
+
+SocialButtons.propTypes = {
+  url: PropTypes.string.isRequired
+}
+
+export default SocialButtons
diff --git a/components/country/PageNavMenu.js b/components/country/PageNavMenu.js
@@ -1,9 +1,11 @@
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 import { Flex, Box, NavLink } from 'ooni-components'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { MdExpandLess } from 'react-icons/lib/md'
 import { Hide } from 'rebass'
+import SocialButtons from '../SocialButtons'
 
 const PageNavItem = ({ link, children }) => (
   <Box mx={3} my={1}>
@@ -19,7 +21,7 @@ const ToggleIcon = styled(MdExpandLess)`
   transition: transform 0.1s linear;
 `
 
-const PageNavMenu = () => {
+const PageNavMenu = ({ countryCode }) => {
   const [isOpen, setOpen] = useState(true)
 
   return (
@@ -28,8 +30,8 @@ const PageNavMenu = () => {
       <Hide large xlarge>
         <ToggleIcon size={36} isOpen={isOpen} onClick={() => setOpen(!isOpen)} />
       </Hide>
-      <Box width={[1, 'unset']}>
-        {isOpen && <Flex flexDirection={['column', 'row']} justifyContent='center' py={3}>
+      <Box width={[1, 'unset']} py={2}>
+        {isOpen && <Flex flexDirection={['column', 'row']} justifyContent='center' py={1}>
           <PageNavItem link='#overview'>
             <FormattedMessage id='Country.Heading.Overview'/>
           </PageNavItem>
@@ -43,9 +45,16 @@ const PageNavMenu = () => {
             <FormattedMessage id='Country.Heading.NetworkProperties' />
           </PageNavItem>
         </Flex>}
+        <Flex justifyContent={['flex-start', 'flex-end']} px={[0, 3]} py={1}>
+          <SocialButtons url={`country/${countryCode}`}/>
+        </Flex>
       </Box>
     </React.Fragment>
   )
 }
 
+PageNavMenu.propTypes = {
+  countryCode: PropTypes.string
+}
+
 export default PageNavMenu
diff --git a/components/measurement/DetailsHeader.js b/components/measurement/DetailsHeader.js
@@ -10,6 +10,7 @@ import { MdOpenInNew } from 'react-icons/lib/md'
 
 import { getTestMetadata } from '../utils'
 import Badge from '../Badge'
+import SocialButtons from '../SocialButtons'
 
 const TestGroupBadge = ({icon, name, color}) => (
   <Badge bg={color} color='white'>
@@ -30,45 +31,51 @@ TestGroupBadge.propTypes = {
   color: PropTypes.string
 }
 
-const DetailsHeader = ({testName, runtime, notice}) => {
+const DetailsHeader = ({testName, runtime, notice, url}) => {
   const metadata = getTestMetadata(testName)
 
   return (
-    <Flex py={4} alignItems={['flex-end', 'center']} flexDirection={['column', 'row']}>
-      <Flex mb={[3, 0]} alignItems='center'>
-        <Box>
-          <TestGroupBadge
-            icon={metadata.icon}
-            name={<Text fontSize={20} is='span'>{metadata.groupName}</Text>}
-            color={metadata.color}
-          />
+    <React.Fragment>
+      <Flex pt={4} pb={2} alignItems={['flex-end', 'center']} flexDirection={['column', 'row']}>
+        <Flex mb={[3, 0]} alignItems='center'>
+          <Box>
+            <TestGroupBadge
+              icon={metadata.icon}
+              name={<Text fontSize={20} is='span'>{metadata.groupName}</Text>}
+              color={metadata.color}
+            />
+          </Box>
+          <Box ml={2}>
+            <Link color='blue7' href={metadata.info}>
+              <Text fontSize={20}>
+                {metadata.name}
+                &nbsp;
+                <small><MdOpenInNew /></small>
+              </Text>
+            </Link>
+          </Box>
+        </Flex>
+        <Box mx='auto'>
+          {notice}
         </Box>
-        <Box ml={2}>
-          <Link color='blue7' href={metadata.info}>
-            <Text fontSize={20}>
-              {metadata.name}
-              &nbsp;
-              <small><MdOpenInNew /></small>
-            </Text>
-          </Link>
+        <Box>
+          <Text fontSize={20}>
+            <FormattedMessage id='Measurement.DetailsHeader.Runtime' />: <Text is='span' fontWeight='bold'>{prettyMs(runtime * 1000)}</Text>
+          </Text>
         </Box>
       </Flex>
-      <Box mx='auto'>
-        {notice}
-      </Box>
-      <Box>
-        <Text fontSize={20}>
-          <FormattedMessage id='Measurement.DetailsHeader.Runtime' />: <Text is='span' fontWeight='bold'>{prettyMs(runtime * 1000)}</Text>
-        </Text>
-      </Box>
-    </Flex>
+      <Flex pb={4} pt={2} alignItems={['flex-start', 'flex-end']}>
+        <SocialButtons url={url}/>
+      </Flex>
+    </React.Fragment>
   )
 }
 
 DetailsHeader.propTypes = {
   testName: PropTypes.string.isRequired,
   runtime: PropTypes.number.isRequired,
-  notice: PropTypes.any
+  notice: PropTypes.any,
+  url: PropTypes.string
 }
 
 export default DetailsHeader
diff --git a/pages/country.js b/pages/country.js
@@ -138,7 +138,7 @@ export default class Country extends React.Component {
                           {countryName}
                         </AnimatedHeading>
                       </Box>
-                      <PageNavMenu />
+                      <PageNavMenu countryCode={countryCode}/>
                     </AnimatedFlex>
                   </Container>
                 </RaisedHeader>

diff --git a/pages/measurement.js b/pages/measurement.js
@@ -115,6 +115,7 @@ export default class Measurement extends React.Component {
                   testName={measurement.test_name}
                   runtime={measurement.test_runtime}
                   notice={legacy}
+                  url={`measurement/${measurement.report_id}`}
                 />
 
                 {summaryText && <SummaryText