Simplified implementation

Author: tuj

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

@@ -37,6 +37,7 @@ function FeedSourceForm({
   loadingMessage = "",
   feedSource = null,
   feedSourceTypeOptions = null,
+                          handleChangeFeedType = () => {},
   dynamicFormElement = null,
   mode = null,
 }) {
@@ -67,10 +68,10 @@ function FeedSourceForm({
             onChange={handleInput}
           />
           <FormSelect
-            label={t("feed-source-feed-type-label")}
             name="feedType"
+            label={t("feed-source-feed-type-label")}
             value={feedSource.feedType}
-            onChange={handleInput}
+            onChange={handleChangeFeedType}
             disabled={mode === "PUT"}
             options={feedSourceTypeOptions}
           />

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

@@ -11,9 +11,9 @@ import {
   displayError,
   displaySuccess,
 } from "../util/list/toast-component/display-toast";
-import EventDatabaseApiFeedTypeTemplate from "./feed-source-type-templates/EventDatabaseApiFeedType.template";
-import NotifiedFeedTypeTemplate from "./feed-source-type-templates/NotifiedFeedType.template";
-import CalendarFeedTypeTemplate from "./feed-source-type-templates/CalendarFeedType.template";
+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";
 
 /**
  * The theme manager component.
@@ -67,27 +67,34 @@ function FeedSourceManager({
       value: "App\\Feed\\EventDatabaseApiFeedType",
       title: t("dynamic-fields.event-database-api-feed-type.title"),
       key: "1",
-      secrets: "host",
-      template: <EventDatabaseApiFeedTypeTemplate mode={saveMethod} />,
+      secretsDefault: {
+        "host": ""
+      },
+      template: <EventDatabaseFeedType mode={saveMethod} />,
     },
     {
       value: "App\\Feed\\NotifiedFeedType",
       title: t("dynamic-fields.notified-feed-type.title"),
       key: "2",
-      secrets: "token",
-      template: <NotifiedFeedTypeTemplate mode={saveMethod} />,
+      secretsDefault: {
+        "token": "",
+      },
+      template: <NotifiedFeedType mode={saveMethod} />,
     },
     {
       value: "App\\Feed\\CalendarApiFeedType",
       title: t("dynamic-fields.calendar-api-feed-type.title"),
       key: "3",
-      secrets: "resources",
-      template: <CalendarFeedTypeTemplate mode={saveMethod} />,
+      secretsDefault: {
+        "resources": []
+      },
+      template: <CalendarFeedType mode={saveMethod} />,
     },
     {
       value: "App\\Feed\\RssFeedType",
       title: t("dynamic-fields.rss-feed-type.title"),
-      key: "5",
+      key: "4",
+      secretsDefault: {},
       template: null,
     },
   ];
@@ -109,11 +116,15 @@ function FeedSourceManager({
     setFormStateObject({ ...initialState });
   }, [initialState]);
 
+  const onFeedTypeChange = () => {
+    const option = feedSourceTypeOptions.find((opt) => opt.value === formStateObject.feedType);
+    const newFormStateObject = {...formStateObject};
+    newFormStateObject.secrets = {...option.secretsDefault};
+    setFormStateObject(newFormStateObject);
+  }
+
   useEffect(() => {
-    if (formStateObject) {
-      const option = feedSourceTypeOptions.find(
-        (opt) => opt.value === formStateObject.feedType
-      );
+    if (formStateObject?.feedType) {
       if (option && option.template) {
         setDynamicFormElement(
           cloneElement(option.template, {
@@ -125,26 +136,7 @@ function FeedSourceManager({
         setDynamicFormElement(null);
       }
     }
-  }, [formStateObject]);
-
-  useEffect(() => {
-    if (formStateObject?.feedType) {
-      const selectedFeedTypeSecret = feedSourceTypeOptions.find(
-        (option) => option.value === formStateObject.feedType
-      ).secrets;
-
-      if (selectedFeedTypeSecret) {
-        const secretsArray = selectedFeedTypeSecret
-          .split(",")
-          .map((prop) => prop.trim());
-
-        formStateObject.secrets = secretsArray?.reduce((acc, secret) => {
-          acc[secret] = formStateObject[secret];
-          return acc;
-        }, {});
-      }
-    }
-  }, [formStateObject, formStateObject?.feedType]);
+  }, [formStateObject?.feedType]);
 
   /** Save feed source. */
   function saveFeedSource() {
@@ -206,6 +198,7 @@ function FeedSourceManager({
           isLoading={isLoading || submitting}
           loadingMessage={loadingMessage}
           feedSourceTypeOptions={feedSourceTypeOptions}
+          onFeedTypeChange={}
           dynamicFormElement={dynamicFormElement}
           mode={saveMethod}
         />

src/components/feed-sources/feed-sources-list.jsx

@@ -45,6 +45,7 @@ function FeedSourcesList() {
     page: { get: page },
     createdBy: { get: createdBy },
   } = useContext(ListContext);
+
   const {
     data,
     error: feedSourcesGetError,
@@ -97,6 +98,7 @@ function FeedSourcesList() {
       displayError(t("error-messages.feed-source-delete-error"), isDeleteError);
     }
   }, [isDeleteError]);
+
   const handleDelete = () => {
     setIsDeleting(true);
     setLoadingMessage(t("loading-messages.deleting-feed-source"));

src/components/feed-sources/feed-source-type-templates/CalendarFeedType.template.jsx renamed to src/components/feed-sources/templates/calendar-feed-type.jsx

@@ -3,10 +3,11 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import FormInput from "../../util/forms/form-input";
 
-const CalendarFeedTypeTemplate = ({ handleInput, formStateObject, mode }) => {
+const CalendarFeedType = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {
     keyPrefix: "feed-source-manager.dynamic-fields.calendar-api-feed-type",
   });
+
   return (
     <>
       <FormInput
@@ -25,11 +26,12 @@ const CalendarFeedTypeTemplate = ({ handleInput, formStateObject, mode }) => {
   );
 };
 
-CalendarFeedTypeTemplate.propTypes = {
+CalendarFeedType.propTypes = {
   handleInput: PropTypes.func,
   formStateObject: PropTypes.shape({
     resources: PropTypes.string,
   }),
   mode: PropTypes.string,
 };
-export default CalendarFeedTypeTemplate;
+
+export default CalendarFeedType;

src/components/feed-sources/feed-source-type-templates/EventDatabaseApiFeedType.template.jsx renamed to src/components/feed-sources/templates/event-database-feed-type.jsx

@@ -36,4 +36,5 @@ EventDatabaseApiTemplate.propTypes = {
   }),
   mode: PropTypes.string,
 };
+
 export default EventDatabaseApiTemplate;

src/components/feed-sources/feed-source-type-templates/NotifiedFeedType.template.jsx renamed to src/components/feed-sources/templates/notified-feed-type.jsx

@@ -3,14 +3,15 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import FormInput from "../../util/forms/form-input";
 
-const NotifiedFeedTypeTemplate = ({
+const NotifiedFeedType = ({
   handleInput,
   formStateObject,
   mode,
 }) => {
   const { t } = useTranslation("common", {
     keyPrefix: "feed-source-manager.dynamic-fields.notified-feed-type",
   });
+
   return (
     <>
       <FormInput
@@ -29,11 +30,12 @@ const NotifiedFeedTypeTemplate = ({
   );
 };
 
-NotifiedFeedTypeTemplate.propTypes = {
+NotifiedFeedType.propTypes = {
   handleInput: PropTypes.func,
   formStateObject: PropTypes.shape({
     token: PropTypes.string,
   }),
   mode: PropTypes.string,
 };
-export default NotifiedFeedTypeTemplate;
+
+export default NotifiedFeedType;

src/translations/da/common.json

@@ -248,19 +248,16 @@
     }
   },
   "feed-source-manager": {
-    "edit-feed-source": "Rediger følgende feed source",
-    "create-new-feed-source": "Opret ny feed source",
+    "edit-feed-source": "Rediger følgende datakilde",
+    "create-new-feed-source": "Opret ny datakilde",
     "loading-messages": {
-      "loading-feed-source": "Henter feed source",
-      "saving-feed-source": "Gemmer feed source",
-      "saving-media": "Mediet bliver gemt"
+      "loading-feed-source": "Henter datakilde",
+      "saving-feed-source": "Gemmer datakilde"
     },
     "success-messages": {
-      "saved-media": "Mediet er gemt",
       "saved-feed-source": "Feed source er gemt"
     },
     "error-messages": {
-      "save-media-error": "Der skete en fejl da mediet skulle gemmes:",
       "save-feed-source-error": "Der skete en fejl da feed source skulle gemmes:",
       "load-feed-source-error": "Der skete en fejl da feed source med følgende id: {{id}} skulle hentes:"
     },
@@ -271,7 +268,7 @@
         "redacted-value-input-placeholder": "Skjult værdi"
       },
       "notified-feed-type": {
-        "title": "Notified feed",
+        "title": "Notified",
         "token": "Notified API token",
         "redacted-value-input-placeholder": "Skjult værdi"
       },