JS Array shallow copy && JS polling implementation && one of using Mobx pitfalls

Well, these should be three separate topics but I just want to do a quick sum-up of what I learned today.

Shallow Copy

shallow copy only copy one layer of the original array, what I mean by one layer is like that:

const oriArr = ["1","2","3"];
const copyArr = oriArr.slice(); //shallow copy whole arr
copyArr.push("4");
console.log(oriArr); // "1","2","3"
console.log(copyArr); // "1","2","3","4"

From the simple example, we can conclude that shallow copy can be used as fast copy an array without changing the original array’s value.

However, if they are multidimensional arrays, life will be harder:

//I want to push 2 to the 0 element
const oriArr = [["1"],["2"],["3"]];
const copyArr = oriArr.slice(); //shallow copy whole arr
copyArr[0].push("4");
console.log(oriArr); // ["1","4"],["2"],["3"]
console.log(copyArr); // ["1","4"],["2"],["3"]

Array.slice() is not working at all for multidimensional arrays!!!

In React, I wouldn’t deal with simple value arrays. They are object arrays (both one or multidimensional arrays). I use lots of map functions to extract multidimensional arrays values and put them where they should be(? maybe in the future I can have more ways). I actually not solve the problem here, just give some thoughts: make multidimensional arrays to one-dimensional arrays and then re-structure them whatever you like.

JS polling implementation

User story1: As a user, I want to see my image list being updated when an image creation finish notification toast is being displayed.

User story2: As a user, I want to see the notification history when I click the notification button so that I can see my notifications.

I have already implemented the notification part using JS polling by using setInterval method

In the NotificationToast.tsx file, I use the loadNotification function to retrieve all the notifications from db and store them into a local variable called note. It is worth to note that the notification will be deleted once it has been displayed on the frontend.

// for storing the notifications locally so that the user can see the notification history
let result = new Map<string, any>();
export let note = observable({notifications:result});
// for alert style
let style:string = "";
export let styling = observable({addStyle:style});
function NotificationToast(userId:string, images:any) {
    loadNotification(userId);
    images.injectImageList(userId);
    setInterval(() => {
          loadNotification(userId);
          images.injectImageList(userId);
    },10000)
}
function toastifyNotifications(note:any) {
    toast.success(note.message, { containerId: "B" });
}
function loadNotification(userId:string) {
  const results = somePromisewithUserId;
  if(results) {
    result.then((res:any) => { 
      if(res.data){
         for(const note of res.data.group) {
           toastifyNotification(note);
           note.notifications.set(note); 
           // store locally for checking history
         }
           styling.addStyle="alert";
      }
    }) 
   .catch((error: any) => {
      console.log(error);
    });
  }
}
export default NotificationToast;