Vote counter template

import './styles.css';
import { LoadingIndicator } from 'skytree-koji';
import { FeedSdk, InstantRemixing } from '@withkoji/vcc';
import DataHandler from './utils/DataHandler';

// initialize the loading indicator
const loadHandle = LoadingIndicator.ofDocument().init();

const optimizeURL = url => `${url}?fit=bounds&width=${window.innerWidth/2}&height=${window.innerHeight/2}&optimize=medium`;

var instantRemixing = new InstantRemixing();

// Alert Koji we are ready to use instantRemixing
instantRemixing.ready();

var title = instantRemixing.get(['settings', 'titleOptions', 'title']);
var titleSize = instantRemixing.get(['settings', 'titleOptions', 'fontSize']);
var logo = instantRemixing.get(['settings', 'logo']);

var remixState = 'text';
var remixing = false;
var votes = -1;

// Preload images before calling render
var imagesLoaded;
const preload = () => {
    let images = [logo];
    imagesLoaded = 0;
    for (let i = 0; i < images.length; i++) {
        let imagePreload = new Image();
        imagePreload.onload = () => {
            imagesLoaded++;
            if (imagesLoaded === images.length) {
                loadHandle.release();
                render();
                if (remixing) {
                    startRemix();
                }
            }
        };
        imagePreload.src = optimizeURL(logo);
    }
};

// Render application
const render = () => {
    document.body.innerHTML = `
        <h1 style="font-size:${titleSize}px" id="title">${title}</h1>
        <img id="logo" src="${optimizeURL(logo)}"/>
        <p>This icon has been clicked <span id="voteCount">${votes}</span> times</p>
    `;
};

// Inform Koji Feed that the app is ready to be displayed
const feed = new FeedSdk();
feed.load();

// Initialize the data handler
const dataHandler = new DataHandler(instantRemixing);
dataHandler.initialize();

// Add a listener to the on change event of instant remixing to update the title
instantRemixing.onValueChanged((path, newValue) => {
    if (path[0] && path[0] === 'settings' && path[1] && path[1] === 'titleOptions') {
        let titleElement = document.getElementById('title');
        titleElement.textContent = newValue.title;
        titleElement.style.fontSize = newValue.fontSize+"px";
    }
    if (path[0] && path[0] === 'settings' && path[1] && path[1] === 'logo') {
        let logoImage = document.getElementById('logo');
        logoImage.src = optimizeURL(newValue);
    }
});

// Add a listener to handle state changes between remixing and not
instantRemixing.onSetRemixing((isRemixing) => {
    remixing = isRemixing;
    if (isRemixing) {
        startRemix();
    } else {
        stopRemix();
    }
});

// Callback to set the vote count value for display
const setVotes = (voteCount) => {
    votes = voteCount;
    let voteDisplay = document.getElementById('voteCount');
    voteDisplay.textContent = votes;
};

dataHandler.setVotesCallback(setVotes);

// Modify elements to display state for remixing
const startRemix = () => {
    if (remixState === 'text') {
      let titleElement = document.getElementById('title');
      titleElement.classList.add('edit');
    } else if (remixState === 'logo') {
      let logoImage = document.getElementById('logo');
      logoImage.classList.add('edit');
    }

};

// Modify elements to display state for previewing
const stopRemix = () => {
    let titleElement = document.getElementById('title');
    let logoImage = document.getElementById('logo');
    titleElement.classList.remove('edit');
    logoImage.classList.remove('edit');
};

// Add click event listener to expose title VCC
document.addEventListener('click', function (event) {
    if (!event.target.matches('#title')) return;
    if (remixState !== 'text') return;
    event.preventDefault();

    instantRemixing.onPresentControl(['settings', 'titleOptions']);
});

