From 7d4548d490487f9475b87f449166441561d97bd3 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 1 Jul 2024 20:11:26 -0300
Subject: filter usable addr

---
 packages/challenger-ui/src/pages/AskChallenge.tsx | 237 +++++++++++-----------
 1 file changed, 120 insertions(+), 117 deletions(-)

(limited to 'packages/challenger-ui')

diff --git a/packages/challenger-ui/src/pages/AskChallenge.tsx b/packages/challenger-ui/src/pages/AskChallenge.tsx
index f0cfb4cc3..9f4eb9ee5 100644
--- a/packages/challenger-ui/src/pages/AskChallenge.tsx
+++ b/packages/challenger-ui/src/pages/AskChallenge.tsx
@@ -111,6 +111,11 @@ export function AskChallenge({
 
   const contact = address ? { [restrictionKey]: address } : undefined;
 
+  const usableAddrs =
+    !state?.lastAddress || !state.lastAddress.length
+      ? []
+      : state.lastAddress.filter((d) => !!d.address[restrictionKey]);
+
   const onSend =
     errors || !contact || !state?.nonce
       ? undefined
@@ -194,14 +199,14 @@ export function AskChallenge({
           </Fragment>
         )}
 
-        {!state?.lastAddress || !state.lastAddress.length ? undefined : (
+        {!usableAddrs.length ? undefined : (
           <div class="mx-auto max-w-xl mt-4">
             <h3>
               <i18n.Translate>Previous address</i18n.Translate>
             </h3>
             <fieldset>
               <div class="relative -space-y-px rounded-md bg-white">
-                {state.lastAddress.map((addr, idx) => {
+                {usableAddrs.map((addr, idx) => {
                   return (
                     <label
                       data-checked={addrIndex === idx}
@@ -272,35 +277,81 @@ export function AskChallenge({
           </div>
         )}
 
-        {addrIndex !== undefined ? undefined : (
-          <form
-            method="POST"
-            class="mx-auto mt-4 max-w-xl "
-            onSubmit={(e) => {
-              e.preventDefault();
-            }}
-          >
+        <form
+          method="POST"
+          class="mx-auto mt-4 max-w-xl "
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <div class="sm:col-span-2">
+            <label
+              for="adress"
+              class="block text-sm font-semibold leading-6 text-gray-900"
+            >
+              {(function (): TranslatedString {
+                switch (config.address_type) {
+                  case "email":
+                    return i18n.str`Email`;
+                  case "phone":
+                    return i18n.str`Phone`;
+                }
+              })()}
+            </label>
+            <div class="mt-2.5">
+              <input
+                type="text"
+                name="adress"
+                id="adress"
+                ref={focus ? doAutoFocus : undefined}
+                maxLength={512}
+                autocomplete={(function (): string {
+                  switch (config.address_type) {
+                    case "email":
+                      return "email";
+                    case "phone":
+                      return "phone";
+                  }
+                })()}
+                value={address ?? ""}
+                onChange={(e) => {
+                  setEmail(e.currentTarget.value);
+                }}
+                placeholder={prevAddr}
+                readOnly={lastStatus.fix_address || addrIndex !== undefined}
+                class="block w-full read-only:bg-slate-200 rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+              <ShowInputErrorLabel
+                message={errors?.address}
+                isDirty={address !== undefined}
+              />
+            </div>
+          </div>
+
+          {lastStatus.fix_address || addrIndex !== undefined ? undefined : (
             <div class="sm:col-span-2">
               <label
-                for="adress"
+                for="repeat-address"
                 class="block text-sm font-semibold leading-6 text-gray-900"
               >
                 {(function (): TranslatedString {
                   switch (config.address_type) {
                     case "email":
-                      return i18n.str`Email`;
+                      return i18n.str`Repeat email`;
                     case "phone":
-                      return i18n.str`Phone`;
+                      return i18n.str`Repeat phone`;
                   }
                 })()}
               </label>
               <div class="mt-2.5">
                 <input
                   type="text"
-                  name="adress"
-                  id="adress"
-                  ref={focus ? doAutoFocus : undefined}
-                  maxLength={512}
+                  name="repeat-address"
+                  id="repeat-address"
+                  value={repeat ?? ""}
+                  onChange={(e) => {
+                    setRepeat(e.currentTarget.value);
+                  }}
                   autocomplete={(function (): string {
                     switch (config.address_type) {
                       case "email":
@@ -309,115 +360,67 @@ export function AskChallenge({
                         return "phone";
                     }
                   })()}
-                  value={address}
-                  onChange={(e) => {
-                    setEmail(e.currentTarget.value);
-                  }}
-                  placeholder={prevAddr}
-                  readOnly={lastStatus.fix_address}
-                  class="block w-full read-only:bg-slate-200 rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                 />
                 <ShowInputErrorLabel
-                  message={errors?.address}
-                  isDirty={address !== undefined}
+                  message={errors?.repeat}
+                  isDirty={repeat !== undefined}
                 />
               </div>
             </div>
+          )}
 
-            {lastStatus.fix_address ? undefined : (
-              <div class="sm:col-span-2">
-                <label
-                  for="repeat-address"
-                  class="block text-sm font-semibold leading-6 text-gray-900"
-                >
-                  {(function (): TranslatedString {
-                    switch (config.address_type) {
-                      case "email":
-                        return i18n.str`Repeat email`;
-                      case "phone":
-                        return i18n.str`Repeat phone`;
-                    }
-                  })()}
-                </label>
-                <div class="mt-2.5">
-                  <input
-                    type="text"
-                    name="repeat-address"
-                    id="repeat-address"
-                    value={repeat}
-                    onChange={(e) => {
-                      setRepeat(e.currentTarget.value);
-                    }}
-                    autocomplete={(function (): string {
-                      switch (config.address_type) {
-                        case "email":
-                          return "email";
-                        case "phone":
-                          return "phone";
-                      }
-                    })()}
-                    class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                  />
-                  <ShowInputErrorLabel
-                    message={errors?.repeat}
-                    isDirty={repeat !== undefined}
-                  />
-                </div>
-              </div>
-            )}
-
-            {lastStatus === undefined ? undefined : (
-              <p class="mt-2 text-sm leading-6 text-gray-400">
-                {lastStatus.changes_left < 1 ? (
-                  <i18n.Translate>
-                    You can&#39;t change the contact address anymore.
-                  </i18n.Translate>
-                ) : lastStatus.changes_left === 1 ? (
-                  <i18n.Translate>
-                    You can change the contact address one last time.
-                  </i18n.Translate>
-                ) : (
-                  <i18n.Translate>
-                    You can change the contact address {lastStatus.changes_left}{" "}
-                    more times.
-                  </i18n.Translate>
-                )}
-              </p>
-            )}
+          {lastStatus === undefined ? undefined : (
+            <p class="mt-2 text-sm leading-6 text-gray-400">
+              {lastStatus.changes_left < 1 ? (
+                <i18n.Translate>
+                  You can&#39;t change the contact address anymore.
+                </i18n.Translate>
+              ) : lastStatus.changes_left === 1 ? (
+                <i18n.Translate>
+                  You can change the contact address one last time.
+                </i18n.Translate>
+              ) : (
+                <i18n.Translate>
+                  You can change the contact address {lastStatus.changes_left}{" "}
+                  more times.
+                </i18n.Translate>
+              )}
+            </p>
+          )}
 
-            <div class="flex items-center justify-between py-2">
-              <span class="flex flex-grow flex-col">
-                <span
-                  class="text-sm text-black font-medium leading-6 "
-                  id="availability-label"
-                >
-                  <i18n.Translate>
-                    Remember this address for future challenges.
-                  </i18n.Translate>
-                </span>
+          <div class="flex items-center justify-between py-2">
+            <span class="flex flex-grow flex-col">
+              <span
+                class="text-sm text-black font-medium leading-6 "
+                id="availability-label"
+              >
+                <i18n.Translate>
+                  Remember this address for future challenges.
+                </i18n.Translate>
               </span>
-              <button
-                type="button"
-                name={`remember switch`}
+            </span>
+            <button
+              type="button"
+              name={`remember switch`}
+              data-enabled={remember}
+              class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+              role="switch"
+              aria-checked="false"
+              aria-labelledby="availability-label"
+              aria-describedby="availability-description"
+              onClick={() => {
+                setRemember(!remember);
+              }}
+            >
+              <span
+                aria-hidden="true"
                 data-enabled={remember}
-                class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
-                role="switch"
-                aria-checked="false"
-                aria-labelledby="availability-label"
-                aria-describedby="availability-description"
-                onClick={() => {
-                  setRemember(!remember);
-                }}
-              >
-                <span
-                  aria-hidden="true"
-                  data-enabled={remember}
-                  class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                ></span>
-              </button>
-            </div>
-          </form>
-        )}
+                class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+              ></span>
+            </button>
+          </div>
+        </form>
         <div class="mx-auto mt-4 max-w-xl ">
           {!prevAddr ? (
             <div class="mt-10">
-- 
cgit v1.2.3