Leadster - Melhorias

Links Importantes:

Organização

Na primeira versão, estava perdido na organização do projeto. Agora, adotei um método eficaz.

Separar arquivos em componentes, hooks, helpers, utilitários e constantes tornou o código mais limpo.

Por exemplo, a galeria de vídeo tem um arquivo separado só para constantes, ao invés de ter os valores hard coded:

export const FILTER_OPTIONS = [
  { value: 'todos', title: 'Todos' },
  { value: 'agencias', title: 'Agências' },
  { value: 'chatbot', title: 'Chatbot' },
  { value: 'marketing-digital', title: 'Marketing' },
  { value: 'geracao-de-leads', title: 'Geração de Leads' },
  { value: 'midia-paga', title: 'Mídia Paga' },
] as const;

export const SORT_OPTIONS = [
  { value: 'date', title: 'Data de Publicação' },
  { value: 'views', title: 'Relevância' },
] as const;

export const VIDEOS_PER_PAGE = 9;

export const GALLERY_ID = 'galeria';

export const QUERY_STRINGS = {
  CATEGORY_FILTER: 'cat',
  PAGE: 'page',
  SORT_BY: 'sortBy',
  VIDEO: 'videoID',
};

export const CATEGORY_FILTER_DEFAULT = 'todos';
export const SORT_BY_DEFAULT = 'date';
export const PAGE_DEFAULT = 1;

Menos states

Percebi alguns dados não precisam ser reativos e agora os filtros da galeria são obtidos através de query strings, por exemplo:

function getQueryStrings() {
  const categoryFilter = getCategoryFilter();
  const sortBy = getSortByParam();
  const page = getPageParam(categoryFilter);
  return {categoryFilter, sortBy, page};
}

Antes, havia um estado para armazenar os vídeos e outro para os vídeos filtrados. Agora, os vídeos filtrados são apenas uma const:

const {videos, totalOfPages} = getFilteredGallery({page, categoryFilter, sortBy});

Galeria de Vídeo

Contexts

Na primeira versão, criei vários contexts sem necessidade:

src
└── context
    ├── FilterContext
    ├── ModalContext
    └── VideosContext

Agora, toda a lógica da galeria está condensada em um custom hook.

Search Params

Usei searchParams para deixar a galeria muito mais robusta.

Ao clicar nos vídeos, botões de filtro e páginas, a URL é atualizada. Isso permite compartilhar a página 2 da categoria marketing ou algum vídeo da lista, por exemplo. Nada disso era possível antes.

Resumo do vídeo:

Ao clicar em um filtro, a URL é atualizada;
A página é atualizada e o filtro continua marcado.

Para isso, refatorei um custom hook que usava hooks do next/router para hooks do novo next/navigation.

A galeria agora funciona como o Instagram no desktop. Ao clicar em um vídeo, um modal é aberto. Porém, ao atualizar o navegador, há um redirecionamento para a página do vídeo.