lbry-desktop/src/ui/component/app/view.jsx

157 lines
4.7 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import * as ICONS from 'constants/icons';
2019-10-15 06:20:12 +02:00
import React, { useEffect, useRef, useState } from 'react';
2019-10-09 18:34:18 +02:00
import classnames from 'classnames';
2019-07-22 04:28:49 +02:00
import analytics from 'analytics';
2019-09-26 18:07:11 +02:00
import { buildURI, parseURI } from 'lbry-redux';
import Router from 'component/router/index';
import ModalRouter from 'modal/modalRouter';
import ReactModal from 'react-modal';
2019-01-23 16:38:40 +01:00
import { openContextMenu } from 'util/context-menu';
2019-06-11 20:10:58 +02:00
import useKonamiListener from 'util/enhanced-layout';
2019-03-05 05:46:57 +01:00
import Yrbl from 'component/yrbl';
2019-08-13 07:35:13 +02:00
import FileViewer from 'component/fileViewer';
import { withRouter } from 'react-router';
2019-09-27 20:56:15 +02:00
import usePrevious from 'effects/use-previous';
2019-09-26 18:07:11 +02:00
import Button from 'component/button';
2018-03-26 23:32:43 +02:00
2019-06-27 08:18:45 +02:00
export const MAIN_WRAPPER_CLASS = 'main-wrapper';
2019-10-09 18:34:18 +02:00
const IS_MAC = process.platform === 'darwin';
2019-06-27 08:18:45 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
alertError: (string | {}) => void,
pageTitle: ?string,
2019-06-07 23:10:47 +02:00
language: string,
2018-10-19 17:27:14 +02:00
theme: string,
user: ?{ id: string, has_verified_email: boolean, is_reward_approved: boolean },
2019-08-30 20:12:52 +02:00
location: { pathname: string, hash: string },
2019-06-11 20:10:58 +02:00
fetchRewards: () => void,
fetchRewardedContent: () => void,
2019-06-27 08:18:45 +02:00
fetchTransactions: () => void,
2019-08-06 18:53:59 +02:00
fetchAccessToken: () => void,
fetchChannelListMine: () => void,
2019-10-01 06:53:33 +02:00
signIn: () => void,
requestDownloadUpgrade: () => void,
2019-09-26 18:07:11 +02:00
fetchChannelListMine: () => void,
onSignedIn: () => void,
isUpgradeAvailable: boolean,
autoUpdateDownloaded: boolean,
2019-10-04 18:56:09 +02:00
balance: ?number,
2018-03-26 23:32:43 +02:00
};
2017-04-07 07:15:22 +02:00
2019-06-11 20:10:58 +02:00
function App(props: Props) {
const {
theme,
fetchRewards,
fetchRewardedContent,
fetchTransactions,
user,
fetchAccessToken,
2019-09-26 18:07:11 +02:00
fetchChannelListMine,
2019-10-01 06:53:33 +02:00
signIn,
autoUpdateDownloaded,
isUpgradeAvailable,
requestDownloadUpgrade,
2019-10-04 18:56:09 +02:00
balance,
} = props;
2019-06-11 20:10:58 +02:00
const appRef = useRef();
const isEnhancedLayout = useKonamiListener();
2019-10-15 06:20:12 +02:00
const [hasSignedIn, setHasSignedIn] = useState(false);
2019-07-22 04:28:49 +02:00
const userId = user && user.id;
const hasVerifiedEmail = user && user.has_verified_email;
const isRewardApproved = user && user.is_reward_approved;
const previousUserId = usePrevious(userId);
const previousHasVerifiedEmail = usePrevious(hasVerifiedEmail);
const previousRewardApproved = usePrevious(isRewardApproved);
2019-08-30 20:12:52 +02:00
const { pathname, hash } = props.location;
const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
2019-08-13 07:35:13 +02:00
let uri;
try {
2019-08-30 20:12:52 +02:00
const newpath = buildURI(parseURI(pathname.slice(1).replace(/:/g, '#')));
uri = newpath + hash;
2019-08-13 07:35:13 +02:00
} catch (e) {}
2019-06-11 20:10:58 +02:00
useEffect(() => {
ReactModal.setAppElement(appRef.current);
2019-08-06 18:53:59 +02:00
fetchAccessToken();
2019-06-11 20:10:58 +02:00
fetchRewardedContent();
2019-06-27 08:18:45 +02:00
// @if TARGET='app'
fetchRewards();
fetchTransactions();
2019-09-26 18:07:11 +02:00
fetchChannelListMine(); // This needs to be done for web too...
2019-06-27 08:18:45 +02:00
// @endif
2019-09-26 18:07:11 +02:00
}, [fetchRewards, fetchRewardedContent, fetchTransactions, fetchAccessToken, fetchChannelListMine]);
2018-10-18 18:45:24 +02:00
2019-06-11 20:10:58 +02:00
useEffect(() => {
2018-10-18 18:45:24 +02:00
// $FlowFixMe
2019-02-13 17:27:20 +01:00
document.documentElement.setAttribute('data-mode', theme);
2019-06-11 20:10:58 +02:00
}, [theme]);
2018-11-07 17:03:42 +01:00
2019-07-22 04:28:49 +02:00
useEffect(() => {
if (previousUserId === undefined && userId) {
2019-07-22 04:28:49 +02:00
analytics.setUser(userId);
}
}, [previousUserId, userId]);
useEffect(() => {
2019-08-15 05:09:34 +02:00
// Check that previousHasVerifiedEmail was not undefined instead of just not truthy
// This ensures we don't fire the emailVerified event on the initial user fetch
2019-09-26 18:07:11 +02:00
if (previousHasVerifiedEmail === false && hasVerifiedEmail) {
analytics.emailVerifiedEvent();
}
2019-10-01 06:53:33 +02:00
}, [previousHasVerifiedEmail, hasVerifiedEmail, signIn]);
useEffect(() => {
2019-09-26 18:07:11 +02:00
if (previousRewardApproved === false && isRewardApproved) {
analytics.rewardEligibleEvent();
}
}, [previousRewardApproved, isRewardApproved]);
2019-07-22 04:28:49 +02:00
2019-09-26 18:07:11 +02:00
// Keep this at the end to ensure initial setup effects are run first
useEffect(() => {
2019-10-08 20:11:52 +02:00
// Wait for balance to be populated on desktop so we know when we can begin syncing
// @syncwithbalancefixme
2019-10-15 06:20:12 +02:00
if (!hasSignedIn && hasVerifiedEmail && (IS_WEB || balance !== undefined)) {
2019-10-01 06:53:33 +02:00
signIn();
2019-10-15 06:20:12 +02:00
setHasSignedIn(true);
}
2019-10-15 06:20:12 +02:00
}, [hasVerifiedEmail, signIn, balance, hasSignedIn]);
2019-09-26 18:07:11 +02:00
if (!user) {
return null;
}
2019-06-11 20:10:58 +02:00
return (
2019-10-09 18:34:18 +02:00
<div
className={classnames(MAIN_WRAPPER_CLASS, { [`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC })}
ref={appRef}
onContextMenu={e => openContextMenu(e)}
>
2019-08-27 16:43:42 +02:00
<Router />
2019-06-11 20:10:58 +02:00
<ModalRouter />
2019-08-13 07:35:13 +02:00
<FileViewer pageUri={uri} />
{/* @if TARGET='app' */}
{showUpgradeButton && (
<div className="snack-bar--upgrade">
{__('Upgrade is ready')}
<Button
className="snack-bar__action"
button="alt"
icon={ICONS.DOWNLOAD}
label={__('Install now')}
onClick={requestDownloadUpgrade}
/>
</div>
)}
{/* @endif */}
2019-06-11 20:10:58 +02:00
{isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
</div>
);
2017-05-04 05:44:08 +02:00
}
2017-04-07 07:15:22 +02:00
2019-08-13 07:35:13 +02:00
export default withRouter(App);