JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>
    
    <div id='page-index' class='page'></div>
    
    <div id='page-category' class='page'></div>
    
    <div id='page-thread' class='page'></div>
    
    <div id='page-create-thread'></div>
    
</div>

CSS

div, img, table, td, tr, th, button, p, ul, li, input, textarea {
    box-sizing: border-box;
}

body {
    background-color: silver;
}

#container {
    width: 900px;
    margin: 0 auto;
}

.page {
    background-color: #fff;
    border: 1px solid grey;
    padding: 10px;
    margin: 30px 0;
}

/* Many places */
.table .table-row {
    display: flex;
    flex-flow: row;
}
.table .table-row .table-cell {
    display: flex;
    align-items: center;
    border: 1px solid grey;
    padding: 5px;
}

/* One 'table' with group of categories. */
.area-table-banner {
    height: 40px;
    background-color: coral;
    text-align: center;
    border: 1px solid grey;
}
.area-table {
    width: 100%;
}
.area-table .area-table-header {
    background-color: silver;
    border: 1px solid grey;
}

/* Image */
.area-table .table-cell:nth-child(1) {
    width: 80px;
    height: 60px;
    background-color: lightpink;
}
/* Category name */
.area-table .table-cell:nth-child(2) {
    width: 300px;
}
/* Thread count. Forget post count */
.area-table .table-cell:nth-child(3) {
    width: 60px;
}
/* Last activity */
.area-table .table-cell:nth-child(4) {
    width: 120px;
}


.thread-table {}

JavaScript

const db = {

    areas: [
        {
            id: 1, name: "",
            desc: ""
        }
    ],

    categories: [
        {
            id: 1, name: "News and Announcements",
            areaId: 1, isPrivate: 0,
            desc: "aaaaa"
        },
        {
            id: 2, name: "Some Category",
            areaId: 1, isPrivate: 0,
            desc: "bbbbb"
        }
    ],
    
    threads: [],
    
    posts: [],
    
    watches: [
        {id: 1, userId: 1, threadId: 1},
        {id: 2, userId: 1, threadId: 2},
        {id: 3, userId: 2, threadId: 1},
    ],
    
    likes: [
        {id: 1, userId: 1, postId: 1},
        {id: 2, userId: 1, postId: 2},
        {id: 3, userId: 2, postId: 1},
        {id: 4, userId: 2, postId: 2}
    ],
    
    users: [
        {
            id: 1, username: "GwynMil",
            role: 1, class: 1,
            avatar: "",
            posts: 123
        },
        {
            id: 2, username: "arete",
            role: 1, class: 2,
            avatar: "",
            posts: 456
        }
    ],
    
    roles: [
        {id: 1, name: "Admin"},
        {id: 2, name: "Moderator"},
        {id: 3, name: "Member"},
        {id: 4, name: "Banned"},
        {id: 5, name: "SomeRole"}
    ]

};

class Demo {

    constructor(){
        this.renderIndexPage();
        //this.renderCategoryPage();
        //this.renderThreadPage();
    }
    
    // UTILITY
    
    findRowById(table, id){
        let row = db[table].find(r => r.id == id);
        if(!row){
            throw "Table '" + table + "', no ID '" + id + "' found.";
        }
        return row;
    }
    getArea(areaId){
        return this.findRowById("areas", areaId);
    }
    getCat(catId){
        return this.findRowById("categories", catId);
    }
    getThread(threadId){
        return this.findRowById("threads", threadId);
    }
    getPost(postId){
        return this.findRowById("posts", postId);
    }
    getUser(userId){
        return...