├── .env.local.example
├── .eslintrc.json
├── .gitignore
├── README.md
├── components
    ├── data
    │   ├── cards
    │   │   └── JobCard.jsx
    │   ├── details
    │   │   ├── CompanyDetails.jsx
    │   │   └── JobDetails.jsx
    │   └── lists
    │   │   └── JobsList.jsx
    ├── forms
    │   ├── JobsPageSideBarForm.jsx
    │   ├── JobsSortForm.jsx
    │   ├── SearchJobForm.jsx
    │   └── TagsFilterForm.jsx
    ├── globals
    │   ├── Footer.jsx
    │   ├── Header.jsx
    │   └── Layout.jsx
    └── ui
    │   ├── JobsPage.jsx
    │   ├── LoadingSpinner.jsx
    │   └── PageNotFound.jsx
├── datalayer
    ├── contentful
    │   ├── client.js
    │   ├── company.js
    │   ├── job.js
    │   └── utils.js
    ├── index.js
    ├── strapi
    │   ├── client.js
    │   ├── company.js
    │   ├── job.js
    │   └── utils.js
    └── utils.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── 404.jsx
    ├── _app.js
    ├── api
    │   ├── hello.js
    │   ├── search-jobs.js
    │   └── test-strapi.js
    ├── company
    │   └── [slug].jsx
    ├── index.js
    └── job
    │   └── [slug].jsx
├── postcss.config.js
├── public
    ├── favicon.ico
    └── images
    │   ├── lifted.site-banner.png
    │   ├── liftedwp-banner.png
    │   ├── liftedwp-founder-avatar.png
    │   ├── logo-symbolic-main-512.png
    │   └── logo-text-and-symbolic-main.png
├── styles
    └── globals.css
└── tailwind.config.js


/.env.local.example:
--------------------------------------------------------------------------------
 1 | DATALAYER_ENGINE=strapi|contentful|datocms|sanity|prisma|faunadb|etc...
 2 | 
 3 | #### CONTENTFUL CMS ENV VARS ###
 4 | CONTENTFUL_SPACE_ID=[CHANGE]
 5 | CONTENTFUL_DELIVERY_API_TOKEN=[CHANGE]
 6 | CONTENTFUL_ENVIRONMENT=[CHANGE]
 7 | CONTENTFUL_IMAGES_DOMAIN=images.ctfassets.net
 8 | 
 9 | #### STRAPI CMS ENV VARS ###
10 | STRAPI_API_KEY=[CHANGE]
11 | 
12 | # LOCALHOST ONLY VALUES #
13 | STRAPI_ASSETS_BASE_URL=http://127.0.0.1:1337
14 | STRAPI_API_BASE_URL=http://127.0.0.1:1337/api
15 | STRAPI_IMAGES_DOMAIN=127.0.0.1
16 | 
17 | # RENDER ONLY VALUES #
18 | STRAPI_ASSETS_BASE_URL=https://strapi-5o1g.onrender.com
19 | STRAPI_API_BASE_URL=https://strapi-5o1g.onrender.com/api
20 | STRAPI_IMAGES_DOMAIN=strapi-5o1g.onrender.com
21 | 
22 | # HEROKU ONLY VALUES #
23 | 
24 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## TODO
2 | 


