refactor to use optional chain expressions

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}

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?" />

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>

src/components/atoms/Tags.tsx

@@ -41,10 +41,9 @@ const Tags: React.FC<TagsProps> = ({
 
   return (
     <div className={classes}>
-      {tags &&
+      {tags?.map((tag) => (
-        tags.map((tag) => (
+        <Tag tag={tag} noLinks={noLinks} key={shortid.generate()} />
-          <Tag tag={tag} noLinks={noLinks} key={shortid.generate()} />
+      ))}
-        ))}
       {shouldShowMore && (
         <span className={styles.more}>{`+ ${items.length - max} more`}</span>
       )}

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>

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
 

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 && (
-        metadata?.additionalInformation?.tags.length > 0 && (
+        <Tags items={metadata?.additionalInformation?.tags} />
-          <Tags items={metadata?.additionalInformation?.tags} />
+      )}
-        )}
 
-      {metadata?.additionalInformation?.links &&
+      {metadata?.additionalInformation?.links.length && (
-        metadata?.additionalInformation?.links.length && (
+        <div className={styles.samples}>
-          <div className={styles.samples}>
+          <MetaItem
-            <MetaItem
+            title="Sample Data"
-              title="Sample Data"
+            content={
-              content={
+              <Button
-                <Button
+                href={metadata?.additionalInformation?.links[0].url}
-                  href={metadata?.additionalInformation?.links[0].url}
+                target="_blank"
-                  target="_blank"
+                rel="noreferrer"
-                  rel="noreferrer"
+                download
-                  download
+                style="text"
-                  style="text"
+                size="small"
-                  size="small"
+              >
-                >
+                Download Sample
-                  Download Sample
+              </Button>
-                </Button>
+            }
-              }
+          />
-            />
+        </div>
-          </div>
+      )}
-        )}
     </aside>
   )
 }

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 && (
-            metadata?.additionalInformation?.categories?.length && (
+            <p>
-              <p>
+              <Link
-                <Link
+                to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
-                  to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
+              >
-                >
+                {metadata?.additionalInformation?.categories[0]}
-                  {metadata?.additionalInformation?.categories[0]}
+              </Link>
-                </Link>
+            </p>
-              </p>
+          )}
-            )}
         </aside>
 
         <Markdown text={metadata?.additionalInformation?.description || ''} />

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')
 

src/components/pages/Publish/Preview.tsx

@@ -28,20 +28,18 @@ export default function Preview({
               small
             />
           )}
-        {values.links &&
+        {typeof values.links !== 'string' && values.links?.length && (
-          typeof values.links !== 'string' &&
+          <Button
-          values.links.length && (
+            href={(values.links[0] as FileMetadata).url}
-            <Button
+            target="_blank"
-              href={(values.links[0] as FileMetadata).url}
+            rel="noreferrer"
-              target="_blank"
+            download
-              rel="noreferrer"
+            style="text"
-              download
+            size="small"
-              style="text"
+          >
-              size="small"
+            Download Sample
-            >
+          </Button>
-              Download Sample
+        )}
-            </Button>
-          )}
         {values.tags && <Tags items={values.tags.split(',')} />}
       </header>
 

src/providers/UserPreferences.tsx

@@ -42,11 +42,9 @@ function UserPreferencesProvider({
   const localStorage = getLocalStorage()
 
   // Set default values from localStorage
-  const [debug, setDebug] = useState<boolean>(
+  const [debug, setDebug] = useState<boolean>(localStorage?.debug || false)
-    (localStorage && localStorage.debug) || false
-  )
   const [currency, setCurrency] = useState<string>(
-    (localStorage && localStorage.currency) || 'EUR'
+    localStorage?.currency || 'EUR'
   )
 
   // Write values to localStorage on change

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/)
   })
 })