Update social icons on share page (#610)

* Replace Twitter icon with X icon (closes #607)
* Add missing Instagram icon
* Move social icons out of entry resources
* Use same social icons as in the header

---------
Co-authored-by: ezwelty <ethan.welty@gmail.com>

scripts/data.js

@@ -42,7 +42,7 @@ const HARVEST_KEYS = [
   'subname',
   'subname_url',
   'facebook',
-  'twitter',
+  'x',
   'instagram',
 ]
 

src/components/entry/resources.js

@@ -1,8 +1,6 @@
 import EatTheWeedsLogo from './icons/EatTheWeeds.png'
-import FacebookLogo from './icons/Facebook.svg'
 import ForagingTexasLogo from './icons/ForagingTexas.png'
 import FruitipediaLogo from './icons/Fruitipedia.png'
-import TwitterLogo from './icons/Twitter.svg'
 import UrbanMushroomsLogo from './icons/UrbanMushrooms.png'
 import USDALogo from './icons/USDA.svg'
 import WikipediaLogo from './icons/Wikipedia.svg'
@@ -43,16 +41,6 @@ const RESOURCES = [
     urlKey: 'wikipedia',
     icon: WikipediaLogo,
   },
-  {
-    title: 'Facebook',
-    urlKey: 'facebook',
-    icon: FacebookLogo,
-  },
-  {
-    title: 'Twitter',
-    urlKey: 'twitter',
-    icon: TwitterLogo,
-  },
 ]
 
 export { RESOURCES }

src/components/table/DataTableProperties.js

@@ -1,7 +1,6 @@
 import { LinkExternal } from '@styled-icons/boxicons-regular'
 import styled from 'styled-components/macro'
 
-import { RESOURCES } from '../entry/resources'
 import { theme } from '../ui/GlobalStyle'
 
 const TablePreviewLink = styled.a`
@@ -21,16 +20,6 @@ const TablePreviewLink = styled.a`
 const customLinkSort = (rowOne, rowTwo) =>
   rowOne.links.length - rowTwo.links.length
 
-const ResourceList = ({ url, key }) =>
-  RESOURCES.map(
-    ({ title, urlKey, icon }) =>
-      url.includes(urlKey) && (
-        <TablePreviewLink href={url} target="_blank" rel="noreferrer">
-          <img src={icon} key={key} alt={`${title} logo`} />
-        </TablePreviewLink>
-      ),
-  )
-
 const FORMATTERS = {
   muni: ({ muni }) => (muni ? 'Tree inventory' : 'Community map'),
   link: ({ url }) =>
@@ -39,8 +28,6 @@ const FORMATTERS = {
         <LinkExternal size="14" color={theme.orange} />
       </a>
     ),
-  links: ({ links }) =>
-    links.map((link, index) => <ResourceList key={index} url={link} />),
   created_at: ({ created_at }) =>
     new Date(created_at).toISOString().slice(0, 10),
 }
@@ -49,4 +36,4 @@ const SORTERS = {
   links: customLinkSort,
 }
 
-export { FORMATTERS, SORTERS }
+export { FORMATTERS, SORTERS, TablePreviewLink }

src/components/table/ShareTheHarvestTable.jsx

@@ -1,11 +1,14 @@
+import { Facebook, Instagram } from '@styled-icons/boxicons-logos'
 import { Search as SearchIcon } from '@styled-icons/boxicons-regular'
 import React from 'react'
 import styled from 'styled-components/macro'
 
 import harvestData from '../../constants/data/harvest.json'
+import X from '../../constants/X.svg'
+import { theme } from '../ui/GlobalStyle'
 import Input from '../ui/Input'
 import DataTable from './DataTable'
-import { FORMATTERS } from './DataTableProperties'
+import { TablePreviewLink } from './DataTableProperties'
 
 const OrganizationName = styled.span`
   ${({ $isActive }) =>
@@ -43,6 +46,31 @@ const FormattedOrganization = ({
   </OrganizationName>
 )
 
+const FormattedSocials = ({ facebook, instagram, x }) => {
+  if (!facebook && !instagram && !x) {
+    return null
+  }
+  return (
+    <>
+      {facebook && (
+        <TablePreviewLink href={facebook} target="_blank" rel="noreferrer">
+          <Facebook color={theme.text} />
+        </TablePreviewLink>
+      )}
+      {instagram && (
+        <TablePreviewLink href={instagram} target="_blank" rel="noreferrer">
+          <Instagram color={theme.text} />
+        </TablePreviewLink>
+      )}
+      {x && (
+        <TablePreviewLink href={x} target="_blank" rel="noreferrer">
+          <img src={X} alt={`X logo`} />
+        </TablePreviewLink>
+      )}
+    </>
+  )
+}
+
 const columns = [
   {
     id: 'country',
@@ -77,9 +105,8 @@ const columns = [
   {
     id: 'social',
     name: 'Social',
-    selector: (row) => row.facebook + row.twitter,
-    format: ({ facebook, twitter }) =>
-      FORMATTERS.links({ links: [facebook, twitter].filter(Boolean) }),
+    selector: (row) => row.facebook || row.instagram || row.x,
+    format: FormattedSocials,
     compact: true,
     width: '80px',
     right: true,

src/components/ui/SocialButtons.js

@@ -5,7 +5,7 @@ import {
   Slack,
 } from '@styled-icons/boxicons-logos'
 
-import { ReactComponent as X } from '../../components/entry/icons/X.svg'
+import { ReactComponent as X } from '../../constants/X.svg'
 
 const SocialButtons = ({ ...props }) => (
   <div {...props}>