From 3c85dead6e5cd08029ea1955d69b1b4f340083d8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 28 Jul 2022 14:17:14 +0200
Subject: [PATCH] refactor: user preferences

---
 .../[project]/users/user/[user]/index.svelte  | 152 +++++++-----------
 1 file changed, 62 insertions(+), 90 deletions(-)

diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index 40c79db66..bd4aba885 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -18,11 +18,13 @@
     import { user } from './store';
     import { onMount } from 'svelte';
 
-    $: if (newKey && newValue) {
-        arePrefsDisabled = false;
-    } else if (prefs) {
+    $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
-            arePrefsDisabled = false;
+            if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
+                arePrefsDisabled = false;
+            }
+        } else {
+            arePrefsDisabled = true;
         }
     }
     let showDelete = false;
@@ -32,17 +34,17 @@
     let userName: string = null,
         userEmail: string = null,
         userPhone: string = null,
-        newPassword: string = null,
-        newPref = false,
-        newKey: string = null,
-        newValue: string = null;
-    let showVerifcationDropdown = false;
+        newPassword: string = null;
     let prefs: [string, unknown][] = null;
     let arePrefsDisabled = true;
+    let showVerifcationDropdown = false;
 
     onMount(async () => {
         await user.load($page.params.user);
         prefs = Object.entries($user.prefs);
+        if (!prefs?.length) {
+            prefs.push(['', '']);
+        }
         userName ??= $user.name;
         userEmail ??= $user.email;
         userPhone ??= $user.phone;
@@ -161,13 +163,7 @@
     async function updatePrefs() {
         try {
             let updatedPrefs = Object.fromEntries(prefs);
-            if (newKey && newValue) {
-                updatedPrefs[newKey] = newValue;
-                prefs = Object.entries(updatedPrefs);
-                newKey = null;
-                newValue = null;
-            }
-            newPref = null;
+
             await sdkForProject.users.updatePrefs($user.$id, updatedPrefs);
             $user.prefs = updatedPrefs;
             arePrefsDisabled = true;
@@ -183,30 +179,6 @@
             });
         }
     }
