SolidJS•2mo ago

Filtering projects not working

Hi everyone I'm trying to filtering my projects list according to a "tabs", where I click and set the searchParam tab, but isn't working. Only works if I refresh the page. This is my createAsync:

  const data = createAsync(async () => {
    let currentPage = searchParams.page ? Number(searchParams.page) : 1;
    const pages = await getPaginatedProjects(currentPage, DEFAULT_PAGINATION_OFFSET);
    const numberOfPages = Math.ceil(pages.total / DEFAULT_PAGINATION_OFFSET);

    if (currentPage > pages.total) {
      currentPage = numberOfPages;
    }

    if (currentTab() !== 'all') {
      const { data, total } = await getPaginatedProjectsByService(
        currentTab(),
        currentPage,
        DEFAULT_PAGINATION_OFFSET,
      );

      return {
        data,
        total,
        currentPage,
      };
    }

    const { data, total } = await getPaginatedProjects(
      currentPage,
      DEFAULT_PAGINATION_OFFSET,
    );

    return {
      data,
      total,
      currentPage,
    };
  });

  const data = createAsync(async () => {
    let currentPage = searchParams.page ? Number(searchParams.page) : 1;
    const pages = await getPaginatedProjects(currentPage, DEFAULT_PAGINATION_OFFSET);
    const numberOfPages = Math.ceil(pages.total / DEFAULT_PAGINATION_OFFSET);

    if (currentPage > pages.total) {
      currentPage = numberOfPages;
    }

    if (currentTab() !== 'all') {
      const { data, total } = await getPaginatedProjectsByService(
        currentTab(),
        currentPage,
        DEFAULT_PAGINATION_OFFSET,
      );

      return {
        data,
        total,
        currentPage,
      };
    }

    const { data, total } = await getPaginatedProjects(
      currentPage,
      DEFAULT_PAGINATION_OFFSET,
    );

    return {
      data,
      total,
      currentPage,
    };
  });

I will leave the rest of the code in the thread

2 Replies

Daniel Sousa @TutoDSOP•2mo ago

For the tabs I have:

const [searchParams, setSearchParams] = useSearchParams();

  /**
   * Accessor to store the current service.
   */
  const currentTab = createMemo(() => {
    const service = searchParams.service;

    if (!service || service === 'all') {
      return 'all';
    }

    return service;
  });

/**
   * Callback function to change the service query parameter in order to filter
   * the projects from a new service.
   * @param service Current service.
   */
  function handleServiceChange(service?: string) {
    setSearchParams({ service }, { replace: true });
  }

const [searchParams, setSearchParams] = useSearchParams();

  /**
   * Accessor to store the current service.
   */
  const currentTab = createMemo(() => {
    const service = searchParams.service;

    if (!service || service === 'all') {
      return 'all';
    }

    return service;
  });

/**
   * Callback function to change the service query parameter in order to filter
   * the projects from a new service.
   * @param service Current service.
   */
  function handleServiceChange(service?: string) {
    setSearchParams({ service }, { replace: true });
  }

Daniel Sousa @TutoDSOP•2mo ago

Possible solution: remove currentTab() and use directly searchParams.tab

Gaming

Programming

Filtering projects not working