@vonaffenfels/contentful-teasermanager 1.1.68 → 1.1.70

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

@@ -1,179 +1,189 @@
-import {EntityList, Pagination, Spinner, Select, Autocomplete, TextInput} from "@contentful/f36-components";
-import {getContentfulClient} from "../../../lib/contentfulClient";
-import {useEffect, useState} from "react";
-import format from "date-fns/format"
-import useDebounce from "../../../hooks/useDebounce";
-import classNames from "classnames";
-
-export const NewestArticles = ({
-    slotState = {},
-    portals = {},
-    sdk,
-    onEntryClick = () => alert("onEntryClick missing"),
-    getArticleThumbnailUrl = (article) => alert("getArticleThumbnailUrl missing"),
-}) => {
-    const {portal, slotId} = sdk.parameters.invocation;
-    const contentfulClient = getContentfulClient();
-    const limit = 25;
-    const [searchQuery, setSearchQuery] = useState("");
-    const [authorSearchQuery, setAuthorSearchQuery] = useState("");
-    const [enabledPortals, setEnabledPortals] = useState([portal]);
-    const [selectedPortal, setSelectedPortal] = useState(portal);
-    const [loading, setLoading] = useState(true);
-    const [data, setData] = useState({items: [], total: 0});
-    const [page, setPage] = useState(0);
-    const [selectedAuthor, setSelectedAuthor] = useState(null);
-    const [authors, setAuthors] = useState([]);
-    const [authorsLoading, setAuthorsLoading] = useState(false);
-
-    const debouncedSearch = useDebounce(searchQuery, 500);
-    const debouncedAuthorSearch = useDebounce(authorSearchQuery, 500);
-
-    useEffect(() => {
-        sdk.space.getContentType("article").then(articleType => {
-            let enabledPortals = articleType.fields.find(v => v.id === "portal")?.validations?.find(v => !!v.in)?.in;
-
-            if (enabledPortals) {
-                setEnabledPortals(enabledPortals);
-            }
-        });
-    }, []);
-
-    useEffect(() => {
-        setPage(0);
-    }, [searchQuery, selectedAuthor, selectedPortal]);
-
-    useEffect(() => {
-        setLoading(true);
-        const params = {
-            limit: limit,
-            skip: page * limit,
-            content_type: "article",
-            order: "-fields.teaserDate",
-            "fields.portal": selectedPortal,
-        };
-
-        if (searchQuery) {
-            params["fields.title[match]"] = searchQuery;
-        }
-
-        if (selectedAuthor) {
-            params["fields.authors.sys.id"] = selectedAuthor;
-        }
-
-        contentfulClient.getEntries(params).then((response) => {
-            setLoading(false);
-            setData(response);
-        });
-    }, [debouncedSearch, selectedAuthor,selectedPortal, limit, page]);
-
-    useEffect(() => {
-        setAuthorsLoading(true);
-        const params = {
-            limit: 100,
-            content_type: "author",
-            order: "fields.name",
-            "fields.portal": portal,
-        };
-
-        if (debouncedAuthorSearch) {
-            params["fields.name[match]"] = debouncedAuthorSearch
-        } else {
-            setSelectedAuthor(null);
-        }
-
-        contentfulClient.getEntries(params).then((response) => {
-            setAuthors(response?.items || []);
-            setAuthorsLoading(false);
-        });
-    }, [debouncedAuthorSearch, portal]);
-
-    useEffect(() => {
-        if (selectedAuthor) {
-            if (!authors.find(author => author.sys.id === selectedAuthor)) {
-                setSelectedAuthor(null);
-            }
-        }
-    }, [authors, selectedAuthor]);
-
-    return (
-        <div className="p-4 flex flex-col space-y-4">
-            <div className="flex space-x-2">
-                <div className="flex-grow">
-                    <TextInput
-                        width={"full"}
-                        placeholder={"Suche nach Titel"}
-                        onChange={(e) => setSearchQuery(e.target.value)}/>
-                </div>
-                <div className="flex-grow-0">
-                    <Autocomplete
-                        isLoading={authorsLoading}
-                        onSelectItem={item => setSelectedAuthor(item?.sys?.id)}
-                        items={authors}
-                        closeAfterSelect={true}
-                        itemToString={(item) => item.fields?.name?.de}
-                        renderItem={(item) => `${item.fields?.name?.de || "Unbekannter Name"}`}
-                        onInputValueChange={setAuthorSearchQuery}
-
-                        placeholder={'Autor'}
-                        noMatchesMessage={'Kein Autor gefunden'}
-                    >
-                        {(options) => {
-                            return options.map(option => <span key={option.value}>{option.label}</span>)
-                        }}
-                    </Autocomplete>
-                </div>
-                <div className="flex-grow-0">
-                    <Select value={selectedPortal} onChange={e => setSelectedPortal(e.target.value)}>
-                        {Object.keys(portals).filter(v => enabledPortals.includes(v)).sort().map(optionValue => <Select.Option
-                            key={optionValue}
-                            value={optionValue}>{portals[optionValue]}</Select.Option>)}
-                    </Select>
-                </div>
-            </div>
-            <EntityList>
-                {loading && <Spinner/>}
-                {!loading && data.items.map((entry) => {
-                    const isCurrentlySelectedInOtherSlot = !! Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot !== slotId);
-                    const isCurrentlySelectedInSlot =  !!Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot === slotId);
-
-                    let status = "draft";
-                    if (entry.sys.publishedAt) {
-                        status = "published";
-                    }
-
-                    let description = "";
-                    if (isCurrentlySelectedInSlot) {
-                        description = "Aktuell ausgewählt";
-                    } else if (isCurrentlySelectedInOtherSlot) {
-                        description = "Aktuell in anderem Teaser ausgewählt"
-                    }
-
-                    return <div
-                        key={entry.sys.id}
-                        className={classNames({
-                            "border-2 border-red-300": isCurrentlySelectedInSlot,
-                            "border-2 border-green-300": isCurrentlySelectedInOtherSlot,
-                        })}
-                    >
-                        <EntityList.Item
-                            isLoading={loading}
-                            entityType={format(new Date(entry.fields.teaserDate?.de || entry.fields.date?.de), "dd.MM.yyyy HH:mm")}
-                            title={entry.fields.title?.de}
-                            onClick={() => onEntryClick(entry)}
-                            thumbnailUrl={getArticleThumbnailUrl(entry)}
-                            description={description}
-                            status={status}
-                        />
-                    </div>
-                })}
-            </EntityList>
-            <Pagination
-                activePage={page}
-                onPageChange={setPage}
-                itemsPerPage={limit}
-                isLastPage={data.total / limit <= page + 1}
-            />
-        </div>
-    );
+import {EntityList, Pagination, Spinner, Select, Autocomplete, TextInput} from "@contentful/f36-components";
+import {getContentfulClient} from "../../../lib/contentfulClient";
+import {useEffect, useState} from "react";
+import format from "date-fns/format"
+import useDebounce from "../../../hooks/useDebounce";
+import classNames from "classnames";
+
+export const NewestArticles = ({
+    slotState = {},
+    portals = {},
+    sdk,
+    onEntryClick = () => alert("onEntryClick missing"),
+    getArticleThumbnailUrl = (article) => alert("getArticleThumbnailUrl missing"),
+}) => {
+    const {portal, slotId} = sdk.parameters.invocation;
+    const contentfulClient = getContentfulClient();
+    const limit = 25;
+    const [searchQuery, setSearchQuery] = useState("");
+    const [authorSearchQuery, setAuthorSearchQuery] = useState("");
+    const [enabledPortals, setEnabledPortals] = useState([portal]);
+    const [selectedPortal, setSelectedPortal] = useState(portal);
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState({items: [], total: 0});
+    const [page, setPage] = useState(0);
+    const [selectedAuthor, setSelectedAuthor] = useState(null);
+    const [authors, setAuthors] = useState([]);
+    const [authorsLoading, setAuthorsLoading] = useState(false);
+
+    const debouncedSearch = useDebounce(searchQuery, 500);
+    const debouncedAuthorSearch = useDebounce(authorSearchQuery, 500);
+
+    useEffect(() => {
+        sdk.space.getContentType("article").then(articleType => {
+            let enabledPortals = articleType.fields.find(v => v.id === "portal")?.validations?.find(v => !!v.in)?.in;
+
+            if (enabledPortals) {
+                setEnabledPortals(enabledPortals);
+            }
+        });
+    }, []);
+
+    useEffect(() => {
+        setPage(0);
+    }, [searchQuery, selectedAuthor, selectedPortal]);
+
+    useEffect(() => {
+        setLoading(true);
+        const params = {
+            limit: limit,
+            skip: page * limit,
+            content_type: "article",
+            order: "-fields.teaserDate",
+            "fields.portal": selectedPortal,
+            select: [
+                "fields.title",
+                "fields.authors",
+                "fields.teaserDate",
+                "fields.image",
+                "fields.date",
+                "fields.portal",
+                "sys.publishedAt",
+                "sys.id",
+            ].join(","),
+        };
+
+        if (searchQuery) {
+            params["fields.title[match]"] = searchQuery;
+        }
+
+        if (selectedAuthor) {
+            params["fields.authors.sys.id"] = selectedAuthor;
+        }
+
+        contentfulClient.getEntries(params).then((response) => {
+            setLoading(false);
+            setData(response);
+        });
+    }, [debouncedSearch, selectedAuthor,selectedPortal, limit, page]);
+
+    useEffect(() => {
+        setAuthorsLoading(true);
+        const params = {
+            limit: 100,
+            content_type: "author",
+            order: "fields.name",
+            "fields.portal": portal,
+        };
+
+        if (debouncedAuthorSearch) {
+            params["fields.name[match]"] = debouncedAuthorSearch
+        } else {
+            setSelectedAuthor(null);
+        }
+
+        contentfulClient.getEntries(params).then((response) => {
+            setAuthors(response?.items || []);
+            setAuthorsLoading(false);
+        });
+    }, [debouncedAuthorSearch, portal]);
+
+    useEffect(() => {
+        if (selectedAuthor) {
+            if (!authors.find(author => author.sys.id === selectedAuthor)) {
+                setSelectedAuthor(null);
+            }
+        }
+    }, [authors, selectedAuthor]);
+
+    return (
+        <div className="p-4 flex flex-col space-y-4">
+            <div className="flex space-x-2">
+                <div className="flex-grow">
+                    <TextInput
+                        width={"full"}
+                        placeholder={"Suche nach Titel"}
+                        onChange={(e) => setSearchQuery(e.target.value)}/>
+                </div>
+                <div className="flex-grow-0">
+                    <Autocomplete
+                        isLoading={authorsLoading}
+                        onSelectItem={item => setSelectedAuthor(item?.sys?.id)}
+                        items={authors}
+                        closeAfterSelect={true}
+                        itemToString={(item) => item.fields?.name?.de}
+                        renderItem={(item) => `${item.fields?.name?.de || "Unbekannter Name"}`}
+                        onInputValueChange={setAuthorSearchQuery}
+
+                        placeholder={'Autor'}
+                        noMatchesMessage={'Kein Autor gefunden'}
+                    >
+                        {(options) => {
+                            return options.map(option => <span key={option.value}>{option.label}</span>)
+                        }}
+                    </Autocomplete>
+                </div>
+                <div className="flex-grow-0">
+                    <Select value={selectedPortal} onChange={e => setSelectedPortal(e.target.value)}>
+                        {Object.keys(portals).filter(v => enabledPortals.includes(v)).sort().map(optionValue => <Select.Option
+                            key={optionValue}
+                            value={optionValue}>{portals[optionValue]}</Select.Option>)}
+                    </Select>
+                </div>
+            </div>
+            <EntityList>
+                {loading && <Spinner/>}
+                {!loading && data.items.map((entry) => {
+                    const isCurrentlySelectedInOtherSlot = !! Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot !== slotId);
+                    const isCurrentlySelectedInSlot =  !!Object.keys(slotState || {}).find(slot => slotState[slot] === entry.sys.id && slot === slotId);
+
+                    let status = "draft";
+                    if (entry.sys.publishedAt) {
+                        status = "published";
+                    }
+
+                    let description = "";
+                    if (isCurrentlySelectedInSlot) {
+                        description = "Aktuell ausgewählt";
+                    } else if (isCurrentlySelectedInOtherSlot) {
+                        description = "Aktuell in anderem Teaser ausgewählt"
+                    }
+
+                    return <div
+                        key={entry.sys.id}
+                        className={classNames({
+                            "border-2 border-red-300": isCurrentlySelectedInSlot,
+                            "border-2 border-green-300": isCurrentlySelectedInOtherSlot,
+                        })}
+                    >
+                        <EntityList.Item
+                            isLoading={loading}
+                            entityType={format(new Date(entry.fields.teaserDate?.de || entry.fields.date?.de), "dd.MM.yyyy HH:mm")}
+                            title={entry.fields.title?.de}
+                            onClick={() => onEntryClick(entry)}
+                            thumbnailUrl={getArticleThumbnailUrl(entry)}
+                            description={description}
+                            status={status}
+                        />
+                    </div>
+                })}
+            </EntityList>
+            <Pagination
+                activePage={page}
+                onPageChange={setPage}
+                itemsPerPage={limit}
+                isLastPage={data.total / limit <= page + 1}
+            />
+        </div>
+    );
 }

