Pretty numbers (#99)

* Create pn helper function inside utils folder

The function pn() is being defined a few times in different components. This commit is the first of two commits to solve this issue.

This commit only creates the function inside the utils folder.

Jest is also being introduced for unit tests.

* Use pn from utils folder

This commit removes the multiple definitions of pn found across the project and imports the helper function whenever needed.

frontend/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "dev": "webpack --mode development --watch",
+    "test": "jest",
     "build": "webpack --mode production"
   },
   "keywords": [],
@@ -15,6 +16,7 @@
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.3",
+    "jest": "^27.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "webpack": "^5.65.0",

frontend/src/components/BottomBar.js

@@ -30,17 +30,7 @@ import AmbossIcon from "./icons/AmbossIcon";
 import FavoriteIcon from '@mui/icons-material/Favorite';
 
 import { getCookie } from "../utils/cookies";
-
-// pretty numbers
-function pn(x) {
-    if(x == null){
-        return 'null'
-    }else{
-        var parts = x.toString().split(".");
-        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-        return parts.join(".");
-    }
-}
+import { pn } from "../utils/prettyNumbers";
 
 class BottomBar extends Component {
     constructor(props) {

frontend/src/components/MakerPage.js

@@ -15,16 +15,7 @@ import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 import currencyDict from '../../static/assets/currencies.json';
 
 import { getCookie } from "../utils/cookies";
-
-// pretty numbers
-function pn(x) {
-    if(x==null){
-        return(null)
-    }
-    var parts = x.toString().split(".");
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    return parts.join(".");
-  }
+import { pn } from "../utils/prettyNumbers";
 
 class MakerPage extends Component {
   defaultCurrency = 1;

frontend/src/components/OrderPage.js

@@ -18,13 +18,7 @@ import ArticleIcon from '@mui/icons-material/Article';
 import { t } from "i18next";
 
 import { getCookie } from "../utils/cookies";
-
-// pretty numbers
-function pn(x) {
-  var parts = x.toString().split(".");
-  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  return parts.join(".");
-}
+import { pn } from "../utils/prettyNumbers";
 
 class OrderPage extends Component {
   constructor(props) {

frontend/src/components/TradeBox.js

@@ -18,13 +18,7 @@ import BalanceIcon from '@mui/icons-material/Balance';
 import ContentCopy from "@mui/icons-material/ContentCopy";
 
 import { getCookie } from "../utils/cookies";
-
-// pretty numbers
-function pn(x) {
-  var parts = x.toString().split(".");
-  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  return parts.join(".");
-}
+import { pn } from "../utils/prettyNumbers";
 
 class TradeBox extends Component {
   invoice_escrow_duration = 3;

frontend/src/utils/prettyNumbers.js

@@ -0,0 +1,11 @@
+export const pn = (value) => {
+  if (value == null || value == undefined) {
+    return;
+  }
+
+  let parts = value.toString().split(".");
+
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
+  return parts.join(".");
+};

frontend/src/utils/prettyNumbers.test.js

@@ -0,0 +1,26 @@
+import { pn } from "./prettyNumbers";
+
+describe("prettyNumbers", () => {
+  test("pn()", () => {
+    [
+      {input: null, output: undefined},
+      {input: undefined, output: undefined},
+      {input: 0, output: "0"},
+      {input: 1, output: "1"},
+      {input: 2, output: "2"},
+      {input: 10, output: "10"},
+      {input: 11, output: "11"},
+      {input: 11.0, output: "11"},
+      {input: 12.0, output: "12"},
+      {input: 100.50, output: "100.5"},
+      {input: 224.56, output: "224.56"},
+      {input: 1567, output: "1,567"},
+      {input: 15678, output: "15,678"},
+      {input: 2984.99, output: "2,984.99"},
+      {input: 100000.00, output: "100,000"},
+    ].forEach((it) => {
+      const response = pn(it.input);
+      expect(response).toBe(it.output);
+    });
+  });
+})

setup.md

@@ -13,17 +13,19 @@ Running the full stack is not easy, since RoboSats needs of many services. Howev
 
 1 - `cd robosats/frontend`
 
-2 - `npm run dev` (leave it running)
+2 - `npm install`
 
-3 - On another terminal `npm install -g http-server`
+3 - `npm run dev` (leave it running)
 
-4 - Then run `http-server "robosats/frontend/static/frontend/`
+4 - On another terminal `npm install -g http-server`
 
-5 - Install [Requestly](https://requestly.io/) extension in your browser, it's a lightweight proxy. We want to use it so our browser grabs our local `main.js` instead of the remote. There are many alternatives to Requestly (be aware that Requestly might not respect your privacy. Didn't research it).
+5 - Then run `http-server "robosats/frontend/static/frontend/`
 
-6 - Pick a RoboSats backend to test the new frontend: e.g. "robosats.onion.moe", or "unsafe.testnet.robosats.com". You can also use the onion services also if you are using Brave or Tor Browser (untested!)
+6 - Install [Requestly](https://requestly.io/) extension in your browser, it's a lightweight proxy. We want to use it so our browser grabs our local `main.js` instead of the remote. There are many alternatives to Requestly (be aware that Requestly might not respect your privacy. Didn't research it).
 
-7 - Open Requestly extension and add a new redirect rule. Make  "{robosats-site}/static/frontend/main.js" redirect to "127.0.0.1:8080/main.js" and save the changes.
+7 - Pick a RoboSats backend to test the new frontend: e.g. "robosats.onion.moe", or "unsafe.testnet.robosats.com". You can also use the onion services also if you are using Brave or Tor Browser (untested!)
+
+8 - Open Requestly extension and add a new redirect rule. Make  "{robosats-site}/static/frontend/main.js" redirect to "127.0.0.1:8080/main.js" and save the changes.
 
 -------------------