import React from "react" import Head from "next/head" import DefaultErrorPage from "next/error" import { NextSeo, BreadcrumbJsonLd } from "next-seo" import { useRouter } from "next/router" import { getAllCompaniesOnly, getCompanyBySlug } from "../../lib/company" import JobsList from "../../components/JobsList" export async function getStaticPaths() { const companies = await getAllCompaniesOnly() if (companies.length) { return { paths: companies.map((company) => { const { company: { data: companyData }, } = company return { params: { companySlug: companyData.slug, }, } }), fallback: "blocking", } } else { return { paths: [], fallback: "blocking", } } } export async function getStaticProps(ctx) { const company = await getCompanyBySlug(ctx.params.companySlug) const notFound = !company if (!notFound) { let companyData = JSON.parse(company) return { props: { company: companyData.company, jobs: companyData.jobs, }, revalidate: 1, } } else { return { props: {}, notFound, } } } const RemoteCompaniesIndexPage = (props) => { const router = useRouter() const { company: { data: company }, jobs: { data: jobs }, } = props let date = new Date() let dateOptions = { year: "numeric", month: "long", } if (router.isFallback) { return ( <div className="max-w-screen-xl mx-auto py-10 px-4 sm:px-6"> <h1>Loading...</h1> </div> ) } if (!company) { return ( <> <Head> <meta name="robots" content="noindex" /> </Head> <DefaultErrorPage statusCode={404} /> </> ) } else { return ( <> <NextSeo title={`${company.name} hiring remotely`} description={`${company.name} is hiring remotely. ${ jobs.length } remote jobs open in ${date.toLocaleDateString( "en-EN", dateOptions )}`} canonical={`https://remotebond.com/remote-companies/${company.slug}`} openGraph={{ url: `https://remotebond.com/remote-companies/${company.slug}`, title: `${company.name} hiring remotely`, description: `${company.name} is hiring remotely. ${ jobs.length } remote jobs open in ${date.toLocaleDateString( "en-EN", dateOptions )}`, }} /> <BreadcrumbJsonLd itemListElements={[ { position: 1, name: "remotebond.com", item: "https://remotebond.com", }, { position: 2, name: "Remote Companies", item: "https://remotebond.com/remote-companies", }, { position: 3, name: `${company.name}`, }, ]} /> <div className="relative overflow-hidden bg-black"> <div className="max-w-screen-xl mx-auto text-center py-6 md:py-12 px-4 sm:px-6"> <h1 className="text-white font-black text-2xl md:text-4xl my-4"> {company.name} </h1> <h2 className="text-base md:text-xl text-rb-gray-4 w-3/4 mx-auto"> {company.name} is hiring remotely and currently has {jobs.length}{" "} remote job {jobs.length === 1 ? "position" : "positions"} open in{" "} {date.toLocaleDateString("en-EN", dateOptions)} </h2> </div> </div> <div className="w-full max-w-screen-xl mx-auto py-10 px-4 sm:px-6"> {jobs && jobs.length && ( <JobsList title={`Remote jobs at ${company.name}`} jobs={jobs} /> )} </div> </> ) } } export default RemoteCompaniesIndexPage