--------------------------------------------------------------------------------
/components/data/cards/JobCard.jsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | import Link from 'next/link';
 3 | 
 4 | const JobCard = ({ job }) => {
 5 |   //console.log(job);
 6 |   return (
 7 |     <div
 8 |       className={`shadow-lg rounded-sm border px-5 py-4 ${
 9 |         job.featuredJob
10 |           ? 'bg-amber-50 border-amber-300'
11 |           : 'bg-white border-slate-200'
12 |       }`}
13 |     >
14 |       <div className='md:flex justify-between items-center space-y-4 md:space-y-0 space-x-2'>
15 |         {/* Left side */}
16 |         <div className='flex items-start space-x-3 md:space-x-4'>
17 |           <div className='w-9 h-9 shrink-0 mt-1'>
18 |             <Image
19 |               className='w-9 h-9 rounded-full'
20 |               src={job.company.logo.url}
21 |               width={job.company.logo.width}
22 |               height={job.company.logo.height}
23 |               alt={`${job.company.name} - ${job.company.logo.alt}`}
24 |             />
25 |           </div>
26 |           <div>
27 |             <Link href={`/job/${job.slug}`}>
28 |               <a
29 |                 className='inline-flex font-semibold text-slate-800'
30 |                 href={`/job/${job.slug}`}
31 |               >
32 |                 {job.title}
33 |               </a>
34 |             </Link>
35 |             <div className='text-sm text-slate-500'>
36 |               {job.jobType} / {job.experienceLevel} / {job.company.city}{' '}
37 |               {job.remoteOk && '/ Remote Ok'}
38 |             </div>
39 |           </div>
40 |         </div>
41 |         {/* Right side */}
42 |         <div className='flex flex-col space-y-1 items-end'>
43 |           <div className='text-sm text-slate-900'>
44 |             £{job.baseAnnualSalary} / Year
45 |           </div>
46 |           <div className='flex items-center space-x-4 pl-10 md:pl-0'>
47 |             <div className='text-sm text-slate-500 italic whitespace-nowrap'>
48 |               {job.datePosted}
49 |             </div>
50 |             {job.featuredJob && (
51 |               <div
52 |                 className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 bg-amber-100 text-amber-600`}
53 |               >
54 |                 Featured
55 |               </div>
56 |             )}
57 |             <button className='text-slate-300 hover:text-slate-400'>
58 |               <span className='sr-only'>Bookmark</span>
59 |               <svg
60 |                 className='w-3 h-4 fill-current'
61 |                 width='12'
62 |                 height='16'
63 |                 xmlns='http://www.w3.org/2000/svg'
64 |               >
65 |                 <path d='M2 0C.9 0 0 .9 0 2v14l6-3 6 3V2c0-1.1-.9-2-2-2H2Z' />
66 |               </svg>
67 |             </button>
68 |           </div>
69 |         </div>
70 |       </div>
71 |     </div>
72 |   );
73 | };
74 | 
75 | export default JobCard;
76 | 


--------------------------------------------------------------------------------
/components/data/details/CompanyDetails.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Image from 'next/image';
  3 | import Link from 'next/link';
  4 | import { ChevronLeftIcon } from '@heroicons/react/solid';
  5 | import JobsList from '../lists/JobsList';
  6 | 
  7 | function groupArrayOfObjects(list, key) {
  8 |   return list.reduce(function (rv, x) {
  9 |     (rv[x[key]] = rv[x[key]] || []).push(x);
 10 |     return rv;
 11 |   }, {});
 12 | }
 13 | 
 14 | const CompanyDetails = ({ company, companyJobs }) => {
 15 |   console.log({ company, companyJobs });
 16 |   const jobsGroupedByCategories = groupArrayOfObjects(
 17 |     companyJobs,
 18 |     'jobCategory'
 19 |   );
 20 |   console.log('jobsGroupedByCategories = ', jobsGroupedByCategories);
 21 |   return (
 22 |     <>
 23 |       <main>
 24 |         {/* Profile background */}
 25 |         <div className='h-30 md:56 bg-slate-200'>
 26 |           <Image
 27 |             className='object-cover h-full w-full'
 28 |             src={company.coverImage.url}
 29 |             width={company.coverImage.width}
 30 |             height={company.coverImage.height}
 31 |             alt={`cover image - ${company.name} - ${company.slogan}`}
 32 |           />
 33 |         </div>
 34 | 
 35 |         {/* Header */}
 36 |         <header className='text-center bg-slate-50 pb-6 border-b border-slate-200'>
 37 |           <div className='px-4 sm:px-6 lg:px-8 w-full'>
 38 |             <div className='max-w-3xl mx-auto'>
 39 |               {/* Avatar */}
 40 |               <div className='-mt-12 mb-2'>
 41 |                 <div className='inline-flex -ml-1 -mt-1 sm:mb-0'>
 42 |                   <Image
 43 |                     className='rounded-full border-4 border-white'
 44 |                     src={company.logo.url}
 45 |                     width={80}
 46 |                     height={80}
 47 |                     alt={`logo - ${company.name} - ${company.slogan}`}
 48 |                   />
 49 |                 </div>
 50 |               </div>
 51 | 
 52 |               {/* Company name and info */}
 53 |               <div className='mb-4'>
 54 |                 <h2 className='text-2xl text-slate-800 font-bold mb-2'>
 55 |                   {company.name}
 56 |                 </h2>
 57 |                 <p>{company.slogan}</p>
 58 |               </div>
 59 | 
 60 |               {/* Meta */}
 61 |               <div className='inline-flex flex-wrap justify-center sm:justify-start space-x-4'>
 62 |                 <div className='flex items-center'>
 63 |                   <svg
 64 |                     className='w-4 h-4 fill-current shrink-0 text-slate-400'
 65 |                     viewBox='0 0 16 16'
 66 |                   >
 67 |                     <path d='M8 8.992a2 2 0 1 1-.002-3.998A2 2 0 0 1 8 8.992Zm-.7 6.694c-.1-.1-4.2-3.696-4.2-3.796C1.7 10.69 1 8.892 1 6.994 1 3.097 4.1 0 8 0s7 3.097 7 6.994c0 1.898-.7 3.697-2.1 4.996-.1.1-4.1 3.696-4.2 3.796-.4.3-1 .3-1.4-.1Zm-2.7-4.995L8 13.688l3.4-2.997c1-1 1.6-2.198 1.6-3.597 0-2.798-2.2-4.996-5-4.996S3 4.196 3 6.994c0 1.399.6 2.698 1.6 3.697 0-.1 0-.1 0 0Z' />
 68 |                   </svg>
 69 |                   <span className='text-sm font-medium whitespace-nowrap text-slate-500 ml-2'>
 70 |                     {company.city}
 71 |                   </span>
 72 |                 </div>
 73 |                 <div className='flex items-center'>
 74 |                   <svg
 75 |                     className='w-4 h-4 fill-current shrink-0 text-slate-400'
 76 |                     viewBox='0 0 16 16'
 77 |                   >
 78 |                     <path d='M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z' />
 79 |                   </svg>
 80 |                   <a
 81 |                     className='text-sm font-medium whitespace-nowrap text-indigo-500 hover:text-indigo-700 ml-2'
 82 |                     href={company.website}
 83 |                   >
 84 |                     {company.website}
 85 |                   </a>
 86 |                 </div>
 87 |               </div>
 88 |             </div>
 89 |           </div>
 90 |         </header>
 91 | 
 92 |         {/* Page content */}
 93 | 
 94 |         <div className='px-4 sm:px-6 lg:px-8 py-8 w-full'>
 95 |           <div className='max-w-3xl mx-auto'>
 96 |             <h3 className='text-xl leading-snug text-slate-800 font-bold mb-6'>
 97 |               Open Positions at {company.name}
 98 |             </h3>
 99 | 
100 |             {/* Job lists */}
101 |             <div className='space-y-6'>
102 |               {jobsGroupedByCategories &&
103 |                 Object.keys(jobsGroupedByCategories).map((jobCategory) => {
104 |                   const jobs = jobsGroupedByCategories[jobCategory];
105 |                   return (
106 |                     <div key={jobCategory}>
107 |                       <h4 className='text-slate-800 font-medium mb-4'>
108 |                         {jobCategory}
109 |                       </h4>
110 |                       {/* Job category list */}
111 |                       <JobsList jobs={jobs} />
112 |                     </div>
113 |                   );
114 |                 })}
115 |             </div>
116 | 
117 |             <div className='mt-6'>
118 |               <Link href='/'>
119 |                 <a className='inline-flex justity-center items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'>
120 |                   <ChevronLeftIcon
121 |                     className='mr-3 h-5 w-5'
122 |                     aria-hidden='true'
123 |                   />
124 |                   All Jobs
125 |                 </a>
126 |               </Link>
127 |             </div>
128 |           </div>
129 |         </div>
130 |       </main>
131 |     </>
132 |   );
133 | };
134 | 
135 | export default CompanyDetails;
136 | 


--------------------------------------------------------------------------------
/components/data/details/JobDetails.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Link from 'next/link';
  3 | import Image from 'next/image';
  4 | 
  5 | import { ArrowRightIcon, ChevronLeftIcon } from '@heroicons/react/solid';
  6 | 
  7 | import JobCard from '../cards/JobCard';
  8 | 
  9 | const JobDetails = ({ job }) => {
 10 |   return (
 11 |     <div className='px-4 sm:px-6 lg:px-8 py-8 w-full'>
 12 |       {/* Page content */}
 13 |       <div className='max-w-7xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16'>
 14 |         {/* Content */}
 15 |         <div>
 16 |           <div className='mb-6'>
 17 |             <Link href='/'>
 18 |               <a className='inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'>
 19 |                 <ChevronLeftIcon className='mr-3 h-5 w-5' aria-hidden='true' />
 20 |                 Back To Jobs
 21 |               </a>
 22 |             </Link>
 23 |           </div>
 24 |           <div className='text-xs text-slate-500 italic mb-2'>
 25 |             Posted On: <span className='font-semibold'>{job.datePosted}</span>
 26 |             {'  -  '}
 27 |             Job Category:{' '}
 28 |             <span className='font-semibold'>{job.jobCategory}</span>
 29 |           </div>
 30 |           <header className='mb-4'>
 31 |             {/* Title */}
 32 |             <h1 className='text-2xl md:text-3xl text-slate-800 font-bold'>
 33 |               {job.title}
 34 |             </h1>
 35 | 
 36 |             {/* Important Job Details */}
 37 |             <div className='md:flex justify-between items-center space-y-4 md:space-y-0 space-x-2 mt-2'>
 38 |               {/* Left side */}
 39 |               <div className='flex items-start space-x-3 md:space-x-4'>
 40 |                 <div>
 41 |                   <div className='text-sm text-slate-500'>
 42 |                     {job.jobType} / {job.experienceLevel} / {job.company.city}{' '}
 43 |                     {job.remoteOk && '/ Remote Ok'}
 44 |                   </div>
 45 |                   {/* Skill Tags */}
 46 |                   <div>
 47 |                     <div className='flex flex-wrap items-center -m-1'>
 48 |                       {job.skills &&
 49 |                         job.skills.map((skill) => (
 50 |                           <div className='m-1' key={skill}>
 51 |                             <a
 52 |                               className='text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1'
 53 |                               href='#'
 54 |                             >
 55 |                               {skill}
 56 |                             </a>
 57 |                           </div>
 58 |                         ))}
 59 |                       
 60 |                     </div>
 61 |                   </div>
 62 |                 </div>
 63 |               </div>
 64 |               {/* Right side */}
 65 |               <div className='flex flex-col space-y-1 items-end'>
 66 |                 <div className='text-sm text-slate-900'>
 67 |                   £{job.baseAnnualSalary} / Year
 68 |                 </div>
 69 |                 <div className='flex items-center space-x-4 pl-10 md:pl-0'>
 70 |                   {job.featuredJob && (
 71 |                     <div
 72 |                       className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 bg-amber-100 text-amber-600`}
 73 |                     >
 74 |                       Featured
 75 |                     </div>
 76 |                   )}
 77 |                   <button className='text-slate-300 hover:text-slate-400 mt-1'>
 78 |                     <span className='sr-only'>Bookmark</span>
 79 |                     <svg
 80 |                       className='w-3 h-4 fill-current'
 81 |                       width='12'
 82 |                       height='16'
 83 |                       xmlns='http://www.w3.org/2000/svg'
 84 |                     >
 85 |                       <path d='M2 0C.9 0 0 .9 0 2v14l6-3 6 3V2c0-1.1-.9-2-2-2H2Z' />
 86 |                     </svg>
 87 |                   </button>
 88 |                 </div>
 89 |               </div>
 90 |             </div>
 91 |           </header>
 92 | 
 93 |           {/* Company information (mobile) */}
 94 |           <div className='bg-white p-5 shadow-lg rounded-sm border border-slate-200 mb-6 lg:hidden'>
 95 |             <div className='text-center mb-6'>
 96 |               <div className='inline-flex mb-3'>
 97 |                 <Image
 98 |                   className='w-16 h-16 rounded-full'
 99 |                   src={job.company.logo.url}
100 |                   width={job.company.logo.width}
101 |                   height={job.company.logo.height}
102 |                   alt={`${job.company.name} - ${job.company.logo.alt}`}
103 |                 />
104 |               </div>
105 |               <div className='text-lg font-bold text-slate-800 mb-1'>
106 |                 {job.company.name}
107 |               </div>
108 |               <div className='text-sm text-slate-500 italic'>
109 |                 {job.company.city}
110 |               </div>
111 |             </div>
112 |             <div className='space-y-2 sm:flex sm:space-y-0 sm:space-x-2'>
113 |               <a
114 |                 href={job.applicationLink}
115 |                 className='flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
116 |               >
117 |                 Apply Today
118 |                 <ArrowRightIcon
119 |                   className='ml-4 mr-3 h-5 w-5'
120 |                   aria-hidden='true'
121 |                 />
122 |               </a>
123 | 
124 |               <Link href={`/company/${job.company.slug}`}>
125 |                 <a
126 |                   href={`/company/${job.company.slug}`}
127 |                   className='flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-slate-700 ring-slate-600 bg-slate-200 hover:bg-slate-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-700'
128 |                 >
129 |                   All Company Jobs
130 |                   <ArrowRightIcon
131 |                     className='ml-4 mr-3 h-5 w-5'
132 |                     aria-hidden='true'
133 |                   />
134 |                 </a>
135 |               </Link>
136 |             </div>
137 |           </div>
138 | 
139 |           <hr className='my-6 border-t border-slate-200' />
140 | 
141 |           {/* The Role */}
142 |           <div>
143 |             <h2 className='text-xl leading-snug text-slate-800 font-bold mb-2'>
144 |               The Role
145 |             </h2>
146 |             <div
147 |               className='space-y-6 text-slate-500 font-normal text-sm'
148 |               dangerouslySetInnerHTML={{
149 |                 __html: job.jobDescription,
150 |               }}
151 |             ></div>
152 |           </div>
153 |           <hr className='my-6 border-t border-slate-200' />
154 | 
155 |           {/* About You */}
156 |           <div>
157 |             <h2 className='text-xl leading-snug text-slate-800 font-bold mb-2'>
158 |               About You
159 |             </h2>
160 |             <div
161 |               className='space-y-6 text-slate-500 font-normal text-sm'
162 |               dangerouslySetInnerHTML={{
163 |                 __html: job.aboutYou,
164 |               }}
165 |             ></div>
166 |           </div>
167 |           <hr className='my-6 border-t border-slate-200' />
168 | 
169 |           {/* Your Responsabilities */}
170 |           <div>
171 |             <h2 className='text-xl leading-snug text-slate-800 font-bold mb-2'>
172 |               Your Responsabilities
173 |             </h2>
174 |             <div
175 |               className='space-y-6 text-slate-500 font-normal text-sm'
176 |               dangerouslySetInnerHTML={{
177 |                 __html: job.jobResponsibilities,
178 |               }}
179 |             ></div>
180 |           </div>
181 |           <hr className='my-6 border-t border-slate-200' />
182 | 
183 |           {/* Remuneration */}
184 |           <div>
185 |             <h2 className='text-xl leading-snug text-slate-800 font-bold mb-2'>
186 |               Remuneration
187 |             </h2>
188 |             <div
189 |               className='space-y-6 text-slate-500 font-normal text-sm'
190 |               dangerouslySetInnerHTML={{
191 |                 __html: job.remunerationPackage,
192 |               }}
193 |             ></div>
194 |           </div>
195 |           <hr className='my-6 border-t border-slate-200' />
196 | 
197 |           {/* Apply section */}
198 |           <div className='mt-6'>
199 |             <p className='font-medium text-slate-800 italic mb-6'>
200 |               Do you have what it takes?
201 |             </p>
202 |             <div className='flex justify-between items-center'>
203 |               {/* Apply button */}
204 | 
205 |               <a
206 |                 href={job.applicationLink}
207 |                 className='inline-flex items-center justify-center p-2 bg-indigo-500 hover:bg-indigo-600 text-white'
208 |               >
209 |                 Apply Today{' '}
210 |                 <ArrowRightIcon
211 |                   className='ml-4 mr-3 h-5 w-5'
212 |                   aria-hidden='true'
213 |                 />
214 |               </a>
215 |               {/* Share */}
216 |               <div className='flex items-center'>
217 |                 <div className='text-sm text-slate-500 italic mr-4'>Share:</div>
218 |                 <div className='flex items-center space-x-3'>
219 |                   <button className='text-slate-400 hover:text-indigo-500'>
220 |                     <span className='sr-only'>Share on Twitter</span>
221 |                     <svg
222 |                       className='w-4 h-4 fill-current'
223 |                       viewBox='0 0 16 16'
224 |                       xmlns='http://www.w3.org/2000/svg'
225 |                     >
226 |                       <path d='M16 3.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8Z' />
227 |                     </svg>
228 |                   </button>
229 |                   <button className='text-slate-400 hover:text-indigo-500'>
230 |                     <span className='sr-only'>Share on Facebook</span>
231 |                     <svg
232 |                       className='w-4 h-4 fill-current'
233 |                       viewBox='0 0 16 16'
234 |                       xmlns='http://www.w3.org/2000/svg'
235 |                     >
236 |                       <path d='M6.023 16 6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023Z' />
237 |                     </svg>
238 |                   </button>
239 |                   <button className='text-slate-400 hover:text-indigo-500'>
240 |                     <span className='sr-only'>Share on Linkedin</span>
241 |                     <svg
242 |                       className='w-4 h-4 fill-current'
243 |                       viewBox='0 0 16 16'
244 |                       xmlns='http://www.w3.org/2000/svg'
245 |                     >
246 |                       <path d='M0 1.146C0 .514.53 0 1.182 0h13.635C15.471 0 16 .513 16 1.146v13.708c0 .633-.53 1.146-1.183 1.146H1.182C.53 16 0 15.487 0 14.854V1.146ZM4.862 13.39V6.187H2.468v7.203h2.394ZM3.666 5.203c.834 0 1.354-.553 1.354-1.244-.016-.707-.52-1.245-1.338-1.245-.82 0-1.355.538-1.355 1.245 0 .691.52 1.244 1.323 1.244h.015Zm2.522 8.187h2.394V9.368c0-.215.015-.43.078-.584.173-.43.567-.876 1.229-.876.866 0 1.213.66 1.213 1.629v3.853h2.394V9.26c0-2.213-1.181-3.242-2.756-3.242-1.292 0-1.86.722-2.174 1.213h.016V6.187H6.188c.03.676 0 7.203 0 7.203Z' />
247 |                     </svg>
248 |                   </button>
249 |                 </div>
250 |               </div>
251 |             </div>
252 |           </div>
253 |           <hr className='my-6 border-t border-slate-200' />
254 | 
255 |           {/* Related Jobs */}
256 |           {job.relatedJobs.length ? (
257 |             <div>
258 |               <h2 className='text-xl leading-snug text-slate-800 font-bold mb-6'>
259 |                 Related Jobs
260 |               </h2>
261 |               <div className='space-y-2 mt-6'>
262 |                 {job.relatedJobs.map((job) => {
263 |                   return <JobCard key={job.id} job={job} />;
264 |                 })}
265 |               </div>
266 |             </div>
267 |           ) : null}
268 |         </div>
269 | 
270 |         {/* Sidebar */}
271 |         <div className='hidden lg:block space-y-4'>
272 |           {/* Company information (desktop) */}
273 |           <div className='bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80'>
274 |             <div className='text-center mb-6'>
275 |               <div className='inline-flex mb-3'>
276 |                 <Image
277 |                   className='w-16 h-16 rounded-full'
278 |                   src={job.company.logo.url}
279 |                   width={job.company.logo.width}
280 |                   height={job.company.logo.height}
281 |                   alt={`${job.company.name} - ${job.company.logo.alt}`}
282 |                 />
283 |               </div>
284 |               <div className='text-lg font-bold text-slate-800 mb-1'>
285 |                 {job.company.name}
286 |               </div>
287 |               <div className='text-sm text-slate-500 italic'>
288 |                 {job.company.city}
289 |               </div>
290 |             </div>
291 |             <div className='space-y-2'>
292 |               <a
293 |                 href={job.applicationLink}
294 |                 className='inline-flex items-center justify-center w-full p-2 bg-indigo-500 hover:bg-indigo-600 text-white'
295 |               >
296 |                 Apply Today{' '}
297 |                 <ArrowRightIcon
298 |                   className='ml-4 mr-3 h-5 w-5'
299 |                   aria-hidden='true'
300 |                 />
301 |               </a>
302 | 
303 |               <Link href={`/company/${job.company.slug}`}>
304 |                 <a
305 |                   href={`/company/${job.company.slug}`}
306 |                   className='flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-slate-700 ring-slate-600 bg-slate-200 hover:bg-slate-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-700'
307 |                 >
308 |                   All Company Jobs
309 |                   <ArrowRightIcon
310 |                     className='ml-4 mr-3 h-5 w-5'
311 |                     aria-hidden='true'
312 |                   />
313 |                 </a>
314 |               </Link>
315 |             </div>
316 |           </div>
317 |         </div>
318 |       </div>
319 |     </div>
320 |   );
321 | };
322 | 
323 | export default JobDetails;
324 | 