package/src/components/Contentful/Dialog.js

@@ -1,58 +1,58 @@
-import React, {
-    useEffect, useState,
-} from 'react';
-import {NewestArticles} from "./Dialog/NewestArticles";
-import {NoAccess} from "../NoAccess";
-
-const Dialog = ({
-    sdk,
-    portals,
-    getArticleThumbnailUrl,
-}) => {
-    const [slotState, setSlotState] = useState({});
-
-    const selectEntry = (entry) => {
-        sdk.close(entry);
-    };
-
-    const loadSlotStateForPage = async () => {
-        try {
-            const apiRoot = sdk.parameters.instance.apiRoot;
-            const portal = sdk.parameters.invocation.portal;
-            const pageId = sdk.parameters.invocation.entryId;
-            const date = sdk.parameters.invocation.date;
-            const teasermanagerUrl = `${apiRoot}/api/findStateForPage?project=${portal}&page=${pageId}&date=${date.toISOString()}`;
-            const response = await fetch(teasermanagerUrl).then(res => res.json());
-
-            if (response?.message) {
-                console.error(response.message);
-            }
-
-            return response?.data || {};
-        } catch (e) {
-            console.error(e);
-        }
-    };
-
-    useEffect(() => {
-        loadSlotStateForPage().then(setSlotState);
-    }, [sdk.parameters.invocation]);
-
-    return <div style={{
-        backgroundColor: "#FFFFFF",
-        minHeight: "100vh",
-    }}>
-        <NewestArticles sdk={sdk} onEntryClick={selectEntry} slotState={slotState} getArticleThumbnailUrl={getArticleThumbnailUrl} portals={portals}/>
-        {/*
-        <Tabs defaultTab="newest">
-            <Tabs.List>
-                <Tabs.Tab panelId="newest">Neuste Artikel</Tabs.Tab>
-            </Tabs.List>
-            <Tabs.Panel id="newest">
-            </Tabs.Panel>
-        </Tabs>
-        */}
-    </div>;
-};
-
-export default Dialog;
+import React, {
+    useEffect, useState,
+} from 'react';
+import {NewestArticles} from "./Dialog/NewestArticles";
+import {NoAccess} from "../NoAccess";
+
+const Dialog = ({
+    sdk,
+    portals,
+    getArticleThumbnailUrl,
+}) => {
+    const [slotState, setSlotState] = useState({});
+
+    const selectEntry = (entry) => {
+        sdk.close(entry);
+    };
+
+    const loadSlotStateForPage = async () => {
+        try {
+            const apiRoot = sdk.parameters.instance.apiRoot;
+            const portal = sdk.parameters.invocation.portal;
+            const pageId = sdk.parameters.invocation.entryId;
+            const date = sdk.parameters.invocation.date;
+            const teasermanagerUrl = `${apiRoot}/api/findStateForPage?project=${portal}&page=${pageId}&date=${date.toISOString()}`;
+            const response = await fetch(teasermanagerUrl).then(res => res.json());
+
+            if (response?.message) {
+                console.error(response.message);
+            }
+
+            return response?.data || {};
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    useEffect(() => {
+        loadSlotStateForPage().then(setSlotState);
+    }, [sdk.parameters.invocation]);
+
+    return <div style={{
+        backgroundColor: "#FFFFFF",
+        minHeight: "100vh",
+    }}>
+        <NewestArticles sdk={sdk} onEntryClick={selectEntry} slotState={slotState} getArticleThumbnailUrl={getArticleThumbnailUrl} portals={portals}/>
+        {/*
+        <Tabs defaultTab="newest">
+            <Tabs.List>
+                <Tabs.Tab panelId="newest">Neuste Artikel</Tabs.Tab>
+            </Tabs.List>
+            <Tabs.Panel id="newest">
+            </Tabs.Panel>
+        </Tabs>
+        */}
+    </div>;
+};
+
+export default Dialog;