How do I get the decimal in the right place with mongoose-currency? - reactjs

Question

I have implemented mongoose-currency in my User model:
const mongoose = require("mongoose");
const { Schema } = mongoose;
require("mongoose-currency").loadType(mongoose);
const Currency = mongoose.Types.Currency;
const userSchema = new Schema({
googleId: String,
paid: { type: Currency },
});
mongoose.model("users", userSchema);
but even if I add toFixed(2) on the client side:
import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
class Header extends Component {
renderContent() {
switch (this.props.auth) {
case null:
return;
case false:
return (
<li>
<a href='/auth/google'>Login With Google</a>
</li>
);
default:
return [
<li key='1'>Paid: ${this.props.auth.paid.toFixed(2)}</li>,
<li key='2'>
<a href='/api/logout'>Logout</a>
</li>,
];
}
}
I get $1000.00 instead of $10.00, how do I get the decimal point to work without adding two more zeroes?
So I tried this approach:
const mongoose = require("mongoose");
const { Schema } = mongoose;
const userSchema = new Schema({
googleId: String,
paid: { type: Number, get: getPaid },
});
const getPaid = userSchema.path("paid").get(function (p) {
return (p / 100).toFixed(2);
});
mongoose.model("users", userSchema);
but I get the ReferenceError: Cannot access 'getPaid' before initialization

Answer 1

You should define a getter for your schema like so:
userSchema.path('paid').get(function(p) {
return (p / 100).toFixed(2);
});
ADDED:
There is no need to reference your getter like this:
paid: { type: Number, get: getPaid },
Getters work when you try to access the the path. So this is how you should do it:
const userSchema = new Schema({
googleId: String,
paid: { type: Number },
});
userSchema.path("paid").get(function (p) {
return (p / 100).toFixed(2);
});
However, there is a gotcha there: in order for the getter to trigger, you need to explicitly access the path. As such, when you search you collection, you will need to call up the path from the doc that gets returned:
userSchema.findById('5fc9c809fc360d373b3d77b8')
.then(u => {
console.log(u) // <- this will show the original "paid" path
console.log(u.paid) // <- This will give you the formatted "paid" path
})
Just FYI, to do it the way you attempted, you would need to write your code like so (which would accomplish the same thing as describe above):
const userSchema = new Schema({
googleId: String,
paid: { type: Number, get: getPaid },
});
function getPaid(p) {
return (p / 100).toFixed(2);
});

Answer 2

While the solution offered should logically work, it just did not work for me because I would get issues with reference errors regarding initialization and when I would solve that, it would still render ten dollars as $ 1000.00, so I finally came up with a solution that works for me:
import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
class Header extends Component {
parsedNumber() {
return (this.props.auth.paid / 100).toFixed(2);
}
renderContent() {
switch (this.props.auth) {
case null:
return;
case false:
return (
<li>
<a href='/auth/google'>Login With Google</a>
</li>
);
default:
return [
<li key='1'>Paid: ${this.parsedNumber()}</li>,
<li key='2'>
<a href='/api/logout'>Logout</a>
</li>,
];
}
}
After so much trial and error and colleagues such as codemonkey helping me out, I realized I had no choice but to somehow work on getting those decimal places to show up at the point that the paid property is rendering and so I came up with the above and it works. Now I get $10.00 as opposed to $1000.00.