controllers/dashboard/months_controller.js

  1. import { Controller } from "@hotwired/stimulus"
  2. import { subscription } from "~/javascripts/store/mixins/subscription"
  4. const monthMapper = {
  5.   1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct",
  6.   11: "Nov", 12: "Dec"
  7. }
  9. /**
  10.  * @class Dashboard.MonthsController
  11.  * @classdesc Stimulus controller that handles the months buttons data and interaction.
  12.  * @extends Controller
  13.  **/
  14. export default class extends Controller {
  15.   static targets = [ "buttonGroup", "button" ]
  16.   static values = {
  17.     function: String,
  18.     storeId: String,
  19.     yearSelected: Number
  20.   }
  22.   /** 
  23.    * Subscribe to the store.
  24.    * 
  25.    * @instance
  26.    * @memberof Dashboard.MonthsController
  27.    **/
  28.   connect() {
  29.     subscription(this)
  30.     this.subscribe()
  32.     this.reconnect()
  33.   }
  35.   /** 
  36.    * Handles a repeated Turbo visit to the dashboard page.
  37.    * 
  38.    * @instance
  39.    * @memberof Dashboard.MonthsController
  40.    **/
  41.   reconnect() {
  42.     if (this.store("selectedDataVizData")) {
  43.       this.storeUpdated("monthSelected", this.storeIdValue)
  44.     }
  45.   }
  47.   /** 
  48.    * Triggered when a year is set. Uses a document fragment to fully create the
  49.    * months buttons before removing the load button and adding all the new months buttons. The last
  50.    * button is set as selected
  51.    * 
  52.    * @instance
  53.    * @memberof Dashboard.MonthsController
  54.    **/
  55.   yearSelectedValueChanged() {
  56.     if (this.yearSelectedValue !== 0) {
  57.       const yearAndMonths = this.store("yearsAndMonths").find(data => data.year === this.yearSelectedValue)
  58.       let fragment = document.createDocumentFragment()
  60.       yearAndMonths.month_numbers.forEach(monthNumber => {
  61.         const buttonClone = this.buttonTarget.cloneNode(false)
  62.         const button = fragment.appendChild(buttonClone)
  63.         button.innerHTML = monthMapper[monthNumber]
  64.       });
  66.       this.buttonTargets.forEach(buttonTarget => buttonTarget.remove())
  67.       this.buttonGroupTarget.appendChild(fragment)
  68.       this.buttonTargets.forEach(buttonTarget => buttonTarget.classList.remove("selected"))
  69.       this.buttonTargets[this.buttonTargets.length - 1].classList.add("selected")
  70.     }
  71.   }
  72.   
  73.   /** 
  74.    * Ignores month if already clicked. Set the month clicked as selected in the store and gives the class
  75.    * selected to the clicked month.
  76.    * 
  77.    * @instance
  78.    * @memberof Dashboard.MonthsController
  79.    **/
  80.   monthClicked(event) {
  81.     if (this.store("monthSelected") === parseInt(event.target.innerHTML)) return
  83.     this.editStore(
  84.       "monthSelected",
  85.       parseInt(Object.keys(monthMapper).find(key => monthMapper[key] === event.target.innerHTML))
  86.     )
  88.     this.buttonTargets.forEach(buttonTarget => buttonTarget.classList.remove("selected"))
  89.     event.target.classList.add("selected")
  90.   }
  92.   /** 
  93.    * Fetch all of the data for the selected month. If the data for the month is already present
  94.    * then it does not fetch again.
  95.    * 
  96.    * @instance
  97.    * @memberof Dashboard.MonthsController
  98.    **/
  99.   fetchDataVizData() {
  100.     const year = this.store("yearSelected")
  101.     const month =this.store("monthSelected")
  103.     const data = this.store("dataVizData")[`${year}${month}`]
  104.     if (data) {
  105.       this.editStore("selectedDataVizData", data)
  106.     } else {
  107.       this.editStore("fetchingDataVizData", true)
  109.       fetch(`/.netlify/functions/supabase-get-api?year=${year}&month=${month}`, { 
  110.         headers: { "Function-Name": this.functionValue }
  111.       })
  112.         .then(responseCheck => {
  113.           if (!responseCheck.ok) { throw Error(responseCheck.status); }
  114.           return responseCheck;
  115.         })
  116.         .then(res => res.json())
  117.         .then(fetchedData => {
  118.           this.editStore("fetchingDataVizData", false)
  119.           let dataToUpdate = this.store("dataVizData")
  120.           dataToUpdate[`${year}${month}`] = fetchedData
  121.           this.editStore("dataVizData", dataToUpdate)
  122.           this.editStore("selectedDataVizData", this.store("dataVizData")[`${year}${month}`])
  123.         })
  124.         .catch(error => {
  125.           console.warn(error)
  126.           this.editStore("fetchingDataVizData", false)
  127.         });
  128.     }
  129.   }
  131.   /** 
  132.    * Triggered by the store whenever any store data changes. Fetches the relevant data when a month is
  133.    * selected
  134.    * 
  135.    * @instance
  136.    * @memberof Dashboard.MonthsController
  137.    **/
  138.   storeUpdated(prop, storeId) {
  139.     this.yearSelectedValue = this.store("yearSelected")
  140.     if (prop === "monthSelected" && storeId === this.storeIdValue) this.fetchDataVizData()
  141.   }
  143.   /** 
  144.    * Unsubscribe from the store
  145.    * 
  146.    * @instance
  147.    * @memberof Dashboard.MonthsController
  148.    **/
  149.   disconnect() {
  150.     this.yearSelectedValue = ""
  151.     this.unsubscribe()
  152.   }
  153. }