fix: 1. apply button fix. 2. skill count fix 3. UI fixes , 4. cleanup…

… code, 5. added progress loader (#467)
code100x · Oct 6, 2024 · 0b5a9c9 · 0b5a9c9
1 parent b4fba38
commit 0b5a9c9
Show file tree

Hide file tree

Showing 13 changed files with 128 additions and 148 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     ]
   },
   "prisma": {
-    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
+    "seed": "node --import 'data:text/javascript,import { register } from \"node:module\"; import { pathToFileURL } from \"node:url\"; register(\"ts-node/esm\", pathToFileURL(\"./\"));' prisma/seed.ts"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.645.0",
@@ -67,7 +67,7 @@
     "next": "^14.2.12",
     "next-auth": "^4.24.7",
     "next-themes": "^0.3.0",
-    "nextjs-toploader": "^1.6.12",
+    "nextjs-toploader": "^3.7.15",
     "node-cron": "^3.0.3",
     "nodemailer": "^6.9.15",
     "react": "^18",

diff --git a/prisma/seed.ts b/prisma/seed.ts
@@ -1,5 +1,11 @@
 /* eslint-disable no-console */
-import { PrismaClient, Currency, EmployementType, Role, WorkMode } from '@prisma/client';
+import {
+  PrismaClient,
+  Currency,
+  EmployementType,
+  Role,
+  WorkMode,
+} from '@prisma/client';
 import { faker } from '@faker-js/faker';
 import bcrypt from 'bcryptjs';
 
@@ -24,7 +30,6 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 1,
     maxExperience: 2,
@@ -47,7 +52,7 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.office,
     currency: Currency.USD,
-    application: '[email protected]',
+
     hasExperiencerange: false,
     companyLogo: '',
     hasSalaryRange: false,
@@ -68,7 +73,6 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 3,
     maxExperience: 4,
@@ -92,7 +96,6 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 1,
     maxExperience: 2,
@@ -116,7 +119,6 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: false,
     companyLogo: '',
     hasSalaryRange: true,
@@ -138,7 +140,6 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.office,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 1,
     maxExperience: 2,
@@ -162,7 +163,6 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 1,
     maxExperience: 2,
@@ -185,7 +185,6 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 1,
     maxExperience: 2,
@@ -207,7 +206,6 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.office,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 1,
     maxExperience: 2,
@@ -230,14 +228,13 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 1,
     maxExperience: 2,
     companyLogo: '',
     hasSalaryRange: true,
-    minSalary: 75,
-    maxSalary: 95,
+    minSalary: 75000,
+    maxSalary: 95000,
     isVerifiedJob: false,
   },
   {
@@ -253,12 +250,11 @@ let jobs = [
     type: EmployementType.Full_time,
     workMode: WorkMode.remote,
     currency: Currency.USD,
-    application: '[email protected]',
     companyLogo: '',
     hasSalaryRange: true,
     hasExperiencerange: false,
-    minSalary: 25,
-    maxSalary: 50,
+    minSalary: 25000,
+    maxSalary: 50000,
     isVerifiedJob: true,
   },
   {
@@ -274,7 +270,6 @@ let jobs = [
     type: EmployementType.Contract,
     workMode: WorkMode.remote,
     currency: Currency.USD,
-    application: '[email protected]',
     hasExperiencerange: true,
     minExperience: 1,
     maxExperience: 2,
@@ -316,14 +311,12 @@ async function seedUsers() {
 
 async function seedJobs() {
   try {
-
     const existingUsers = await prisma.user.findMany({
       select: { id: true },
     });
-    const existingUserIds = new Set(existingUsers.map(user => user.id));
+    const existingUserIds = new Set(existingUsers.map((user) => user.id));
 
-
-    const validJobs = jobs.filter(job => existingUserIds.has(job.userId));
+    const validJobs = jobs.filter((job) => existingUserIds.has(job.userId));
 
     await Promise.all(
       validJobs.map(async (j) =>
@@ -341,7 +334,7 @@ async function seedJobs() {
             type: j.type,
             workMode: j.workMode,
             currency: j.currency,
-            application: j.application,
+            application: 'https://x.com/100xDevs',
             city: faker.location.city(),
             address: faker.location.city(),
             hasExperiencerange: j.hasExperiencerange,
@@ -378,4 +371,4 @@ async function main() {
   await seedJobs();
 }
 
-main();
+main();
diff --git a/src/actions/job.action.ts b/src/actions/job.action.ts
@@ -260,6 +260,7 @@ export const getJobById = withServerActionAsyncCatcher<
       minSalary: true,
       maxSalary: true,
       postedAt: true,
+      application: true,
     },
   });
   return new SuccessResponse(`${id} Job fetched successfully`, 200, {
@@ -303,6 +304,7 @@ export const getRecentJobs = async () => {
         postedAt: true,
         companyLogo: true,
         type: true,
+        application: true,
       },
       take: 6,
     });

diff --git a/src/app/jobs/[id]/page.tsx b/src/app/jobs/[id]/page.tsx
@@ -1,14 +1,13 @@
 import { getJobById, getRecommendedJobs } from '@/actions/job.action';
 import { Job } from '@/components/job';
-import JobCard from '@/components/job-card';
+import JobCard from '@/components/job-card-rec';
 import { JobByIdSchemaType } from '@/lib/validators/jobs.validator';
 import { ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
 const page = async ({ params }: { params: JobByIdSchemaType }) => {
   const job = await getJobById(params);
-
   if (!job.status) {
     return;
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import Header from '@/layouts/header';
 import { cn } from '@/lib/utils';
 import Providers from '@/providers/providers';
 import type { Metadata } from 'next';
+import NextTopLoader from 'nextjs-toploader';
 import './globals.css';
 import localFont from 'next/font/local';
 
@@ -33,6 +34,8 @@ export default async function RootLayout({
           satoshi.variable
         )}
       >
+        {' '}
+        <NextTopLoader color="blue" showSpinner={false} />
         <Providers>
           <Header />
           <main className="grow grid p-4">{children}</main>

diff --git a/src/components/Jobcard.tsx b/src/components/Jobcard.tsx
@@ -1,11 +1,12 @@
-import { AlertCircle, Briefcase } from 'lucide-react';
+import { Briefcase } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import Icon from './ui/icon';
 import { formatSalary } from '@/lib/utils';
 import { JobType } from '@/types/jobs.types';
 import _ from 'lodash';
 import { cn } from '@/lib/utils';
+import { JobSkills } from './job-skills';
 export default function JobCard({
   job,
   className,
@@ -24,26 +25,15 @@ export default function JobCard({
     >
       <div className="flex w-full gap-3">
         <div className="size-16 relative">
-          {job.companyLogo ? (
-            job.companyLogo === 'https://www.example.com' ? (
-              <div className=" w-full h-full flex items-center justify-center rounded-md">
-                <Image
-                  src={'/main.svg'}
-                  width={500}
-                  height={500}
-                  alt="company-logo"
-                />
-              </div>
-            ) : (
-              <Image
-                className="size-full object-contain "
-                src={job.companyLogo || ''}
-                width={'500'}
-                height={'500'}
-                alt="company-logo"
-              />
-            )
-          ) : null}
+          {job.companyLogo && (
+            <Image
+              className="size-full object-contain "
+              src={job.companyLogo || ''}
+              width={'500'}
+              height={'500'}
+              alt="company-logo"
+            />
+          )}
         </div>
         <div className="flex flex-col gap-2">
           <h2 className="font-bold text-black dark:text-white text-xl">
@@ -60,51 +50,37 @@ export default function JobCard({
           {_.startCase(job.type)}
         </div>
         <span className="flex items-center gap-0.5">
-          <Briefcase size={12} />
-          {job.minExperience && job.maxExperience
-            ? `${job.minExperience}-${job.maxExperience} Yrs`
-            : 'Not disclosed'}
+          {job.minSalary && job.maxSalary ? (
+            <span className="flex justify-start items-center gap-1 flex-nowrap bg-green-900/90 px-2 py-1 rounded-full text-white">
+              <Icon icon="currency" size={12} />
+              {`${formatSalary(job.minSalary)}-${formatSalary(job.maxSalary)}`}
+            </span>
+          ) : (
+            'Not disclosed'
+          )}
         </span>
         <span className="flex items-center gap-0.5">
-          <Icon icon="currency" size={12} />
-          {job.minSalary && job.maxSalary
-            ? `${formatSalary(job.minSalary)}-${formatSalary(job.maxSalary)}`
-            : 'Not disclosed'}
+          {job.minExperience && job.maxExperience ? (
+            <span className="flex justify-start items-center gap-1 flex-nowrap">
+              <Briefcase size={12} />
+
+              {`${job.minExperience}-${job.maxExperience} Yrs`}
+            </span>
+          ) : (
+            'Ex: Not disclosed'
+          )}
         </span>
+
         <span className="flex items-center gap-0.5">
           <Icon icon="location" size={12} />
-          {job.address}
-          <span className="capitalize">({job.workMode})</span>
+          {job.city} -
+          <span className=" dark:bg-opacity-10 bg-opacity-90 text-blue-500 dark:text-blue-400 rounded capitalize">
+            {job.workMode}
+          </span>
         </span>
       </div>
-      <div className="flex flex-wrap gap-2">
-        {job.skills && job.skills.length !== 0 ? (
-          !(job.skills.length > 4) ? (
-            // If there are more than 3 skills, show them all
-            job.skills.map((item, index) => (
-              <div
-                key={index}
-                className="bg-slate-500 bg-opacity-10 text-slate-500 dark:text-slate-400 font-medium text-sm rounded-full px-2"
-              >
-                {item}
-              </div>
-            ))
-          ) : (
-            job.skills.slice(0, 7).map((item, index) => (
-              <div
-                key={index}
-                className="bg-slate-500 bg-opacity-10 text-slate-500 dark:text-slate-400 font-medium text-sm rounded-full px-2"
-              >
-                {item}
-              </div>
-            ))
-          )
-        ) : (
-          // If there are no skills, show the "No skills provided" message
-          <div className="mt-3 bg-slate-500 flex justify-start items-center gap-3 bg-opacity-10 text-slate-500 dark:text-slate-400 font-medium text-sm rounded-full px-2">
-            <AlertCircle size={12} /> No skills provided
-          </div>
-        )}
+      <div className="flex flex-wrap gap-2 max-w-[70%]">
+        <JobSkills skills={job.skills} />
       </div>
     </Link>
   );

diff --git a/src/components/RecentJobs.tsx b/src/components/RecentJobs.tsx
@@ -10,7 +10,7 @@ export default async function RecentJobs() {
   return (
     <div className="w-full grid md:grid-cols-3 grid-cols-1 gap-6 items-center mt-10">
       {recentJobs.additional.recentJobs.map((job, index) => (
-        <JobCard job={job} key={index} className="min-h-[250px]" />
+        <JobCard job={job} key={index} className="min-h-[210px]" />
       ))}
     </div>
   );

diff --git a/src/components/job-card-loader.tsx b/src/components/job-card-loader.tsx