Skip to content

Commit 9c509be

Browse files
francisbulusfrancisbulus
authored
Merge pull request #56 from editmodelabs/vercel-merge
Changes for Next
2 parents 12c78a1 + 9ccd9f0 commit 9c509be

File tree

8 files changed

+174
-96
lines changed

8 files changed

+174
-96
lines changed

‎dist/main.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/ChunkCollection.jsx

Lines changed: 50 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
import React, { useEffect, useState, useContext } from "react";
33
import { ChunkCollectionContext } from "./ChunkCollectionContext";
44
import { EditmodeContext } from "./EditmodeContext";
5-
import { getCachedData, storeCache, computeClassName, api } from "./utilities";
5+
import {
6+
getCachedData,
7+
storeCache,
8+
computeClassName,
9+
api,
10+
filterByTag,
11+
} from "./utilities";
612

713
export function ChunkCollection({
814
children,
@@ -16,39 +22,54 @@ export function ChunkCollection({
1622
const [chunks, setChunk] = useState([]);
1723
const cacheId = identifier + limit + tags.join("");
1824
// const { collection } = useCollectionData(["Featured Projects"]);
19-
const { projectId, branch } = useContext(EditmodeContext);
25+
const { projectId, branch, defaultChunks, next } =
26+
useContext(EditmodeContext);
2027

2128
useEffect(() => {
2229
// Get data from localStorage
23-
const cachedChunk = getCachedData(cacheId);
24-
if (cachedChunk) {
25-
const data = JSON.parse(cachedChunk);
26-
setChunk(data);
27-
}
28-
let params = new URL(document.location.href).searchParams;
29-
const branchId = branch || params.get("em_branch_id") || "";
30-
const urlParams = new URLSearchParams({
31-
limit,
32-
collection_identifier: identifier || contentKey,
33-
project_id: projectId,
34-
branch_id: branchId,
35-
});
30+
if (!next) {
31+
const cachedChunk = getCachedData(cacheId);
32+
if (cachedChunk) {
33+
const data = JSON.parse(cachedChunk);
34+
setChunk(data);
35+
}
36+
let params = new URL(document.location.href).searchParams;
37+
const branchId = branch || params.get("em_branch_id") || "";
38+
const urlParams = new URLSearchParams({
39+
limit,
40+
collection_identifier: identifier || contentKey,
41+
project_id: projectId,
42+
branch_id: branchId,
43+
});
3644

37-
tags.forEach((tag) => urlParams.append("tags[]", tag));
45+
tags.forEach((tag) => urlParams.append("tags[]", tag));
3846

39-
api
40-
.get(`chunks?${urlParams}`)
41-
.then((res) => {
42-
if (res.data.error) throw res.data.error;
43-
storeCache(cacheId, res.data.chunks);
44-
if (!cachedChunk) setChunk(res.data.chunks);
45-
})
46-
.catch((error) => {
47-
console.error(
48-
`Something went wrong trying to retrieve chunk collection: ${error}. Have you provided the correct Editmode identifier as a prop to your ChunkCollection component instance?`
49-
);
50-
});
51-
}, [identifier]);
47+
api
48+
.get(`chunks?${urlParams}`)
49+
.then((res) => {
50+
if (res.data.error) throw res.data.error;
51+
storeCache(cacheId, res.data.chunks);
52+
if (!cachedChunk) setChunk(res.data.chunks);
53+
})
54+
.catch((error) => {
55+
console.error(
56+
`Something went wrong trying to retrieve chunk collection: ${error}. Have you provided the correct Editmode identifier as a prop to your ChunkCollection component instance?`
57+
);
58+
});
59+
} else if (next && defaultChunks) {
60+
let collection_chunks;
61+
collection_chunks = defaultChunks.filter(
62+
(chunk) =>
63+
(chunk.collection && chunk.collection.identifier == identifier) ||
64+
(chunk.collection && chunk.collection.name == identifier) ||
65+
(chunk.collection && chunk.collection.content_key == identifier)
66+
);
67+
if (tags) {
68+
collection_chunks = filterByTag(collection_chunks, tags);
69+
}
70+
setChunk(collection_chunks);
71+
}
72+
}, [identifier, defaultChunks]);
5273

5374
if (!chunks?.length) {
5475
return null;

‎src/Editmode.jsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export function Editmode({
1111
projectId,
1212
defaultChunks,
1313
branchId = "",
14+
next = false,
1415
}) {
1516
const [branch, setbranch] = useState("");
1617
const [hasWaterMark, setHasWaterMark] = useState(null);
@@ -44,6 +45,7 @@ export function Editmode({
4445

4546
script.src =
4647
"https://unpkg.com/editmode-magic-editor@^0/dist/magic-editor.js";
48+
script.setAttribute("async", "");
4749
document.body.append(script);
4850

4951
if (!cachedItem) {
@@ -66,7 +68,9 @@ export function Editmode({
6668
}, [branch, isEditorActive]);
6769

6870
return (
69-
<EditmodeContext.Provider value={{ branch, projectId, defaultChunks }}>
71+
<EditmodeContext.Provider
72+
value={{ branch, projectId, defaultChunks, next }}
73+
>
7074
{children}
7175
{hasWaterMark && <Watermark projectId={projectId} />}
7276
</EditmodeContext.Provider>

‎src/EditmodeContext.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export const EditmodeContext = createContext({
44
branch: null,
55
projectId: null,
66
defaultChunks: [],
7+
next: false,
78
});

‎src/useChunk.js

Lines changed: 51 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export function useChunk(
1414
defaultContent,
1515
{ identifier, type, contentKey, field }
1616
) {
17-
const { projectId, defaultChunks, branch } = useContext(EditmodeContext);
17+
const { projectId, defaultChunks, branch, next } =
18+
useContext(EditmodeContext);
1819
let [chunk, setChunk] = useState(undefined);
1920

2021
if (!contentKey) {
@@ -41,40 +42,59 @@ export function useChunk(
4142
}
4243

4344
useEffect(() => {
44-
let params = new URL(document.location.href).searchParams;
45-
const branchId = branch || params.get("em_branch_id") || "";
46-
const branchParams = (branchId && `branch_id=${branchId}`) || "";
47-
let url = `chunks/${
48-
identifier || contentKey
49-
}?project_id=${projectId}&${branchParams}`;
50-
if (branchId) cacheId += branchId;
51-
let cachedChunk = getCachedData(cacheId);
52-
let newChunk = cachedChunk
53-
? JSON.parse(cachedChunk)
54-
: fallbackChunk || {
55-
chunk_type: type || "single_line_text",
56-
content: defaultContent,
57-
content_key: contentKey,
58-
};
45+
if (!next) {
46+
let params = new URL(document.location.href).searchParams;
47+
const branchId = branch || params.get("em_branch_id") || "";
48+
const branchParams = (branchId && `branch_id=${branchId}`) || "";
49+
let url = `chunks/${
50+
identifier || contentKey
51+
}?project_id=${projectId}&${branchParams}`;
52+
if (branchId) cacheId += branchId;
53+
let cachedChunk = getCachedData(cacheId);
54+
let newChunk = cachedChunk
55+
? JSON.parse(cachedChunk)
56+
: fallbackChunk || {
57+
chunk_type: type || "single_line_text",
58+
content: defaultContent,
59+
content_key: contentKey,
60+
};
5961

60-
if (newChunk) setChunk(newChunk);
62+
if (newChunk) setChunk(newChunk);
6163

62-
// Fetch new data
63-
let error;
64-
api
65-
.get(url)
66-
.then((res) => {
67-
storeCache(cacheId, res.data);
68-
if (!cachedChunk) setChunk(res.data);
69-
}) // Store chunk to localstorage
70-
.catch((error) => console.log(error)); // Set error state
64+
// Fetch new data
65+
let error;
66+
api
67+
.get(url)
68+
.then((res) => {
69+
storeCache(cacheId, res.data);
70+
if (!cachedChunk) setChunk(res.data);
71+
}) // Store chunk to localstorage
72+
.catch((error) => console.log(error)); // Set error state
7173

72-
if (error && identifier) {
73-
console.warn(
74-
`Something went wrong trying to retrieve chunk data: ${error}. Have you provided the correct Editmode identifier (${identifier}) as a prop to your Chunk component instance?`
75-
);
74+
if (error && identifier) {
75+
console.warn(
76+
`Something went wrong trying to retrieve chunk data: ${error}. Have you provided the correct Editmode identifier (${identifier}) as a prop to your Chunk component instance?`
77+
);
78+
}
79+
} else if (next && defaultChunks) {
80+
let fallbackChunk;
81+
if (identifier) {
82+
fallbackChunk = defaultChunks.find((chunkItem) => {
83+
return (
84+
chunkItem.identifier === identifier ||
85+
chunkItem.content_key === identifier
86+
);
87+
});
88+
} else {
89+
fallbackChunk = defaultChunks.find(
90+
(chunkItem) =>
91+
chunkItem.content_key === contentKey &&
92+
chunkItem.project_id == projectId
93+
);
94+
}
95+
setChunk(fallbackChunk);
7696
}
77-
}, [cacheId, branch]);
97+
}, [cacheId, branch, defaultChunks]);
7898

7999
// Modify chunk if field is present and chunk_type is collection
80100
// e.g. <Chunk identifier="identifier_......" field="Title"/>

‎src/useGetChunk.js

Lines changed: 55 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,71 @@
1-
2-
3-
import { storeCache, getCachedData, api } from './utilities'
4-
import { EditmodeContext } from "./EditmodeContext"
5-
import {useEffect, useState, useContext} from 'react'
1+
import { storeCache, getCachedData, api } from "./utilities";
2+
import { EditmodeContext } from "./EditmodeContext";
3+
import { useEffect, useState, useContext } from "react";
64

75
export const useGetChunk = (identifier, field = "") => {
8-
const { projectId } = useContext(EditmodeContext);
9-
const [project, setProject] = useState(projectId)
6+
const { projectId, defaultChunks, next } = useContext(EditmodeContext);
7+
const [project, setProject] = useState(projectId);
108
const [chunk, setChunk] = useState(undefined);
119

1210
const cacheId = identifier + project + field;
1311

1412
useEffect(() => {
15-
if (!project && window["chunksProjectIdentifier"]) {
16-
setProject(window["chunksProjectIdentifier"])
17-
}
13+
let fallbackChunk;
14+
if (!next) {
15+
if (!project && window["chunksProjectIdentifier"]) {
16+
setProject(window["chunksProjectIdentifier"]);
17+
}
1818

19-
const cachedChunk = getCachedData(cacheId);
20-
if (cachedChunk) setChunk(JSON.parse(cachedChunk))
19+
const cachedChunk = getCachedData(cacheId);
20+
if (cachedChunk) setChunk(JSON.parse(cachedChunk));
2121

22-
let url = `chunks/${identifier}?project_id=${project}`;
22+
let url = `chunks/${identifier}?project_id=${project}`;
2323

24-
api
25-
.get(url)
26-
.then((res) => {
27-
const error = res.data.error || res.data.message
28-
if (!error) {
29-
storeCache(cacheId, res.data);
30-
if (!cachedChunk) setChunk(res.data)
31-
}
32-
})
33-
.catch((error) => console.error(error, identifier, field)); // Set error state
34-
}, [cacheId])
24+
api
25+
.get(url)
26+
.then((res) => {
27+
const error = res.data.error || res.data.message;
28+
if (!error) {
29+
storeCache(cacheId, res.data);
30+
if (!cachedChunk) setChunk(res.data);
31+
}
32+
})
33+
.catch((error) => console.error(error, identifier, field));
34+
} else if (next && defaultChunks) {
35+
if (identifier) {
36+
fallbackChunk = defaultChunks.find((chunkItem) => {
37+
return (
38+
chunkItem.content_key === identifier ||
39+
chunkItem.identifier === identifier
40+
);
41+
});
42+
} else {
43+
fallbackChunk = defaultChunks.find(
44+
(chunkItem) =>
45+
chunkItem.content_key === contentKey &&
46+
chunkItem.project_id == projectId
47+
);
48+
}
49+
setChunk(fallbackChunk);
50+
}
51+
}, [cacheId, defaultChunks]);
3552

3653
if (field && chunk && chunk.chunk_type == "collection_item") {
37-
field = field.toLowerCase()
38-
const fieldChunk = chunk.content.find(c =>
39-
c.custom_field_identifier.toLowerCase() == field || c.custom_field_name.toLowerCase() == field
40-
)
54+
field = field.toLowerCase();
55+
const fieldChunk = chunk.content.find(
56+
(c) =>
57+
c.custom_field_identifier.toLowerCase() == field ||
58+
c.custom_field_name.toLowerCase() == field
59+
);
4160
if (fieldChunk) {
42-
setChunk(fieldChunk)
61+
setChunk(fieldChunk);
4362
} else {
44-
console.error(`We can't find a ${identifier} content with ${field} field`)
45-
return ""
63+
console.error(
64+
`We can't find a ${identifier} content with ${field} field`
65+
);
66+
return "";
4667
}
4768
}
48-
49-
return chunk && chunk.content || ""
50-
}
69+
70+
return (chunk && chunk.content) || "";
71+
};

‎src/utilities/filterTags.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const filterByTag = (
2+
/** @type {any[]} */ chunks,
3+
/** @type {any[]} */ filters
4+
) => {
5+
return chunks.filter((chunk) =>
6+
filters.every(
7+
(tag) => chunk.collection && chunk.tags && chunk.tags.includes(tag)
8+
)
9+
);
10+
};

‎src/utilities/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ export { transformImage } from "./transformImage";
1010
export { computeClassName } from "./computeClassName";
1111
export { api } from "./api";
1212
export { renderChunk } from "./renderChunk.jsx";
13+
export { filterByTag } from "./filterTags";

0 commit comments

Comments
 (0)