Changeset View
Changeset View
Standalone View
Standalone View
web/app.react.js
Show First 20 Lines • Show All 45 Lines • ▼ Show 20 Lines | |||||
import FocusHandler from './redux/focus-handler.react.js'; | import FocusHandler from './redux/focus-handler.react.js'; | ||||
import PolicyAcknowledgmentHandler from './redux/policy-acknowledgment-handler.js'; | import PolicyAcknowledgmentHandler from './redux/policy-acknowledgment-handler.js'; | ||||
import { useSelector } from './redux/redux-utils.js'; | import { useSelector } from './redux/redux-utils.js'; | ||||
import VisibilityHandler from './redux/visibility-handler.react.js'; | import VisibilityHandler from './redux/visibility-handler.react.js'; | ||||
import history from './router-history.js'; | import history from './router-history.js'; | ||||
import AccountSettings from './settings/account-settings.react.js'; | import AccountSettings from './settings/account-settings.react.js'; | ||||
import DangerZone from './settings/danger-zone.react.js'; | import DangerZone from './settings/danger-zone.react.js'; | ||||
import LeftLayoutAside from './sidebar/left-layout-aside.react.js'; | import LeftLayoutAside from './sidebar/left-layout-aside.react.js'; | ||||
import SettingsSwitcher from './sidebar/settings-switcher.react.js'; | |||||
import Splash from './splash/splash.react.js'; | import Splash from './splash/splash.react.js'; | ||||
import './typography.css'; | import './typography.css'; | ||||
import css from './style.css'; | import css from './style.css'; | ||||
import getTitle from './title/getTitle.js'; | import getTitle from './title/getTitle.js'; | ||||
import Topbar from './topbar/topbar.react.js'; | |||||
import { type NavInfo } from './types/nav-types.js'; | import { type NavInfo } from './types/nav-types.js'; | ||||
import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js'; | import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils.js'; | ||||
import { WagmiENSCacheProvider, wagmiClient } from './utils/wagmi-utils.js'; | import { WagmiENSCacheProvider, wagmiClient } from './utils/wagmi-utils.js'; | ||||
// 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'; | ||||
▲ Show 20 Lines • Show All 105 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 31 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() { | |||||
const { tab, settingsSection } = this.props.navInfo; | |||||
let mainContent; | |||||
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> | ); | ||||
<LeftLayoutAside /> | } | ||||
if (tab === 'calendar') { | |||||
mainContent = <Calendar url={this.props.location.pathname} />; | |||||
} else if (tab === 'chat') { | |||||
mainContent = <Chat />; | |||||
} else if (tab === 'apps') { | |||||
mainContent = <AppsDirectory />; | |||||
} | |||||
const mainContentClass = classnames( | |||||
css['main-content-container'], | |||||
css['main-content-container-column'], | |||||
); | |||||
return ( | |||||
<div className={mainContentClass}> | |||||
<Topbar /> | |||||
<div className={css['main-content']}>{mainContent}</div> | |||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
} | } | ||||
const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector( | const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector( | ||||
fetchEntriesActionTypes, | fetchEntriesActionTypes, | ||||
); | ); | ||||
▲ Show 20 Lines • Show All 68 Lines • Show Last 20 Lines |