Merge pull request #340 from os2display/feature/reintroduce-lodash

Reintroduce lodash

Author: tuj

CHANGELOG.md

@@ -25,7 +25,6 @@ All notable changes to this project will be documented in this file.
 - Fix data fetching bug + tests
 - Refactored screen layout commands.
 - Moved list components (search and checkboxes) around.
-- Replaced lodash functions with native ones.
 - Aligned environment variable names.
 - Aligned with v. 2.6.0.
 

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

@@ -16,6 +16,7 @@ import {
   usePutV2PlaylistsByIdMutation,
   usePostV2PlaylistsMutation,
 } from "../../../shared/redux/enhanced-api.ts";
+import { set } from "lodash/object";
 
 /**
  * The shared manager component.
@@ -280,7 +281,7 @@ function PlaylistCampaignManager({
    */
   const handleInput = ({ target }) => {
     const localFormStateObject = { ...formStateObject };
-    localFormStateObject[target.id] = target.value;
+    set(localFormStateObject, target.id, target.value);
     setFormStateObject(localFormStateObject);
   };
 

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

@@ -11,6 +11,7 @@ import {
   displayError,
 } from "../util/list/toast-component/display-toast";
 import idFromUrl from "../util/helpers/id-from-url";
+import { set } from "lodash/object";
 
 /**
  * The screen manager component.
@@ -95,7 +96,7 @@ function ScreenManager({
   const handleInput = ({ target }) => {
     let localFormStateObject = { ...formStateObject };
     localFormStateObject = JSON.parse(JSON.stringify(localFormStateObject));
-    localFormStateObject[target.id] = target.value;
+    set(localFormStateObject, target.id, target.value);
     setFormStateObject(localFormStateObject);
   };
 

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

@@ -2,6 +2,7 @@ import { Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import FileSelector from "../file-selector";
 import FormInput from "../../../util/forms/form-input";
+import { set } from "lodash/object";
 
 /**
  * Contact form.
@@ -27,7 +28,7 @@ function ContactForm({
    */
   const onInput = ({ target }) => {
     const localContact = { ...contact };
-    localContact[target.name] = target.value;
+    set(localContact, target.name, target.value);
     onChange(localContact);
   };
 

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

@@ -12,6 +12,7 @@ import ContentForm from "./content-form";
 import MultiselectFromEndpoint from "./multiselect-from-endpoint";
 import PosterSelectorV1 from "./poster/poster-selector-v1";
 import PosterSelectorV2 from "./poster/poster-selector-v2";
+import { set } from "lodash/object";
 
 /**
  * Feed selector.
@@ -99,12 +100,12 @@ function FeedSelector({
     const configuration = { ...value.configuration };
 
     if (target !== null) {
-      configuration[target.id] = target.value;
+      set(configuration, target.id, target.value);
     }
 
     if (targets !== null) {
       targets.forEach(({ id, value: targetValue }) => {
-        configuration[id] = targetValue;
+        set(configuration, id, targetValue);
       });
     }
 

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

@@ -19,6 +19,7 @@ import {
 } from "../util/list/toast-component/display-toast";
 import idFromUrl from "../util/helpers/id-from-url";
 import localStorageKeys from "../util/local-storage-keys";
+import { get, set } from "lodash/object";
 
 /**
  * The slide manager component.
@@ -153,7 +154,7 @@ function SlideManager({
    */
   const handleInput = ({ target }) => {
     const localFormStateObject = { ...formStateObject };
-    localFormStateObject[target.id] = target.value;
+    set(localFormStateObject, target.id, target.value);
     setFormStateObject(localFormStateObject);
   };
 
