Skip to content

Commit

Permalink
fix(repo): use className instead of class for react
Browse files Browse the repository at this point in the history
  • Loading branch information
benpsnyder committed May 10, 2024
1 parent eb7dc6a commit b9a68c2
Show file tree
Hide file tree
Showing 128 changed files with 688 additions and 1,937 deletions.
1 change: 1 addition & 0 deletions packages/webapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
);
}
6 changes: 3 additions & 3 deletions packages/webapp/src/components/Dashboard/DashboardFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 2 additions & 6 deletions packages/webapp/src/components/Dashboard/DashboardPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -121,7 +99,7 @@ function DashboardTopbar({
</NavbarGroup>
</Navbar>

<div class="dashboard__topbar-user">
<div className="dashboard__topbar-user">
<DashboardTopbarUser />
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -58,4 +51,4 @@ export function DashboardQuickSearchButton({ ...rest }) {
{...rest}
/>
);
}
}
16 changes: 4 additions & 12 deletions packages/webapp/src/components/Dashboard/DashboardViewsTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -60,7 +55,7 @@ export function DashboardViewsTabs({
};

return (
<div class="dashboard__views-tabs">
<div className="dashboard__views-tabs">
<Tabs
id="navbar"
large={true}
Expand All @@ -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" />}
Expand Down
31 changes: 7 additions & 24 deletions packages/webapp/src/components/Dashboard/TopbarUser.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
2 changes: 1 addition & 1 deletion packages/webapp/src/components/Datatable/Cells.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}
Loading

0 comments on commit b9a68c2

Please sign in to comment.