JSFiddle - React, Tailwind, and code Playground

by linoasis

HTML

<main>
    <div class="px-5">
        <div class="col-lg-6 mx-auto">
            <h1>Profile Posts</h1>
            <div id="memo-feed"></div>
        </div>
    </div>
</main>

CSS

div.card {
    margin-bottom: 10px;
}

JavaScript

const memoFeed = async () => {
    const url = 'https://graph.cash/graphql';
    const query = `
            query ($address: Address!) {
                address (address: $address) {
                		profile {
                    		posts(newest: true, start: "2030-01-01T00:00:00-00:00") {
                            lock {
                                address
                            }
                            tx {
                                hash
                                seen
                                blocks {
                                    block {
                                    hash
                                    timestamp
                                  }
                                }
                            }
                            text   
                        }
                    }
                }
            }
        `;

    const response = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            query: query,
            variables: {
            	address: "1MrdqwHYpfHEtzYQ2k3W6hDapKiP6BK2ss",
              newest: true,
						},
        })
    });

    const json = await response.json();
    const feed = document.getElementById('memo-feed');

    json.data.address.profile.posts.splice(0, 10).forEach(post => {
        const addressInfo = `Address: ${post.lock.address}`;
        const txInfo = `Tx: ${formatHash(post.tx.hash)} ${formatDate(post.tx.seen)}`;
        const postText = `${post.text}`;

        const divCard = newElement("div", ["card"]);
        const divCardBody = newElement("div", ["card-body"]);
        const divPostText = newElement("h5", ["card-title"], postText);
        const divAddressInfo = newElement("div", ["card-text"], addressInfo);
        const divTxInfo = newElement("div", ["card-text"], txInfo);
        const aMemoLink = newElement("a", ["card-link"], "View on...