From 523c5f1c30070185c7dda99d902437273dd01077 Mon Sep 17 00:00:00 2001
From: miguelangelrl <12910511+MiguelAngelRL@users.noreply.github.com>
Date: Tue, 14 Jul 2020 13:30:29 +0200
Subject: [PATCH] Markdown support added

---
 layouts/chart-page.layout.tsx | 46 ++++++++++++++---------------------
 package.json                  |  1 +
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/layouts/chart-page.layout.tsx b/layouts/chart-page.layout.tsx
index 517686d..43b62f0 100644
--- a/layouts/chart-page.layout.tsx
+++ b/layouts/chart-page.layout.tsx
@@ -4,6 +4,7 @@ import { makeStyles, Theme, createStyles, Typography } from "@material-ui/core";
 import { ChartInfoVm } from "core";
 import { AppLayout, HeaderLayout, FooterLayout, MainChartPageLayout } from ".";
 import { HeaderComponent, FooterComponent } from "common-app/components";
+import ReactMarkdown from "react-markdown";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -82,6 +83,20 @@ export const ChartPageLayout: React.FC<Props> = (props: Props) => {
   const classes = useStyles(props);
   const { chart } = props;
 
+  const markdownInfoSection=`
+  ## Título  
+  Datos sobre la gráfica
+  `;
+
+  const markdownDescriptionSection=`
+  # Descripción  
+  ${chart.longDescription}  
+  `;
+
+  const markdownSourceSection=`
+  **Fuente:** [_${chart.sourceDescription}_](${chart.sourceUrl})
+  `;
+
   return (
     <AppLayout>
       <HeaderLayout>
@@ -91,38 +106,13 @@ export const ChartPageLayout: React.FC<Props> = (props: Props) => {
         <div className={classes.root}>
           <section className={classes.chartSection}>{props.children}</section>
           <section className={classes.chartInfoSection}>
-            {/* TODO: Add Markdown support for chart info */}
-            <Typography variant="h6" component="h1">
-              Título
-            </Typography>
-            <Typography variant="subtitle1" component="p">
-              Datos sobre la gráfica
-            </Typography>
+            <ReactMarkdown source={markdownInfoSection}/>
           </section>
           <section className={classes.sourceSection}>
-            <Typography variant="subtitle2" component="h1">
-              Fuente:
-              <a href={chart.sourceUrl} className={classes.sourceLink}>
-                {chart.sourceDescription}
-              </a>
-            </Typography>
+            <ReactMarkdown source={markdownSourceSection}/>
           </section>
           <section className={classes.descriptionSection}>
-            <Typography
-              variant="h4"
-              component="h1"
-              className={classes.descriptionTitle}
-            >
-              Descripción
-            </Typography>
-            {/* TODO: Add Markdown support for description */}
-            <Typography
-              variant="body1"
-              component="p"
-              className={classes.descriptionParagraph}
-            >
-              {chart.longDescription}
-            </Typography>
+            <ReactMarkdown source={markdownDescriptionSection}/>
           </section>
           <section className={classes.tagsSection}>
             <ul className={classes.tagList}>
diff --git a/package.json b/package.json
index b0162e1..3a9af65 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "next": "^9.3.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-markdown": "^4.3.1",
     "topojson-client": "^3.1.0"
   },
   "devDependencies": {