Category: javascript

I’m getting this error

Task :rn-amazon-payment-services:verifyReleaseResources FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ‘:rn-amazon-payment-services:verifyReleaseResources’.

A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
Android resource linking failed
ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:3: AAPT: error: resource android:color/system_neutral1_1000 not found.

 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:4: AAPT: error: resource android:color/system_neutral1_900 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:5: AAPT: error: resource android:color/system_neutral1_0 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:6: AAPT: error: resource android:color/system_neutral1_800 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:7: AAPT: error: resource android:color/system_neutral1_700 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:8: AAPT: error: resource android:color/system_neutral1_600 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:9: AAPT: error: resource android:color/system_neutral1_500 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:10: AAPT: error: resource android:color/system_neutral1_400 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:11: AAPT: error: resource android:color/system_neutral1_300 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-appe/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:12: AAPT: error: resource android:color/system_neutral1_200 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:13: AAPT: error: resource android:color/system_neutral1_100 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-appe/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:14: AAPT: error: resource android:color/system_neutral1_50 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:15: AAPT: error: resource android:color/system_neutral1_10 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:16: AAPT: error: resource android:color/system_neutral2_1000 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/3mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:17: AAPT: error: resource android:color/system_neutral2_900 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:18: AAPT: error: resource android:color/system_neutral2_0 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:19: AAPT: error: resource android:color/system_neutral2_800 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:20: AAPT: error: resource android:color/system_neutral2_700 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:21: AAPT: error: resource android:color/system_neutral2_600 not found.
     
 ERROR: /Users/mac/Desktop/Projetcs/mobile-app/node_modules/rn-amazon-payment-services/android/build/intermediates/merged_res/release/values-v31/values-v31.xml:22: AAPT: error: resource android:color/system_neutral2_500 not found.
     

• Try:

Run with –stacktrace option to get the stack trace.
Run with –info or –debug option to get more log output.
Run with –scan to get full insights.
Get more help at https://help.gradle.org.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use ‘–warning-mode all’ to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.3/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.

When I building a project using ./gradlew assembleRelease in android folder of my project

I don’t know if this is a bug in the browser or if this is the correct behavior.

The chrome browser on macOS for the example below returns pageX starting from 9 coordinate pixel but should start at 10, ending on 109 but should end at 110. An identical example on firefox browser returns the correct values. What could be the cause?

<div class="rect"></div>

body{
  margin: 0;
}

.rect {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 10px;
  left: 10px;
}

  document.querySelector('div').addEventListener('mousemove', ({ pageX, pageY }) => console.log(pageX, pageY))

Fiddle.

I expected to get the correct coordinates the same as those returned from the getBoundingClientRect() method.

I’m learning javascript and I’m testing out the if condition. I want to display an alert box only if a button has been clicked. But the alert message pops up without the condition being met(the button being clicked).

Javascript code:

//adding an event listener to the button element:

var hasClicked= false
$("#click").on("click", function () {
   hasClicked= true
   alert("working");

})

if (hasClicked=true) {
    alert("condition met")
}

I am using following definition in order to display a custom icon as marker on a google map with Maps JavaScript API of Google:

const iconCircle= {
    path: google.maps.SymbolPath.CIRCLE, 
    fillColor: "red", 
    fillOpacity: 1,
    strokeWeight: 2, 
    strokeColor: "black", 
    rotation: 0,
    anchor: new google.maps.Point(0, 0) 
};
var marker = new google.maps.Marker({
    position: position_lat_lng,
    icon: iconCircle,
    map: map
});
marker.icon.scale = custom_scale;

How can I display this icon outside of the map? e.g. in a symbol legend

I am working on a site that has some learning materials that have to be saved in a DB and can be shown in the site for users to see using something like React PDF Viewer. The three problems I’m trying to figure out are from client to server, storing in the DB and from server to client.

I got the client to server working using Uint8Array, but when storing this in the database and retrieving it the client side it would change the values of each byte. I found a couple of people who came across the same problem and had it fixed by using encode(data::bytea, 'escape') in the select query. This got me the right values for each byte but when sending it to the front-end I wasn’t able to get it back to a Uint8Array, even though it had the exact same format of:

{
  "0":37,
  "1":70,
  ...
}

The peculiar thing is that it also didn’t function as an array anymore. I wasn’t able to loop through it, I couldn’t get any of the values like I could before by just using its index.

Also loading in the data was very time consuming with taking 1-2 seconds for a couple page pdf.
The site would have somewhere around 30 documents, all of which between 5 and 20 pages long with at most 5 to 10 users simultaneously.

the question I was asked was, ” You order one coffee ($5.99) and one bagel ($2.99). Using math , calculate the total cost and using concatenation , create the text : ‘ Total cost:$_’.”
the code I answered with was ‘Total cost : $${( 599 + 295 ) / 100}’ and it doesn’t seem to be the solution . I would love to know a solution to the question please

Codesandbox example of my issue

I’m using CSS Grid to lay out my application. The application is made up of three primary parts: Header, Menu, and Content. This is the basic structure:

<div className="application">
  <div className="header">
    header
  </div>
  <div className="menu">menu</div>
  <div className="content">
    content
  </div>
</div>

By default the Menu is hidden with this line:

grid-template-columns: min-content 0 1fr;

When the menu is opened this is instead applied:

grid-template-columns: min-content min-content 1fr;

When clicking the Header I want to animate the menu open and resize the Content region accordingly, animating both its position and width. I’m currently doing this using framer-motion’s Layout animations.

After adding that in, this is what my markup looks like:

<motion.div className={`application${isMenuOpen ? " menuIsOpen" : ""}`}>
  <motion.div
    className="header"
    onTap={() => setIsMenuOpen(!isMenuOpen)}
  >
    header
  </motion.div>
  <motion.div className="menu">menu</motion.div>
  <motion.div
    layout="position"
    className="content"
  >
    content
  </motion.div>
</motion.div>

Note: I use layout="position" instead of just layout to avoid the scaleX that is applied by framer-motion when animating.

The Problem

When clicking the Header the Content region instantly shrinks to its final “menu open” width and reveals the application background until its x is animated fully. Conversely, clicking it again makes it extend beyond the application wrapper to its “menu closed” width. If I change layout="position" to layout it gets me closer but of course animates the scaleX and distorts the contents. Not good.

How do I animate the width of Content without distorting its contents?

I have made this website that checks the strenth of a given password
It looks like this

But the checkmarks stays red even tho i have tried making it green. My code is the following

So what i want is the checkmark to be green and the X still to be red

here is the html codeHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Strength Checker</title>
    <link rel="stylesheet" href="styles.scss">
</head>
<body>
  <br>  <br>  <br>

    <div class="info-container">
        <p>Indsæt tekst her...</p>
</div>


<div class="container">
    <h1>Password Strength Checker</h1>
    <label for="password">Enter Password:</label>
    <input type="password" id="password" placeholder="Password">
    <div class="criteria">
        <div class="criteria-item" id="capitalCheck">Capital Letters: <span class="indicator"></span></div>
        <div class="criteria-item" id="numberCheck">Numbers: <span class="indicator"></span></div>
        <div class="criteria-item" id="symbolCheck">Symbols: <span class="indicator"></span></div>
    </div>
    <button onclick="calculateTime()">Calculate</button>
    <div id="result"></div>
</div>

<script src="script.js"></script>

the SCSS is the following

.info-container {
    background-color: #f0f0f0;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
}


