@vonaffenfels/contentful-teasermanager 1.0.31 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.0.31",
+    "version": "1.0.32",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -99,7 +99,7 @@
         "@vonaffenfels/slate-editor": "^1.0.31",
         "webpack": "5.88.2"
     },
-    "gitHead": "007715e3b949cf0368e7b4d70626d2931c7b7829",
+    "gitHead": "0a84becd51cafa0c69f4c3e867a036fc684b0f0c",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Contentful/EntryEditor.js

@@ -8,7 +8,6 @@ const Entry = ({sdk}) => {
     const [locale, setLocale] = useState(sdk.locales.default);
     const [portal, setPortal] = useState();
     const portalField = sdk?.entry?.fields?.portal;
-    const [reloadTrigger, setReloadTrigger] = useState(0);
 
     portalField?.onValueChanged(() => {
         if (portalField.getValue() !== portal) {
@@ -27,7 +26,7 @@ const Entry = ({sdk}) => {
     }, []);
 
     const onSlotClick = (slotId, currentDate) => {
-        sdk.dialogs.selectSingleEntry({contentTypes: ["article"]}).then(async (entry) => {
+        return sdk.dialogs.selectSingleEntry({contentTypes: ["article"]}).then(async (entry) => {
             if (!entry) {
                 return;
             }
@@ -46,7 +45,7 @@ const Entry = ({sdk}) => {
                         "date": currentDate,
                     }),
                 });
-                setReloadTrigger((current) => current + 1);
+                return entry;
             } catch (e) {
                 console.error(e);
                 alert("Fehler beim speichern!");
@@ -69,7 +68,6 @@ const Entry = ({sdk}) => {
                     "date": currentDate,
                 }),
             });
-            setReloadTrigger((current) => current + 1);
         } catch (e) {
             console.error(e);
             alert("Fehler beim speichern!");
@@ -115,8 +113,7 @@ const Entry = ({sdk}) => {
         loadSlotStateForPage={loadSlotStateForPage}
         removeSlotData={removeSlotData}
         loadTimelineStateForPage={loadTimelineStateForPage}
-        onSlotClick={onSlotClick}
-        reloadTrigger={reloadTrigger}/>;
+        onSlotClick={onSlotClick}/>;
 };
 
 export default Entry;

package/src/components/Teasermanager/Timeline.js

@@ -93,9 +93,9 @@ export const Timeline = ({
             <div className="w-full h-auto text-center py-2">
                 {!!currentDate && (
                     <>
-                        <input
-                            type="date"
-                            value={format(currentDate, "yyyy-MM-dd")}
+                        <input
+                            type="date"
+                            value={format(currentDate, "yyyy-MM-dd")}
                             onChange={handleDateChange}
                             className="mr-2 w-auto"/>
                         <TimeSelect className="inline w-auto" currentDate={currentDate} onChange={handleTimeChange}/>
@@ -140,8 +140,8 @@ const TimeSelect = ({
         let options = [];
 
         for (let i = 1; i <= 24; i++) {
-            options.push(<option
-                key={`hour-option-${i}`}
+            options.push(<option
+                key={`hour-option-${i}`}
                 value={i}
                 style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
         }
@@ -153,8 +153,8 @@ const TimeSelect = ({
         let options = [];
 
         for (let i = 0; i <= 60; i += 15) {
-            options.push(<option
-                key={`minute-option-${i}`}
+            options.push(<option
+                key={`minute-option-${i}`}
                 value={i}
                 style={{padding: "8px"}}>{i < 10 ? `0${i}` : i}</option>);
         }

package/src/components/Teasermanager/Timeline.module.css

@@ -83,4 +83,7 @@
     .timeline:after {
         background: white;
     }
+    .timeline-dot-changed {
+        background-color: #ffffff;
+    }
 }

package/src/components/Teasermanager.js

@@ -8,16 +8,16 @@ 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 = () => console.error("missing onSlotClick"),
-    removeSlotData = () => console.error("missing removeSlotData"),
+    onSlotClick = async () => console.error("missing onSlotClick"),
+    removeSlotData = async () => console.error("missing removeSlotData"),
     contentFieldName = "content",
     locale = "de",
-    reloadTrigger = 0,
 }) => {
     const contentfulClient = getContentfulClient();
     const [entry, setEntry] = useState(null);
@@ -26,6 +26,7 @@ export const Teasermanager = ({
     const [loadedContent, setLoadedContent] = useState(null);
     const [currentDate, _setCurrentDate] = useState(null);
     const [currentSlotState, setCurrentSlotState] = useState(null);
+    const currentLoadingOperation = useRef(0);
 
     const setCurrentDate = (date) => {
         if (date) {
@@ -35,6 +36,38 @@ export const Teasermanager = ({
         _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) {
@@ -67,7 +100,13 @@ export const Teasermanager = ({
                 </svg>
             `;
             managementRemoveButtonNode.addEventListener("click", (e) => {
-                removeSlotData(slotId, currentDate);
+                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;
@@ -83,9 +122,17 @@ export const Teasermanager = ({
         }
 
         managementNode.appendChild(managementLabelNode);
-
         managementNode.addEventListener("click", (e) => {
-            onSlotClick(slotId, currentDate);
+            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;
@@ -101,6 +148,7 @@ export const Teasermanager = ({
             // 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 => {
@@ -149,7 +197,7 @@ export const Teasermanager = ({
         return () => {
             observer.disconnect();
         };
-    }, [wrapperRef, currentDate, currentSlotState]);
+    }, [wrapperRef, currentDate, currentSlotState, onSlotClick, removeSlotData, reloadAllData]);
 
     const updateSlotStateData = async () => {
         try {
@@ -162,37 +210,13 @@ export const Teasermanager = ({
         }
     }
 
-    const reloadAllData = async () => {
-        if (loading === true || !currentDate) {
-            return;
-        }
-
-        const contentValue = entry?.fields?.[contentFieldName]?.[locale];
-        const portalValue = entry?.fields?.portal?.[locale];
-
-        if (!contentValue) {
-            setLoading(false);
-            setLoadedContent(null);
-            return;
-        }
-
-        console.log(`Teasermanager :: LOADING DATA`);
-        setLoading(true);
-        runLoaders(contentValue, portalValue, entry?.sys?.id, currentDate).then(content => {
-            setLoadedContent(content);
-            setLoading(false);
-        });
-
-        updateSlotStateData();
-    }
-
     useEffect(() => {
         updateSlots();
     }, [currentSlotState]);
 
     useEffect(() => {
         reloadAllData();
-    }, [contentFieldName, locale, entry, reloadTrigger, currentDate]);
+    }, [contentFieldName, locale, entry, currentDate]);
 
     return <div className="flex w-full flex-col">
         <div className="w-full">
@@ -201,11 +225,8 @@ export const Teasermanager = ({
                 setCurrentDate={setCurrentDate}
                 loadTimelineStateForPage={loadTimelineStateForPage}/>
         </div>
-        <div className={styles.wrapper} ref={wrapperRef}>
-            {loading &&
-                <div className="dark:text-white w-full font-base text-2xl p-8 h-full text-center align-middle">Lade
-                    Inhalte...</div>}
-            {!!loadedContent && !loading &&
+        <div className={classNames(styles.wrapper, {[styles.loading]: loading === "initial"})} ref={wrapperRef}>
+            {!!loadedContent && loading !== "initial" &&
                 <Renderer
                     value={loadedContent}
                     storybookComponentLoader={componentLoader}

package/src/components/Teasermanager.module.css

@@ -32,13 +32,53 @@
     cursor: pointer;
 }
 
+.loading {
+    animation: pulse 3s ease-in-out infinite;
+}
+
+.loading:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -50px;
+    width: 100px;
+    height: 100px;
+    border-radius: 999999px;
+    border: 10px dotted white;
+    filter: drop-shadow(2px 4px 6px black);
+    animation: loading 3s linear infinite;
+}
+
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    from {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.3;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     .management {
         outline: 2px dashed white;
     }
 }
 
-.management:hover  {
+.management:hover {
     background-color: rgba(255, 255, 255, 0.9);
 }
 
@@ -54,10 +94,11 @@
 }
 
 .changed {
-    background-color: rgba(172, 255, 156, 0.9);
+    background-color: rgba(172, 255, 156, 0.4);
 }
+
 .changed:hover {
-    background-color: rgba(97, 255, 68, 0.9);
+    background-color: rgba(97, 255, 68, 0.6);
 }
 
 .changed-border {