3172: Applied coding standards

Author: tuj

src/components/activation-code/activation-code-form.jsx

@@ -17,7 +17,6 @@ import StickyFooter from "../util/sticky-footer";
  * @param {object} props.activationCode The activationCode object to modify in the form.
  * @param {Function} props.handleInput Handles form input.
  * @param {Function} props.handleSubmit Handles form submit.
- * @param {Function} props.handleSaveNoClose Handles form submit without close.
  * @param {string} props.headerText Headline text.
  * @param {boolean} props.isLoading Indicator of whether the form is loading
  * @param {string} props.loadingMessage The loading message for the spinner
@@ -115,7 +114,6 @@ ActivationCodeForm.propTypes = {
   }).isRequired,
   handleInput: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  handleSaveNoClose: PropTypes.func.isRequired,
   headerText: PropTypes.string.isRequired,
   isLoading: PropTypes.bool,
   loadingMessage: PropTypes.string,

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

@@ -21,6 +21,7 @@ import StickyFooter from "../util/sticky-footer";
  * @param {object} props.feedSource The feed-source object to modify in the form.
  * @param {Function} props.handleInput Handles form input.
  * @param {Function} props.handleSubmit Handles form submit.
+ * @param {Function} props.handleSaveNoClose Handles form submit with close.
  * @param {string} props.headerText Headline text.
  * @param {boolean} [props.isLoading] Indicator of whether the form is loading.
  *   Default is `false`
@@ -93,7 +94,8 @@ function FeedSourceForm({
                   feedSourceId={feedSource["@id"]}
                 />
               )}
