From 998b9123a55f435cfc831d383146fdc03bdd40d7 Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Tue, 16 Jun 2020 21:40:16 -0700 Subject: [PATCH 1/3] Rename Context to EditmodeContext --- src/Editmode.jsx | 6 +++--- src/{Context.js => EditmodeContext.js} | 2 +- src/useChunk.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename src/{Context.js => EditmodeContext.js} (62%) diff --git a/src/Editmode.jsx b/src/Editmode.jsx index ff59d3d..a5100d8 100644 --- a/src/Editmode.jsx +++ b/src/Editmode.jsx @@ -1,6 +1,6 @@ // @ts-check import React, { useEffect } from "react"; -import { Context } from "./Context"; +import { EditmodeContext } from "./EditmodeContext"; export function Editmode({ children, projectId }) { if (!projectId) { @@ -20,9 +20,9 @@ export function Editmode({ children, projectId }) { let branch = params.get("em_branch"); return ( - + {children} - + ); } export default Editmode; diff --git a/src/Context.js b/src/EditmodeContext.js similarity index 62% rename from src/Context.js rename to src/EditmodeContext.js index 6146750..c481f8b 100644 --- a/src/Context.js +++ b/src/EditmodeContext.js @@ -1,6 +1,6 @@ import { createContext } from "react"; -export const Context = createContext({ +export const EditmodeContext = createContext({ branch: null, projectId: null, }); diff --git a/src/useChunk.js b/src/useChunk.js index 2b31740..aa0a8bc 100644 --- a/src/useChunk.js +++ b/src/useChunk.js @@ -4,7 +4,7 @@ import axios from "axios"; import { useContext } from "react"; import useSWR from "swr"; -import { Context } from "./Context"; +import { EditmodeContext } from "./EditmodeContext"; import { renderChunk } from "./utils/renderChunk.jsx"; import { computeContentKey } from "./utils/computeContentKey"; @@ -16,7 +16,7 @@ const api = axios.create({ }); export function useChunk(defaultContent, { identifier }) { - const { projectId } = useContext(Context); + const { projectId } = useContext(EditmodeContext); const contentKey = computeContentKey(defaultContent); const url = identifier From 48859319c2961a1c3064f629dea11c5fb679fa2a Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Tue, 16 Jun 2020 21:40:26 -0700 Subject: [PATCH 2/3] Move axios calls to api util --- src/api.js | 8 ++++++++ src/useChunk.js | 10 +--------- 2 files changed, 9 insertions(+), 9 deletions(-) create mode 100644 src/api.js diff --git a/src/api.js b/src/api.js new file mode 100644 index 0000000..da7d2d8 --- /dev/null +++ b/src/api.js @@ -0,0 +1,8 @@ +import axios from "axios"; + +export const api = axios.create({ + baseURL: "https://api.editmode.com/", + headers: { + Accept: "application/json", + }, +}); diff --git a/src/useChunk.js b/src/useChunk.js index aa0a8bc..0c083fc 100644 --- a/src/useChunk.js +++ b/src/useChunk.js @@ -1,20 +1,12 @@ // @ts-check - -import axios from "axios"; import { useContext } from "react"; import useSWR from "swr"; +import { api } from "./api"; import { EditmodeContext } from "./EditmodeContext"; import { renderChunk } from "./utils/renderChunk.jsx"; import { computeContentKey } from "./utils/computeContentKey"; -const api = axios.create({ - baseURL: "https://api.editmode.com/", - headers: { - Accept: "application/json", - }, -}); - export function useChunk(defaultContent, { identifier }) { const { projectId } = useContext(EditmodeContext); const contentKey = computeContentKey(defaultContent); From 4b77163cd68dffd1f78a2d9a12b5629efeb4780d Mon Sep 17 00:00:00 2001 From: Eric Clemmons Date: Tue, 16 Jun 2020 21:44:17 -0700 Subject: [PATCH 3/3] Fix ChunkCollection to use new array format --- src/ChunkCollection.jsx | 77 +++++++++++++---------------------- src/ChunkCollectionContext.js | 3 ++ src/ChunkFieldValue.jsx | 39 ++++++++++-------- 3 files changed, 53 insertions(+), 66 deletions(-) create mode 100644 src/ChunkCollectionContext.js diff --git a/src/ChunkCollection.jsx b/src/ChunkCollection.jsx index ba0d7ee..3e52bb5 100644 --- a/src/ChunkCollection.jsx +++ b/src/ChunkCollection.jsx @@ -1,58 +1,39 @@ // @ts-check - import React from "react"; -import axios from "axios"; -import { Context } from "./Context"; - -export const CollectionContext = React.createContext(null); - -class ChunkCollection extends React.Component { - constructor(props) { - super(props); +import useSWR from "swr"; + +import { api } from "./api"; +import { ChunkCollectionContext } from "./ChunkCollectionContext"; + +export function ChunkCollection({ children, className, identifier }) { + const { + data: chunks = [], + error, + } = useSWR(`chunks?collection_identifier=${identifier}`, (url) => + api.get(url).then((res) => res.data.chunks) + ); + + if (error) { + console.log( + `Something went wrong trying to retrieve chunk collection: ${error}. Have you provided the correct Editmode identifier as a prop to your ChunkCollection component instance?` + ); - this.identifier = props.identifier; - this.state = { - chunks: [], - }; + return <>{children}; } - componentDidMount() { - axios - .get(`https://api.editmode.com/chunks`, { - params: { collection_identifier: this.props.identifier }, - // @ts-ignore - em_branch: this.context.branch, - }) - .then((res) => { - this.setState({ chunks: res.data.chunks }); - }) - .catch((err) => - console.log( - `Something went wrong trying to retrieve chunk collection: ${err}. Have you provided the correct Editmode identifier as a prop to your ChunkCollection component instance?` - ) - ); + if (!chunks.length) { + return children; } - render() { - return this.state.chunks.length ? ( - this.state.chunks.map((cnk) => { - return ( - -
- {this.props.children} -
- - ); - }) - ) : ( - <>{this.props.children} - ); - } + return chunks.map((chunk) => ( + +
+ {children} +
+ + )); } -ChunkCollection.contextType = Context; - export default ChunkCollection; + +export const CollectionContext = React.createContext(null); diff --git a/src/ChunkCollectionContext.js b/src/ChunkCollectionContext.js new file mode 100644 index 0000000..5a8e50e --- /dev/null +++ b/src/ChunkCollectionContext.js @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export const ChunkCollectionContext = createContext(null); diff --git a/src/ChunkFieldValue.jsx b/src/ChunkFieldValue.jsx index c553820..77f1727 100644 --- a/src/ChunkFieldValue.jsx +++ b/src/ChunkFieldValue.jsx @@ -1,26 +1,29 @@ -import React from "react"; +import React, { useContext } from "react"; import { renderChunk } from "./utils/renderChunk.jsx"; import { CollectionContext } from "./ChunkCollection.jsx"; -export default class ChunkFieldValue extends React.Component { - constructor(props) { - super(); - this.identifier = props.identifier; +import { ChunkCollectionContext } from "./ChunkCollectionContext"; + +export function ChunkFieldValue({ children, className, identifier }) { + const chunk = useContext(ChunkCollectionContext); + + if (!chunk) { + return null; } - render() { - return ( - - {chunkData => - chunkData && chunkData.length - ? chunkData.map(cnk => - cnk[`${this.identifier}`] - ? renderChunk(cnk[`${this.identifier}`], this.props.className) - : null - ) - : null - } - + const fieldChunk = chunk.content.find( + (chunk) => chunk.custom_field_identifier === identifier + ); + + if (!fieldChunk) { + console.warn( + `Could not find field ${identifier} for ${chunk.collection.name}` ); + + return null; } + + return renderChunk(fieldChunk, className); } + +export default ChunkFieldValue;