Making a change on a copy of a redux state also updates the actual state on redux store

I am seeing this behaviour where if i copy a redux state to a local variable and make a change to that variable it also updates my redux store without me using any kind of dispatching, here is my code:

// here is my action type inside my reducer 
case SET_USERS:
      return {
        ...state,
        users: action.payload,
      };

// and here i have a helper function to select a specific state and pass it to useSelector later on
export const getUsersSelector = (state: RootState) => {
  return state.app.users;
};

and i am accessing my state like this inside a custom hook useUsers i have

export const useUsers = () => {
   const users = useSelector(getUsersSelector);
   return {users}
}

and i am accessing my users value in another component using the useUsers hook:

const ListUsers = () => {
    const {users} = useUsers()
    //i make a copy of my users state
    const copyOfUsers = users
    
    //and update the copied variable
    copyOfUsers.push({name: 'John'})

    retunr (<View>{copyOfUsers.map((user)=><Text>{user.name}</Text>)}</View>)
}

the issue i am having is pushing a new item to my copyOfUsers variable also updates the users state inside the redux store, i dont know why this is happening and if its a normal behaviour, just wanted to know if this is a bug or intentional behaviour of redux? or how i can avoid it?

what is comma trailing in javascript

const army = {
    name: 'karan',
    memb : [
        {
            captain: 'suraj',
        },
        {
            rifleMan: 'sanjay'
        },
        {
            grenadier: 'yogesh'
        }
    ]
}

const { name , memb:[, cap]} = army

console.log("cap ", cap)

it gives log ” cap { rifleMan: ‘sanjay’ } “, can anyone please explain this concept and what it is called

How to select and pass array object to data setting of chart.js config?

I have a hidden input

<input type="hidden" id="0" value="10, 12">

and I am using

obj = [document.getElementById('0').value];

in a script tag to retrieve and use the value of the hidden input as the data array in the setting of Chart.js

const data = {
   labels: labels,
   datasets: [
      {
          backgroundColor: 'rgb(0, 255, 0)',
          data: obj,
          barThickness: 50
      }]
};

I have read Chart.js unable to display data and Treat getElementById return value as array but both those questions answers suggest converting the object to an array which I have done and it still doesn’t work.

Not able to pass array of data to chart.js in React Was a react problem and I tried adapting it but it didn’t work either.

The desired output I want can be seen in this code snippet here:

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
    <canvas height="100px" id="myChart"></canvas>
    <input type="hidden" id="0" value="10, 12">
    <script>
        obj = [document.getElementById('0').value];
        console.log(Array.isArray(obj), obj);
        const labels = ['Type 1', 'Type 2'];
        const data = {
            labels: labels,
            datasets: [
                {
                    backgroundColor: 'rgb(0, 255, 0)',
                    data: [10,12],
                    barThickness: 50
                }]
        };
        const config = {
            type: 'bar',
            data: data
        };
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
</body>

How can I achieve the same solution by somehow selecting the hidden input and passing that array as the data?

I have used console.log(); to confirm that the object is an array and that it has the correct value.

Attempts:

  1. I’ve tried surrounding the object with [] like so data: [obj], but then nothing gets displayed (probably because it’s already an array?)
  2. I’ve tried converting the array to a list as suggested here: Turn Array Into List With JavaScript but still nothing gets displayed.
  3. I’ve tried changing the values of the hidden input to be value="'10', '12'" but still nothing gets displayed.

Can I use Firebase for a fullcalendar js app and how?

guys! Hope you are good!

I am making a calendar app with fullcalendar and for my project, I want to create a login auth for it. Can I use any type of firebase tutorial or does it have to be specific because of the fullcalendar library? I am sorry I am new to fairly new to JavaScript and Firebase

Thank you very much!

I watched a lot of videos about it and found some but none of them was specific. I saw people use laravel which I could use as well but I want to specifically use firebase because of another project of mine I want to study firebase.

