Merge pull request #285 from os2display/feature/screen-save-fix

feature/screen save fix

Author: tuj

.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

@@ -4,9 +4,14 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#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
 - [#284](https://github.com/os2display/display-admin-client/pull/284)
   - Fixed spacer calculations for previews.
-  - Added border to preview container.
+  - Added border to preview container
 - [#283](https://github.com/os2display/display-admin-client/pull/283)
   - Fixed preview issues. 
 - [#275](https://github.com/os2display/display-admin-client/pull/275)

README.md

@@ -32,15 +32,10 @@ setting are required than what is default.
 cp public/example-access-config.json public/access-config.json
 ```
 
-### Up the containers
+### Up the containers and install npm packages
 
 ```shell
 docker compose up --detach
-```
-
-### Install npm packages
-
-```shell
 docker compose run --rm node yarn install
 ```
 

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 { React, useState, useEffect } from "react";
-import PropTypes from "prop-types";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SelectPlaylistColumns } from "../playlist/playlists-columns";
 import PlaylistsDropdown from "../util/forms/multiselect-dropdown/playlists/playlists-dropdown";
@@ -8,87 +7,48 @@ import FormCheckbox from "../util/forms/form-checkbox";
 import {
   useGetV2PlaylistsByIdSlidesQuery,
   useGetV2PlaylistsQuery,
-  useGetV2ScreensByIdRegionsAndRegionIdPlaylistsQuery,
 } from "../../redux/api/api.generated.ts";
 import ScreenGanttChart from "../screen/util/screen-gantt-chart";
 
 /**
  * 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,
-  screenId,
+  handleChange,
+  removeFromList,
   regionId,
-  regionIdForInitializeCallback,
 }) {
   const { t } = useTranslation("common", {
     keyPrefix: "playlist-drag-and-drop",
   });
-
   const [searchText, setSearchText] = useState();
-  const [selectedData, setSelectedData] = useState([]);
-  const [totalItems, setTotalItems] = useState(0);
   const [page, setPage] = useState(1);
   const [onlySharedPlaylists, setOnlySharedPlaylists] = useState(false);
-  const { data: selectedPlaylistsByRegion } =
-    useGetV2ScreensByIdRegionsAndRegionIdPlaylistsQuery({
-      id: screenId,
-      regionId,
-      page,
-      itemsPerPage: 10,
-    });
 
-  // Get method
-  const { data } = useGetV2PlaylistsQuery({
+  const {
+    data: {
+      "hydra:member": playlists = null,
+      "hydra:totalItems": totalItems = 0,
+    } = {},
+  } = useGetV2PlaylistsQuery({
     isCampaign: false,
     title: searchText,
     itemsPerPage: 30,
     order: { createdAt: "desc" },
     sharedWithMe: onlySharedPlaylists,
   });
 
-  /**
-   * @param {object} regionsAndPlaylists This method initializes playlists, so
-   *   the initial formstate object in screen manager is not empty
-   */
-  function callbackToinitializePlaylists(regionsAndPlaylists) {
-    handleChange({
-      target: {
-        id: regionIdForInitializeCallback,
-        value: regionsAndPlaylists["hydra:member"].map(
-          ({ playlist }) => playlist
-        ),
-      },
-    });
-  }
-
-  /** Set loaded data into form state. */
-  useEffect(() => {
-    if (selectedPlaylistsByRegion) {
-      setTotalItems(selectedPlaylistsByRegion["hydra:totalItems"]);
-      const newPlaylists = selectedPlaylistsByRegion["hydra:member"].map(
-        ({ playlist, weight }) => ({ ...playlist, weight })
-      );
-
-      const selected = [...selectedData, ...newPlaylists].sort(
-        (a, b) => a.weight - b.weight
-      );
-
-      setSelectedData(selected);
-      callbackToinitializePlaylists(selectedPlaylistsByRegion);
-    }
-  }, [selectedPlaylistsByRegion]);
-
   /**
    * Fetches data for the multi component
    *
@@ -98,39 +58,6 @@ function PlaylistDragAndDrop({
     setSearchText(filter);
   };
 
-  /**
-   * Removes playlist from list of playlists, and closes modal.
-   *
-   * @param {object} removeItem - Item to remove
-   */
-  const removeFromList = (removeItem) => {
-    const indexOfItemToRemove = selectedData
-      .map((item) => {
-        return item["@id"];
-      })
-      .indexOf(removeItem);
-    const selectedDataCopy = [...selectedData];
-    selectedDataCopy.splice(indexOfItemToRemove, 1);
-    setSelectedData(selectedDataCopy);
-
-    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.
-   */
-  const handleAdd = ({ target }) => {
-    const { value, id } = target;
-    setSelectedData(value);
-    handleChange({
-      target: { id, value },
-    });
-  };
-
   const columns = SelectPlaylistColumns({
     handleDelete: removeFromList,
     apiCall: useGetV2PlaylistsByIdSlidesQuery,
@@ -140,53 +67,43 @@ function PlaylistDragAndDrop({
     infoModalTitle: t("select-playlists-table.info-modal.slides"),
   });
 
+  if (!playlists) return null;
+
   return (
     <>
-      {data && data["hydra:member"] && (
-        <>
-          <FormCheckbox
-            label={t("show-only-shared")}
-            onChange={() => {
-              setOnlySharedPlaylists(!onlySharedPlaylists);
-            }}
-            value={onlySharedPlaylists}
-            name="show-only-shared"
-          />
-          <div className="mb-3">
-            <PlaylistsDropdown
-              filterCallback={onFilter}
-              name={name}
-              handlePlaylistSelection={handleAdd}
-              selected={selectedData}
-              data={data["hydra:member"]}
-            />
-          </div>
-          {selectedData.length > 0 && (
-            <DragAndDropTable
-              columns={columns}
-              onDropped={handleChange}
-              name={name}
-              data={selectedData}
-              callback={() => setPage(page + 1)}
-              label={t("more-playlists")}
-              totalItems={totalItems}
-            />
-          )}
-          {selectedData?.length > 0 && (
-            <ScreenGanttChart playlists={selectedData} id={regionId} />
-          )}
-        </>
+      <FormCheckbox
+        label={t("show-only-shared")}
+        onChange={() => {
+          setOnlySharedPlaylists(!onlySharedPlaylists);
+        }}
+        value={onlySharedPlaylists}
+        name="show-only-shared"
+      />
+      <div className="mb-3">
+        <PlaylistsDropdown
+          filterCallback={onFilter}
+          name={name}
+          handlePlaylistSelection={handleChange}
+          selected={selectedPlaylists}
+          data={playlists}
+        />
+      </div>
+      {selectedPlaylists.length > 0 && (
+        <DragAndDropTable
+          columns={columns}
+          onDropped={handleChange}
+          name={name}
+          data={selectedPlaylists}
+          callback={() => setPage(page + 1)}
+          label={t("more-playlists")}
+          totalItems={totalItems}
+        />
+      )}
+      {selectedPlaylists?.length > 0 && (
+        <ScreenGanttChart playlists={selectedPlaylists} id={regionId} />
       )}
     </>
   );
 }
 
-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;