Merge branch 'develop' into feature/remove-array-spread

Author: tuj

.docker/vhost.conf

@@ -8,4 +8,14 @@ server {
         proxy_set_header   Host $http_host;
         proxy_pass         http://node:3000;
     }
+
+    location /ws {
+      proxy_set_header X-Forwarded-For $remote_addr;
+      proxy_set_header Host $http_host;
+      proxy_pass http://node:3000;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "Upgrade";
+      proxy_set_header X-Real-IP $remote_addr;
+    }
 }

.eslintrc

@@ -13,6 +13,7 @@
     "allowImportExportEverywhere": true
   },
   "rules": {
+    "react/require-default-props": "off",
     "react/jsx-filename-extension": [
       "warn",
       {

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 
 - Removed array spread.
+- Fixed HMR setup.
+- Upgraded @fortawesome/react-fontawesome, react-quill, react-toastify.
+- Removed unused react-dayjs.
+- Remove default props from the project.
 
 - [#244](https://github.com/aroskanalen/display-admin-client/pull/1)
   - Migrate from Cypress to playwright

package.json

@@ -7,9 +7,10 @@
     "@amcharts/amcharts4": "^4.10.21",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@hello-pangea/dnd": "^16.0.0",
     "@paciolan/remote-component": "^2.11.0",
+    "@popperjs/core": "^2.11.8",
     "@reduxjs/toolkit": "^1.6.1",
     "@vitejs/plugin-react": "^4.3.0",
     "bootstrap": "^5.0.2",
@@ -26,20 +27,19 @@
     "react": "^18.2.0",
     "react-bootstrap": "^1.6.1",
     "react-color-palette": "^6.1.0",
-    "react-dayjs": "^0.3.2",
     "react-dom": "^18.2.0",
     "react-dropzone": "^11.4.2",
     "react-i18next": "^11.16.1",
     "react-images-uploading": "^3.1.2",
     "react-multi-select-component": "^4.1.12",
     "react-paginate": "^8.1.3",
-    "react-quill": "^1.3.5",
+    "react-quill": "^2.0.0",
     "react-redux": "^7.2.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^6.2.1",
     "react-select": "^5.2.2",
     "react-table": "^7.7.0",
-    "react-toastify": "^8.1.0",
+    "react-toastify": "^10.0.0",
     "rrule": "^2.7.2",
     "typescript": "^4.4.2",
     "ulid": "^2.3.0",
@@ -75,14 +75,14 @@
     ]
   },
   "devDependencies": {
-    "eslint": "7.32.0",
-    "eslint-plugin-jsdoc": "^35.4.3",
     "@playwright/test": "^1.44.1",
     "@types/node": "^20.12.13",
     "babel-eslint": "^10.1.0",
+    "eslint": "7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "8.3.0",
     "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",

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

@@ -23,12 +23,12 @@ import RadioButtons from "../util/forms/radio-buttons";
  * @returns {object} The user form.
  */
 function ActivationCodeForm({
-  activationCode,
   handleInput,
   handleSubmit,
   headerText,
-  isLoading,
-  loadingMessage,
+  isLoading = false,
+  loadingMessage = "",
+  activationCode,
 }) {
   const { t } = useTranslation("common", { keyPrefix: "activation-code-form" });
   const navigate = useNavigate();
@@ -44,8 +44,6 @@ function ActivationCodeForm({
     },
   ];
 
-  // 123
-
   return (
     <>
       <LoadingComponent isLoading={isLoading} loadingMessage={loadingMessage} />
@@ -107,20 +105,11 @@ function ActivationCodeForm({
   );
 }
 
-ActivationCodeForm.defaultProps = {
-  isLoading: false,
-  loadingMessage: "",
-  activationCode: PropTypes.shape({
-    displayName: "",
-    role: "",
-  }),
-};
-
 ActivationCodeForm.propTypes = {
   activationCode: PropTypes.shape({
     displayName: PropTypes.string.isRequired,
     role: PropTypes.string.isRequired,
-  }),
+  }).isRequired,
   handleInput: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   headerText: PropTypes.string.isRequired,

src/components/groups/group-form.jsx

@@ -22,12 +22,15 @@ import FormInput from "../util/forms/form-input";
  * @returns {object} The group form.
  */
 function GroupForm({
-  group,
   handleInput,
   handleSubmit,
   headerText,
-  isLoading,
-  loadingMessage,
+  isLoading = false,
+  loadingMessage = "",
+  group = {
+    description: "",
+    title: "",
+  },
 }) {
   const { t } = useTranslation("common");
   const navigate = useNavigate();
@@ -82,15 +85,6 @@ function GroupForm({
   );
 }
 
-GroupForm.defaultProps = {
-  isLoading: false,
-  loadingMessage: "",
-  group: PropTypes.shape({
-    description: "",
-    title: "",
-  }),
-};
-
 GroupForm.propTypes = {
   group: PropTypes.shape({
     description: PropTypes.string.isRequired,

src/components/media/image-list.jsx

@@ -14,7 +14,7 @@ import ListLoading from "../util/loading-component/list-loading";
  * @param {boolean} props.multiple Whether the image list allows for multiselect
  * @returns {object} The image list page.
  */
-function ImageList({ media, multiple }) {
+function ImageList({ media = [], multiple }) {
   const { selected, setSelected } = useModal();
 
   /**
@@ -76,10 +76,6 @@ function ImageList({ media, multiple }) {
   );
 }
 
-ImageList.defaultProps = {
-  media: [],
-};
-
 ImageList.propTypes = {
   multiple: PropTypes.bool.isRequired,
   media: PropTypes.arrayOf(

src/components/media/media-form.jsx

@@ -28,8 +28,8 @@ function MediaForm({
   handleSubmit,
   headerText,
   errors,
-  isLoading,
-  loadingMessage,
+  isLoading = false,
+  loadingMessage = "",
 }) {
   const { t } = useTranslation("common");
   const navigate = useNavigate();
@@ -84,11 +84,6 @@ function MediaForm({
   );
 }
 
-MediaForm.defaultProps = {
-  isLoading: false,
-  loadingMessage: "",
-};
-
 MediaForm.propTypes = {
   media: PropTypes.arrayOf(
     PropTypes.shape({

src/components/media/media-list.jsx

@@ -30,7 +30,7 @@ import "./media-list.scss";
  * @param {boolean} props.multiple Whether the image list allows for multiselect
  * @returns {object} The media list.
  */
-function MediaList({ fromModal, multiple }) {
+function MediaList({ fromModal = false, multiple = true }) {
   // Translations
   const { t } = useTranslation("common", { keyPrefix: "media-list" });
   // Selected data
@@ -237,11 +237,6 @@ function MediaList({ fromModal, multiple }) {
   );
 }
 
-MediaList.defaultProps = {
-  fromModal: false,
-  multiple: true,
-};
-
 MediaList.propTypes = {
   fromModal: PropTypes.bool,
   multiple: PropTypes.bool,

src/components/playlist/campaign-form.jsx

@@ -15,7 +15,7 @@ import SelectGroupsTable from "../util/multi-and-table/select-groups-table";
  * @param {Function} props.handleInput Handles form input.
  * @returns {object} The campaign form.
  */
-function CampaignForm({ campaign, handleInput }) {
+function CampaignForm({ campaign = null, handleInput }) {
   const { t } = useTranslation("common");
 
   return (
@@ -46,10 +46,6 @@ function CampaignForm({ campaign, handleInput }) {
   );
 }
 
-CampaignForm.defaultProps = {
-  campaign: null,
-};
-
 CampaignForm.propTypes = {
   campaign: PropTypes.shape({
     "@id": PropTypes.string,

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

@@ -27,16 +27,16 @@ import LoadingComponent from "../util/loading-component/loading-component";
  * @returns {object} The form shared by campaigns and playlists.
  */
 function PlaylistCampaignForm({
-  playlist,
   handleInput,
   handleSubmit,
   headerText,
-  slideId,
-  isLoading,
-  loadingMessage,
-  isCampaign,
   location,
   children,
+  slideId = "",
+  isLoading = false,
+  loadingMessage = "",
+  isCampaign = false,
+  playlist = null,
 }) {
   const { t } = useTranslation("common");
   const navigate = useNavigate();
@@ -154,14 +154,6 @@ function PlaylistCampaignForm({
   );
 }
 
-PlaylistCampaignForm.defaultProps = {
-  slideId: "",
-  isLoading: false,
-  loadingMessage: "",
-  isCampaign: false,
-  playlist: null,
-};
-
 PlaylistCampaignForm.propTypes = {
   playlist: PropTypes.shape({
     description: PropTypes.string,

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

@@ -33,13 +33,13 @@ import {
  * @returns {object} The shared manager, shared by campaign and playlists.
  */
 function PlaylistCampaignManager({
-  initialState,
   saveMethod,
-  id,
-  isLoading,
-  loadingError,
-  slideId,
   location,
+  id = null,
+  isLoading = false,
+  loadingError = null,
+  initialState = null,
+  slideId = "",
 }) {
   const dispatch = useDispatch();
   const { t } = useTranslation("common", {
@@ -361,14 +361,6 @@ function PlaylistCampaignManager({
   );
 }
 
-PlaylistCampaignManager.defaultProps = {
-  id: null,
-  isLoading: false,
-  loadingError: null,
-  initialState: null,
-  slideId: "",
-};
-
 PlaylistCampaignManager.propTypes = {
   initialState: PropTypes.shape({
     feed: PropTypes.shape({

src/components/playlist/playlist-form.jsx

@@ -18,7 +18,11 @@ import TenantsDropdown from "../util/forms/multiselect-dropdown/tenants/tenants-
  *   shared info
  * @returns {object} The playlist form.
  */
-function PlaylistForm({ playlist, handleInput, highlightSharedSection }) {
+function PlaylistForm({
+  handleInput,
+  highlightSharedSection = false,
+  playlist = null,
+}) {
   const { t } = useTranslation("common");
   const context = useContext(UserContext);
 
@@ -62,11 +66,6 @@ function PlaylistForm({ playlist, handleInput, highlightSharedSection }) {
   );
 }
 
-PlaylistForm.defaultProps = {
-  highlightSharedSection: false,
-  playlist: null,
-};
-
 PlaylistForm.propTypes = {
   playlist: PropTypes.shape({
     schedules: PropTypes.arrayOf(

src/components/screen/screen-form.jsx

@@ -37,15 +37,15 @@ import "./screen-form.scss";
  * @returns {object} The screen form.
  */
 function ScreenForm({
-  screen,
   handleInput,
   handleSubmit,
   headerText,
-  groupId,
-  isLoading,
-  loadingMessage,
   orientationOptions,
   resolutionOptions,
+  groupId = "",
+  isLoading = false,
+  loadingMessage = "",
+  screen = null,
 }) {
   const { t } = useTranslation("common", { keyPrefix: "screen-form" });
   const navigate = useNavigate();
@@ -331,13 +331,6 @@ function ScreenForm({
   );
 }
 
-ScreenForm.defaultProps = {
-  groupId: "",
-  isLoading: false,
-  loadingMessage: "",
-  screen: null,
-};
-
 ScreenForm.propTypes = {
   screen: PropTypes.shape({
     resolution: PropTypes.string,