Skip to content

Commit

Permalink
feat(strapi-cms): Rewrite Jobs page to use StaticPages component and …
Browse files Browse the repository at this point in the history 
…to be editable through Strapi
  • Loading branch information
@relyks
relyks committed Nov 1, 2023
1 parent 54ecfae commit 1b35068
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 110 deletions.
5 changes: 5 additions & 0 deletions static/css/static.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1266,6 +1266,11 @@ p.registration-links a:hover{
margin-bottom: 40px;
font-weight: bold;
}

#jobsPage .nothing a {
display: inline-block;
}

#jobsPage section.department h2{
font-weight: 500;
font-size: 22px;
Expand Down
6 changes: 4 additions & 2 deletions static/js/ReaderApp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ import {
EducatorsPage,
RabbisPage,
DonatePage,
WordByWordPage
WordByWordPage,
JobsPage
} from './StaticPages';
import {
SignUpModal,
Expand Down Expand Up @@ -2266,5 +2267,6 @@ export {
EducatorsPage,
RabbisPage,
DonatePage,
WordByWordPage
WordByWordPage,
JobsPage
};
203 changes: 201 additions & 2 deletions static/js/StaticPages.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useState, useRef} from 'react';
import React, {useState, useRef, useEffect, memo} from 'react';
import {
SimpleInterfaceBlock,
NewsletterSignUpForm,
Expand Down Expand Up @@ -2636,6 +2636,204 @@ const StaticHR = () =>
const ConditionalLink = ({ link, children }) =>
link ? <a href={link} target="_blank">{children}</a> : children;

const JobsPageHeader = ({ jobsAreAvailable }) => {
return (
<>
<header>
<h1 className="serif">
<span className="int-en">Jobs at Sefaria</span>
<span className="int-he">משרות פנויות בספריא</span>
</h1>

{jobsAreAvailable ? (
<>
<h2>
<span className="int-en">About Sefaria</span>
<span className="int-he">אודות ספריא</span>
</h2>
<p>
<span className="int-en">
Sefaria is a non-profit organization dedicated to creating the
future of Torah in an open and participatory way. We are assembling
a free, living library of Jewish texts and their interconnections,
in Hebrew and in translation.
</span>
<span className="int-he">
ספריא היא ארגון ללא מטרות רווח שמטרתו יצירת הדור הבא של לימוד התורה
באופן פתוח ומשותף. אנחנו בספריא מרכיבים ספרייה חיה וחופשית של טקסטים
יהודיים וכלל הקישורים ביניהם, בשפת המקור ובתרגומים.
</span>
</p>
</>
) : null}
</header>
</>
);
};

const Job = ({ job }) => {
return (
<div className="job">
<a className="joblink" target="_blank" href={job.jobLink}>
{job.jobDescription}
</a>
</div>
);
};

const JobsListForDepartment = ({ jobsList }) => {
return (
<section className="jobsListForDepartment">
{jobsList.map((job) => (
<Job key={job.id} job={job} />
))}
</section>
);
};

const DepartmentJobPostings = ({ department, departmentJobPostings }) => {
return (
<section className="section department englishOnly">
<header>
<h2 className="anchorable">{department}</h2>
</header>
<JobsListForDepartment key={department} jobsList={departmentJobPostings} />
</section>
);
};

const JobPostingsByDepartment = ({ jobPostings }) => {
const groupedJobPostings = jobPostings.reduce((jobPostingsGroupedByDepartment, jobPosting) => {
const category = jobPosting.jobDepartmentCategory;
if (!jobPostingsGroupedByDepartment[category]) {
jobPostingsGroupedByDepartment[category] = [];
}
jobPostingsGroupedByDepartment[category].push(jobPosting);
return jobPostingsGroupedByDepartment;
}, {});

return (
Object.entries(groupedJobPostings).map(([department, departmentJobPostings]) => {
return (
<DepartmentJobPostings
key={department}
department={department}
departmentJobPostings={departmentJobPostings}
/>
);
})
);
};


const NoJobsNotice = () => {
return (
<div className="section nothing">
<p>
<span className="int-en">
Sefaria does not currently have any open positions.
Please follow us on <a target="_blank" href="http://www.facebook.com/sefaria.org" >Facebook</a>
to hear about our next openings.
</span>
<span className="int-he">
ספריא איננה מחפשת כעת עובדים חדשים.
עקבו אחרינו ב<a target="_blank" href="http://www.facebook.com/sefaria.org" >פייסבוק</a>&nbsp;
כדי להשאר מעודכנים במשרות עתידיות.
</span>
</p>
</div>
);
};

const JobsPage = memo(() => {
const [jobPostings, setJobPostings] = useState([]);
const [error, setError] = useState(null);

useEffect(() => {
const fetchJobsJSON = async () => {
const query = `
query {
jobPostings(pagination: { limit: -1 }) {
data {
id
attributes {
jobLink
jobDescription
jobDepartmentCategory
}
}
}
}
`;
try {
const response = await fetch(STRAPI_INSTANCE + "/graphql", {
method: "POST",
mode: "cors",
cache: "no-cache",
credentials: "omit",
headers: {
"Content-Type": "application/json",
},
redirect: "follow",
referrerPolicy: "no-referrer",
body: JSON.stringify({ query }),
});
if (!response.ok) {
throw new Error(`HTTP Error: ${response.statusText}`);
}
const data = await response.json();
return data;
} catch (error) {
throw error;
}
};

const loadJobPostings = async () => {
if (typeof STRAPI_INSTANCE !== "undefined" && STRAPI_INSTANCE) {
try {
const jobsData = await fetchJobsJSON();

const jobsFromStrapi = jobsData.data?.jobPostings?.data?.map((jobPosting) => {
return {
id: jobPosting.id,
jobLink: jobPosting.attributes.jobLink,
jobDescription: jobPosting.attributes.jobDescription,
jobDepartmentCategory: jobPosting.attributes.jobDepartmentCategory
.split("_")
.join(" "),
};
});

setJobPostings(jobsFromStrapi);
} catch (error) {
console.error("Fetch error:", error);
setError("Error: Sefaria's CMS cannot be reached");
}
} else {
setError("Error: Sefaria's CMS cannot be reached");
}
};

loadJobPostings();
}, []);

return (
<div>
{error ? (
<h1>{error}</h1>
) : (
<>
<JobsPageHeader jobsAreAvailable={jobPostings?.length} />
{jobPostings?.length ? (
<JobPostingsByDepartment jobPostings={jobPostings} />
) : (
<NoJobsNotice />
)}
</>
)}
</div>
);
});

export {
RemoteLearningPage,
Expand All @@ -2648,5 +2846,6 @@ export {
EducatorsPage,
RabbisPage,
DonatePage,
WordByWordPage
WordByWordPage,
JobsPage
}
117 changes: 11 additions & 106 deletions templates/static/jobs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,117 +5,22 @@

{% block description %}{% trans "Job openings at Sefaria, a non-profit technology organization dedicated to building the Jewish future." %}{% endblock %}

{% block js %}
<script>
{% autoescape off %}
DJANGO_VARS.containerId = 'jobsPageContent';
DJANGO_VARS.reactComponentName = 'JobsPage';
{% endautoescape %}
</script>
{% endblock %}

{% block content %}

<main id="jobsPage" class="container biReady static">
<div class="inner">
<header>
<h1 class="serif">
<span class="int-en">Jobs at Sefaria</span>
<span class="int-he">משרות פנויות בספריא</span>
</h1>

<!-- Comment out when jobs page has no content -->
<h2>
<span class="int-en">About Sefaria</span>
<span class="int-he">אודות ספריא</span>
</h2>
<p>
<span class="int-en">
Sefaria is a non-profit organization dedicated to creating the future of Torah in an open and
participatory way.
We are assembling a free, living library of Jewish texts and their interconnections, in Hebrew and
in translation.
</span>
<span class="int-he">
ספריא היא ארגון ללא מטרות רווח שמטרתו יצירת הדור הבא של לימוד התורה באופן פתוח ומשותף.
אנחנו בספריא מרכיבים ספרייה חיה וחופשית של טקסטים יהודיים וכלל הקישורים ביניהם, בשפת המקור ובתרגומים.
</span>
</p>
<!-- Comment out when jobs page has no content -->
</header>


<!---<section class="section department englishOnly">
<header>
<h2 class="anchorable">Operations</h2>
</header>
<section class="jobsListForDepartment">
<div class="job"><a class="jobLink" target="_blank" href=""></a></div>
</section>
</section>--->
<!--
<section class="section department englishOnly">
<header>
<h2 class="anchorable">Engineering</h2>
</header>
<section class="jobsListForDepartment">
</section>
</section>
<section class="section department englishOnly">
<header>
<h2 class="anchorable">Learning</h2>
</header>
<section class="jobsListForDepartment">
<div class="job"><a class="jobLink" target="_blank" href=""></a></div>
<div class="job"><a class="jobLink" target="_blank" href=""></a></div>
</section>
</section>
<section class="section department englishOnly">
<header>
<h2 class="anchorable">HR and Operations</h2>
</header>
<section class="jobsListForDepartment">
<div class="job"><a class="" target="_blank" href=""></a></div>
</section>
</section> -->

<section class="section department englishOnly">
<header>
<h2 class="anchorable">Marketing and Communications</h2>
</header>
<section class="jobsListForDepartment">
<div class="job"><a class="joblink" target="_blank" href="https://sefaria.breezy.hr/p/b11c89877ad6-communications-specialist?state=published">Communications Specialist</a></div>
</section>
</section>




<!--
<section class="section department englishOnly">
<header>
<h2 class="anchorable">Product</h2>
</header>
<section class="jobsListForDepartment">
<div class="job"><a class="jobLink" target="_blank" href=""></a></div>
</section>
<section class="jobsListForDepartment">
<div class="job"><a class="jobLink" target="_blank" href=""></a></div>
</section>
</section>
<section class="section department englishOnly">
<header>
<h2 class="anchorable">Israel Team</h2>
</header>
</section>--->

<!--
<div class="section nothing">
<p>
<span class="int-en">
Sefaria does not currently have any open positions.
Please follow us on <a _target="blank" href="http://www.facebook.com/sefaria.org" >Facebook</a>
to hear about our next openings.
</span>
<span class="int-he">
ספריא איננה מחפשת כעת עובדים חדשים.
עקבו אחרינו ב<a _target="blank" href="http://www.facebook.com/sefaria.org" >פייסבוק</a>
כדי להשאר מעודכנים במשרות עתידיות.
</span>
</p>
<div id="jobsPageContent">
<h1 id="appLoading">Loading...</h1>
</div>
-->

<aside class="solicitationNotice">
<p>
Expand Down

0 comments on commit 1b35068

Please sign in to comment.