coding standards

Author: Sine Jespersen

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "plugins": ["react", "prettier", "only-warn"],
+  "plugins": ["react", "prettier"],
   "extends": [
     "airbnb",
     "prettier",
@@ -18,7 +18,9 @@
     "allowImportExportEverywhere": true
   },
   "rules": {
+    "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
+     "react/prop-types": "off",
     "react/jsx-filename-extension": [
       "warn",
       {

CHANGELOG.md

@@ -7,6 +7,8 @@ All notable changes to this project will be documented in this file.
 - [#285](https://github.com/os2display/display-admin-client/pull/285)
   - Rewrite screen playlists get to use promises
   - Fix save screen and go to list
+  - Disable eslint for proptypes
+  - Disable eslint for react in scope
 - [#283](https://github.com/os2display/display-admin-client/pull/283)
   - Fixed preview issues. 
 - [#275](https://github.com/os2display/display-admin-client/pull/275)

package.json

@@ -89,7 +89,6 @@
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsdoc": "^35.4.3",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-only-warn": "^1.0.2",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",

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

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { SelectPlaylistColumns } from "../playlist/playlists-columns";
 import PlaylistsDropdown from "../util/forms/multiselect-dropdown/playlists/playlists-dropdown";
@@ -10,24 +9,23 @@ import {
   useGetV2PlaylistsQuery,
 } from "../../redux/api/api.generated.ts";
 import ScreenGanttChart from "../screen/util/screen-gantt-chart";
-
+// eslint-disable-next-line react/prop-types
 /**
  * A drag and drop component for playlists.
  *
  * @param {string} props The props.
- * @param {Function} props.handleChange - The callback when something changed
- * @param {string} props.name - The id of the form element
- * @param {string} props.screenId - The screen id for get request
+ * @param {Array} props.selectedPlaylists - The selected playlists
+ * @param {string} props.name - The name
+ * @param {Function} props.handleChange - The callback when something is added
  * @param {string} props.regionId - The region id for get request
  * @param {string} props.regionIdForInitializeCallback - The region id to add
  *   regions to formstateobject.
  * @returns {object} A drag and drop component
  */
 function PlaylistDragAndDrop({
-  handleChange,
   selectedPlaylists,
   name,
-  handleAdd,
+  handleChange,
   removeFromList,
   regionId,
 }) {
@@ -85,7 +83,7 @@ function PlaylistDragAndDrop({
         <PlaylistsDropdown
           filterCallback={onFilter}
           name={name}
-          handlePlaylistSelection={handleAdd}
+          handlePlaylistSelection={handleChange}
           selected={selectedPlaylists}
           data={playlists}
         />
@@ -108,12 +106,4 @@ function PlaylistDragAndDrop({
   );
 }
 
-PlaylistDragAndDrop.propTypes = {
-  name: PropTypes.string.isRequired,
-  screenId: PropTypes.string.isRequired,
-  regionIdForInitializeCallback: PropTypes.string.isRequired,
-  regionId: PropTypes.string.isRequired,
-  handleChange: PropTypes.func.isRequired,
-};
-
 export default PlaylistDragAndDrop;

src/components/screen/screen-form.jsx

@@ -1,8 +1,7 @@
-import { React, useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Button, Form, Spinner, Alert, Col, 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";
@@ -31,15 +30,15 @@ import { displayError } from "../util/list/toast-component/display-toast";
  * @param {object} props The props.
  * @param {object} props.screen Screen The screen object to modify in the form.
  * @param {Function} props.handleInput HandleInput Handles form input.
- * @param {Function} props.handleSubmit HandleSubmit Handles form submit.
  * @param {string} props.headerText HeaderText Headline text.
  * @param {string} props.groupId The group id.
  * @param {boolean} props.isLoading Indicator of whether the form is loading
  * @param {string} props.loadingMessage The loading message for the spinner
  * @param {object} props.orientationOptions The options for the orientation dropdown
  * @param {object} props.resolutionOptions The options for the resolution dropdown
- * @param props.handleSubmitWithoutRedirect
- * @param props.handleSubmitWithRedirect
+ * @param {Function} props.handleSubmitWithoutRedirect Handles form submit
+ *   without redirect.
+ * @param {Function} props.handleSubmitWithRedirect Handles form submit with redirect.
  * @returns {object} The screen form.
  */
 function ScreenForm({
@@ -87,7 +86,7 @@ function ScreenForm({
   /**
    * Check if published is set
    *
-   * @param redirect
+   * @param {boolean} redirect Whether to redirect after submit
    */
   const checkInputsHandleSubmit = (redirect) => {
     setLayoutError(false);
@@ -416,40 +415,4 @@ function ScreenForm({
   );
 }
 
-ScreenForm.propTypes = {
-  screen: PropTypes.shape({
-    resolution: PropTypes.string,
-    "@id": PropTypes.string,
-    description: PropTypes.string,
-    orientation: PropTypes.string,
-    enableColorSchemeChange: PropTypes.bool,
-    layout: PropTypes.string,
-    location: PropTypes.string,
-    regions: PropTypes.arrayOf(
-      PropTypes.shape({
-        "@id": PropTypes.string,
-      })
-    ),
-    screenUser: PropTypes.string,
-    size: PropTypes.string,
-    title: PropTypes.string,
-    status: PropTypes.shape({}),
-    playlists: PropTypes.arrayOf(
-      PropTypes.shape({ name: PropTypes.string, id: PropTypes.number })
-    ),
-  }),
-  handleInput: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  headerText: PropTypes.string.isRequired,
-  groupId: PropTypes.string,
-  isLoading: PropTypes.bool,
-  loadingMessage: PropTypes.string,
-  orientationOptions: PropTypes.arrayOf(
-    PropTypes.shape({ title: PropTypes.string, id: PropTypes.string })
-  ).isRequired,
-  resolutionOptions: PropTypes.arrayOf(
-    PropTypes.shape({ title: PropTypes.string, id: PropTypes.string })
-  ).isRequired,
-};
-
 export default ScreenForm;

src/components/screen/util/grid-generation-and-select.jsx

@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 import { Tabs, Tab, Alert } from "react-bootstrap";
 import { createGridArea, createGrid } from "os2display-grid-generator";
 import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
 import idFromUrl from "../../util/helpers/id-from-url";
 import PlaylistDragAndDrop from "../../playlist-drag-and-drop/playlist-drag-and-drop";
-import { useDispatch } from "react-redux";
 import { api } from "../../../redux/api/api.generated.ts";
 import "./grid.scss";
 
@@ -40,16 +40,17 @@ function GridGenerationAndSelect({
   };
 
   /**
-   * @param root0
-   * @param root0.value
-   * @param root0.id
+   * @param {object} props The props
+   * @param {Array} props.value The value
+   * @param {string} props.id The id
+   * @returns {Array} Mapped data
    */
-  function mapData({ value, id }) {
+  function mapData({ value: inputPlaylists, id }) {
     // Map to add region id to incoming data.
-    const localTarget = value.map((value) => {
+    const localTarget = inputPlaylists.map((playlist) => {
       return {
         region: idFromUrl(id),
-        ...value,
+        ...playlist,
       };
     });
     // A copy, to be able to remove items.
@@ -63,7 +64,7 @@ function GridGenerationAndSelect({
     const selectedWithoutRegion = [];
 
     // Checks if an element has been removed from the list
-    if (value.length < regionPlaylists.length) {
+    if (inputPlaylists.length < regionPlaylists.length) {
       selectedPlaylists.forEach((playlist) => {
         if (!regionPlaylists.includes(playlist.region)) {
           selectedWithoutRegion.push(playlist);
@@ -78,10 +79,12 @@ function GridGenerationAndSelect({
       ...localTarget,
       ...selectedPlaylistsCopy,
     ].filter(
-      (value, index, self) =>
+      (playlist, index, self) =>
         index ===
         self.findIndex(
-          (t) => t["@id"] === value["@id"] && t.region === value.region
+          (secondPlaylist) =>
+            secondPlaylist["@id"] === playlist["@id"] &&
+            secondPlaylist.region === playlist.region
         )
     );
 
@@ -151,14 +154,17 @@ function GridGenerationAndSelect({
   /**
    * Removes playlist from list of playlists, and closes modal.
    *
-   * @param {object} inputPlaylist - inputPlaylist to remove
-   * @param {object} inputRegion  - inputRegion to remove from
+   * @param {object} inputPlaylist - InputPlaylist to remove
+   * @param {object} inputRegion - InputRegion to remove from
    */
   const removeFromList = (inputPlaylist, inputRegion) => {
-    const indexOfItemToRemove =selectedPlaylists.findIndex(({"@id": id, region}) => { return region === inputRegion && id === inputPlaylist });
+    const indexOfItemToRemove = selectedPlaylists.findIndex(
+      ({ "@id": id, region }) => {
+        return region === inputRegion && id === inputPlaylist;
+      }
+    );
     const selectedPlaylistsCopy = [...selectedPlaylists];
     selectedPlaylistsCopy.splice(indexOfItemToRemove, 1);
-    console.log(selectedPlaylistsCopy,"selectedPlaylistsCopy")
     setSelectedPlaylists(selectedPlaylistsCopy);
   };
 
@@ -201,7 +207,7 @@ function GridGenerationAndSelect({
                   >
                     <PlaylistDragAndDrop
                       id="playlist_drag_and_drop"
-                      handleAdd={handleChange}
+                      handleChange={handleChange}
                       removeFromList={removeFromList}
                       name={data["@id"]}
                       regionIdForInitializeCallback={data["@id"]}

src/components/util/select-column-hoc.jsx

@@ -51,7 +51,7 @@ function SelectColumnHoc(columns, omitStandardColumns) {
           <Button
             variant="danger"
             className="remove-from-list"
-            onClick={() => handleDelete(id,region)}
+            onClick={() => handleDelete(id, region)}
           >
             {t("delete-button")}
           </Button>