RobertW's questions

Eu fiz uma pergunta antes, mas meio que errei, então estou reformulando-a novamente aqui.

Tenho 3 tabelas relacionadas:

• media
• media_tags(mesa de bridge)
• tags

Aqui está o código que tenho até agora:

SELECT m.media_id, m.name, array_agg(distinct t.tag) filter (WHERE t.date_deleted IS NULL) AS tags 
FROM media m 
LEFT JOIN media_tags mt USING (media_id) 
LEFT JOIN tags t USING (tag_id)
WHERE m.date_deleted IS NULL AND t.tag = ANY(array['dog','cat'])
GROUP BY m.media_id, m.name

Isso está chegando muito perto do que eu quero, mas não está muito correto. Imagine que há esses registros de mídia:

• Mídia 1 com estas tags: cão, pássaro, ovelha, cavalo
• Mídia 2 com estas tags: cão, gato, vaca
• Mídia 3 com estas tags: gato, cavalo, coelho
• Mídia 4 com estas tags: vaca, cavalo, ovelha

Minha consulta acima retorna Media 1, 2 e 3, mas as tags mostradas consistem apenas em dog& cat. O que eu quero é que tagssempre contenha TODAS as suas tags se houver alguma correspondência com qualquer um dos valores na matriz. Então, se ['dog','cat'] estiverem na consulta, então Media 1, 2 e 3 devem ser retornados com todas as suas respectivas tags, mas Media 4 não deve porque não há correspondência.

Sinto que estou bem perto de uma solução, mas não consigo descobri-la.

Eu tenho uma photostabela, uma tagstabela e uma tabela de bridge chamada photos_tags. Imagine que há uma foto que foi marcada com dog, cat, e bird. Isso significa que haverá 1 linha em photos, 1 linha em tags, e 3 linhas em photos_tags.

Estou tentando escrever uma declaração SQL para buscar todas as 3 tags se uma delas corresponder. Cheguei até aqui:

select distinct p.photo_id, t.tag from photos p
join photos_tags pt using (photo_id)
join tags t on pt.tag_id = t.tag_id and t.tag = 'dog'

Mas isso só retorna as linhas onde tag = 'dog'.

Existe alguma maneira de realizar o que estou tentando fazer?

Estou construindo meu próprio Tablecomponente em React. Está indo muito bem, mas encontrei um obstáculo.

Minha abordagem foi passar um objeto de modelo, consistindo de um array de definições de coluna, junto com um array de objetos que representa os dados a serem exibidos. Como Tabletem que ser genérico, o número de colunas e linhas pode variar em cada caso.

Para estilizá-lo, optei por usar display: grid. Isso funcionou bem, exceto que agora não consigo descobrir como definir explicitamente a largura de uma determinada coluna. Em outras palavras, ao renderizar, quero poder definir explicitamente a largura de uma coluna.

Aqui está meu código básico de layout SCSS:

.main {
  width: 100%;

  header {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    
    div {
      padding: 5px;
      margin-left: unset;
    }
  }

  .table {
    .row {
      display: grid;
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
      height: fit-content;
      align-items: center;
      
      .cell {
        padding: 2px 5px;
      }
    }
  } 
}

Meu código React se parece com isso:

  return (
    <div className={styles.main} style={style}>
      <header>
        {getTemplateColumns().map(item => <div style={{ width: '75px' }}>{getHeaderCell(item)}</div>)}
      </header>

      <div className={styles.table}>
        {rows.map((row, rowIdx) => {
          return (
            <div className={styles.row}>
              {getTemplateColumns().map(item => 
                <div className={styles.cell} style={{ width: '75px' }}>
                  {getTableCell(item, rowIdx)}
                </div>)
              }
            </div>
          )
        })}
      </div>
    </div>
  );

Você pode ver no código logo acima que estou experimentando tentar definir explicitamente a largura de uma coluna, mas não está tendo efeito. Imagino que seja porque o gridlayout não permite isso.

Existe uma maneira de fazer isso ou devo simplesmente seguir o método antigo e implementar table, tr, td, etc., onde tenho controle total sobre as larguras das colunas?

Estou construindo um aplicativo com React e Typescript no cliente e ExpressJS e Typescript no servidor. Quero garantir que estou lançando erros corretamente no servidor e lidando com eles adequadamente no cliente.

Aqui está uma versão resumida de um método de rota que preciso usar para criar um MediaSet (pense em "pasta"):

const createMediaSet = async (req: Request, res: Response) => {
  const values = req.body;

  const name: string = values.name + '_'; // '_' only added to force error
  const parentId: string | null = values.parent_id;

  try {
    if (!FileFolderNameRegex.test(name)) {
      throw new Error(`Mediaset name '${name}' is invalid!`);
    }

    const results = await createMediaSetRecord(name, parentId);
    const media_set_id = results.rows[0].media_set_id;
    res.status(StatusCode.SuccessCreated).json({media_set_id: media_set_id});
  } catch (error) {
    console.error(error);
    res.status(StatusCode.ErrorBadRequest).send({ status: false, message: String(error) });
  }
};

Então, no cliente, aqui está o código resumido para lidar com a solicitação assíncrona acima:

React.useEffect(() => {
  if (!isProcessing) {
    if (data) {
      switch (mode) {
       // ... much processing here ...
      }
    }

    if (error) {
      console.error(error.message);
      alert(`Something went wrong! - ${error.response.data.message}`);
    }
  }
}, [isProcessing, data, error]);

Minhas perguntas são duplas:

1. A maneira como estou lidando com o código de erro no servidor está correta?
2. A maneira como estou lidando com um possível erro no cliente está correta? Francamente, error.response.data.messageparece estranho, mas me dá a mensagem de erro que enviei do servidor.