From 2ec2161a7e1c0787b5e9ea14311f19c6b6a52d63 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Fri, 22 Oct 2021 01:31:46 -0300
Subject: some storybook exmaples

---
 .../src/pages/home/SecretSelectionScreen.tsx       | 37 +++++++++++++++++-----
 1 file changed, 29 insertions(+), 8 deletions(-)

(limited to 'packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx')

diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
index 7cb7fdf20..903f57868 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
@@ -1,17 +1,29 @@
 /* eslint-disable @typescript-eslint/camelcase */
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { RecoveryReducerProps, AnastasisClientFrame } from "./index";
+import { useAnastasisContext } from "../../context/anastasis";
+import { AnastasisClientFrame } from "./index";
 
-export function SecretSelectionScreen(props: RecoveryReducerProps): VNode {
-  const { reducer, recoveryState } = props;
+export function SecretSelectionScreen(): VNode {
   const [selectingVersion, setSelectingVersion] = useState<boolean>(false);
-  const [otherVersion, setOtherVersion] = useState<number>(
-    recoveryState.recovery_document?.version ?? 0
-  );
-  const recoveryDocument = recoveryState.recovery_document!;
   const [otherProvider, setOtherProvider] = useState<string>("");
+  const reducer = useAnastasisContext()
+
+  const currentVersion = reducer?.currentReducerState
+    && ("recovery_document" in reducer.currentReducerState)
+    && reducer.currentReducerState.recovery_document?.version;
+
+  const [otherVersion, setOtherVersion] = useState<number>(currentVersion || 0);
+
+  if (!reducer) {
+    return <div>no reducer in context</div>
+  }
+  if (!reducer.currentReducerState || reducer.currentReducerState.recovery_state === undefined) {
+    return <div>invalid state</div>
+  }
+
   function selectVersion(p: string, n: number): void {
+    if (!reducer) return;
     reducer.runTransaction(async (tx) => {
       await tx.transition("change_version", {
         version: n,
@@ -20,12 +32,21 @@ export function SecretSelectionScreen(props: RecoveryReducerProps): VNode {
       setSelectingVersion(false);
     });
   }
+
+  const recoveryDocument = reducer.currentReducerState.recovery_document
+  if (!recoveryDocument) {
+    return (
+      <AnastasisClientFrame hideNav title="Recovery: Problem">
+        <p>No recovery document found</p>
+      </AnastasisClientFrame>
+    )
+  }
   if (selectingVersion) {
     return (
       <AnastasisClientFrame hideNav title="Recovery: Select secret">
         <p>Select a different version of the secret</p>
         <select onChange={(e) => setOtherProvider((e.target as any).value)}>
-          {Object.keys(recoveryState.authentication_providers ?? {}).map(
+          {Object.keys(reducer.currentReducerState.authentication_providers ?? {}).map(
             (x, i) => (
               <option key={i} selected={x === recoveryDocument.provider_url} value={x}>
                 {x}
-- 
cgit v1.2.3