Desafio 02 - Upload de imagens\n💻 Sobre o desafio\nNesse desafio, você deverá criar uma aplicação para treinar o que aprendeu até agora no ReactJS\nEssa será uma aplicação onde o seu principal objetivo é adicionar alguns trechos de código para que a aplicação de upload de imagens funcione corretamente. Você vai receber uma aplicação com muitas funcionalidades e estilizações já implementadas. Ela deve realizar requisições para sua própria API Next.js que vai retornar os dados do FaunaDB (banco de dados) e do ImgBB (serviço de hospedagem de imagens). A interface implementada deve seguir o layout do Figma. Você terá acesso a 4 arquivos para implementar:\nInfinite Queries e Mutations com React Query;\nEnvio de formulário com React Hook Form;\nExibição de Modal e Toast com Chakra UI;\nEntre outros.\nA seguir veremos com mais detalhes o que e como precisa ser feito 🚀\nTemplate da aplicação\nPara realizar esse desafio, criamos para você esse modelo que você deve utilizar como um template do GitHub.\nO template está disponível na seguinte URL:\n\nrocketseat-education/ignite-template-reactjs-upload-de-imagens\n\nDica\n: Caso não saiba utilizar repositórios do GitHub como template, temos um guia em \nnosso FAQ\n.\nSe preparando para o desafio\nPara esse desafio, iremos reforçar alguns pontos e apresentar algumas libs para te ajudar no desenvolvimento.\nComeçando pelo tema do projeto: upload de imagens. Como o desenvolvimento do zero acarretaria em um projeto muito grande, fornecemos no template a maior parte do projeto já implementada para que você tenha que trabalhar apenas com 4 arquivos. A ideia é que nesses 4 arquivos você tenha um pouco de contato com os 3 principais pontos que queremos abordar nesse projeto: React Query, React Hook Form e Chakra UI.\nDessa forma, antes de ir diretamente para o código do desafio, explicaremos brevemente como cada um dos pontos abaixo são importantes para o desafio:\nReact Query;\nReact Hook Form;\nImgBB;\nFaunaDB;\nAPI do Next.js;\nFigma.\nVamos nessa?\nReact Query\nNa aplicação do desafio, você vai lidar com Infinite Queries, Mutations e Invalidações. Ao longo da seção \nO que devo editar na aplicação\n iremos mencionar quando cada uma dessas funcionalidades será utilizada, mas já vamos entender um pouquinho o papel de cada uma delas na nossa aplicação:\nInfinite Queries\n: Listagem que adiciona mais dados ao clicar em um botão de carregamento ou "infinite scroll". Ela será utilizada nessa aplicação para realizar o carregamento das imagens cadastradas no nosso banco. O carregamento foi implementado com um clique em um botão, não o "infinite scroll" (já fica aí a sugestão de um extra para o desafio).\nMutations\n: Diferente das queries do React Query que são utilizadas normalmente para a busca de dados, as mutations são responsáveis pela criação/edição/remoção de dados. Ela será utilizada nessa aplicação para o cadastro de uma nova imagem no banco.\nInvalidações\n: Utilizada para marcar manualmente uma query como \nstale\n e forçar a atualização dos dados. Ela será utilizada nessa aplicação para marcar a query de listagem de imagens como \nstale\n quando a mutation de cadastrar uma nova imagem ocorrer com sucesso.\nCaso queira se aprofundar nesse assunto, deixaremos aqui alguns links que podem te ajudar\n\nInfinite Queries\n\n\nMutations\n\n\nInvalidation from Mutations\n\nReact Hook Form\nNa aplicação do desafio, você vai precisar implementar o registro dos inputs do formulário de cadastro da imagem, as validações e enviar os erros desses inputs.\nDiferentemente do que foi visto na jornada, dessa vez você deve trabalhar com as validações diretamente no React Hook Form em vez de utilizar um \nresolver\n do Yup.\nCaso queira se aprofundar nesse assunto, deixaremos aqui um link que pode te ajudar:\n\nuseForm - register\n\nImgBB\nPara o armazenamento das imagens do desafio, decidimos utilizar uma solução de hospedagem de arquivos gratuita e de fácil utilização chamada ImgBB. Não é a melhor solução para esse tipo de hospedagem, mas é a mais fácil pra vocês conseguirem implementar.\nPortanto, para conseguir realizar os uploads das imagens para essa plataforma você precisar seguir 3 passos:\n\nCriar uma conta\n no ImgBB;\n\nCriar a sua chave\n da API;\nCopiar o valor dessa chave e colar no seu \n.env.local\n da seguinte forma:\nNEXT_PUBLIC_IMGBB_API_KEY=VALOR_DA_CHAVE_COPIADA\nCom esses três passos, você deve conseguir realizar o upload dessas imagens para o ImgBB normalmente. Caso tenha dúvidas, dê uma olhada no link abaixo:\n\nUpload Image - Free Image Hosting\n\nFaunaDB\nPara o armazenamento das informações das imagens (url, título e descrição), decidimos utilizar o FaunaDB já utilizado por você ao longo da jornada. Tudo que você precisa fazer é criar um banco no FaunaDB com um nome de sua preferência que \nprecisa\n ter uma coleção chamada \nimages\n. Com o banco e coleção criados, basta você criar e copiar a chave do banco no seu arquivo \n.env.local\n da seguinte forma:\nFAUNA_API_KEY=VALOR_DA_CHAVE_COPIADA\nDessa forma você deve conseguir realizar o cadastro das informações das imagens no FaunaDB. Caso tenha dúvidas, reassista as aulas sobre a configuração do FaunaDB ou dê uma olhada no link abaixo:\n\nWelcome to the Fauna documentation!\n\nAPI do Next.js\nNesse desafio toda a API do Next.js já foi implementada para você, porém vamos explicar rapidamente o que foi feito nessa etapa para que você entenda os dados que deve enviar e os dados que irá receber ao realizar as requisições.\nGET api/images\n: Essa é a rota utilizada para listagem das imagens. Ela rota recebe um \nquery param\n de nome \nafter\n que indica caso haja mais dados a serem carregados do FaunaDB. Por padrão, foi definido que a paginação da resposta do FaunaDB é de 6 dados. A resposta da API é um \njson\n com dois valores:\ndata\n: Dados formatados das imagens cadastradas no FaunaDB, exemplo:\n"data": [ { "title": "Doge", "description": "The best doge", "url": "", "ts": 1620222828340000, "id": "294961059684418048" }, ] \nafter\n: Referência da próxima página de dados caso tenham mais imagens a serem carregadas do FaunaDB. Caso contrário, retorna \nnull\n.\nPOST api/images\n: Essa é a rota utilizada para cadastro das informações da imagem (url, título e descrição) no FaunaDB. Tudo que você precisa enviar são esses três dados pelo \nbody\n que o cadastro irá ocorrer e, caso dê tudo certo, retornará uma mensagem \nsuccess: true\n.\nFigma\nComo a maior parte do layout do figma já foi implementada, o seu foco nesse desafio deve ser implementar o grid da listagem de imagens e o Modal ao clicar na imagem desejada.\nAcessando o layout do app\nPara duplicar os layouts, basta você clicar no link abaixo. Ele adicionará o Layout à sua dashboard do Figma automaticamente, como uma cópia.\n\nDesafio 2 Módulo 4 ReactJS\n\nO que devo editar na aplicação?\nCom o template já clonado, as depêndencias instaladas e o Prismic já configurado, você deve completar onde não possui código com o código para atingir os objetivos de cada teste. Os documentos que devem ser editados são:\n\nsrc/pages/index.tsx\n;\n\nsrc/components/Form/FormAddImage.tsx\n;\n\nsrc/components/Modal/ViewImage.tsx\n;\n\nsrc/components/CardList.tsx\n.\npages/index.tsx\n\nhttps://i.ibb.co/vDFrCcr/Home.png\n\nEsse arquivo, por ser a única página do seu app, é o responsável direto ou indireto pela renderização de toda a sua aplicação.\nA primeira coisa a se fazer é utilizar corretamente a Infinite Query. Portanto, no \nuseInfiniteQuery\n você precisa montar duas seções principais:\nUma função que recebe como parâmetro um objeto que contêm a propriedade \npageParam\n (caso o parâmetro não exista, utilize como \ndefault\n o valor \nnull\n). Esse parâmetro é utilizado no momento da requisição para chamarmos uma próxima página. Já no corpo da função, você deve realizar uma requisição GET para a rota \n/api/images\n da API do Next.js informando como um \nquery param\n de nome \nafter\n o valor do \npageParam\n e retornar os dados recebidos.\nUma função chamada \ngetNextPageParam\n que recebe como parâmetro o resultado da última requisição. Se o valor \nafter\n retornado na última requisição existir, então você deve retornar esse valor, caso contrário retorne \nnull\n.\n\nOutro passo importante a se fazer é formatar os dados recebidos do React Query da forma que a aplicação espera. Portanto, no \nformattedData\n é preciso que você utilize o \nmap\n e o \nflat\n para que você transforme o \ndata\n (um objeto com mais informações do que o seu \nCardList.tsx\n precisa) em um array de objetos apenas com as informações necessárias. Abaixo segue um exemplo de como fica antes e após a conversão.\n{ "pages": [ { "data": [ { "title": "Doge", "description": "The best doge", "url": "", "ts": 1620222828340000, "id": "294961059684418048" }, { "title": "Cachorrinho gif", "description": "A Gracie é top", "url": "", "ts": 1620222856980000, "id": "295991055792210435" }, { "title": "React", "description": "Dan Abramov", "url": "", "ts": 1620223108460000, "id": "295991069654385154" }, { "title": "Ignite", "description": "Wallpaper Celular", "url": "", "ts": 1620223119610000, "id": "295991085899973123" }, { "title": "Ignite", "description": "Wallpaper PC 4k", "url": "", "ts": 1620223133800000, "id": "295991107279389188" }, { "title": "Paisagem", "description": "Sunset", "url": "", "ts": 1620223149390000, "id": "295991128736399874" } ], "after": "295991160078336512" } ], "pageParams": [ null ] } \n[ { "title": "Doge", "description": "The best doge", "url": "", "ts": 1620222828340000, "id": "294961059684418048" }, { "title": "Cachorrinho gif", "description": "A Gracie é top", "url": "", "ts": 1620222856980000, "id": "295991055792210435" }, { "title": "React", "description": "Dan Abramov", "url": "", "ts": 1620223108460000, "id": "295991069654385154" }, { "title": "Ignite", "description": "Wallpaper Celular", "url": "", "ts": 1620223119610000, "id": "295991085899973123" }, { "title": "Ignite", "description": "Wallpaper PC 4k", "url": "", "ts": 1620223133800000, "id": "295991107279389188" }, { "title": "Paisagem", "description": "Sunset", "url": "", "ts": 1620223149390000, "id": "295991128736399874" } ] \nEm seguida, com a Infinite Query configurada e os dados formatados, você deve focar na renderização do seu app. Serão três renderizações diferentes:\nQuando o React Query estiver carregando os dados\n: Nesse caso você deve utilizar o \nisLoading\n para ajudar a renderizar o componente \nLoading.tsx\n no momento adequado.\nQuando o React Query tiver falhado ao carregar os dados\n: Nesse caso você deve utilizar o \nisError\n para ajudar a renderizar o componente \nError.tsx\n no momento adequado.\nQuando o React Query tiver carregado os dados com sucesso\n: Nesse caso, quando o app não cair em uma das duas renderizações anteriores, será considerado a renderização de sucesso. No caso desse app, é o \nreturn\n que já deixamos parcialmente montado para você e que explicaremos com mais detalhes abaixo o que falta ser implementado.\nNo caso dos dados terem sido carregados com sucesso, você deve renderizar o Header da aplicação e as imagens cadastradas no FaunaDB, mas não todas de uma vez.\nSerão exibidos 6 cards por vez, caso tenha mais imagens para serem carregadas, um botão escrito \nCarregar mais\n deve ser exibido. Caso contrário, o botão não deve ser renderizado. Além disso, ao clicar no botão \nCarregar mais\n é preciso que ele altere a mensagem do texto para \nCarregando...\n enquanto o React Query realiza a busca dos novos dados. Para que essas funcionalidades do botão deem certo, utilize o \nhasNextPage\n, \nisFetchingNextPage\n e \nfetchNextPage\n do React Query.\n\ncomponents/CardList.tsx\n\nhttps://i.ibb.co/vDFrCcr/Home.png\n\nEsse arquivo é responsável pela exibição do grid de cards e o controle do Modal de exibição da imagem selecionada.\nOs cards devem ser renderizados em um grid de 3 colunas com um espaçamento de 40px. Utilize o componente \nCard.tsx\n para a renderização dos cards.\nAo clicar no card, é preciso abrir a modal \nViewImage.tsx\n. Utilize a prop \nviewImage\n do \nCard.tsx\n para disparar uma função, que recebe como argumento a url da imagem, e irá lidar com a abertura do Modal \nViewImage.tsx\n e o envio da url da imagem desejada.\ncomponents/Modal/ViewImage.tsx\n\nhttps://i.ibb.co/615PvJd/Form.png\n\nNesse modal serão exibidos uma imagem e o link.\nEssa imagem deve ter como largura máxima \n900px\n e como altura máxima \n600px\n, mantendo a proporção da imagem dependendo de qual dessas duas medidas chegar no valor máximo primeiro.\nPor exemplo, um wallpaper de celular tem a altura muito maior que a largura, já um wallpaper de um monitor widescreen tem a largura muito maior que a altura. Portanto, um exemplo prático desse dois casos seria os prints abaixo:\n \nEm relação ao link, ele deve ser renderizado abaixo da imagem com o texto \nAbrir original\n que aponta para o endereço onde a imagem está hospedada no ImgBB. Ao clicar no link, ele deve abrir uma nova aba no navegador\n \nNesse arquivo, você tem quatro etapas principais que precisa implementar:\nAs validações do formulário;\nA \nmutation\n do React Query;\nA função \nonSubmit\n;\nO registro dos inputs no React Hook Form.\nComeçando pelas validações, você encontrará um objeto \nformValidations\n com as propriedades \nimage\n, \ntitle\n e \ndescription\n. Essas propriedades representam cada um dos três inputs do formulário e é dentro delas que você irá declarar as validações desses inputs. As validações são:\nimage:\nrequired\n: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser \nArquivo obrigatório\nvalidate\n: Como as outras duas validações são customizadas, ou seja, não tem por padrão no React Hook Form, iremos criá-las manualmente com o \nvalidate\n.\n\nlessThan10MB\n: O tamanho do arquivo não pode exceder 10 MB. Utilize a propriedade \nsize\n do arquivo de imagem para realizar a comparação. A mensagem de erro deve ser \nO arquivo deve ser menor que 10MB\n.\nacceptedFormats\n: O arquivo enviado pelo usuário deve ser um dos três tipos: image/jpeg, image/png ou image/gif. Utilize a propriedade \ntype\n do arquivo de imagem e um \nregex\n com os tipos aceitos para realizar a comparação. A mensagem de erro deve ser \nSomente são aceitos arquivos PNG, JPEG e GIF\n.\ntitle:\nrequired\n: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser \nTítulo obrigatório\nminLength\n: O tamanho mínimo da string deve ser de 2 caracteres. A mensagem de erro deve ser \nMínimo de 2 caracteres\n.\nmaxLength\n: O tamanho máximo da string deve ser de 20 caracteres. A mensagem de erro deve ser \nMáximo de 20 caracteres\n.\ndescription:\nrequired\n: Campo obrigatório, não pode estar vazio no momento do envio. A mensagem de erro deve ser \nDescrição obrigatória\nmaxLength\n: O tamanho máximo da string deve ser de 65 caracteres. A mensagem de erro deve ser \nMáximo de 65 caracteres\n.\nAgora que você possui as validações criadas, é hora de registrar os seus inputs no React Hook Form. Portanto, em cada um dos seus três inputs, é preciso que você envie\nUma propriedade \nregister\n que possui o nome do seu input como o primeiro parâmetro e a validação desse input como segundo parâmetro.\nUma propriedade \nerror\n na qual você deve mandar o erro referente ao seu input. Utilize o \nerrors\n obtido na desestruturação do \nformState\n.\nOutro etapa que precisa ser implementada nesse arquivo é a \nmutation\n do React Query. Essa \nmutation\n será responsável pelo cadastro da nova imagem no FaunaDB. Portanto, como primeiro argumento do \nuseMutation\n, você deve implementar uma função que recebe como parâmetro os dados do formulário e no seu corpo realizar uma requisição POST para a rota \napi/images\n enviando os dados recebidos. Já como segundo parâmetro, você irá utilizar a propriedade \nonSuccess\n da \nmutation\n para que, caso ela ocorra com sucesso, invalidade a \nquery\n que listou as imagens, forçando o React Query a atualizar esses dados. Para isso, trabalhe com o método \ninvalidateQueries\n.\n\nPor fim, é preciso implementar a função \nonSubmit\n. Essa função recebe como argumento os dados do formulário de cadastro da imagem. No corpo da função, você encontrará três seções:\ntry\n: Nesse trecho você deve se concentrar em três etapas:\nVerificar se o \nimageUrl\n existe. Se não existir, mostrar um \ntoast\n de informação com o título \nImagem não adicionada\n e descrição \nÉ preciso adicionar e aguardar o upload de uma imagem antes de realizar o cadastro.\n e sair imediatamente da função. Caso exista, basta seguir para as próximas etapas.\nExecutar a \nmutation\n utilizando o \nmutateAsync\n para pode aguardar o resultado da Promisse.\nMostrar um \ntoast\n de sucesso com o título \nImagem cadastrada\n e descrição \nSua imagem foi cadastrada com sucesso.\ncatch\n: Nesse trecho você deve mostrar um \ntoast\n de erro com o título \nFalha no cadastro\n e descrição \nOcorreu um erro ao tentar cadastrar a sua imagem.\nfinally\n: Nesse trecho você deve limpar os campos do form, os estados do componente e fechar o modal.\nEspecificação dos testes\nEm cada teste, você encontrará uma breve descrição do que sua aplicação deve cumprir para que o teste passe.\n\nPara esse desafio, temos os seguintes testes:\n\nTestes pages/Home.spec.tsx\n

Projetos