Airtable+Framer Medium globals.ts

globals.ts

import { useEffect, useState } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

// This will hold our state, this is where our data will be stored
export const globalStore = createStore({
    total: 0,
    selectedProducts: [],
    productLabels: [],
    chartData: {
        labels: [],
        datasets: [],
    },
    chartDataOriginal: {
        labels: [],
        datasets: [],
    },
    airtableData: [],
})

// template object for the Chart
export const _data = {
    labels: [],
    datasets: [],
}

// Chart customization options
export const sampleDataset = {
    maintainAspectRatio: true,
    fill: true,
    backgroundColor: "#57E0AF",
    borderColor: "#57E0AF",
    tension: 0.3,
    label: "",
    data: [],
}

// basic function to call the Airtable API and fetch our data
export function callAPI(fn) {
    var myHeaders = new Headers()
    myHeaders.append("Authorization", "Bearer key2aaAZxD9NuZNgI") // use your own key
    myHeaders.append("Cookie", "brw=brwQnBRCRtBcg8e8z")

    var requestOptions = {
        method: "GET",
        headers: myHeaders,
    }

    fetch(
        "https://api.airtable.com/v0/appDMhRWC7kQYHEZO/Receipts?maxRecords=100&view=Grid%20View", // use your own Database
        requestOptions
    )
        .then(async (response) => {
            console.log(response)
            var result = await response.json()

            fn(result.records)
            console.log(result.records)
        })
        .then((result) => console.log(result))
        .catch((error) => console.log("error", error))
}