@@ -206,7 +207,7 @@ function SlideManager({
     const value =
       target.type === "number" ? target.valueAsNumber : target.value;
     const localFormStateObject = { ...formStateObject };
-    localFormStateObject.content[target.id] = value;
+    set(localFormStateObject.content, target.id, value);
     setFormStateObject(localFormStateObject);
   };
 
@@ -351,12 +352,12 @@ function SlideManager({
           // It is an already added temp file.
           if (entry.tempId) {
             newField.push(entry.tempId);
-            localMediaData[entry.tempId] = entry;
+            set(localMediaData, entry.tempId, entry);
           }
           // It is a new temp file.
           else {
             if (!Array.isArray(localFormStateObject.content[fieldId])) {
-              localFormStateObject.content[fieldId] = [];
+              set(localFormStateObject.content, fieldId, []);
             }
 
             // Create a tempId for the media.
@@ -367,7 +368,7 @@ function SlideManager({
 
             const newEntry = { ...entry };
             newEntry.tempId = tempId;
-            localMediaData[tempId] = newEntry;
+            set(localMediaData, tempId, newEntry);
           }
         }
         // Previously selected file.
@@ -381,16 +382,18 @@ function SlideManager({
           if (
             !Object.prototype.hasOwnProperty.call(localMediaData, entry["@id"])
           ) {
-            localMediaData[entry["@id"]] = entry;
+            set(localMediaData, entry["@id"], entry);
 
             localFormStateObject.media.push(entry["@id"]);
           }
         }
       });
     }
 
-    localFormStateObject.content[fieldId] = newField;
-    localFormStateObject.media = [...new Set([...localFormStateObject.media])];
+    set(localFormStateObject.content, fieldId, newField);
+    set(localFormStateObject, "media", [
+      ...new Set([...localFormStateObject.media]),
+    ]);
 
     setFormStateObject(localFormStateObject);
     setMediaData(localMediaData);
@@ -402,7 +405,7 @@ function SlideManager({
 
     // Setup submittingMedia list.
     mediaFields.forEach((fieldName) => {
-      const fieldData = formStateObject.content[fieldName];
+      const fieldData = get(formStateObject.content, fieldName);
 
       if (fieldData) {
         if (Array.isArray(fieldData)) {
@@ -552,10 +555,14 @@ function SlideManager({
       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,
-        );
+      set(
+        newFormStateObject.content,
+        submittedMedia.fieldName,
+        get(newFormStateObject.content, submittedMedia.fieldName).map(
+          (mediaId) =>
+            mediaId === submittedMedia.tempId ? savedMediaData["@id"] : mediaId,
+        ),
+      );
 
       const newMediaData = { ...mediaData };
       newMediaData[savedMediaData["@id"]] = savedMediaData;

assets/admin/components/util/table/table-body.jsx

@@ -1,5 +1,6 @@
 import { Fragment } from "react";
 import useModal from "../../../context/modal-context/modal-context-hook";
+import { get } from "lodash/object";
 
 /**
  * @param {object} props The props.
@@ -22,7 +23,7 @@ function TableBody({ columns, data }) {
       return column.content(item);
     }
 
-    let cellData = item[column.path];
+    let cellData = get(item, column.path);
 
     if (column.dataFunction) {
       cellData = column.dataFunction(cellData);

assets/client/data-sync/pull-strategy.js

@@ -1,6 +1,7 @@
 import isPublished from "../util/isPublished";
 import logger from "../logger/logger";
 import ApiHelper from "./api-helper";
+import { cloneDeep } from "lodash";
 
 /**
  * PullStrategy.
@@ -135,7 +136,7 @@ class PullStrategy {
   async getSlidesForRegions(regions) {
     return new Promise((resolve, reject) => {
       const promises = [];
-      const regionData = structuredClone(regions);
+      const regionData = cloneDeep(regions);
 
       // @TODO: Fix eslint-raised issues.
       // eslint-disable-next-line guard-for-in,no-restricted-syntax
@@ -199,7 +200,7 @@ class PullStrategy {
       return;
     }
 
-    const newScreen = structuredClone(screen);
+    const newScreen = cloneDeep(screen);
 
     newScreen.hasActiveCampaign = false;
 
@@ -303,7 +304,7 @@ class PullStrategy {
         const dataEntrySlidesData = dataEntryPlaylist.slidesData;
 
         for (const slideKey of Object.keys(dataEntrySlidesData)) {
-          const slide = structuredClone(dataEntrySlidesData[slideKey]);
+          const slide = cloneDeep(dataEntrySlidesData[slideKey]);
 
           let previousSlide = null;
 
@@ -314,7 +315,7 @@ class PullStrategy {
             this.lastestScreenData.regionData[regionKey][playlistKey]
               .slidesData[slideKey]
           ) {
-            previousSlide = structuredClone(
+            previousSlide = cloneDeep(
               this.lastestScreenData.regionData[regionKey][playlistKey]
                 .slidesData[slideKey],
             );

assets/client/service/schedule-service.js

@@ -5,6 +5,7 @@ import isPublished from "../util/isPublished";
 import logger from "../logger/logger";
 import ClientConfigLoader from "../util/client-config-loader.js";
 import ScheduleUtils from "../util/schedule";
+import { cloneDeep } from "lodash";
 
 /**
  * ScheduleService.
@@ -213,7 +214,7 @@ class ScheduleService {
             return;
           }
 
-          const newSlide = structuredClone(slide);
+          const newSlide = cloneDeep(slide);
 
           // Execution id is the product of region, playlist and slide id, to ensure uniqueness in the client.
           const executionId = Md5(regionId + playlist["@id"] + slide["@id"]);

assets/tests/template/template-calendar.spec.js

@@ -10,11 +10,6 @@ const fixTime = async (page) => {
   await page.clock.install({ time: newDate });
 };
 
-const fixTimeToNow = async (page) => {
-  const newDate = new Date();
-  await page.clock.install({ time: newDate });
-};
-
 test("calendar-0-multiple-days: ui tests", async ({ page }) => {
   await fixTime(page);
 
@@ -236,7 +231,7 @@ test("calendar-0-single-booking: ui tests", async ({ page }) => {
 });
 
 test("calendar-1-single-booking: ui tests", async ({ page }) => {
-  await fixTimeToNow(page);
+  await fixTime(page);
   await page.goto("/template/calendar-1-single-booking");
   await expect(page.getByText("Ledigt")).toHaveCount(1);
   await expect(page.getByText("Ledigt")).toBeVisible();