// Add click event listener to expose logo VCC
document.addEventListener('click', function (event) {
    if (!event.target.matches('#logo')) return;
    if (remixState === 'logo') {
        event.preventDefault();
        instantRemixing.onPresentControl(['settings', 'logo']);
    } else {
        dataHandler.addVote();
    }
});

// Set current remixing state
instantRemixing.onSetCurrentState((templateState) => {
  remixState = templateState;
  if (remixing) {
    stopRemix();
    startRemix();
  }
});

// Add feed event listener to modify title class
feed.onPlaybackStateChanged((isPlaying) => {
  let titleElement = document.getElementById('title');
  if (isPlaying) {
    titleElement.classList.add('animate');
  } else {
    titleElement.classList.remove('animate');
  }
});

import { v4 as uuidv4 } from 'uuid'
import Dispatch from '@withkoji/dispatch'

class DataHandler {
    constructor(instantRemixing) {
        this.totalVotes = 0;
        this.votesToSend = 0;
        this.instantRemixing = instantRemixing; //Reference to an already existing instantRemixing
        this.backendPath = this.instantRemixing.get(['serviceMap', 'backend']);

        //Custom user id helps prevent syncing problems
        this.userId = uuidv4();
        localStorage.setItem('userId', this.userId);

        this.submissionTimeout = null;
        this.isVerifyingResults = false;
        this.isSubmitting = false;

        //Fetch votes from the backend periodically just in case of any desyncs
        setInterval(() => this.fetchVotes(), 5000);
    }

    //Call this from the parent component on mount
    initialize() {
        this.initializeDispatch();
        this.fetchVotes();
        this.scheduleSubmission();
    }

    setVotesCallback(setVotes) {
        this.setVotes = setVotes; //Callback to set the vote amount on the component
    }

    //Use dispatch to monitor tap events for all connected users
    initializeDispatch() {
        this.dispatch = new Dispatch({
            projectId: this.instantRemixing.get(['metadata', 'projectId']),
        });
        this.dispatch.connect();
        this.dispatch.on('new_tap', () => { this.addTapFromDispatch() });
    }

    addTapFromDispatch() {
        this.totalVotes++;
        this.setVotes(this.totalVotes)
    }

    //Queue up frontend votesToSend locally in the background
    addVote() {
        this.votesToSend++;
        this.dispatch.emitEvent('new_tap');
    }

    //Using this to schedule submission to make sure we only have one check in the queue at any time
    scheduleSubmission(timeout = 1000) {
        if (this.isSubmitting) return;

        this.isSubmitting = true;

        clearTimeout(this.submissionTimeout);
        this.submissionTimeout = setTimeout(() => {
            this.submitVotes();
        }, timeout);
    }

    // Submit votes from frontend to backend
    submitVotes = () => {
      const body = JSON.stringify({
          userId: this.userId,
          votes: this.votesToSend
      });

      //Reset vote pool so we start piling up a new batch of votes
      this.votesToSend = 0;
      if (this.backendPath)
      fetch(`${this.backendPath}/votes/add`, {
          method: "put",
          headers: {
              "Accept": "application/json",
              "Content-Type": "application/json"
          },
          body: body,
      })
          .then((response) => response.json())
          .then((responseJson) => {
              this.isSubmitting = false;
              this.scheduleSubmission();
          })
          .catch(err => {
              console.log(err);
              this.isSubmitting = false;
              this.scheduleSubmission();
          });
    }

    // Fetch counts from backend database
    fetchVotes() {
      if (this.backendPath)
      fetch(`${this.backendPath}/votes`, {
          method: "get",
          headers: {
              "Accept": "application/json",
              "Content-Type": "application/json"
          }
      })
          .then((response) => response.json())
          .then((responseJson) => {
              //Only update votes if the fetched votes are higher than local
              if (responseJson.votes > this.totalVotes) this.totalVotes = responseJson.votes;
              this.setVotes(this.totalVotes);
          })
          .catch(err => {
              console.log(err);
          })
    }
}

export default DataHandler;