@vonaffenfels/contentful-teasermanager 1.2.18 → 1.2.19

package/src/components/Teasermanager.js

@@ -1,269 +1,269 @@
-import React, {
-    useEffect, useRef, useState,
-} from "react";
-
-import {getContentfulClient} from "../lib/contentfulClient";
-import Renderer from "@vonaffenfels/slate-editor/dist/Renderer";
-import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
-import {Timeline} from "./Teasermanager/Timeline";
-import styles from "./Teasermanager.module.css";
-import {runLoaders} from "../lib/runLoaders";
-import classNames from "classnames";
-
-export const Teasermanager = ({
-    entryId,
-    loadSlotStateForPage = () => console.error("missing loadSlotStateForPage"),
-    loadTimelineStateForPage = () => console.error("missing loadTimelineStateForPage"),
-    onSlotClick = async () => console.error("missing onSlotClick"),
-    onSlotClickLogic = async () => console.error("missing onSlotClickLogic"),
-    removeSlotData = async () => console.error("missing removeSlotData"),
-    contentFieldName = "content",
-    locale = "de",
-}) => {
-    const contentfulClient = getContentfulClient();
-    const [entry, setEntry] = useState(null);
-    const wrapperRef = useRef(null);
-    const [loading, setLoading] = useState("initial");
-    const [loadedContent, setLoadedContent] = useState(null);
-    const [currentDate, _setCurrentDate] = useState(null);
-    const [currentSlotState, setCurrentSlotState] = useState(null);
-    const [currentSlotLogicState, setCurrentSlotLogicState] = useState(null);
-    const currentLoadingOperation = useRef(0);
-
-    const setCurrentDate = (date) => {
-        if (date) {
-            date.setSeconds(0);
-        }
-
-        _setCurrentDate(date);
-    };
-
-    const reloadAllData = async () => {
-        let loadingId = ++currentLoadingOperation.current;
-        if (!currentDate) {
-            return;
-        }
-
-        const contentValue = entry?.fields?.[contentFieldName]?.[locale];
-        const portalValue = entry?.fields?.portal?.[locale];
-
-        if (!contentValue) {
-            setLoading("initial");
-            setLoadedContent(null);
-            return;
-        }
-
-        console.log(`Teasermanager :: LOADING DATA`);
-        if (loading !== "initial") {
-            setLoading(true);
-        }
-
-        const content = await runLoaders(
-            contentValue, portalValue, entry?.sys?.id, currentDate,
-        );
-
-        // only apply the LAST update
-        if (currentLoadingOperation.current === loadingId) {
-            updateSlotStateData();
-
-            console.log(`Teasermanager :: LOADED DATA`);
-            setLoadedContent(content);
-            setLoading(false);
-        }
-    };
-
-    const initSlot = (node) => {
-        const existingManagementNode = node.querySelector(`.__teasermanager_management_node`);
-        if (existingManagementNode) {
-            node.removeChild(existingManagementNode);
-        }
-
-        const slotId = node.dataset.teasermanagerSlot;
-        const managementNode = document.createElement("div");
-        managementNode.classList.add(styles.management);
-
-        const managementLabelNode = document.createElement("div");
-        managementLabelNode.classList.add(styles.label);
-        const managementLabelNodeLogic = document.createElement("div");
-        managementLabelNodeLogic.classList.add(styles.labelLogic);
-
-        if (currentSlotState?.[slotId]) {
-            managementNode.classList.add(styles.changedBorder);
-        }
-
-        if (currentSlotLogicState?.[slotId]) {
-            managementNode.classList.add(styles.logicBorder);
-        }
-
-        if (currentSlotState?.[slotId] && currentSlotState?.[slotId] !== "RESET") {
-            managementNode.classList.add(styles.changed);
-
-            managementLabelNode.innerHTML = `Artikel wechseln`;
-            const managementRemoveButtonNode = document.createElement("div");
-            managementRemoveButtonNode.classList.add(styles.removeButton);
-            managementRemoveButtonNode.title = `Artikel entfernen`;
-            managementRemoveButtonNode.innerHTML = `
-                <svg height="800px" width="800px" version="1.1" style="width: 20px; height: 20px;" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 496.158 496.158" xml:space="preserve">
-<path style="fill:#E04F5F;" d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
-\tc0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
-    <path style="fill:#FFFFFF;" d="M383.546,206.286H112.612c-3.976,0-7.199,3.225-7.199,7.2v69.187c0,3.976,3.224,7.199,7.199,7.199
-\th270.934c3.976,0,7.199-3.224,7.199-7.199v-69.187C390.745,209.511,387.521,206.286,383.546,206.286z"/>
-                </svg>
-            `;
-            managementRemoveButtonNode.addEventListener("click", (e) => {
-                removeSlotData(slotId, currentDate).then(() => {
-                    managementNode.classList.add(styles.loading);
-                    reloadAllData().then(() => {
-                        // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
-                        // managementNode.classList.remove(styles.loading);
-                    });
-                });
-                e.preventDefault();
-                e.stopPropagation();
-                return false;
-            });
-            managementNode.appendChild(managementRemoveButtonNode);
-        } else {
-            managementLabelNode.innerHTML = `Artikel festlegen`;
-        }
-
-        if (currentSlotLogicState?.[slotId]) {
-            managementLabelNodeLogic.innerHTML = `Logik bearbeiten`;
-        } else {
-            managementLabelNodeLogic.innerHTML = `Logik festlegen`;
-        }
-
-        managementNode.appendChild(managementLabelNode);
-        managementNode.appendChild(managementLabelNodeLogic);
-        managementLabelNode.addEventListener("click", (e) => {
-            onSlotClick(slotId, currentDate).then((entry) => {
-                if (!entry) {
-                    return; // nothing changed, no need to reload!
-                }
-                managementNode.classList.add(styles.loading);
-                reloadAllData().then(() => {
-                    // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
-                    // managementNode.classList.remove(styles.loading);
-                });
-            });
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
-        });
-
-        managementLabelNodeLogic.addEventListener("click", (e) => {
-            onSlotClickLogic(slotId, currentDate).then(() => {
-                managementNode.classList.add(styles.loading);
-                reloadAllData().then(() => {
-                    // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
-                    // managementNode.classList.remove(styles.loading);
-                });
-            });
-            e.preventDefault();
-            e.stopPropagation();
-            return false;
-        });
-
-
-        managementNode.classList.add("__teasermanager_management_node");
-        node.appendChild(managementNode);
-    };
-
-    const updateSlots = (mutationList) => {
-        if (!mutationList) {
-            // update all slots
-            const slots = wrapperRef.current.querySelectorAll(`*[data-teasermanager-slot]`);
-            slots.forEach(initSlot);
-            console.log(`Teasermanager :: UPDATE ALL SLOTS`);
-        } else {
-            // update only if the change was not a management node
-            const isValidUpdate = mutationList?.find(mutation => {
-                if (mutation.type === "childList") {
-                    const removedNonManagementNode = [...mutation.removedNodes]?.find(node => !node.classList.contains("__teasermanager_management_node"));
-                    const addedNonManagementNode = [...mutation.addedNodes]?.find(node => !node.classList.contains("__teasermanager_management_node"));
-
-                    if (!removedNonManagementNode && !addedNonManagementNode) {
-                        return false;
-                    }
-                }
-
-                return true;
-            });
-
-            if (isValidUpdate) {
-                updateSlots();
-            }
-        }
-    };
-
-    useEffect(() => {
-        if (!entryId || entry) {
-            setEntry(null);
-            return;
-        }
-
-        contentfulClient.getEntry(entryId).then((loadedEntry, b) => {
-            setEntry(loadedEntry);
-        });
-    }, [entryId]);
-
-    useEffect(() => {
-        if (!wrapperRef.current) {
-            return;
-        }
-
-        const observer = new MutationObserver(updateSlots);
-        observer.observe(wrapperRef.current, {
-            attributes: false,
-            childList: true,
-            subtree: true,
-        });
-
-        return () => {
-            observer.disconnect();
-        };
-    }, [wrapperRef, currentDate, currentSlotState, onSlotClick, removeSlotData, reloadAllData]);
-
-    const updateSlotStateData = async () => {
-        try {
-            if (!currentDate) {
-                return;
-            }
-
-            const {
-                data,
-                logicData,
-            } = await loadSlotStateForPage(currentDate);
-
-            setCurrentSlotState(data);
-            setCurrentSlotLogicState(logicData);
-        } catch (e) {
-            console.error(e);
-        }
-    };
-
-    useEffect(() => {
-        updateSlots();
-    }, [currentSlotState]);
-
-    useEffect(() => {
-        reloadAllData();
-    }, [contentFieldName, locale, entry, currentDate]);
-
-    return <div className="flex w-full flex-col">
-        <div className="w-full">
-            <Timeline
-                currentDate={currentDate}
-                setCurrentDate={setCurrentDate}
-                loadTimelineStateForPage={loadTimelineStateForPage}/>
-        </div>
-        <div className={classNames(styles.wrapper, {[styles.loading]: loading === "initial"})} ref={wrapperRef}>
-            {!!loadedContent && loading !== "initial" &&
-                <Renderer
-                    value={loadedContent}
-                    storybookComponentLoader={componentLoader}
-                />
-            }
-        </div>
-    </div>;
-};
+import React, {
+    useEffect, useRef, useState,
+} from "react";
+
+import {getContentfulClient} from "../lib/contentfulClient";
+import Renderer from "@vonaffenfels/slate-editor/dist/Renderer";
+import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
+import {Timeline} from "./Teasermanager/Timeline";
+import styles from "./Teasermanager.module.css";
+import {runLoaders} from "../lib/runLoaders";
+import classNames from "classnames";
+
+export const Teasermanager = ({
+    entryId,
+    loadSlotStateForPage = () => console.error("missing loadSlotStateForPage"),
+    loadTimelineStateForPage = () => console.error("missing loadTimelineStateForPage"),
+    onSlotClick = async () => console.error("missing onSlotClick"),
+    onSlotClickLogic = async () => console.error("missing onSlotClickLogic"),
+    removeSlotData = async () => console.error("missing removeSlotData"),
+    contentFieldName = "content",
+    locale = "de",
+}) => {
+    const contentfulClient = getContentfulClient();
+    const [entry, setEntry] = useState(null);
+    const wrapperRef = useRef(null);
+    const [loading, setLoading] = useState("initial");
+    const [loadedContent, setLoadedContent] = useState(null);
+    const [currentDate, _setCurrentDate] = useState(null);
+    const [currentSlotState, setCurrentSlotState] = useState(null);
+    const [currentSlotLogicState, setCurrentSlotLogicState] = useState(null);
+    const currentLoadingOperation = useRef(0);
+
+    const setCurrentDate = (date) => {
+        if (date) {
+            date.setSeconds(0);
+        }
+
+        _setCurrentDate(date);
+    };
+
+    const reloadAllData = async () => {
+        let loadingId = ++currentLoadingOperation.current;
+        if (!currentDate) {
+            return;
+        }
+
+        const contentValue = entry?.fields?.[contentFieldName]?.[locale];
+        const portalValue = entry?.fields?.portal?.[locale];
+
+        if (!contentValue) {
+            setLoading("initial");
+            setLoadedContent(null);
+            return;
+        }
+
+        console.log(`Teasermanager :: LOADING DATA`);
+        if (loading !== "initial") {
+            setLoading(true);
+        }
+
+        const content = await runLoaders(
+            contentValue, portalValue, entry?.sys?.id, currentDate,
+        );
+
+        // only apply the LAST update
+        if (currentLoadingOperation.current === loadingId) {
+            updateSlotStateData();
+
+            console.log(`Teasermanager :: LOADED DATA`);
+            setLoadedContent(content);
+            setLoading(false);
+        }
+    };
+
+    const initSlot = (node) => {
+        const existingManagementNode = node.querySelector(`.__teasermanager_management_node`);
+        if (existingManagementNode) {
+            node.removeChild(existingManagementNode);
+        }
+
+        const slotId = node.dataset.teasermanagerSlot;
+        const managementNode = document.createElement("div");
+        managementNode.classList.add(styles.management);
+
+        const managementLabelNode = document.createElement("div");
+        managementLabelNode.classList.add(styles.label);
+        const managementLabelNodeLogic = document.createElement("div");
+        managementLabelNodeLogic.classList.add(styles.labelLogic);
+
+        if (currentSlotState?.[slotId]) {
+            managementNode.classList.add(styles.changedBorder);
+        }
+
+        if (currentSlotLogicState?.[slotId]) {
+            managementNode.classList.add(styles.logicBorder);
+        }
+
+        if (currentSlotState?.[slotId] && currentSlotState?.[slotId] !== "RESET") {
+            managementNode.classList.add(styles.changed);
+
+            managementLabelNode.innerHTML = `Artikel wechseln`;
+            const managementRemoveButtonNode = document.createElement("div");
+            managementRemoveButtonNode.classList.add(styles.removeButton);
+            managementRemoveButtonNode.title = `Artikel entfernen`;
+            managementRemoveButtonNode.innerHTML = `
+                <svg height="800px" width="800px" version="1.1" style="width: 20px; height: 20px;" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 496.158 496.158" xml:space="preserve">
+<path style="fill:#E04F5F;" d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
+\tc0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
+    <path style="fill:#FFFFFF;" d="M383.546,206.286H112.612c-3.976,0-7.199,3.225-7.199,7.2v69.187c0,3.976,3.224,7.199,7.199,7.199
+\th270.934c3.976,0,7.199-3.224,7.199-7.199v-69.187C390.745,209.511,387.521,206.286,383.546,206.286z"/>
+                </svg>
+            `;
+            managementRemoveButtonNode.addEventListener("click", (e) => {
+                removeSlotData(slotId, currentDate).then(() => {
+                    managementNode.classList.add(styles.loading);
+                    reloadAllData().then(() => {
+                        // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
+                        // managementNode.classList.remove(styles.loading);
+                    });
+                });
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            });
+            managementNode.appendChild(managementRemoveButtonNode);
+        } else {
+            managementLabelNode.innerHTML = `Artikel festlegen`;
+        }
+
+        if (currentSlotLogicState?.[slotId]) {
+            managementLabelNodeLogic.innerHTML = `Logik bearbeiten`;
+        } else {
+            managementLabelNodeLogic.innerHTML = `Logik festlegen`;
+        }
+
+        managementNode.appendChild(managementLabelNode);
+        managementNode.appendChild(managementLabelNodeLogic);
+        managementLabelNode.addEventListener("click", (e) => {
+            onSlotClick(slotId, currentDate).then((entry) => {
+                if (!entry) {
+                    return; // nothing changed, no need to reload!
+                }
+                managementNode.classList.add(styles.loading);
+                reloadAllData().then(() => {
+                    // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
+                    // managementNode.classList.remove(styles.loading);
+                });
+            });
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        });
+
+        managementLabelNodeLogic.addEventListener("click", (e) => {
+            onSlotClickLogic(slotId, currentDate).then(() => {
+                managementNode.classList.add(styles.loading);
+                reloadAllData().then(() => {
+                    // DONT remove, in case multiple loading operations are running we want the state to stay loading :)
+                    // managementNode.classList.remove(styles.loading);
+                });
+            });
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        });
+
+
+        managementNode.classList.add("__teasermanager_management_node");
+        node.appendChild(managementNode);
+    };
+
+    const updateSlots = (mutationList) => {
+        if (!mutationList) {
+            // update all slots
+            const slots = wrapperRef.current.querySelectorAll(`*[data-teasermanager-slot]`);
+            slots.forEach(initSlot);
+            console.log(`Teasermanager :: UPDATE ALL SLOTS`);
+        } else {
+            // update only if the change was not a management node
+            const isValidUpdate = mutationList?.find(mutation => {
+                if (mutation.type === "childList") {
+                    const removedNonManagementNode = [...mutation.removedNodes]?.find(node => !node.classList.contains("__teasermanager_management_node"));
+                    const addedNonManagementNode = [...mutation.addedNodes]?.find(node => !node.classList.contains("__teasermanager_management_node"));
+
+                    if (!removedNonManagementNode && !addedNonManagementNode) {
+                        return false;
+                    }
+                }
+
+                return true;
+            });
+
+            if (isValidUpdate) {
+                updateSlots();
+            }
+        }
+    };
+
+    useEffect(() => {
+        if (!entryId || entry) {
+            setEntry(null);
+            return;
+        }
+
+        contentfulClient.getEntry(entryId).then((loadedEntry, b) => {
+            setEntry(loadedEntry);
+        });
+    }, [entryId]);
+
+    useEffect(() => {
+        if (!wrapperRef.current) {
+            return;
+        }
+
+        const observer = new MutationObserver(updateSlots);
+        observer.observe(wrapperRef.current, {
+            attributes: false,
+            childList: true,
+            subtree: true,
+        });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [wrapperRef, currentDate, currentSlotState, onSlotClick, removeSlotData, reloadAllData]);
+
+    const updateSlotStateData = async () => {
+        try {
+            if (!currentDate) {
+                return;
+            }
+
+            const {
+                data,
+                logicData,
+            } = await loadSlotStateForPage(currentDate);
+
+            setCurrentSlotState(data);
+            setCurrentSlotLogicState(logicData);
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    useEffect(() => {
+        updateSlots();
+    }, [currentSlotState]);
+
+    useEffect(() => {
+        reloadAllData();
+    }, [contentFieldName, locale, entry, currentDate]);
+
+    return <div className="flex w-full flex-col">
+        <div className="w-full">
+            <Timeline
+                currentDate={currentDate}
+                setCurrentDate={setCurrentDate}
+                loadTimelineStateForPage={loadTimelineStateForPage}/>
+        </div>
+        <div className={classNames(styles.wrapper, {[styles.loading]: loading === "initial"})} ref={wrapperRef}>
+            {!!loadedContent && loading !== "initial" &&
+                <Renderer
+                    value={loadedContent}
+                    storybookComponentLoader={componentLoader}
+                />
+            }
+        </div>
+    </div>;
+};