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/ReviewPoliciesScreen.tsx        | 42 ++++++++++++++--------
 1 file changed, 28 insertions(+), 14 deletions(-)

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

diff --git a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
index 3e20538d2..b360ccaf0 100644
--- a/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.tsx
@@ -1,35 +1,49 @@
 /* eslint-disable @typescript-eslint/camelcase */
 import { h, VNode } from "preact";
-import { BackupReducerProps, AnastasisClientFrame } from "./index";
+import { useAnastasisContext } from "../../context/anastasis";
+import { AnastasisClientFrame } from "./index";
+
+export function ReviewPoliciesScreen(): VNode {
+  const reducer = useAnastasisContext()
+  if (!reducer) {
+    return <div>no reducer in context</div>
+  }
+  if (!reducer.currentReducerState || reducer.currentReducerState.backup_state === undefined) {
+    return <div>invalid state</div>
+  }
+  const authMethods = reducer.currentReducerState.authentication_methods ?? [];
+  const policies = reducer.currentReducerState.policies ?? [];
 
-export function ReviewPoliciesScreen(props: BackupReducerProps): VNode {
-  const { reducer, backupState } = props;
-  const authMethods = backupState.authentication_methods!;
   return (
     <AnastasisClientFrame title="Backup: Review Recovery Policies">
-      {backupState.policies?.map((p, i) => {
-        const policyName = p.methods
-          .map((x, i) => authMethods[x.authentication_method].type)
-          .join(" + ");
+      {policies.map((p, policy_index) => {
+        const methods = p.methods
+          .map(x => authMethods[x.authentication_method] && ({ ...authMethods[x.authentication_method], provider: x.provider }))
+          .filter(x => !!x)
+
+        const policyName = methods.map(x => x.type).join(" + ");
+
         return (
-          <div key={i} class="policy">
+          <div key={policy_index} class="policy">
             <h3>
-              Policy #{i + 1}: {policyName}
+              Policy #{policy_index + 1}: {policyName}
             </h3>
             Required Authentications:
+            {!methods.length && <p>
+              No auth method found
+            </p>}
             <ul>
-              {p.methods.map((x, i) => {
-                const m = authMethods[x.authentication_method];
+              {methods.map((m, i) => {
                 return (
                   <li key={i}>
-                    {m.type} ({m.instructions}) at provider {x.provider}
+                    {m.type} ({m.instructions}) at provider {m.provider}
                   </li>
                 );
               })}
             </ul>
             <div>
               <button
-                onClick={() => reducer.transition("delete_policy", { policy_index: i })}
+                onClick={() => reducer.transition("delete_policy", { policy_index })}
               >
                 Delete Policy
               </button>
-- 
cgit v1.2.3