Notes addon is not using state anymore, since creating event listener…

… happens only after initial story is rendered. By using api we avoid that.

addons/ondevice-notes/src/components/Notes.tsx

@@ -1,59 +1,36 @@
-/* eslint-disable react/destructuring-assignment */
-import React, { Component } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import Markdown from 'react-native-simple-markdown';
 import { AddonStore } from '@storybook/addons';
-import Events from '@storybook/core-events';
 import { API } from '@storybook/api';
-import { StoryStore } from '@storybook/client-api';
 
 export const PARAM_KEY = `notes`;
 
-type Selection = ReturnType<StoryStore['fromId']>;
 interface NotesProps {
   channel: ReturnType<AddonStore['getChannel']>;
   api: API;
   active: boolean;
 }
-interface NotesState {
-  selection: Selection;
-}
-
-export class Notes extends Component<NotesProps, NotesState> {
-  componentDidMount() {
-    this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
-  }
 
-  componentWillUnmount() {
-    this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
+export const Notes = ({ active, api }: NotesProps) => {
+  if (!active) {
+    return null;
   }
 
-  onStorySelected = (selection: Selection) => {
-    this.setState({ selection });
-  };
-
-  render() {
-    const { active, api } = this.props;
+  const selection = api.store().getSelection();
 
-    if (!active) {
-      return null;
-    }
-
-    if (!this.state) {
-      return null;
-    }
+  if (!selection) {
+    return null;
+  }
 
-    const story = api
-      .store()
-      .getStoryAndParameters(this.state.selection.kind, this.state.selection.story);
-    const text = story.parameters[PARAM_KEY];
+  const story = api.store().fromId(selection.storyId);
+  const text = story.parameters[PARAM_KEY];
 
-    const textAfterFormatted: string = text ? text.trim() : '';
+  const textAfterFormatted: string = text ? text.trim() : '';
 
-    return (
-      <View style={{ padding: 10, flex: 1 }}>
-        <Markdown>{textAfterFormatted}</Markdown>
-      </View>
-    );
-  }
-}
+  return (
+    <View style={{ padding: 10, flex: 1 }}>
+      <Markdown>{textAfterFormatted}</Markdown>
+    </View>
+  );
+};