fix(repo): use className instead of class for react

Author: benpsnyder

packages/webapp/package.json

@@ -106,6 +106,7 @@
     "react-router": "5.3.4",
     "react-router-breadcrumbs-hoc": "^3.2.10",
     "react-router-dom": "^5.3.3",
+    "react-router-dom-v5-compat": "6",
     "react-scripts": "5.0.1",
     "react-scroll-sync": "^0.7.1",
     "react-scrollbars-custom": "^4.0.21",

packages/webapp/src/components/Dashboard/BigcapitalLoading.tsx

@@ -1,17 +1,16 @@
-// @ts-nocheck
-import React from 'react';
-import classNames from 'classnames';
 import { Icon } from '@/components';
+import classNames from 'classnames';
+import React from 'react';
 
 import '@/style/components/BigcapitalLoading.scss';
 
 /**
  * Bigcapital logo loading.
  */
-export default function BigcapitalLoading({ className }) {
+export default function BigcapitalLoading({ className }: { className: string }) {
   return (
     <div className={classNames('bigcapital-loading', className)}>
-      <div class="center">
+      <div className="center">
         <Icon icon="bigcapital" height={37} width={228} />
       </div>
     </div>

packages/webapp/src/components/Dashboard/DashboardBackLink.tsx

@@ -13,17 +13,14 @@ function DashboardBackLink({ dashboardBackLink, breadcrumbs }) {
   const crumb = breadcrumbs[breadcrumbs.length - 2];
 
   const handleClick = (event) => {
-    const url =
-      typeof dashboardBackLink === 'string'
-        ? dashboardBackLink
-        : crumb.match.url;
+    const url = typeof dashboardBackLink === 'string' ? dashboardBackLink : crumb.match.url;
     history.push(url);
     event.preventDefault();
   };
 
   return (
     <If condition={dashboardBackLink && crumb}>
-      <div class="dashboard__back-link">
+      <div className="dashboard__back-link">
         <a href="#no-link" onClick={handleClick}>
           <Icon icon={'arrow-left'} iconSize={18} /> <T id={'back_to_list'} />
         </a>

packages/webapp/src/components/Dashboard/DashboardErrorBoundary.tsx

@@ -4,10 +4,14 @@ import { FormattedMessage as T, Icon } from '@/components';
 
 export default function DashboardErrorBoundary({}) {
   return (
-    <div class="dashboard__error-boundary">
-      <h1><T id={'sorry_about_that_something_went_wrong'} /></h1>
-      <p><T id={'if_the_problem_stuck_please_contact_us_as_soon_as_possible'} /></p>
+    <div className="dashboard__error-boundary">
+      <h1>
+        <T id={'sorry_about_that_something_went_wrong'} />
+      </h1>
+      <p>
+        <T id={'if_the_problem_stuck_please_contact_us_as_soon_as_possible'} />
+      </p>
       <Icon icon="bigcapital" height={30} width={160} />
     </div>
-  )
-}
+  );
+}

packages/webapp/src/components/Dashboard/DashboardFooter.tsx

@@ -5,7 +5,7 @@ import { For } from '@/components';
 
 function FooterLinkItem({ title, link }) {
   return (
-    <div class="">
+    <div className="">
       <a href={link} target="_blank" rel="noopener noreferrer">
         {title}
       </a>
@@ -17,8 +17,8 @@ export default function DashboardFooter() {
   const footerLinks = getFooterLinks();
 
   return (
-    <div class="dashboard__footer">
-      <div class="footer-links">
+    <div className="dashboard__footer">
+      <div className="footer-links">
         <For render={FooterLinkItem} of={footerLinks} />
       </div>
     </div>

packages/webapp/src/components/Dashboard/DashboardPage.tsx

@@ -77,17 +77,13 @@ function DashboardPage({
     return () => {
       resetResourceTypeUniversalSearch();
     };
-  }, [
-    defaultSearchResource,
-    resetResourceTypeUniversalSearch,
-    setResourceTypeUniversalSearch,
-  ]);
+  }, [defaultSearchResource, resetResourceTypeUniversalSearch, setResourceTypeUniversalSearch]);
 
   return (
     <div className={CLASSES.DASHBOARD_PAGE}>
       <Suspense
         fallback={
-          <div class="dashboard__fallback-loading">
+          <div className="dashboard__fallback-loading">
             <Spinner size={40} value={null} />
           </div>
         }

packages/webapp/src/components/Dashboard/DashboardPageContent.tsx

@@ -5,5 +5,5 @@ import React from 'react';
  * Dashboard page content.
  */
 export function DashboardPageContent({ children }) {
-  return <div class="dashboard__page-content">{children}</div>;
+  return <div className="dashboard__page-content">{children}</div>;
 }

packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx

@@ -1,15 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useHistory } from 'react-router';
-import {
-  Navbar,
-  NavbarGroup,
-  NavbarDivider,
-  Button,
-  Classes,
-  Tooltip,
-  Position,
-} from '@blueprintjs/core';
+import { Navbar, NavbarGroup, NavbarDivider, Button, Classes, Tooltip, Position } from '@blueprintjs/core';
 import { FormattedMessage as T, Icon, Hint, If } from '@/components';
 
 import DashboardTopbarUser from '@/components/Dashboard/TopbarUser';
@@ -53,28 +45,22 @@ function DashboardTopbar({
   };
 
   return (
-    <div class="dashboard__topbar" data-testId={'dashboard-topbar'}>
-      <div class="dashboard__topbar-left">
-        <div class="dashboard__topbar-sidebar-toggle">
+    <div className="dashboard__topbar" data-testId={'dashboard-topbar'}>
+      <div className="dashboard__topbar-left">
+        <div className="dashboard__topbar-sidebar-toggle">
           <Tooltip
-            content={
-              !sidebarExpended ? (
-                <T id={'open_sidebar'} />
-              ) : (
-                <T id={'close_sidebar'} />
-              )
-            }
+            content={!sidebarExpended ? <T id={'open_sidebar'} /> : <T id={'close_sidebar'} />}
             position={Position.RIGHT}
           >
             <DashboardHamburgerButton onClick={handleSidebarToggleBtn} />
           </Tooltip>
         </div>
 
-        <div class="dashboard__title">
+        <div className="dashboard__title">
           <h1>{pageTitle}</h1>
 
           <If condition={pageHint}>
-            <div class="dashboard__hint">
+            <div className="dashboard__hint">
               <Hint content={pageHint} />
             </div>
           </If>
@@ -88,28 +74,20 @@ function DashboardTopbar({
           </If>
         </div>
 
-        <div class="dashboard__breadcrumbs">
+        <div className="dashboard__breadcrumbs">
           <DashboardBreadcrumbs />
         </div>
         <DashboardBackLink />
       </div>
 
-      <div class="dashboard__topbar-right">
-        <Navbar class="dashboard__topbar-navbar">
+      <div className="dashboard__topbar-right">
+        <Navbar className="dashboard__topbar-navbar">
           <NavbarGroup>
-            <DashboardQuickSearchButton
-              onClick={() => openGlobalSearch(true)}
-            />
+            <DashboardQuickSearchButton onClick={() => openGlobalSearch(true)} />
             <QuickNewDropdown />
 
-            <Tooltip
-              content={<T id={'notifications'} />}
-              position={Position.BOTTOM}
-            >
-              <Button
-                className={Classes.MINIMAL}
-                icon={<Icon icon={'notification-24'} iconSize={20} />}
-              />
+            <Tooltip content={<T id={'notifications'} />} position={Position.BOTTOM}>
+              <Button className={Classes.MINIMAL} icon={<Icon icon={'notification-24'} iconSize={20} />} />
             </Tooltip>
 
             <Button
@@ -121,7 +99,7 @@ function DashboardTopbar({
           </NavbarGroup>
         </Navbar>
 
-        <div class="dashboard__topbar-user">
+        <div className="dashboard__topbar-user">
           <DashboardTopbarUser />
         </div>
       </div>

packages/webapp/src/components/Dashboard/DashboardTopbar/_components.tsx

@@ -6,7 +6,7 @@ import { Icon, FormattedMessage as T } from '@/components';
 
 export function DashboardTopbarSubscriptionMessage() {
   return (
-    <div class="dashboard__topbar-subscription-msg">
+    <div className="dashboard__topbar-subscription-msg">
       <span>
         <T id={'dashboard.subscription_msg.period_over'} />
       </span>
@@ -17,14 +17,7 @@ export function DashboardTopbarSubscriptionMessage() {
 export function DashboardHamburgerButton({ ...props }) {
   return (
     <Button minimal={true} {...props}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        role="img"
-        focusable="false"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
         <title>
           <T id={'menu'} />
         </title>
@@ -58,4 +51,4 @@ export function DashboardQuickSearchButton({ ...rest }) {
       {...rest}
     />
   );
-}
+}

packages/webapp/src/components/Dashboard/DashboardViewsTabs.tsx

@@ -28,17 +28,12 @@ export function DashboardViewsTabs({
   const [currentView, setCurrentView] = useState(initialViewSlug || 0);
 
   useEffect(() => {
-    if (
-      typeof currentViewSlug !== 'undefined' &&
-      currentViewSlug !== currentView
-    ) {
+    if (typeof currentViewSlug !== 'undefined' && currentViewSlug !== currentView) {
       setCurrentView(currentViewSlug || 0);
     }
   }, [currentView, setCurrentView, currentViewSlug]);
 
-  const throttledOnChange = useRef(
-    debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime),
-  );
+  const throttledOnChange = useRef(debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime));
 
   // Trigger `onChange` and `onThrottledChange` events.
   const triggerOnChange = (viewSlug) => {
@@ -60,7 +55,7 @@ export function DashboardViewsTabs({
   };
 
   return (
-    <div class="dashboard__views-tabs">
+    <div className="dashboard__views-tabs">
       <Tabs
         id="navbar"
         large={true}
@@ -75,10 +70,7 @@ export function DashboardViewsTabs({
           <Tab id={tab.slug} title={tab.name} />
         ))}
         <If condition={newViewTab}>
-          <Tooltip
-            content={<T id={'create_a_new_view'} />}
-            position={Position.RIGHT}
-          >
+          <Tooltip content={<T id={'create_a_new_view'} />} position={Position.RIGHT}>
             <Button
               className="button--new-view"
               icon={<Icon icon="plus" />}

packages/webapp/src/components/Dashboard/TopbarUser.tsx

@@ -1,14 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import {
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Button,
-  Popover,
-  Position,
-} from '@blueprintjs/core';
+import { Menu, MenuItem, MenuDivider, Button, Popover, Position } from '@blueprintjs/core';
 import { FormattedMessage as T } from '@/components';
 
 import { useAuthActions } from '@/hooks/state';
@@ -48,37 +41,27 @@ function DashboardTopbarUser({
             className={'menu-item--profile'}
             text={
               <div>
-                <div class="person">
+                <div className="person">
                   {user.first_name} {user.last_name}
                 </div>
-                <div class="org">
+                <div className="org">
                   <T id="organization_id" />: {user.tenant_id}
                 </div>
               </div>
             }
           />
           <MenuDivider />
-          <MenuItem
-            text={<T id={'keyboard_shortcuts'} />}
-            onClick={onKeyboardShortcut}
-          />
-          <MenuItem
-            text={<T id={'preferences'} />}
-            onClick={() => history.push('/preferences')}
-          />
+          <MenuItem text={<T id={'keyboard_shortcuts'} />} onClick={onKeyboardShortcut} />
+          <MenuItem text={<T id={'preferences'} />} onClick={() => history.push('/preferences')} />
           <MenuItem text={<T id={'logout'} />} onClick={onClickLogout} />
         </Menu>
       }
       position={Position.BOTTOM}
     >
       <Button>
-        <div className="user-text">
-          {firstLettersArgs(user.first_name, user.last_name)}
-        </div>
+        <div className="user-text">{firstLettersArgs(user.first_name, user.last_name)}</div>
       </Button>
     </Popover>
   );
 }
-export default compose(
-  withDialogActions,
-)(DashboardTopbarUser);
+export default compose(withDialogActions)(DashboardTopbarUser);

packages/webapp/src/components/Datatable/Cells.tsx

@@ -2,5 +2,5 @@
 import React from 'react';
 
 export function CellTextSpan({ cell: { value } }) {
-  return (<span class="cell-text">{ value }</span>)
+  return <span className="cell-text">{value}</span>;
 }