refactor: kids-first#3322 remove react social icons lib

evans-g-crsj · Jun 22, 2021 · ccbf224 · ccbf224
1 parent 8a8d969
commit ccbf224
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 99 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,11 +30,11 @@
     "less2sass": "^1.0.3",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
-    "memoize-one": "^5.1.1",
+    "memoize-one": "^5.2.1",
     "node-sass": "^4.14.1",
     "query-string": "^6.14.1",
     "react": "^16.13.1",
-    "react-copy-to-clipboard": "^5.0.1",
+    "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^16.13.1",
     "react-ga": "^2.7.0",
     "react-grid-system": "^6.4.2",
@@ -43,12 +43,11 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-share": "^3.0.1",
-    "react-social-icons": "^4.1.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "scriptjs": "^2.5.9",
-    "tinygradient": "^1.1.2"
+    "tinygradient": "^1.1.5"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,47 +1,47 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { FacebookFilled, GithubFilled, TwitterSquareFilled } from '@ant-design/icons';
 import urlJoin from 'url-join';
-// [NEXT] 'react-icons' have these icons, 'react-social-icons' is not necessary here
-// e.g. https://fontawesome.com/icons/twitter
-import { SocialIcon } from 'react-social-icons';
-import DataVersionProvider from './DataVersionProvider';
 
-import { kfWebRoot, kfFacebook, kfTwitter, kfGithub, notionWebRoot } from 'common/injectGlobals';
 import { UI_VERSION } from 'common/constants';
+import { kfFacebook, kfGithub, kfTwitter, kfWebRoot, notionWebRoot } from 'common/injectGlobals';
+import styleThemeColors from 'style/themes/default/colors.module.scss';
 import Row from 'uikit/Row';
 
-import { footerLink, footerContainer, socialIconsContainer } from './Footer.module.css';
+import DataVersionProvider from './DataVersionProvider';
+import FooterLink from './FooterLink';
+
+import { footerContainer, footerLink, socialIconsContainer } from './Footer.module.css';
 
-const FooterLink = ({ href, children }) => (
-  <a className={`${footerLink} greyScale0`} href={href} target="_blank" rel="noopener noreferrer">
-    {children}
-  </a>
-);
-FooterLink.propTypes = {
-  href: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element.isRequired]),
-};
+const socialIconFontSize = '30px';
 
