Prettier workflow fix

.env.example

@@ -15,3 +15,10 @@ NEXTAUTH_URL="http://localhost:3000"
 CDN_SZ_NAME=
 CDN_BASE_PATH=
 CDN_API_KEY=
+
+AWS_S3_REGION=
+AWS_S3_ACCESS_KEY_ID=
+AWS_S3_SECRET_ACCESS_KEY=
+AWS_S3_BUCKET_NAME=
+
+NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=

.github/workflows/ci.yaml

@@ -27,6 +27,10 @@ jobs:
 
       - name: Run format check
         run: npm run check
+
+      - name: Run format fix if check fails
+        if: ${{ failure() }}
+        run: npm run format
 
       - name: Run build
-        run: npm run build
+        run: npm run build

README.md

@@ -1,6 +1,7 @@
 # Project Name: Job Board
-[All about job board](https://marmalade-height-05f.notion.site/100xDevs-Job-board-ab8ca399180d49e4bc0c2ff5c81dfb08?pvs=25) <br/>
-[Job board bugs](https://marmalade-height-05f.notion.site/100xDevs-JOB-BOARD-Bugs-10115651c69c80478fc8f673a139bc60)
+
+[All about job board](https://marmalade-height-05f.notion.site/100xDevs-Job-board-ab8ca399180d49e4bc0c2ff5c81dfb08?pvs=25)
+
 ## Table of Contents
 
 - [Description](#description)
@@ -38,12 +39,12 @@ Follow these steps to set up the repository locally and run it.
 
    ```bash
    #
-   # Database 
+   # Database
    #
    DATABASE_URL="postgres://postgres:password@localhost:5432/postgres"
 
    #
-   # AUTH 
+   # AUTH
    #
    NEXTAUTH_SECRET="koXrQGB5TFD4KALDX4kAvnQ5RHHvAOIzB"
    NEXTAUTH_URL="http://localhost:3000"
@@ -68,7 +69,6 @@ Follow these steps to set up the repository locally and run it.
 
    [Run in browser](https://www.cryptool.org/en/cto/openssl/)
 
-
 ### Running the Project with Docker
 
 ```bash

package.json

@@ -9,16 +9,22 @@
     "lint": "next lint",
     "dev:docker": "npm run db:seed & next dev",
     "db:seed": "npx prisma db push & npx prisma db seed",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,mdx,css}\"",
     "check": "prettier --check \"**/*.{ts,tsx,js,jsx,md,mdx,css}\"",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,mdx,css}\"",
     "prepare": "husky"
   },
+  "lint-staged": {
+    "**/*.{ts,tsx,js,jsx,md,mdx,css}": [
+      "prettier --write"
+    ]
+  },
   "prisma": {
     "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.645.0",
     "@aws-sdk/s3-request-presigner": "^3.645.0",
+    "@faker-js/faker": "^9.0.0",
     "@hookform/resolvers": "^3.9.0",
     "@prisma/client": "5.18.0",
     "@radix-ui/react-accordion": "^1.2.0",

prisma/schema.prisma

@@ -30,7 +30,8 @@ model Job {
   type           String
   workMode       WorkMode @map("work_mode")
   currency       Currency @default(INR)
-  location       JobLocations
+  city           String
+  address        String
   application    String
   companyLogo    String 
   hasSalaryRange Boolean  @default(false) @map("has_salary_range")
@@ -58,15 +59,3 @@ enum Role {
   ADMIN
 }
 
-enum JobLocations {
-  BANGLORE
-  DELHI
-  MUMBAI
-  CHENNAI
-  PUNE
-  HYDERABAD
-  KOLKATA
-  AHMEDABAD
-  JAIPUR
-  SURAT
-}

prisma/seed.ts

@@ -1,16 +1,14 @@
 /* eslint-disable no-console */
 import { Currency, Role, WorkMode } from '@prisma/client';
+import { faker } from '@faker-js/faker';
 import bcrypt from 'bcryptjs';
 import prisma from '../src/config/prisma.config';
-import { JobLocations } from '@prisma/client';
 
 const users = [
   { id: '1', name: 'Jack', email: '[email protected]' },
   { id: '2', name: 'Admin', email: '[email protected]', role: Role.ADMIN },
 ];
 
-const locationArr = Object.keys(JobLocations);
-
 let jobs = [
   {
     id: '1',
@@ -286,13 +284,6 @@ async function seedUsers() {
 }
 
 async function seedJobs() {
-  jobs = jobs.map((j, index) => {
-    return {
-      ...j,
-      location:
-        locationArr[index] !== undefined ? locationArr[index] : locationArr[3],
-    };
-  });
   try {
     await Promise.all(
       jobs.map(async (j) =>
@@ -311,8 +302,8 @@ async function seedJobs() {
             workMode: j.workMode,
             currency: j.currency,
             application: j.application,
-            //@ts-ignore
-            location: j.location,
+            city: faker.location.city(),
+            address: faker.location.streetAddress(),
             companyLogo: j.companyLogo,
             hasSalaryRange: j.hasSalaryRange,
             minSalary: j.minSalary,

src/actions/job.action.ts

@@ -29,7 +29,8 @@ export const createJob = withServerActionAsyncCatcher<
     type,
     category,
     application,
-    location,
+    city,
+    address,
     companyLogo,
     title,
     workMode,
@@ -52,7 +53,8 @@ export const createJob = withServerActionAsyncCatcher<
       hasSalaryRange,
       minSalary,
       maxSalary,
-      location,
+      city,
+      address,
       companyLogo,
       workMode,
       isVerifiedJob: false, // Default to false since there's no session to check for admin role
@@ -73,8 +75,8 @@ export const getAllJobs = withServerActionAsyncCatcher<
   if (data?.salaryrange && !Array.isArray(data?.salaryrange)) {
     data.salaryrange = Array.of(data?.salaryrange);
   }
-  if (data?.location && !Array.isArray(data?.location)) {
-    data.location = Array.of(data?.location);
+  if (data?.city && !Array.isArray(data?.city)) {
+    data.city = Array.of(data?.city);
   }
   const result = JobQuerySchema.parse(data);
   const { filterQueries, orderBy, pagination } = getJobFilters(result);
@@ -90,7 +92,8 @@ export const getAllJobs = withServerActionAsyncCatcher<
       title: true,
       description: true,
       companyName: true,
-      location: true,
+      city: true,
+      address: true,
       workMode: true,
       minSalary: true,
       maxSalary: true,
@@ -131,7 +134,8 @@ export const getJobById = withServerActionAsyncCatcher<
       companyBio: true,
       companyEmail: true,
       companyLogo: true,
-      location: true,
+      city: true,
+      address: true,
       workMode: true,
       minSalary: true,
       maxSalary: true,
@@ -142,3 +146,15 @@ export const getJobById = withServerActionAsyncCatcher<
     job,
   }).serialize();
 });
+
+export const getCityFilters = async () => {
+  const response = await prisma.job.findMany({
+    select: {
+      city: true,
+    },
+  });
+  const cities = Array.from(new Set(response.map((res) => res.city)));
+  return new SuccessResponse(`Cities fetched successfully`, 200, {
+    cities,
+  }).serialize();
+};

src/app/[...404]/page.tsx

@@ -45,10 +45,10 @@ const Custom404Page = () => {
           className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-full transition-colors duration-300"
         >
           <Link href="/">
-            <a className="flex items-center">
+            <div className="flex items-center">
               <Home className="mr-2 h-5 w-5" />
               Return to Homepage
-            </a>
+            </div>
           </Link>
         </Button>
       </motion.div>

src/components/all-jobs.tsx

@@ -40,7 +40,7 @@ const AllJobs = async ({ searchParams }: PaginatorProps) => {
               <div className="flex gap-2 text-xs text-muted-foreground">
                 <span className="flex items-center gap-0.5">
                   <Icon icon="location" size={12} />
-                  {job.location}{' '}
+                  {job.address}{' '}
                   <span className="capitalize">({job.workMode})</span>
                 </span>
                 <span className="flex items-center gap-0.5">

src/components/gmaps-autosuggest.tsx

@@ -0,0 +1,42 @@
+import Script from 'next/script';
+import { Input } from './ui/input';
+
+export type TgmapsAddress = { city: string; fullAddress: string };
+
+export function GmapsAutocompleteAddress({ form }: { form: any }) {
+  let autocomplete: any = null;
+
+  function onPlaceChanged() {
+    const { name, formatted_address } = autocomplete.getPlace();
+    form.setValue('city', name);
+    form.setValue('address', formatted_address);
+  }
+
+  function initializeGmaps() {
+    if ((window as any).google) {
+      autocomplete = new (window as any).google.maps.places.Autocomplete(
+        document.getElementById('autocomplete'),
+        {
+          types: ['(cities)'],
+        }
+      );
+      autocomplete.addListener('place_changed', onPlaceChanged);
+    }
+  }
+  return (
+    <>
+      <Script
+        src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&libraries=places`}
+        strategy="lazyOnload"
+        onLoad={initializeGmaps}
+      />
+
+      <Input
+        id="autocomplete"
+        type="text"
+        className="w-full bg-gray-800 border-none text-white"
+        placeholder="Where is the job located?"
+      />
+    </>
+  );
+}

src/components/job-form.tsx

@@ -31,6 +31,7 @@ import Image from 'next/image';
 import { FaFileUpload } from 'react-icons/fa';
 import { Switch } from './ui/switch';
 import { Label } from './ui/label';
+import { GmapsAutocompleteAddress } from './gmaps-autosuggest';
 
 const PostJobForm = () => {
   const { toast } = useToast();
@@ -43,7 +44,8 @@ const PostJobForm = () => {
       companyName: '',
       companyBio: '',
       companyEmail: '',
-      location: undefined,
+      city: '',
+      address: '',
       companyLogo: '',
       workMode: 'remote',
       type: 'full-time',
@@ -119,7 +121,8 @@ const PostJobForm = () => {
 
   const handleFormSubmit = async (data: JobPostSchemaType) => {
     try {
-      data.companyLogo = (await submitImage(file)) ?? '';
+      data.companyLogo =
+        (await submitImage(file)) ?? 'https://wwww.example.com';
       ``;
       const response = await createJob(data);
       if (!response.status) {
@@ -351,22 +354,7 @@ const PostJobForm = () => {
               )}
             </div>
 
-            <FormField
-              control={form.control}
-              name="location"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="font-medium">Location</FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      className="w-full bg-gray-800 border-none text-white"
-                      placeholder="Where is the job located?"
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
+            <GmapsAutocompleteAddress form={form}></GmapsAutocompleteAddress>
 
             <FormField
               control={form.control}

src/layouts/footer.tsx

@@ -28,10 +28,10 @@ const Footer = () => {
           <div className="flex flex-col gap-2">
             <p className="font-bold text-base md:text-lg">Follow us on</p>
             <div className="flex gap-3">
-              {socials.map((social) => (
+              {socials.map((social, index) => (
                 <Link
                   target="_blank"
-                  key={social.href}
+                  key={social.href + index}
                   href={social.href}
                   aria-label={social.label}
                 >
@@ -48,9 +48,9 @@ const Footer = () => {
           <div className="flex flex-col gap-2 ">
             <p className="font-bold text-xl md:text-2xl">100xLinks</p>
 
-            {footerLinks['100xlinks'].map((link) => (
+            {footerLinks['100xlinks'].map((link, index) => (
               <Link
-                key={link.href}
+                key={link.href + index}
                 href={link.href}
                 className="text-foreground/60 hover:text-foreground/80 sm:text-lg font-light"
               >
@@ -61,9 +61,9 @@ const Footer = () => {
           <div className="flex flex-col gap-2 ">
             <p className="font-bold text-xl md:text-2xl">100xLegal</p>
 
-            {footerLinks['100xlegal'].map((link) => (
+            {footerLinks['100xlegal'].map((link, index) => (
               <Link
-                key={link.href}
+                key={link.href + index}
                 href={link.href}
                 className="text-foreground/60 hover:text-foreground/80 sm:text-lg font-light"
               >