--------------------------------------------------------------------------------
/components/data/lists/JobsList.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import JobCard from '../cards/JobCard';
 3 | 
 4 | const JobsList = ({ jobs }) => {
 5 |   return (
 6 |     <div>
 7 |       {jobs.map((job) => (
 8 |         <JobCard job={job} key={job.id} />
 9 |       ))}
10 |     </div>
11 |   );
12 | };
13 | 
14 | export default JobsList;
15 | 


--------------------------------------------------------------------------------
/components/forms/JobsPageSideBarForm.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { Switch } from '@headlessui/react';
  3 | import TagsFilterForm from './TagsFilterForm';
  4 | 
  5 | function classNames(...classes) {
  6 |   return classes.filter(Boolean).join(' ');
  7 | }
  8 | 
  9 | function JobsPageSideBarForm({
 10 |   jobSkills,
 11 |   sideBarFormState,
 12 |   setSideBarFormState,
 13 |   setDisplayedJobs,
 14 | }) {
 15 |   const jobTypesOptions = [
 16 |     { value: 'full-time', display: 'Full Time' },
 17 |     { value: 'part-time', display: 'Part Time' },
 18 |     { value: 'internship', display: 'Internship' },
 19 |     { value: 'contract', display: 'Contract' },
 20 |   ];
 21 | 
 22 |   const experienceLevelsOptions = [
 23 |     { value: 'junior', display: 'Junior' },
 24 |     { value: 'medior', display: 'Medior' },
 25 |     { value: 'senior', display: 'Senior' },
 26 |     { value: 'tech-lead', display: 'Tech Lead' },
 27 |   ];
 28 | 
 29 |   const baseSalaryRangesOptions = [
 30 |     { value: '<20K', display: '< £20K', bounds: { min: 0, max: 20000 } },
 31 |     {
 32 |       value: '20K-50K',
 33 |       display: '£20K - £50K',
 34 |       bounds: { min: 20001, max: 50000 },
 35 |     },
 36 |     {
 37 |       value: '50K-100K',
 38 |       display: '£50K - £100K',
 39 |       bounds: { min: 50001, max: 100000 },
 40 |     },
 41 |     {
 42 |       value: '> 100K',
 43 |       display: '> £100K',
 44 |       bounds: { min: 100001, max: 1000000 },
 45 |     },
 46 |   ];
 47 | 
 48 |   const handleRemoteOkChange = (checked) => {
 49 |     console.log(checked);
 50 |     //TODO: send request and filter jobs
 51 |     setSideBarFormState((prevState) => {
 52 |       return { ...prevState, remoteOkOnly: !prevState.remoteOkOnly };
 53 |     });
 54 |   };
 55 | 
 56 |   const handleFeaturedJobsOnlyChange = (checked) => {
 57 |     console.log(checked);
 58 |     //TODO: send request and filter jobs
 59 |     setSideBarFormState((prevState) => {
 60 |       return { ...prevState, featuredJobsOnly: !prevState.featuredJobsOnly };
 61 |     });
 62 |   };
 63 | 
 64 |   const handleJobTypeSelect = (e, option) => {
 65 |     console.log(e.target.checked, option);
 66 |     if (e.target.checked) {
 67 |       setSideBarFormState((prevState) => {
 68 |         const jobTypes = [...prevState.jobTypes];
 69 |         jobTypes.push(option);
 70 |         return { ...prevState, jobTypes };
 71 |       });
 72 |     } else {
 73 |       setSideBarFormState((prevState) => {
 74 |         return {
 75 |           ...prevState,
 76 |           jobTypes: prevState.jobTypes.filter((jobType) => option != jobType),
 77 |         };
 78 |       });
 79 |     }
 80 |   };
 81 | 
 82 |   const handleExperienceLevelsSelect = (e, option) => {
 83 |     console.log(e.target.checked, option);
 84 |     if (e.target.checked) {
 85 |       setSideBarFormState((prevState) => {
 86 |         const experienceLevels = [...prevState.experienceLevels];
 87 |         experienceLevels.push(option);
 88 |         return { ...prevState, experienceLevels };
 89 |       });
 90 |     } else {
 91 |       setSideBarFormState((prevState) => {
 92 |         return {
 93 |           ...prevState,
 94 |           experienceLevels: prevState.experienceLevels.filter(
 95 |             (experienceLevel) => option != experienceLevel
 96 |           ),
 97 |         };
 98 |       });
 99 |     }
100 |   };
101 | 
102 |   const handleBaseSalaryRangesSelect = (e, option, bounds) => {
103 |     console.log(e.target.checked, option, bounds);
104 |     if (e.target.checked) {
105 |       setSideBarFormState((prevState) => {
106 |         const baseSalaryOptions = [...prevState.baseSalaryOptions];
107 |         baseSalaryOptions.push(option);
108 | 
109 |         const baseSalaryBounds = [...prevState.baseSalaryBounds];
110 |         baseSalaryBounds.push(bounds.min);
111 |         baseSalaryBounds.push(bounds.max);
112 | 
113 |         const newFormState = {
114 |           ...prevState,
115 |           baseSalaryOptions,
116 |           baseSalaryBounds,
117 |         };
118 |         console.log(newFormState);
119 |         return newFormState;
120 |       });
121 |     } else {
122 |       setSideBarFormState((prevState) => {
123 |         const newFormState = {
124 |           ...prevState,
125 |           baseSalaryOptions: prevState.baseSalaryOptions.filter(
126 |             (baseSalaryOption) => option != baseSalaryOption
127 |           ),
128 |           baseSalaryBounds: prevState.baseSalaryBounds.filter(
129 |             (bound) => ![bounds.min, bounds.max].includes(bound)
130 |           ),
131 |         };
132 | 
133 |         console.log(newFormState);
134 |         return newFormState;
135 |       });
136 |     }
137 |   };
138 | 
139 |   return (
140 |     <div className='space-y-8'>
141 |       {/* White box */}
142 |       <div className='bg-white shadow-lg rounded-sm border border-slate-200 p-5'>
143 |         <div className='grid md:grid-cols-2 xl:grid-cols-1 gap-6'>
144 |           {/* Group 0*/}
145 |           <TagsFilterForm
146 |             jobSkills={jobSkills}
147 |             selectedTags={sideBarFormState.selectedTags}
148 |             setSideBarFormState={setSideBarFormState}
149 |           />
150 | 
151 |           {/* Group 1 */}
152 |           <Switch.Group as='div' className='flex items-center'>
153 |             <Switch
154 |               checked={sideBarFormState.remoteOkOnly}
155 |               onChange={handleRemoteOkChange}
156 |               className={classNames(
157 |                 sideBarFormState.remoteOkOnly ? 'bg-indigo-600' : 'bg-gray-200',
158 |                 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
159 |               )}
160 |             >
161 |               <span
162 |                 aria-hidden='true'
163 |                 className={classNames(
164 |                   sideBarFormState.remoteOkOnly
165 |                     ? 'translate-x-5'
166 |                     : 'translate-x-0',
167 |                   'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
168 |                 )}
169 |               />
170 |             </Switch>
171 |             <Switch.Label as='span' className='ml-3'>
172 |               <span className='text-sm font-medium text-gray-900'>
173 |                 Remote Ok Only
174 |               </span>
175 |             </Switch.Label>
176 |           </Switch.Group>
177 | 
178 |           {/* Group 2 */}
179 |           <Switch.Group as='div' className='flex items-center'>
180 |             <Switch
181 |               checked={sideBarFormState.featuredJobsOnly}
182 |               onChange={handleFeaturedJobsOnlyChange}
183 |               className={classNames(
184 |                 sideBarFormState.featuredJobsOnly
185 |                   ? 'bg-indigo-600'
186 |                   : 'bg-gray-200',
187 |                 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
188 |               )}
189 |             >
190 |               <span
191 |                 aria-hidden='true'
192 |                 className={classNames(
193 |                   sideBarFormState.featuredJobsOnly
194 |                     ? 'translate-x-5'
195 |                     : 'translate-x-0',
196 |                   'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
197 |                 )}
198 |               />
199 |             </Switch>
200 |             <Switch.Label as='span' className='ml-3'>
201 |               <span className='text-sm font-medium text-gray-900'>
202 |                 Featured Jobs Only
203 |               </span>
204 |             </Switch.Label>
205 |           </Switch.Group>
206 | 
207 |           {/* Group 3 */}
208 |           <div>
209 |             <div className='text-sm text-slate-800 font-semibold mb-3'>
210 |               Job Types
211 |             </div>
212 |             <ul className='space-y-2'>
213 |               {jobTypesOptions.map((option) => {
214 |                 return (
215 |                   <li key={option.value}>
216 |                     <label className='flex items-center'>
217 |                       <input
218 |                         type='checkbox'
219 |                         className='form-checkbox'
220 |                         onChange={(e) => handleJobTypeSelect(e, option.value)}
221 |                         checked={sideBarFormState.jobTypes.includes(
222 |                           option.value
223 |                         )}
224 |                       />
225 |                       <span className='text-sm text-slate-600 font-medium ml-2'>
226 |                         {option.display}
227 |                       </span>
228 |                     </label>
229 |                   </li>
230 |                 );
231 |               })}
232 |             </ul>
233 |           </div>
234 | 
235 |           {/* Group 4 */}
236 |           <div>
237 |             <div className='text-sm text-slate-800 font-semibold mb-3'>
238 |               Experience Level
239 |             </div>
240 |             <ul className='space-y-2'>
241 |               {experienceLevelsOptions.map((option) => {
242 |                 return (
243 |                   <li key={option.value}>
244 |                     <label className='flex items-center'>
245 |                       <input
246 |                         type='checkbox'
247 |                         className='form-checkbox'
248 |                         onChange={(e) =>
249 |                           handleExperienceLevelsSelect(e, option.value)
250 |                         }
251 |                         checked={sideBarFormState.experienceLevels.includes(
252 |                           option.value
253 |                         )}
254 |                       />
255 |                       <span className='text-sm text-slate-600 font-medium ml-2'>
256 |                         {option.display}
257 |                       </span>
258 |                     </label>
259 |                   </li>
260 |                 );
261 |               })}
262 |             </ul>
263 |           </div>
264 | 
265 |           {/* Group 5 */}
266 |           <div>
267 |             <div className='text-sm text-slate-800 font-semibold mb-3'>
268 |               Salary Range
269 |             </div>
270 |             <ul className='space-y-2'>
271 |               {baseSalaryRangesOptions.map((option) => {
272 |                 return (
273 |                   <li key={option.value}>
274 |                     <label className='flex items-center'>
275 |                       <input
276 |                         type='checkbox'
277 |                         className='form-checkbox'
278 |                         onChange={(e) =>
279 |                           handleBaseSalaryRangesSelect(
280 |                             e,
281 |                             option.value,
282 |                             option.bounds
283 |                           )
284 |                         }
285 |                         checked={sideBarFormState.baseSalaryOptions.includes(
286 |                           option.value
287 |                         )}
288 |                       />
289 |                       <span className='text-sm text-slate-600 font-medium ml-2'>
290 |                         {option.display}
291 |                       </span>
292 |                     </label>
293 |                   </li>
294 |                 );
295 |               })}
296 |             </ul>
297 |           </div>
298 |         </div>
299 |       </div>
300 |       {/* Alert */}
301 |       <div className='relative bg-indigo-200 rounded-sm p-5 min-w-60'>
302 |         <div className='absolute bottom-0 -mb-3'>
303 |           <svg
304 |             width='44'
305 |             height='42'
306 |             xmlns='http://www.w3.org/2000/svg'
307 |             xmlnsXlink='http://www.w3.org/1999/xlink'
308 |           >
309 |             <defs>
310 |               <linearGradient x1='50%' y1='0%' x2='50%' y2='100%' id='ill-b'>
311 |                 <stop stopColor='#A5B4FC' offset='0%' />
312 |                 <stop stopColor='#818CF8' offset='100%' />
313 |               </linearGradient>
314 |               <linearGradient
315 |                 x1='50%'
316 |                 y1='24.537%'
317 |                 x2='50%'
318 |                 y2='100%'
319 |                 id='ill-c'
320 |               >
321 |                 <stop stopColor='#4338CA' offset='0%' />
322 |                 <stop stopColor='#6366F1' stopOpacity='0' offset='100%' />
323 |               </linearGradient>
324 |               <path id='ill-a' d='m20 0 20 40-20-6.25L0 40z' />
325 |             </defs>
326 |             <g
327 |               transform='scale(-1 1) rotate(-51 -11.267 67.017)'
328 |               fill='none'
329 |               fillRule='evenodd'
330 |             >
331 |               <mask id='ill-d' fill='#fff'>
332 |                 <use xlinkHref='#ill-a' />
333 |               </mask>
334 |               <use fill='url(#ill-b)' xlinkHref='#ill-a' />
335 |               <path
336 |                 fill='url(#ill-c)'
337 |                 mask='url(#ill-d)'
338 |                 d='M20.586-7.913h25v47.5h-25z'
339 |               />
340 |             </g>
341 |           </svg>
342 |         </div>
343 |         <div className='relative'>
344 |           <div className='text-sm font-medium text-slate-800 mb-2'>
345 |             Remember to keep track of your job research.
346 |           </div>
347 |           <div className='text-right'>
348 |             <a
349 |               className='text-sm font-medium text-indigo-500 hover:text-indigo-600'
350 |               href='#0'
351 |             >
352 |               Create Alert -&gt;
353 |             </a>
354 |           </div>
355 |         </div>
356 |       </div>
357 |     </div>
358 |   );
359 | }
360 | 
361 | export default JobsPageSideBarForm;
362 | 


