add link between activity log and explorer

app/javascript/mastodon/actions/activitypub_explorer.js

@@ -0,0 +1,6 @@
+export const ACTIVITYPUB_EXPLORER_DATA ='ACTIVITYPUB_EXPLORER_DATA';
+
+export const setExplorerData = (value) => ({
+  type: ACTIVITYPUB_EXPLORER_DATA,
+  value,
+});

app/javascript/mastodon/features/activity_log/index.js

@@ -6,6 +6,7 @@ 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 } from 'mastodon/actions/activitypub_explorer';
 import DismissableBanner from 'mastodon/components/dismissable_banner';
 
 import { ActivityPubVisualization } from 'activitypub-visualization';
@@ -19,7 +20,12 @@ const mapStateToProps = (state) => {
 export default @connect(mapStateToProps)
 class ActivityLog extends ImmutablePureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
+    dispatch: PropTypes.func.isRequired,
     multiColumn: PropTypes.bool,
   };
 
@@ -33,7 +39,7 @@ class ActivityLog extends ImmutablePureComponent {
 
   render() {
 
-    const { logs, multiColumn } = this.props;
+    const { dispatch, logs, multiColumn } = this.props;
 
     const darkMode = !(document.body && document.body.classList.contains('theme-mastodon-light'));
 
@@ -71,7 +77,10 @@ class ActivityLog extends ImmutablePureComponent {
 
         <HotKeys handlers={handlers}>
           <div className={`${darkMode ? 'dark' : ''}`}>
-            <ActivityPubVisualization logs={logs} />
+            <ActivityPubVisualization logs={logs} showExplorerLink onExplorerLinkClick={(data) => {
+              dispatch(setExplorerData(data));
+              this.context.router.history.push('/activitypub_explorer');
+            }} />
           </div>
         </HotKeys>
 

app/javascript/mastodon/features/activitypub_explorer/index.js

@@ -5,15 +5,15 @@ 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 DismissableBanner from 'mastodon/components/dismissable_banner';
+import { setExplorerData } from 'mastodon/actions/activitypub_explorer';
 
 import { ActivityPubExplorer as Explorer } from 'activitypub-visualization';
 
 
 const mapStateToProps = (state) => {
   return {
-    logs: state.getIn(['activity_log', 'logs']),
+    data: state.getIn(['activitypub_explorer', 'data']),
   };
 };
 
@@ -21,10 +21,10 @@ export default @connect(mapStateToProps)
 class ActivityPubExplorer extends ImmutablePureComponent {
 
   static propTypes = {
+    dispatch: PropTypes.func.isRequired,
     multiColumn: PropTypes.bool,
   };
 
-
   handleHeaderClick = () => {
     this.column.scrollTop();
   }
@@ -33,9 +33,14 @@ class ActivityPubExplorer extends ImmutablePureComponent {
     this.column = c;
   }
 
+  componentWillMount () {
+    // clear explorer data on unbound so that we start with a clean slate on next navigation
+    this.props.dispatch(setExplorerData(null));
+  }
+
   render() {
 
-    const { logs, multiColumn } = this.props;
+    const { data, multiColumn } = this.props;
 
     const darkMode = !(document.body && document.body.classList.contains('theme-mastodon-light'));
 
@@ -60,7 +65,9 @@ class ActivityPubExplorer extends ImmutablePureComponent {
           </p>
         </DismissableBanner>
 
-        <div>Hello world</div>
+        <div className={`${darkMode ? 'dark' : ''}`}>
+          <Explorer initialValue={data} />
+        </div>
       </Column>
     );
   }

app/javascript/mastodon/reducers/activitypub_explorer.js

@@ -0,0 +1,15 @@
+import { Map as ImmutableMap } from 'immutable';
+import { ACTIVITYPUB_EXPLORER_DATA } from '../actions/activitypub_explorer';
+
+const initialState = ImmutableMap({
+  data: null,
+});
+
+export default function activitypub_explorer(state = initialState, action) {
+  switch (action.type) {
+  case ACTIVITYPUB_EXPLORER_DATA:
+    return state.set('data', action.value);
+  default:
+    return state;
+  }
+}

app/javascript/mastodon/reducers/index.js

@@ -10,6 +10,7 @@ import domain_lists from './domain_lists';
 import accounts from './accounts';
 import accounts_counters from './accounts_counters';
 import activity_log from './activity_log';
+import activitypub_explorer from './activitypub_explorer';
 import statuses from './statuses';
 import relationships from './relationships';
 import settings from './settings';
@@ -46,6 +47,7 @@ import followed_tags from './followed_tags';
 const reducers = {
   announcements,
   activity_log,
+  activitypub_explorer,
   dropdown_menu,
   timelines,
   meta,