-              {feedSource?.feedType === "App\\Feed\\EventDatabaseApiFeedType" && (
+              {feedSource?.feedType ===
+                "App\\Feed\\EventDatabaseApiFeedType" && (
                 <EventDatabaseApiFeedType
                   handleInput={handleSecretInput}
                   formStateObject={feedSource.secrets}

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

@@ -3,6 +3,8 @@ import { Alert, Button, Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
 import FormInput from "../util/forms/form-input";
 import FormInputArea from "../util/forms/form-input-area";
@@ -12,8 +14,6 @@ import Preview from "../preview/preview";
 import idFromUrl from "../util/helpers/id-from-url";
 import StickyFooter from "../util/sticky-footer";
 import localStorageKeys from "../util/local-storage-keys";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faExpand} from "@fortawesome/free-solid-svg-icons";
 
 /**
  * The shared form component.
@@ -29,6 +29,7 @@ import {faExpand} from "@fortawesome/free-solid-svg-icons";
  * @param {boolean} props.isCampaign If it is a campaign form.
  * @param {string} props.location Either playlist or campaign.
  * @param {Array} props.children The children being passed from parent
+ * @param {Function} props.handleSaveNoClose Handles form submit with close.
  * @returns {object} The form shared by campaigns and playlists.
  */
 function PlaylistCampaignForm({
@@ -44,7 +45,9 @@ function PlaylistCampaignForm({
   isCampaign = false,
   playlist = null,
 }) {
-  const { t } = useTranslation("common", {'keyPrefix': 'playlist-campaign-form'});
+  const { t } = useTranslation("common", {
+    keyPrefix: "playlist-campaign-form",
+  });
   const navigate = useNavigate();
   const [publishedFromError, setPublishedFromError] = useState(false);
   const [publishedToError, setPublishedToError] = useState(false);
@@ -98,19 +101,15 @@ function PlaylistCampaignForm({
                 name="title"
                 type="text"
                 label={t("playlist-name-label")}
-                placeholder={t(
-                  "playlist-name-placeholder"
-                )}
+                placeholder={t("playlist-name-placeholder")}
                 value={playlist.title}
                 onChange={handleInput}
               />
               <FormInputArea
                 name="description"
                 type="text"
                 label={t("playlist-description-label")}
-                placeholder={t(
-                  "playlist-description-placeholder"
-                )}
+                placeholder={t("playlist-description-placeholder")}
                 value={playlist.description}
                 onChange={handleInput}
               />
@@ -126,9 +125,7 @@ function PlaylistCampaignForm({
             {/* Playlist or campaign form */}
             {children}
             <ContentBody>
-              <h3 className="h4">
-                {t("publish-title")}
-              </h3>
+              <h3 className="h4">{t("publish-title")}</h3>
               <Row className="g-2">
                 <Col md>
                   <FormInput
@@ -189,7 +186,8 @@ function PlaylistCampaignForm({
                   size="lg"
                   className="me-3 mt-3"
                 >
-                  <FontAwesomeIcon icon={faExpand} className="me-3" /> {t("preview-in-full-screen")}
+                  <FontAwesomeIcon icon={faExpand} className="me-3" />{" "}
+                  {t("preview-in-full-screen")}
                 </Button>
               </div>
               {previewOverlayVisible && (

src/components/preview/preview.jsx

@@ -1,8 +1,8 @@
 import { React, JSX, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import LocalStorageKeys from "../util/local-storage-keys.jsx";
-import ConfigLoader from "../../config-loader.js";
+import LocalStorageKeys from "../util/local-storage-keys";
+import ConfigLoader from "../../config-loader";
 
 /**
  * The preview component.
@@ -25,7 +25,6 @@ function Preview({
   simulatedHeight = 1080,
 }) {
   const { t } = useTranslation("common", { keyPrefix: "preview" });
-
   const [previewClientUrl, setPreviewClientUrl] = useState(null);
 
   useEffect(() => {
@@ -45,7 +44,7 @@ function Preview({
       urlSearchParams.set("preview-tenant", JSON.parse(tenantEntry).tenantKey);
 
       setPreviewClientUrl(`${base}?${urlSearchParams}`);
-    })
+    });
   }, []);
 
   const scale = width / simulatedWidth;

src/components/screen/screen-form.jsx

@@ -67,6 +67,7 @@ function ScreenForm({
   const checkInputsHandleSubmit = () => {
     setLayoutError(false);
     let submit = true;
+
     if (!selectedLayout) {
       displayError(t("remember-layout-error"));
       setLayoutError(true);
@@ -305,6 +306,7 @@ function ScreenForm({
                       helpText={t("search-to-se-possible-selections")}
                       selected={selectedLayout ? [selectedLayout] : []}
                       name="layout"
+                      error={layoutError}
                       singleSelect
                     />
                   </div>

src/components/slide/preview/remote-component-wrapper.jsx

@@ -83,6 +83,7 @@ function RemoteComponentWrapper({
   }, [showPreview]);
 
   useEffect(() => {
+    // eslint-disable-next-line no-undef
     const observer = new ResizeObserver((entries) => {
       if (entries.length > 0) {
         const first = entries[0];

src/components/slide/slide-form.jsx

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import Form from "react-bootstrap/Form";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
 import MultiSelectComponent from "../util/forms/multiselect-dropdown/multi-dropdown";
 import {
@@ -23,8 +25,6 @@ import userContext from "../../context/user-context";
 import "./slide-form.scss";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faExpand} from "@fortawesome/free-solid-svg-icons";
 
 /**
  * The slide form component.
@@ -93,7 +93,8 @@ function SlideForm({
 
   /**
    * Check if template is set
-   * @param noRedirect
+   *
+   * @param {boolean | null} noRedirect Avoid close after save.
    */
   const checkInputsHandleSubmit = (noRedirect) => {
     setTemplateError(false);
@@ -361,7 +362,7 @@ function SlideForm({
           {displayPreview && (
             <Col
               className="responsive-side shadow-sm p-3 mb-3 bg-body rounded me-3 sticky-top"
-              style={{top: "20px"}}
+              style={{ top: "20px" }}
             >
               <h2 className="h4">{t("slide-preview")}</h2>
 
@@ -387,7 +388,8 @@ function SlideForm({
                     }
                     className="me-3 mt-3 float-end"
                   >
-                    <FontAwesomeIcon icon={faExpand} className="me-3"/>{t("preview-in-full-screen")}
+                    <FontAwesomeIcon icon={faExpand} className="me-3" />
+                    {t("preview-in-full-screen")}
                   </Button>
                 </>
               )}
@@ -406,7 +408,7 @@ function SlideForm({
                   >
                     {t("slide-preview-about")}
                   </Alert>
-                  <Preview id={idFromUrl(slide["@id"])} mode="slide"/>
+                  <Preview id={idFromUrl(slide["@id"])} mode="slide" />
                 </div>
               )}
             </Col>

src/components/slide/slides-list.jsx

@@ -1,13 +1,13 @@
-import {React, useState, useEffect, useContext} from "react";
-import {useTranslation} from "react-i18next";
+import { React, useState, useEffect, useContext } from "react";
+import { useTranslation } from "react-i18next";
 import List from "../util/list/list";
 import idFromUrl from "../util/helpers/id-from-url";
 import UserContext from "../../context/user-context";
 import ListContext from "../../context/list-context";
 import ContentHeader from "../util/content-header/content-header";
 import ContentBody from "../util/content-body/content-body";
 import useModal from "../../context/modal-context/modal-context-hook";
-import {SlideColumns} from "./slides-columns";
+import { SlideColumns } from "./slides-columns";
 import {
   displayError,
   displaySuccess,
@@ -17,23 +17,22 @@ import {
   useDeleteV2SlidesByIdMutation,
   useGetV2PlaylistsByIdQuery,
 } from "../../redux/api/api.generated.ts";
-import Row from "react-bootstrap/Row";
 
 /**
  * The slides list component.
  *
  * @returns {object} The slides list
  */
 function SlidesList() {
-  const {t} = useTranslation("common", {keyPrefix: "slides-list"});
+  const { t } = useTranslation("common", { keyPrefix: "slides-list" });
   const context = useContext(UserContext);
-  const {selected, setSelected} = useModal();
+  const { selected, setSelected } = useModal();
 
   const {
-    searchText: {get: searchText},
-    page: {get: page},
-    createdBy: {get: createdBy},
-    isPublished: {get: isPublished},
+    searchText: { get: searchText },
+    page: { get: page },
+    createdBy: { get: createdBy },
+    isPublished: { get: isPublished },
   } = useContext(ListContext);
 
   // Local state
@@ -44,7 +43,7 @@ function SlidesList() {
   );
 
   // Delete call
-  const [DeleteV2Slides, {isSuccess: isDeleteSuccess, error: isDeleteError}] =
+  const [DeleteV2Slides, { isSuccess: isDeleteSuccess, error: isDeleteError }] =
     useDeleteV2SlidesByIdMutation();
 
   // Get method
@@ -55,7 +54,7 @@ function SlidesList() {
     refetch,
   } = useGetV2SlidesQuery({
     page,
-    order: {createdAt: "desc"},
+    order: { createdAt: "desc" },
     title: searchText,
     published: isPublished,
     createdBy,
@@ -84,7 +83,7 @@ function SlidesList() {
       const slideToDelete = selected[0];
       setSelected(selected.slice(1));
       const slideToDeleteId = idFromUrl(slideToDelete.id);
-      DeleteV2Slides({id: slideToDeleteId});
+      DeleteV2Slides({ id: slideToDeleteId });
     }
   }, [isDeleting, isDeleteSuccess]);
 

src/components/themes/theme-create.jsx

@@ -17,9 +17,7 @@ function ThemeCreate() {
     media: [],
   };
 
-  return (
-    <ThemeManager saveMethod="POST" initialState={data} />
-  );
+  return <ThemeManager saveMethod="POST" initialState={data} />;
 }
 
 export default ThemeCreate;

src/components/themes/theme-form.jsx

@@ -18,6 +18,7 @@ import StickyFooter from "../util/sticky-footer";
  * @param {object} props.theme The theme object to modify in the form.
  * @param {Function} props.handleInput Handles form input.
  * @param {Function} props.handleSubmit Handles form submit.
+ * @param {Function} props.handleSaveNoClose Handles form submit without close.
  * @param {string} props.headerText Headline text.
  * @param {boolean} props.isLoading Indicator of whether the form is loading
  * @param {string} props.loadingMessage The loading message for the spinner
@@ -37,10 +38,7 @@ function ThemeForm({
 
   return (
     <div>
-      <LoadingComponent
-        isLoading={isLoading}
-        loadingMessage={loadingMessage}
-      />
+      <LoadingComponent isLoading={isLoading} loadingMessage={loadingMessage} />
       <Form>
         <Row className="m-2">
           <h1 id="themeTitle">{headerText}</h1>