@/CivicSignal: Fix previews on research blog content

apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.js

@@ -1,6 +1,6 @@
 import { Section } from "@commons-ui/core";
 import { RichTypography } from "@commons-ui/next";
-import { Grid } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import React from "react";
 
 import ArticleCardList from "@/civicsignalblog/components/ArticleCardList";
@@ -26,12 +26,10 @@ const ArticleGrid = React.forwardRef(function ArticleGrid(props, ref) {
   return (
     <Section sx={{ px: { xs: "20px", sm: 0 }, ...sx }} {...other} ref={ref}>
       <Grid container sx={{ py: { xs: "28px", md: 8, lg: "105.29px" } }}>
-        <Grid
-          item
-          xs={12}
+        <Box
           sx={{
             order: { xs: 0, md: 1 },
-            display: articles?.length > 0 ? "flex" : "none",
+            width: "100%",
           }}
         >
           {/* title is below featuredArticle in md and above hence needs margin-top */}
@@ -59,7 +57,7 @@ const ArticleGrid = React.forwardRef(function ArticleGrid(props, ref) {
               mb: { xs: 2.5, md: 5 },
             }}
           />
-        </Grid>
+        </Box>
         {featuredArticle ? (
           <Grid
             item

apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.snap.js

@@ -9,7 +9,7 @@ exports[`<ArticleGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1rk8ai9-MuiGrid-root"
+        class="MuiBox-root css-1xugy04"
       >
         <div
           class="MuiStack-root css-kbcct1-MuiStack-root"

apps/civicsignalblog/src/components/Articles/Articles.snap.js

@@ -10,7 +10,7 @@ exports[`<Articles /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1cj7j73-MuiGrid-root"
+          class="MuiBox-root css-1xugy04"
         >
           <div
             class="MuiTypography-root MuiTypography-h4 css-7yxv5i-MuiTypography-root"

apps/civicsignalblog/src/components/Footer/FooterDescription.js

@@ -29,7 +29,7 @@ const FooterDescription = React.forwardRef(
         </Link>
         <RichText
           variant="footer"
-          typographyProps={{
+          TypographyProps={{
             LinkProps: {
               color: "text.secondary",
               sx: { textDecorationColor: "text.secondary" },

apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.js

@@ -12,32 +12,34 @@ const LongFormMedia = React.forwardRef((props, ref) => {
       }}
       ref={ref}
     >
-      <Figure
-        ImageProps={{
-          alt: image.alt,
-          sx: {
-            objectFit: "cover",
-            position: "relative !important",
-          },
-          src: image.src,
-        }}
-        sx={{
-          height: {
-            xs: "200px",
-            md: "500px",
-          },
-          width: "100%",
-        }}
-      >
-        <figcaption
-          style={{
+      {image && (
+        <Figure
+          ImageProps={{
+            alt: image.alt,
+            sx: {
+              objectFit: "cover",
+              position: "relative !important",
+            },
+            src: image.src,
+          }}
+          sx={{
+            height: {
+              xs: "200px",
+              md: "500px",
+            },
             width: "100%",
-            margin: "0 auto",
           }}
         >
-          {image.alt}
-        </figcaption>
-      </Figure>
+          <figcaption
+            style={{
+              width: "100%",
+              margin: "0 auto",
+            }}
+          >
+            {image.alt}
+          </figcaption>
+        </Figure>
+      )}
     </Box>
   );
 });

apps/civicsignalblog/src/components/NavBar/NavBar.js

@@ -67,8 +67,4 @@ NavBar.propTypes = {
   ),
 };
 
-NavBar.defaultProps = {
-  menus: undefined,
-};
-
 export default NavBar;

apps/civicsignalblog/src/components/Page/Page.js

@@ -36,12 +36,4 @@ Page.propTypes = {
   title: PropTypes.string,
 };
 
-Page.defaultProps = {
-  children: undefined,
-  navbar: undefined,
-  blocks: undefined,
-  footer: undefined,
-  title: undefined,
-};
-
 export default Page;

apps/civicsignalblog/src/components/PageHeader/PageHeader.js

@@ -33,7 +33,7 @@ const PageHeader = React.forwardRef(function PageHeader(props, ref) {
           {title}
         </RichTypography>
         <RichText
-          typographyProps={{
+          TypographyProps={{
             fontWeight: "normal",
             variant: "h2",
           }}

apps/civicsignalblog/src/components/PageHeader/PageHeader.snap.js

@@ -15,10 +15,9 @@ exports[`<PageHeader /> renders unchanged 1`] = `
       </h2>
       <div
         class="MuiBox-root css-0"
-        typographyprops="[object Object]"
       >
-        <p
-          class="MuiTypography-root MuiTypography-body1 css-oo170e-MuiTypography-root"
+        <h2
+          class="MuiTypography-root MuiTypography-h2 css-hd3436-MuiTypography-root"
         >
           Let's
           <strong>
@@ -28,7 +27,7 @@ exports[`<PageHeader /> renders unchanged 1`] = `
           <strong>
              together
           </strong>
-        </p>
+        </h2>
       </div>
     </div>
   </div>

apps/civicsignalblog/src/lib/data/common/index.js

@@ -155,11 +155,13 @@ function getDefaultErrorPageProps(slug = "404") {
 }
 
 export async function getPageProps(api, context) {
-  const { params } = context;
+  const { params, draftMode = false } = context;
+  const options = { draft: draftMode };
+
   const slug = getPageSlug(context);
   let {
     docs: [page],
-  } = await api.findPage(slug);
+  } = await api.findPage(slug, options);
   if (!page) {
     if (["404", "500"].includes(slug)) {
       return getDefaultErrorPageProps(slug);

apps/civicsignalblog/src/lib/data/pagify/post.js

@@ -1,10 +1,11 @@
 import { getPost } from "@/civicsignalblog/lib/data/utils/posts";
 
 async function post(api, context) {
-  const { params } = context;
+  const { params, draftMode = false } = context;
+  const options = { draft: draftMode };
   const page = params.slugs[1];
   const slug = params.slugs[2];
-  return getPost(api, slug, page);
+  return getPost(api, slug, page, options);
 }
 
 export default post;

apps/civicsignalblog/src/lib/data/utils/posts.js

@@ -90,8 +90,9 @@ export async function getPosts(api, params, primaryTag) {
   };
 }
 
-export async function getPost(api, slug, primaryTag) {
+export async function getPost(api, slug, primaryTag, options) {
   const { docs } = await api.getCollection("posts", {
+    ...options,
     where: {
       slug: {
         equals: slug,

apps/civicsignalblog/src/payload/access/canAccessApplication.js

@@ -4,7 +4,7 @@ export default async function canAccessApplication(req, searchString) {
   if (user) {
     const app = headers["CS-App"] || user.currentApp || user.defaultApp;
     return (
-      app.toLowerCase() === searchString.toLowerCase() &&
+      app?.toLowerCase() === searchString.toLowerCase() &&
       user.allowedApps.includes(app)
     );
   }

apps/civicsignalblog/src/payload/components/allowedAppSelect/index.tsx

@@ -6,7 +6,7 @@ import applications from "#civicsignalblog/payload/lib/data/common/applications"
 
 function CustomSelectComponent({ path, label }) {
   const { user } = useAuth();
-  const { value, setValue } = useField({ path });
+  const { value, setValue } = useField<string>({ path });
   const [options, setOptions] = useState([]);
 
   useEffect(() => {
@@ -32,7 +32,7 @@ function CustomSelectComponent({ path, label }) {
         path={path}
         name={path}
         options={options}
-        value={String(value)}
+        value={value}
         onChange={(e) => setValue(e.value)}
       />
     </div>

packages/commons-ui-payload/src/RichText/RichText.js

@@ -48,7 +48,7 @@ const serialize = (children, props) =>
     if (!node) {
       return null;
     }
-    const TypographyProps = { ...DEFAULT_PROPS, ...props.TypographyProps };
+    const TypographyProps = { ...DEFAULT_PROPS, ...props?.TypographyProps };
     switch (node.type) {
       case "h1":
         return (