2321: Fixed feed integrations to align with api

Author: tuj

src/components/feed-sources/feed-source-form.jsx

@@ -10,9 +10,9 @@ import FormSelect from "../util/forms/select";
 import ContentBody from "../util/content-body/content-body";
 import ContentFooter from "../util/content-footer/content-footer";
 import FormInput from "../util/forms/form-input";
-import CalendarFeedType from "./templates/calendar-feed-type.jsx";
+import CalendarApiFeedType from "./templates/calendar-api-feed-type.jsx";
 import NotifiedFeedType from "./templates/notified-feed-type.jsx";
-import EventDatabaseFeedType from "./templates/event-database-feed-type.jsx";
+import EventDatabaseApiFeedType from "./templates/event-database-feed-type.jsx";
 
 /**
  * The feed-source form component.
@@ -82,14 +82,14 @@ function FeedSourceForm({
           />
 
           {feedSource?.feedType === "App\\Feed\\CalendarApiFeedType" &&
-            (<CalendarFeedType handleInput={handleSecretInput} formStateObject={feedSource.secrets} mode={mode} />)
+            (<CalendarApiFeedType handleInput={handleSecretInput} formStateObject={feedSource.secrets} mode={mode} feedSourceId={feedSource['@id']} />)
+          }
+          {feedSource?.feedType === "App\\Feed\\EventDatabaseApiFeedType" &&
+            (<EventDatabaseApiFeedType handleInput={handleSecretInput} formStateObject={feedSource.secrets} mode={mode} />)
           }
           {feedSource?.feedType === "App\\Feed\\NotifiedFeedType" &&
             (<NotifiedFeedType handleInput={handleSecretInput} formStateObject={feedSource.secrets} mode={mode} />)
           }
-          {feedSource?.feedType === "App\\Feed\\EventDatabaseApiFeedType" &&
-            (<EventDatabaseFeedType handleInput={handleSecretInput} formStateObject={feedSource.secrets} mode={mode} />)
-          }
         </ContentBody>
         <ContentFooter>
           <Button

src/components/feed-sources/feed-source-manager.jsx

@@ -13,7 +13,7 @@ import {
 } from "../util/list/toast-component/display-toast";
 import EventDatabaseFeedType from "./templates/event-database-feed-type.jsx";
 import NotifiedFeedType from "./templates/notified-feed-type.jsx";
-import CalendarFeedType from "./templates/calendar-feed-type.jsx";
+import CalendarApiFeedType from "./templates/calendar-api-feed-type.jsx";
 
 /**
  * The theme manager component.
@@ -82,9 +82,9 @@ function FeedSourceManager({
     {
       value: "App\\Feed\\CalendarApiFeedType",
       title: t("dynamic-fields.calendar-api-feed-type.title"),
-      key: "3",
+      key: "0",
       secretsDefault: {
-        "resources": []
+        "locations": []
       },
     },
     {
@@ -109,16 +109,19 @@ function FeedSourceManager({
 
   /** Set loaded data into form state. */
   useEffect(() => {
-    setFormStateObject({ ...initialState });
+    const newState = { ...initialState };
+
+    if (newState.secrets instanceof Array) {
+      newState.secrets = {};
+    }
+
+    setFormStateObject(newState);
   }, [initialState]);
 
   const handleSecretInput = ({target}) => {
-    const localFormStateObject = { ...formStateObject };
-    if (!localFormStateObject.secrets) {
-      localFormStateObject.secrets = {};
-    }
-    localFormStateObject.secrets[target.id] = target.value;
-    setFormStateObject(localFormStateObject);
+    const secrets = { ...formStateObject.secrets };
+    secrets[target.id] = target.value;
+    setFormStateObject({ ...formStateObject, secrets: secrets });
   };
 
   const onFeedTypeChange = ({target}) => {

src/components/feed-sources/templates/calendar-api-feed-type.jsx

@@ -0,0 +1,38 @@
+import { React } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import MultiselectFromEndpoint from "../../slide/content/multiselect-from-endpoint.jsx";
+import { Alert } from "react-bootstrap";
+
+const CalendarApiFeedType = ({ feedSourceId, handleInput, formStateObject }) => {
+  const { t } = useTranslation("common", {
+    keyPrefix: "feed-source-manager.dynamic-fields.calendar-api-feed-type"
+  });
+
+  return (
+    <>
+      {!feedSourceId && (<Alert className="mt-4" variant="warning">
+        {t("save-before-locations-can-be-set")}
+      </Alert>)}
+      {feedSourceId &&
+        <MultiselectFromEndpoint
+          onChange={handleInput}
+          name={"locations"}
+          label={t("locations")}
+          value={formStateObject.locations ?? []}
+          optionsEndpoint={"https://displayapiservice.local.itkdev.dk" + feedSourceId + "/config/locations"}
+        />
+      }
+    </>
+  );
+};
+
+CalendarApiFeedType.propTypes = {
+  handleInput: PropTypes.func,
+  formStateObject: PropTypes.shape({
+    locations: PropTypes.arrayOf(PropTypes.string)
+  }),
+  mode: PropTypes.string
+};
+
+export default CalendarApiFeedType;

src/components/feed-sources/templates/calendar-feed-type.jsx

@@ -46,21 +46,25 @@ function FeedSelector({
     supportedFeedOutputType: formElement.supportedFeedOutputType,
   });
 
+  useEffect(() => {
+    if (feedSourceOptions?.length === 1) {
+      // If there's only one feed source option select it.
+      const feedSource = feedSourceOptions[0]['@id'];
+      const configuration = value?.configuration ?? {};
+      const newValue = { ...value, feedSource, configuration };
+      onChange(newValue);
+    }
+  }, [feedSourceOptions]);
+
   useEffect(() => {
     if (feedSourcesData) {
-      if (feedSourcesData["hydra:member"].length === 1) {
-        // If there's only one feed source option select it.
-        const feedSource = feedSourcesData["hydra:member"][0]["@id"];
-        const configuration = value?.configuration ?? {};
-        const newValue = { ...value, feedSource, configuration };
-        onChange(newValue);
-      }
       setFeedSourceOptions(
         feedSourcesData["hydra:member"].map((source) => {
           return {
             title: source.title,
             value: source["@id"],
             key: source["@id"],
+            id: source["@id"],
           };
         })
       );
@@ -153,13 +157,13 @@ function FeedSelector({
       {feedSourcesLoadingError && <div>Error</div>}
       {feedSourcesLoading && <Spinner animation="border" />}
 
-      {feedSourcesData && feedSourceOptions && (
+      {feedSourcesData && feedSourceOptions?.length > 0 && (
         <MultiSelectComponent
           options={feedSourceOptions}
           selected={getSelected(value?.feedSource)}
           name="feedSource"
           labelledBy="Select"
-          singleSelect={formElement.singleSelect ?? false}
+          singleSelect={true}
           overrideStrings={{
             allItemsAreSelected: t("feed-selector.all-selected"),
             clearSelected: t("feed-selector.clear-selection"),

src/components/slide/content/feed-selector.jsx

@@ -274,8 +274,9 @@
       },
       "calendar-api-feed-type": {
         "title": "Kalender feed",
-        "resources": "Ressourcer",
-        "redacted-value-input-placeholder": "Skjult værdi"
+        "locations": "Lokationer",
+        "redacted-value-input-placeholder": "Skjult værdi",
+        "save-before-locations-can-be-set": "Bemærk! Datakilden skal gemmes før der kan tilkobles lokationer. Gem og åbn datakilden igen."
       },
       "rss-feed-type": {
         "title": "RSS feed"