Merge branch 'release/3.0.0' into feature/5453-tests-of-hook

Author: tuj

CHANGELOG.md

@@ -14,16 +14,18 @@ All notable changes to this project will be documented in this file.
 - Removed propTypes.
 - Upgraded redux-toolkit and how api slices are generated.
 - Fixed redux-toolkit cache handling.
-- Added Taskfile
+- Added Taskfile.
 - Added update command.
 - Added (Client) online-check to public.
 - Updated developer documentation.
-- Removed admin/access-config.json fetch
+- Removed admin/access-config.json fetch.
 - Aligned with v. 2.5.2.
 - Removed themes.
 - Added command to migrate config.json files.
 - Fix data fetching bug + tests
 - Refactored screen layout commands.
+- Moved list components (search and checkboxes) around.
+- Replaced lodash functions with native ones.
 
 ### NB! Prior to 3.x the project was split into separate repositories
 

assets/admin/app.scss

@@ -19,8 +19,6 @@ body {
   height: 100vh;
   height: -webkit-fill-available;
   max-height: 100vh;
-  //  overflow-x: auto;
-  //  overflow-y: hidden;  // TODO: Why was this added?
 }
 
 // To make multicomponent look like bootstrap for now
@@ -143,3 +141,10 @@ body {
   right: 0;
   margin: 2em;
 }
+
+.delete-search-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-color: var(--bs-border-color);
+  background-color: var(--bs-tertiary-bg);
+}

assets/admin/components/playlist/playlist-campaign-manager.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useLocation } from "react-router-dom";
-import set from "lodash.set";
 import dayjs from "dayjs";
 import { useDispatch } from "react-redux";
 import idFromUrl from "../util/helpers/id-from-url";
