[Content] TC and OG fields support and updated logic for OG Image (#2951

) Resolves comments on #2933 (comment) [Screencast from 09-11-2024 11:10:13 AM.webm](https://github.com/user-attachments/assets/34ebbaa0-8f71-424f-b93d-2dc4c032ac66)
zesty-io · Sep 11, 2024 · d714d8a · d714d8a
1 parent fd65103
commit d714d8a
Show file tree

Hide file tree

Showing 17 changed files with 578 additions and 141 deletions.
diff --git a/src/apps/content-editor/src/app/components/Editor/Editor.js b/src/apps/content-editor/src/app/components/Editor/Editor.js
@@ -18,6 +18,7 @@ import { FieldError } from "./FieldError";
 import styles from "./Editor.less";
 import { cloneDeep } from "lodash";
 import { useGetContentModelFieldsQuery } from "../../../../../../shell/services/instance";
+import { DYNAMIC_META_FIELD_NAMES } from "../../views/ItemEdit/Meta";
 
 export const MaxLengths = {
   text: 150,
@@ -48,10 +49,35 @@ export default memo(function Editor({
   const { data: fields } = useGetContentModelFieldsQuery(modelZUID);
   const [isLoaded, setIsLoaded] = useState(false);
 
+  const metaFields = useMemo(() => {
+    if (fields?.length) {
+      return fields.reduce((accu, curr) => {
+        if (
+          !curr.deletedAt &&
+          DYNAMIC_META_FIELD_NAMES.includes(curr.name.toLowerCase())
+        ) {
+          accu[curr.name] = curr;
+        }
+
+        return accu;
+      }, {});
+    }
+
+    return {};
+  }, [fields]);
+
   const activeFields = useMemo(() => {
     if (fields?.length) {
       return fields.filter(
-        (field) => !field.deletedAt && field.name !== "og_image"
+        (field) =>
+          !field.deletedAt &&
+          ![
+            "og_image",
+            "og_title",
+            "og_description",
+            "tc_title",
+            "tc_description",
+          ].includes(field.name)
       );
     }
 
@@ -203,6 +229,24 @@ export default memo(function Editor({
             value: value,
           });
 
+          if ("og_title" in metaFields) {
+            dispatch({
+              type: "SET_ITEM_DATA",
+              itemZUID,
+              key: "og_title",
+              value: value,
+            });
+          }
+
+          if ("tc_title" in metaFields) {
+            dispatch({
+              type: "SET_ITEM_DATA",
+              itemZUID,
+              key: "tc_title",
+              value: value,
+            });
+          }
+
           // Datasets do not get path parts
           if (model?.type !== "dataset") {
             dispatch({
@@ -239,10 +283,28 @@ export default memo(function Editor({
             key: "metaDescription",
             value: value.replace(/<[^>]*>/g, "").slice(0, 160),
           });
+
+          if ("og_description" in metaFields) {
+            dispatch({
+              type: "SET_ITEM_DATA",
+              itemZUID,
+              key: "og_description",
+              value: value.replace(/<[^>]*>/g, "").slice(0, 160),
+            });
+          }
+
+          if ("tc_description" in metaFields) {
+            dispatch({
+              type: "SET_ITEM_DATA",
+              itemZUID,
+              key: "tc_description",
+              value: value.replace(/<[^>]*>/g, "").slice(0, 160),
+            });
+          }
         }
       }
     },
-    [fieldErrors]
+    [fieldErrors, metaFields]
   );
 
   const applyDefaultValuesToItemData = useCallback(() => {

diff --git a/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx b/src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx
@@ -94,7 +94,7 @@ export const ItemCreate = () => {
 
   const {
     isSuccess: isSuccessNewModelFields,
-    isFetching: isFetchingNewModelFields,
+    isLoading: isFetchingNewModelFields,
   } = useGetContentModelFieldsQuery(modelZUID);
 
   // on mount and update modelZUID, load item fields

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js b/src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js
@@ -1,4 +1,11 @@
-import { Fragment, useEffect, useState, useMemo, createContext } from "react";
+import {
+  Fragment,
+  useEffect,
+  useState,
+  useMemo,
+  createContext,
+  useRef,
+} from "react";
 import {
   Switch,
   Route,
@@ -73,6 +80,7 @@ export default function ItemEdit() {
   const isMounted = useIsMounted();
   const location = useLocation();
   const { modelZUID, itemZUID } = useParams();
+  const metaRef = useRef(null);
   const item = useSelector((state) => state.content[itemZUID]);
   const items = useSelector((state) => state.content);
   const model = useSelector((state) => state.models[modelZUID]);
@@ -239,7 +247,8 @@ export default function ItemEdit() {
   async function save() {
     setSaveClicked(true);
 
-    if (hasErrors || hasSEOErrors) return;
+    if (hasErrors || hasSEOErrors || metaRef.current?.validateMetaFields?.())
+      return;
 
     setSaving(true);
     try {
@@ -452,6 +461,7 @@ export default function ItemEdit() {
                   path="/content/:modelZUID/:itemZUID/meta"
                   render={() => (
                     <Meta
+                      ref={metaRef}
                       onUpdateSEOErrors={(hasErrors) => {
                         setHasSEOErrors(hasErrors);
                       }}

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/FacebookPreview.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/FacebookPreview.tsx
@@ -1,16 +1,15 @@
-import { useEffect } from "react";
 import { Typography, Box, Stack } from "@mui/material";
 import { ImageRounded } from "@mui/icons-material";
 import { useLocation, useParams } from "react-router";
 import { useSelector } from "react-redux";
 
 import { useDomain } from "../../../../../../../../shell/hooks/use-domain";
 import { AppState } from "../../../../../../../../shell/store/types";
-import { useImageURL } from "./useImageURL";
 
-type FacebookPreviewProps = {};
-export const FacebookPreview = ({}: FacebookPreviewProps) => {
-  const [imageURL, setImageDimensions] = useImageURL();
+type FacebookPreviewProps = {
+  imageURL: string;
+};
+export const FacebookPreview = ({ imageURL }: FacebookPreviewProps) => {
   const { itemZUID, modelZUID } = useParams<{
     itemZUID: string;
     modelZUID: string;
@@ -23,10 +22,6 @@ export const FacebookPreview = ({}: FacebookPreviewProps) => {
       state.content[isCreateItemPage ? `new:${modelZUID}` : itemZUID]
   );
 
-  useEffect(() => {
-    setImageDimensions({ height: 290, type: "fit" });
-  }, []);
-
   return (
     <Stack bgcolor="grey.100">
       {!!imageURL ? (
@@ -39,7 +34,7 @@ export const FacebookPreview = ({}: FacebookPreviewProps) => {
           }}
           height={290}
           width="100%"
-          src={imageURL}
+          src={`${imageURL}?width=500&height=290&fit=cover`}
           flexShrink={0}
         />
       ) : (
@@ -60,7 +55,11 @@ export const FacebookPreview = ({}: FacebookPreviewProps) => {
         <Typography
           variant="h6"
           fontWeight={600}
-          color={item?.web?.metaTitle ? "text.primary" : "grey.500"}
+          color={
+            !!item?.data?.og_title || !!item?.web?.metaTitle
+              ? "text.primary"
+              : "grey.500"
+          }
           sx={{
             display: "-webkit-box",
             "-webkit-line-clamp": "2",
@@ -72,7 +71,7 @@ export const FacebookPreview = ({}: FacebookPreviewProps) => {
             textOverflow: "ellipsis",
           }}
         >
-          {item?.web?.metaTitle || "Meta Title"}
+          {item?.data?.og_title || item?.web?.metaTitle || "Meta Title"}
         </Typography>
       </Stack>
     </Stack>

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/GooglePreview.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/GooglePreview.tsx
@@ -13,10 +13,11 @@ import { InstanceAvatar } from "../../../../../../../../shell/components/global-
 import { useDomain } from "../../../../../../../../shell/hooks/use-domain";
 import { AppState } from "../../../../../../../../shell/store/types";
 import { useGetContentModelFieldsQuery } from "../../../../../../../../shell/services/instance";
-import { useImageURL } from "./useImageURL";
 
-type GooglePreviewProps = {};
-export const GooglePreview = ({}: GooglePreviewProps) => {
+type GooglePreviewProps = {
+  imageURL: string;
+};
+export const GooglePreview = ({ imageURL }: GooglePreviewProps) => {
   const { modelZUID, itemZUID } = useParams<{
     modelZUID: string;
     itemZUID: string;
@@ -26,8 +27,6 @@ export const GooglePreview = ({}: GooglePreviewProps) => {
   const domain = useDomain();
   const location = useLocation();
   const isCreateItemPage = location?.pathname?.split("/")?.pop() === "new";
-  const [imageURL, setImageDimensions] = useImageURL();
-  const { data: modelFields } = useGetContentModelFieldsQuery(modelZUID);
   const items = useSelector((state: AppState) => state.content);
   const item = items[isCreateItemPage ? `new:${modelZUID}` : itemZUID];
   const parent = items[item?.web?.parentZUID];
@@ -43,10 +42,6 @@ export const GooglePreview = ({}: GooglePreviewProps) => {
     return path.filter((i) => !!i);
   }, [domain, parent, item?.web]);
 
-  useEffect(() => {
-    setImageDimensions({ width: 82, height: 82 });
-  }, []);
-
   return (
     <Stack
       direction="row"
@@ -145,7 +140,7 @@ export const GooglePreview = ({}: GooglePreviewProps) => {
           }}
           width={82}
           height={82}
-          src={imageURL}
+          src={`${imageURL}?width=82&height=82&fit=cover`}
           flexShrink={0}
           borderRadius={2}
         />

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/LinkedInPreview.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/LinkedInPreview.tsx
@@ -1,16 +1,15 @@
-import { useEffect } from "react";
 import { Typography, Box, Stack } from "@mui/material";
 import { ImageRounded } from "@mui/icons-material";
 import { useLocation, useParams } from "react-router";
 import { useSelector } from "react-redux";
 
 import { useDomain } from "../../../../../../../../shell/hooks/use-domain";
 import { AppState } from "../../../../../../../../shell/store/types";
-import { useImageURL } from "./useImageURL";
 
-type LinkedInPreviewProps = {};
-export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
-  const [imageURL, setImageDimensions] = useImageURL();
+type LinkedInPreviewProps = {
+  imageURL: string;
+};
+export const LinkedInPreview = ({ imageURL }: LinkedInPreviewProps) => {
   const { itemZUID, modelZUID } = useParams<{
     itemZUID: string;
     modelZUID: string;
@@ -23,10 +22,6 @@ export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
       state.content[isCreateItemPage ? `new:${modelZUID}` : itemZUID]
   );
 
-  useEffect(() => {
-    setImageDimensions({ height: 290, type: "fit" });
-  }, []);
-
   return (
     <Stack bgcolor="grey.100">
       {!!imageURL ? (
@@ -39,7 +34,7 @@ export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
           }}
           height={290}
           width="100%"
-          src={imageURL}
+          src={`${imageURL}?width=500&height=290&fit=cover`}
           flexShrink={0}
         />
       ) : (
@@ -57,7 +52,11 @@ export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
         <Typography
           variant="h6"
           fontWeight={600}
-          color={item?.web?.metaTitle ? "text.primary" : "grey.500"}
+          color={
+            !!item?.data?.og_title || !!item?.web?.metaTitle
+              ? "text.primary"
+              : "grey.500"
+          }
           sx={{
             display: "-webkit-box",
             "-webkit-line-clamp": "1",
@@ -69,7 +68,7 @@ export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
             textOverflow: "ellipsis",
           }}
         >
-          {item?.web?.metaTitle || "Meta Title"}
+          {item?.data?.og_title || item?.web?.metaTitle || "Meta Title"}
         </Typography>
         <Typography color="text.secondary">
           {domain.replace(/http:\/\/|https:\/\//gm, "")}

diff --git a/src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/TwitterPreview.tsx b/src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/TwitterPreview.tsx
@@ -6,11 +6,11 @@ import { useSelector } from "react-redux";
 
 import { useDomain } from "../../../../../../../../shell/hooks/use-domain";
 import { AppState } from "../../../../../../../../shell/store/types";
-import { useImageURL } from "./useImageURL";
 
-type TwitterPreviewProps = {};
-export const TwitterPreview = ({}: TwitterPreviewProps) => {
-  const [imageURL, setImageDimensions] = useImageURL();
+type TwitterPreviewProps = {
+  imageURL: string;
+};
+export const TwitterPreview = ({ imageURL }: TwitterPreviewProps) => {
   const { itemZUID, modelZUID } = useParams<{
     itemZUID: string;
     modelZUID: string;
@@ -23,10 +23,6 @@ export const TwitterPreview = ({}: TwitterPreviewProps) => {
       state.content[isCreateItemPage ? `new:${modelZUID}` : itemZUID]
   );
 
-  useEffect(() => {
-    setImageDimensions({ width: 128, height: 128 });
-  }, []);
-
   return (
     <Stack
       direction="row"
@@ -44,7 +40,7 @@ export const TwitterPreview = ({}: TwitterPreviewProps) => {
           }}
           width={128}
           height={128}
-          src={imageURL}
+          src={`${imageURL}?width=128&height=128&fit=cover`}
           flexShrink={0}
         />
       ) : (
@@ -78,7 +74,11 @@ export const TwitterPreview = ({}: TwitterPreviewProps) => {
         </Typography>
         <Typography
           variant="body2"
-          color={!!item?.web?.metaTitle ? "text.primary" : "grey.500"}
+          color={
+            !!item?.data?.tc_title || !!item?.web?.metaTitle
+              ? "text.primary"
+              : "grey.500"
+          }
           sx={{
             display: "-webkit-box",
             "-webkit-line-clamp": "1",
@@ -90,11 +90,15 @@ export const TwitterPreview = ({}: TwitterPreviewProps) => {
             textOverflow: "ellipsis",
           }}
         >
-          {item?.web?.metaTitle || "Meta Title"}
+          {item?.data?.tc_title || item?.web?.metaTitle || "Meta Title"}
         </Typography>
         <Typography
           variant="body2"
-          color={!!item?.web?.metaDescription ? "text.secondary" : "grey.500"}
+          color={
+            !!item?.data?.tc_title || !!item?.web?.metaDescription
+              ? "text.secondary"
+              : "grey.500"
+          }
           sx={{
             display: "-webkit-box",
             "-webkit-line-clamp": "2",
@@ -106,7 +110,9 @@ export const TwitterPreview = ({}: TwitterPreviewProps) => {
             textOverflow: "ellipsis",
           }}
         >
-          {item?.web?.metaDescription || "Meta Description"}
+          {item?.data?.tc_description ||
+            item?.web?.metaDescription ||
+            "Meta Description"}
         </Typography>
       </Stack>
     </Stack>