From acfa0b8d060b84b227f36d2f079961ea6e732b8a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 10 Sep 2020 22:22:16 +0200
Subject: [PATCH] refactor to use optional chain expressions

---
 src/components/atoms/Input/index.tsx          |  5 +-
 src/components/atoms/Price/index.tsx          |  4 +-
 src/components/atoms/Table/index.tsx          |  2 +-
 src/components/atoms/Tags.tsx                 |  7 ++-
 .../molecules/FormFields/Price/Dynamic.tsx    |  2 +-
 src/components/molecules/Menu.tsx             |  2 +-
 .../organisms/AssetContent/MetaSecondary.tsx  | 46 +++++++++----------
 .../organisms/AssetContent/index.tsx          | 19 ++++----
 src/components/organisms/AssetList.tsx        |  2 +-
 src/components/pages/Publish/Preview.tsx      | 26 +++++------
 src/providers/UserPreferences.tsx             |  6 +--
 tests/unit/components/Button.test.tsx         |  4 +-
 12 files changed, 58 insertions(+), 67 deletions(-)

diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 3d6b36f74..7ff57eb36 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/src/components/atoms/Input/index.tsx
@@ -53,8 +53,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
   } = props
 
   const hasError =
-    props.form &&
-    props.form.touched[field.name] &&
+    props.form?.touched[field.name] &&
     typeof props.form.errors[field.name] === 'string'
 
   const styleClasses = cx({
@@ -65,7 +64,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
   return (
     <div
       className={styleClasses}
-      data-is-submitting={props.form && props.form.isSubmitting ? true : null}
+      data-is-submitting={props.form?.isSubmitting ? true : null}
     >
       <Label htmlFor={name} required={required}>
         {label}
diff --git a/src/components/atoms/Price/index.tsx b/src/components/atoms/Price/index.tsx
index 5b3303d75..23fb17e37 100644
--- a/src/components/atoms/Price/index.tsx
+++ b/src/components/atoms/Price/index.tsx
@@ -22,14 +22,14 @@ export default function Price({
 
   return !ocean ? (
     <div className={styles.empty}>Connect your wallet to view price</div>
-  ) : price && price.value ? (
+  ) : price?.value ? (
     <PriceUnit
       price={price.value}
       className={className}
       small={small}
       conversion={conversion}
     />
-  ) : price && price.value === '' ? (
+  ) : price?.value === '' ? (
     <div className={styles.empty}>
       No price found{' '}
       <Tooltip content="We could not find a pool for this data set, which can have multiple reasons. Is your wallet connected to the correct network?" />
diff --git a/src/components/atoms/Table/index.tsx b/src/components/atoms/Table/index.tsx
index 0a2fe5e38..829b5e8f1 100644
--- a/src/components/atoms/Table/index.tsx
+++ b/src/components/atoms/Table/index.tsx
@@ -25,7 +25,7 @@ export default function Table({
 }) {
   return (
     <div>
-      {data && data.length ? (
+      {data?.length ? (
         <DataTable noHeader columns={columns} data={data} />
       ) : (
         <div>No Data Sets Yet.</div>
diff --git a/src/components/atoms/Tags.tsx b/src/components/atoms/Tags.tsx
index e7c0ae8c7..cece1d3b2 100644
--- a/src/components/atoms/Tags.tsx
+++ b/src/components/atoms/Tags.tsx
@@ -41,10 +41,9 @@ const Tags: React.FC<TagsProps> = ({
 
   return (
     <div className={classes}>
-      {tags &&
-        tags.map((tag) => (
-          <Tag tag={tag} noLinks={noLinks} key={shortid.generate()} />
-        ))}
+      {tags?.map((tag) => (
+        <Tag tag={tag} noLinks={noLinks} key={shortid.generate()} />
+      ))}
       {shouldShowMore && (
         <span className={styles.more}>{`+ ${items.length - max} more`}</span>
       )}
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index a657d0f31..8c2f26592 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -68,7 +68,7 @@ export default function Dynamic({
         <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
 
         <aside className={styles.wallet}>
-          {balance && balance.ocean && (
+          {balance?.ocean && (
             <div className={styles.balance}>
               OCEAN <strong>{balance.ocean}</strong>
             </div>
diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx
index aa7ffacbe..4803dff39 100644
--- a/src/components/molecules/Menu.tsx
+++ b/src/components/molecules/Menu.tsx
@@ -19,7 +19,7 @@ function MenuLink({ item }: { item: MenuItem }) {
   const location = useLocation()
 
   const classes =
-    location && location.pathname === item.link
+    location?.pathname === item.link
       ? `${styles.link} ${styles.active}`
       : styles.link
 
diff --git a/src/components/organisms/AssetContent/MetaSecondary.tsx b/src/components/organisms/AssetContent/MetaSecondary.tsx
index 0a2cacbfd..16bff6b76 100644
--- a/src/components/organisms/AssetContent/MetaSecondary.tsx
+++ b/src/components/organisms/AssetContent/MetaSecondary.tsx
@@ -12,31 +12,29 @@ export default function MetaSecondary({
 }): ReactElement {
   return (
     <aside className={styles.metaSecondary}>
-      {metadata?.additionalInformation?.tags &&
-        metadata?.additionalInformation?.tags.length > 0 && (
-          <Tags items={metadata?.additionalInformation?.tags} />
-        )}
+      {metadata?.additionalInformation?.tags.length > 0 && (
+        <Tags items={metadata?.additionalInformation?.tags} />
+      )}
 
-      {metadata?.additionalInformation?.links &&
-        metadata?.additionalInformation?.links.length && (
-          <div className={styles.samples}>
-            <MetaItem
-              title="Sample Data"
-              content={
-                <Button
-                  href={metadata?.additionalInformation?.links[0].url}
-                  target="_blank"
-                  rel="noreferrer"
-                  download
-                  style="text"
-                  size="small"
-                >
-                  Download Sample
-                </Button>
-              }
-            />
-          </div>
-        )}
+      {metadata?.additionalInformation?.links.length && (
+        <div className={styles.samples}>
+          <MetaItem
+            title="Sample Data"
+            content={
+              <Button
+                href={metadata?.additionalInformation?.links[0].url}
+                target="_blank"
+                rel="noreferrer"
+                download
+                style="text"
+                size="small"
+              >
+                Download Sample
+              </Button>
+            }
+          />
+        </div>
+      )}
     </aside>
   )
 }
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 470cf55a5..73f90f8fb 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -28,16 +28,15 @@ export default function AssetContent({
       <div className={styles.content}>
         <aside className={styles.meta}>
           <p>{datePublished && <Time date={datePublished} />}</p>
-          {metadata?.additionalInformation?.categories &&
-            metadata?.additionalInformation?.categories?.length && (
-              <p>
-                <Link
-                  to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
-                >
-                  {metadata?.additionalInformation?.categories[0]}
-                </Link>
-              </p>
-            )}
+          {metadata?.additionalInformation?.categories?.length && (
+            <p>
+              <Link
+                to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
+              >
+                {metadata?.additionalInformation?.categories[0]}
+              </Link>
+            </p>
+          )}
         </aside>
 
         <Markdown text={metadata?.additionalInformation?.description || ''} />
diff --git a/src/components/organisms/AssetList.tsx b/src/components/organisms/AssetList.tsx
index 9aa2e7d42..c696c3077 100644
--- a/src/components/organisms/AssetList.tsx
+++ b/src/components/organisms/AssetList.tsx
@@ -43,7 +43,7 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
   return (
     <>
       <div className={styles.assetList}>
-        {queryResult && queryResult.totalResults > 0 ? (
+        {queryResult?.totalResults > 0 ? (
           queryResult.results.map((ddo: DDO) => {
             const { attributes } = ddo.findServiceByType('metadata')
 
diff --git a/src/components/pages/Publish/Preview.tsx b/src/components/pages/Publish/Preview.tsx
index 8a6fdb211..4b34b1de3 100644
--- a/src/components/pages/Publish/Preview.tsx
+++ b/src/components/pages/Publish/Preview.tsx
@@ -28,20 +28,18 @@ export default function Preview({
               small
             />
           )}
-        {values.links &&
-          typeof values.links !== 'string' &&
-          values.links.length && (
-            <Button
-              href={(values.links[0] as FileMetadata).url}
-              target="_blank"
-              rel="noreferrer"
-              download
-              style="text"
-              size="small"
-            >
-              Download Sample
-            </Button>
-          )}
+        {typeof values.links !== 'string' && values.links?.length && (
+          <Button
+            href={(values.links[0] as FileMetadata).url}
+            target="_blank"
+            rel="noreferrer"
+            download
+            style="text"
+            size="small"
+          >
+            Download Sample
+          </Button>
+        )}
         {values.tags && <Tags items={values.tags.split(',')} />}
       </header>
 
diff --git a/src/providers/UserPreferences.tsx b/src/providers/UserPreferences.tsx
index 52deca853..4946f2dde 100644
--- a/src/providers/UserPreferences.tsx
+++ b/src/providers/UserPreferences.tsx
@@ -42,11 +42,9 @@ function UserPreferencesProvider({
   const localStorage = getLocalStorage()
 
   // Set default values from localStorage
-  const [debug, setDebug] = useState<boolean>(
-    (localStorage && localStorage.debug) || false
-  )
+  const [debug, setDebug] = useState<boolean>(localStorage?.debug || false)
   const [currency, setCurrency] = useState<string>(
-    (localStorage && localStorage.currency) || 'EUR'
+    localStorage?.currency || 'EUR'
   )
 
   // Write values to localStorage on change
diff --git a/tests/unit/components/Button.test.tsx b/tests/unit/components/Button.test.tsx
index 19019c8d1..1fb5929d2 100644
--- a/tests/unit/components/Button.test.tsx
+++ b/tests/unit/components/Button.test.tsx
@@ -11,7 +11,7 @@ describe('Button', () => {
     const button = container.querySelector('button')
     expect(button).toBeInTheDocument()
     expect(button).toHaveTextContent('primary')
-    expect(button && button.className).toMatch(/primary/)
+    expect(button?.className).toMatch(/primary/)
   })
 
   it('href renders correctly without crashing', () => {
@@ -31,6 +31,6 @@ describe('Button', () => {
     const button = container.querySelector('button')
     expect(button).toBeInTheDocument()
     expect(button).toHaveTextContent('text')
-    expect(button && button.className).toMatch(/text/)
+    expect(button?.className).toMatch(/text/)
   })
 })