--------------------------------------------------------------------------------
/components/forms/JobsSortForm.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import {
 3 |   sortJobsByDatePosted,
 4 |   sortJobsByBaseAnnualSalary,
 5 |   sortJobsByCompanyName,
 6 | } from '../../datalayer/utils';
 7 | 
 8 | const JobsSortForm = ({ jobs, setDisplayedJobs }) => {
 9 |   const [sortby, setSortby] = useState('date-posted');
10 | 
11 |   const handleChange = (e) => {
12 |     e.preventDefault();
13 |     const newSortby = e.target.value;
14 |     if (newSortby === 'date-posted-asc') {
15 |       const sortedJobs = sortJobsByDatePosted({ jobs, ASC: true });
16 |       setDisplayedJobs(sortedJobs);
17 |     }
18 |     if (newSortby === 'date-posted-desc') {
19 |       const sortedJobs = sortJobsByDatePosted({ jobs, ASC: false });
20 |       setDisplayedJobs(sortedJobs);
21 |     }
22 |     if (newSortby === 'salary-asc') {
23 |       const sortedJobs = sortJobsByBaseAnnualSalary({ jobs, ASC: true });
24 |       setDisplayedJobs(sortedJobs);
25 |     }
26 |     if (newSortby === 'salary-desc') {
27 |       const sortedJobs = sortJobsByBaseAnnualSalary({ jobs, ASC: false });
28 |       setDisplayedJobs(sortedJobs);
29 |     }
30 |     if (newSortby === 'company') {
31 |       const sortedJobs = sortJobsByCompanyName({ jobs });
32 |       setDisplayedJobs(sortedJobs);
33 |     }
34 |     setSortby(newSortby);
35 | 
36 |     //TODO: create a function to sort the jobs based on the new selected value
37 |   };
38 | 
39 |   const options = [
40 |     { value: 'company', display: 'Company' },
41 |     { value: 'date-posted-asc', display: 'Date Posted ASC' },
42 |     { value: 'date-posted-desc', display: 'Date Posted DESC' },
43 |     { value: 'salary-asc', display: 'Salary ASC' },
44 |     { value: 'salary-desc', display: 'Salary DESC' },
45 |   ];
46 | 
47 |   return (
48 |     <div>
49 |       {/* Sort */}
50 |       <div className='flex items-center space-x-2'>
51 |         <label
52 |           htmlFor='sorting'
53 |           className='block text-sm font-sm text-gray-500 italic w-full'
54 |         >
55 |           Sort By
56 |         </label>
57 |         <select
58 |           id='sorting'
59 |           name='sorting'
60 |           onChange={handleChange}
61 |           className='mt-1 block  pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm'
62 |           defaultValue={sortby}
63 |         >
64 |           {options.map((option) => (
65 |             <option key={option.value} value={option.value}>
66 |               {option.display}
67 |             </option>
68 |           ))}
69 |         </select>
70 |       </div>
71 |     </div>
72 |   );
73 | };
74 | 
75 | export default JobsSortForm;
76 | 


--------------------------------------------------------------------------------
/components/forms/SearchJobForm.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | const SearchJobForm = ({
 4 |   searchFormState,
 5 |   setSearchFormState,
 6 |   setDisplayedJobs,
 7 | }) => {
 8 |   const handleSubmit = (e) => {
 9 |     e.preventDefault();
10 |     console.log(searchFormState);
11 |     if (searchFormState) {
12 |       // we don't have much to do here since the useEffect Hook is already listening to changes on this state
13 |       console.log(`Searching: ${searchFormState}`);
14 |     }
15 |   };
16 | 
17 |   return (
18 |     <div className='mb-5'>
19 |       <form className='relative' onSubmit={handleSubmit}>
20 |         <label htmlFor='job-search' className='sr-only'>
21 |           Search
22 |         </label>
23 |         <input
24 |           id='job-search'
25 |           className='form-input w-full pl-9 focus:border-slate-300'
26 |           type='search'
27 |           placeholder='Search job title or keyword…'
28 |           value={searchFormState}
29 |           onChange={(e) => setSearchFormState(e.target.value)}
30 |         />
31 |         <button
32 |           className='absolute inset-0 right-auto group'
33 |           type='submit'
34 |           aria-label='Search'
35 |         >
36 |           <svg
37 |             className='w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2'
38 |             viewBox='0 0 16 16'
39 |             xmlns='http://www.w3.org/2000/svg'
40 |           >
41 |             <path d='M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z' />
42 |             <path d='M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z' />
43 |           </svg>
44 |         </button>
45 |       </form>
46 |     </div>
47 |   );
48 | };
49 | 
50 | export default SearchJobForm;
51 | 


