Feature/2321 linting

.eslintrc

@@ -7,6 +7,11 @@
     "plugin:prettier/recommended"
   ],
   "ignorePatterns": ["*.yml"],
+  "globals": {
+    "window": true,
+    "localStorage": true,
+    "document": true
+  },
   "parser": "babel-eslint",
   "parserOptions": {
     "sourceType": "module",

package.json

@@ -48,9 +48,9 @@
     "vite": "^5.2.11"
   },
   "scripts": {
-    "lint:js": "eslint --ext .js --ext .jsx ./src",
+    "lint:js": "eslint --ext .js --ext .jsx ./src --max-warnings=0",
     "lint:js:fix": "eslint --ext .js --ext .jsx --fix ./src",
-    "lint:scss": "stylelint \"./src/**/*.scss\"",
+    "lint:scss": "stylelint \"./src/**/*.scss\" --max-warnings=0",
     "lint:scss:fix": "stylelint --fix \"./src/**/*.scss\"",
     "check-coding-standards": "yarn lint:js && yarn lint:scss",
     "apply-coding-standards": "yarn lint:js:fix && yarn lint:scss:fix",

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

@@ -22,13 +22,14 @@ import EventDatabaseApiFeedType from "./templates/event-database-feed-type";
  * @param {Function} props.handleInput Handles form input.
  * @param {Function} props.handleSubmit Handles form submit.
  * @param {string} props.headerText Headline text.
- * @param {boolean} [props.isLoading=false] Indicator of whether the form is
- *   loading. Default is `false`
- * @param {string} [props.loadingMessage=""] The loading message for the
- *   spinner. Default is `""`
- * @param {object} props.feedSource The feed source object
+ * @param {boolean} [props.isLoading] Indicator of whether the form is loading.
+ *   Default is `false`
+ * @param {string} [props.loadingMessage] The loading message for the spinner.
+ *   Default is `""`
  * @param {object} props.feedSourceTypeOptions The options for feed source types
  * @param {string} props.mode The mode
+ * @param {Function} props.onFeedTypeChange Callback on feed type change.
+ * @param {Function} props.handleSecretInput Callback on secret input change.
  * @returns {object} The feed-source form.
  */
 function FeedSourceForm({
@@ -81,15 +82,28 @@ function FeedSourceForm({
             options={feedSourceTypeOptions}
           />
 
-          {feedSource?.feedType === "App\\Feed\\CalendarApiFeedType" &&
-            (<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\\CalendarApiFeedType" && (
+            <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}
+            />
+          )}
         </ContentBody>
         <ContentFooter>
           <Button
@@ -126,13 +140,11 @@ FeedSourceForm.propTypes = {
   }),
   handleInput: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
+  handleSecretInput: PropTypes.func.isRequired,
+  onFeedTypeChange: PropTypes.func.isRequired,
   headerText: PropTypes.string.isRequired,
   isLoading: PropTypes.bool,
   loadingMessage: PropTypes.string,
-  dynamicFormElement: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-  ]),
   feedSourceTypeOptions: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.string.isRequired,

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

@@ -1,4 +1,4 @@
-import { cloneElement, React, useEffect, useState } from "react";
+import { React, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
@@ -45,7 +45,6 @@ function FeedSourceManager({
     t("loading-messages.loading-feed-source")
   );
 
-  const [dynamicFormElement, setDynamicFormElement] = useState();
   const [submitting, setSubmitting] = useState(false);
   const [formStateObject, setFormStateObject] = useState({});
 
@@ -65,23 +64,23 @@ function FeedSourceManager({
       title: t("dynamic-fields.event-database-api-feed-type.title"),
       key: "1",
       secretsDefault: {
-        "host": ""
+        host: "",
       },
     },
     {
       value: "App\\Feed\\NotifiedFeedType",
       title: t("dynamic-fields.notified-feed-type.title"),
       key: "2",
       secretsDefault: {
-        "token": "",
+        token: "",
       },
     },
     {
       value: "App\\Feed\\CalendarApiFeedType",
       title: t("dynamic-fields.calendar-api-feed-type.title"),
       key: "0",
       secretsDefault: {
-        "locations": []
+        locations: [],
       },
     },
     {
@@ -115,20 +114,20 @@ function FeedSourceManager({
     setFormStateObject(newState);
   }, [initialState]);
 
-  const handleSecretInput = ({target}) => {
+  const handleSecretInput = ({ target }) => {
     const secrets = { ...formStateObject.secrets };
     secrets[target.id] = target.value;
-    setFormStateObject({ ...formStateObject, secrets: secrets });
+    setFormStateObject({ ...formStateObject, secrets });
   };
 
-  const onFeedTypeChange = ({target}) => {
-    const value = target.value
+  const onFeedTypeChange = ({ target }) => {
+    const { value } = target;
     const option = feedSourceTypeOptions.find((opt) => opt.value === value);
-    const newFormStateObject = {...formStateObject};
+    const newFormStateObject = { ...formStateObject };
     newFormStateObject.feedType = value;
-    newFormStateObject.secrets = {...option.secretsDefault};
+    newFormStateObject.secrets = { ...option.secretsDefault };
     setFormStateObject(newFormStateObject);
-  }
+  };
 
   /** Save feed source. */
   function saveFeedSource() {
@@ -193,7 +192,6 @@ function FeedSourceManager({
           onFeedTypeChange={onFeedTypeChange}
           handleSecretInput={handleSecretInput}
           feedSourceTypeOptions={feedSourceTypeOptions}
-          dynamicFormElement={dynamicFormElement}
           mode={saveMethod}
         />
       )}
@@ -222,7 +220,6 @@ FeedSourceManager.propTypes = {
       status: PropTypes.number,
     }),
   }),
-  mode: PropTypes.string,
 };
 
 export default FeedSourceManager;

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

@@ -1,9 +1,9 @@
 import { React, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import ColumnHoc from "../util/column-hoc";
-import ListButton from "../util/list/list-button.jsx";
-import SelectColumnHoc from "../util/select-column-hoc.jsx";
-import UserContext from "../../context/user-context.jsx";
+import ListButton from "../util/list/list-button";
+import SelectColumnHoc from "../util/select-column-hoc";
+import UserContext from "../../context/user-context";
 
 /**
  * Retrieves the columns for feed sources data based on API call response.
@@ -12,7 +12,6 @@ import UserContext from "../../context/user-context.jsx";
  * @param {Function} props.apiCall - The API call function to retrieve feed sources data.
  * @param {string} props.infoModalRedirect - The redirect URL for information modal.
  * @param {string} props.infoModalTitle - The title for information modal.
- * @param {string} props.dataKey - The key for data retrieval.
  * @returns {object} Columns - An array of objects representing the columns for
  *   feed sources data.
  */

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

@@ -6,17 +6,17 @@ import {
   useDeleteV2FeedSourcesByIdMutation,
   useGetV2FeedSourcesByIdSlidesQuery,
 } from "../../redux/api/api.generated.ts";
-import ListContext from "../../context/list-context.jsx";
-import ContentBody from "../util/content-body/content-body.jsx";
-import List from "../util/list/list.jsx";
+import ListContext from "../../context/list-context";
+import ContentBody from "../util/content-body/content-body";
+import List from "../util/list/list";
 import { FeedSourceColumns } from "./feed-sources-columns";
 import {
   displayError,
   displaySuccess,
-} from "../util/list/toast-component/display-toast.jsx";
-import idFromUrl from "../util/helpers/id-from-url.jsx";
-import UserContext from "../../context/user-context.jsx";
-import useModal from "../../context/modal-context/modal-context-hook.jsx";
+} from "../util/list/toast-component/display-toast";
+import idFromUrl from "../util/helpers/id-from-url";
+import UserContext from "../../context/user-context";
+import useModal from "../../context/modal-context/modal-context-hook";
 
 /**
  * The feed sources list component.

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

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

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

@@ -1,14 +1,13 @@
 import { React } from "react";
 import PropTypes from "prop-types";
-import FormInput from "../../util/forms/form-input";
 import { useTranslation } from "react-i18next";
+import FormInput from "../../util/forms/form-input";
 
-const EventDatabaseApiTemplate = ({
-  handleInput,
-  formStateObject,
-  mode,
-}) => {
-  const { t } = useTranslation("common", { keyPrefix: "feed-source-manager.dynamic-fields.event-database-api-feed-type" });
+const EventDatabaseApiTemplate = ({ handleInput, formStateObject, mode }) => {
+  const { t } = useTranslation("common", {
+    keyPrefix:
+      "feed-source-manager.dynamic-fields.event-database-api-feed-type",
+  });
   return (
     <>
       <FormInput
@@ -17,9 +16,7 @@ const EventDatabaseApiTemplate = ({
         label={t("host")}
         onChange={handleInput}
         placeholder={
-          mode === "PUT"
-            ? t("redacted-value-input-placeholder")
-            : ""
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
         }
         value={formStateObject?.host}
       />
@@ -30,9 +27,7 @@ const EventDatabaseApiTemplate = ({
 EventDatabaseApiTemplate.propTypes = {
   handleInput: PropTypes.func,
   formStateObject: PropTypes.shape({
-    secrets: PropTypes.shape({
-      host: PropTypes.string,
-    }),
+    host: PropTypes.string,
   }),
   mode: PropTypes.string,
 };

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

@@ -3,11 +3,7 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import FormInput from "../../util/forms/form-input";
 
-const NotifiedFeedType = ({
-  handleInput,
-  formStateObject,
-  mode,
-}) => {
+const NotifiedFeedType = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {
     keyPrefix: "feed-source-manager.dynamic-fields.notified-feed-type",
   });
@@ -20,9 +16,7 @@ const NotifiedFeedType = ({
         label={t("token")}
         onChange={handleInput}
         placeholder={
-          mode === "PUT"
-            ? t("redacted-value-input-placeholder")
-            : ""
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
         }
         value={formStateObject.token}
       />

src/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx

@@ -58,8 +58,8 @@ function PlaylistDragAndDrop({
   });
 
   /**
-   * @param regionsAndPlaylists This method initializes playlists, so the
-   *   initial formstate object in screen manager is not empty
+   * @param {object} regionsAndPlaylists This method initializes playlists, so
+   *   the initial formstate object in screen manager is not empty
    */
   function callbackToinitializePlaylists(regionsAndPlaylists) {
     handleChange({

src/components/playlist/playlist-campaign-form.jsx

@@ -82,7 +82,7 @@ function PlaylistCampaignForm({
             type="text"
             label={t("playlist-campaign-form.playlist-description-label")}
             placeholder={t(
-              "playlist-campaign-form.playlist-description-placeholder",
+              "playlist-campaign-form.playlist-description-placeholder"
             )}
             value={playlist.description}
             onChange={handleInput}

src/components/playlist/playlists-columns.jsx

@@ -4,10 +4,8 @@ import ColumnHoc from "../util/column-hoc";
 import SelectColumnHoc from "../util/select-column-hoc";
 import UserContext from "../../context/user-context";
 import ListButton from "../util/list/list-button";
-import Publishing from "../util/publishing.jsx";
-import DateValue from "../util/date-value.jsx";
-import { Button } from "react-bootstrap";
-import PublishingStatus from "../util/publishingStatus.jsx";
+import DateValue from "../util/date-value";
+import PublishingStatus from "../util/publishingStatus";
 
 /**
  * Columns for playlists lists.