wepro01's questions

Eu uso paginação de cursor e quero exibir meus dados assim:

na parte inferior você pode ir para a página 1 até 29. Para calcular minhas páginas, tenho que contar todas as minhas linhas. Não é pesado toda vez contar todas as linhas? Talvez haja outra solução ou não consigo escapar dela para contar todas as linhas?

Eu também não uso deslocamento, então como posso fazer isso com paginação de cursor?

  SELECT 
      wp.id,
      wp.updated_wst,
      u.id as user_id, u.firstname, u.lastname, 
      c.id as company_id, c.company,
      wst.id as wst_id,
      wst.start_time,
      wst.end_time,
      wst.send_start_at,
      wst.send_end_at,
      wst.accepted_by,
      wst.accepted_at,
      l.name as location
  FROM workers_plan wp
  LEFT JOIN users u
      ON u.id = wp.user_id  
  LEFT JOIN clients c
      ON c.id = u.company_id
  LEFT JOIN workers_send_times wst
      ON wst.workers_plan_id = wp.id
  LEFT JOIN location_orders lo
      ON lo.id = wp.location_orders_id
  LEFT JOIN location l
      ON l.id = lo.location_id  
  WHERE lo.id = $1 AND wp.tenant_id = $2 AND (wp.id, wp.updated_wst) > ($3, $4)          
  GROUP BY wp.id, wst.id, u.id, c.id, l.name
  ORDER BY wp.id, wp.updated_wst LIMIT 50

Esse é meu código atual. Mas para exibir páginas, tenho que contar linhas e então calculá-las. Como eu faria isso (a melhor maneira de desempenho)?

Eu uso o React virtualizado para mostrar alguns itens. Meu problema agora é como posso adicionar margem para cada caixa para ter espaço entre cada caixa?

aqui está uma sandbox que você vê todas as caixas são delimitadas e não têm espaço. Como posso adicionar espaço?

https://codesandbox.io/p/sandbox/react-virtualized-responsive-card-grid-w-infinite-scroll-forked-8kmr8t?file=%2Fsrc%2FApp.tsx

e aqui está o meu código de lista

export function VirtualizedGrid<ItemType>({
  items,
  renderItem,
  itemHeight,
  itemMinWidth,
  numColumns,
  registerChild,
  onRowsRendered
}: VirtualizedGridProps<ItemType>): JSX.Element {
  const gridRef = useRef<any>(null);
  const containerRef = useRef<any>(null);
  const containerWidth = containerRef?.current?.clientWidth ?? 0;

  const windowSize = useWindowSize();

  useEffect(() => {
    gridRef.current?.recomputeGridSize();
  }, [windowSize]);

  function calculateColumnCount(width: number) {
    return Math.floor(width / itemMinWidth);
  }

  function calculateItemWidth(width: number, columnCount: number) {
    return width / columnCount;
  }

  const columnCount = numColumns ?? calculateColumnCount(containerWidth);
  const rowCount = Math.ceil(items.length / columnCount);
  const itemWidth = calculateItemWidth(containerWidth, columnCount);

  return (
    <Container ref={containerRef}>
      <WindowScroller>
        {({ height, isScrolling, onChildScroll, scrollTop }) => (
          <AutoSizer disableHeight>
            {() => {
              return (
                <Grid
                  // ref={gridRef}
                  ref={(el) => {
                    registerChild(el);
                    gridRef.current = el;
                  }}
                  autoHeight
                  columnCount={columnCount}
                  columnWidth={itemWidth}
                  width={containerWidth}
                  height={height}
                  rowCount={rowCount}
                  rowHeight={itemHeight}
                  isScrolling={isScrolling}
                  scrollTop={scrollTop}
                  onScroll={onChildScroll}
                  cellRenderer={(props: GridCellProps) => {
                    const fullProps: VirtualizedGridItemProps<ItemType> = {
                      ...props,
                      items,
                      columnCount: columnCount
                    };
                    return renderItem(fullProps);
                  }}
                />
              );
            }}
          </AutoSizer>
        )}
      </WindowScroller>
    </Container>
  );
}

