Framer Airtable API

AirTableApi.tsx

import { ComponentType, useEffect } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
import Furniture_card from "../canvasComponent/em5g0kT7d"
import _ from "lodash"
import { Color, motion } from "framer"

// Learn more: https://www.framer.com/docs/guides/overrides/
// Uses this template: https://www.airtable.com/templates/featured/expZvMLT9L6c4yeBX/product-catalog

const useStore = createStore({
    background: "#0099FF",
    data: [],
    searchResults: "",
    colors: {
        Bookshelves: "#f99de2",
        Chairs: "#ffd66e",
        Lighting: "#9CC7FF",
        Rugs: "#FFA981",
        Sofas: "#CDB0FF",
        Tables: "#FF9EB7",
    },
})

export function noResults(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        const variants = {
            visible: {
                opacity: 1,
                scale: 1,
                display: "block",
                transition: { duration: 1 },
            },
            hidden: {
                opacity: 0,
                scale: 0.5,
                transition: { duration: 1 },
                transitionEnd: { display: "none" },
            },
        }

        const getState = () => {
            // initially we don't show it
            if (store.data.length == 0) {
                return "hidden"
            }

            var results = _.find(store.data, (o) => {
                return o["fields"]["Type"].indexOf(store.searchResults) != -1
            })

            if (results == undefined) {
                return "visible"
            } else {
                return "hidden"
            }
        }

        return (
            <Component
                {...props}
                initial={"hidden"}
                variants={variants}
                animate={getState()}
            />
        )
    }
}

export function callAPI(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        var myHeaders = new Headers()
        myHeaders.append("Authorization", "Bearer keyxxxxxxxxx") // use your own key
        myHeaders.append("Cookie", "brw=brwQnBRCRtBcg8e8z")

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

        function callAPI() {
            fetch(
                "https://api.airtable.com/v0/appaLrCPRLeWMu3YP/Furniture?&view=All%20furniture", // use your own Database
                requestOptions
            )
                .then(async (response) => {
                    console.log(response)
                    var result = await response.json()

                    setStore({
                        data: result.records,
                    })
                    console.log(result.records)
                })
                .then((result) => console.log(result))
                .catch((error) => console.log("error", error))
        }

        useEffect(() => {
            callAPI()
        }, [])

        return <Component {...props} />
    }
}

export function search(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        const filterResults = (value) => {
            console.log(value)
            var results = _.filter(store.data, (o) => {
                return o["fields"]["Type"].indexOf(value) != -1
            })

            setStore({ searchResults: results })
        }

        const storeSearch = (value) => {
            setStore({ searchResults: value })
        }

        return <Component {...props} onChange={storeSearch} />
    }
}

export function makeCards(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        const getColor = (type) => {
            console.log(store.colors, type, store.colors[type])
            return Color(store.colors[type])
        }

        const variants = {
            visible: {
                opacity: 1,
                scale: 1,
                display: "block",
                transition: { duration: 1 },
            },
            hidden: {
                opacity: 0,
                scale: 0.5,
                transition: { duration: 1 },
                transitionEnd: { display: "none" },
            },
        }

        const getState = (type) => {
            // initial and all shown state
            if (store.searchResults == "") {
                return "visible"
            }

            if (type.indexOf(store.searchResults) != -1) {
                console.log("returning visible")
                return "visible"
            } else {
                console.log("returning hidden ", store.searchResults)
                return "hidden"
            }
        }

        return (
            <Component
                {...props}
                style={{
                    ...props.style,
                    height: "auto",
                    display: "flex",
                    flexFlow: "row wrap",
                    alignContent: "flex-end",
                    paddingLeft: 50,
                    paddingRight: 50,
                    gap: 20,
                    marginBottom: "20px",
                }}
            >
                {store.data.map((item, index) => {
                    return (
                        <motion.div
                            layout
                            initial={"visible"}
                            animate={getState(item["fields"]["Type"])}
                            variants={variants}
                        >
                            <Furniture_card
                                image={item["fields"]["Images"][0].url}
                                type={item["fields"]["Type"]}
                                name={item["fields"]["Name"]}
                                typeColor={Color(
                                    store.colors[item["fields"]["Type"]]
                                )}
                                type_color={getColor(item["fields"]["Type"])}
                                id={item["id"]}
                            />
                        </motion.div>
                    )
                })}
            </Component>
        )
    }
}