MyRequests

import React from 'react';
import { AuthCheck, useUser, useFirestore, useFirestoreCollection} from 'reactfire';
import { Heading } from '@chakra-ui/core';

import { Container, MainLayout, NeedSignInAlert } from '../../components';

const MyRequests = () => {
  const user = useUser();
  const requestsRef = useFirestore().collection('material-requests').where('userId', '==',user.uid);
  const requests = useFirestoreCollection(requestsRef);
  const collection = [];

  requests.forEach(data => {
    collection.push(data.data());
  });

  return (
    <MainLayout>
      <Container>
        <Heading as="h1" size="lg" fontSize={['24px', '32px']} mb={2}>
         TEXT
        </Heading>
        <Heading
          as="h2"
          size="lg"
          mb={[4, 6]}
          fontSize={['18px', '24px']}
          color="gray.500"
        >
        </Heading>
        <AuthCheck
          fallback={
            <NeedSignInAlert title="Identifícate para solicitar material" />
          }
        >
        </AuthCheck>
      </Container>
    </MainLayout>
  );
};

export default MyRequests;