Upgrade React to 18, Next.js to 13

wri · Oct 23, 2024 · 6c42e9b · 6c42e9b
1 parent 1a43a55
commit 6c42e9b
Show file tree

Hide file tree

Showing 39 changed files with 1,399 additions and 1,083 deletions.
diff --git a/components/layout/footer.js b/components/layout/footer.js
@@ -19,7 +19,7 @@ const Footer = () => {
             <div className="footer-item">
               <h1 className="logo">
                 <Link href="/" prefetch={false}>
-                  <a>Open Timber Portal</a>
+                  Open Timber Portal
                 </Link>
               </h1>
             </div>
@@ -50,11 +50,11 @@ const Footer = () => {
               </p>
 
               <div className="footer-links">
-                <Link href="/terms" prefetch={false}>
+                <Link href="/terms" prefetch={false} legacyBehavior>
                   {intl.formatMessage({ id: 'terms.title' })}
                 </Link>
                 <span> | </span>
-                <Link href="/privacy-policy" prefetch={false}>
+                <Link href="/privacy-policy" prefetch={false} legacyBehavior>
                   {intl.formatMessage({ id: 'Privacy Policy' })}
                 </Link>
                 <span> | </span>

diff --git a/components/layout/head.js b/components/layout/head.js
@@ -5,10 +5,11 @@ import { useRouter } from 'next/router';
 
 const Head = ({ title, description }) => {
   const { locales, asPath } = useRouter();
+  const fullTitle = `${title} | Open Timber Portal`;
 
   return (
     <HeadNext>
-      <title>{title} | Open Timber Portal</title>
+      <title>{fullTitle}</title>
       <meta name="description" content={description} />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta name="author" content="Vizzuality" />

diff --git a/components/layout/header.js b/components/layout/header.js
@@ -31,9 +31,9 @@ const Header = ({ url }) => {
         <div className="header-container">
           <h1 className="header-logo">
             <Link href="/" prefetch={false}>
-              <a>
+
                 Open Timber Portal
-              </a>
+
             </Link>
             {process.env.ENV === 'staging' && (
               <span className="header-logo-staging">Staging</span>

diff --git a/components/map/legend/component.js b/components/map/legend/component.js
@@ -78,19 +78,19 @@ class LegendComponent extends PureComponent {
     setLayerSettings({
       id,
       settings: {
-        ...decodeConfig && {
+        ...(decodeConfig && {
           decodeParams: {
             startDate: dates[0],
             endDate: dates[1],
             trimEndDate: dates[2]
           }
-        },
-        ...!decodeConfig && {
+        }),
+        ...(!decodeConfig && {
           params: {
             startDate: dates[0],
             endDate: dates[1]
           }
-        }
+        })
       }
     });
   }

diff --git a/components/map/legend/templates/alerts/component.js b/components/map/legend/templates/alerts/component.js
@@ -25,9 +25,9 @@ class LegendTemplateAlerts extends PureComponent {
         decodeParams: {
           ...decodeParams,
           [who]: dayjs(value).format('YYYY-MM-DD'),
-          ...who === 'trimEndDate' && {
+          ...(who === 'trimEndDate' && {
             endDate: dayjs(value).format('YYYY-MM-DD')
-          }
+          })
         }
       }
     })

diff --git a/components/map/popup/templates/fmu/component.js b/components/map/popup/templates/fmu/component.js
@@ -52,26 +52,31 @@ class FMUTemplatePopup extends PureComponent {
         </table>
 
         {operatorId && operatorName && id &&
-          <Link href={`/operators/${operatorId}/documentation?fmuId=${id}`}>
-            <a className="c-button -tertiary -fullwidth -ellipsis -small">
-              {intl.formatMessage({ id: 'documentation' })}
-            </a>
+          <Link
+            href={`/operators/${operatorId}/documentation?fmuId=${id}`}
+            className="c-button -tertiary -fullwidth -ellipsis -small">
+
+            {intl.formatMessage({ id: 'documentation' })}
+
           </Link>
         }
 
         {id &&
-          <Link href={`/operators/${operatorId}/observations?fmuId=${id}`}>
-            <a className="c-button -tertiary -fullwidth -ellipsis -small">
-              {intl.formatMessage({ id: 'observations' })} ({fmuObservations})
-            </a>
+          <Link
+            href={`/operators/${operatorId}/observations?fmuId=${id}`}
+            className="c-button -tertiary -fullwidth -ellipsis -small">
+
+            {intl.formatMessage({ id: 'observations' })}({fmuObservations})
           </Link>
         }
 
         {operatorId &&
-          <Link href={`/operators/${operatorId}`}>
-            <a className="c-button -tertiary -fullwidth -ellipsis -small">
-              {operatorName}
-            </a>
+          <Link
+            href={`/operators/${operatorId}`}
+            className="c-button -tertiary -fullwidth -ellipsis -small">
+
+            {operatorName}
+
           </Link>
         }
       </div>

diff --git a/components/map/popup/templates/observation/component.js b/components/map/popup/templates/observation/component.js
@@ -38,11 +38,15 @@ export default function ObservationPopup({ data }) {
       label: intl.formatMessage({ id: 'operator' }),
       value: (
         data['operator-profile-id'] ? (
-          <Link href={`/operators/${data['operator-profile-id']}`} passHref>
-            <a target="_blank" rel="noopener noreferrer">
-              {data.operator}
-            </a>
-          </Link>
+          (<Link
+            href={`/operators/${data['operator-profile-id']}`}
+            passHref
+            target="_blank"
+            rel="noopener noreferrer">
+
+            {data.operator}
+
+          </Link>)
         ) : data.operator
       )
     },

diff --git a/components/operators/new.js b/components/operators/new.js
@@ -254,17 +254,17 @@ class NewOperator extends React.Component {
 
                   <ul className="c-field-buttons">
                     <li>
-                      <Link href="/operators">
-                        <a className="card-link c-button -primary -fullwidth">
-                          {intl.formatMessage({ id: 'operators' })}
-                        </a>
+                      <Link href="/operators" className="card-link c-button -primary -fullwidth">
+
+                        {intl.formatMessage({ id: 'operators' })}
+
                       </Link>
                     </li>
                     <li>
-                      <Link href="/observations">
-                        <a className="card-link c-button -primary -fullwidth">
-                          {intl.formatMessage({ id: 'observations' })}
-                        </a>
+                      <Link href="/observations" className="card-link c-button -primary -fullwidth">
+
+                        {intl.formatMessage({ id: 'observations' })}
+
                       </Link>
                     </li>
                   </ul>

diff --git a/components/operators/table.js b/components/operators/table.js
@@ -134,54 +134,58 @@ class OperatorsTable extends React.Component {
                   (fmuSearch && fmuSearch.length > 1) ||
                   expandedOperatorIds.includes(r.id);
 
-                return (
-                  <>
-                    <tr key={`${r.id}-ranking`}>
-                      <td
-                        id={`td-documentation-${r.id}`}
-                        className="td-documentation -ta-left"
+                return <>
+                  <tr key={`${r.id}-ranking`}>
+                    <td
+                      id={`td-documentation-${r.id}`}
+                      className="td-documentation -ta-left"
+                    >
+                      {r.documentation}%
+                    </td>
+
+                    <td className="-ta-left">
+                      <Link
+                        href={{
+                          pathname: '/operators/detail',
+                          query: { id: r.slug },
+                        }}
+                        as={`/operators/${r.slug}`}
                       >
-                        {r.documentation}%
-                      </td>
-
-                      <td className="-ta-left">
-                        <Link href={`/operators/${r.slug}/overview`}>
-                          <a>{r.name}</a>
-                        </Link>
-                      </td>
-
-                      <td className="-ta-left">{r.country}</td>
-                      <td className="-ta-center">
-                        {!!r.obsPerVisit && (
-                          <span>{r.obsPerVisit.toFixed(2)}</span>
-                        )}
-                        {!r.obsPerVisit && (
-                          <div className="stoplight-dot -state-0}" />
-                        )}
-                      </td>
-                      <td className="-ta-right">{r.fmusLenght}</td>
-                      <td className="-ta-right">{r.certification}</td>
-                      <td className="-ta-right">
-                        {r.fmusLenght > 0 && (
-                          <button
-                            className={`expand-row-btn${expanded ? ' -green' : ''
-                              }`}
-                            onClick={() => this.handleRowToggle(r.id)}
-                          >
-                            {expanded ? (
-                              <Icon name="icon-arrow-up" />
-                            ) : (
-                              <Icon name="icon-arrow-down" />
-                            )}
-                          </button>
-                        )}
-                      </td>
-                    </tr>
-                    {expanded && (
-                      <TableExpandedRow operator={r} fmuSearch={fmuSearch} />
-                    )}
-                  </>
-                );
+                        {r.name}
+                      </Link>
+                    </td>
+
+                    <td className="-ta-left">{r.country}</td>
+                    <td className="-ta-center">
+                      {!!r.obsPerVisit && (
+                        <span>{r.obsPerVisit.toFixed(2)}</span>
+                      )}
+                      {!r.obsPerVisit && (
+                        <div className="stoplight-dot -state-0}" />
+                      )}
+                    </td>
+                    <td className="-ta-right">{r.fmusLenght}</td>
+                    <td className="-ta-right">{r.certification}</td>
+                    <td className="-ta-right">
+                      {r.fmusLenght > 0 && (
+                        <button
+                          className={`expand-row-btn${expanded ? ' -green' : ''
+                            }`}
+                          onClick={() => this.handleRowToggle(r.id)}
+                        >
+                          {expanded ? (
+                            <Icon name="icon-arrow-up" />
+                          ) : (
+                            <Icon name="icon-arrow-down" />
+                          )}
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                  {expanded && (
+                    <TableExpandedRow operator={r} fmuSearch={fmuSearch} />
+                  )}
+                </>;
               })}
             </tbody>
           </table>

diff --git a/components/ui/card.js b/components/ui/card.js
@@ -28,11 +28,11 @@ export default function Card({ theme, letter, title, description, link, Componen
         {!isNullOrUndefined(letter) && <div className={`card-letter ${letterClassName}`}> {letter} </div>}
 
         <h2 className="card-title">{title}</h2>
-        <p className="card-description">
+        <div className="card-description">
           <Truncate lines={6}>
             {renderHTML(description || '')}
           </Truncate>
-        </p>
+        </div>
 
         {!!Component && (
           <div className="card-component">
@@ -42,8 +42,11 @@ export default function Card({ theme, letter, title, description, link, Componen
       </div>
 
       {!!link && (
-        <Link {...omit(link, 'label')} prefetch={false}>
-          <a className="card-link c-button -primary -fullwidth">{link.label}</a>
+        <Link
+          {...omit(link, 'label')}
+          prefetch={false}
+          className="card-link c-button -primary -fullwidth">
+          {link.label}
         </Link>
       )}
     </div>

diff --git a/components/ui/chart-legend.js b/components/ui/chart-legend.js
@@ -26,7 +26,7 @@ function ChartLegend({ title, list, className, intl }) {
             as={'/help/how-otp-works?article=assessing-severity-of-observations'}
             prefetch={false}
           >
-            <a><Icon name="icon-info" className="-smaller" /></a>
+            <Icon name="icon-info" className="-smaller" />
           </Link>
 
           {intl.formatMessage({ id: 'legend.title' })}:

diff --git a/components/ui/country-doc-modal.js b/components/ui/country-doc-modal.js
@@ -74,14 +74,14 @@ class DocModal extends React.Component {
           ...(docType === 'file' && form.file.base64 && {
             attachment: form.file.base64,
           }),
-          ...docType === 'stats' && {
+          ...(docType === 'stats' && {
             value: form.value,
             units: form.units,
             link: form.link
-          },
-          ...docType === 'link' && {
+          }),
+          ...(docType === 'link' && {
             link: form.link
-          }
+          })
         }
       }
     };

diff --git a/components/ui/language-dropdown.js b/components/ui/language-dropdown.js
@@ -53,7 +53,7 @@ const LanguageDropdown = ({ showSelectedCode, className }) => {
               key={l.code}
               className="language-dropdown-list-item"
             >
-              <Link href={fixedAsPath} passHref locale={l.code}>
+              <Link href={fixedAsPath} passHref locale={l.code} legacyBehavior>
                 <LanguageLink locale={l.code}>
                   {l.name}
                 </LanguageLink>
@@ -63,7 +63,7 @@ const LanguageDropdown = ({ showSelectedCode, className }) => {
         </ul>
       </DropdownContent>
     </Dropdown>
-  )
+  );
 }
 
 LanguageDropdown.propTypes = {

diff --git a/components/ui/login.js b/components/ui/login.js
@@ -81,8 +81,8 @@ const Login = () => {
 
           <div className="c-field-extra-actions">
             <p>{intl.formatMessage({ id: 'signin.forgot_password', defaultMessage: 'Did you forget your password?' })}  <button type="button" className="c-link-button" onClick={handleForgotPasswordClick}>{intl.formatMessage({ id: 'signin.reset_your_password', defaultMessage: 'Reset your password' })}</button></p>
-            <p>{intl.formatMessage({ id: 'signin.not_a_member' })} <Link href="/signup"><a onClick={closeModal}>{intl.formatMessage({ id: 'signin.register_now' })}</a></Link></p>
-            <p>{intl.formatMessage({ id: 'signin.not_a_producer' })} <Link href="/operator/new"><a onClick={closeModal}>{intl.formatMessage({ id: 'signin.register_producer' })}</a></Link></p>
+            <p>{intl.formatMessage({ id: 'signin.not_a_member' })} <Link href="/signup" onClick={closeModal}>{intl.formatMessage({ id: 'signin.register_now' })}</Link></p>
+            <p>{intl.formatMessage({ id: 'signin.not_a_producer' })} <Link href="/operator/new" onClick={closeModal}>{intl.formatMessage({ id: 'signin.register_producer' })}</Link></p>
           </div>
 
           <ul className="c-field-buttons">

diff --git a/components/ui/mobile-menu.js b/components/ui/mobile-menu.js
@@ -84,9 +84,9 @@ function MobileMenu({ className, countries, user }) {
                 {element.children.map((item) => (
                   <li key={item.href}>
                     <Link href={item.href} prefetch={false}>
-                      <a>
-                        {item.name}
-                      </a>
+
+                      {item.name}
+
                     </Link>
                   </li>
                 ))}
@@ -97,12 +97,12 @@ function MobileMenu({ className, countries, user }) {
         return (
           <li key={idx}>
             <Link href={element.href} prefetch={false}>
-              <a>
-                {element.name}
-              </a>
+
+              {element.name}
+
             </Link>
           </li>
-        )
+        );
       })}
       <li>
         <LanguageDropdown />