tom_bombadil Comments - Answer Overflow

tom_bombadil

Posts Comments

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

I will remove it, but that doesn't affect the filtering problem

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

@James4u

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

and then on the client side:

const [filters, setFilters] = useState<AnimalSearchParams>({});

  const fetchData = (page: number, filters: AnimalSearchParams) => {
    startTransition(async () => {
      const result = await getAdoptPost({ query: { page } }, filters);

      setPosts(result.post);
      setPage(result.page);
      setPageSize(result.pageSize);
      setTotal(result.total);
      setIsLoading(false); // Set loading to false after data is fetched
    });
  };

  useEffect(() => {
    const currentPage = parseInt(searchParams.get("page") || "1", 12);

    fetchData(currentPage, filters);
  }, [searchParams, filters]);

const [filters, setFilters] = useState<AnimalSearchParams>({});

  const fetchData = (page: number, filters: AnimalSearchParams) => {
    startTransition(async () => {
      const result = await getAdoptPost({ query: { page } }, filters);

      setPosts(result.post);
      setPage(result.page);
      setPageSize(result.pageSize);
      setTotal(result.total);
      setIsLoading(false); // Set loading to false after data is fetched
    });
  };

  useEffect(() => {
    const currentPage = parseInt(searchParams.get("page") || "1", 12);

    fetchData(currentPage, filters);
  }, [searchParams, filters]);

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

it is clear to me that I have to send the filtered values, how would the function in prisma look then, something like this?

export async function getAdoptPost(
  context: any,
  filters: {
    category?: string;
    location?: string;
    spol?: string;
    starost?: string;
  } = {}
) {
  const page = parseInt((context.query.page as string) || "1", 12);
  const pageSize = 12;

  const total = await db.adoptAnimal.count({
    where: filters,
  });

  const post = await db.adoptAnimal.findMany({
    skip: (page - 1) * pageSize,
    take: pageSize,
    where: filters,
    orderBy: {
      createdAt: "desc",
    },
  });

  return {
    post,
    page,
    pageSize,
    total,
  };
}

export async function getAdoptPost(
  context: any,
  filters: {
    category?: string;
    location?: string;
    spol?: string;
    starost?: string;
  } = {}
) {
  const page = parseInt((context.query.page as string) || "1", 12);
  const pageSize = 12;

  const total = await db.adoptAnimal.count({
    where: filters,
  });

  const post = await db.adoptAnimal.findMany({
    skip: (page - 1) * pageSize,
    take: pageSize,
    where: filters,
    orderBy: {
      createdAt: "desc",
    },
  });

  return {
    post,
    page,
    pageSize,
    total,
  };
}

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

@James4u lemme know when you're available to continue discuss about this?

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

and can you give a little more explanation of what you mean by 'hit the api'?

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

there is also pagination, which is done in the same function on prisma, so don't get confused 🙂

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

http://localhost:3000/adoptPet?category=Dog&location=Sarajevo&spol=Man&starost=Adult if you ask for this, I'm getting params in the pathame while picking up filter values from FilterMenu

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

sorry, what do you want to say?

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

yes, that's actually my question, how will I now apply my filters that I picked up in the FilterMenu, on this AdoptPet page where all the animals are rendered. It is not the clearest to me with the prisma of how to bind, if you can help me with that?

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

if it will not create a problem related to filtering

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

if we can leave it on the client side, then let it stay

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

tnx mate

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

sure

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

@James4u should provide you some more code?

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

and this is server function which using prisma

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

export async function getAdoptPost(context: any) {
  const page = parseInt((context.query.page as string) || "1", 12);
  const pageSize = 12;

  const total = await db.adoptAnimal.count({});

  const post = await db.adoptAnimal.findMany({
    skip: (page - 1) * pageSize,
    take: pageSize,
    orderBy: {
      createdAt: "desc",
    },
  });

  return {
    post,
    page,
    pageSize,
    total,
  };
}

