127 lines
3.9 KiB
JavaScript
127 lines
3.9 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import PropTypes from 'prop-types';
|
|
import Column from 'mastodon/components/column';
|
|
import ColumnHeader from 'mastodon/components/column_header';
|
|
import { HotKeys } from 'react-hotkeys';
|
|
import { setExplorerData, setExplorerUrl } from 'mastodon/actions/activitypub_explorer';
|
|
import DismissableBanner from 'mastodon/components/dismissable_banner';
|
|
|
|
import { ActivityPubVisualization } from 'activitypub-visualization';
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
logs: state.getIn(['activity_log', 'logs']),
|
|
};
|
|
};
|
|
|
|
|
|
function Content({ logs, dispatch, router }) {
|
|
|
|
const darkMode = !(document.body && document.body.classList.contains('theme-mastodon-light'));
|
|
|
|
// hijack the toggleHidden shortcut to copy the logs to clipbaord
|
|
const handlers = {
|
|
toggleHidden: () => navigator.clipboard.writeText(JSON.stringify(logs, null, 2)),
|
|
};
|
|
|
|
if (logs.length > 0) {
|
|
return ( <HotKeys handlers={handlers}>
|
|
<div className={`${darkMode ? 'dark' : ''}`} style={{ height: '100%' }}>
|
|
<ActivityPubVisualization
|
|
logs={logs}
|
|
clickableLinks
|
|
onLinkClick={(url) => {
|
|
dispatch(setExplorerUrl(url));
|
|
router.history.push('/activitypub_explorer');
|
|
}}
|
|
showExplorerLink
|
|
onExplorerLinkClick={(data) => {
|
|
dispatch(setExplorerData(data));
|
|
router.history.push('/activitypub_explorer');
|
|
}}
|
|
/>
|
|
</div>
|
|
</HotKeys>);
|
|
} else {
|
|
return (<div className='empty-column-indicator'>
|
|
<FormattedMessage
|
|
id='empty_column.activity_log'
|
|
defaultMessage='The Activity Log is empty. Interact with accounts on other instances to trigger activities. You can find more information on my {blog}.'
|
|
values={{
|
|
blog: <a className='blog-link' href='https://seb.jambor.dev/posts/activitypub-academy/'>blog</a>,
|
|
}}
|
|
/>
|
|
</div>);
|
|
}
|
|
}
|
|
|
|
Content.propTypes = {
|
|
dispatch: PropTypes.func.isRequired,
|
|
logs: PropTypes.array,
|
|
router: PropTypes.object,
|
|
};
|
|
|
|
|
|
export default @connect(mapStateToProps)
|
|
class ActivityLog extends ImmutablePureComponent {
|
|
|
|
static contextTypes = {
|
|
router: PropTypes.object,
|
|
};
|
|
|
|
static propTypes = {
|
|
dispatch: PropTypes.func.isRequired,
|
|
multiColumn: PropTypes.bool,
|
|
};
|
|
|
|
handleHeaderClick = () => {
|
|
this.column.scrollTop();
|
|
};
|
|
|
|
setRef = c => {
|
|
this.column = c;
|
|
};
|
|
|
|
render() {
|
|
const { dispatch, logs, multiColumn } = this.props;
|
|
|
|
return (
|
|
<Column bindToDocument={!multiColumn} ref={this.setRef} label='Activity Log'>
|
|
<ColumnHeader
|
|
icon='comments'
|
|
title='Activity Log'
|
|
onClick={this.handleHeaderClick}
|
|
multiColumn={multiColumn}
|
|
/>
|
|
|
|
<DismissableBanner id='activity_log'>
|
|
<p>
|
|
<FormattedMessage
|
|
id='dismissable_banner.activity_log_information'
|
|
defaultMessage='When you interact with another instance (for example, follow an account on another instance), the resulting Activities will be shown here. You can find more information on my {blog}.'
|
|
values={{
|
|
blog: <a className='blog-link' href='https://seb.jambor.dev/posts/activitypub-academy/'>blog</a>,
|
|
}}
|
|
/>
|
|
</p>
|
|
<p style={{ paddingTop: '5px' }}>
|
|
<FormattedMessage
|
|
id='dismissable_banner.activity_log_clear'
|
|
defaultMessage='Note: Activities will only be logged while Mastodon is open. When you navigate elsewhere or reload the page, the log will be cleared.'
|
|
/>
|
|
</p>
|
|
</DismissableBanner>
|
|
|
|
<Content
|
|
logs={logs}
|
|
dispatch={dispatch}
|
|
router={this.context.router}
|
|
/>
|
|
</Column>
|
|
);
|
|
}
|
|
|
|
}
|