JSFiddle - React, Tailwind, and code Playground

by Keenan

HTML

<p>
    Below is a box that has latest post data from my test forum. The code is designed to be easy to implement.
    Simply use the class attribute to set each HTML element with the data from the discussion. Using an anchor tag with either FirstName or LastName will produce a link to the user's profile page. Using an anchor with Name will link to the discussion itself.</p>

<div class="latestPost">
    <div class="postName"><a href="#" class="latestName"></a></div>
    <div class="authorInfo">By: <img src="#" class="latestFirstPhoto Usericon"/><a href="#" class="latestFirstName"></a> @ <span class="latestFirstDate"></span></div>
<!--    Body: <span class="latestBody"></span><br /> -->
    <div class="commentInfo">Latest: <img src="#" class="latestLastPhoto Usericon"/><a href="#" class="latestLastName"></a> @ <span class="latestLastDate"></span></div>
</div>

CSS

.Usericon {
    width: 32px;
    height: 32px;
}

div.latestPost {
    width: 400px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

JavaScript

// latestDiscussion.js
// @author Jonathan Walker
// @copyright 2015
// @license https://www.gnu.org/licenses/gpl-2.0.html
// Interface to Vanilla Forums discussion JSON to display the most recent discussion.

// Define our global variables using "namespaces"
// Leave these alone
$.lD = new Object();
$.lD.d = new Object();
$.lD.r = false;

// Customization Section

// This is the URL with the JSON
// Host is the location of your forums. If it is in a sub directory, include that.
// Example: http://www.mysite.com/forums
// Example: http://forums.mysite.com
$.lD.host = "http://testing.wurmly.com"
// This is where the JSON resides. In most cases, you can leave this alone.
$.lD.json = "discussions.json";
// Delay to wait for AJAX - Change this to fit your needs. 1000 = 1 second
$.lD.wait = 1000;
// Class prefix, example latestFirstName
$.lD.prefix = "latest";

// This puts the latest discussion in $.lD.d
function getLatest() {
    $.getJSON($.lD.host+"/"+$.lD.json, function(data){
        $.lD.d = data.Discussions[0];
        $.lD.r = true;
    });
}

// This updates elements on the page using the "latest" class prefix
// Example, for the name of the person who posted, put "latestFirstName"
// as the class for the element you want it to show up in.
function updateLatest() {
    $.each($.lD.d, function(key,val){
        // Handle data
        // Add more case statements to special handle fields.
        switch(key) {
                // User Avatars
            case "FirstPhoto":
            case "LastPhoto":
                $("img."+$.lD.prefix+key).attr("src", val);
                // Handle Dates
            case "DateAccepted":
            case "DateInserted":
            case "DateLastComment":
            case "DateLastViewed":
            case "DateOfAnswer":
            case "DateUpdated":
            case "FirstDate":
            case "LastDate":
                val = new Date(val);
                val = val.toLocaleString();
               ...