Commit 505d85ba authored by Florent Chehab's avatar Florent Chehab

Updated markdown component to support money tags and conversion info

Solves #35
parent 379d090e
......@@ -49,6 +49,11 @@ Les objectifs de ce service sont :
| Ancien départs | ✔ |
| Départs possibles | ✔ |
| Informatio sur les universités | ✔ |
## Autre fun feature
You can format money: \`:100CHF:\` => :100CHF:
`;
......
......@@ -2,8 +2,13 @@
/* eslint-disable react/display-name */
// Inspired by : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/page-layout-examples/blog/Markdown.js
import React from "react";
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import ReactMarkdown from "react-markdown";
import parseMoney from "../../utils/parseMoney";
import convertAmountToEur from "../../utils/convertAmountToEur";
import withStyles from "@material-ui/core/styles/withStyles";
import Typography from "@material-ui/core/Typography";
......@@ -175,15 +180,71 @@ const renderers = {
tableBody: props => (<TableBody>{props.children}</TableBody>),
tableRow: props => (<TableRow hover={true}>{props.children}</TableRow>),
tableCell: props => (<TableCell>{props.children}</TableCell>),
thematicBreak: () => (<Divider />)
thematicBreak: () => (<Divider />),
};
export default function Markdown(props) {
return <ReactMarkdown
renderers={renderers}
allowedTypes={[...Object.keys(renderers), "text", "root", "strong"]} // Only allow custom nodes and basic ones
mode={"escape"}
{...props}
/>;
/**
* Custom Markdown component renderer to make use of material UI
*
* We don't make use of Custom Component for API since currencies should be loaded at app startup.
* We don't need to fetch them here
*
* @class Markdown
* @extends {Component}
*/
class Markdown extends Component {
/**
* Function to "compile" the markdown source
* It adds the money conversion information if the custom tag is present.
*
* @param {string} source
* @returns {string}
* @memberof Markdown
*/
compileSource(source) {
let compiled = "";
parseMoney(source).forEach(el => {
if (!el.isMoney) {
compiled += el.text;
} else {
const { amount, currency } = el,
{ currencies } = this.props;
if (currency === "EUR") {
compiled += `${amount}€`;
} else {
const converted = convertAmountToEur(amount, currency, currencies);
compiled += `${amount}${currency} [*(≈ ${converted}€)*](https://www.xe.com/currencyconverter/convert/?Amount=${amount}&From=${currency}&To=EUR)`; // add money converted information in markdown format
}
}
});
return compiled;
}
render() {
const compiledSource = this.compileSource(this.props.source);
return <ReactMarkdown
renderers={renderers}
allowedTypes={[...Object.keys(renderers), "text", "emphasis", "root", "strong"]} // Only allow custom nodes and basic ones
mode={"escape"}
source={compiledSource}
/>;
}
}
Markdown.propTypes = {
currencies: PropTypes.array.isRequired,
source: PropTypes.string
};
const mapStateToPropsTextRenderer = (state) => ({
currencies: state.api.currenciesAll.readSucceeded.data,
});
export default connect(mapStateToPropsTextRenderer)(Markdown);
......@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles";
import Markdown from "../../shared/Markdown";
import moneyConversion from "../../../utils/convertAmountToEur";
import Typography from "@material-ui/core/Typography";
const styles = theme => {
......@@ -63,9 +64,8 @@ class Scholarship extends React.Component {
}
convertAmountToEur(amount) {
const { currencies, currency } = this.props;
const rate = currencies.find(c => c.id == currency).one_EUR_in_this_currency;
return Math.trunc(amount / rate);
const { currency, currencies } = this.props;
return moneyConversion(amount, currency, currencies);
}
getAmounts() {
......
/**
* Function for converting money amounts to euros.
*
* @export
* @param {number} amount
* @param {string} currency
* @param {Array[string]} currencies
* @returns {number}
*/
export default function convertAmountToEur(amount, currency, currencies) {
if (currency === "EUR") {
return amount;
}
const rate = currencies.find(c => c.id == currency).one_EUR_in_this_currency;
return Math.trunc(amount / rate);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment