{"size": 1685, "ext": "js", "max_stars_repo_path": "src/components/Products/Products.js", "max_stars_repo_name": "raydot/gatsby-ecomm-tut", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Products/Products.js", "max_issues_repo_name": "raydot/gatsby-ecomm-tut", "max_issues_repo_issues_event_min_datetime": "2021-03-09T13:43:44.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T16:04:07.000Z", "max_forks_repo_path": "src/components/Products/Products.js", "max_forks_repo_name": "raydot/gatsby-ecomm-tut", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 29.5614035088, "max_line_length": 107, "alphanum_fraction": 0.3970326409}
import React, { Component } from "react"
import { graphql, StaticQuery } from "gatsby"
import ProductsCard from './ProductsCard'
//import { symlink } from "fs";

const containerStyles = {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    padding: '1rem 0 1rem 0',
}

class Products extends Component {
    // publishible key
    state = {
        stripe: window.Stripe('pk_live_JiuW8AAXc0SFjR3eWDnqV45d00xmHijzzA', {
            betas: ['checkout_beta_4'],
        }),
    }

    // THE ONLY ONE THAT MATTERS
    // prod_FZjigeUz63fUTk

    render() {
        return (
            <StaticQuery
                query={graphql`
                    query ActiveProductsQuery {
                        allStripeProduct(filter: {metadata: {is_live: {eq: "true"}}}) {
                            edges {
                                node {
                                    name
                                    active
                                    id
                                    metadata {
                                        price
                                    }
                                }
                            }
                        }
                    }
                `}

                render={({ products }) => (
                    <div style={containerStyles}>
                        {products.edges.map(({ node: product }) => (
                            <ProductCard key={product.id} name={product.name} stripe={this.state.stripe} />
                        ))}
                    </div>
                )}
            />
        )
    }
}

export default Products