Merge pull request #51 from Robert-M-Lucas/modals

add date & time textboxes to add transaction modal
Robert-M-Lucas · Apr 29, 2024 · 04f1030 · 04f1030
2 parents d6780db + 2e190fc
commit 04f1030
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/transactions/InputTransaction.tsx b/src/components/transactions/InputTransaction.tsx
@@ -14,6 +14,9 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod
     const [notes, setNotes] = useState<string>("");
     const [address, setAddress] = useState<string>("");
 
+    const [date, setDate] = useState<string>("");
+    const [time, setTime] = useState<string>("");
+
     const [error, setError] = useState<string | null>("");
     const [successMsg, setSuccessMsg] = useState<string | null>("");
 
@@ -24,12 +27,14 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod
         setSuccessMsg(null);
 
         if (!auth.currentUser) return setError("You are not signed in");
-
-        const date = new Date();
 
-        const transaction = new Transaction()
-            .setDate(formatDate(date))
-            .setTime(formatTime(date))
+        let curTime = time;
+        if (date.trim() !== "" && curTime.trim() === "") curTime = "00:00:00"
+        else if (curTime.trim() === "") curTime = formatTime(new Date())
+
+            const transaction = new Transaction()
+            .setDate(date.trim() === "" ? formatDate(new Date()) : date)
+            .setTime(curTime)
             .setName(name)
             .setEmoji(category ? emojis[category] : undefined)
             .setCategory(category)
@@ -55,6 +60,8 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod
         setDescription("");
         setNotes("");
         setAddress("");
+        setDate("");
+        setTime("");
 
         setAdded(true);
     }
@@ -71,6 +78,9 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod
                     {Object.entries(emojis).map(([category, emoji], i) => <option value={category} key={i}>{emoji} {category}</option>)}
                 </Form.Select>
 
+                <Form.Control type="name" placeholder="Enter date (DD/MM/YYYY) (optional)" value={date} onChange={(e) => setDate(e.target.value)} />
+                <Form.Control type="name" placeholder="Enter time (HH:MM:SS) (optional)" value={time} onChange={(e) => setTime(e.target.value)} />
+
                 <Form.Control as="textarea" rows={3} placeholder="Enter Description (optional)" onChange={(e) => setDescription(e.target.value)} />
                 <Form.Control as="textarea" rows={3} placeholder="Enter Notes (optional)" onChange={(e) => setNotes(e.target.value)} />
                 <Form.Control as="textarea" rows={3} placeholder="Enter Address (optional)"onChange={(e) => setAddress(e.target.value)} />

diff --git a/src/components/transactions/Transaction.ts b/src/components/transactions/Transaction.ts
@@ -58,12 +58,12 @@ export class Transaction {
 
     setDate(date?: string) {
         const [day, month, year] = (date || "").split("/").map((n) => Number(n));
-
-        if (isNaN(day) || isNaN(month) || isNaN(year) || day < 1 || day > 31 || month < 1 || month > 12) {
+
+        this.date = `${year}-${month}-${day}`;
+
+        if (isNaN(Date.parse(this.date)) || isNaN(day) || isNaN(month) || isNaN(year) || day < 1 || day > 31 || month < 1 || month > 12) {
             this.isValid = false;
             this.invalidField = "date";
-        } else {
-            this.date = `${year}-${month}-${day}`;
         }
 
         return this;