ChunkCollection uses new API response format

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 (
-          <CollectionContext.Provider value={cnk.content} key={cnk.identifier}>
-            <div
-              collection-name={cnk.collection.name}
-              className={this.props.className}
-            >
-              {this.props.children}
-            </div>
-          </CollectionContext.Provider>
-        );
-      })
-    ) : (
-      <>{this.props.children}</>
-    );
-  }
+  return chunks.map((chunk) => (
+    <ChunkCollectionContext.Provider key={chunk.identifier} value={chunk}>
+      <div data-collection-name={chunk.collection.name} className={className}>
+        {children}
+      </div>
+    </ChunkCollectionContext.Provider>
+  ));
 }
 
-ChunkCollection.contextType = Context;
-
 export default ChunkCollection;
+
+export const CollectionContext = React.createContext(null);

src/ChunkCollectionContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ChunkCollectionContext = createContext(null);

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 (
-      <CollectionContext.Consumer>
-        {chunkData =>
-          chunkData && chunkData.length
-            ? chunkData.map(cnk =>
-                cnk[`${this.identifier}`]
-                  ? renderChunk(cnk[`${this.identifier}`], this.props.className)
-                  : null
-              )
-            : null
-        }
-      </CollectionContext.Consumer>
+  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;

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 (
-    <Context.Provider value={{ branch, projectId }}>
+    <EditmodeContext.Provider value={{ branch, projectId }}>
       {children}
-    </Context.Provider>
+    </EditmodeContext.Provider>
   );
 }
 export default Editmode;

src/Context.js → src/EditmodeContext.js

@@ -1,6 +1,6 @@
 import { createContext } from "react";
 
-export const Context = createContext({
+export const EditmodeContext = createContext({
   branch: null,
   projectId: null,
 });

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",
+  },
+});

src/useChunk.js

@@ -1,22 +1,14 @@
 // @ts-check
-
-import axios from "axios";
 import { useContext } from "react";
 import useSWR from "swr";
 
-import { Context } from "./Context";
+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(Context);
+  const { projectId } = useContext(EditmodeContext);
   const contentKey = computeContentKey(defaultContent);
 
   const url = identifier