Distribute list of bits into given amount of slots

Given a bitfield like the following (numbers can only be 1 or 0):

const bits = [1, 1, 0, 1, 0, 0, 0, 1]

I want to produce a list of N average values where N is an arbitrary number.

In our example above, given N is 4, the result would be [1, 0.5, 0, 0.5].

I have been using the following code so far:

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

const averageNumbers = splitEvery(Math.floor(bits.length / N)).map(nums => average(nums))

The problem is that the above doesn’t work in case my bits array is composed of 696 values and I need 150 average numbers, because I end up having 174 numbers instead of 150.

What am I doing wrong?

Inline CRUD operation on Ant Design Table

I am using ant design Table, where I want to add a new row like an inline form when a button is clicked and able to do CRUD operation on this table

When I click the button 1st time it adds a new row in the table with all fields empty but when I click the button again the previously selected data remains,

If you don’t understand the problem please watch this YT video: * https://youtu.be/S7-99HqpWvo * here Material UI is used but I want to achieve the same functionality using Ant Design

Please help me with this, Below I have given the codepen link
codepen link:

 [codepen]: https://codepen.io/sandipdeb05/pen/WNdRmxd

How to return geolocation ‘state’ or ‘coords’ to be used in different file in javascript?

I want to create a file of functions to be used in other files,

functions file:

function state() {
  navigator.permissions.query({ name: "geolocation" }).then((pos) => {
    return pos.state;
  });
}

function ask() {
  navigator.geolocation.getCurrentPosition((pos) => {
    return pos.coords;
  }, (err) => {
    return err;
  });
}

functions... 

export {state, ask};

how to return pos.state in the first function (return the result, not the promise) and the pos.coords in the second one?

Jquery setTimeout is not working how I expected to with animate function

I m trying to make a text that is inside the border of an input to move then disappear after 0,5s, so I can have some animation.
enter image description here

Here is how it looks, I made a logic so if I don’t have any value, the text in the border will dissapear:

$('input').on('input', function () {
            if ($(this).val() !== '') {
                if ($(this).parents('.tbi-checkbox').length === 0) {
                    $(this).parents('.tbi-input-container').find('.tbi-input-label').addClass('tbi-visible-label');
                    $(this).parents('.tbi-input-container').find('.tbi-input-label').animate({ top: '-9px' }, 100)
                }
            } else {
                if ($(this).parents('.tbi-checkbox').length === 0) {
                    $(this).parents('.tbi-input-container').find('.tbi-input-label').animate({ top: '3px' }, 100);
                    setTimeout(function() {
                        $(this).parents('.tbi-input-container').find('.tbi-input-label').css("display", "none");
                        $(this).parents('.tbi-input-container').find('.tbi-input-label').removeClass('tbi-visible-label');
                    }, 500);
                }
            }
        });
    }

By default the text, have the display property set to none, so it can be invisible if the field is empty. What I managed to do until now is to do an animation for the text, when you insert text and looks great. But because I’m removing the class, the animation don’t have time to trigger, so I put it inside a setTimeout function, but it still doesn’t work.

Here is the css:

.tbi-visible-label {
    position: absolute;
    left: 20px;
    top: -9px;
    z-index: 1;
    display: block;
    height: 15px;
    margin-left: 5px;
    background-color:white;
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
}

.tbi-input-label {
    pointer-events: none;
    display: none;
    font-family: Inter;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    padding: 0 5px;
}

After using the setTimeout, it doesn’t even disappear:
enter image description here

Remove element from DOM after submit

I am selecting data from my db and store them in a list in bahn.php. Then I echo the values of the objects to display them in index.php.

Now, I want to update the status of the displayed object by clicking on the “accept”-button. This is working so far, but I have to reload the page manually to get a new created list without the updated object. What do I need to do to just click on accept and the list gets refreshed by itself?

I tried to reload location, header location etc. after my submit, but then the update did not work.