-const socialIconSize = { width: 30, height: 30 };
 const Footer = () => (
   <footer className={`${footerContainer} greyScale9`}>
     <Row>
-      <FooterLink href={kfWebRoot}>kidsfirstdrc.org</FooterLink>
+      <FooterLink href={kfWebRoot} className={footerLink}>
+        kidsfirstdrc.org
+      </FooterLink>
       {' | '}
-      <FooterLink href={urlJoin(kfWebRoot, '/portal')}>About the Portal</FooterLink>
+      <FooterLink href={urlJoin(kfWebRoot, '/portal')} className={footerLink}>
+        About the Portal
+      </FooterLink>
       {' | '}
-      <FooterLink href={urlJoin(kfWebRoot, '/policies')}>Policies</FooterLink>
+      <FooterLink href={urlJoin(kfWebRoot, '/policies')} className={footerLink}>
+        Policies
+      </FooterLink>
       {' | '}
       <FooterLink
         href={urlJoin(
           notionWebRoot,
           '/Kids-First-DRC-Help-Center-c26b36ff66564417834f3f264475d10a',
         )}
+        className={footerLink}
       >
         Support
       </FooterLink>
       {' | '}
-      <FooterLink href={urlJoin(kfWebRoot, '/contact')}>Contact</FooterLink>
+      <FooterLink href={urlJoin(kfWebRoot, '/contact')} className={footerLink}>
+        Contact
+      </FooterLink>
       {' | '}
       {`UI: ${UI_VERSION}`}
       {', '}
@@ -50,9 +50,21 @@ const Footer = () => (
     </Row>
     <div className={socialIconsContainer}>
       {'Follow Us'}
-      <SocialIcon url={kfFacebook} style={socialIconSize} />
-      <SocialIcon url={kfTwitter} style={socialIconSize} />
-      <SocialIcon url={kfGithub} style={socialIconSize} />
+      <a target="_blank" rel="noopener noreferrer" href={kfFacebook}>
+        <FacebookFilled
+          style={{ fontSize: socialIconFontSize, color: styleThemeColors.facebookColor }}
+        />
+      </a>
+      <a target="_blank" rel="noopener noreferrer" href={kfTwitter}>
+        <TwitterSquareFilled
+          style={{ fontSize: socialIconFontSize, color: styleThemeColors.twitterColor }}
+        />
+      </a>
+      <a target="_blank" rel="noopener noreferrer" href={kfGithub}>
+        <GithubFilled
+          style={{ fontSize: socialIconFontSize, color: styleThemeColors.githubColor }}
+        />
+      </a>
     </div>
   </footer>
 );

diff --git a/src/components/FooterLink.tsx b/src/components/FooterLink.tsx
@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+
+type OwnProps = {
+  href: string;
+  children: ReactElement;
+  className?: string;
+};
+
+const FooterLink = ({ href, children, className = '' }: OwnProps) => (
+  <a className={`${className} greyScale0`} href={href} target="_blank" rel="noopener noreferrer">
+    {children}
+  </a>
+);
+
+export default FooterLink;
diff --git a/src/components/UserProfile/FindMeEditable.js b/src/components/UserProfile/FindMeEditable.js
@@ -36,7 +36,7 @@ function FindMeEditable({ setIsSaveButtonDisabledCB, findMeInitialValues }) {
     return Promise.reject(PLEASE_ENTER_A_VALID_URL);
   };
 
-  const socialItemsWithSize = socialItems(28, 28);
+  const socialItemsWithSize = socialItems();
   const socialIcons = entries(socialItemsWithSize).map(([serviceName, value]) => ({
     id: serviceName,
     label: value.name,
@@ -52,21 +52,19 @@ function FindMeEditable({ setIsSaveButtonDisabledCB, findMeInitialValues }) {
       </Row>
       <Space direction={'vertical'}>
         {socialIcons.map((item) => (
-          <Space direction={'horizontal'} key={item.id}>
-            {item.icon}
-            <Form.Item
-              name={item.id}
-              label={item.label}
-              rules={[
-                { required: false },
-                () => ({
-                  validator: validateInput,
-                }),
-              ]}
-            >
-              <FindMeInput item={item} />
-            </Form.Item>
-          </Space>
+          <Form.Item
+            key={item.id}
+            name={item.id}
+            label={item.label}
+            rules={[
+              { required: false },
+              () => ({
+                validator: validateInput,
+              }),
+            ]}
+          >
+            <FindMeInput item={item} />
+          </Form.Item>
         ))}
       </Space>
     </div>

diff --git a/src/components/UserProfile/FindMeInput.js b/src/components/UserProfile/FindMeInput.js
@@ -45,6 +45,7 @@ class FindMeInput extends Component {
         value={inputVal}
         type="text"
         onChange={this.onChange}
+        prefix={item.icon}
       />
     );
   }

diff --git a/src/components/UserProfile/FindMeReadOnly.tsx b/src/components/UserProfile/FindMeReadOnly.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Avatar, Row, Space, Typography } from 'antd';
+import { Row, Space, Typography } from 'antd';
 import isEmpty from 'lodash/isEmpty';
 
 import { socialItems } from 'components/UserProfile/utils';
@@ -61,7 +61,7 @@ const FindMeReadOnly = (props: Props) => {
       <Space direction={'vertical'} size={'middle'}>
         {userSocialItems.map(({ service, icon, value, href }, index) => (
           <Space key={index} align={'center'}>
-            <Avatar icon={icon} />
+            {icon}
             <a target="_blank" rel="noopener noreferrer" href={href(value)}>
               {service}
             </a>