.container {
    background-color: #fff;
    padding: 30px;
    width: 400px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.criteria-item {
    margin-bottom: 10px;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.container>h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

label {
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

p#result {
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
}

ul.criteria {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

ul.criteria>li {
    font-size: 16px;
}

span.indicator {
    font-size: 16px;
    color: red;
}

span.valid {
    color: green;
}

And finally the javascript where the checkmarks are made

 document.getElementById("password").addEventListener("input", function() {
    var password = this.value.trim(); // Trim to remove leading and trailing spaces
    var capitalCheck = document.getElementById("capitalCheck").querySelector(".indicator");
    var numberCheck = document.getElementById("numberCheck").querySelector(".indicator");
    var symbolCheck = document.getElementById("symbolCheck").querySelector(".indicator");

    capitalCheck.textContent = /[A-Z]/.test(password) ? '✔' : '✘';
    numberCheck.textContent = /d/.test(password) ? '✔' : '✘';
    symbolCheck.textContent = /[!@#$%^&*()_+-=[]{};':"\|,.<>/?]/.test(password) ? '✔' : '✘';

    capitalCheck.style.visibility = /[A-Z]/.test(password) ? "visible" : "visible";
    numberCheck.style.visibility = /d/.test(password) ? "visible" : "visible";
    symbolCheck.style.visibility = /[!@#$%^&*()_+-=[]{};':"\|,.<>/?]/.test(password) ? "visible" : "visible";
});


function calculateTime() {
    var password = document.getElementById("password").value;
    var charCount = password.length;
    var hasUpperCase = /[A-Z]/.test(password);
    var hasNumber = /d/.test(password);
    var hasSymbol = /[!@#$%^&*()_+-=[]{};':"\|,.<>/?]/.test(password);

    var possibleCharacters = 26 + (hasUpperCase ? 26 : 0) + (hasNumber ? 10 : 0) + (hasSymbol ? 32 : 0); // lowercase letters + uppercase letters + numbers + symbols
    var permutations = Math.pow(possibleCharacters, charCount);

    var seconds = permutations / 1000000000; // divide by 1 billion to convert to seconds
    var minutes = seconds / 60;
    var hours = minutes / 60;
    var days = hours / 24;
    var years = days / 365;

    var result = "It would take approximately ";
    if (years >= 1) {
        result += Math.floor(years) + " years, " + Math.floor(days % 365) + " days, " + Math.floor(hours % 24) + " hours, " + Math.floor(minutes % 60) + " minutes, and " + Math.floor(seconds % 60) + " seconds to crack this password.";
    } else if (days >= 1) {
        result += Math.floor(days) + " days, " + Math.floor(hours % 24) + " hours, " + Math.floor(minutes % 60) + " minutes, and " + Math.floor(seconds % 60) + " seconds to crack this password.";
    } else if (hours >= 1) {
        result += Math.floor(hours) + " hours, " + Math.floor(minutes % 60) + " minutes, and " + Math.floor(seconds % 60) + " seconds to crack this password.";
    } else if (minutes >= 1) {
        result += Math.floor(minutes) + " minutes, and " + Math.floor(seconds % 60) + " seconds to crack this password.";
    } else {
        result += Math.ceil(seconds) + " seconds to crack this password.";
    }

    document.getElementById("result").innerText = result;
}

I have different kind of field I would like to hide based on a dropdown selection. There is one image : “Image1”; two buttons : “Button1” and “Button2”; ont text field : “Text8”; two checkboxes on the same name : “CB1”. There is three option in the dropdown : 1, 2, 3. I would like to know what is the code to make all the field dissapear if 3 is selected.

I have this code :

if(event.value == "3"){
this.getField("Image1").display = display.hidden;
this.getField("Button1").display = display.hidden;
this.getField("Button2").display = display.hidden;
this.getField("CB1").display = display.hidden;}

However, it doesn’t work for images and checkboxes. Is there a special code for those.

Thank you.

I am making a site that has multiple data points in a list, and when one has too much information, I want that line to be white-space: nowrap in a parent that is overflow:hidden, but for it to slide back and forth revealing all of its text over time. I am looking for a pure css solution.

Getting the marquees to bounce is relatively simple. A class is toggled on the body at interval which the children react to. But I only want them to bounce if the child is wider than the parent. I have been incapable of finding a pure css solution to this problem so far. Can anyone help me? I assume it will involve container queries in some way, but whenever I start going down that path, transforms start breaking.

To sum up. This code has the bounce marquee working, how do I alter the css so that only the child that is wider than the parent bounces?

let marqueeActive = false;
const marqueeTiming = 3000;

setInterval(()=>{
  marqueeActive = !marqueeActive;
  document.querySelector(".cards").classList.toggle("marquee-active", marqueeActive);
}, marqueeTiming);

* {
  box-sizing: border-box;
}

.cards {
  display: flex;
  gap: 0.5em;
}
.card {
  background-color: pink;
  padding: 1em;
  border-radius: 0.5em;
  width: 180px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.image img {
  max-width: 100%;
}
.description {
  overflow: hidden;
  width: 100%;
}


.description-item {
  line-height: 1.1em;
  height: 1.1em;
  white-space: nowrap;
  position: relative;
}
.marquee {
  position: absolute;
  translate: 0;
  left: 0;
  transition: all 1.5s;
  display: inline-block;
}
.marquee-active .marquee {
  translate: -100%;
  left: 100%;
}

<div class="cards">
  <div class="card">
    <div class="image"><img src="https://via.placeholder.com/300x300" /></div>
    <div class="description">
      <div class="description-item title"><span class="marquee">Lorem ipsum dolor</span></div>
      <div class="description-item date">2024-05-07</div>
    </div>
  </div>
  <div class="card">
    <div class="image"><img src="https://via.placeholder.com/300x300" /></div>
    <div class="description">
      <div class="description-item title"><span class="marquee">Lorem</span></div>
      <div class="description-item date">2024-05-07</div>
    </div>
  </div>
  <div class="card">
    <div class="image"><img src="https://via.placeholder.com/300x300" /></div>
    <div class="description">

      <div class="description-item title"><span class="marquee">This is the only text that should be bouncing.</span></div>
      <div class="description-item date">2024-05-07</div>
    </div>
  </div>
</div>

function registerBeforeUnload(dotnethelper) {
    window.addEventListener('beforeunload', function (event) {
        event.preventDefault();
   
    });
}

beforeunload not working when browser closed but while debug beforeunload working.please help me without debugging.

I want to use the Draw Tool Extension. In my Autodesk Forge Viewer. When I download the extension like this, it works. https://github.getafreenode.com/autodesk-platform-services/aps-extensions/blob/main/public/extensions/DrawToolExtension

<link rel="stylesheet" href="http://cdn.jsdelivr.net/gh/autodesk-forge/forge-extensions/public/extensions/DrawToolExtension/contents/main.css"> 
<script src="http://cdn.jsdelivr.net/gh/autodesk-forge/forge-extensions/public/extensions/DrawToolExtension/contents/main.js"></script> 

But I would like to change the extension code for my needs. I specify it locally

<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="main.css">

But it stops working, and I don’t understand why

I have customised checkbox elements arranged inline on the website.

<div id="hours" class="checkbox_radio_container">
    <label><input type="checkbox" name="hours[]" value="10" required="" onchange="function()"><span>10<sup><u>00</u></sup>-11<sup><u>00</u></sup></span></label> 
    <label><input type="checkbox" name="hours[]" value="11" required="" onchange="function()"><span>11<sup><u>00</u></sup>-12<sup><u>00</u></sup></span></label> 
    <label><input type="checkbox" name="hours[]" value="12" required="" onchange="function()"><span>12<sup><u>00</u></sup>-13<sup><u>00</u></sup></span></label> 
    <label><input type="checkbox" name="hours[]" value="13" required="" onchange="function()"><span>13<sup><u>00</u></sup>-14<sup><u>00</u></sup></span></label> 
    <label><input type="checkbox" name="hours[]" value="14" required="" onchange="function()"><span>14<sup><u>00</u></sup>-15<sup><u>00</u></sup></span></label> 
    <label><input type="checkbox" name="hours[]" value="15" required="" onchange="function()"><span>15<sup><u>00</u></sup>-16<sup><u>00</u></sup></span></label> 
    <label><input type="checkbox" name="hours[]" value="16" required="" onchange="function()"><span>16<sup><u>00</u></sup>-17<sup><u>00</u></sup></span></label> 
    <label><input type="checkbox" name="hours[]" value="19" required="" onchange="function()"><span>19<sup><u>00</u></sup>-20<sup><u>00</u></sup></span></label>
</div>

How to prevent checking a checkbox that is not adjacent to a previously checked one without using jQuery. The pictures below will help you understand what I mean.

Allowed possibilities:

Not allowed possibilities:

I haven’t written any JavaScript code yet because I have absolutely no idea how to start.

I have a table using flexbox that’s populated with d3.js. The columns can be sorted by clicking on the header row.
I have a select in one of these rows. When I click on the dropdown, I don’t want the table to sort. But if I click that header row outside of the dropdown, I do want it to sort. Is this doable?

data = [
      {
        "name": "Dave",
        "dept": "Marketing",
        "region": "South",
        "items": 28
      },
      {
        "name": "Amy",
        "dept": "IT",
        "region": "West",
        "items": 46
      },
      {
        "name": "John",
        "dept": "Sales",
        "region": "North",
        "items": 35
      },
      {
        "name": "Sarah",
        "dept": "Communications",
        "region": "North",
        "items": 13
      }
    ]

    drawTable(data)
    sortTable(data)

    function drawTable(data) {

      // not working
      // when redrawing table, trying to re-initialize sort function
      sortTable(data)

      d3.select('#data-table').remove()

      let table = d3.select('#table').append('div').attr('id', 'data-table')

      let row = table.selectAll('.row')
        .data(data)
        .enter()
        .append('div')
        .attr('class', 'row')

      let grid = row
        .append('div')
        .attr('class', 'grid')

      let name = grid.append('div')
        .attr('class', 'box')
        .html(d => d.name)

      let dept = grid.append('div')
        .attr('class', 'box')
        .html(d => d.dept)

      let state = grid.append('div')
        .attr('class', 'box')
        .html(d => d.region)

      let initiative = grid.append('div')
        .attr('class', 'box')
        .html(d => d.items)

    }

    function sortTable(data) {
      d3.selectAll(".name,.dept,.region,.items").on('click', function () {
        d3.select(this).classed("sortAsc", d3.select(this).classed("sortAsc") ? false : true);

        let sortClasses = d3.select(this).attr("class")
        let splitSortClasses = sortClasses.split(' ')
        let sortVar = splitSortClasses[2]

        if (sortClasses.includes('sortAsc')) {
          data.sort((a, b) => d3.ascending(a[sortVar], b[sortVar]))
        } else {
          data.sort((a, b) => d3.descending(a[sortVar], b[sortVar]))
        }

        drawTable(data)
      })
    }

.grid {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
    }

    .grid>div {
      display: flex;
      flex-basis: calc(100%/4 - 28px);
      justify-content: center;
      flex-direction: column;
      padding: 10px;
    }

    .box {
      margin: 0;
    }

    .box {
      color: #000;
      border: .5px solid #ccc;
    }

    .hrbox {
      background-color: #ddd;
      color: #111;
      font-weight: bold;
      background-size: 1.5rem;
      background-repeat: no-repeat;
      background-position: center right;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M16.29 14.29L12 18.59l-4.29-4.3a1 1 0 00-1.42 1.42l5 5a1 1 0 001.42 0l5-5a1 1 0 00-1.42-1.42zM7.71 9.71L12 5.41l4.29 4.3a1 1 0 001.42 0 1 1 0 000-1.42l-5-5a1 1 0 00-1.42 0l-5 5a1 1 0 001.42 1.42z'/%3E%3C/svg%3E");
      text-align: left !important;
    }

    .hrbox.sortAsc {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M11.29 11.46a1 1 0 001.42 0l3-3A1 1 0 1014.29 7L12 9.34 9.71 7a1 1 0 10-1.42 1.46zm3 1.08L12 14.84l-2.29-2.3A1 1 0 008.29 14l3 3a1 1 0 001.42 0l3-3a1 1 0 00-1.42-1.42z'/%3E%3C/svg%3E");
    }

    .hrbox.sortDesc {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f4f4f' d='M12.71 12.54a1 1 0 00-1.42 0l-3 3A1 1 0 009.71 17L12 14.66 14.29 17a1 1 0 001.42 0 1 1 0 000-1.42zm-3-1.08L12 9.16l2.29 2.3a1 1 0 001.42 0 1 1 0 000-1.42l-3-3a1 1 0 00-1.42 0l-3 3a1 1 0 001.42 1.42z'/%3E%3C/svg%3E");
    }

    #attr {
      width: 60px;
      margin-left: 20px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
<div id="table">
    <div class="grid">
      <div class="box hrbox name">
        <div style="display: flex;">
          <div>name</div>
          <select id="attr"></select>
        </div>
      </div>
      <div class="box hrbox dept">
        <div>dept</div>
      </div>
      <div class="box hrbox region">
        <div>region</div>
      </div>
      <div class="box hrbox items">
        <div>items</div>
      </div>
    </div>
    <div id="data-table"></div>
  </div>

I’m trying to make a project with React, I don’t have much knowledge, so I’m sorry, I’m getting this error and I couldn’t solve it. Thank you for your help.
could not find react-redux context value; please ensure the component is wrapped in a

app.js 

function App() {
  
  return (
    <div className="App">
      <Routes>
        <Route path='/*' element={<CostumerRouters/>}></Route>

      </Routes>
      


      
    </div>
  );
}

export default App;



index.js 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />

      </Provider>
    </BrowserRouter>

  </React.StrictMode>
);reportWebVitals();

store.js 


import { legacy_createStore, applyMiddleware, combineReducers } from "redux";
import { thunk } from "redux-thunk";
import { authReducer } from "./Auth/Reducer";
import { customerProductReducer } from "./Product/Reducer";
import { cartReducer } from "./Cart/Reducer";
import { orderReducer } from "./Order/Reducer";

const rootReducers = combineReducers({
    auth:authReducer,
    products:customerProductReducer,
    cart:cartReducer,
    order: orderReducer,


})

export const store = legacy_createStore(rootReducers,applyMiddleware(thunk))



end product.jsx


import { Fragment, useEffect, useState } from 'react'
import { Dialog, Disclosure, Menu, Transition } from '@headlessui/react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import { ChevronDownIcon, FunnelIcon, MinusIcon, PlusIcon, Squares2X2Icon } from '@heroicons/react/20/solid'
import { products } from './Products'
import ProductCard from './ProductCard'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { findProducts } from '../../State/Product/Action'

import { Pagination } from '@mui/material'
import { store } from '../../State/store'


function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Product() {
  const dispatch = useDispatch()
  const { products } = useSelector(state => state.products);
  const { product } = products; // Eğer 'product' direkt store üzerinde ise böylece kullanabilirsiniz

  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
  const location = useLocation()
  const navigate = useNavigate()
  const param = useParams()

  const decodeQueryString = decodeURIComponent(location.search);
  const searchParams = new URLSearchParams(decodeQueryString);
  const colorValue = searchParams.get("color")
  const sizeValue = searchParams.get("size")
  const priceValue = searchParams.get("price")
  const discount = searchParams.get("discount")
  const sortValue = searchParams.get("sort")
  const pageNumber = searchParams.get("page") || 1;
  const stock = searchParams.get("stock")


  const handlePaginationChange = (value) => {
    const searchParams = new URLSearchParams(location.search)
    searchParams.set("page", value);
    const query = searchParams.toString();
    navigate({ search: `?${query}` })

  }


  const handleFilter = (value, sectionId) => {
    const searchParams = new URLSearchParams(location.search)
    let filterValue = searchParams.getAll(sectionId)
    if (filterValue.length > 0 && filterValue[0].split(",").includes(value)) {
      filterValue = filterValue[0].split(",").filter((item) => item !== value)
      if (filterValue.length === 0) {
        searchParams.delete(sectionId)
      }
    }
    else {
      filterValue.push(value)
    }
    if (filterValue.length > 0) {
      searchParams.set(sectionId, filterValue.join(","))

    }
    const query = searchParams.toString()
    navigate({ search: `?${query}` });
  }

  useEffect(() => {
    const [minPrice, maxPrice] = priceValue === null ? [0, 10000] : priceValue.split("-").map(Number);
  
    const data = {
      category: param.levelThree,
      colors: colorValue || [],
      sizes: sizeValue || [],
      minPrice,
      maxPrice,
      minDiscount: discount || 0,
      sort: sortValue || "price_low",
      pageNumber: pageNumber - 1,
      pageSize: 10,
      stock: stock
    };
  
    dispatch(findProducts(data));
  }, [dispatch, param.levelThree, colorValue, sizeValue, priceValue, discount, sortValue, pageNumber, stock]);
  
}

Despite my research, I couldn’t find any method.
I have to do frontend for my backend project, so I don’t have much knowledge, I’m just learning. Can you please show me a solution in a way that I can understand?