Merge pull request #503 from varianter/refactor/v3-inline-benefit-com…

…ponent

v3 - inline benefit component

src/app/(main)/[slug]/page.tsx

@@ -2,12 +2,12 @@ import { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { Blog } from "src/blog/Blog";
 import BlogPreview from "src/blog/BlogPreview";
-import SalaryAndBenefits from 'src/salaryAndBenefits/SalaryAndBenefits';
+import SalaryAndBenefits from "src/salaryAndBenefits/SalaryAndBenefits";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import SectionRenderer from "src/utils/renderSection";
 import { fetchSeoData, generateMetadataFromSeo } from "src/utils/seo";
 import { BlogPage, PageBuilder, Post } from "studio/lib/payloads/pages";
-import { SalaryAndBenefits as SalaryAndBenefitsPayload } from 'studio/lib/payloads/salaryAndBenefits';
+import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits";
 import {
   BLOG_PAGE_QUERY,
   POSTS_QUERY,
@@ -36,13 +36,22 @@ async function Page({ params }: Props) {
   const { slug } = params;
   const { perspective, isDraftMode } = getDraftModeInfo();
 
-  const [initialPage, initialBlogPage, initialSalaryAndBenefitsPage] = await Promise.all([
-    loadQuery<PageBuilder>(SLUG_QUERY, { slug }, { perspective }),
-    loadQuery<BlogPage>(BLOG_PAGE_QUERY, { slug }, { perspective }),
-    loadQuery<SalaryAndBenefitsPayload>(SALARY_AND_BENEFITS_PAGE_QUERY, { slug }, { perspective }),
-  ]);
+  const [initialPage, initialBlogPage, initialSalaryAndBenefitsPage] =
+    await Promise.all([
+      loadQuery<PageBuilder>(SLUG_QUERY, { slug }, { perspective }),
+      loadQuery<BlogPage>(BLOG_PAGE_QUERY, { slug }, { perspective }),
+      loadQuery<SalaryAndBenefitsPage>(
+        SALARY_AND_BENEFITS_PAGE_QUERY,
+        { slug },
+        { perspective },
+      ),
+    ]);
 
-  if (!initialPage.data && !initialBlogPage.data && !initialSalaryAndBenefitsPage.data) {
+  if (
+    !initialPage.data &&
+    !initialBlogPage.data &&
+    !initialSalaryAndBenefitsPage.data
+  ) {
     console.log(`Page ${slug} not found`);
     // TODO: add error snackbar
     redirect("/");
@@ -53,7 +62,7 @@ async function Page({ params }: Props) {
     const initialPosts = await loadQuery<Post[]>(
       POSTS_QUERY,
       { slug },
-      { perspective }
+      { perspective },
     );
 
     if (!initialPosts) {
@@ -95,9 +104,13 @@ async function Page({ params }: Props) {
 
   if (initialSalaryAndBenefitsPage.data) {
     return isDraftMode ? (
-      <SalaryAndBenefitsPreview initialSalaryAndBenefits={initialSalaryAndBenefitsPage} />
+      <SalaryAndBenefitsPreview
+        initialSalaryAndBenefits={initialSalaryAndBenefitsPage}
+      />
     ) : (
-      <SalaryAndBenefits salaryAndBenefits={initialSalaryAndBenefitsPage.data} />
+      <SalaryAndBenefits
+        salaryAndBenefits={initialSalaryAndBenefitsPage.data}
+      />
     );
   }
 

src/salaryAndBenefits/SalaryAndBenefits.tsx

@@ -1,23 +1,26 @@
 import styles from "./salaryAndBenefits.module.css";
 import Text from "src/components/text/Text";
-import {SalaryAndBenefits as SalaryAndBenefitsPayload} from "studio/lib/payloads/salaryAndBenefits";
-import Benefit from './components/benefit/Benefit';
+import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits";
+import { RichText } from "src/components/richText/RichText";
 
 interface SalaryAndBenefitsProps {
-  salaryAndBenefits: SalaryAndBenefitsPayload
+  salaryAndBenefits: SalaryAndBenefitsPage;
 }
 
-const SalaryAndBenefits = ({salaryAndBenefits}: SalaryAndBenefitsProps) => {
+const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
   return (
     <div className={styles.wrapper}>
       <Text type="h1">{salaryAndBenefits.basicTitle}</Text>
       <div className={styles.benefits}>
         {salaryAndBenefits.benefits.map((benefit) => (
-          <Benefit key={benefit._key} benefit={benefit} />
+          <div key={benefit._key} className={styles.benefitWrapper}>
+            <Text type="h2">{benefit.basicTitle}</Text>
+            <RichText value={benefit.richText} />
+          </div>
         ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default SalaryAndBenefits;
+export default SalaryAndBenefits;

src/salaryAndBenefits/SalaryAndBenefitsPreview.tsx

@@ -2,17 +2,17 @@
 import { Suspense } from "react";
 import SalaryAndBenefits from "./SalaryAndBenefits";
 import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
-import { SalaryAndBenefits as SalaryAndBenefitsPayload } from "studio/lib/payloads/salaryAndBenefits";
+import { SalaryAndBenefitsPage } from "studio/lib/payloads/salaryAndBenefits";
 import { SALARY_AND_BENEFITS_PAGE_QUERY } from "studio/lib/queries/pages";
 
 interface SalaryAndBenefitsPreviewProps {
-  initialSalaryAndBenefits: QueryResponseInitial<SalaryAndBenefitsPayload>;
+  initialSalaryAndBenefits: QueryResponseInitial<SalaryAndBenefitsPage>;
 }
 
 const SalaryAndBenefitsPreview = ({
   initialSalaryAndBenefits,
 }: SalaryAndBenefitsPreviewProps) => {
-  const { data: newData } = useQuery<SalaryAndBenefitsPayload>(
+  const { data: newData } = useQuery<SalaryAndBenefitsPage>(
     SALARY_AND_BENEFITS_PAGE_QUERY,
     { slug: initialSalaryAndBenefits.data.slug.current },
     { initial: initialSalaryAndBenefits },

src/salaryAndBenefits/salaryAndBenefits.module.css

@@ -10,4 +10,10 @@
     flex-direction: column;
     gap: 5rem;
     max-width: var(--max-content-width-medium);
+}
+
+.benefitWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }

studio/lib/payloads/salaryAndBenefits.ts

@@ -1,5 +1,5 @@
-import { PortableTextBlock } from 'src/components/richText/RichText';
-import { Slug } from './global';
+import { PortableTextBlock } from "src/components/richText/RichText";
+import { Slug } from "./global";
 
 export interface Benefit {
   _type: string;
@@ -8,8 +8,7 @@ export interface Benefit {
   richText: PortableTextBlock[];
 }
 
-
-export interface SalaryAndBenefits {
+export interface SalaryAndBenefitsPage {
   _createdAt: string;
   _id: string;
   _rev: string;
@@ -19,4 +18,4 @@ export interface SalaryAndBenefits {
   page: string;
   slug: Slug;
   benefits: Benefit[];
-}
+}