export async function getAdoptPost(context: any) {
  const page = parseInt((context.query.page as string) || "1", 12);
  const pageSize = 12;

  const total = await db.adoptAnimal.count({});

  const post = await db.adoptAnimal.findMany({
    skip: (page - 1) * pageSize,
    take: pageSize,
    orderBy: {
      createdAt: "desc",
    },
  });

  return {
    post,
    page,
    pageSize,
    total,
  };
}

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

this is the page where I render all animals and where want to filter that 'posts' array

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

type Post = {
  id: string;
  post_id: string;
  imageUrls: string[];
  location: string;
  username: string;
  category: string;
  petName: string;
  vakcinisan: string;
  cipovan: string;
  pasos: string;
  spol: string;
  starost: string;
  phoneNumber: string;
  description: string;
  createdAt: Date;
  updatedAt: Date;
};

export default function AdoptPet() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [posts, setPosts] = useState<Post[]>([]);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [total, setTotal] = useState(0);
  const [isPending, startTransition] = useTransition(); // loading state
  const [isLoading, setIsLoading] = useState(true); // Add loading state

  const fetchData = (page: number) => {
    startTransition(async () => {
      const result = await getAdoptPost({
        query: { page },
      });

      setPosts(result.post);
      setPage(result.page);
      setPageSize(result.pageSize);
      setTotal(result.total);
      setIsLoading(false); // Set loading to false after data is fetched
     
    });
  };

  useEffect(() => {
    const currentPage = parseInt(searchParams.get("page") || "1", 12);

    fetchData(currentPage);
  }, [searchParams]);

  const handlePagination = (newPage: number) => {
    setIsLoading(true); // Set loading to true when pagination changes
    const params = new URLSearchParams(searchParams);
    params.set("page", newPage.toString());
    router.push(`/adoptPet?${params.toString()}`);
  };

 const handleNextPage = () => {
  if (page < Math.ceil(total / pageSize)) {
     handlePagination(page + 1);
  }
 };

  const handlePreviousPage = () => {
    if (page > 1) {
      handlePagination(page - 1);
    }
  };
...
{posts.map((animal) => (
  <div key={animal.id} className="p-4 bg-white rounded-xl shadow-md">
  ...

type Post = {
  id: string;
  post_id: string;
  imageUrls: string[];
  location: string;
  username: string;
  category: string;
  petName: string;
  vakcinisan: string;
  cipovan: string;
  pasos: string;
  spol: string;
  starost: string;
  phoneNumber: string;
  description: string;
  createdAt: Date;
  updatedAt: Date;
};

export default function AdoptPet() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [posts, setPosts] = useState<Post[]>([]);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [total, setTotal] = useState(0);
  const [isPending, startTransition] = useTransition(); // loading state
  const [isLoading, setIsLoading] = useState(true); // Add loading state

  const fetchData = (page: number) => {
    startTransition(async () => {
      const result = await getAdoptPost({
        query: { page },
      });

      setPosts(result.post);
      setPage(result.page);
      setPageSize(result.pageSize);
      setTotal(result.total);
      setIsLoading(false); // Set loading to false after data is fetched
     
    });
  };

  useEffect(() => {
    const currentPage = parseInt(searchParams.get("page") || "1", 12);

    fetchData(currentPage);
  }, [searchParams]);

  const handlePagination = (newPage: number) => {
    setIsLoading(true); // Set loading to true when pagination changes
    const params = new URLSearchParams(searchParams);
    params.set("page", newPage.toString());
    router.push(`/adoptPet?${params.toString()}`);
  };

 const handleNextPage = () => {
  if (page < Math.ceil(total / pageSize)) {
     handlePagination(page + 1);
  }
 };

  const handlePreviousPage = () => {
    if (page > 1) {
      handlePagination(page - 1);
    }
  };
...
{posts.map((animal) => (
  <div key={animal.id} className="p-4 bg-white rounded-xl shadow-md">
  ...

88 replies

PPrisma

•Created by tom_bombadil on 7/22/2024 in #help-and-questions

Dynamic Filtering items with prisma and Nextjs?

will do now

88 replies

Gaming

Programming