AR-826: fix linting after node upgrade

Author: sinejespersen

src/auth-handler.jsx

@@ -1,4 +1,5 @@
 import { React, useContext } from "react";
+import PropTypes from "prop-types";
 import Login from "./components/user/login";
 import UserContext from "./context/user-context";
 
@@ -19,4 +20,8 @@ function AuthHandler({ children }) {
   return children;
 }
 
+AuthHandler.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 export default AuthHandler;

src/components/groups/group-create.jsx

@@ -50,14 +50,14 @@ function GroupCreate() {
    * @param {object} props The props.
    * @param {object} props.target Event target.
    */
-  function handleInput({ target }) {
+  const handleInput = ({ target }) => {
     const localFormStateObject = { ...formStateObject };
     localFormStateObject[target.id] = target.value;
     setFormStateObject(localFormStateObject);
-  }
+  };
 
   /** Handles submit. */
-  function handleSubmit() {
+  const handleSubmit = () => {
     const saveData = {
       title: formStateObject.title,
       description: formStateObject.description,
@@ -68,7 +68,7 @@ function GroupCreate() {
     PostV1ScreenGroups({
       screenGroupScreenGroupInput: JSON.stringify(saveData),
     });
-  }
+  };
 
   return (
     <GroupForm

src/components/groups/group-edit.jsx

@@ -80,14 +80,14 @@ function GroupEdit() {
    * @param {object} props The props.
    * @param {object} props.target Event target.
    */
-  function handleInput({ target }) {
+  const handleInput = ({ target }) => {
     const localFormStateObject = { ...formStateObject };
     localFormStateObject[target.id] = target.value;
     setFormStateObject(localFormStateObject);
-  }
+  };
 
   /** Handles submit. */
-  function handleSubmit() {
+  const handleSubmit = () => {
     setSavingGroup(true);
     setLoadingMessage(t("loading-messages.saving-group"));
     const saveData = {
@@ -100,7 +100,7 @@ function GroupEdit() {
       id,
       screenGroupScreenGroupInput: JSON.stringify(saveData),
     });
-  }
+  };
 
   return (
     <>

src/components/groups/group-form.jsx

@@ -85,10 +85,18 @@ function GroupForm({
 GroupForm.defaultProps = {
   isLoading: false,
   loadingMessage: "",
+  group: PropTypes.shape({
+    description: "",
+    title: "",
+  }),
 };
 
 GroupForm.propTypes = {
-  group: PropTypes.objectOf(PropTypes.any).isRequired,
+  group: PropTypes.shape({
+    description: PropTypes.string.isRequired,
+
+    title: PropTypes.string.isRequired,
+  }),
   handleInput: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   headerText: PropTypes.string.isRequired,

src/components/groups/groups-list.jsx

@@ -104,10 +104,10 @@ function GroupsList() {
   }, [isDeleteError]);
 
   /** Starts the deletion process. */
-  function handleDelete() {
+  const handleDelete = () => {
     setIsDeleting(true);
     setLoadingMessage(t("loading-messages.deleting-group"));
-  }
+  };
 
   // The columns for the table.
   const columns = GroupColumns({

src/components/media-modal/media-modal.jsx

@@ -25,12 +25,12 @@ function MediaModal({ show, onClose, handleAccept, multiple }) {
   const { t } = useTranslation("common");
 
   /** @param {Array} images The images that are selected in the dialog. */
-  function handleSelectedImages(images) {
+  const handleSelectedImages = (images) => {
     setSelectedImages(images);
     if (!multiple && images.length === 1) {
       handleAccept(images);
     }
-  }
+  };
 
   return (
     <Modal

src/components/media/media-create.jsx

@@ -31,11 +31,11 @@ function MediaCreate() {
    * @param {object} props The props.
    * @param {object} props.target Event target
    */
-  function handleInput({ target }) {
+  const handleInput = ({ target }) => {
     const localFormStateObject = { ...formStateObject };
     localFormStateObject[target.id] = target.value;
     setFormStateObject(localFormStateObject);
-  }
+  };
 
   /** Saves multiple pieces of media. */
   useEffect(() => {
@@ -66,7 +66,7 @@ function MediaCreate() {
   }, [isSaveSuccess]);
 
   /** Handles submit. */
-  function handleSubmit() {
+  const handleSubmit = () => {
     const localMediaToCreate = [];
     formStateObject.images.forEach((element) => {
       setLoadingMessage(
@@ -85,7 +85,7 @@ function MediaCreate() {
     });
 
     setMediaToCreate(localMediaToCreate);
-  }
+  };
 
   return (
     <MediaForm

src/components/media/media-edit.jsx

@@ -90,7 +90,11 @@ MediaForm.defaultProps = {
 };
 
 MediaForm.propTypes = {
-  media: PropTypes.objectOf(PropTypes.any).isRequired,
+  media: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string,
+    })
+  ).isRequired,
   handleInput: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   headerText: PropTypes.string.isRequired,

src/components/media/media-form.jsx

@@ -93,13 +93,13 @@ function MediaList({ fromModal }) {
   }, [context.selectedTenant.get]);
 
   /** @param {number} nextPage - The next page. */
-  function updateUrlAndChangePage(nextPage) {
+  const updateUrlAndChangePage = (nextPage) => {
     const params = new URLSearchParams(search);
     params.delete("page");
     params.append("page", nextPage);
     navigate({ search: params.toString() });
     setPage(nextPage);
-  }
+  };
 
   /** Sets the url. */
   useEffect(() => {
@@ -118,10 +118,10 @@ function MediaList({ fromModal }) {
    *
    * @param {string} newSearchText Updates the search text state and url.
    */
-  function handleSearch(newSearchText) {
+  const handleSearch = (newSearchText) => {
     setPage(1);
     setSearchText(newSearchText);
-  }
+  };
 
   /** Deletes multiple pieces of media. */
   useEffect(() => {
@@ -151,10 +151,10 @@ function MediaList({ fromModal }) {
   }, [isDeleteError]);
 
   /** Deletes selected data, and closes modal. */
-  function handleDelete() {
+  const handleDelete = () => {
     setLoadingMessage(t("loading-messages.deleting-media"));
     setIsDeleting(true);
-  }
+  };
 
   useEffect(() => {
     if (mediaLoadError) {

src/components/media/media-list.jsx

@@ -1,4 +1,5 @@
 import { React, useContext } from "react";
+import PropTypes from "prop-types";
 import UserContext from "../../../context/user-context";
 
 /**
@@ -24,4 +25,9 @@ function RestrictedNavRoute({ children, roles }) {
   return children;
 }
 
+RestrictedNavRoute.propTypes = {
+  children: PropTypes.node.isRequired,
+  roles: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
 export default RestrictedNavRoute;

src/components/navigation/nav-items/restricted-nav-route.jsx

@@ -61,16 +61,16 @@ function PlaylistDragAndDrop({ handleChange, name, screenId, regionId }) {
    *
    * @param {string} filter - The filter.
    */
-  function onFilter(filter) {
+  const onFilter = (filter) => {
     setSearchText(filter);
-  }
+  };
 
   /**
    * Removes playlist from list of playlists, and closes modal.
    *
    * @param {object} removeItem - Item to remove
    */
-  function removeFromList(removeItem) {
+  const removeFromList = (removeItem) => {
     const indexOfItemToRemove = selectedData
       .map((item) => {
         return item["@id"];
@@ -82,21 +82,21 @@ function PlaylistDragAndDrop({ handleChange, name, screenId, regionId }) {
 
     const target = { value: selectedDataCopy, id: name };
     handleChange({ target });
-  }
+  };
 
   /**
    * Adds group to list of groups.
    *
    * @param {object} props - The props.
    * @param {object} props.target - The target.
    */
-  function handleAdd({ target }) {
+  const handleAdd = ({ target }) => {
     const { value, id } = target;
     setSelectedData(value);
     handleChange({
       target: { id, value },
     });
-  }
+  };
 
   const columns = SelectPlaylistColumns({
     handleDelete: removeFromList,

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

@@ -44,8 +44,15 @@ function CampaignForm({ campaign, handleInput }) {
     </>
   );
 }
+
+CampaignForm.defaultProps = {
+  campaign: null,
+};
+
 CampaignForm.propTypes = {
-  campaign: PropTypes.objectOf(PropTypes.any).isRequired,
+  campaign: PropTypes.objectOf({
+    "@id": PropTypes.string,
+  }),
   handleInput: PropTypes.func.isRequired,
 };
 

src/components/playlist/campaign-form.jsx

@@ -30,7 +30,7 @@ function PlaylistCampaignEdit({ location }) {
 
   return (
     <>
-      {slideId && (
+      {(slideId || loadingError) && (
         <PlaylistCampaignManager
           saveMethod="PUT"
           location={location}

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

@@ -44,7 +44,7 @@ function PlaylistCampaignForm({
   const [publishedToError, setPublishedToError] = useState(false);
 
   /** Check if published is set */
-  function checkInputsHandleSubmit() {
+  const checkInputsHandleSubmit = () => {
     setPublishedToError(false);
     setPublishedFromError(false);
     let submit = true;
@@ -60,7 +60,7 @@ function PlaylistCampaignForm({
     if (submit) {
       handleSubmit();
     }
-  }
+  };
 
   return (
     <>
@@ -159,10 +159,20 @@ PlaylistCampaignForm.defaultProps = {
   isLoading: false,
   loadingMessage: "",
   isCampaign: false,
+  playlist: null,
 };
 
 PlaylistCampaignForm.propTypes = {
-  playlist: PropTypes.objectOf(PropTypes.any).isRequired,
+  playlist: PropTypes.shape({
+    description: PropTypes.string,
+
+    published: PropTypes.shape({
+      from: PropTypes.string,
+      to: PropTypes.string,
+    }),
+
+    title: PropTypes.string,
+  }),
   handleInput: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   headerText: PropTypes.string.isRequired,