feat: apply filter

src/app/(app)/repositories/page.tsx

@@ -1,38 +1,39 @@
-import { parseAsString } from "nuqs/server";
 import { useFetchRepositoriesPage } from "@/hooks/useFetchRepositoriesPage";
 import { RepositoriesProvider } from "@/context/repositoriesContext";
 import { RepositoriesFilter } from "@/components/organisms/RepositoriesFilter/_index";
 import { RepositoriesGridInfiniteScroll } from "@/components/organisms/RepositoriesGrid/RepositoriesGridInfiniteScroll";
 import { DataSharingAgreementForm } from "@/components/organisms/_forms/dataSharingAgreement.form";
 import { AddRepositoryForm } from "@/components/organisms/_forms/addrepository.form";
+import { useQueryParser } from "@/hooks/useQueryParser";
+import { QueryParamsProvider } from "@/context/queryParamsContext";
+import { ParamsType } from "@/types";
 
 type Props = {
   searchParams?: {
     query?: string;
     language?: string;
+    params?: ParamsType;
   };
 };
 
-const queryParser = parseAsString.withDefault("");
-
 export default async function RepositoriesPage({ searchParams }: Props) {
-  const queryParams = queryParser.parseServerSide(searchParams?.query);
-  const languageParams = queryParser.parseServerSide(searchParams?.language);
   const { user, likes, languages } = await useFetchRepositoriesPage();
+  const { queryParams, languageParams, params } = useQueryParser({
+    searchParams,
+  });
 
   return (
-    <RepositoriesProvider user={user} likes={likes}>
-      <RepositoriesFilter languages={languages} />
-      <RepositoriesGridInfiniteScroll
-        user={user}
-        queryParams={queryParams}
-        languageParams={languageParams}
-      />
-      <DataSharingAgreementForm user={user} />
-      <AddRepositoryForm
+    <RepositoriesProvider user={user} likes={likes} languages={languages}>
+      <QueryParamsProvider
         queryParams={queryParams}
         languageParams={languageParams}
-      />
+        params={params}
+      >
+        <RepositoriesFilter />
+        <RepositoriesGridInfiniteScroll />
+        <DataSharingAgreementForm />
+        <AddRepositoryForm />
+      </QueryParamsProvider>
     </RepositoriesProvider>
   );
 }

src/components/molecules/PrefetchLink.tsx