-
-    async function deletePref(selectedKey: string) {
-        try {
-            let updatedPrefs = Object.fromEntries(prefs);
-            updatedPrefs = Object.keys(updatedPrefs).reduce((acc, key) => {
-                if (key !== selectedKey) {
-                    acc[key] = updatedPrefs[key];
-                }
-                return acc;
-            }, {});
-            await sdkForProject.users.updatePrefs($user.$id, updatedPrefs);
-            prefs = Object.entries(updatedPrefs);
-            $user.prefs = updatedPrefs;
-            addNotification({
-                message: 'Preferences have been updated',
-                type: 'success'
-            });
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    }
 </script>
 
 {#if $user}
@@ -217,17 +189,34 @@
                 <h6 class="heading-level-7">{$user.name}</h6>
                 {#if !$user.status}
                     <Pill danger>blocked</Pill>
+                {:else if $user.email && $user.phone}
+                    <Pill success={$user.emailVerification || $user.phoneVerification}>
+                        {$user.emailVerification && $user.phoneVerification
+                            ? 'verified'
+                            : $user.emailVerification
+                            ? 'verified email'
+                            : $user.phoneVerification
+                            ? 'verified phone'
+                            : 'unverified'}
+                    </Pill>
                 {:else}
                     <Pill success={$user.emailVerification || $user.phoneVerification}>
-                        {$user.emailVerification || $user.phoneVerification
-                            ? 'verified'
+                        {$user.emailVerification
+                            ? 'verified '
+                            : $user.phoneVerification
+                            ? 'verified '
                             : 'unverified'}
                     </Pill>
                 {/if}
             </div>
             <svelte:fragment slot="aside">
                 <div>
-                    <span class="title">{$user.email}</span>
+                    {#if $user.email}
+                        <p class="title">{$user.email}</p>
+                    {/if}
+                    {#if $user.phone}
+                        <p class="title">{$user.phone}</p>
+                    {/if}
                     <p>Joined: {toLocaleDateTime($user.registration)}</p>
                 </div>
             </svelte:fragment>
@@ -237,7 +226,7 @@
                     text={$user.status}
                     secondary={!$user.status}
                     on:click={() => updateStatus()}
-                    >{$user.status ? 'Block Account' : 'Unblock Accout'}</Button>
+                    >{$user.status ? 'Block account' : 'Unblock account'}</Button>
                 {#if $user.status}
                     {#if $user.phone && $user.email}
                         <DropList
@@ -250,7 +239,7 @@
                                 secondary
                                 on:click={() =>
                                     (showVerifcationDropdown = !showVerifcationDropdown)}>
-                                {$user.emailVerification ? 'Unverify' : 'Verify'} Account
+                                {$user.emailVerification ? 'Unverify' : 'Verify'} account
                             </Button>
                             <svelte:fragment slot="list">
                                 <DropListItem icon="mail" on:click={() => updateVerificationEmail()}
@@ -263,11 +252,11 @@
                         </DropList>
                     {:else if !$user.phone}
                         <Button secondary on:click={() => updateVerificationEmail()}>
-                            {$user.emailVerification ? 'Unverify' : 'Verify'} Account
+                            {$user.emailVerification ? 'Unverify' : 'Verify'} account
                         </Button>
                     {:else if !$user.email}
                         <Button secondary on:click={() => updateVerificationPhone()}>
-                            {$user.phoneVerification ? 'Unverify' : 'Verify'} Account
+                            {$user.phoneVerification ? 'Unverify' : 'Verify'} account
                         </Button>{/if}
                 {/if}
             </svelte:fragment>
@@ -387,76 +376,59 @@
                 <form class="form u-grid u-gap-16">
                     <ul class="form-list">
                         {#if prefs}
-                            {#each prefs as [key, value]}
+                            {#each prefs as [key, value], index}
                                 <li class="form-item is-multiple">
                                     <div class="form-item-part u-stretch">
-                                        <label class="label" for={`value-${key}`}>Key</label>
+                                        <label class="label" for={`key-${index}`}>Key</label>
                                         <div class="input-text-wrapper">
                                             <input
-                                                id={`value-${key}`}
-                                                placeholder=""
+                                                id={`key-${key}`}
+                                                placeholder="Enter key"
                                                 type="text"
                                                 class="input-text"
                                                 bind:value={key} />
                                         </div>
                                     </div>
                                     <div class="form-item-part u-stretch">
-                                        <label class="label" for={`value-${value}`}>Value</label>
+                                        <label class="label" for={`value-${index}`}>Value</label>
                                         <div class="input-text-wrapper">
                                             <input
                                                 id={`value-${value}`}
-                                                placeholder=""
+                                                placeholder="Enter value"
                                                 type="text"
                                                 class="input-text"
                                                 bind:value />
                                         </div>
                                     </div>
                                     <div class="form-item-part u-cross-child-end">
-                                        <Button text on:click={() => deletePref(key)}>
+                                        <Button
+                                            text
+                                            disabled={(!key || !value) && index === 0}
+                                            on:click={() => {
+                                                if (index === 0) {
+                                                    prefs = [['', '']];
+                                                } else {
+                                                    prefs.splice(index, 1);
+                                                    prefs = prefs;
+                                                }
+                                            }}>
                                             <span class="icon-x" aria-hidden="true" />
                                         </Button>
                                     </div>
                                 </li>
                             {/each}
-                            {#if prefs.length === 0 || newPref}
-                                <li class="form-item is-multiple">
-                                    <div class="form-item-part u-stretch">
-                                        <label class="label" for="newKey">Key</label>
-                                        <div class="input-text-wrapper">
-                                            <input
-                                                id="newKey"
-                                                placeholder="Enter Key"
-                                                type="text"
-                                                class="input-text"
-                                                bind:value={newKey} />
-                                        </div>
-                                    </div>
-                                    <div class="form-item-part u-stretch">
-                                        <label class="label" for="newValue">Value</label>
-                                        <div class="input-text-wrapper">
-                                            <input
-                                                id="newValue"
-                                                placeholder="Enter Value"
-                                                type="text"
-                                                class="input-text"
-                                                bind:value={newValue} />
-                                        </div>
-                                    </div>
-                                    <div class="form-item-part u-cross-child-end">
-                                        <Button
-                                            text
-                                            disabled={!prefs.length}
-                                            on:click={() => (newPref = false)}>
-                                            <span class="icon-x" aria-hidden="true" />
-                                        </Button>
-                                    </div>
-                                </li>
-                            {/if}
                         {/if}
                     </ul>
-                    <Button text on:click={() => (newPref = true)}>
+                    <Button
+                        text
+                        on:click={() => {
+                            if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
+                                prefs.push(['', '']);
+                                prefs = prefs;
+                            }
+                        }}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Preferences </span></Button>
+                        <span class="text"> Add Preference </span></Button>
                 </form>
             </svelte:fragment>