How to use the react-static.useSiteData function in react-static

To help you get started, we’ve selected a few react-static examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github 1productaweek / webframe / src / components / ScreenModal.js View on Github external
function ScreenModal ({ isOpen, onCancel, product, src, name }) {
  const { DOWNLOAD_URL } = useSiteData()
  const user = useFirebaseAuth()
  const showModal = useModal(SignupModal)

  const ref = user ? db.collection('users').doc(user.uid).collection('screens').doc(name) : null
  const doc = useFirebaseSync(ref)
  const isSaved = ref && doc && doc.data()

  const onToggle = async () => {
    const user =  firebase.auth().currentUser
    if (!user) return showModal()
    if (isSaved) return ref.delete()
    await ref.set({
      active: true,
      name,
    }).catch(console.error)
    await db.collection('screens').doc(user.uid).set()
github 1productaweek / webframe / src / containers / Dashboard.js View on Github external
function Dashboard () {
  const { SRC_URL } = useSiteData()
  const user =  firebase.auth().currentUser
  const ref = db.collection('users').doc(user.uid).collection('screens')
  const collection = useFirebaseSync(ref)
  const items = [] 
  if (collection) {
    collection.forEach(doc => {
      const name = doc.data().name
      const [productId] = name.split('.')[0].split('-')
      const lookup = products[productId] || {}
      items.push({
        name,
        product: { id: productId, ...lookup },
        src: `${SRC_URL}/${name}`,
      })
    })
  }
github 1productaweek / webframe / src / pages / categories.js View on Github external
export default function Categories () {
  const { categories } = useRouteData()
  const { CACHE_URL } = useSiteData()
  
  return (
    <Layout>
      <Seo title='Categories' />
      <h2>Categories</h2>
      <div css={css`margin-top: 1em;`}>
        <Row gutter={2}>
          {(categories || []).map(cat => (
            <Col gutter={2} col={12} sm={4} mb={2} key={cat.id}>
              <ImageListItem
                title={cat.name}
                src={cat.screen ? `${CACHE_URL}/1200x/${cat.screen.src}` : ''}
                to={`/categories/${cat.id}`}
              />
            </Col>
          ))}
github 1productaweek / webframe / src / components / List.js View on Github external
function List ({ items }) {
  const { CACHE_URL } = useSiteData()
  const showModal = useModal(ScreenModal)

  const itemsEl = (items || []).map(({ src, name, maxHeight = (500 + 200 * Math.random()), product }, i) => (
    <LazyLoad key={src || i} height={200} offset={[0, 400]} once resize>
      <div 
        onClick={() => showModal({ src, name, product })}
        css={styles.screen} 
        style={{ minHeight: 50, maxHeight }}>
        <img src={`${CACHE_URL}/1200x/${src}`} alt={name} />
      </div>
    </LazyLoad>
  ))
  return (
    <Row gutter={2}>
      <Col col={12} sm={6} gutter={2} css={css`max-width: 600px;`}>
        {itemsEl.filter((_, i) => i % 2 === 0)}
github 1productaweek / webframe / src / components / SideNav.js View on Github external
function SideNav () {
  const { categories, products } = useSiteData()
  const categoriesEl = categories.map(({ id, name }) => {
    return (
      <div key={id} css={styles.links}>
        <NavLink to={`/categories/${id}`}>
          {name}
        </NavLink>
      </div>
      
    )
  })
  const productsEl = products.map(({ id, name }) => {
    return (
      <div key={id} css={styles.links}>
        <NavLink to={`/products/${id}`}>
          {name}
        </NavLink>
github 1productaweek / webframe / src / components / Seo.js View on Github external
function SEO ({ description, lang, meta, title }) {
  const { siteTitle, siteImage, metaDescription, social } = useSiteData()

  const desc = description || metaDescription

  const image = siteImage ? [{
    property: `og:image`,
    content: siteImage,
  }, {
    name: `twitter:image`,
    content: siteImage,
  }] : []

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}