Eu tenho uma windowSize de dependências. Eu também tenho um campo de entrada de pesquisa onde eu atualizo o estado de pesquisa. Se eu der uma dica em meu estado de pesquisa, meus sites são renderizados novamente, é claro, porque eu atualizo um estado. Mas eu tenho uma função encapsulada em useCallback, mas o problema é que ela é acionada. Então, por que ela é acionada? Ela só deve ser acionada quando a windowSize de dependência/estado for alterada.

  const [searchValue, setSearchValue] = useState<string>('');

  useEffect(() => {
    gridRef.current?.recomputeGridSize();
    console.log('TRIGGER WINDOW SIZE')
  }, [windowSize]);

  const calculateColumnCount = useCallback((width: number) => {
    console.log('CALLBACK FUNC')
    return Math.floor(width / itemMinWidth);
  }, [windowSize])

  const columnCount = numColumns ?? calculateColumnCount(containerWidth);

Coloquei apenas as coisas importantes no snipped. Se quiser, posso compartilhar o código completo.

o que estou fazendo errado?

Eu tenho um campo chamado time_range e é do tipo daterange.

minha mesa se chama feriados. Quero que todos os usuários estejam atualmente de férias. Como posso fazer isso com o tipo daterange?

Eu tentei isso, mas não funcionou.

SELECT time_range FROM holidays WHERE upper(time_range) > NOW() AND lower(time_range) < NOW()

Eu não quero escrever duas declarações como esta

if(filter_by_company) {
  query..
} else {
  query...
}

Portanto, selecione os usuários e eles estão em empresas e eu, o administrador, posso filtrar por ID da empresa. Como posso dizer que quando o filtro não existe, então não faça a condição?

SELECT * FROM users u
LEFT JOIN clients c
ON c.id = u.company_id
WHERE c.company_id = 'NAME' IF EXISTS ?? ELSE DONT ASK

como posso fazer isso?

Quero usar consultas invalidadas, mas elas não são buscadas nem acionadas.

Tenho um dashboard e estou na tela do usuário na navegação. Mudo uma ação na tela do usuário e quero atualizar o painel que está em outro arquivo.

usuário: (Aqui no onSuccess está o invalidateQueries que não é acionado)

  const {
    isPending,
    mutate
  } = useMutation({
    mutationKey: ["SETTINGS"],
    mutationFn: async (params: TMutateSettingsParam) => {
      console.log(params);
      const res = await axiosPrivate.post(`${URL}/auth/deleteAccountByAdmin`, params, {
        headers: headersJSON,
        withCredentials: true
      });

      const data: IReturnApi<null> = res.data;

      return data;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({queryKey: ['dashboard']})
      toast.success(data.message);
    },
    onError: (err: AxiosError<IReturnApi<IValidationError[]>>, _variables) => {
      if(err.response) {
        toast.error(err.response.data.message);
      } else {
        toast.error('Es ist ein Fehler aufgetreten. Bitte wenden Sie sich an den Support.');
      }
    }
  });

Aqui está meu app.tsx

export const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <App />
        </AuthProvider>
      </QueryClientProvider>
    </BrowserRouter>
  </React.StrictMode>,
)

E aqui está minha consulta no painel que desejo invalidar:

  const { 
    isLoading,
    isError,
    data,
    error
  } = useQuery({
    queryKey: ['dashboard'],
    refetchOnWindowFocus: false,
    queryFn: async () => {
      const res = await axiosPrivate.get(`${URL}/dashboard/getAll`, {
        headers: headersJSON,
        withCredentials: true
      });
    
      const data: IDashboardData = await res.data;
      return data;
    }
  });

O que estou fazendo errado ?