--------------------------------------------------------------------------------
/components/forms/TagsFilterForm.jsx:
--------------------------------------------------------------------------------
 1 | import { Fragment, useState } from 'react';
 2 | import { Popover, Transition } from '@headlessui/react';
 3 | import { ChevronDownIcon, FilterIcon } from '@heroicons/react/solid';
 4 | 
 5 | export default function TagsFilterForm({
 6 |   selectedTags,
 7 |   setSideBarFormState,
 8 |   jobSkills,
 9 | }) {
10 | 
11 |   const filter = {
12 |     id: 'skills-filter',
13 |     name: 'Filter By Skills',
14 |     options: jobSkills.map((skill) => ({ value: skill, label: skill })),
15 |   };
16 |   
17 |   const selectedTagsCount = selectedTags.length;
18 | 
19 |   const handleSelectedTag = (e, option) => {
20 |     console.log(e.target.checked, option);
21 |     if (e.target.checked) {
22 |       setSideBarFormState((prevState) => {
23 |         const selectedTags = [...prevState.selectedTags];
24 |         selectedTags.push(option);
25 |         return { ...prevState, selectedTags };
26 |       });
27 |     } else {
28 |       setSideBarFormState((prevState) => {
29 |         return {
30 |           ...prevState,
31 |           selectedTags: prevState.selectedTags.filter((tag) => option != tag),
32 |         };
33 |       });
34 |     }
35 |   };
36 | 
37 |   return (
38 |     <Popover
39 |       as='div'
40 |       key={filter.name}
41 |       id='desktop-menu'
42 |       className='relative z-10 inline-block text-left'
43 |     >
44 |       <div>
45 |         <Popover.Button className='group inline-flex items-center justify-center text-sm font-medium text-gray-900 hover:text-gray-900'>
46 |           <FilterIcon
47 |             className='ml-1 mr-2 h-6 w-6 text-gray-400'
48 |             aria-hidden='true'
49 |           />
50 |           <span>{filter.name}</span>
51 |           {selectedTagsCount > 0 ? (
52 |             <span className='ml-1.5 rounded py-0.5 px-1.5 bg-gray-200 text-xs font-semibold text-gray-700 tabular-nums'>
53 |               {selectedTagsCount}
54 |             </span>
55 |           ) : null}
56 |           <ChevronDownIcon
57 |             className='flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500'
58 |             aria-hidden='true'
59 |           />
60 |         </Popover.Button>
61 |       </div>
62 | 
63 |       <Transition
64 |         as={Fragment}
65 |         enter='transition ease-out duration-100'
66 |         enterFrom='transform opacity-0 scale-95'
67 |         enterTo='transform opacity-100 scale-100'
68 |         leave='transition ease-in duration-75'
69 |         leaveFrom='transform opacity-100 scale-100'
70 |         leaveTo='transform opacity-0 scale-95'
71 |       >
72 |         <Popover.Panel className='origin-top-right left-2 absolute mt-2 bg-indigo-100 rounded-sm shadow-2xl p-4 ring-1 ring-black ring-opacity-5 focus:outline-none'>
73 |           <form className='space-y-4'>
74 |             {filter.options.map((option, optionIdx) => (
75 |               <div key={option.value} className='flex items-center'>
76 |                 <input
77 |                   id={`filter-${filter.id}-${optionIdx}`}
78 |                   name={`${filter.id}[]`}
79 |                   defaultValue={option.value}
80 |                   type='checkbox'
81 |                   checked={selectedTags.includes(option.value)}
82 |                   onChange={(e) => handleSelectedTag(e, option.value)}
83 |                   className='h-4 w-4 border-gray-300 rounded-sm text-indigo-600 focus:ring-indigo-500'
84 |                 />
85 |                 <label
86 |                   htmlFor={`filter-${filter.id}-${optionIdx}`}
87 |                   className='ml-3 pr-6 text-sm font-sm text-gray-700 whitespace-nowrap'
88 |                 >
89 |                   {option.label}
90 |                 </label>
91 |               </div>
92 |             ))}
93 |           </form>
94 |         </Popover.Panel>
95 |       </Transition>
96 |     </Popover>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/components/globals/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import { FaYoutube, FaTwitter, FaGithub, FaLinkedin } from 'react-icons/fa';
 2 | import LiftedLogo from '../../public/images/logo-symbolic-main-512.png';
 3 | import Image from 'next/image';
 4 | 
 5 | const navigation = {
 6 |   social: [
 7 |     {
 8 |       name: 'Youtube',
 9 |       href: 'https://www.youtube.com/channel/UCZSFuQ0eoDxe8WXbt_th9zA',
10 |       icon: (props) => <FaYoutube />,
11 |     },
12 |     {
13 |       name: 'Twitter',
14 |       href: 'https://twitter.com/lifteddotsite',
15 |       icon: (props) => <FaTwitter />,
16 |     },
17 |     {
18 |       name: 'GitHub',
19 |       href: 'https://github.com/lifteddotsite/',
20 |       icon: (props) => <FaGithub />,
21 |     },
22 | 
23 |     {
24 |       name: 'LinkedIn',
25 |       href: 'https://linkedin.com/company/lifteddotsite',
26 |       icon: (props) => <FaLinkedin />,
27 |     },
28 |   ],
29 | };
30 | 
31 | const footerData = {
32 |   message:
33 |     "I hope you find this demo project helpful. If you ever need my services on a similar project, I'd love to help!",
34 | 
35 |   followMessage: 'Follow me on social media for more tutorial like this.',
36 |   callToActionURL: 'https://lifted.site/contact',
37 |   callToActionMessage: 'Click here to book a call with me.',
38 | };
39 | 
40 | export default function Footer() {
41 |   return (
42 |     <footer className='bg-white'>
43 |       <div className='max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8'>
44 |         <p className='text-center text-base text-gray-400'>
45 |           {footerData.followMessage}
46 |         </p>
47 |         <div className='mt-2 flex justify-center space-x-6'>
48 |           {navigation.social.map((item) => (
49 |             <a
50 |               key={item.name}
51 |               href={item.href}
52 |               className='text-gray-400 hover:text-gray-500'
53 |             >
54 |               <span className='sr-only'>{item.name}</span>
55 |               <item.icon className='h-6 w-6' aria-hidden='true' />
56 |             </a>
57 |           ))}
58 |         </div>
59 |         <p className='mt-8 text-center  text-lg text-gray-600'>
60 |           {footerData.message} <br />
61 |           <a
62 |             href={footerData.callToActionURL}
63 |             className='text-liftedgreen-700 hover:text-liftedgreen-800'
64 |           >
65 |             {footerData.callToActionMessage} <br />
66 |             <Image
67 |               src={LiftedLogo}
68 |               height={60}
69 |               width={60}
70 |               alt={`LiftedWP - Headless Commerce & CMS Experts.`}
71 |             />
72 |           </a>
73 |         </p>
74 |       </div>
75 |     </footer>
76 |   );
77 | }
78 | 


--------------------------------------------------------------------------------
/components/globals/Header.jsx:
--------------------------------------------------------------------------------
 1 | import { PhoneIcon } from '@heroicons/react/solid';
 2 | import Image from 'next/image';
 3 | import LiftedWPBanner from '../../public/images/lifted.site-banner.png';
 4 | import LiftedFounderAvatar from '../../public/images/liftedwp-founder-avatar.png';
 5 | 
 6 | const profile = {
 7 |   name: 'Junior Teudjio',
 8 |   role: 'CEO & Tech-Lead',
 9 |   companyURL: 'https://lifted.site',
10 |   companyName: 'lifted.site',
11 |   email: 'junior@lifted.site',
12 |   message:
13 |     "Hey there, If you ever need my services on a similar project, I'd love to help!",
14 |   callToActionURL: 'https://lifted.site/contact',
15 |   callToActionMessage: 'Book a Call With Me',
16 |   profileImage: LiftedFounderAvatar,
17 |   coverImage: LiftedWPBanner,
18 | };
19 | 
20 | export default function Header() {
21 |   return (
22 |     <div>
23 |       <div className='mb-8'>
24 |         <div className='relative h-60 w-full lg:h-64'>
25 |           <Image
26 |             className='object-cover scale-105'
27 |             src={profile.coverImage}
28 |             layout='fill'
29 |             alt={`services offered by ${profile.companyName} - Headless Commerce & CMS Experts`}
30 |           />
31 |         </div>
32 |         <div className='max-w-5xl mx-auto px-4 sm:px-6 lg:px-8'>
33 |           <div className='-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5'>
34 |             <div className='flex'>
35 |               <div className='relative h-28 w-28 rounded-full ring-4 ring-slate-200 sm:h-28 sm:w-28'>
36 |                 <Image
37 |                   src={profile.profileImage}
38 |                   layout='fill'
39 |                   alt={`profile picture ${profile.name}`}
40 |                 />
41 |               </div>
42 |             </div>
43 |             <div className='mt-4 sm:mt-12 sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1'>
44 |               <div className='sm:hidden md:block mt-6 min-w-0 flex-1'>
45 |                 <h1 className='text-2xl font-bold text-gray-900 truncate'>
46 |                   {profile.name}
47 |                 </h1>
48 |                 <p className='text-sm font-medium text-gray-500'>
49 |                   {profile.role} at{' '}
50 |                   <a
51 |                     href={profile.companyURL}
52 |                     className='text-gray-900 hover:text-liftedgreen-700'
53 |                   >
54 |                     {profile.companyName}
55 |                   </a>{' '}
56 |                 </p>
57 |                 <p className='text-sm  font-light text-liftedgreen-600'>
58 |                   {profile.message}
59 |                 </p>
60 |               </div>
61 |               <div className='mt-4 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4'>
62 |                 <a
63 |                   href={profile.callToActionURL}
64 |                   className='inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-liftedgreen-800 hover:bg-liftedgreen-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-liftedgreen-500'
65 |                 >
66 |                   <PhoneIcon
67 |                     className='-ml-1 mr-2 h-5 w-5'
68 |                     aria-hidden='true'
69 |                   />
70 |                   {profile.callToActionMessage}
71 |                 </a>
72 |               </div>
73 |             </div>
74 |           </div>
75 | 
76 |           <div className='hidden sm:block md:hidden mt-6 min-w-0 flex-1'>
77 |             <h1 className='text-2xl font-bold text-gray-900 truncate'>
78 |               {profile.name}
79 |             </h1>
80 |           </div>
81 |         </div>
82 |       </div>
83 |     </div>
84 |   );
85 | }
86 | 


--------------------------------------------------------------------------------
/components/globals/Layout.jsx:
--------------------------------------------------------------------------------
 1 | import Header from './Header';
 2 | import Footer from './Footer';
 3 | 
 4 | const Layout = ({ children }) => {
 5 |   return (
 6 |     <>
 7 |       <Header />
 8 |       <main className='max-w-screen-2xl	 mx-auto sm:px-6 lg:px-8 bg-slate-50 m-2 p-2'>
 9 |         {children}
10 |       </main>
11 |       <Footer />
12 |     </>
13 |   );
14 | };
15 | 
16 | export default Layout;
17 | 


--------------------------------------------------------------------------------
/components/ui/JobsPage.jsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable react-hooks/exhaustive-deps */
  2 | import { useState, useEffect, useRef } from 'react';
  3 | import JobsList from '../data/lists/JobsList';
  4 | import SearchJobForm from '../forms/SearchJobForm';
  5 | import JobsPageSideBarForm from '../forms/JobsPageSideBarForm';
  6 | import JobsSortForm from '../forms/JobsSortForm';
  7 | 
  8 | export default function JobsPage({ jobs, jobSkills }) {
  9 |   const [displayedJobs, setDisplayedJobs] = useState(jobs);
 10 | 
 11 |   const [sideBarFormState, setSideBarFormState] = useState({
 12 |     jobTypes: [],
 13 |     experienceLevels: [],
 14 |     remoteOkOnly: false,
 15 |     featuredJobsOnly: false,
 16 |     baseSalaryOptions: [],
 17 |     baseSalaryBounds: [],
 18 |     selectedTags: [],
 19 |   });
 20 | 
 21 |   const [searchFormState, setSearchFormState] = useState('');
 22 | 
 23 |   const searchJobs = async (apiUrl, formsStates) => {
 24 |     const response = await fetch(apiUrl, {
 25 |       method: 'POST',
 26 |       headers: {
 27 |         'Content-Type': 'application/json;charset=utf-8',
 28 |       },
 29 |       body: JSON.stringify(formsStates),
 30 |     });
 31 |     const foundJobs = await response.json();
 32 |     console.log(foundJobs);
 33 |     setDisplayedJobs(foundJobs);
 34 |   };
 35 | 
 36 |   const initialRender1 = useRef(true);
 37 |   // trigger a search whenever the sidebar form state  changes
 38 |   useEffect(() => {
 39 |     if (initialRender1.current) {
 40 |       initialRender1.current = false;
 41 |     } else {
 42 |       console.log('sidebar state form changed => triggering a search');
 43 |       const formsStates = { searchFormState, sideBarFormState };
 44 |       searchJobs('api/search-jobs', formsStates);
 45 |     }
 46 |   }, [sideBarFormState]);
 47 | 
 48 |   const initialRender2 = useRef(true);
 49 |   // trigger a search whenever the search form state changes && length >= 3 -OR- length == 0 (implying a reset)
 50 |   useEffect(() => {
 51 |     if (initialRender2.current) {
 52 |       initialRender2.current = false;
 53 |     } else {
 54 |       console.log('search form changed && length >= 3 OR ==0 => triggering a search');
 55 |       if (searchFormState.length >= 3 || searchFormState.length == 0) {
 56 |         const formsStates = { searchFormState, sideBarFormState };
 57 |         searchJobs('api/search-jobs', formsStates);
 58 |       }
 59 |     }
 60 |   }, [searchFormState]);
 61 | 
 62 |   let jobsFoundMessage = `Found ${displayedJobs.length} Jobs`;
 63 |   switch (displayedJobs.length) {
 64 |     case 0: {
 65 |       jobsFoundMessage = 'No Jobs found.';
 66 |       break;
 67 |     }
 68 |     case 1: {
 69 |       jobsFoundMessage = 'Only one Job found.';
 70 |       break;
 71 |     }
 72 | 
 73 |     default:
 74 |       break;
 75 |   }
 76 | 
 77 |   const handleSkillTagDelete = (e, skillTag) => {
 78 |     e.preventDefault();
 79 |     setSideBarFormState((prevState) => {
 80 |       return {
 81 |         ...prevState,
 82 |         selectedTags: prevState.selectedTags.filter((tag) => skillTag != tag),
 83 |       };
 84 |     });
 85 |   };
 86 | 
 87 |   return (
 88 |     <div className='flex flex-col space-y-10 sm:flex-row sm:space-x-6 sm:space-y-0 md:flex-col md:space-x-0 md:space-y-10 xl:flex-row xl:space-x-6 xl:space-y-0 mt-9'>
 89 |       <JobsPageSideBarForm
 90 |         jobSkills={jobSkills}
 91 |         sideBarFormState={sideBarFormState}
 92 |         setSideBarFormState={setSideBarFormState}
 93 |         setdisplayedJobs={setDisplayedJobs}
 94 |       />
 95 |       <div className='w-full'>
 96 |         <SearchJobForm
 97 |           searchFormState={searchFormState}
 98 |           setSearchFormState={setSearchFormState}
 99 |           setdisplayedJobs={setDisplayedJobs}
100 |         />
101 |         {/* Jobs header */}
102 |         <div className='flex justify-between items-center mb-4'>
103 |           {/* Number of jobs found message  */}
104 |           <div className='text-sm text-slate-500 italic'>
105 |             {jobsFoundMessage}
106 |           </div>
107 | 
108 |           {/* skills tags */}
109 |           <div>
110 |             <div className='flex flex-wrap items-center -m-1 max-w-2xl'>
111 |               {sideBarFormState.selectedTags &&
112 |                 sideBarFormState.selectedTags.map((skill) => (
113 |                   <div className='m-1' key={skill}>
114 |                     <a
115 |                       className='text-xs hover:scale-110  hover:bg-red-100 hover:text-red-600 inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1'
116 |                       href='#'
117 |                     >
118 |                       {skill}
119 |                       <svg
120 |                         className='h-2 w-2 ml-2 mt-1 text-sm hover:cursor-pointer'
121 |                         stroke='currentColor'
122 |                         fill='none'
123 |                         viewBox='0 0 8 8'
124 |                         onClick={(e) => handleSkillTagDelete(e, skill)}
125 |                       >
126 |                         <path
127 |                           strokeLinecap='round'
128 |                           strokeWidth='1.5'
129 |                           d='M1 1l6 6m0-6L1 7'
130 |                         />
131 |                       </svg>
132 |                     </a>
133 |                   </div>
134 |                 ))}
135 |             </div>
136 |           </div>
137 | 
138 |           {/* Sort */}
139 |           <JobsSortForm
140 |             jobs={displayedJobs}
141 |             setDisplayedJobs={setDisplayedJobs}
142 |           />
143 |         </div>
144 |         <JobsList jobs={displayedJobs} />
145 |       </div>
146 |     </div>
147 |   );
148 | }
149 | 


--------------------------------------------------------------------------------
/components/ui/LoadingSpinner.jsx:
--------------------------------------------------------------------------------
 1 | const LoadingSpinner = ({ customMessage }) => {
 2 |   return (
 3 |     <div className="flex flex-col items-center justify-center p-20">
 4 |       <div>
 5 |         <svg
 6 |           role="status"
 7 |           className="mr-2 inline h-10 w-10 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
 8 |           viewBox="0 0 100 101"
 9 |           fill="none"
10 |           xmlns="http://www.w3.org/2000/svg"
11 |         >
12 |           <path
13 |             d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
14 |             fill="currentColor"
15 |           />
16 |           <path
17 |             d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
18 |             fill="currentFill"
19 |           />
20 |         </svg>
21 |       </div>
22 |       <p>{customMessage}</p>
23 |     </div>
24 |   );
25 | };
26 | 
27 | export default LoadingSpinner;
28 | 


--------------------------------------------------------------------------------
/components/ui/PageNotFound.jsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | 
 3 | export default function PageNotFound() {
 4 |   return (
 5 |     <>
 6 |       <div className='bg-white min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8'>
 7 |         <div className='max-w-max mx-auto'>
 8 |           <main className='sm:flex'>
 9 |             <p className='text-4xl font-extrabold text-indigo-600 sm:text-5xl'>
10 |               404
11 |             </p>
12 |             <div className='sm:ml-6'>
13 |               <div className='sm:border-l sm:border-gray-200 sm:pl-6'>
14 |                 <h1 className='text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl'>
15 |                   Page not found
16 |                 </h1>
17 |                 <p className='mt-1 text-base text-gray-500'>
18 |                   Please check the URL in the address bar and try again.
19 |                 </p>
20 |               </div>
21 |               <div className='mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6'>
22 |                 <Link href='/'>
23 |                   <a className='inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'>
24 |                     Go back home
25 |                   </a>
26 |                 </Link>
27 |                 <a
28 |                   href='lifted.site/contact'
29 |                   className='inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
30 |                 >
31 |                   Contact support
32 |                 </a>
33 |               </div>
34 |             </div>
35 |           </main>
36 |         </div>
37 |       </div>
38 |     </>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/datalayer/contentful/client.js:
--------------------------------------------------------------------------------
 1 | import { createClient } from 'contentful';
 2 | 
 3 | function isServer() {
 4 |   return !(typeof window != 'undefined' && window.document);
 5 | }
 6 | 
 7 | const serverOnlyCreateClient = () => {
 8 |   if (!isServer() || process.env.DATALAYER_ENGINE != 'contentful') return;
 9 |   const client = createClient({
10 |     space: process.env.CONTENTFUL_SPACE_ID,
11 |     accessToken: process.env.CONTENTFUL_DELIVERY_API_TOKEN,
12 |     environment: process.env.CONTENTFUL_ENVIRONMENT,
13 |   });
14 |   return client;
15 | };
16 | 
17 | export const client = serverOnlyCreateClient();
18 | 


--------------------------------------------------------------------------------
/datalayer/contentful/company.js:
--------------------------------------------------------------------------------
 1 | import { client } from './client';
 2 | import { companyReducer } from './utils';
 3 | 
 4 | export const getCompanies = async () => {
 5 |   const companies = await client.getEntries({ content_type: 'company' });
 6 |   console.log(companies);
 7 |   return companies.items;
 8 | };
 9 | 
10 | export const getCompaniesSlugs = async () => {
11 |   const rawSlugs = await client.getEntries({
12 |     content_type: 'company',
13 |     select: ['fields.slug'],
14 |   });
15 |   const slugs = rawSlugs.items.map((rawSlug) => rawSlug.fields.slug);
16 |   return slugs;
17 | };
18 | 
19 | export const getCompanyBySlug = async ({ slug }) => {
20 |   const found = await client.getEntries({
21 |     content_type: 'company',
22 |     'fields.slug': slug,
23 |   });
24 | 
25 |   if (found.items.length == 0) return null;
26 | 
27 |   const company = found.items[0];
28 |   return companyReducer(company);
29 | };
30 | 


--------------------------------------------------------------------------------
/datalayer/contentful/job.js:
--------------------------------------------------------------------------------
  1 | import { client } from './client';
  2 | import { jobReducer, skillsReducer, tagsReducer } from './utils';
  3 | 
  4 | export const getJobs = async () => {
  5 |   const res = await client.getEntries({ content_type: 'job' });
  6 |   const rawJobs = res.items;
  7 | 
  8 |   const jobs = rawJobs.map((rawJob) => {
  9 |     return jobReducer(rawJob);
 10 |   });
 11 |   return jobs;
 12 | };
 13 | 
 14 | export const getJobsSkills = async () => {
 15 |   const res = await client.getTags();
 16 |   const rawTags = res.items;
 17 | 
 18 |   const tags = tagsReducer(rawTags);
 19 |   const skills = skillsReducer(tags);
 20 |   return skills;
 21 | };
 22 | 
 23 | export const getJobsSlugs = async () => {
 24 |   const rawSlugs = await client.getEntries({
 25 |     content_type: 'job',
 26 |     select: ['fields.slug'],
 27 |   });
 28 |   const slugs = rawSlugs.items.map((rawSlug) => rawSlug.fields.slug);
 29 |   return slugs;
 30 | };
 31 | 
 32 | export const getJobBySlug = async ({ slug }) => {
 33 |   const found = await client.getEntries({
 34 |     content_type: 'job',
 35 |     'fields.slug': slug,
 36 | 
 37 |     // needed to fetch linked items, otherwise job.fields.relatedJobs[0].fields.company.fields is undefined
 38 |     // https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/links/retrieval-of-linked-items
 39 |     include: 2,
 40 |   });
 41 | 
 42 |   if (found.items.length == 0) return null;
 43 |   const job = found.items[0];
 44 |   return jobReducer(job);
 45 | };
 46 | 
 47 | export const getJobsByCompanyId = async ({ id }) => {
 48 |   const res = await client.getEntries({
 49 |     content_type: 'job',
 50 |     'fields.company.sys.id': id,
 51 |     include: 2,
 52 |   });
 53 | 
 54 |   const rawJobs = res.items;
 55 |   const jobs = rawJobs.map((rawJob) => {
 56 |     return jobReducer(rawJob);
 57 |   });
 58 |   return jobs;
 59 | };
 60 | 
 61 | const _searchJobs = async (query) => {
 62 |   let contentFullQuery = {
 63 |     content_type: 'job',
 64 |     include: 2,
 65 |   };
 66 | 
 67 |   // Add Equality Query Filters
 68 |   if (query.remoteOkOnly)
 69 |     contentFullQuery['fields.remoteOk'] = query.remoteOkOnly;
 70 |   if (query.featuredJobsOnly)
 71 |     contentFullQuery['fields.featuredJob'] = query.featuredJobsOnly;
 72 | 
 73 |   // Add Range Query Filters
 74 |   contentFullQuery['fields.baseAnnualSalary[gte]'] = query.minBaseSalary;
 75 |   contentFullQuery['fields.baseAnnualSalary[lte]'] = query.maxBaseSalary;
 76 | 
 77 |   // Add Tags Query Filters
 78 |   // we first parse the skills tags back to their contentful-specific version with the "skill." prefix
 79 |   const selectedTags = query.selectedTags.map((tag) => `skill.${tag}`);
 80 |   if (selectedTags.length)
 81 |     contentFullQuery['metadata.tags.sys.id[in]'] = selectedTags.join(',');
 82 | 
 83 |   // Add Full Text Search Query
 84 |   if (query.searchBarText) {
 85 |     contentFullQuery['query'] = query.searchBarText;
 86 |   }
 87 | 
 88 |   // Add Inclusion Query Filters
 89 |   // [DOES NOT WORK]
 90 |   // contentful api does NOT have an OR operator: https://www.contentfulcommunity.com/t/delivery-api-or-in-search-query/763
 91 |   // contentFullQuery['fields.jobType[in]'] = query.jobTypes;
 92 |   // contentFullQuery['fields.experienceLevel[in]'] = query.experienceLevels;
 93 | 
 94 |   const res = await client.getEntries(contentFullQuery);
 95 |   const foundJobs = res.items;
 96 | 
 97 |   const jobs = foundJobs.map((rawJob) => {
 98 |     return jobReducer(rawJob);
 99 |   });
100 | 
101 |   // Now because contentful doesn't have an OR operator we have to filter at the application level which is not efficient
102 |   let filteredJobs = jobs.filter((job) => {
103 |     if (query.experienceLevels.length == 0) return true;
104 |     if (query.experienceLevels.includes(job.experienceLevel)) return true;
105 |     return false;
106 |   });
107 | 
108 |   filteredJobs = filteredJobs.filter((job) => {
109 |     if (query.jobTypes.length == 0) return true;
110 |     if (query.jobTypes.includes(job.jobType)) return true;
111 |     return false;
112 |   });
113 | 
114 |   return filteredJobs;
115 | };
116 | 
117 | const _searchCompaniesButReturnJobs = async (searchBarText) => {
118 |   let contentFullQuery = {
119 |     content_type: 'job',
120 |     'fields.company.sys.contentType.sys.id': 'company',
121 |     'fields.company.fields.name[match]': searchBarText,
122 | 
123 |     // multiple matches are NOT supported by Contentful so we prioritise the company name
124 |     // 'fields.company.fields.city[match]': searchBarText,
125 |     // 'fields.company.fields.slogan[match]': searchBarText,
126 |     // 'fields.company.fields.website[match]': searchBarText,
127 |     include: 2,
128 |   };
129 |   const res = await client.getEntries(contentFullQuery);
130 |   const foundJobs = res.items;
131 | 
132 |   const jobs = foundJobs.map((rawJob) => {
133 |     return jobReducer(rawJob);
134 |   });
135 | 
136 |   return jobs;
137 | };
138 | 
139 | export const searchJobs = async (query) => {
140 |    // search in the jobs entities
141 |    const jobs1 = await _searchJobs(query);
142 | 
143 |    // seatch in the job entities by company name
144 |    let jobs2 = [];
145 |    if (query.searchBarText) {
146 |      jobs2 = await _searchCompaniesButReturnJobs(query.searchBarText);
147 |    }
148 |  
149 |    // merge the two results
150 |    let jobs1Ids = jobs1.map((job) => job.id);
151 |    jobs2.map((job2) => {
152 |      if (!jobs1Ids.includes(job2.id)) {
153 |        jobs1.push(job2);
154 |      }
155 |    });
156 |  
157 |    return jobs1;
158 | };
159 | 


--------------------------------------------------------------------------------
/datalayer/contentful/utils.js:
--------------------------------------------------------------------------------
 1 | import date from 'date-and-time';
 2 | import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
 3 | 
 4 | export const dateReducer = (dateStr) => {
 5 |   const dateObj = date.parse(dateStr.split('T')[0], 'YYYY-MM-DD');
 6 |   return dateObj.toDateString();
 7 | };
 8 | 
 9 | export const richTextReducer = (rawRichtext) => {
10 |   const parsedRichText = documentToHtmlString(rawRichtext);
11 |   let styledRichText = parsedRichText.replace(
12 |     '<ul>',
13 |     "<ul style='list-style-type: circle;'>"
14 |   );
15 |   return styledRichText;
16 | };
17 | 
18 | export const imageReducer = (imageField) => {
19 |   return {
20 |     url: `https:${imageField.fields.file.url}`,
21 |     alt: imageField.fields.title,
22 |     height: imageField.fields.file.details.image.height,
23 |     width: imageField.fields.file.details.image.width,
24 |     contentType: imageField.fields.file.contentType,
25 |   };
26 | };
27 | 
28 | export const companyReducer = (rawCompany) => {
29 |   let company = { ...rawCompany.fields };
30 |   company.id = rawCompany.sys.id;
31 |   company.locale = rawCompany.sys.locale;
32 |   company.logo = imageReducer(rawCompany.fields.logo);
33 |   company.coverImage = imageReducer(rawCompany.fields.coverImage);
34 |   return company;
35 | };
36 | 
37 | export const tagsReducer = (tagsField) => {
38 |   let tags = [];
39 |   tagsField.map((rawTag) => {
40 |     const tag = rawTag.sys.id;
41 |     tags.push(tag);
42 |   });
43 |   return tags;
44 | };
45 | 
46 | export const skillsReducer = (parsedTags) => {
47 |   const skillTags = parsedTags.filter((tag) => tag.includes('skill.'));
48 |   const skills = skillTags.map((skillTag) => skillTag.replace('skill.', ''));
49 |   return skills;
50 | };
51 | 
52 | export const jobReducer = (rawJob, parseRelatedJobs = true) => {
53 |   let job = { ...rawJob.fields };
54 | 
55 |   job.id = rawJob.sys.id;
56 |   job.locale = rawJob.sys.locale;
57 |   job.datePosted = dateReducer(rawJob.fields.datePosted);
58 |   job.company = companyReducer(rawJob.fields.company);
59 |   job.aboutYou = richTextReducer(rawJob.fields.aboutYou);
60 |   job.remunerationPackage = richTextReducer(rawJob.fields.remunerationPackage);
61 |   job.jobResponsibilities = richTextReducer(rawJob.fields.jobResponsibilities);
62 |   job.jobDescription = richTextReducer(rawJob.fields.jobDescription);
63 |   job.tags = tagsReducer(rawJob.metadata.tags);
64 |   job.skills = skillsReducer(job.tags);
65 | 
66 |   const relatedJobs = rawJob.fields.relatedJobs || [];
67 | 
68 |   if (!parseRelatedJobs) {
69 |     job.relatedJobs = [];
70 |   } else {
71 |     job.relatedJobs = relatedJobs.map((relatedJob) => {
72 |       return jobReducer(relatedJob, false);
73 |     });
74 |   }
75 | 
76 |   return job;
77 | };
78 | 


--------------------------------------------------------------------------------
/datalayer/index.js:
--------------------------------------------------------------------------------
 1 | let datasource = {}
 2 | 
 3 | import  * as contentfulJobAPI from './contentful/job'; 
 4 | import * as contentfulCompanyAPI from './contentful/company'; 
 5 | if (process.env.DATALAYER_ENGINE === 'contentful')
 6 |   datasource = {...contentfulCompanyAPI, ...contentfulJobAPI}
 7 | 
 8 | 
 9 | import * as strapiJobAPI from './strapi/job';
10 | import * as strapiCompanyAPI from './strapi/company';
11 | if (process.env.DATALAYER_ENGINE === 'strapi')
12 |   datasource = { ...strapiCompanyAPI, ...strapiJobAPI };
13 | 
14 | export default datasource
15 | 
16 | 
17 | 
18 | 
19 | 


--------------------------------------------------------------------------------
/datalayer/strapi/client.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | const strapiAPIKey = process.env.STRAPI_API_KEY;
3 | axios.defaults.headers.common['Authorization'] = `Bearer ${strapiAPIKey}`;
4 | 
5 | export default axios;
6 | 


--------------------------------------------------------------------------------
/datalayer/strapi/company.js:
--------------------------------------------------------------------------------
 1 | import axios from './client';
 2 | import qs from 'qs';
 3 | 
 4 | import { companyReducer } from './utils';
 5 | 
 6 | const apiUrl = process.env.STRAPI_API_BASE_URL;
 7 | 
 8 | export const getCompanies = async () => {
 9 |   const query = qs.stringify(
10 |     {
11 |       populate: ['logo', 'coverImage'],
12 |     },
13 |     {
14 |       encodeValuesOnly: true,
15 |     }
16 |   );
17 |   const res = await axios.get(`${apiUrl}/companies?${query}`);
18 |   const rawCompanies = res.data.data;
19 |   const companies = rawCompanies.map((company) => companyReducer(company));
20 |   return companies;
21 | };
22 | 
23 | export const getCompaniesSlugs = async () => {
24 |   const query = qs.stringify(
25 |     {
26 |       fields: ['slug'],
27 |     },
28 |     {
29 |       encodeValuesOnly: true,
30 |     }
31 |   );
32 |   const res = await axios.get(`${apiUrl}/companies?${query}`);
33 |   const rawSlugs = res.data.data;
34 | 
35 |   const slugs = rawSlugs.map((rawSlug) => {
36 |     return rawSlug.attributes.slug;
37 |   });
38 |   return slugs;
39 | };
40 | 
41 | export const getCompanyBySlug = async ({ slug }) => {
42 |   const query = qs.stringify(
43 |     {
44 |       filters: {
45 |         slug: {
46 |           $eq: slug,
47 |         },
48 |       },
49 |       populate: ['logo', 'coverImage'],
50 |     },
51 |     {
52 |       encodeValuesOnly: true,
53 |     }
54 |   );
55 |   const res = await axios.get(`${apiUrl}/companies?${query}`);
56 |   const rawCompany = res.data.data[0];
57 |   return companyReducer(rawCompany);
58 | };
59 | 


--------------------------------------------------------------------------------
/datalayer/strapi/job.js:
--------------------------------------------------------------------------------
  1 | import axios from './client';
  2 | import qs from 'qs';
  3 | import { jobReducer } from './utils';
  4 | 
  5 | const apiUrl = process.env.STRAPI_API_BASE_URL;
  6 | 
  7 | export const getJobsSlugs = async () => {
  8 |   const query = qs.stringify(
  9 |     {
 10 |       fields: ['slug'],
 11 |     },
 12 |     {
 13 |       encodeValuesOnly: true,
 14 |     }
 15 |   );
 16 |   const res = await axios.get(`${apiUrl}/jobs?${query}`);
 17 |   const rawSlugs = res.data.data;
 18 |   //   return rawSlugs;
 19 | 
 20 |   const slugs = rawSlugs.map((rawSlug) => {
 21 |     return rawSlug.attributes.slug;
 22 |   });
 23 |   return slugs;
 24 | };
 25 | 
 26 | export const getJobBySlug = async ({ slug }) => {
 27 |   const query = qs.stringify(
 28 |     {
 29 |       filters: {
 30 |         slug: {
 31 |           $eq: slug,
 32 |         },
 33 |       },
 34 |       populate: [
 35 |         'company',
 36 |         'company.logo',
 37 |         'company.coverImage',
 38 |         'relatedJobs',
 39 |         'relatedJobs.company',
 40 |         'relatedJobs.company.logo',
 41 |         'relatedJobs.company.coverImage',
 42 |         'skillsTags',
 43 |       ],
 44 |     },
 45 |     {
 46 |       encodeValuesOnly: true,
 47 |     }
 48 |   );
 49 |   const res = await axios.get(`${apiUrl}/jobs?${query}`);
 50 |   const rawJob = res.data.data[0];
 51 |   return jobReducer(rawJob);
 52 | };
 53 | 
 54 | export const getJobsByCompanyId = async ({ id }) => {
 55 |   const query = qs.stringify(
 56 |     {
 57 |       filters: {
 58 |         company: {
 59 |           id: {
 60 |             $eq: id,
 61 |           },
 62 |         },
 63 |       },
 64 |       populate: ['company', 'company.logo', 'company.coverImage', 'skillsTags'],
 65 |     },
 66 |     {
 67 |       encodeValuesOnly: true,
 68 |     }
 69 |   );
 70 |   const res = await axios.get(`${apiUrl}/jobs?${query}`);
 71 |   const rawJobs = res.data.data;
 72 |   const jobs = rawJobs.map((rawJob) => jobReducer(rawJob, false));
 73 |   return jobs;
 74 | };
 75 | 
 76 | export const getJobs = async ({ page = 1, pageSize = 100 } = {}) => {
 77 |   const query = qs.stringify(
 78 |     {
 79 |       populate: ['company', 'company.logo', 'company.coverImage', 'skillsTags'],
 80 |       pagination: {
 81 |         page,
 82 |         pageSize,
 83 |       },
 84 |     },
 85 |     {
 86 |       encodeValuesOnly: true,
 87 |     }
 88 |   );
 89 |   const res = await axios.get(`${apiUrl}/jobs?${query}`);
 90 |   const rawJobs = res.data.data;
 91 | 
 92 |   const jobs = rawJobs.map((rawJob) => jobReducer(rawJob, false));
 93 |   return jobs;
 94 | };
 95 | 
 96 | export const searchJobs = async (query) => {
 97 |   const strapiQuery = {
 98 |     populate: ['company', 'company.logo', 'company.coverImage', 'skillsTags'],
 99 |     filters: {},
100 |   };
101 | 
102 |   // Add Boolean Query Filters
103 |   if (query.remoteOkOnly) strapiQuery['filters']['remoteOk'] = { $eq: true };
104 |   if (query.featuredJobsOnly)
105 |     strapiQuery['filters']['featuredJob'] = { $eq: true };
106 | 
107 |   // Add Range Query Filters
108 |   strapiQuery['filters']['baseAnnualSalary'] = {
109 |     $gte: query.minBaseSalary,
110 |     $lte: query.maxBaseSalary,
111 |   };
112 | 
113 |   // Add Inclusion Query Filters
114 |   strapiQuery['filters']['jobType'] = { $in: query.jobTypes };
115 |   strapiQuery['filters']['experienceLevel'] = { $in: query.experienceLevels };
116 | 
117 |   //Add Nested Inclusion Query Filters
118 |   if (query.selectedTags && query.selectedTags.length)
119 |     strapiQuery['filters']['skillsTags'] = {
120 |       name: { $in: query.selectedTags },
121 |     };
122 | 
123 |   // Add Full Text Search Query
124 |   if (query.searchBarText) {
125 |     const searchFields = [
126 |       'title',
127 |       'jobCategory',
128 |       'jobType',
129 |       'jobDescription',
130 |       'aboutYou',
131 |       'jobResponsibilities',
132 |       'remunerationPackage',
133 |       // deep nested search fields
134 |       'skillsTags.name',
135 |       'company.name',
136 |       'company.city',
137 |     ];
138 | 
139 |     strapiQuery['filters']['$or'] = searchFields.map((field) => {
140 |       const searchField = {};
141 |       if (!field.includes('.')) {
142 |         searchField[field] = { $containsi: query.searchBarText };
143 |       } else {
144 |         const [level1, level2] = field.split('.');
145 |         const nestedSearchField = {};
146 |         nestedSearchField[level2] = { $containsi: query.searchBarText };
147 |         searchField[level1] = nestedSearchField;
148 |       }
149 |       return searchField;
150 |     });
151 |   }
152 | 
153 |   const strapiQueryStr = qs.stringify(strapiQuery, { encodeValuesOnly: true });
154 |   const res = await axios.get(`${apiUrl}/jobs?${strapiQueryStr}`);
155 |   const rawJobs = res.data.data;
156 | 
157 |   const jobs = rawJobs.map((rawJob) => jobReducer(rawJob, false));
158 |   return jobs;
159 | };
160 | 
161 | export async function getJobsSkills() {
162 |   const query = qs.stringify(
163 |     {
164 |       fields: ['name'],
165 |       filters: {
166 |         tagType: {
167 |           $eq: 'skill',
168 |         },
169 |       },
170 |     },
171 |     {
172 |       encodeValuesOnly: true,
173 |     }
174 |   );
175 |   const res = await axios.get(`${apiUrl}/tags?${query}`);
176 |   const rawTags = res.data.data;
177 | 
178 |   const tags = rawTags.map((rawTag) => {
179 |     return rawTag.attributes.name;
180 |   });
181 |   return tags;
182 | }
183 | 


--------------------------------------------------------------------------------
/datalayer/strapi/utils.js:
--------------------------------------------------------------------------------
 1 | import date from 'date-and-time';
 2 | import { marked } from 'marked';
 3 | 
 4 | const assetsBaseUrl = process.env.STRAPI_ASSETS_BASE_URL;
 5 | 
 6 | export const richTextReducer = (rawRichtext) => {
 7 |   const parsedRichText = marked.parse(rawRichtext);
 8 |   let styledRichText = parsedRichText.replace(
 9 |     '<ul>',
10 |     "<ul style='list-style-type: circle;'>"
11 |   );
12 |   return styledRichText;
13 | };
14 | 
15 | export const imageReducer = (imageField) => {
16 |   const fields = imageField.data.attributes;
17 |   return {
18 |     url: `${assetsBaseUrl}${fields.url}`,
19 |     alt: `${fields.caption}`,
20 |     height: fields.height,
21 |     width: fields.width,
22 |     contentType: fields.mime,
23 |   };
24 | };
25 | 
26 | export const companyReducer = (rawCompany) => {
27 |   let company = { ...rawCompany.attributes };
28 |   company.id = rawCompany.id;
29 |   company.logo = imageReducer(company.logo);
30 |   company.coverImage = imageReducer(company.coverImage);
31 |   return company;
32 | };
33 | 
34 | export const dateReducer = (dateStr) => {
35 |   const dateObj = date.parse(dateStr.split('T')[0], 'YYYY-MM-DD');
36 |   return dateObj.toDateString();
37 | };
38 | 
39 | export const skillsReducer = (tagsField) => {
40 |   if (!tagsField) return [];
41 |   let tags = [];
42 |   tagsField.data.map((rawTag) => {
43 |     const tag = rawTag.attributes.name;
44 |     tags.push(tag);
45 |   });
46 |   return tags;
47 | };
48 | 
49 | export const jobReducer = (rawJob, parseRelatedJobs = true) => {
50 |   let job = { ...rawJob.attributes };
51 |   job.id = rawJob.id;
52 | 
53 |   job.datePosted = dateReducer(job.datePosted);
54 |   job.company = companyReducer(job.company.data);
55 |   job.skills = skillsReducer(job.skillsTags);
56 |   job.aboutYou = richTextReducer(job.aboutYou);
57 |   job.remunerationPackage = richTextReducer(job.remunerationPackage);
58 |   job.jobResponsibilities = richTextReducer(job.jobResponsibilities);
59 |   job.jobDescription = richTextReducer(job.jobDescription);
60 | 
61 |   const relatedJobs = job.relatedJobs || [];
62 | 
63 |   if (!parseRelatedJobs) {
64 |     job.relatedJobs = [];
65 |   } else {
66 |     job.relatedJobs = relatedJobs.data.map((relatedJob) => {
67 |       return jobReducer(relatedJob, false);
68 |     });
69 |   }
70 | 
71 |   return job;
72 | };
73 | 


--------------------------------------------------------------------------------
/datalayer/utils.js:
--------------------------------------------------------------------------------
 1 | export const sortJobsByDatePosted = ({ jobs, ASC = true }) => {
 2 |   // we don't want to modify the original list of jobs provided
 3 |   const sorted = [...jobs];
 4 |   sorted.sort(function (job1, job2) {
 5 |     if (job1.datePosted < job2.datePosted) return ASC ? -1 : 1;
 6 |     else if (job1.datePosted > job2.datePosted) return ASC ? 1 : -1;
 7 |     else return 0;
 8 |   });
 9 |   return sorted;
10 | };
11 | 
12 | export const sortJobsByBaseAnnualSalary = ({ jobs, ASC = true }) => {
13 |   // we don't want to modify the original list of jobs provided
14 |   const sorted = [...jobs];
15 |   sorted.sort(function (job1, job2) {
16 |     if (job1.baseAnnualSalary < job2.baseAnnualSalary) return ASC ? -1 : 1;
17 |     else if (job1.baseAnnualSalary > job2.baseAnnualSalary) return ASC ? 1 : -1;
18 |     else return 0;
19 |   });
20 |   return sorted;
21 | };
22 | 
23 | export const sortJobsByCompanyName = ({ jobs }) => {
24 |   // we don't want to modify the original list of jobs provided
25 |   const sorted = [...jobs];
26 |   sorted.sort(function (job1, job2) {
27 |     if (job1.company.name < job2.company.name) return -1;
28 |     else if (job1.company.name > job2.company.name) return 1;
29 |     else return 0;
30 |   });
31 |   return sorted;
32 | };
33 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: false,
 4 |   images: {
 5 |     domains: [process.env.STRAPI_IMAGES_DOMAIN],
 6 |   },
 7 | };
 8 | 
 9 | module.exports = nextConfig;
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "contentful-nextjs-tutorials",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@contentful/rich-text-html-renderer": "^15.12.1",
13 |     "@headlessui/react": "^1.5.0",
14 |     "@heroicons/react": "^1.0.6",
15 |     "@tailwindcss/aspect-ratio": "^0.4.0",
16 |     "@tailwindcss/forms": "^0.5.0",
17 |     "@tailwindcss/line-clamp": "^0.3.1",
18 |     "@tailwindcss/typography": "^0.5.2",
19 |     "axios": "^0.27.2",
20 |     "contentful": "^9.1.27",
21 |     "date-and-time": "^2.3.1",
22 |     "marked": "^4.0.16",
23 |     "next": "12.1.5",
24 |     "react": "18.0.0",
25 |     "react-dom": "18.0.0",
26 |     "react-icons": "^4.3.1"
27 |   },
28 |   "devDependencies": {
29 |     "autoprefixer": "^10.4.4",
30 |     "eslint": "8.13.0",
31 |     "eslint-config-next": "12.1.5",
32 |     "postcss": "^8.4.12",
33 |     "tailwindcss": "^3.0.24"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/404.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PageNotFoundComponent from '../components/ui/PageNotFound';
3 | 
4 | export default function PageNotFound() {
5 |   return <PageNotFoundComponent />;
6 | }
7 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css';
 2 | import Layout from '../components/globals/Layout';
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <Layout>
 7 |       <Component {...pageProps} />
 8 |     </Layout>
 9 |   );
10 | }
11 | 
12 | export default MyApp;
13 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/api/search-jobs.js:
--------------------------------------------------------------------------------
 1 | import datasource from '../../datalayer';
 2 | 
 3 | function capitalizeFirstLetter(string) {
 4 |   return string.charAt(0).toUpperCase() + string.slice(1);
 5 | }
 6 | 
 7 | export default async function handler(req, res) {
 8 |   const { searchFormState, sideBarFormState } = req.body;
 9 | 
10 |   const minBaseSalary =
11 |     sideBarFormState.baseSalaryBounds.length > 0
12 |       ? Math.min(...sideBarFormState.baseSalaryBounds)
13 |       : 0;
14 | 
15 |   const maxBaseSalary =
16 |     sideBarFormState.baseSalaryBounds.length > 0
17 |       ? Math.max(...sideBarFormState.baseSalaryBounds)
18 |       : 1000000;
19 | 
20 |   const jobTypes = sideBarFormState.jobTypes.map((jobType) =>
21 |     capitalizeFirstLetter(jobType)
22 |   );
23 | 
24 |   const experienceLevels = sideBarFormState.experienceLevels.map(
25 |     (experienceLevel) => capitalizeFirstLetter(experienceLevel)
26 |   );
27 | 
28 |   const query = {
29 |     ...sideBarFormState,
30 |     searchBarText: searchFormState,
31 |     minBaseSalary,
32 |     maxBaseSalary,
33 |     jobTypes,
34 |     experienceLevels,
35 |   };
36 | 
37 |   console.log(query);
38 |   const jobs = await datasource.searchJobs(query);
39 |   res.status(200).json(jobs);
40 | }
41 | 


--------------------------------------------------------------------------------
/pages/api/test-strapi.js:
--------------------------------------------------------------------------------
1 | import datasource from '../../datalayer';
2 | 
3 | export default async function handler(req, res) {
4 |   const data = await datasource.getJobs();
5 |   res.status(200).json({ data });
6 | }
7 | 


--------------------------------------------------------------------------------
/pages/company/[slug].jsx:
--------------------------------------------------------------------------------
 1 | import CompanyDetails from '../../components/data/details/CompanyDetails';
 2 | import LoadingSpinner from '../../components/ui/LoadingSpinner';
 3 | import datasource from '../../datalayer';
 4 | 
 5 | const CompanyPage = ({ company, companyJobs }) => {
 6 |   if (!company)
 7 |     return <LoadingSpinner customMessage='Loading company data ...' />;
 8 |   return <CompanyDetails company={company} companyJobs={companyJobs} />;
 9 | };
10 | 
11 | export default CompanyPage;
12 | 
13 | export const getStaticProps = async ({ params }) => {
14 |   const slug = params.slug;
15 |   const company = await datasource.getCompanyBySlug({ slug });
16 |   const companyJobs = await datasource.getJobsByCompanyId({ id: company.id });
17 | 
18 |   if (!company) {
19 |     return {
20 |       redirect: {
21 |         destination: '/',
22 |         permanent: false,
23 |       },
24 |     };
25 |   }
26 | 
27 |   return {
28 |     props: {
29 |       company,
30 |       companyJobs,
31 |     },
32 |     revalidate: 5,
33 |   };
34 | };
35 | 
36 | export const getStaticPaths = async () => {
37 |   const slugs = await datasource.getCompaniesSlugs();
38 |   const paths = slugs.map((slug) => ({ params: { slug } }));
39 |   return {
40 |     paths,
41 |     fallback: true,
42 |   };
43 | };
44 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import datasource from '../datalayer';
 2 | import JobsPage from '../components/ui/JobsPage';
 3 | 
 4 | export default function Index({ jobs, jobSkills }) {
 5 |   return <JobsPage jobs={jobs} jobSkills={jobSkills} />;
 6 | }
 7 | 
 8 | export const getStaticProps = async (ctx) => {
 9 |   const jobs = await datasource.getJobs();
10 |   const jobSkills = await datasource.getJobsSkills();
11 | 
12 |   return {
13 |     props: {
14 |       jobs,
15 |       jobSkills,
16 |     },
17 |     revalidate: 5,
18 |   };
19 | };
20 | 


--------------------------------------------------------------------------------
/pages/job/[slug].jsx:
--------------------------------------------------------------------------------
 1 | import datasource from '../../datalayer';
 2 | import JobDetails from '../../components/data/details/JobDetails';
 3 | import LoadingSpinner from '../../components/ui/LoadingSpinner';
 4 | 
 5 | const JobDetailsPage = ({ job }) => {
 6 |   if (!job) return <LoadingSpinner customMessage='Loading job data ...' />;
 7 |   return <JobDetails job={job} />;
 8 | };
 9 | export default JobDetailsPage;
10 | 
11 | export const getStaticPaths = async () => {
12 |   const slugs = await datasource.getJobsSlugs();
13 |   const paths = slugs.map((slug) => ({ params: { slug } }));
14 |   return {
15 |     paths,
16 |     fallback: true,
17 |   };
18 | };
19 | 
20 | export const getStaticProps = async ({ params }) => {
21 |   const slug = params.slug;
22 |   const job = await datasource.getJobBySlug({ slug });
23 | 
24 |   if (!job) {
25 |     return {
26 |       redirect: {
27 |         destination: '/',
28 |         permanent: false,
29 |       },
30 |     };
31 |   }
32 | 
33 |   return {
34 |     props: {
35 |       job,
36 |     },
37 |     revalidate: 5,
38 |   };
39 | };
40 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lifteddotsite/strapi-nextjs-tutorials/0e46abe04090a1a8752658ff1328bdd59c92c627/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/lifted.site-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lifteddotsite/strapi-nextjs-tutorials/0e46abe04090a1a8752658ff1328bdd59c92c627/public/images/lifted.site-banner.png


--------------------------------------------------------------------------------
/public/images/liftedwp-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lifteddotsite/strapi-nextjs-tutorials/0e46abe04090a1a8752658ff1328bdd59c92c627/public/images/liftedwp-banner.png


--------------------------------------------------------------------------------
/public/images/liftedwp-founder-avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lifteddotsite/strapi-nextjs-tutorials/0e46abe04090a1a8752658ff1328bdd59c92c627/public/images/liftedwp-founder-avatar.png


--------------------------------------------------------------------------------
/public/images/logo-symbolic-main-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lifteddotsite/strapi-nextjs-tutorials/0e46abe04090a1a8752658ff1328bdd59c92c627/public/images/logo-symbolic-main-512.png


--------------------------------------------------------------------------------
/public/images/logo-text-and-symbolic-main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lifteddotsite/strapi-nextjs-tutorials/0e46abe04090a1a8752658ff1328bdd59c92c627/public/images/logo-text-and-symbolic-main.png


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     './pages/**/*.{js,ts,jsx,tsx}',
 4 |     './components/**/*.{js,ts,jsx,tsx}',
 5 |   ],
 6 |   theme: {
 7 |     extend: {
 8 |       colors: {
 9 |         liftedgreen: {
10 |           50: '#acd8cc',
11 |           100: '#98cec0',
12 |           200: '#83c4b3',
13 |           300: '#6ebaa6',
14 |           400: '#59b199',
15 |           500: '#45a78d',
16 |           600: '#309d80',
17 |           700: '#2b8d73',
18 |           800: '#267e66',
19 |           900: '#226e5a',
20 |         },
21 |       },
22 |     },
23 |   },
24 |   plugins: [
25 |     require('@tailwindcss/typography'),
26 |     require('@tailwindcss/forms'),
27 |     require('@tailwindcss/line-clamp'),
28 |     require('@tailwindcss/aspect-ratio'),
29 |   ],
30 | };
31 | 


--------------------------------------------------------------------------------