@@ -10,7 +10,10 @@ export const PrefetchLink = () => {
   const prefetchRepositories = () => {
     queryClient
       .prefetchInfiniteQuery({
-        queryKey: ["repositories", { query: "", language: "" }],
+        queryKey: [
+          "repositories",
+          { queryParams: "", languageParams: "", params: "" },
+        ],
         queryFn: ({ pageParam }) =>
           getRepositoriesByFilter({ cursor: pageParam }),
         initialPageParam: 0,

src/components/molecules/SelectLanguages.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useRepositoriesContext } from "@/context/repositoriesContext";
 import { useQueryParams } from "@/hooks/useQueryParams";
 import {
   Select,
@@ -7,13 +8,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/atoms/select";
-import type { Language } from "@prisma/client";
 
-type Props = {
-  languages: Language[];
-};
-
-export const SelectLanguages = ({ languages }: Props) => {
+export const SelectLanguages = () => {
+  const { languages } = useRepositoriesContext();
   const { params: language, setParams: setLanguage } = useQueryParams({
     key: "language",
   });

src/components/molecules/SelectParams.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { useQueryParams } from "@/hooks/useQueryParams";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/atoms/select";
+
+export const SelectParams = () => {
+  const { params, setParams: setParams } = useQueryParams({
+    key: "params",
+  });
+  const handleChange = async (value: string) => {
+    value === "all" ? await setParams("") : await setParams(value);
+  };
+
+  return (
+    <Select
+      defaultValue={params || "all"}
+      onValueChange={(value) => handleChange(value)}
+    >
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Languages" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All</SelectItem>
+        <SelectItem value="latest">First added</SelectItem>
+        <SelectItem value="starred">Most starred</SelectItem>
+        <SelectItem value="liked">Most Liked</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+};

src/components/organisms/RepositoriesFilter/_index.tsx

@@ -1,18 +1,13 @@
 import { DirectionListToggle } from "@/components/molecules/DirectionListToggle";
-import { AlreadyStarredToggle } from "@/components/molecules/AlreadyStarredToggle";
 import { SelectLanguages } from "@/components/molecules/SelectLanguages";
-import type { Language } from "@prisma/client";
+import { SelectParams } from "@/components/molecules/SelectParams";
 
-type Props = {
-  languages: Language[];
-};
-
-export const RepositoriesFilter = ({ languages }: Props) => {
+export const RepositoriesFilter = () => {
   return (
     <div className="flex space-x-4">
       <DirectionListToggle />
-      {/* <AlreadyStarredToggle /> */}
-      <SelectLanguages languages={languages} />
+      <SelectLanguages />
+      <SelectParams />
     </div>
   );
 };

src/components/organisms/RepositoriesGrid/RepositoriesGridInfiniteScroll.tsx

@@ -1,46 +1,25 @@
 "use client";
-
+import { useRepositoriesContext } from "@/context/repositoriesContext";
+import { useQueryParamsContext } from "@/context/queryParamsContext";
 import { useFetchInfiniteRepositories } from "@/hooks/useFetchInfiniteRepositories";
 import { useFetchNextPage } from "@/hooks/useFetchNextPage";
 import { RepositoryCard } from "@/components/organisms/RepositoryCard/_index";
 import { RepositoriesLoader } from "@/components/organisms/RepositoriesGrid/RepositoriesLoader";
 import { RepositoriesGridLayout } from "@/components/organisms/RepositoriesGrid/RepositoriesGridLayout";
 import { getRepositoriesAlreadyStarredURL } from "@/utils/getRepositoriesAlreadyStarredURL";
-import type { User } from "@/types/prisma.type";
-import { getFilteredRepositories } from "@/utils/getFilteredRepositories";
-import { useToggleFilter } from "@/stores/useToggleFilter";
-
-type Props = {
-  user: User | null;
-  queryParams: string;
-  languageParams: string;
-};
-
-export const RepositoriesGridInfiniteScroll = ({
-  user,
-  queryParams,
-  languageParams,
-}: Props) => {
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
-    useFetchInfiniteRepositories({ queryParams, languageParams });
 
+export const RepositoriesGridInfiniteScroll = () => {
+  const { user } = useRepositoriesContext();
+  const { queryParams, languageParams, params } = useQueryParamsContext();
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+    useFetchInfiniteRepositories({ queryParams, languageParams, params });
   const { ref } = useFetchNextPage({
     action: fetchNextPage,
     hasNextPage,
   });
 
-  // const { toggleFilter } = useToggleFilter();
-
   const flatRepositories =
-    data?.pages.map((page) => page.data!.repositories).flat() ?? [];
-
-  // const filteredRepositories = getFilteredRepositories({
-  //   query: queryParams,
-  //   language: languageParams,
-  //   repositories: flatRepositories,
-  //   user,
-  //   toggleFilter,
-  // });
+    data?.pages.map((page) => page.data?.repositories ?? []).flat() ?? [];
 
   return (
     <>
@@ -49,7 +28,6 @@ export const RepositoriesGridInfiniteScroll = ({
           repository ? (
             <RepositoryCard
               key={index}
-              user={user}
               repository={repository}
               repositoriesAlreadyStarred={getRepositoriesAlreadyStarredURL(
                 flatRepositories,
@@ -61,7 +39,11 @@ export const RepositoriesGridInfiniteScroll = ({
           ),
         )}
       </RepositoriesGridLayout>
-      <RepositoriesLoader isDisabled={isFetchingNextPage} ref={ref} />
+      <RepositoriesLoader
+        isLoading={isLoading}
+        isDisabled={isFetchingNextPage}
+        ref={ref}
+      />
     </>
   );
 };

src/components/organisms/RepositoriesGrid/RepositoriesLoader.tsx

@@ -2,17 +2,18 @@ import { forwardRef } from "react";
 
 type Props = {
   isDisabled?: boolean;
+  isLoading?: boolean;
 };
 
 const RepositoriesLoader = forwardRef(
   (props: Props, ref: React.ForwardedRef<HTMLDivElement | null>) => {
-    const { isDisabled } = props;
+    const { isDisabled, isLoading } = props;
 
     return (
       <div
         ref={ref}
         className="mt-6 flex flex-col items-center justify-center"
-        style={{ visibility: !isDisabled ? "hidden" : "initial" }}
+        style={{ visibility: !isDisabled && !isLoading ? "hidden" : "initial" }}
       >
         <p className="text-sm text-gray-400">Loading more repositories...</p>
       </div>

src/components/organisms/RepositoryCard/RepositoryCardFooter.tsx

@@ -6,23 +6,20 @@ import { RepositoryCardLanguage } from "./RepositoryCardLanguage";
 import { RepositoryCardComment } from "./RepositoryCardComment";
 import { RepositoryCardSeeMore } from "./RepositoryCardSeeMore";
 import type { Repository } from "@/types/prisma.type";
-import type { User } from "@/types/prisma.type";
 
 type Props = {
-  user: User | null;
   repository: Repository;
   repositoriesAlreadyStarred?: string[];
 };
 
 export const RepositoryCardFooter = ({
-  user,
   repository,
   repositoriesAlreadyStarred,
 }: Props) => {
-  const { likes } = useRepositoriesContext();
+  const { user, likes } = useRepositoriesContext();
 
   return (
-    <div className="text-icon flex justify-between space-x-4 pt-2 text-xs">
+    <div className="flex justify-between space-x-4 pt-2 text-xs text-icon">
       <div className="flex space-x-4">
         <RepositoryCardLanguage repository={repository} />
         <RepositoryCardStars

src/components/organisms/RepositoryCard/RepositoryCardHeader.tsx

@@ -1,20 +1,20 @@
 import Link from "next/link";
+import { useRepositoriesContext } from "@/context/repositoriesContext";
 import { ProfileAvatar } from "@/components/molecules/Avatar";
 import { RepositoryCardHideWithRole } from "./RepositoryCardHide";
 import type { Repository } from "@/types/prisma.type";
 import type { User } from "@/types/prisma.type";
 
 type Props = {
-  user: User | null;
   repository: Repository;
   isComment?: boolean;
 };
 
 export const RepositoryCardHeader = ({
-  user,
   repository,
   isComment = false,
 }: Props) => {
+  const { user } = useRepositoriesContext();
   return (
     <div className="flex justify-between">
       <div className="flex items-center gap-2">

src/components/organisms/RepositoryCard/_index.tsx

@@ -3,29 +3,25 @@ import { RepositoryCardHeader } from "./RepositoryCardHeader";
 import { RepositoryCardDescription } from "./RepositoryCardDescription";
 import { RepositoryCardTopics } from "./RepositoryCardTopics";
 import { RepositoryCardFooter } from "./RepositoryCardFooter";
-import type { User } from "@/types/prisma.type";
 import type { Repository } from "@/types/prisma.type";
 
 type Props = {
-  user: User | null;
   repository: Repository;
   repositoriesAlreadyStarred?: string[];
 };
 
 export const RepositoryCard = ({
-  user,
   repository,
   repositoriesAlreadyStarred,
 }: Props) => {
   return (
     <RepositoryCardLayout>
-      <RepositoryCardHeader user={user} repository={repository} />
+      <RepositoryCardHeader repository={repository} />
       <div className="space-y-2 rounded-sm bg-overlay p-3">
         <RepositoryCardDescription repository={repository} />
 
         <RepositoryCardTopics repository={repository} />
         <RepositoryCardFooter
-          user={user}
           repository={repository}
           repositoriesAlreadyStarred={repositoriesAlreadyStarred}
         />

src/components/organisms/_forms/addrepository.form.tsx

@@ -6,21 +6,18 @@ import { useForm } from "react-hook-form";
 import { Form } from "@/components/atoms/form";
 import { formRepositorySchema } from "./addrepository.schema";
 import { useToast } from "@/components/atoms/use-toast";
+import { useQueryParamsContext } from "@/context/queryParamsContext";
 import { useShareRepositoryModal } from "@/stores/useShareRepositoryModal";
 import { Dialog, DialogContent } from "@/components/atoms/dialog";
 import { InputForm } from "@/components/molecules/InputForm";
 import { RichTextFieldForm } from "@/components/molecules/RichTextFieldForm";
 import { SubmitButton } from "@/components/molecules/SubmitButton";
 import { addRepository } from "@/actions/addrepository.action";
-import type * as z from "zod";
 import { useFetchInfiniteRepositories } from "@/hooks/useFetchInfiniteRepositories";
+import type * as z from "zod";
 
-type Props = {
-  queryParams: string;
-  languageParams: string;
-};
-
-export const AddRepositoryForm = ({ queryParams, languageParams }: Props) => {
+export const AddRepositoryForm = () => {
+  const { queryParams, languageParams, params } = useQueryParamsContext();
   const [isPending, startTransition] = useTransition();
   const { open, setOpen } = useShareRepositoryModal();
   const { toast } = useToast();
@@ -36,6 +33,7 @@ export const AddRepositoryForm = ({ queryParams, languageParams }: Props) => {
   const { refetch } = useFetchInfiniteRepositories({
     queryParams,
     languageParams,
+    params,
   });
 
   function onSubmit(data: z.infer<typeof formRepositorySchema>) {

src/components/organisms/_forms/dataSharingAgreement.form.tsx

@@ -16,14 +16,12 @@ import {
   FormLabel,
 } from "@/components/atoms/form";
 import { updateAgreement } from "@/actions/updateagreement.action";
-import type { User } from "@prisma/client";
-import type * as z from "zod";
 
-type Props = {
-  user: User | null;
-};
+import type * as z from "zod";
+import { useRepositoriesContext } from "@/context/repositoriesContext";
 
-export const DataSharingAgreementForm = ({ user }: Props) => {
+export const DataSharingAgreementForm = () => {
+  const { user } = useRepositoriesContext();
   const [isPending, startTransition] = useTransition();
   const [open, setOpen] = useState<boolean | undefined>(undefined);
   const [checked, setChecked] = useState(false);