fix(ui): identity creation regression (#354)

Fixes #353

* first step toward robust launch flow
* Imporve naming
* Cover all transitions correctly
* Dispatch events in creation form
* Please prettiers
Co-authored-by: Alexander Simmerl <a.simmerl@gmail.com>

ui/Screen/Identity/IdentityCreationForm.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { createEventDispatcher } from "svelte";
   import validatejs from "validate.js";
 
   import { create, store } from "../../src/identity.ts";
@@ -10,9 +11,7 @@
 
   import { Button, Input, Text, Title } from "../../DesignSystem/Primitive";
 
-  export let onSuccess,
-    onCancel,
-    onError = null;
+  const dispatch = createEventDispatcher();
 
   const HANDLE_MATCH = "^[a-z0-9][a-z0-9_-]+$";
   const DISPLAY_NAME_MATCH = "^[a-z0-9 ]+$";
@@ -88,9 +87,9 @@
   $: validate(handle, displayName, avatarUrl);
 
   $: if ($store.status === remote.Status.Success) {
-    onSuccess();
+    dispatch("success");
   } else if ($store.status === remote.Status.Error) {
-    onError();
+    dispatch("error");
   }
 </script>
 
@@ -135,7 +134,7 @@
       <Button
         variant="transparent"
         style="margin-right: 16px;"
-        on:click={onCancel}>
+        on:click={() => dispatch('cancel')}>
         Cancel
       </Button>
       <Button

ui/Screen/Identity/IdentityCreationSuccess.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { push, replace } from "svelte-spa-router";
+  import { createEventDispatcher } from "svelte";
 
-  import * as path from "../../lib/path.js";
   import { store } from "../../src/identity.ts";
 
   import { Copyable, Remote } from "../../DesignSystem/Component";
@@ -14,7 +13,8 @@
     Title,
   } from "../../DesignSystem/Primitive";
 
-  export let onClose;
+  const dispatch = createEventDispatcher();
+
   let copyIcon = Icon.Copy;
 
   const afterCopy = () => {
@@ -68,12 +68,7 @@
     <Text style="margin: 20px 0; color: var(--color-foreground-level-5);">
       This is your peer-to-peer identity. Even though your radicleID is unique,
       your handle isn't. To get a unique handle, you have to
-      <span
-        class="registration-link"
-        on:click={() => {
-          replace(path.profileProjects());
-          push(path.registerUser());
-        }}>
+      <span class="registration-link" on:click={() => dispatch('register')}>
         register it.
       </span>
     </Text>
@@ -102,6 +97,6 @@
       </div>
     </Remote>
 
-    <Button on:click={onClose}>Go to profile</Button>
+    <Button on:click={() => dispatch('close')}>Go to profile</Button>
   </div>
 </div>

ui/Screen/IdentityCreation.svelte

@@ -4,27 +4,16 @@
   import * as path from "../lib/path.js";
   import { showNotification } from "../store/notification.js";
   import * as session from "../src/session.ts";
+  import { State, store } from "../src/onboard.ts";
 
   import { ModalLayout, Placeholder } from "../DesignSystem/Component";
   import { Button } from "../DesignSystem/Primitive";
 
   import IdentityCreationForm from "./Identity/IdentityCreationForm.svelte";
   import IdentityCreationSuccess from "./Identity/IdentityCreationSuccess.svelte";
 
-  const steps = {
-    WELCOME: 1,
-    FORM: 2,
-    SUCCESS: 3,
-  };
-
-  let currentStep = steps.WELCOME;
-
-  const nextStep = () => {
-    currentStep += 1;
-  };
-
   const returnToWelcomeStep = () => {
-    currentStep = steps.WELCOME;
+    $store.set(State.Welcome);
   };
 
   const onError = (error) => {
@@ -35,23 +24,29 @@
     });
   };
 
+  const complete = (redirectPath) => {
+    session.fetch();
+    store.set(State.Complete);
+    replace(redirectPath);
+  };
+
   const onClose = () => {
-    switch (currentStep) {
-      case steps.WELCOME:
+    switch ($store) {
+      case State.Welcome:
         return;
-      case steps.FORM:
+      case State.Form:
         returnToWelcomeStep();
         return;
-      case steps.SUCCESS:
-        replace(path.profileProjects());
+      case State.SuccessView:
+        complete(path.profileProjects());
         return;
     }
   };
 
-  // Refetch the session, once we created the identity.
-  $: if (currentStep === steps.SUCCESS) {
-    session.fetch();
-  }
+  const onRegister = () => {
+    replace(path.profileProjects());
+    complete(path.registerUser());
+  };
 </script>
 
 <style>
@@ -64,24 +59,24 @@
   }
 </style>
 
-<ModalLayout hideCloseButton={currentStep === steps.WELCOME} {onClose}>
-  {#if currentStep === steps.WELCOME}
+<ModalLayout hideCloseButton={$store === State.Welcome} {onClose}>
+  {#if $store === State.Welcome}
     <div class="container">
       <Placeholder
         style="flex-shrink: 0; width: 800px; height: 400px; margin-bottom: 20px;" />
       <Button
         style="flex-shrink: 0; margin-bottom: 24px;"
-        on:click={nextStep}
+        on:click={() => store.set(State.Form)}
         dataCy="get-started-button">
         Get started
       </Button>
     </div>
-  {:else if currentStep === steps.FORM}
+  {:else if $store === State.Form}
     <IdentityCreationForm
-      onSuccess={nextStep}
-      {onError}
-      onCancel={returnToWelcomeStep} />
-  {:else if currentStep === steps.SUCCESS}
-    <IdentityCreationSuccess {onClose} />
+      on:cancel={returnToWelcomeStep}
+      on:error={onError}
+      on:success={() => store.set(State.SuccessView)} />
+  {:else if $store === State.SuccessView}
+    <IdentityCreationSuccess on:close={onClose} on:register={onRegister} />
   {/if}
 </ModalLayout>

ui/src/identity.ts

@@ -2,7 +2,7 @@ import * as api from "./api";
 import * as event from "./event";
 import * as remote from "./remote";
 
-// Types.
+// TYPES
 export interface Avatar {
   background: {
     r: number;
@@ -23,10 +23,12 @@ export interface Identity {
   avatarFallback: Avatar;
 }
 
+
+// STATE
 const creationStore = remote.createStore<Identity>();
 export const store = creationStore.readable;
 
-// Events.
+// EVENTS
 enum Kind {
   Create = "CREATE",
   Fetch = "FETCH",
@@ -65,7 +67,7 @@ function update(msg: Msg): void {
   }
 }
 
-export const create = event.create<Kind, Msg>(Kind.Create, update) ;
+export const create = event.create<Kind, Msg>(Kind.Create, update);
 
 // MOCK
 export const fallback = {
@@ -77,9 +79,9 @@ export const fallback = {
   },
   avatarFallback: {
     background: {
-        r: 122,
-        g: 112,
-        b: 90,
+      r: 122,
+      g: 112,
+      b: 90,
     },
     emoji: "💡",
   },

ui/src/onboard.ts

@@ -0,0 +1,10 @@
+import { writable } from "svelte/store"
+
+export enum State {
+  Welcome = "WELCOME",
+  Form = "FORM",
+  SuccessView = "SUCCESS_VIEW",
+  Complete = "COMPLETE"
+}
+
+export const store = writable(State.Welcome)