From a62deeef5d0cbe5fa98be390eac0e03bcae0f0b5 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 10 Nov 2021 10:20:52 -0300
Subject: prettier

---
 .../src/components/menu/SideBar.tsx                | 302 ++++++++++++++-------
 1 file changed, 211 insertions(+), 91 deletions(-)

(limited to 'packages/anastasis-webui/src/components/menu/SideBar.tsx')

diff --git a/packages/anastasis-webui/src/components/menu/SideBar.tsx b/packages/anastasis-webui/src/components/menu/SideBar.tsx
index a40f4be09..c73369dd6 100644
--- a/packages/anastasis-webui/src/components/menu/SideBar.tsx
+++ b/packages/anastasis-webui/src/components/menu/SideBar.tsx
@@ -15,16 +15,15 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { Fragment, h, VNode } from 'preact';
-import { BackupStates, RecoveryStates } from '../../../../anastasis-core/lib';
-import { useAnastasisContext } from '../../context/anastasis';
-import { Translate } from '../../i18n';
-import { LangSelector } from './LangSelector';
+import { Fragment, h, VNode } from "preact";
+import { BackupStates, RecoveryStates } from "../../../../anastasis-core/lib";
+import { useAnastasisContext } from "../../context/anastasis";
+import { Translate } from "../../i18n";
+import { LangSelector } from "./LangSelector";
 
 interface Props {
   mobile?: boolean;
@@ -32,10 +31,10 @@ interface Props {
 
 export function Sidebar({ mobile }: Props): VNode {
   // const config = useConfigContext();
-  const config = { version: 'none' }
+  const config = { version: "none" };
   // FIXME: add replacement for __VERSION__ with the current version
-  const process = { env: { __VERSION__: '0.0.0' } }
-  const reducer = useAnastasisContext()!
+  const process = { env: { __VERSION__: "0.0.0" } };
+  const reducer = useAnastasisContext()!;
 
   return (
     <aside class="aside is-placed-left is-expanded">
@@ -44,114 +43,235 @@ export function Sidebar({ mobile }: Props): VNode {
       </div>} */}
       <div class="aside-tools">
         <div class="aside-tools-label">
-          <div><b>Anastasis</b></div>
-          <div class="is-size-7 has-text-right" style={{ lineHeight: 0, marginTop: -10 }}>
+          <div>
+            <b>Anastasis</b>
+          </div>
+          <div
+            class="is-size-7 has-text-right"
+            style={{ lineHeight: 0, marginTop: -10 }}
+          >
             Version {process.env.__VERSION__} ({config.version})
           </div>
         </div>
       </div>
       <div class="menu is-menu-main">
-        {!reducer.currentReducerState &&
+        {!reducer.currentReducerState && (
           <p class="menu-label">
             <Translate>Backup or Recorver</Translate>
           </p>
-        }
+        )}
         <ul class="menu-list">
-          {!reducer.currentReducerState &&
+          {!reducer.currentReducerState && (
             <li>
               <div class="ml-4">
-                <span class="menu-item-label"><Translate>Select one option</Translate></span>
-              </div>
-            </li>
-          }
-          {reducer.currentReducerState && reducer.currentReducerState.backup_state ? <Fragment>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.ContinentSelecting ||
-              reducer.currentReducerState.backup_state === BackupStates.CountrySelecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Location</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.UserAttributesCollecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Personal information</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.AuthenticationsEditing ? 'is-active' : ''}>
-              <div class="ml-4">
-
-                <span class="menu-item-label"><Translate>Authorization methods</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesReviewing ? 'is-active' : ''}>
-              <div class="ml-4">
-
-                <span class="menu-item-label"><Translate>Policies</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.backup_state === BackupStates.SecretEditing ? 'is-active' : ''}>
-              <div class="ml-4">
-
-                <span class="menu-item-label"><Translate>Secret input</Translate></span>
+                <span class="menu-item-label">
+                  <Translate>Select one option</Translate>
+                </span>
               </div>
             </li>
-            {/* <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesPaying ? 'is-active' : ''}>
+          )}
+          {reducer.currentReducerState &&
+          reducer.currentReducerState.backup_state ? (
+            <Fragment>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                    BackupStates.ContinentSelecting ||
+                  reducer.currentReducerState.backup_state ===
+                    BackupStates.CountrySelecting
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Location</Translate>
+                  </span>
+                </div>
+              </li>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.UserAttributesCollecting
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Personal information</Translate>
+                  </span>
+                </div>
+              </li>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.AuthenticationsEditing
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Authorization methods</Translate>
+                  </span>
+                </div>
+              </li>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.PoliciesReviewing
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Policies</Translate>
+                  </span>
+                </div>
+              </li>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.SecretEditing
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Secret input</Translate>
+                  </span>
+                </div>
+              </li>
+              {/* <li class={reducer.currentReducerState.backup_state === BackupStates.PoliciesPaying ? 'is-active' : ''}>
               <div class="ml-4">
 
                 <span class="menu-item-label"><Translate>Payment (optional)</Translate></span>
               </div>
             </li> */}
-            <li class={reducer.currentReducerState.backup_state === BackupStates.BackupFinished ? 'is-active' : ''}>
-              <div class="ml-4">
-
-                <span class="menu-item-label"><Translate>Backup completed</Translate></span>
-              </div>
-            </li>
-            {/* <li class={reducer.currentReducerState.backup_state === BackupStates.TruthsPaying ? 'is-active' : ''}>
+              <li
+                class={
+                  reducer.currentReducerState.backup_state ===
+                  BackupStates.BackupFinished
+                    ? "is-active"
+                    : ""
+                }
+              >
+                <div class="ml-4">
+                  <span class="menu-item-label">
+                    <Translate>Backup completed</Translate>
+                  </span>
+                </div>
+              </li>
+              {/* <li class={reducer.currentReducerState.backup_state === BackupStates.TruthsPaying ? 'is-active' : ''}>
               <div class="ml-4">
 
                 <span class="menu-item-label"><Translate>Truth Paying</Translate></span>
               </div>
             </li> */}
-          </Fragment> : (reducer.currentReducerState && reducer.currentReducerState?.recovery_state && <Fragment>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.ContinentSelecting ||
-              reducer.currentReducerState.recovery_state === RecoveryStates.CountrySelecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Location</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.UserAttributesCollecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Personal information</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.SecretSelecting ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Secret selection</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.ChallengeSelecting ||
-              reducer.currentReducerState.recovery_state === RecoveryStates.ChallengeSolving ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Solve Challenges</Translate></span>
-              </div>
-            </li>
-            <li class={reducer.currentReducerState.recovery_state === RecoveryStates.RecoveryFinished ? 'is-active' : ''}>
-              <div class="ml-4">
-                <span class="menu-item-label"><Translate>Secret recovered</Translate></span>
-              </div>
-            </li>
-          </Fragment>)}
-          {reducer.currentReducerState &&
+            </Fragment>
+          ) : (
+            reducer.currentReducerState &&
+            reducer.currentReducerState?.recovery_state && (
+              <Fragment>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                      RecoveryStates.ContinentSelecting ||
+                    reducer.currentReducerState.recovery_state ===
+                      RecoveryStates.CountrySelecting
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Location</Translate>
+                    </span>
+                  </div>
+                </li>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                    RecoveryStates.UserAttributesCollecting
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Personal information</Translate>
+                    </span>
+                  </div>
+                </li>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                    RecoveryStates.SecretSelecting
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Secret selection</Translate>
+                    </span>
+                  </div>
+                </li>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                      RecoveryStates.ChallengeSelecting ||
+                    reducer.currentReducerState.recovery_state ===
+                      RecoveryStates.ChallengeSolving
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Solve Challenges</Translate>
+                    </span>
+                  </div>
+                </li>
+                <li
+                  class={
+                    reducer.currentReducerState.recovery_state ===
+                    RecoveryStates.RecoveryFinished
+                      ? "is-active"
+                      : ""
+                  }
+                >
+                  <div class="ml-4">
+                    <span class="menu-item-label">
+                      <Translate>Secret recovered</Translate>
+                    </span>
+                  </div>
+                </li>
+              </Fragment>
+            )
+          )}
+          {reducer.currentReducerState && (
             <li>
               <div class="buttons ml-4">
-                <button class="button is-danger is-right" onClick={() => reducer.reset()}>Reset session</button>
+                <button
+                  class="button is-danger is-right"
+                  onClick={() => reducer.reset()}
+                >
+                  Reset session
+                </button>
               </div>
             </li>
-          }
-
+          )}
+          {/* <li>
+              <div class="buttons ml-4">
+                <button class="button is-info is-right" >Manage providers</button>
+              </div>
+            </li> */}
         </ul>
       </div>
     </aside>
   );
 }
-
-- 
cgit v1.2.3

