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,8 +41,7 @@ const Tags: React.FC<TagsProps> = ({
 
   return (
     <div className={classes}>
-      {tags &&
+      {tags?.map((tag) => (
-        tags.map((tag) => (
         <Tag tag={tag} noLinks={noLinks} key={shortid.generate()} />
       ))}
       {shouldShowMore && (

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,13 +12,11 @@ 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} />
       )}
 
-      {metadata?.additionalInformation?.links &&
+      {metadata?.additionalInformation?.links.length && (
-        metadata?.additionalInformation?.links.length && (
         <div className={styles.samples}>
           <MetaItem
             title="Sample Data"

src/components/organisms/AssetContent/index.tsx

@@ -28,8 +28,7 @@ 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>
               <Link
                 to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}

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,9 +28,7 @@ export default function Preview({
               small
             />
           )}
-        {values.links &&
+        {typeof values.links !== 'string' && values.links?.length && (
-          typeof values.links !== 'string' &&
-          values.links.length && (
           <Button
             href={(values.links[0] as FileMetadata).url}
             target="_blank"

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