Refactored Filters component. Modified styles of Switch shadcn/ui component. Added target and rel attrs for imporved ux. Added filtering based on salary and skills to jobs

Author: ladunjexa

app/(root)/jobs/page.tsx

@@ -4,7 +4,6 @@ import LocalSearchbar from "@/components/shared/search/LocalSearchbar";
 import JobFilters from "@/components/shared/Filters";
 import NoResult from "@/components/shared/NoResult";
 import Pagination from "@/components/shared/Pagination";
-import Switcher from "@/components/shared/Switcher";
 import JobCard from "@/components/cards/JobCard";
 
 import { getCountryFilters, getJobs } from "@/lib/actions/job.action";
@@ -22,14 +21,13 @@ const Page = async ({ searchParams }: SearchParamsProps) => {
     location: searchParams.location,
     remote: searchParams.remote,
     page: searchParams.page ? +searchParams.page : 1,
+    wage: searchParams.wage,
+    skills: searchParams.skills,
   });
 
   return (
     <>
-      <div className="flex flex-row items-center">
-        <h1 className="h1-bold text-dark100_light900">Jobs</h1>
-        <Switcher />
-      </div>
+      <h1 className="h1-bold text-dark100_light900">Jobs</h1>
 
       <div className="mt-11 flex justify-between gap-5 max-sm:flex-col sm:items-center">
         <LocalSearchbar
@@ -48,7 +46,7 @@ const Page = async ({ searchParams }: SearchParamsProps) => {
         )}
       </div>
 
-      <JobFilters filters={JobPageFilters} />
+      <JobFilters filters={JobPageFilters} jobFilter />
 
       <div className="mt-10 flex w-full flex-col gap-6">
         {result.data.length > 0 ? (
@@ -78,12 +76,10 @@ const Page = async ({ searchParams }: SearchParamsProps) => {
           ))
         ) : (
           <NoResult
-            title="No Questions Found"
-            description="Be the first to break the silence! 🚀 Ask a Question and kickstart the
-          discussion. our query could be the next big thing others learn from. Get
-          involved! 💡"
-            link="/ask-question"
-            linkTitle="Ask a Question"
+            title="No Jobs Found"
+            description="We couldn't find any jobs matching your search 🤔"
+            link="/jobs"
+            linkTitle="Explore Jobs"
           />
         )}
       </div>

components/cards/JobCard.tsx

@@ -84,7 +84,7 @@ const JobCard = ({
                 <h4 className="paragraph-medium text-dark400_light700">
                   {employerName}
                 </h4>
-                <p className="body-regular text-light-500">
+                <p className="body-regular mt-0.5 capitalize text-light-500">
                   posted {getTimestamp(new Date(postedAt))}
                 </p>
               </div>
@@ -134,7 +134,12 @@ const JobCard = ({
                 textStyles="small-medium text-light-500"
               />
             </div>
-            <Link href={applyLink || "/"} className="flex items-center gap-2">
+            <Link
+              href={applyLink || "/"}
+              className="flex items-center gap-2"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <p className="body-semibold primary-text-gradient">View job</p>
               <Image
                 alt="arrow up right"

components/shared/Filters.tsx

@@ -4,12 +4,19 @@ import { useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
+import Switcher from "@/components/shared/Switcher";
 
 import { formUrlQuery } from "@/lib/utils";
 
 import type { FilterProps } from "@/types";
 
-const Filters = ({ filters }: { filters: FilterProps[] }) => {
+const Filters = ({
+  filters,
+  jobFilter = false,
+}: {
+  filters: FilterProps[];
+  jobFilter: boolean;
+}) => {
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -54,6 +61,14 @@ const Filters = ({ filters }: { filters: FilterProps[] }) => {
           {filter.name}
         </Button>
       ))}
+
+      {jobFilter && (
+        <div className="background-light800_dark300 mt-2 flex items-center rounded-lg px-3 py-2 shadow-none md:mt-0">
+          <Switcher query="remote" label="Remote Only" />
+          <Switcher query="wage" label="TBA" />
+          <Switcher query="skills" label="Skills" />
+        </div>
+      )}
     </div>
   );
 };

components/shared/Switcher.tsx

@@ -8,31 +8,28 @@ import { Switch } from "@/components/ui/switch";
 import { formUrlQuery, removeKeysFromQuery } from "@/lib/utils";
 
 interface Props {
-  searchParamKey?: string;
-  label?: string;
+  query: string;
+  label: string;
 }
 
-const Switcher = ({
-  searchParamKey = "remote",
-  label = "Remote jobs only",
-}: Props) => {
+const Switcher = ({ query, label }: Props) => {
   const searchParams = useSearchParams();
   const router = useRouter();
 
-  const paramFilter = searchParams.get(searchParamKey);
+  const paramFilter = searchParams.get(query);
 
   const handleUpdateParams = (value: string) => {
     let newUrl;
 
     if (!value) {
       newUrl = removeKeysFromQuery({
         params: searchParams.toString(),
-        keysToRemove: [searchParamKey],
+        keysToRemove: [query],
       });
     } else {
       newUrl = formUrlQuery({
         params: searchParams.toString(),
-        key: searchParamKey,
+        key: query,
         value,
       });
     }
@@ -43,13 +40,13 @@ const Switcher = ({
   return (
     <>
       <Switch
-        id="remote-only"
+        id={`${query}-switcher`}
         className="ml-4 mr-2"
         checked={paramFilter === "true"}
         // @ts-expect-error
         onCheckedChange={handleUpdateParams}
       />
-      <Label htmlFor="remote-only" className="text-light-500">
+      <Label htmlFor={`${query}-switcher`} className="text-light-500">
         {label}
       </Label>
     </>

components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-light-700 dark:data-[state=checked]:bg-dark-200 data-[state=unchecked]:bg-light-800 dark:data-[state=unchecked]:bg-dark-300",
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-light-700 dark:data-[state=checked]:bg-dark-200 data-[state=unchecked]:bg-light-900 dark:data-[state=unchecked]:bg-dark-400",
       className
     )}
     {...props}

lib/actions/job.action.ts

@@ -11,6 +11,8 @@ export async function getJobs(params: GetJobsParams) {
       filter,
       location,
       remote,
+      wage,
+      skills,
       searchQuery,
     } = params;
 
@@ -35,7 +37,10 @@ export async function getJobs(params: GetJobsParams) {
         job &&
         searchQueryRegExp.test(job.job_title) &&
         locationRegExp.test(job.job_country) &&
-        (remote ? job.job_is_remote === true : true)
+        (!remote || job.job_is_remote === true) &&
+        (!wage ||
+          (job.job_min_salary !== null && job.job_max_salary !== null)) &&
+        (!skills || job.job_required_skills)
       );
     });
 

lib/actions/shared.types.d.ts

@@ -73,6 +73,8 @@ export interface GetAllUsersParams extends Searchable {}
 export interface GetJobsParams extends Searchable {
   location?: string;
   remote?: boolean | string;
+  wage?: boolean | string;
+  skills?: boolean | string;
 }
 
 export interface UpdateUserParams extends ClerkId, Path {