Differential D11325 Diff 38057 web/settings/account-settings.react.js

Changeset View

Standalone View

web/settings/account-settings.react.js

Show All 14 Lines
import BackupTestRestoreModal from './backup-test-restore-modal.react.js';		import BackupTestRestoreModal from './backup-test-restore-modal.react.js';
import PasswordChangeModal from './password-change-modal.js';		import PasswordChangeModal from './password-change-modal.js';
import BlockListModal from './relationship/block-list-modal.react.js';		import BlockListModal from './relationship/block-list-modal.react.js';
import FriendListModal from './relationship/friend-list-modal.react.js';		import FriendListModal from './relationship/friend-list-modal.react.js';
import TunnelbrokerMessagesScreen from './tunnelbroker-message-list.react.js';		import TunnelbrokerMessagesScreen from './tunnelbroker-message-list.react.js';
import TunnelbrokerTestScreen from './tunnelbroker-test.react.js';		import TunnelbrokerTestScreen from './tunnelbroker-test.react.js';
import EditUserAvatar from '../avatars/edit-user-avatar.react.js';		import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
import Button from '../components/button.react.js';		import Button from '../components/button.react.js';
		import { getDatabaseModule } from '../database/database-module-provider.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
		import { workerRequestMessageTypes } from '../types/worker-types.js';
import { useStaffCanSee } from '../utils/staff-utils.js';		import { useStaffCanSee } from '../utils/staff-utils.js';

function AccountSettings(): React.Node {		function AccountSettings(): React.Node {
const sendLogoutRequest = useLogOut();		const sendLogoutRequest = useLogOut();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const logOutUser = React.useCallback(		const logOutUser = React.useCallback(
() => dispatchActionPromise(logOutActionTypes, sendLogoutRequest()),		() => dispatchActionPromise(logOutActionTypes, sendLogoutRequest()),
[dispatchActionPromise, sendLogoutRequest],		[dispatchActionPromise, sendLogoutRequest],
▲ Show 20 Lines • Show All 45 Lines • ▼ Show 20 Lines	const openTunnelbrokerMessagesModal = React.useCallback(
[addListener, popModal, pushModal, removeListener],		[addListener, popModal, pushModal, removeListener],
);		);

const openBackupTestRestoreModal = React.useCallback(		const openBackupTestRestoreModal = React.useCallback(
() => pushModal(<BackupTestRestoreModal onClose={popModal} />),		() => pushModal(<BackupTestRestoreModal onClose={popModal} />),
[popModal, pushModal],		[popModal, pushModal],
);		);

		const downloadDatabaseFile = React.useCallback(async () => {
		const databaseModule = await getDatabaseModule();
		const response = await databaseModule.schedule({
		type: workerRequestMessageTypes.GET_DB_FILE,
		});
		if (!response) {
		return;
		}
		const { file } = response;
		const blob = new Blob([file]);
		const a = document.createElement('a');
		const url = URL.createObjectURL(blob);
		a.href = url;
		a.download = 'web.sqlite';

		document.body?.appendChild(a);
		a.click();
		document.body?.removeChild(a);
		window.URL.revokeObjectURL(url);
		}, []);

const showAppearanceModal = React.useCallback(		const showAppearanceModal = React.useCallback(
() => pushModal(<AppearanceChangeModal />),		() => pushModal(<AppearanceChangeModal />),
[pushModal],		[pushModal],
);		);

if (!currentUserInfo \|\| currentUserInfo.anonymous) {		if (!currentUserInfo \|\| currentUserInfo.anonymous) {
return null;		return null;
}		}
▲ Show 20 Lines • Show All 72 Lines • ▼ Show 20 Lines	backup = (
<p className={css.buttonText}>Insert data</p>		<p className={css.buttonText}>Insert data</p>
</Button>		</Button>
</li>		</li>
</ul>		</ul>
</div>		</div>
</div>		</div>
);		);
}		}
		let dbDownload;
		if (staffCanSee) {
		dbDownload = (
		<div className={css.preferencesContainer}>
		<h4 className={css.preferencesHeader}>Database menu</h4>
		<div className={css.content}>
		<ul>
		<li>
		<span>Database file</span>
		<Button variant="text" onClick={downloadDatabaseFile}>
		<p className={css.buttonText}>Download</p>
		</Button>
		</li>
		</ul>
		</div>
		</div>
		);
		}

return (		return (
<div className={css.container}>		<div className={css.container}>
<div className={css.contentContainer}>		<div className={css.contentContainer}>
<h4 className={css.header}>My Account</h4>		<h4 className={css.header}>My Account</h4>
<EditUserAvatar userID={currentUserInfo.id} />		<EditUserAvatar userID={currentUserInfo.id} />
<div className={css.content}>		<div className={css.content}>
<ul>		<ul>
Show All 19 Lines	<div className={css.container}>
<p className={css.buttonText}>See List</p>		<p className={css.buttonText}>See List</p>
</Button>		</Button>
</li>		</li>
</ul>		</ul>
</div>		</div>
{preferences}		{preferences}
{tunnelbroker}		{tunnelbroker}
{backup}		{backup}
		{dbDownload}
</div>		</div>
</div>		</div>
);		);
}		}

export default AccountSettings;		export default AccountSettings;