bahn.php

<?php

require_once("config.php");
require("bahn.php");

function get_bahn() {
    $bahn_list = array();
    $db = db_connection();
    $statement = $db->prepare(
        "SELECT bahn.bahnid ... FROM bahn WHERE bahn.status = 0");
    $statement->execute();
    while($row = $statement->fetch()) {
        $new_bahn = new bahn(...);
        array_push($bahn_list, $new_bahn);
    }
    return $bahn_list;
}
function create_bahn_list($bahn_list) {
        if (empty($bahn_list)) {
            echo '<div class="alert alert-danger fade show">
            ...
          </div>';
        } else {
            foreach($bahn_list as $key => $val) {

                $statusid = $val->get_bahnid();

                echo '...
                
              <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#info'.$val->get_bahnid().'"> More info</button>
                <div class="modal fade" id="info'.$val->get_bahnid().'" tabindex="-1" aria-hidden="true">
                 <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                  <div class="modal-content">

                    ...

                    <div class="modal-footer">
                        <form method="POST">
                            <button type="submit" name="accept" class="btn btn-success btn-sm">Accept</button>
                        </form>
                     </div>
    
                    ...';       
            }
        }

        if(isset($_POST['accept'])) {
            $db = db_connection();
            $statement = $db->prepare(
                "UPDATE bahn
                SET status = 1
                WHERE bahn.bahnid = $statusid");
            $statement->execute();
                
            }
    }



?>
index.php

<div class="row" data-masonry='{"percentPosition": true }'>

<?php

$bahn_list = get_bahn();
create_bahn_list($bahn_list);

?>

</div>

Programmatically drag and drop element into another element using pure JavaScript (without jQuery, jQueryUI)

Used this codebase and it is working but is there any way to do this using without jQueryUI and jQuery?

function trigger_drop() {
  var draggable = $("#draggable").draggable(),
    droppable = $("#droppable").droppable(),

    droppableOffset = droppable.offset(),
    draggableOffset = draggable.offset(),
    dx = droppableOffset.left - draggableOffset.left,
    dy = droppableOffset.top - draggableOffset.top;

  draggable.simulate("drag", {
    dx: dx,
    dy: dy
  });
}

I referred to this question -> stacklink

POST Request is working on Postman but getting 403 in JS

I have tested an API https://connect.us-east-1.amazonaws.com/contact/suspend-recording with POST request in postman successfully and getting the 200 statuscode and it is working absolutely fine and suspend/pause the call recording according to the desired goals.
I generate the code by using POSTMAN Code Snippet and used it in my project/code and than when i test it, it throw 403 forbidden error. POSTMAN 403 Error

function pauseRecording(){
//let contactId = contactId; //document.getElementById("contactId").value;

alert("ContactId Alert:" + contactId)
var settings = {
    "crossDomain": true,
    "url": "https://connect.us-east-1.amazonaws.com/contact/suspend-recording",
    "method": "POST",
    "timeout": 0,
    "headers": {
      "X-Amz-Content-Sha256": "beaead3198f7da1e70d03ab969765e0821b24fc913697e929e726aeaebXXXXXX",
      "X-Amz-Date": "20220324T135827Z",
      "Authorization": "XXXX-XXXX-SHA256 Credential=XXXXXXI7HVAVPV5LNWQN/20220324/us-east-1/connect/aws4_request, SignedHeaders=host;x-amz-content-sha256;x-amz-date, Signature=XXXXXXde1fc213ebf2191ebc518e01858fb6cc024773db9133deb7fbebc59XXX",
      "Content-Type": "application/json"
    },
    "data": JSON.stringify({
      "ContactId": contactId,
      "InitialContactId": contactId,
      "InstanceId": "XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
    }),
  };
  
  $.ajax(settings).done(function (response) {
    console.log(response);
  });
}

HTML Button: <button onclick="pauseRecording()">Pause Recording</button>
Any Solution Please?