refactor(sharing): avoid nested template literals

This improves readability. I also rename a variable to avoid duplicate
between global scope and useEffect scope.

6 files changed, 29 insertions, 28 deletions

diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx
index 80acf8d..4d26ea4 100644
--- a/src/components/Buttons/Button/Button.tsx
+++ b/src/components/Buttons/Button/Button.tsx
@@ -15,11 +15,12 @@ const Button = ({
   isDisabled?: boolean;
   isPrimary?: boolean;
 }) => {
-  const classes = `${styles.btn} ${
-    isPrimary
-      ? `${styles.primary} ${styles[`primary--${position}`]}`
-      : `${styles.secondary} ${styles[`secondary--${position}`]}`
-  }`;
+  const primaryPosition = `primary--${position}`;
+  const secondaryPosition = `secondary--${position}`;
+  const typeStyles = isPrimary
+    ? `${styles.primary} ${styles[primaryPosition]}`
+    : `${styles.secondary} ${styles[secondaryPosition]}`;
+  const classes = `${styles.btn} ${typeStyles}`;
 
   return (
     <button
diff --git a/src/components/Buttons/ButtonLink/ButtonLink.tsx b/src/components/Buttons/ButtonLink/ButtonLink.tsx
index a2f75f2..3e78440 100644
--- a/src/components/Buttons/ButtonLink/ButtonLink.tsx
+++ b/src/components/Buttons/ButtonLink/ButtonLink.tsx
@@ -16,9 +16,9 @@ const ButtonLink = ({
   isExternal?: boolean;
   hasIcon?: boolean;
 }) => {
-  const classes = `${styles.btn} ${styles.link} ${styles[`link--${position}`]}${
-    hasIcon ? ` ${styles['link--icon']}` : ''
-  }`;
+  const positionModifier = `link--${position}`;
+  const iconModifier = hasIcon ? ` ${styles['link--icon']}` : '';
+  const classes = `${styles.btn} ${styles.link} ${styles[positionModifier]}${iconModifier}`;
 
   return isExternal ? (
     <a className={classes} href={target}>
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index dd1bc63..048219c 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -10,10 +10,8 @@ const Form = ({
   submitHandler: any;
   modifier?: string;
 }) => {
-  const classes =
-    modifier !== ''
-      ? `${styles.wrapper} ${styles[`wrapper--${modifier}`]}`
-      : styles.wrapper;
+  const withModifier = modifier ? `wrapper--${modifier}` : '';
+  const classes = `${styles.wrapper} ${withModifier}`;
 
   return (
     <form onSubmit={submitHandler} className={classes}>
diff --git a/src/components/Icons/Hamburger/Hamburger.tsx b/src/components/Icons/Hamburger/Hamburger.tsx
index 3b9e609..9b39272 100644
--- a/src/components/Icons/Hamburger/Hamburger.tsx
+++ b/src/components/Icons/Hamburger/Hamburger.tsx
@@ -1,13 +1,10 @@
 import styles from './Hamburger.module.scss';
 
 const HamburgerIcon = ({ isActive }: { isActive: boolean }) => {
-  return (
-    <span
-      className={`${styles.icon}${
-        isActive ? ` ${styles['icon--active']}` : ''
-      }`}
-    ></span>
-  );
+  const withModifier = isActive ? ` ${styles['icon--active']}` : '';
+  const iconClasses = `${styles.icon} ${withModifier}`;
+
+  return <span className={iconClasses}></span>;
 };
 
 export default HamburgerIcon;
diff --git a/src/components/Notice/Notice.tsx b/src/components/Notice/Notice.tsx
index c941bf9..472efa5 100644
--- a/src/components/Notice/Notice.tsx
+++ b/src/components/Notice/Notice.tsx
@@ -10,8 +10,10 @@ const Notice = ({
   children: ReactNode;
   type: NoticeType;
 }) => {
+  const withModifier = `message--${type}`;
+
   return (
-    <div className={`${styles.message} ${styles[`message--${type}`]}`}>
+    <div className={`${styles.message} ${styles[withModifier]}`}>
       {children}
     </div>
   );
diff --git a/src/components/Sharing/Sharing.tsx b/src/components/Sharing/Sharing.tsx
index d4d2dff..4bcad5d 100644
--- a/src/components/Sharing/Sharing.tsx
+++ b/src/components/Sharing/Sharing.tsx
@@ -21,7 +21,7 @@ type Website = {
 const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
   const [pageExcerpt, setPageExcerpt] = useState('');
   const [pageUrl, setPageUrl] = useState('');
-  const [hostname, setHostname] = useState('');
+  const [domainName, setDomainName] = useState('');
   const router = useRouter();
 
   useEffect(() => {
@@ -33,11 +33,10 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
 
   useEffect(() => {
     const { protocol, hostname, port } = window.location;
-    const fullUrl = `${protocol}//${hostname}${port ? `:${port}` : ''}${
-      router.asPath
-    }`;
+    const currentPort = port ? `:${port}` : '';
+    const fullUrl = `${protocol}//${hostname}${currentPort}${router.asPath}`;
 
-    setHostname(hostname);
+    setDomainName(hostname);
     setPageUrl(fullUrl);
   }, [router.asPath]);
 
@@ -54,18 +53,21 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
       switch (key) {
         case 'content':
           if (id === 'email') {
-            const body = `${t`Introduction:`}\n\n"${pageExcerpt}"\n\n${t`Read more here:`} ${pageUrl}`;
+            const intro = t`Introduction:`;
+            const readMore = t`Read more here:`;
+            const body = `${intro}\n\n"${pageExcerpt}"\n\n${readMore} ${pageUrl}`;
             sharingUrl += encodeURI(body);
           } else {
             sharingUrl += encodeURI(pageExcerpt);
           }
           break;
         case 'title':
-          const prefix = id === 'email' ? t`Seen on ${hostname}:` : '';
+          const prefix = id === 'email' ? t`Seen on ${domainName}:` : '';
           sharingUrl += encodeURI(`${prefix} ${title}`);
           break;
         case 'url':
           sharingUrl += encodeURI(pageUrl);
+          break;
         default:
           break;
       }
@@ -82,12 +84,13 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
     return websites.map((website) => {
       const { id, name } = website;
       const sharingUrl = getSharingUrl(website);
+      const linkModifier = `link--${id}`;
 
       return (
         <li key={id}>
           <a
             href={sharingUrl}
-            className={`${styles.link} ${styles[`link--${id}`]}`}
+            className={`${styles.link} ${styles[linkModifier]}`}
           >
             {name}
           </a>