Changeset View
Changeset View
Standalone View
Standalone View
web/app.react.js
Show First 20 Lines • Show All 43 Lines • ▼ Show 20 Lines | ||||||||||||
import FocusHandler from './redux/focus-handler.react'; | import FocusHandler from './redux/focus-handler.react'; | |||||||||||
import PolicyAcknowledgmentHandler from './redux/policy-acknowledgment-handler.js'; | import PolicyAcknowledgmentHandler from './redux/policy-acknowledgment-handler.js'; | |||||||||||
import { useSelector } from './redux/redux-utils'; | import { useSelector } from './redux/redux-utils'; | |||||||||||
import VisibilityHandler from './redux/visibility-handler.react'; | import VisibilityHandler from './redux/visibility-handler.react'; | |||||||||||
import history from './router-history'; | import history from './router-history'; | |||||||||||
import AccountSettings from './settings/account-settings.react'; | import AccountSettings from './settings/account-settings.react'; | |||||||||||
import DangerZone from './settings/danger-zone.react'; | import DangerZone from './settings/danger-zone.react'; | |||||||||||
import LeftLayoutAside from './sidebar/left-layout-aside.react'; | import LeftLayoutAside from './sidebar/left-layout-aside.react'; | |||||||||||
import SettingsSwitcher from './sidebar/settings-switcher.react'; | ||||||||||||
import Splash from './splash/splash.react'; | import Splash from './splash/splash.react'; | |||||||||||
import './typography.css'; | import './typography.css'; | |||||||||||
import css from './style.css'; | import css from './style.css'; | |||||||||||
import getTitle from './title/getTitle'; | import getTitle from './title/getTitle'; | |||||||||||
import Topbar from './topbar/topbar.react'; | ||||||||||||
import { type NavInfo } from './types/nav-types'; | import { type NavInfo } from './types/nav-types'; | |||||||||||
import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils'; | import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils'; | |||||||||||
// We want Webpack's css-loader and style-loader to handle the Fontawesome CSS, | // We want Webpack's css-loader and style-loader to handle the Fontawesome CSS, | |||||||||||
// so we disable the autoAddCss logic and import the CSS file. Otherwise every | // so we disable the autoAddCss logic and import the CSS file. Otherwise every | |||||||||||
// icon flashes huge for a second before the CSS is loaded. | // icon flashes huge for a second before the CSS is loaded. | |||||||||||
import '@fortawesome/fontawesome-svg-core/styles.css'; | import '@fortawesome/fontawesome-svg-core/styles.css'; | |||||||||||
faConfig.autoAddCss = false; | faConfig.autoAddCss = false; | |||||||||||
▲ Show 20 Lines • Show All 100 Lines • ▼ Show 20 Lines | return ( | |||||||||||
</DndProvider> | </DndProvider> | |||||||||||
); | ); | |||||||||||
} | } | |||||||||||
onHeaderDoubleClick = () => electron?.doubleClickTopBar(); | onHeaderDoubleClick = () => electron?.doubleClickTopBar(); | |||||||||||
stopDoubleClickPropagation = electron ? e => e.stopPropagation() : null; | stopDoubleClickPropagation = electron ? e => e.stopPropagation() : null; | |||||||||||
renderMainContent() { | renderMainContent() { | |||||||||||
let mainContent; | const mainContent = this.getMainContentWithSwitcher(); | |||||||||||
const { tab, settingsSection } = this.props.navInfo; | ||||||||||||
if (tab === 'calendar') { | ||||||||||||
mainContent = <Calendar url={this.props.location.pathname} />; | ||||||||||||
} else if (tab === 'chat') { | ||||||||||||
mainContent = <Chat />; | ||||||||||||
} else if (tab === 'apps') { | ||||||||||||
mainContent = <AppsDirectory />; | ||||||||||||
} else if (tab === 'settings') { | ||||||||||||
if (settingsSection === 'account') { | ||||||||||||
mainContent = <AccountSettings />; | ||||||||||||
} else if (settingsSection === 'danger-zone') { | ||||||||||||
mainContent = <DangerZone />; | ||||||||||||
} | ||||||||||||
} | ||||||||||||
let navigationArrows = null; | let navigationArrows = null; | |||||||||||
if (electron) { | if (electron) { | |||||||||||
navigationArrows = <NavigationArrows />; | navigationArrows = <NavigationArrows />; | |||||||||||
} | } | |||||||||||
const headerClasses = classnames({ | const headerClasses = classnames({ | |||||||||||
[css.header]: true, | [css.header]: true, | |||||||||||
Show All 30 Lines | return ( | |||||||||||
status={this.props.entriesLoadingStatus} | status={this.props.entriesLoadingStatus} | |||||||||||
size="medium" | size="medium" | |||||||||||
loadingClassName={css['page-loading']} | loadingClassName={css['page-loading']} | |||||||||||
errorClassName={css['page-error']} | errorClassName={css['page-error']} | |||||||||||
/> | /> | |||||||||||
</div> | </div> | |||||||||||
</div> | </div> | |||||||||||
</header> | </header> | |||||||||||
<InputStateContainer> | <InputStateContainer>{mainContent}</InputStateContainer> | |||||||||||
<LeftLayoutAside /> | ||||||||||||
</div> | ||||||||||||
); | ||||||||||||
} | ||||||||||||
getMainContentWithSwitcher() { | ||||||||||||
let mainContent; | ||||||||||||
const { tab, settingsSection } = this.props.navInfo; | ||||||||||||
if (tab === 'calendar') { | ||||||||||||
mainContent = <Calendar url={this.props.location.pathname} />; | ||||||||||||
} else if (tab === 'chat') { | ||||||||||||
mainContent = <Chat />; | ||||||||||||
} else if (tab === 'apps') { | ||||||||||||
mainContent = <AppsDirectory />; | ||||||||||||
} else if (tab === 'settings') { | ||||||||||||
if (settingsSection === 'account') { | ||||||||||||
mainContent = <AccountSettings />; | ||||||||||||
} else if (settingsSection === 'danger-zone') { | ||||||||||||
mainContent = <DangerZone />; | ||||||||||||
} | ||||||||||||
return ( | ||||||||||||
<div className={css['main-content-container']}> | <div className={css['main-content-container']}> | |||||||||||
<div className={css.switcher}> | ||||||||||||
<SettingsSwitcher /> | ||||||||||||
</div> | ||||||||||||
<div className={css['main-content']}>{mainContent}</div> | <div className={css['main-content']}>{mainContent}</div> | |||||||||||
</div> | </div> | |||||||||||
</InputStateContainer> | ); | |||||||||||
tomek: We can improve the readability by extracting the `settings` part to the beginning of the… | ||||||||||||
<LeftLayoutAside /> | } | |||||||||||
const mainContentClass = classnames( | ||||||||||||
[css['main-content-container']], | ||||||||||||
[css['main-content-container-column']], | ||||||||||||
tomekUnsubmitted Not Done Inline Actions
We don't have to introduce arrays tomek: We don't have to introduce arrays | ||||||||||||
); | ||||||||||||
return ( | ||||||||||||
<div className={mainContentClass}> | ||||||||||||
<Topbar /> | ||||||||||||
<div className={css['main-content']}>{mainContent}</div> | ||||||||||||
</div> | </div> | |||||||||||
); | ); | |||||||||||
} | } | |||||||||||
bartekUnsubmitted Not Done Inline ActionsI know you just moved most of it to a separate function, but maybe it's a good place to do some refactoring? I'm not a fan of such an imperative approach (empty let, nested if-else etc.). But it's only my subjective opinion, so up to you. bartek: I know you just moved most of it to a separate function, but maybe it's a good place to do some… | ||||||||||||
inkaAuthorUnsubmitted Done Inline ActionsThis is how it's done in most places in the code base. I'm not a huge fun of this approach either, but don't see the point of refactoring just one out of thousands places like this inka: This is how it's done in most places in the code base. I'm not a huge fun of this approach… | ||||||||||||
} | } | |||||||||||
const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector( | const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector( | |||||||||||
fetchEntriesActionTypes, | fetchEntriesActionTypes, | |||||||||||
); | ); | |||||||||||
const updateCalendarQueryLoadingStatusSelector = createLoadingStatusSelector( | const updateCalendarQueryLoadingStatusSelector = createLoadingStatusSelector( | |||||||||||
updateCalendarQueryActionTypes, | updateCalendarQueryActionTypes, | |||||||||||
); | ); | |||||||||||
▲ Show 20 Lines • Show All 65 Lines • Show Last 20 Lines |
We can improve the readability by extracting the settings part to the beginning of the function and early exiting.