@@ -281,7 +280,7 @@ function PlaylistCampaignManager({
    */
   const handleInput = ({ target }) => {
     const localFormStateObject = { ...formStateObject };
-    set(localFormStateObject, target.id, target.value);
+    localFormStateObject[target.id] = target.value;
     setFormStateObject(localFormStateObject);
   };
 

assets/admin/components/screen/screen-manager.jsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import set from "lodash.set";
 import { useNavigate } from "react-router-dom";
 import {
   usePostV2ScreensMutation,
@@ -96,7 +95,7 @@ function ScreenManager({
   const handleInput = ({ target }) => {
     let localFormStateObject = { ...formStateObject };
     localFormStateObject = JSON.parse(JSON.stringify(localFormStateObject));
-    set(localFormStateObject, target.id, target.value);
+    localFormStateObject[target.id] = target.value;
     setFormStateObject(localFormStateObject);
   };
 

assets/admin/components/slide/content/contacts/contact-form.jsx

@@ -1,4 +1,3 @@
-import set from "lodash.set";
 import { Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import FileSelector from "../file-selector";
@@ -28,7 +27,7 @@ function ContactForm({
    */
   const onInput = ({ target }) => {
     const localContact = { ...contact };
-    set(localContact, target.name, target.value);
+    localContact[target.name] = target.value;
     onChange(localContact);
   };
 

assets/admin/components/slide/content/feed-selector.jsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Spinner } from "react-bootstrap";
 import { useDispatch } from "react-redux";
-import set from "lodash.set";
 import {
   enhancedApi,
   useGetV2FeedSourcesQuery,
@@ -100,12 +99,12 @@ function FeedSelector({
     const configuration = { ...value.configuration };
 
     if (target !== null) {
-      set(configuration, target.id, target.value);
+      configuration[target.id] = target.value;
     }
 
     if (targets !== null) {
       targets.forEach(({ id, value: targetValue }) => {
-        set(configuration, id, targetValue);
+        configuration[id] = targetValue;
       });
     }
 

assets/admin/components/slide/slide-manager.jsx

@@ -1,7 +1,5 @@
 import { useEffect, useState, useContext } from "react";
 import { useTranslation } from "react-i18next";
-import get from "lodash.get";
-import set from "lodash.set";
 import { ulid } from "ulid";
 import { useDispatch } from "react-redux";
 import dayjs from "dayjs";
@@ -155,7 +153,7 @@ function SlideManager({
    */
   const handleInput = ({ target }) => {
     const localFormStateObject = { ...formStateObject };
-    set(localFormStateObject, target.id, target.value);
+    localFormStateObject[target.id] = target.value;
     setFormStateObject(localFormStateObject);
   };
 
@@ -208,7 +206,7 @@ function SlideManager({
     const value =
       target.type === "number" ? target.valueAsNumber : target.value;
     const localFormStateObject = { ...formStateObject };
-    set(localFormStateObject.content, target.id, value);
+    localFormStateObject.content[target.id] = value;
     setFormStateObject(localFormStateObject);
   };
 
@@ -353,12 +351,12 @@ function SlideManager({
           // It is an already added temp file.
           if (entry.tempId) {
             newField.push(entry.tempId);
-            set(localMediaData, entry.tempId, entry);
+            localMediaData[entry.tempId] = entry;
           }
           // It is a new temp file.
           else {
             if (!Array.isArray(localFormStateObject.content[fieldId])) {
-              set(localFormStateObject.content, fieldId, []);
+              localFormStateObject.content[fieldId] = [];
             }
 
             // Create a tempId for the media.
@@ -369,7 +367,7 @@ function SlideManager({
 
             const newEntry = { ...entry };
             newEntry.tempId = tempId;
-            set(localMediaData, tempId, newEntry);
+            localMediaData[tempId] = newEntry;
           }
         }
         // Previously selected file.
@@ -383,18 +381,16 @@ function SlideManager({
           if (
             !Object.prototype.hasOwnProperty.call(localMediaData, entry["@id"])
           ) {
-            set(localMediaData, entry["@id"], entry);
+            localMediaData[entry["@id"]] = entry;
 
             localFormStateObject.media.push(entry["@id"]);
           }
         }
       });
     }
 
-    set(localFormStateObject.content, fieldId, newField);
-    set(localFormStateObject, "media", [
-      ...new Set([...localFormStateObject.media]),
-    ]);
+    localFormStateObject.content[fieldId] = newField;
+    localFormStateObject.media = [...new Set([...localFormStateObject.media])];
 
     setFormStateObject(localFormStateObject);
     setMediaData(localMediaData);
@@ -406,7 +402,7 @@ function SlideManager({
 
     // Setup submittingMedia list.
     mediaFields.forEach((fieldName) => {
-      const fieldData = get(formStateObject.content, fieldName);
+      const fieldData = formStateObject.content[fieldName];
 
       if (fieldData) {
         if (Array.isArray(fieldData)) {
@@ -548,33 +544,25 @@ function SlideManager({
 
   /** Submitted media is successful. */
   useEffect(() => {
-    if (submitting) {
-      if (isSaveMediaSuccess) {
-        const newSubmittingMedia = [...submittingMedia];
-        const submittedMedia = newSubmittingMedia.shift();
-
-        const newFormStateObject = { ...formStateObject };
-        newFormStateObject.media.push(savedMediaData["@id"]);
-
-        // Replace TEMP-- id with real id.
-        set(
-          newFormStateObject.content,
-          submittedMedia.fieldName,
-          get(newFormStateObject.content, submittedMedia.fieldName).map(
-            (mediaId) =>
-              mediaId === submittedMedia.tempId
-                ? savedMediaData["@id"]
-                : mediaId,
-          ),
+    if (submitting && isSaveMediaSuccess) {
+      const newSubmittingMedia = [...submittingMedia];
+      const submittedMedia = newSubmittingMedia.shift();
+
+      const newFormStateObject = { ...formStateObject };
+      newFormStateObject.media.push(savedMediaData["@id"]);
+
+      // Replace TEMP-- id with real id.
+      newFormStateObject.content[submittedMedia.fieldName] =
+        newFormStateObject.content[submittedMedia.fieldName].map((mediaId) =>
+          mediaId === submittedMedia.tempId ? savedMediaData["@id"] : mediaId,
         );
 
-        const newMediaData = { ...mediaData };
-        newMediaData[savedMediaData["@id"]] = savedMediaData;
-        setMediaData(newMediaData);
+      const newMediaData = { ...mediaData };
+      newMediaData[savedMediaData["@id"]] = savedMediaData;
+      setMediaData(newMediaData);
 
-        // Save new list.
-        setSubmittingMedia(newSubmittingMedia);
-      }
+      // Save the new list.
+      setSubmittingMedia(newSubmittingMedia);
     }
   }, [isSaveMediaSuccess]);