From 2f02e4d3e050da56d362af7ebb045496ae13f533 Mon Sep 17 00:00:00 2001
From: ingawei <46611122+ingawei@users.noreply.github.com>
Date: Thu, 14 Jul 2022 17:43:06 -0700
Subject: [PATCH] minor tweaks of manalink form (#647)

* minor tweaks of manalink form, adding M$ in front of amount and changing expire time to dropdown instead of calendar selection
* made minimum for uses and amount 1, it seems otherwise it does not generate a link at all
---
 .../manalinks/create-links-button.tsx         | 87 ++++++++++++-------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/web/components/manalinks/create-links-button.tsx b/web/components/manalinks/create-links-button.tsx
index d74980cf..12ab8c87 100644
--- a/web/components/manalinks/create-links-button.tsx
+++ b/web/components/manalinks/create-links-button.tsx
@@ -63,15 +63,39 @@ function CreateManalinkForm(props: {
   const [finishedCreating, setFinishedCreating] = useState(false)
   const [copyPressed, setCopyPressed] = useState(false)
   setTimeout(() => setCopyPressed(false), 300)
+  const defaultExpire = 'week'
+  const [expiresIn, setExpiresIn] = useState(defaultExpire)
 
   const [newManalink, setNewManalink] = useState<ManalinkInfo>({
-    expiresTime: null,
+    expiresTime: dayjs().add(1, defaultExpire).valueOf(),
     amount: 100,
     maxUses: 1,
     uses: 0,
     message: '',
   })
 
+  const EXPIRE_OPTIONS = {
+    day: '1 Day',
+    week: '1 Week',
+    month: '1 Month',
+    never: 'Never',
+  }
+
+  const expireOptions = Object.entries(EXPIRE_OPTIONS).map(([key, value]) => {
+    return <option value={key}>{value}</option>
+  })
+
+  function setExpireTime(timeDelta: string) {
+    const expiresTime =
+      timeDelta === 'never' ? null : dayjs().add(1, timeDelta).valueOf()
+    setNewManalink((m) => {
+      return {
+        ...m,
+        expiresTime,
+      }
+    })
+  }
+
   return (
     <>
       {!finishedCreating && (
@@ -87,23 +111,30 @@ function CreateManalinkForm(props: {
           <div className="flex flex-col flex-wrap gap-x-5 gap-y-2">
             <div className="form-control flex-auto">
               <label className="label">Amount</label>
-              <input
-                className="input input-bordered"
-                type="number"
-                value={newManalink.amount}
-                onChange={(e) =>
-                  setNewManalink((m) => {
-                    return { ...m, amount: parseInt(e.target.value) }
-                  })
-                }
-              ></input>
+              <div className="relative">
+                <span className="absolute mx-3 mt-3.5 text-sm text-gray-400">
+                  M$
+                </span>
+                <input
+                  className="input input-bordered w-full pl-10"
+                  type="number"
+                  min="1"
+                  value={newManalink.amount}
+                  onChange={(e) =>
+                    setNewManalink((m) => {
+                      return { ...m, amount: parseInt(e.target.value) }
+                    })
+                  }
+                />
+              </div>
             </div>
             <div className="flex flex-col gap-2 md:flex-row">
-              <div className="form-control">
+              <div className="form-control w-full md:w-1/2">
                 <label className="label">Uses</label>
                 <input
-                  className="input input-bordered w-full"
+                  className="input input-bordered"
                   type="number"
+                  min="1"
                   value={newManalink.maxUses ?? ''}
                   onChange={(e) =>
                     setNewManalink((m) => {
@@ -112,29 +143,19 @@ function CreateManalinkForm(props: {
                   }
                 ></input>
               </div>
-              <div className="form-control">
+              <div className="form-control w-full md:w-1/2">
                 <label className="label">Expires in</label>
-                <input
-                  value={
-                    newManalink.expiresTime != null
-                      ? dayjs(newManalink.expiresTime).format(
-                          'YYYY-MM-DDTHH:mm'
-                        )
-                      : ''
-                  }
-                  className="input input-bordered"
-                  type="datetime-local"
+                <select
+                  className="!select !select-bordered"
+                  value={expiresIn}
+                  defaultValue={defaultExpire}
                   onChange={(e) => {
-                    setNewManalink((m) => {
-                      return {
-                        ...m,
-                        expiresTime: e.target.value
-                          ? dayjs(e.target.value, 'YYYY-MM-DDTHH:mm').valueOf()
-                          : null,
-                      }
-                    })
+                    setExpiresIn(e.target.value)
+                    setExpireTime(e.target.value)
                   }}
-                ></input>
+                >
+                  {expireOptions}
+                </select>
               </div>
             </div>
             <div className="form-control w-full">