pastebin.html

<sergey-import src="header">
  <title>dailybuild pastebin;#dailybuild</title>
</sergey-import>

<style>
  pastebin-body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vh; /* Set the body to full height of the viewport */
      margin: 0; /* Remove default margin */
  }

  .centered-div {
      text-align: center; /* Optional: Align content within the centered div */
      padding: 5em; /* Optional: Add padding for better visual appearance */
  }

  #textInput {
            width: 70%;
            height: 10em;
            padding: 10px;
            margin-top: 2em;
            box-sizing: border-box;
            margin-bottom: 10px;
        }

        .green-button {
            background-color: green;
            color: white;
            padding: 1em;
            border: none;
            cursor: pointer;
        }
        .subtitle {
          color: white;
        }
</style>

<div class="project pastebin-body row slider-text align-items-center justify-content-center" style="padding-top: 80px;"></div>
<div class="centered-div">
<h1 style="color: orange">poor man cloud-native pastebin</h1>
<div style="margin-left: 10em">
        <p>upload some text pasted to this textbox area 👇</p>
    <textarea id="textInput" placeholder="Paste text here "></textarea>
    <button class="green-button" onclick="uploadData()">Upload Data to
    Pastebin</button>
    </p>

    <p>
    <div id="responseContainer"></div>
    </p>
    <h3 class="subtitle">your most recent pastes (async loading...) 👇</h3>
    <div id="latestPasteUrls"></div>
</div>
</div>
<div class="col-xs-3"></div>

    <script>
      const BaseURL = "https://paste.socratic.dev/paste";
      const TIMEOUT_MS = 10000

      function getClientId() {
        const queryParams = new URLSearchParams(window.location.search);
        const clientId = queryParams.get("cid");
        return clientId !== null ? clientId: null;
      }
      function utf8ToBase64(str) {
        return btoa(unescape(encodeURIComponent(str)));
      }
      
      async function uploadData() {
        const textInput = document.getElementById("textInput");
        const textData = textInput.value;

        let content;
        if (textData) {
          content = textData;
        } else {
          alert("Please enter text to be saved");
          return;
        }
        
        // base64 encode content to preserve formatting
        content = utf8ToBase64(content);

        // Create a JSON object with "content" as the key
        var data = {
          content: content,
        };

       var clientId = getClientId();
       if (clientId !== null) {
        data["client_id"] = clientId;
       }

        // Convert the JSON object to a string
        const jsonData = JSON.stringify(data);

        // Send the data to the API using the fetch API
        try {
          const controller = new AbortController();
          const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);
          
          const response = await fetch(BaseURL, {
            method: "POST",
            headers: {
              accept: "application/json",
              "Content-Type": "application/json",
            },
            body: jsonData,
            signal: controller.signal
          });

          clearTimeout(timeoutId);
          const result = await response.json();

          // Display the API response on the web page
          const responseContainer =
            document.getElementById("responseContainer");
          var id = result["id"];
          id = id.replace('"', "");
          const url = `${BaseURL}?id=${id}`;
          responseContainer.innerHTML = `<p>Visit this URL to view most recent paste: <a href=${url}>${url}</a></p>`;
          textInput.value = ""; //clearing textbox from its value
        } catch (error) {
          console.error("Error sending data to API:", error);
          alert("Error sending data to API");
        }
      }
      
      async function displayPasteUrls() {
        var pastebinAPIuri = `${BaseURL}/api/pastes`;
        var clientId = getClientId();
        console.log("muh client id");
        console.log(clientId);
            if (clientId !== null) {
              pastebinAPIuri = pastebinAPIuri + "?client_id=" + clientId;
            }

            try {
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);

                const response = await fetch(pastebinAPIuri, {
                  signal: controller.signal
                });
                clearTimeout(timeoutId);    
                
                // Setup timeout for JSON parsing
                const jsonPromise = response.json();
                const timeoutPromise = new Promise((_, reject) => 
                  setTimeout(() => reject(new Error('JSON parsing timed out')), TIMEOUT_MS)
                );
                
                const data = await Promise.race([jsonPromise, timeoutPromise]);

                // Get the div where we'll display the latest Paste Urls
                const urlsDiv = document.getElementById("latestPasteUrls");

                // Display each Url
                data.forEach(url => {
                   const p = document.createElement('p');
                    p.innerHTML = `<a href="${url}" target="_blank">${url}</a>`;
                    urlsDiv.appendChild(p);
                });
            } catch (error) {
                console.error("Error fetching strings from API:", error);
                alert("Error fetching strings from API.");
            }
        }

      window.onload = function() {
          displayPasteUrls();
        };
    </script>
    <div style="margin-top: 260px;">    
        <sergey-import src="footer">
          <a href="dpro-comic.html#top" title="Back to top">
          </sergey-import>
          <sergey-import src="scripts" />
        </div>
  </body>
</html>