@vonaffenfels/contentful-teasermanager 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-teasermanager",
-    "version": "1.2.3",
+    "version": "1.2.5",
     "main": "dist/index.js",
     "scripts": {
         "prepublish": "yarn run build",
@@ -66,6 +66,7 @@
         "@contentful/forma-36-tokens": "^0.10.1",
         "@dnd-kit/core": "^6.3.1",
         "@svgr/webpack": "^5.5.0",
+        "@tanstack/react-query": "^4",
         "babel-loader": "^8.2.2",
         "classnames": "^2.3.2",
         "clean-webpack-plugin": "^3.0.0",
@@ -101,7 +102,7 @@
         "contentful-resolve-response": "^1.9.2",
         "webpack": "5.88.2"
     },
-    "gitHead": "89b263e6c6a0b3a1bb39eeb63abf8a8c00207416",
+    "gitHead": "357c8624f8aa9008ed7dde920ef7508b12f45dd4",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Contentful/Dialog/LogicEditor.js

@@ -18,7 +18,8 @@ import useDebounce from "../../../hooks/useDebounce";
 import {getContentfulClient} from "../../../lib/contentfulClient";
 import {PlusIcon} from "@contentful/f36-icons";
 import {CSS} from "@dnd-kit/utilities";
-
+import {queryFromLogic} from "../../../queryFromLogic";
+import {useQuery} from "@tanstack/react-query";
 export const LogicEditor = (props) => {
     const [selectedTags, setSelectedTags] = useState([]);
 
@@ -65,6 +66,43 @@ const LogicEditorInner = ({
     const [addTimepoint, setAddTimepoint] = useState(7);
     const debouncedSearch = useDebounce(searchQuery, 500);
     const [selectedTimepoints, setSelectedTimepoints] = useState([]);
+    const {
+        portal,
+        locale = "de",
+    } = sdk.parameters.invocation;
+
+    const {data: articles} = useQuery({
+        enabled: !!selectedTags.length && !!portal && !!contentfulClient,
+        queryKey: ["articles", selectedTags, portal],
+        queryFn: async () => {
+            const query = queryFromLogic({
+                tags: selectedTags,
+                portal,
+            });
+
+            try {
+                const result = await contentfulClient.getEntries({
+                    content_type: "article",
+                    locale: "de",
+                    order: "-fields.date",
+                    limit: 10,
+                    ...query,
+                    select: [
+                        "fields.title",
+                        "fields.slug",
+                        "fields.date",
+                        "sys.id",
+                    ].join(","),
+                });
+
+                return result;
+            } catch (e) {
+                console.error(e);
+                return {items: []};
+            }
+        },
+    });
+
     useEffect(() => {
         if (logicData?.timepoints) {
             setSelectedTimepoints(logicData?.timepoints);
@@ -83,11 +121,6 @@ const LogicEditorInner = ({
         node: andNode,
     } = useDroppable({id: "and"});
 
-    const {
-        portal,
-        locale = "de",
-    } = sdk.parameters.invocation;
-
     useEffect(() => {
         setLoading(true);
         const params = {
@@ -196,8 +229,8 @@ const LogicEditorInner = ({
             </div>
             <div className="flex w-full flex-row items-center gap-2" style={{minHeight: 36}}>
                 <SectionHeading style={{marginBottom: 0}}>Gewählte Kategorien & Tags:</SectionHeading>
-                <div className="grid grid-cols-2 gap-4">
-                    <div className="flex flex-col gap-2">
+                <div className="grid w-full grid-cols-4 gap-4">
+                    <div className="flex w-full flex-col gap-2">
                         <div>
                             <SectionHeading style={{marginBottom: 0}}>Oder</SectionHeading>
                         </div>
@@ -222,7 +255,7 @@ const LogicEditorInner = ({
                             })}
                         </div>
                     </div>
-                    <div className="flex flex-col gap-2">
+                    <div className="flex w-full flex-col gap-2">
                         <SectionHeading style={{marginBottom: 0}}>Und</SectionHeading>
                         <div
                             ref={setAndNodeRef}
@@ -246,6 +279,39 @@ const LogicEditorInner = ({
                             })}
                         </div>
                     </div>
+                    <div className="col-span-2 flex w-full flex-col gap-4">
+                        <div>
+                            <SectionHeading style={{marginBottom: 0}}>Artikel</SectionHeading>
+                        </div>
+                        <div className="flex flex-col gap-4">
+                            <table className="w-full max-w-full table-auto gap-4 text-left">
+                                <thead>
+                                    <tr>
+                                        <th>Datum</th>
+                                        <th className="pl-4">Titel</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {articles?.items?.map((article) => {
+                                        return <tr key={article.sys.id}>
+                                            <td className="whitespace-nowrap">
+                                                {new Date(article.fields.date.de).toLocaleString("de-DE", {
+                                                    hour: "2-digit",
+                                                    minute: "2-digit",
+                                                    day: "2-digit",
+                                                    month: "2-digit",
+                                                    year: "numeric",
+                                                })}
+                                            </td>
+                                            <td className="truncate whitespace-nowrap pl-4">
+                                                {article.fields.title.de}
+                                            </td>
+                                        </tr>;
+                                    })}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div className="flex w-full flex-row gap-2">

package/src/components/Contentful/Dialog.js

@@ -2,8 +2,12 @@ import React, {
     useEffect, useState,
 } from 'react';
 import {NewestArticles} from "./Dialog/NewestArticles";
-import {NoAccess} from "../NoAccess";
 import {LogicEditor} from './Dialog/LogicEditor';
+import {
+    QueryClient, QueryClientProvider,
+} from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 const Dialog = ({
     sdk,
@@ -60,21 +64,23 @@ const Dialog = ({
         backgroundColor: "#FFFFFF",
         minHeight: "100vh",
     }}>
-        {sdk.parameters.invocation.isLogicEditor ?
-            <LogicEditor
-                sdk={sdk}
-                onSave={onSave}
-                logicData={logicData}
-                portals={portals}
-            /> :
-            <NewestArticles
-                sdk={sdk}
-                onEntryClick={selectEntry}
-                slotState={slotState}
-                getArticleThumbnailUrl={getArticleThumbnailUrl}
-                portals={portals}
-            />
-        }
+        <QueryClientProvider client={queryClient}>
+            {sdk.parameters.invocation.isLogicEditor ?
+                <LogicEditor
+                    sdk={sdk}
+                    onSave={onSave}
+                    logicData={logicData}
+                    portals={portals}
+                /> :
+                <NewestArticles
+                    sdk={sdk}
+                    onEntryClick={selectEntry}
+                    slotState={slotState}
+                    getArticleThumbnailUrl={getArticleThumbnailUrl}
+                    portals={portals}
+                />
+            }
+        </QueryClientProvider>
     </div>;
 };
 

package/src/queryFromLogic.js

@@ -0,0 +1,29 @@
+export const queryFromLogic = (logic) => {
+    const orTags = logic.tags.filter(v => v.type === "or").map(v => v.id);
+    const andTags = logic.tags.filter(v => v.type === "and").map(v => v.id);
+    const timeZoneOffsetInHours = new Date().getTimezoneOffset() / 60;
+    const differenceToGermanTime = timeZoneOffsetInHours + 2;
+    const hours = [...(logic.timepoints || [])].map(v => parseInt(v)).sort((a, b) => a - b);
+    let nearestPassedTime = hours.find(v => v <= new Date().getUTCHours() + differenceToGermanTime);
+    const logicQuery = {"fields.portal": logic.portal};
+
+    if (!nearestPassedTime) {
+        nearestPassedTime = hours.at(0) || 0;
+    }
+
+    if (orTags.length) {
+        logicQuery["fields.tags.sys.id[in]"] = orTags.join(",");
+    }
+
+    if (andTags.length) {
+        logicQuery["fields.tags.sys.id[all]"] = andTags.join(",");
+    }
+
+    if (nearestPassedTime && hours.length) {
+        logicQuery["fields.date[lte]"] = new Date(new Date().setHours(
+            nearestPassedTime + differenceToGermanTime, 0, 0, 0,
+        ));
+    }
+
+    return logicQuery;
+};

package/webpack.config.dev.js

@@ -5,7 +5,7 @@ let config = require("./webpack.config")({
 });
 
 
-config.entry = {index: './src/dev.js'};
+config.entry.index = './src/dev.js';
 
 config.mode = "development";
 config.watch = true;