stories: fix broken stories due to auth changes

Author: jamaljsr

app/src/__stories__/HistoryPage.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SwapState, SwapType } from 'types/generated/loop_pb';
 import { useStore } from 'store';
+import { Swap } from 'store/models';
 import HistoryPage from 'components/history/HistoryPage';
 import { Layout } from 'components/layout';
 
@@ -10,24 +11,28 @@ export default {
   parameters: { contained: true },
 };
 
+const updateSwapsStatus = (swaps: Swap[]) => {
+  swaps.forEach((s, i) => {
+    if (s.typeName === 'Unknown') s.type = SwapType.LOOP_IN;
+    if (i === 0) s.state = SwapState.INITIATED;
+    if (i === 1) s.state = SwapState.PREIMAGE_REVEALED;
+    if (i === 2) s.state = SwapState.HTLC_PUBLISHED;
+    if (i === 3) s.state = SwapState.INVOICE_SETTLED;
+  });
+};
+
 export const Default = () => {
   const store = useStore();
   store.swapStore.stopAutoPolling();
-  store.swapStore.sortedSwaps.forEach((s, i) => {
-    if (s.typeName === 'Unknown') s.type = SwapType.LOOP_IN;
-    if (i === 0) s.state = SwapState.INVOICE_SETTLED;
-  });
+  updateSwapsStatus(store.swapStore.sortedSwaps);
   return <HistoryPage />;
 };
 
 export const InsideLayout = () => {
   const store = useStore();
   store.uiStore.page = 'history';
   store.swapStore.stopAutoPolling();
-  store.swapStore.sortedSwaps.forEach((s, i) => {
-    if (s.typeName === 'Unknown') s.type = SwapType.LOOP_IN;
-    if (i === 0) s.state = SwapState.INVOICE_SETTLED;
-  });
+  updateSwapsStatus(store.swapStore.sortedSwaps);
   return (
     <Layout>
       <HistoryPage />

app/src/__stories__/Layout.stories.tsx

@@ -8,17 +8,27 @@ export default {
   component: Layout,
 };
 
-export const Default = () => <Layout />;
+export const Default = () => {
+  const { uiStore } = useStore();
+  uiStore.goToLoop();
 
-export const WithContent = () => (
-  <Layout>
-    <LoopPage />
-  </Layout>
-);
+  return <Layout />;
+};
+
+export const WithContent = () => {
+  const { uiStore } = useStore();
+  uiStore.goToLoop();
+  return (
+    <Layout>
+      <LoopPage />
+    </Layout>
+  );
+};
 
 export const Collapsed = () => {
-  const store = useStore();
-  store.settingsStore.sidebarVisible = false;
+  const { uiStore, settingsStore } = useStore();
+  uiStore.goToLoop();
+  settingsStore.sidebarVisible = false;
 
   return (
     <Layout>

app/src/__stories__/LoopPage.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useStore } from 'store';
 import { Layout } from 'components/layout';
 import LoopPage from 'components/loop/LoopPage';
@@ -11,23 +11,20 @@ export default {
 
 export const Default = () => {
   const store = useStore();
-  useEffect(() => {
-    // only use a small set of channels
-    store.channelStore.sortedChannels.splice(10);
-
-    // change back to sample data when the component is unmounted
-    return () => {
-      store.channelStore.fetchChannels();
-    };
-  }, []);
+  // only use a small set of channels
+  store.channelStore.sortedChannels.splice(10);
 
   return <LoopPage />;
 };
 
 export const ManyChannels = () => <LoopPage />;
 
-export const InsideLayout = () => (
-  <Layout>
-    <LoopPage />
-  </Layout>
-);
+export const InsideLayout = () => {
+  const store = useStore();
+  store.uiStore.goToLoop();
+  return (
+    <Layout>
+      <LoopPage />
+    </Layout>
+  );
+};

app/src/__stories__/SettingsPage.stories.tsx

@@ -26,6 +26,8 @@ export const BalanceMode = () => {
 };
 
 export const InsideLayout = () => {
+  const { uiStore } = useStore();
+  uiStore.goToSettings();
   return (
     <Layout>
       <SettingsPage />