Feat/exposicoes firebase

[Joao-Pedro-P-Holanda]

Feature Exposicoes Firebase

Resolve

resolve #168

Descrição

Adicionando métodos de crud do firebase para exposições

Adições

Alterações

Remoções

Verificando

Desenvolvedor

• Teste de componente/e2e implementados

Revisor

• Criar

  • Map com os itens e coleções do acervo deve utilizar apenas o id (último segmento do caminho) em ambos

• Get

  • Itens em uma exposicao buscada com o metodo get devem possuir as suas imagens
  • Exposicoes buscadas com metodo list devem possuir suas imagens (itens do acervo são guardados apenas como referências)

• Update

  • Atualizar uma exposicao que possui uma imagem para uma sem imagem deve remover do storage
  • Atualizar uma exposicao com uma imagem diferente da anterior deve remover a antiga do storage e adicionar a nova
  • Atualizar uma exposicao sem imagem para uma com imagem deve adicionar ao storage

• Delete

  • Deletar uma exposicao com imagem deve removê-la do storage

[Joao-Pedro-P-Holanda]

Código usado para testar localmente:

import { useEffect, useState } from "react";
import { Colecao } from "../interfaces/Colecao";
import Exposicao from "../interfaces/Exposicao";
import { ClientColecoesFirebase } from "../Utils/colecaoFirebase";
import { ClientExposicaoFirebase } from "../Utils/exposicaoFirebase";
import { adicionarItemAcervo } from "../Utils/itemAcervoFirebase";

const Home = () => {
  const clientColecao = new ClientColecoesFirebase()
  const [colecoes, setColecoes] = useState<Colecao[]>([])
  const [addedCollection, setAddedCollection] = useState<number>(0)
  useEffect(() => {
    clientColecao.getColecoes().then((colecoes) => {
      setColecoes(colecoes)
    })
  }, [addedCollection])

  const client = new ClientExposicaoFirebase();
  return (
    <div style={{ padding: 150 }}>
      <div style={{ display: 'flex', flexDirection: "column" }}>
        <h4>Adicionar coleções e itens de teste</h4>
        <div style={{ display: 'flex' }}>
          <label htmlFor="file-input">Selecionar imagem</label>
          <input type="file" id='file-input' />
        </div>
        <button onClick={async () => {
          const colecao = {
            nome: `Coleção teste ${addedCollection}`,
            descricao: "Coleção de teste",
            privado: false,
          } as Colecao
          console.log(await clientColecao.adicionarColecao(colecao))
          setAddedCollection(addedCollection + 1)
        }}>Adicionar Coleção</button>
        <button onClick={
          async () => {
            const checkbox = document.getElementById('privacy') as HTMLInputElement;
            for (const colecao of colecoes) {
              const itemTeste = {
                nome: `Item teste ${colecao.nome}`,
                descricao: "item de teste",
                curiosidades: "curiosidades",
                dataDoacao: new Date(),
                colecao: colecao.nome,
                doacao: false,
                doacaoAnonima: false,
                nomeDoador: "",
                telefoneDoador: "",
                privado: checkbox.checked,
                imagens: [],
              };
              adicionarItemAcervo(itemTeste, colecao)
            }
          }}>Adicionar Itens de teste nas coleções selecionadas</button>
        <div style={{ display: "flex", gap: 5 }}>

          {colecoes.map((colecao) => (
            <p key={colecao.id}>
              {colecao.nome}
            </p>
          ))}
        </div>
        <div style={{ display: "flex" }}>
          <input type='checkbox' id='privacy'></input>
          <label htmlFor="privacy">Privacidade dos itens</label>
        </div>
        <hr style={{ height: 10, width: '100%', background: "#000" }} />
        <div>
          <h4>Métodos das exposições (necessário mudar itens hardcoded)</h4>
          <button onClick={async () => {
            const fileInput = document.getElementById("file-input") as HTMLInputElement
            const imagem = fileInput?.files[0]
            const exposicao = {
              id: "apsjfdaopfpas",
              nome: "Exposição teste",
              descricao: "Exposição de teste",
              privado: false,
              permanente: false,
              dataInicio: new Date(),
              dataFim: new Date(),
              itensPorColecao: new Map(),
              dataCriacao: new Date(),
            } as Exposicao
            if (imagem) {
              exposicao.imagem = {
                src: imagem,
                title: imagem.name,
                alt: "texto alternativo"
              }
            }
            try {
              await client.adicionarExposicao(exposicao);

            }
            catch (e) {
              console.log(e)
            }

          }}>Adicionar exposição com os itens selecionados</button>
          <button onClick={async () => {
            console.log(await client.listarExposicoes())
          }}>Listar todas as exposições</button>
          <button onClick={async () => {
            const exposicao = await client.getExposicao("/exposicoes/publico/lista/pPZeDt8kIiHpdXqVflz8", true);
            console.log(exposicao);
          }}>Buscar exposição pública</button>
          <button>Buscar exposição privada</button>
          <button
            onClick={async () => {

              const exposicao = {
                id: "/exposicoes/publico/lista/UDAcGzUs6ImuEwth9fsd",
                nome: "Exposição teste",
                descricao: "descrição atualizada",
                privado: true,
                permanente: false,
                dataInicio: new Date(),
                dataFim: new Date(),
                itensPorColecao: new Map(),
                dataCriacao: new Date()
              }
              await client.atualizarExposicao(exposicao)
              console.log(exposicao)
            }}
          >Atualizar exposição mudando a privacidade</button>
          <button onClick={async () => {
            const fileInput = document.getElementById("file-input") as HTMLInputElement
            const imagem = fileInput?.files[0]

            const exposicao = {
              id: "/exposicoes/publico/lista/ifFOBvR3qGyNnd9H9Rpg",
              nome: "Exposição teste",
              descricao: "descrição atualizada",
              privado: false,
              permanente: false,
              dataInicio: new Date(),
              dataFim: new Date(),
              itensPorColecao: new Map(),
              dataCriacao: new Date()
            } as Exposicao
            // remover comentario para incluir a imagem selecionada no input
            // if (imagem) {
            //   exposicao.imagem = {
            //     src: imagem,
            //     title: imagem.name,
            //     alt: "texto alternativo"
            //   }
            // }
            await client.atualizarExposicao(exposicao)
            console.log(exposicao)
          }}>Atualizar exposição sem mudar a privacidade</button>
          <button onClick={async () => {
            const id = "/exposicoes/publico/lista/K0ceJTH3xMjnWbKbsJvW"
            await client.deletarExposicao(id)
          }}>Remover exposição</button>
        </div>
      </div >
    </div >
  );
};

export default Home;

[Francisco-Paulino-Arruda-Filho]

Erro ao mover exposição

[Joao-Pedro-P-Holanda]

Imagem não carregou

[Francisco-Paulino-Arruda-Filho]