Fixes #263 - Added fetching and rendering of data from the backend to the frontend

package.json

@@ -23,8 +23,11 @@
     "pretest": "npm run lint",
     "test": "npm run jest",
     "jest": "cross-env MOCK_REDIS=1 jest",
-    "jest-watch":"cross-env MOCK_REDIS=1 jest --watch",
-    "start": "node src",
+    "jest-watch": "cross-env MOCK_REDIS=1 jest --watch",
+    "start": "node src/backend",
+    "server": "node src/backend/web/server",
+    "hint": "hint http://localhost:3000",
+    "webhint": "cross-env PORT=3000 npm-run-all -r -p server hint",
     "debug-server": "nodemon server.js"
   },
   "husky": {

src/frontend/dummy_data/participants.json

@@ -0,0 +1,84 @@
+{
+  "participants": [
+    {
+      "name": "John Smith",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John S. Smith",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smithers",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smiths",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "Smith Johnson",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smiths",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "Smith Johnson",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smith",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John S. Smith",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smithers",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smith",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John S. Smith",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smithers",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smithers",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smiths",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "Smith Johnson",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smiths",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "Smith Johnson",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John Smith",
+      "url": "https://www.google.ca"
+    },
+    {
+      "name": "John S. Smith",
+      "url": "https://www.google.ca"
+    }
+  ]
+}

src/frontend/dummy_data/posts.json

@@ -0,0 +1,35 @@
+{
+  "page": 1,
+  "posts": [
+    {
+      "title": "A Telescope Blog Post A Telescope Blog Post",
+      "author": "Tim Berners Lee",
+      "content": "<p>Hello friends,</p>\n\n\n\n<p></p>\n\n\n\n<p>October is right around the corner and that means a lot of different &#8220;fests&#8221; are here. The one that has myself really excited for is <a href=https://hacktoberfest.digitalocean.com/>Hacktober Fest</a>. The premise is that it promotes open-source projects and development by having developers create a minimum of four pull requests. Also, the first 50,000 people who have four pull request get a free t-shirt! I have set myself up with some goals that I want to hit in this short period of time and have looked into issues/projects that help with it.</p>\n\n\n\n<h2>Personal Goals</h2>\n\n\n\n<ol><li>Improve my Javascript/Web programming skills</li><li>Work on a project that creates a helpful impact on the world</li></ol>\n\n\n\n<p>My goals are pretty broad and I feel are definitely attainable. I&#8217;d like to improve on my web-based programming skill since it is something I feel can be very useful for the future, but also help me immediately with my current projects that I am working on. Also, working on something that creates a helpful impact on the world is just something I feel everyone would love to do. I&#8217;d hope my work and code do good, not evil.</p>\n\n\n\n<h2>Possible Issues</h2>\n\n\n\n<h3>Issue #1</h3>\n\n\n\n<p><a href=https://github.com/layer5io/meshery/issues/304>meshery &#8211; Collapsable Navigation Menu</a></p>\n\n\n\n<p>This is basically updating meshery navigation menu. They want there navigation on the left to be able to collapse the left and not take up as much space. I believe this will help improve my JavaScript skills and will be useful to know in the future.</p>\n\n\n\n<h3>Issue #2</h3>\n\n\n\n<p><a href=https://github.com/yunity/karrot-frontend/issues/1555>karrot &#8211; Notify logged-out unsubscribtion via email</a></p>\n\n\n\n<p>This issue will a bit more challenging, but I feel it help push me to be a better developer. Also, I feel like notifying people via email will be a useful thing later down the road for other projects, so I might as well take a crack at it now.</p>\n\n\n\n<h3>Issue #3</h3>\n\n\n\n<p><a href=https://github.com/yunity/karrot-frontend/issues/1555>curosity &#8211; No option to enter a new tokencurosity</a></p>\n\n\n\n<p>Again, I think this issue will something I will need to learn down the road. It&#8217;s essentially making checking the token the user has is valid or still there; if it&#8217;s deleted, instead of throwing a bunch or errors they&#8217;d like to user to be prompted to add a new token. It&#8217;s something I might need to learn later, so I might as well learn it now.</p>\n\n\n\n<p>For most of the issues, I will have to really look at their code and try to grasp what is going on and how it is being done. I will then try to recreate the error and begin to search for the cause. This will lead me to figuring out a way to tackle the problem. All thats left after that is fixing the issue. </p>\n\n\n\n<h2>All in all</h2>\n\n\n\n<p>Hopefully, it&#8217;s a successful Hacktober Fest and I end up with a free t-shirt.</p>',     postURL: 'https://neilong31.wordpress.com/2019/09/25/hacktober-fest/",
+      "updated": "2019-11-28T23:15:30.000Z",
+      "published": "2019-11-28T23:15:30.000Z",
+      "url": "https://neilong31.wordpress.com/2019/09/13/web-based-note-taker-forevernote/",
+      "site": "https://neilong31.wordpress.com/",
+      "guid": "tag:blogger.com,1999:blog-3586542501367863430.post-1706207209862339192"
+    },
+    {
+      "title": "First Issue (Hacktober Fest)",
+      "author": "Neil",
+      "content": "<p>Hello friends,</p>\n\n\n\n<p>Hacktober Fest is upon us and that means issues galore. As you guys know I&#8217;ve decided to participate in this years <a href='https://hacktoberfest.digitalocean.com/'>Hacktober Fest</a> (need that sweet merch). That means I am tasked with submitting four different pull request. It took me a while, but  I found <a href='https://github.com/BlythMeister/Fitbit-Overview-Face/pull/26'>one</a> that was a decent beginner issue.</p>\n\n\n\n<p></p>\n\n\n\n<h2>Issue At Hand</h2>\n\n\n\n<p>The issue that I found was for <a href='https://github.com/BlythMeister'>Chris Blyth</a> and his <a href='https://github.com/BlythMeister/Fitbit-Overview-Face'>Fitbit-Overview-Face</a>. It&#8217;s his own repository for creating his own <a href='https://gallery.fitbit.com/details/7c4f7506-8ed8-4eb9-84e3-28b85671f26b'>custom face for fitbit watches.</a> </p>\n\n\n\n<figure class='wp-block-image size-large'><img data-attachment-id='55' data-permalink='https://neilong31.wordpress.com/fitbitsite/' data-orig-file='https://neilong31.files.wordpress.com/2019/10/fitbitsite.png' data-orig-size='1403,748' data-comments-opened='1' data-image-meta='{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}' data-image-title='fitbitsite' data-image-description='' data-medium-file='https://neilong31.files.wordpress.com/2019/10/fitbitsite.png?w=300' data-large-file='https://neilong31.files.wordpress.com/2019/10/fitbitsite.png?w=750' src='https://neilong31.files.wordpress.com/2019/10/fitbitsite.png?w=1024' alt='' class='wp-image-55' srcset='https://neilong31.files.wordpress.com/2019/10/fitbitsite.png?w=1024 1024w, https://neilong31.files.wordpress.com/2019/10/fitbitsite.png?w=150 150w, https://neilong31.files.wordpress.com/2019/10/fitbitsite.png?w=300 300w, https://neilong31.files.wordpress.com/2019/10/fitbitsite.png?w=768 768w, https://neilong31.files.wordpress.com/2019/10/fitbitsite.png 1403w' sizes='(max-width: 1024px) 100vw, 1024px' /></figure>\n\n\n\n<p>The <a href='https://github.com/BlythMeister/Fitbit-Overview-Face/issues/25'>issue</a> at hand was adding a new date format for his custom face. Once I got the go-ahead to start working on it I started to skim/scan through his code. I found where he kept and created new date formats under his date.js file in his getDateInFormat function. The original code for the function can be seen below</p>\n\n\n\n<figure class='wp-block-image size-large'><img data-attachment-id='57' data-permalink='https://neilong31.wordpress.com/fitbitdate/' data-orig-file='https://neilong31.files.wordpress.com/2019/10/fitbitdate.png' data-orig-size='1057,675' data-comments-opened='1' data-image-meta='{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}' data-image-title='fitbitdate' data-image-description='' data-medium-file='https://neilong31.files.wordpress.com/2019/10/fitbitdate.png?w=300' data-large-file='https://neilong31.files.wordpress.com/2019/10/fitbitdate.png?w=750' src='https://neilong31.files.wordpress.com/2019/10/fitbitdate.png?w=1024' alt='' class='wp-image-57' srcset='https://neilong31.files.wordpress.com/2019/10/fitbitdate.png?w=1024 1024w, https://neilong31.files.wordpress.com/2019/10/fitbitdate.png?w=150 150w, https://neilong31.files.wordpress.com/2019/10/fitbitdate.png?w=300 300w, https://neilong31.files.wordpress.com/2019/10/fitbitdate.png?w=768 768w, https://neilong31.files.wordpress.com/2019/10/fitbitdate.png 1057w' sizes='(max-width: 1024px) 100vw, 1024px' /></figure>\n\n\n\n<p>I scanned through the function and noticed the style he wrote it and how we wrote the code the other date formats. So, I followed suit and created the requested date format in the same style as the others. All I had to do was rearrange the return statement to ensure the code was following the right format. The code for the new date format can be seen below</p>\n\n\n\n<figure class='wp-block-image size-large'><img data-attachment-id='58' data-permalink='https://neilong31.wordpress.com/fitbitfix/' data-orig-file='https://neilong31.files.wordpress.com/2019/10/fitbitfix.png' data-orig-size='1087,598' data-comments-opened='1' data-image-meta='{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}' data-image-title='fitbitfix' data-image-description='' data-medium-file='https://neilong31.files.wordpress.com/2019/10/fitbitfix.png?w=300' data-large-file='https://neilong31.files.wordpress.com/2019/10/fitbitfix.png?w=750' src='https://neilong31.files.wordpress.com/2019/10/fitbitfix.png?w=1024' alt='' class='wp-image-58' srcset='https://neilong31.files.wordpress.com/2019/10/fitbitfix.png?w=1024 1024w, https://neilong31.files.wordpress.com/2019/10/fitbitfix.png?w=150 150w, https://neilong31.files.wordpress.com/2019/10/fitbitfix.png?w=300 300w, https://neilong31.files.wordpress.com/2019/10/fitbitfix.png?w=768 768w, https://neilong31.files.wordpress.com/2019/10/fitbitfix.png 1087w' sizes='(max-width: 1024px) 100vw, 1024px' /></figure>\n\n\n\n<h2>In the End</h2>\n\n\n\n<p>In the end the code for the issue wasn&#8217;t all that difficult, but it was a good way for getting my feet wet in the Open-Source world. It did help me by learning how to identify issues and how to find scan and understand someone else&#8217;s code. This will help later down the road with more complex and bigger projects. As of 4:03PM EST 10/4/2019 my pull request has not been viewed or merged.</p>",
+      "updated": "2019-11-28T23:15:30.000Z",
+      "published": "2019-11-28T23:15:30.000Z",
+      "url": "https://neilong31.wordpress.com/2019/10/04/first-issue-hacktober-fest/",
+      "site": "https://neilong31.wordpress.com/",
+      "guid": "tag:blogger.com,1999:blog-3586542501367863430.post-1706207209862339193"
+    },
+    {
+      "title": "A Very Extremely Quite Long Blog Post Title For Testing Overflow A Very Extremely Quite Long Blog Post Title For Testing Overflow",
+      "author": "Tim Berners Lee",
+      "content": "<p>Hello friends,</p>\n\n\n\n<p></p>\n\n\n\n<p>October is right around the corner and that means a lot of different &#8220;fests&#8221; are here. The one that has myself really excited for is <a href=https://hacktoberfest.digitalocean.com/>Hacktober Fest</a>. The premise is that it promotes open-source projects and development by having developers create a minimum of four pull requests. Also, the first 50,000 people who have four pull request get a free t-shirt! I have set myself up with some goals that I want to hit in this short period of time and have looked into issues/projects that help with it.</p>\n\n\n\n<h2>Personal Goals</h2>\n\n\n\n<ol><li>Improve my Javascript/Web programming skills</li><li>Work on a project that creates a helpful impact on the world</li></ol>\n\n\n\n<p>My goals are pretty broad and I feel are definitely attainable. I&#8217;d like to improve on my web-based programming skill since it is something I feel can be very useful for the future, but also help me immediately with my current projects that I am working on. Also, working on something that creates a helpful impact on the world is just something I feel everyone would love to do. I&#8217;d hope my work and code do good, not evil.</p>\n\n\n\n<h2>Possible Issues</h2>\n\n\n\n<h3>Issue #1</h3>\n\n\n\n<p><a href=https://github.com/layer5io/meshery/issues/304>meshery &#8211; Collapsable Navigation Menu</a></p>\n\n\n\n<p>This is basically updating meshery navigation menu. They want there navigation on the left to be able to collapse the left and not take up as much space. I believe this will help improve my JavaScript skills and will be useful to know in the future.</p>\n\n\n\n<h3>Issue #2</h3>\n\n\n\n<p><a href=https://github.com/yunity/karrot-frontend/issues/1555>karrot &#8211; Notify logged-out unsubscribtion via email</a></p>\n\n\n\n<p>This issue will a bit more challenging, but I feel it help push me to be a better developer. Also, I feel like notifying people via email will be a useful thing later down the road for other projects, so I might as well take a crack at it now.</p>\n\n\n\n<h3>Issue #3</h3>\n\n\n\n<p><a href=https://github.com/yunity/karrot-frontend/issues/1555>curosity &#8211; No option to enter a new tokencurosity</a></p>\n\n\n\n<p>Again, I think this issue will something I will need to learn down the road. It&#8217;s essentially making checking the token the user has is valid or still there; if it&#8217;s deleted, instead of throwing a bunch or errors they&#8217;d like to user to be prompted to add a new token. It&#8217;s something I might need to learn later, so I might as well learn it now.</p>\n\n\n\n<p>For most of the issues, I will have to really look at their code and try to grasp what is going on and how it is being done. I will then try to recreate the error and begin to search for the cause. This will lead me to figuring out a way to tackle the problem. All thats left after that is fixing the issue. </p>\n\n\n\n<h2>All in all</h2>\n\n\n\n<p>Hopefully, it&#8217;s a successful Hacktober Fest and I end up with a free t-shirt.</p>',     postURL: 'https://neilong31.wordpress.com/2019/09/25/hacktober-fest/",
+      "updated": "2019-11-28T23:15:30.000Z",
+      "published": "2019-11-28T23:15:30.000Z",
+      "url": "https://neilong31.wordpress.com/2019/09/13/web-based-note-taker-forevernote/",
+      "site": "https://neilong31.wordpress.com/",
+      "guid": "tag:blogger.com,1999:blog-3586542501367863430.post-1706207209862339194"
+    }
+  ]
+}