From 7651fd4c7b7b7c9bf64c0f5ac0be213483b74ab5 Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <cam@camcodes.com>
Date: Mon, 1 Nov 2021 17:37:02 -0400
Subject: [PATCH] Added formatter to Article.js

---
 public/api/articles.json  |  2 +-
 src/components/Article.js | 41 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/public/api/articles.json b/public/api/articles.json
index cb67fc9..5ef4bbf 100644
--- a/public/api/articles.json
+++ b/public/api/articles.json
@@ -4,7 +4,7 @@
             "id": 0,
             "title": "Test Article",
             "desc":"This is a description",
-            "contents": "Hello World"
+            "contents": "Hello World `SomeCode``MoreCode`Apple"
         }
     ]
 }
\ No newline at end of file
diff --git a/src/components/Article.js b/src/components/Article.js
index 13d9dc3..5aa11c5 100644
--- a/src/components/Article.js
+++ b/src/components/Article.js
@@ -2,11 +2,50 @@ import React from 'react';
 import './css/Articles.css';
 
 const Article = ({article}) => {
+    let articleFormatter = (text) => {
+        let output = [""];
+        let type = [];
+        let ind = 0;
+        let tick=false;
+
+        for (let i = 0; i < text.length; i++) {
+            if (text[i] === '`') {
+                if (tick) {
+                    //output[ind++] += text[i]
+                    output[++ind] = ""
+                    tick = false;
+                } else {
+                    //output[++ind] = text[i]
+                    type.push(1);
+                    output[++ind] = ""
+                    tick = true;
+                }
+                
+            } else {
+                if (output.length > type.length) {
+                    type.push(0);
+                    output[ind] = ""
+                }
+                output[ind] += text[i]
+            }
+        }
+        let code = [...output.keys()].map((i)=>{
+            console.log(output[i], type[i]);
+            if (type[i] == 0){
+                return <div key={i}>{output[i]}</div>;
+            } else {
+                return <div className="code" key={i}>{output[i]}</div>;
+            }
+        });
+        return code
+        
+    };
+
     return (
         <div>
             <div>{article.title}</div>
             <div>{article.desc}</div>
-            <div>{article.contents}</div>
+            <div>{articleFormatter(article.contents)}</div>
         </div>
         );
 }