JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Google Chat API App</title>
    <script src="https://apis.google.com/js/api.js"></script>
    <script>
        // Ensure that the handleClientLoad function is called after the library loads
        function loadGapi() {
            gapi.load('client:auth2', handleClientLoad);
        }
    </script>
</head>
<body>
    <h1>Google Chat API App</h1>
    <button id="authorize-button">Authorize</button>
    <button id="signout-button" style="display: none;">Sign Out</button>
    <div id="content"></div>

    <script src="app.js"></script>
    <script>
        // Load the gapi library and then call loadGapi function
        window.onload = function() {
            loadGapi();
        };
    </script>
</body>
</html>

JavaScript

const CLIENT_ID = '990605325067-f2ghuv97uvu3hsu50ej8fcvf8egm2e0q.apps.googleusercontent.com';
const API_KEY = 'AIzaSyBRUt7Pnj8lfOrovrRnDJP2lkyO-7_f7us';
const SCOPES = 'https://www.googleapis.com/auth/chat.bot';


let authorizeButton = document.getElementById('authorize-button');
let signoutButton = document.getElementById('signout-button');
let contentDiv = document.getElementById('content');

function handleClientLoad() {
    gapi.client.init({
        apiKey: API_KEY,
        clientId: CLIENT_ID,
        discoveryDocs: ["https://chat.googleapis.com/$discovery/rest?version=v1"],
        scope: SCOPES
    }).then(() => {
        gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
        updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        authorizeButton.onclick = handleAuthClick;
        signoutButton.onclick = handleSignoutClick;
    }, (error) => {
        console.error(JSON.stringify(error, null, 2));
    });
}

function updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
        authorizeButton.style.display = 'none';
        signoutButton.style.display = 'block';
        listSpaces();
    } else {
        authorizeButton.style.display = 'block';
        signoutButton.style.display = 'none';
    }
}

function handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn();
}

function handleSignoutClick(event) {
    gapi.auth2.getAuthInstance().signOut();
}

function listSpaces() {
    gapi.client.chat.spaces.list().then((response) => {
        let spaces = response.result.spaces;
        contentDiv.innerHTML = '<h2>Spaces</h2>';
        if (spaces && spaces.length > 0) {
            let ul = document.createElement('ul');
            spaces.forEach(space => {
                let li = document.createElement('li');
                li.appendChild(document.createTextNode(space.displayName));
                ul.appendChild(li);
            });
            contentDiv.appendChild(ul);
        } else {
           ...