break into components

BahtRxTS/src/App.tsx

@@ -2,122 +2,7 @@ import { useState } from 'react'
 import './App.css'
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-
-let SPECIALONE: string = `เอ็ด`
-let SPECIALTWO: string = `ยี่`
-let TEN: string = `สิบ`;
-let BAHT: string = `บาท`;
-let MILLION: string = `ล้าน`;
-
-let SPLITPATTERN: RegExp = /^(\d*)(\.\d{0,2}0*)?$/;
-let LAST6DIGITPATTERN: RegExp = /\d{1,6}$/g;
-
-let THAINUMBERWORDS: string[] = [`ศูนย์`,`หนึ่ง`,`สอง`,`สาม`,`สี่`,`ห้า`,`หก`,`เจ็ด`,`แปด`,`เก้า`,`สิบ`]
-let REVERSETHAIDIGITWORDS: string[] = ["แสน", "หมื่น", "พัน", "ร้อย", "สิบ", ""]
-
-function MoneyInvalid (money: string): string {
-  return `Your Input is Invalid Format!\nThis is Your Input : ${money}\nTry Again`;
-}
-function MoneyLaundering (money: string): string {
-  let removeComma: string = money.replace(/,/g, "");
-  let removeCommaAndTrailingZeros: string = removeComma.replace(/^0+/g, "");
-  return removeCommaAndTrailingZeros;
-};
-function IsMoneyValidate (money: string): boolean {
-  return SPLITPATTERN.test(money)
-}
-
-function splitIntFrac (money: string): string[] {
-  let match: RegExpMatchArray | null = money.match(SPLITPATTERN);
-  let [moneyFull, moneyInt, moneyFrac] = match!;
-  moneyFrac === undefined
-    ? (moneyFrac = "")
-    : (moneyFrac = moneyFrac.replace(/^\./, ""));
-  return [moneyFull, moneyInt, moneyFrac];
-};
-
-let padWithLeadingZeros = (num: string, totalLength: number) => {
-    // https://bobbyhadz.com/blog/javascript-add-leading-zeros-to-number
-    return String(num).padStart(totalLength, '0');
-}
-
-let hundredThousandToOne = (digits: string) => {
-  let word: string = ``;
-  let c: number = 0
-  let digitspadWithLeadingZeros: string = padWithLeadingZeros(digits,6)
-  for (let digit of digitspadWithLeadingZeros) {
-    let numDigit: number = parseInt(digit)
-    if (!(numDigit === 0)) {
-        if (c == 4 && numDigit == 2) {
-            word += `${SPECIALTWO}${TEN}`
-        } else if (c == 4 && numDigit == 1) {
-            word += TEN
-        } else if (c == 5 && numDigit == 1 && parseInt(digitspadWithLeadingZeros[4]) != 0) {
-            word += SPECIALONE
-        } else {
-            word += `${THAINUMBERWORDS[numDigit]}${REVERSETHAIDIGITWORDS[c]}`;
-        }
-    }
-    c++
-  }
-  return word;
-};
-
-let LeandingEdToOne = (money: string) => money.replace(/^เอ็ด(?=(ล้าน)+)/,`หนึ่ง`)
-
-let PrintBaht = (money: string) => {
-  if (!money) return ``
-  let newMoney: string[] = [];
-  let f6 = true
-  while (money != ``) {
-    let selectedupto6digit = money!.match(LAST6DIGITPATTERN)![0];
-    newMoney.push(
-      `${hundredThousandToOne(selectedupto6digit)}${f6 ? "" : MILLION}`
-    );
-    f6 ? f6 = !f6 : ""
-    money = money.replace(LAST6DIGITPATTERN, "");
-  }
-  let cleanLeadingEd = LeandingEdToOne(newMoney.reverse().join(""))
-  return `${cleanLeadingEd}${BAHT}`;
-};
-
-let SatangFirstDigit = (digit: string) => {
-  if (digit === "0") return ``;
-  if (digit === "1") return `${TEN}`;
-  if (digit === "2") return `${SPECIALTWO}${TEN}`;
-  return `${THAINUMBERWORDS[parseInt(digit)]}${TEN}`;
-};
-let SatangSecondDigit = (digit: string) => {
-  if (digit[1] === undefined || digit[1] === "0") return "";
-  if (digit[0] !== "0" && digit[1] === "1") return SPECIALONE;
-  return `${THAINUMBERWORDS[parseInt(digit[1])]}`;
-};
-let PrintSatangs = (satangs: string) => {
-  if (satangs.match(/^0*$/)) return "ถ้วน";
-  let satangword: string = `${SatangFirstDigit(satangs[0])}${SatangSecondDigit(
-    satangs
-  )}สตางค์`;
-  return satangword;
-};
-
-// https://www.freecodecamp.org/news/how-to-format-number-as-currency-in-javascript-one-line-of-code/
-let THB: Intl.NumberFormat = new Intl.NumberFormat('th-TH', {
-  style: 'currency',
-  currency: 'THB',
-});
-
-let BahtText = (money: string) => {
-  if (!money) return ``
-  let cleanedMoney: string = MoneyLaundering(money);
-  if (!IsMoneyValidate(cleanedMoney) || money === `.`) return MoneyInvalid(money)
-  let [moneyFull, moneyInt, moneyFrac] = splitIntFrac(cleanedMoney);
-  if (moneyFull.match(/^(0*)(\.0*)?$/)) return `${THAINUMBERWORDS[0]}${BAHT}ถ้วน`
-  // toast(`${PrintBaht(moneyInt)}${PrintSatangs(moneyFrac)}`,{
-  //   toastId: money
-  // })
-  return `${PrintBaht(moneyInt)}${PrintSatangs(moneyFrac)}`;
-  // return `${THB.format(parseFloat(moneyFull))} อ่านว่า "${PrintBaht(moneyInt)}${PrintSatangs(moneyFrac)}"`;
-}
+import BahtRext from './Functions/BahtRext';
 
 function App() {
   const [num, setNum] = useState(localStorage.getItem(`num`) || 0)
@@ -126,7 +11,7 @@ function App() {
     <div className="App">
       <h1>BahtRext</h1>
       <div className="output">
-        {BahtText(num.toString())}
+        {BahtRext(num.toString())}
       </div>
       <div className="">
         <input type="text" onChange={(e) => {
@@ -139,9 +24,9 @@ function App() {
       <div className="">
       <button onClick={(e) => {
           e.preventDefault()
-          navigator.clipboard.writeText(BahtText(num.toString()))
+          navigator.clipboard.writeText(BahtRext(num.toString()))
           toast.dismiss()
-          toast(`คัดลอก ${BahtText(num.toString())}`,{
+          toast(`คัดลอก ${BahtRext(num.toString())}`,{
             toastId: `copy`
           })
         }}>Copy</button>

BahtRxTS/src/Consts/BAHT.tsx

@@ -0,0 +1,3 @@
+const BAHT: string = `บาท`
+
+export default BAHT

BahtRxTS/src/Consts/LAST6DIGITPATTERN.tsx

@@ -0,0 +1,3 @@
+const LAST6DIGITPATTERN: RegExp = /\d{1,6}$/g;
+
+export default LAST6DIGITPATTERN

BahtRxTS/src/Consts/MILLION.tsx

@@ -0,0 +1,3 @@
+const MILLION: string = `ล้าน`
+
+export default MILLION

BahtRxTS/src/Consts/REVERSETHAIDIGITWORDS.tsx

@@ -0,0 +1,10 @@
+const REVERSETHAIDIGITWORDS: string[] = [
+  "แสน",
+  "หมื่น",
+  "พัน",
+  "ร้อย",
+  "สิบ",
+  "",
+];
+
+export default REVERSETHAIDIGITWORDS;

BahtRxTS/src/Consts/SPECIALONE.tsx

@@ -0,0 +1,3 @@
+const SPECIALONE: string = `เอ็ด`
+
+export default SPECIALONE

BahtRxTS/src/Consts/SPECIALTWO.tsx

@@ -0,0 +1,3 @@
+const SPECIALTWO: string = `ยี่`
+
+export default SPECIALTWO

BahtRxTS/src/Consts/SPLITPATTERN.tsx

@@ -0,0 +1,2 @@
+const SPLITPATTERN: RegExp = /^(\d*)(\.\d{0,2}0*)?$/;
+export default SPLITPATTERN

BahtRxTS/src/Consts/TEN.tsx

@@ -0,0 +1,3 @@
+const TEN: string = `สิบ`
+
+export default TEN

BahtRxTS/src/Consts/THAINUMBERWORDS.tsx

@@ -0,0 +1,15 @@
+const THAINUMBERWORDS: string[] = [
+  `ศูนย์`,
+  `หนึ่ง`,
+  `สอง`,
+  `สาม`,
+  `สี่`,
+  `ห้า`,
+  `หก`,
+  `เจ็ด`,
+  `แปด`,
+  `เก้า`,
+  `สิบ`,
+];
+
+export default THAINUMBERWORDS;

BahtRxTS/src/Format/THB.tsx

@@ -0,0 +1,6 @@
+let THB: Intl.NumberFormat = new Intl.NumberFormat('th-TH', {
+    style: 'currency',
+    currency: 'THB',
+});
+// https://www.freecodecamp.org/news/how-to-format-number-as-currency-in-javascript-one-line-of-code/
+export default THB

BahtRxTS/src/Functions/BahtRext.tsx

@@ -0,0 +1,23 @@
+import BAHT from "../Consts/BAHT";
+import THAINUMBERWORDS from "../Consts/THAINUMBERWORDS";
+import MoneyInvalid from "./MoneyInvalid";
+import MoneyLaundering from "./MoneyLaundering";
+import IsMoneyValidate from "./IsMoneyValidate";
+import SplitIntFrac from "./SplitIntFrac";
+import PrintBaht from "./PrintBaht";
+import PrintSatangs from "./PrintSatangs";
+function BahtRext(money: string) {
+  if (!money) return ``;
+  let cleanedMoney: string = MoneyLaundering(money);
+  if (!IsMoneyValidate(cleanedMoney) || money === `.`)
+    return MoneyInvalid(money);
+  let [moneyFull, moneyInt, moneyFrac] = SplitIntFrac(cleanedMoney);
+  if (moneyFull.match(/^(0*)(\.0*)?$/))
+    return `${THAINUMBERWORDS[0]}${BAHT}ถ้วน`;
+  // toast(`${PrintBaht(moneyInt)}${PrintSatangs(moneyFrac)}`,{
+  //   toastId: money
+  // })
+  return `${PrintBaht(moneyInt)}${PrintSatangs(moneyFrac)}`;
+  // return `${THB.format(parseFloat(moneyFull))} อ่านว่า "${PrintBaht(moneyInt)}${PrintSatangs(moneyFrac)}"`;
+}
+export default BahtRext

BahtRxTS/src/Functions/IsMoneyValidate.tsx

@@ -0,0 +1,5 @@
+import SPLITPATTERN from "../Consts/SPLITPATTERN"
+function IsMoneyValidate (money: string): boolean {
+    return SPLITPATTERN.test(money)
+}
+export default IsMoneyValidate

BahtRxTS/src/Functions/LeandingEdToOne.tsx

@@ -0,0 +1,4 @@
+function LeandingEdToOne(money: string) { 
+    return money.replace(/^เอ็ด(?=(ล้าน)+)/,`หนึ่ง`)
+}
+export default LeandingEdToOne

BahtRxTS/src/Functions/MoneyInvalid.tsx

@@ -0,0 +1,4 @@
+function MoneyInvalid (money: string): string {
+    return `Your Input is Invalid Format!\nThis is Your Input : ${money}\nTry Again`;
+}
+export default MoneyInvalid

BahtRxTS/src/Functions/MoneyLaundering.tsx

@@ -0,0 +1,6 @@
+function MoneyLaundering (money: string): string {
+    let removeComma: string = money.replace(/,/g, "");
+    let removeCommaAndTrailingZeros: string = removeComma.replace(/^0+/g, "");
+    return removeCommaAndTrailingZeros;
+};
+export default MoneyLaundering

BahtRxTS/src/Functions/PrintBaht.tsx

@@ -0,0 +1,21 @@
+import LAST6DIGITPATTERN from "../Consts/LAST6DIGITPATTERN";
+import hundredThousandToOne from "./hundredThousandToOne";
+import MILLION from "../Consts/MILLION";
+import LeandingEdToOne from "./LeandingEdToOne";
+import BAHT from "../Consts/BAHT";
+let PrintBaht = (money: string) => {
+  if (!money) return ``;
+  let newMoney: string[] = [];
+  let f6 = true;
+  while (money != ``) {
+    let selectedupto6digit = money!.match(LAST6DIGITPATTERN)![0];
+    newMoney.push(
+      `${hundredThousandToOne(selectedupto6digit)}${f6 ? "" : MILLION}`
+    );
+    f6 ? (f6 = !f6) : "";
+    money = money.replace(LAST6DIGITPATTERN, "");
+  }
+  let cleanLeadingEd = LeandingEdToOne(newMoney.reverse().join(""));
+  return `${cleanLeadingEd}${BAHT}`;
+};
+export default PrintBaht

BahtRxTS/src/Functions/PrintSatangs.tsx

@@ -0,0 +1,10 @@
+import SatangFirstDigit from "./SatangFirstDigit";
+import SatangSecondDigit from "./SatangSecondDigit";
+function PrintSatangs(satangs: string) {
+    if (satangs.match(/^0*$/)) return "ถ้วน";
+  let satangword: string = `${SatangFirstDigit(satangs[0])}${SatangSecondDigit(
+    satangs
+  )}สตางค์`;
+  return satangword;
+}
+export default PrintSatangs

BahtRxTS/src/Functions/SatangFirstDigit.tsx

@@ -0,0 +1,10 @@
+import TEN from "../Consts/TEN";
+import SPECIALTWO from "../Consts/SPECIALTWO";
+import THAINUMBERWORDS from "../Consts/THAINUMBERWORDS";
+function SatangFirstDigit(digit: string) {
+  if (digit === "0") return ``;
+  if (digit === "1") return `${TEN}`;
+  if (digit === "2") return `${SPECIALTWO}${TEN}`;
+  return `${THAINUMBERWORDS[parseInt(digit)]}${TEN}`;
+}
+export default SatangFirstDigit

BahtRxTS/src/Functions/SatangSecondDigit.tsx

@@ -0,0 +1,8 @@
+import SPECIALONE from "../Consts/SPECIALONE";
+import THAINUMBERWORDS from "../Consts/THAINUMBERWORDS";
+function SatangSecondDigit(digit: string) {
+  if (digit[1] === undefined || digit[1] === "0") return "";
+  if (digit[0] !== "0" && digit[1] === "1") return SPECIALONE;
+  return `${THAINUMBERWORDS[parseInt(digit[1])]}`;
+}
+export default SatangSecondDigit

BahtRxTS/src/Functions/SplitIntFrac.tsx

@@ -0,0 +1,10 @@
+import SPLITPATTERN from "../Consts/SPLITPATTERN";
+function SplitIntFrac(money: string): string[] {
+  let match: RegExpMatchArray | null = money.match(SPLITPATTERN);
+  let [moneyFull, moneyInt, moneyFrac] = match!;
+  moneyFrac === undefined
+    ? (moneyFrac = "")
+    : (moneyFrac = moneyFrac.replace(/^\./, ""));
+  return [moneyFull, moneyInt, moneyFrac];
+}
+export default SplitIntFrac

BahtRxTS/src/Functions/hundredThousandToOne.tsx

@@ -0,0 +1,32 @@
+import padWithLeadingZeros from "./padWithLeadingZeros";
+import SPECIALTWO from "../Consts/SPECIALTWO";
+import TEN from "../Consts/TEN";
+import SPECIALONE from "../Consts/SPECIALONE";
+import THAINUMBERWORDS from "../Consts/THAINUMBERWORDS";
+import REVERSETHAIDIGITWORDS from "../Consts/REVERSETHAIDIGITWORDS";
+function hundredThousandToOne (digits: string) {
+  let word: string = ``;
+  let c: number = 0;
+  let digitspadWithLeadingZeros: string = padWithLeadingZeros(digits, 6);
+  for (let digit of digitspadWithLeadingZeros) {
+    let numDigit: number = parseInt(digit);
+    if (!(numDigit === 0)) {
+      if (c == 4 && numDigit == 2) {
+        word += `${SPECIALTWO}${TEN}`;
+      } else if (c == 4 && numDigit == 1) {
+        word += TEN;
+      } else if (
+        c == 5 &&
+        numDigit == 1 &&
+        parseInt(digitspadWithLeadingZeros[4]) != 0
+      ) {
+        word += SPECIALONE;
+      } else {
+        word += `${THAINUMBERWORDS[numDigit]}${REVERSETHAIDIGITWORDS[c]}`;
+      }
+    }
+    c++;
+  }
+  return word;
+};
+export default hundredThousandToOne

BahtRxTS/src/Functions/padWithLeadingZeros.tsx

@@ -0,0 +1,6 @@
+// https://bobbyhadz.com/blog/javascript-add-leading-zeros-to-number
+function padWithLeadingZeros (num: string, totalLength: number) {
+    return String(num).padStart(totalLength, '0');
+}
+
+export default padWithLeadingZeros