Skip to content

Commit 754e42d

Browse files
finnar-binagalin920shrunyanallenpigargithub-actions[bot]
authored
Chore/resolve merge conflicts (#2955)
Co-authored-by: Andres Galindo <agalin920@gmail.com> Co-authored-by: Stuart Runyan <shrunyan@gmail.com> Co-authored-by: Allen Pigar <50983144+allenpigar@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 0501032 commit 754e42d

File tree

22 files changed

+585
-146
lines changed

22 files changed

+585
-146
lines changed

‎src/apps/content-editor/src/app/components/Editor/Editor.js

+64-2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { FieldError } from "./FieldError";
1818
import styles from "./Editor.less";
1919
import { cloneDeep } from "lodash";
2020
import { useGetContentModelFieldsQuery } from "../../../../../../shell/services/instance";
21+
import { DYNAMIC_META_FIELD_NAMES } from "../../views/ItemEdit/Meta";
2122

2223
export const MaxLengths = {
2324
text: 150,
@@ -48,10 +49,35 @@ export default memo(function Editor({
4849
const { data: fields } = useGetContentModelFieldsQuery(modelZUID);
4950
const [isLoaded, setIsLoaded] = useState(false);
5051

52+
const metaFields = useMemo(() => {
53+
if (fields?.length) {
54+
return fields.reduce((accu, curr) => {
55+
if (
56+
!curr.deletedAt &&
57+
DYNAMIC_META_FIELD_NAMES.includes(curr.name.toLowerCase())
58+
) {
59+
accu[curr.name] = curr;
60+
}
61+
62+
return accu;
63+
}, {});
64+
}
65+
66+
return {};
67+
}, [fields]);
68+
5169
const activeFields = useMemo(() => {
5270
if (fields?.length) {
5371
return fields.filter(
54-
(field) => !field.deletedAt && field.name !== "og_image"
72+
(field) =>
73+
!field.deletedAt &&
74+
![
75+
"og_image",
76+
"og_title",
77+
"og_description",
78+
"tc_title",
79+
"tc_description",
80+
].includes(field.name)
5581
);
5682
}
5783

@@ -203,6 +229,24 @@ export default memo(function Editor({
203229
value: value,
204230
});
205231

232+
if ("og_title" in metaFields) {
233+
dispatch({
234+
type: "SET_ITEM_DATA",
235+
itemZUID,
236+
key: "og_title",
237+
value: value,
238+
});
239+
}
240+
241+
if ("tc_title" in metaFields) {
242+
dispatch({
243+
type: "SET_ITEM_DATA",
244+
itemZUID,
245+
key: "tc_title",
246+
value: value,
247+
});
248+
}
249+
206250
// Datasets do not get path parts
207251
if (model?.type !== "dataset") {
208252
dispatch({
@@ -239,10 +283,28 @@ export default memo(function Editor({
239283
key: "metaDescription",
240284
value: value.replace(/<[^>]*>/g, "").slice(0, 160),
241285
});
286+
287+
if ("og_description" in metaFields) {
288+
dispatch({
289+
type: "SET_ITEM_DATA",
290+
itemZUID,
291+
key: "og_description",
292+
value: value.replace(/<[^>]*>/g, "").slice(0, 160),
293+
});
294+
}
295+
296+
if ("tc_description" in metaFields) {
297+
dispatch({
298+
type: "SET_ITEM_DATA",
299+
itemZUID,
300+
key: "tc_description",
301+
value: value.replace(/<[^>]*>/g, "").slice(0, 160),
302+
});
303+
}
242304
}
243305
}
244306
},
245-
[fieldErrors]
307+
[fieldErrors, metaFields]
246308
);
247309

248310
const applyDefaultValuesToItemData = useCallback(() => {

‎src/apps/content-editor/src/app/views/ItemCreate/ItemCreate.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const ItemCreate = () => {
9494

9595
const {
9696
isSuccess: isSuccessNewModelFields,
97-
isFetching: isFetchingNewModelFields,
97+
isLoading: isFetchingNewModelFields,
9898
} = useGetContentModelFieldsQuery(modelZUID);
9999

100100
// on mount and update modelZUID, load item fields

‎src/apps/content-editor/src/app/views/ItemEdit/ItemEdit.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { Fragment, useEffect, useState, useMemo, createContext } from "react";
1+
import {
2+
Fragment,
3+
useEffect,
4+
useState,
5+
useMemo,
6+
createContext,
7+
useRef,
8+
} from "react";
29
import {
310
Switch,
411
Route,
@@ -73,6 +80,7 @@ export default function ItemEdit() {
7380
const isMounted = useIsMounted();
7481
const location = useLocation();
7582
const { modelZUID, itemZUID } = useParams();
83+
const metaRef = useRef(null);
7684
const item = useSelector((state) => state.content[itemZUID]);
7785
const items = useSelector((state) => state.content);
7886
const model = useSelector((state) => state.models[modelZUID]);
@@ -239,7 +247,8 @@ export default function ItemEdit() {
239247
async function save() {
240248
setSaveClicked(true);
241249

242-
if (hasErrors || hasSEOErrors) return;
250+
if (hasErrors || hasSEOErrors || metaRef.current?.validateMetaFields?.())
251+
return;
243252

244253
setSaving(true);
245254
try {
@@ -452,6 +461,7 @@ export default function ItemEdit() {
452461
path="/content/:modelZUID/:itemZUID/meta"
453462
render={() => (
454463
<Meta
464+
ref={metaRef}
455465
onUpdateSEOErrors={(hasErrors) => {
456466
setHasSEOErrors(hasErrors);
457467
}}

‎src/apps/content-editor/src/app/views/ItemEdit/ItemHead/ItemHead.less

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
flex: 1;
66
overflow: scroll;
77
background-color: #f9fafb;
8+
height: 100%;
89

910
// .Head {
1011
// display: flex;

‎src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/FacebookPreview.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { useEffect } from "react";
21
import { Typography, Box, Stack } from "@mui/material";
32
import { ImageRounded } from "@mui/icons-material";
43
import { useLocation, useParams } from "react-router";
54
import { useSelector } from "react-redux";
65

76
import { useDomain } from "../../../../../../../../shell/hooks/use-domain";
87
import { AppState } from "../../../../../../../../shell/store/types";
9-
import { useImageURL } from "./useImageURL";
108

11-
type FacebookPreviewProps = {};
12-
export const FacebookPreview = ({}: FacebookPreviewProps) => {
13-
const [imageURL, setImageDimensions] = useImageURL();
9+
type FacebookPreviewProps = {
10+
imageURL: string;
11+
};
12+
export const FacebookPreview = ({ imageURL }: FacebookPreviewProps) => {
1413
const { itemZUID, modelZUID } = useParams<{
1514
itemZUID: string;
1615
modelZUID: string;
@@ -23,10 +22,6 @@ export const FacebookPreview = ({}: FacebookPreviewProps) => {
2322
state.content[isCreateItemPage ? `new:${modelZUID}` : itemZUID]
2423
);
2524

26-
useEffect(() => {
27-
setImageDimensions({ height: 290, type: "fit" });
28-
}, []);
29-
3025
return (
3126
<Stack bgcolor="grey.100">
3227
{!!imageURL ? (
@@ -39,7 +34,7 @@ export const FacebookPreview = ({}: FacebookPreviewProps) => {
3934
}}
4035
height={290}
4136
width="100%"
42-
src={imageURL}
37+
src={`${imageURL}?width=500&height=290&fit=cover`}
4338
flexShrink={0}
4439
/>
4540
) : (
@@ -60,7 +55,11 @@ export const FacebookPreview = ({}: FacebookPreviewProps) => {
6055
<Typography
6156
variant="h6"
6257
fontWeight={600}
63-
color={item?.web?.metaTitle ? "text.primary" : "grey.500"}
58+
color={
59+
!!item?.data?.og_title || !!item?.web?.metaTitle
60+
? "text.primary"
61+
: "grey.500"
62+
}
6463
sx={{
6564
display: "-webkit-box",
6665
"-webkit-line-clamp": "2",
@@ -72,7 +71,7 @@ export const FacebookPreview = ({}: FacebookPreviewProps) => {
7271
textOverflow: "ellipsis",
7372
}}
7473
>
75-
{item?.web?.metaTitle || "Meta Title"}
74+
{item?.data?.og_title || item?.web?.metaTitle || "Meta Title"}
7675
</Typography>
7776
</Stack>
7877
</Stack>

‎src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/GooglePreview.tsx

+5-10
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ import { InstanceAvatar } from "../../../../../../../../shell/components/global-
1313
import { useDomain } from "../../../../../../../../shell/hooks/use-domain";
1414
import { AppState } from "../../../../../../../../shell/store/types";
1515
import { useGetContentModelFieldsQuery } from "../../../../../../../../shell/services/instance";
16-
import { useImageURL } from "./useImageURL";
1716

18-
type GooglePreviewProps = {};
19-
export const GooglePreview = ({}: GooglePreviewProps) => {
17+
type GooglePreviewProps = {
18+
imageURL: string;
19+
};
20+
export const GooglePreview = ({ imageURL }: GooglePreviewProps) => {
2021
const { modelZUID, itemZUID } = useParams<{
2122
modelZUID: string;
2223
itemZUID: string;
@@ -26,8 +27,6 @@ export const GooglePreview = ({}: GooglePreviewProps) => {
2627
const domain = useDomain();
2728
const location = useLocation();
2829
const isCreateItemPage = location?.pathname?.split("/")?.pop() === "new";
29-
const [imageURL, setImageDimensions] = useImageURL();
30-
const { data: modelFields } = useGetContentModelFieldsQuery(modelZUID);
3130
const items = useSelector((state: AppState) => state.content);
3231
const item = items[isCreateItemPage ? `new:${modelZUID}` : itemZUID];
3332
const parent = items[item?.web?.parentZUID];
@@ -43,10 +42,6 @@ export const GooglePreview = ({}: GooglePreviewProps) => {
4342
return path.filter((i) => !!i);
4443
}, [domain, parent, item?.web]);
4544

46-
useEffect(() => {
47-
setImageDimensions({ width: 82, height: 82 });
48-
}, []);
49-
5045
return (
5146
<Stack
5247
direction="row"
@@ -145,7 +140,7 @@ export const GooglePreview = ({}: GooglePreviewProps) => {
145140
}}
146141
width={82}
147142
height={82}
148-
src={imageURL}
143+
src={`${imageURL}?width=82&height=82&fit=cover`}
149144
flexShrink={0}
150145
borderRadius={2}
151146
/>

‎src/apps/content-editor/src/app/views/ItemEdit/Meta/SocialMediaPreview/LinkedInPreview.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { useEffect } from "react";
21
import { Typography, Box, Stack } from "@mui/material";
32
import { ImageRounded } from "@mui/icons-material";
43
import { useLocation, useParams } from "react-router";
54
import { useSelector } from "react-redux";
65

76
import { useDomain } from "../../../../../../../../shell/hooks/use-domain";
87
import { AppState } from "../../../../../../../../shell/store/types";
9-
import { useImageURL } from "./useImageURL";
108

11-
type LinkedInPreviewProps = {};
12-
export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
13-
const [imageURL, setImageDimensions] = useImageURL();
9+
type LinkedInPreviewProps = {
10+
imageURL: string;
11+
};
12+
export const LinkedInPreview = ({ imageURL }: LinkedInPreviewProps) => {
1413
const { itemZUID, modelZUID } = useParams<{
1514
itemZUID: string;
1615
modelZUID: string;
@@ -23,10 +22,6 @@ export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
2322
state.content[isCreateItemPage ? `new:${modelZUID}` : itemZUID]
2423
);
2524

26-
useEffect(() => {
27-
setImageDimensions({ height: 290, type: "fit" });
28-
}, []);
29-
3025
return (
3126
<Stack bgcolor="grey.100">
3227
{!!imageURL ? (
@@ -39,7 +34,7 @@ export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
3934
}}
4035
height={290}
4136
width="100%"
42-
src={imageURL}
37+
src={`${imageURL}?width=500&height=290&fit=cover`}
4338
flexShrink={0}
4439
/>
4540
) : (
@@ -57,7 +52,11 @@ export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
5752
<Typography
5853
variant="h6"
5954
fontWeight={600}
60-
color={item?.web?.metaTitle ? "text.primary" : "grey.500"}
55+
color={
56+
!!item?.data?.og_title || !!item?.web?.metaTitle
57+
? "text.primary"
58+
: "grey.500"
59+
}
6160
sx={{
6261
display: "-webkit-box",
6362
"-webkit-line-clamp": "1",
@@ -69,7 +68,7 @@ export const LinkedInPreview = ({}: LinkedInPreviewProps) => {
6968
textOverflow: "ellipsis",
7069
}}
7170
>
72-
{item?.web?.metaTitle || "Meta Title"}
71+
{item?.data?.og_title || item?.web?.metaTitle || "Meta Title"}
7372
</Typography>
7473
<Typography color="text.secondary">
7574
{domain.replace(/http:\/\/|https:\/\//gm, "")}

0 commit comments

Comments
 (0)