2826: Adjustments

Author: tuj

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

@@ -10,6 +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 NotifiedFeedType from "./templates/notified-feed-type.jsx";
+import EventDatabaseFeedType from "./templates/event-database-feed-type.jsx";
 
 /**
  * The feed-source form component.
@@ -25,7 +28,6 @@ import FormInput from "../util/forms/form-input";
  *   spinner. Default is `""`
  * @param {object} props.feedSource The feed source object
  * @param {object} props.feedSourceTypeOptions The options for feed source types
- * @param {element} props.dynamicFormElement The dynamic form element
  * @param {string} props.mode The mode
  * @returns {object} The feed-source form.
  */
@@ -37,8 +39,8 @@ function FeedSourceForm({
   loadingMessage = "",
   feedSource = null,
   feedSourceTypeOptions = null,
-                          handleChangeFeedType = () => {},
-  dynamicFormElement = null,
+  onFeedTypeChange = () => {},
+  handleSecretInput = () => {},
   mode = null,
 }) {
   const { t } = useTranslation("common", { keyPrefix: "feed-source-form" });
@@ -71,12 +73,20 @@ function FeedSourceForm({
             name="feedType"
             label={t("feed-source-feed-type-label")}
             value={feedSource.feedType}
-            onChange={handleChangeFeedType}
+            onChange={onFeedTypeChange}
             disabled={mode === "PUT"}
             options={feedSourceTypeOptions}
           />
 
-          {dynamicFormElement}
+          {feedSource?.feedType === "App\\Feed\\CalendarApiFeedType" &&
+            (<CalendarFeedType 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

@@ -50,7 +50,7 @@ function FeedSourceManager({
 
   const [dynamicFormElement, setDynamicFormElement] = useState();
   const [submitting, setSubmitting] = useState(false);
-  const [formStateObject, setFormStateObject] = useState();
+  const [formStateObject, setFormStateObject] = useState({});
 
   const [
     postV2FeedSources,
@@ -70,7 +70,6 @@ function FeedSourceManager({
       secretsDefault: {
         "host": ""
       },
-      template: <EventDatabaseFeedType mode={saveMethod} />,
     },
     {
       value: "App\\Feed\\NotifiedFeedType",
@@ -79,7 +78,6 @@ function FeedSourceManager({
       secretsDefault: {
         "token": "",
       },
-      template: <NotifiedFeedType mode={saveMethod} />,
     },
     {
       value: "App\\Feed\\CalendarApiFeedType",
@@ -88,14 +86,12 @@ function FeedSourceManager({
       secretsDefault: {
         "resources": []
       },
-      template: <CalendarFeedType mode={saveMethod} />,
     },
     {
       value: "App\\Feed\\RssFeedType",
       title: t("dynamic-fields.rss-feed-type.title"),
       key: "4",
       secretsDefault: {},
-      template: null,
     },
   ];
 
@@ -116,31 +112,28 @@ function FeedSourceManager({
     setFormStateObject({ ...initialState });
   }, [initialState]);
 
-  const onFeedTypeChange = () => {
-    const option = feedSourceTypeOptions.find((opt) => opt.value === formStateObject.feedType);
+  const handleSecretInput = ({target}) => {
+    const localFormStateObject = { ...formStateObject };
+    if (!localFormStateObject.secrets) {
+      localFormStateObject.secrets = {};
+    }
+    localFormStateObject.secrets[target.id] = target.value;
+    setFormStateObject(localFormStateObject);
+  };
+
+  const onFeedTypeChange = ({target}) => {
+    const value = target.value
+    const option = feedSourceTypeOptions.find((opt) => opt.value === value);
     const newFormStateObject = {...formStateObject};
+    newFormStateObject.feedType = value;
     newFormStateObject.secrets = {...option.secretsDefault};
     setFormStateObject(newFormStateObject);
   }
 
-  useEffect(() => {
-    if (formStateObject?.feedType) {
-      if (option && option.template) {
-        setDynamicFormElement(
-          cloneElement(option.template, {
-            handleInput,
-            formStateObject,
-          })
-        );
-      } else {
-        setDynamicFormElement(null);
-      }
-    }
-  }, [formStateObject?.feedType]);
-
   /** Save feed source. */
   function saveFeedSource() {
     setLoadingMessage(t("loading-messages.saving-feed-source"));
+
     if (saveMethod === "POST") {
       postV2FeedSources({
         feedSourceFeedSourceInput: JSON.stringify(formStateObject),
@@ -197,8 +190,9 @@ function FeedSourceManager({
           handleSubmit={handleSubmit}
           isLoading={isLoading || submitting}
           loadingMessage={loadingMessage}
+          onFeedTypeChange={onFeedTypeChange}
+          handleSecretInput={handleSecretInput}
           feedSourceTypeOptions={feedSourceTypeOptions}
-          onFeedTypeChange={}
           dynamicFormElement={dynamicFormElement}
           mode={saveMethod}
         />

src/components/feed-sources/templates/event-database-feed-type.jsx

@@ -21,7 +21,7 @@ const EventDatabaseApiTemplate = ({
             ? t("redacted-value-input-placeholder")
             : ""
         }
-        value={formStateObject.host}
+        value={formStateObject?.host}
       />
     </>
   );

src/translations/da/common.json

@@ -227,24 +227,24 @@
     "create-new-theme": "Opret nyt tema"
   },
   "feed-sources-list": {
-    "header": "Feed sources",
-    "create-new-feed-source": "Opret ny feed source",
-    "number-of-slides": "Slides tilknyttede",
+    "header": "Datakilder",
+    "number-of-slides": "Tilkoblede slides",
+    "create-new-feed-source": "Opret ny datakilde",
     "loading-messages": {
-      "deleting-feed-source": "Sletter feed source(s)",
-      "loading-feed-sources": "Henter feed sources"
+      "deleting-feed-source": "Sletter datakilde(r)",
+      "loading-feed-sources": "Henter datakilder"
     },
     "error-messages": {
-      "feed-source-delete-error": "Der skete en fejl da feed sourcen skulle slettes:"
+      "feed-source-delete-error": "Der skete en fejl da datakilden skulle slettes:"
     },
     "success-messages": {
-      "feed-source-delete": "Feed sourcen er blevet slettet"
+      "feed-source-delete": "Datakilden er blevet slettet"
     },
     "columns": {
       "feed-type": "Type"
     },
     "info-modal": {
-      "slides": "Feed sourcen er tilknyttet følgende slides"
+      "slides": "Datakilde er tilknyttet følgende slides"
     }
   },
   "feed-source-manager": {
@@ -283,13 +283,10 @@
     }
   },
   "feed-source-form": {
-    "logo-title": "Tilføj logo til feed source",
-    "feed-source-name-label": "Feed source navn",
-    "feed-source-description-label": "Feed source beskrivelse",
-    "feed-source-feed-type-label": "Feed source type",
-    "feed-source-supported-feed-output-type-label": "Feed output type",
-    "feed-source-css-label": "Feed source CSS",
-    "save-button": "Gem feed source",
+    "feed-source-name-label": "Navn",
+    "feed-source-description-label": "Beskrivelse",
+    "feed-source-feed-type-label": "Type",
+    "save-button": "Gem datakilde",
     "cancel-button": "Annuller"
   },
   "media-list": {
@@ -796,7 +793,7 @@
     "configuration-themes": "Temaer",
     "configuration-users": "Brugere",
     "activation-codes": "Aktiveringskoder",
-    "configuration-feedsources": "Feed sources"
+    "configuration-feedsources": "Datakilde"
   },
   "topbar": {
     "brand": "OS2Display",