Category: javascript

Hello I am trying to make a drag and drop in my application but I have got a huge error. I have no idea if property is missing because in IDE it is an error free code.

Uncaught Error: Could not find "store" in the context of "Connect(Droppable)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Droppable) in connect options.

Down here are my components

3 Columns ( I want drag and drop across one column each, not between them)

const DetailColumns: React.FC<funcProps> = (props) => {
  const onDragEnd = () => {};
  return (
    <Box
      h="80vh"
      borderWidth="0.5rem"
      borderColor="orange.300"
      borderRadius="1rem"
      w="80%"
      marginTop="2rem"
    >
      <Grid w="100%" h="100%" templateColumns="60% 20% 20%">
        <Box border="0.5rem" borderColor="orange.300">
          <RecipeDescriptionBox recipe={props.recipe} />
        </Box>
        <Box borderLeftWidth="0.5rem" borderColor="orange.300">
          <RecipeStepsBox recipe={props.recipe} />
        </Box>
        <DragDropContext onDragEnd={onDragEnd}>
          <Box borderLeftWidth="0.5rem" borderColor="orange.300">
            <RecipeIngredientsBox recipe={props.recipe} />
          </Box>
        </DragDropContext>
      </Grid>
    </Box>
  );
};

List of Items

<Box>
      <ColumnHeader title="Steps" />
      <Droppable droppableId="unique">
        {(provided) => (
          <Box {...provided.droppableProps} innerRef={provided.innerRef}>
            {steps.map((step, index) => (
              <DetailListItem
                key={step}
                itemName={step}
                indexOfItem={index}
                id={Math.random().toString()}
              />
            ))}
            {provided.placeholder}
          </Box>
        )}
      </Droppable>
    </Box>

Item element

<Draggable draggableId={props.id} index={props.indexOfItem}>
      {(provided) => (
        <Box
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          innerRef={provided.innerRef}
        >
          <Flex margin="1rem">
            <Box
              bgGradient="linear(to-r, orange.200, orange.400)"
              height="6vh"
              width="6vh"
              boxShadow="md"
              rounded="md"
            >
              <Grid w="100%" h="100%" placeItems="center">
                <Text color="white" fontWeight="700" fontSize="140%">
                  {props.amount && props.amount + props.unit}
                  {!props.amount && props.indexOfItem}
                </Text>
              </Grid>
            </Box>
            <Grid placeItems="center">
              <Text marginLeft="1rem" fontWeight="500" fontSize="1.8rem">
                {props.itemName}
              </Text>
            </Grid>
          </Flex>
        </Box>
      )}
    </Draggable>

If you want I can put this code to some sandbox to make it easier to debug.

This is the table function for adding data into a table:

const table = () => {
  let table_details = document.getElementById("table_details")
  let data = localStorage.getItem("projects")
  
  if (data == null) {
    arr = []
  }
  else {
    tabledata = JSON.parse(data);
  }
  
  console.log(tabledata)
  projectTable = ""
  tabledata.map((items, index) => {
    projectTable += `<tr><td>${index}</td> <td>${items.pname}</td> <td>${items.pleader}</td> <td>${items.pstatus}</td> <td>${items.pcompany}</td><tr/>`
  })
  tabledata.length > 0 ? (table_details.innerHTML = projectTable) : (`No project found !`)
}

This is the projectDetails function for showing data as cards:

const projectDetails = () => {
  let projectDetails = document.getElementById("project_details");
  let data = localStorage.getItem("projects");

  if (data == null) {
    arr = [];
  }
  else {
    projectdata = JSON.parse(data); //converting data into an array
  }

  showDetails = "";
  console.log(projectdata)
  projectdata.forEach((items, index) => {
    showDetails += ` <div class="card-body col-6 p-3  " style ="width:30rem">
    <span class ="card-title"><p class = "text-info">projectName:  ${items.pname}</p> <a href="#"> leader:${items.pleader} </a> 
      </span><p class ="card-text p-0">description:${items.pdesc}</p><p class = "text-muted p-0 m-0">[status:${items.pstatus}] <br> <button  onclick = "deleteProject(${index})" class = "btn btn-info  p-1">delete</button>
      </div> <hr>`
  });

  if (projectdata.length > 0) {
    projectDetails.innerHTML = showDetails
  }
  else {
    (projectDetails.innerHTML = `<h4 class = "text-danger"><strong>No Projects Found !</strong></h4>`);
  }
}

This is how both functions get called:

table();
projectDetails();

When calling two functions, only one function is working: the one which is called first.

I can put breakpoint in 105 and 106 but not into 112. Why?

I need some idea!

Is there any possible way To separate user orders based on vendor email? I am trying to develop a multi-vendor project where vendors can be able to upload products. I am trying to do when a user orders from a different shop the orders need to be split based on vendor email.

Suppose a customer trying to buy from x vendor and y vendor products. When customers order the products the data look like the below array objects. It is difficult to show vendor orders in their dashboard who ordered your product. So I am trying to split the order based on email also the amount will be divided between the vendors from paymentDetail.amount when splitting the order.

[
        {
            _id: "622d70a49bd88b1599026318",
            products: [
                {
                    _id: "6223186e2278d4e502f5264a",
                    title: "Product number 1",
                    price: 600,
                    cartQuantity: 1,
                    vendor: {email: "[email protected]"}
                },
                {
                    _id: "622d4e9f9bd88b1599026317",
                    title: "asdas",
                    price: 100,
                    cartQuantity: 5,
                    vendor: {
                        email: "[email protected]"
                    }
                },
                 {
                    _id: "622d4e9f9bd88b1599026317",
                    title: "asdas",
                    price: 100,
                    cartQuantity: 5,
                    vendor: {
                        email: "[email protected]"
                    }
                },
            ],
            paymentDetails: {
                createdId: 1647145079,
                date: "Sun Mar 13 2022",
                amount: 110000,
                email: "[email protected]",
                last4: "4242",
                transaction: "p"
            },
            status: "Pending",
            billing: {
                country: "BD",
                name: "Md. Fathe Karim",
                phone: "+88010000000",
                line1: "Madhabdi",
                city: "Narshingdi",
                postal_code: "1604",
                state: "Bandarban"
            }
        }]

This is my POST request from frontend:

   await fetch('https://guarded-ocean-73313.herokuapp.com/dashboard/orders', {
                method: 'POST',
                headers: {
                    'content-type': 'application/json'
                },
                body: JSON.stringify({
                    products: [...cart], paymentDetails: {
                        createdId: paymentIntent.created,
                        date,
                        amount: paymentIntent.amount,
                        email: emailRef.current?.value,
                        billing: paymentIntent.billing_details,
                        last4: paymentMethod.card.last4,
                        transaction: paymentIntent?.client_secret.slice('_secret')[0]
                    },
                    status: 'Pending',
                    billing: {
                        country: countryRef.current?.value,
                        name: nameRef.current?.value,
                        phone: phoneRef.current?.value,
                        line1: addressRef.current?.value,
                        city: cityRef.current?.value,
                        postal_code: zipRef.current?.value,
                        state: stateRef.current?.value,
                    }
                })
            })
                .then(res => res.json())

This is my order API

 app.post('/dashboard/orders', async (req, res) => {
            const productDetail = req.body
            const result = await unityMartOrdersCollection.insertOne(productDetail)
            res.json(result)
        })

I think it’s possible by the reduce method? Is there anyone who can give me some ideas? Thank you.

hey everyone I just want to create a network graph with a circular pack,in which the connection between parents nodes should be always there but the connection between child node show only we click particular child nodes.

first image is the image while our page is opening

second image is while we click particular child nodes here we click white color child nodes so connection between all child nodes with white nodes show here.

actual connection for reference

nodes data

 let root = {
        "children": [
          {
            "name": "analytics",
            "children": [
              {
                "name": "animate1",
                "size": 1500
              },
              {
                "name": "animate2",
                "size": 1500
              },
              {
                "name": "animate3",
                "size": 1500
              }
            ]
          },
          {
            "name": "analytics1",
            "children": [
              {
                "name": "animate4",
                "size": 1500
              },
              {
                "name": "animate5",
                "size": 1500
              },
              {
                "name": "animate6",
                "size": 1500
              }
            ]
          },
          {
            "name": "analytics2",
            "children": [
              {
                "name": "animate7",
                "size": 1500
              },
              {
                "name": "animate8",
                "size": 1500
              },
              {
                "name": "animate9",
                "size": 1500
              }
            ]
          }
        ]
        }

links connection

const links = [
        { source: "animate1", target: "animate4" },
        { source: "animate6", target: "animate9" },
        { source: "animate9", target: "animate6" },
        { source: "animate3", target: "animate2" },
        { source: "animate1", target: "animate8" },
         { source: "animate3", target: "animate5" },
           { source: "analytics", target: "analytics2" },
            { source: "analytics1", target: "analytics2" },
             { source: "analytics1", target: "analytics" }
           
        
        
      ] ;

what I did

const svg = d3.select("svg"),
    diameter = +svg.attr("width"),
    g = svg.append("g").attr("transform", "translate(2,2)"),
    format = d3.format(",d");


      const links = [
        { source: "animate1", target: "animate4" },
        { source: "animate6", target: "animate9" },
        { source: "animate9", target: "animate6" },
        { source: "animate3", target: "animate2" },
        { source: "animate1", target: "animate8" },
         { source: "animate3", target: "animate5" },
           { source: "analytics", target: "analytics2" },
            { source: "analytics1", target: "analytics2" },
             { source: "analytics1", target: "analytics" }
           
        
        
      ] ;
      
      let root = {
        "children": [
          {
            "name": "analytics",
            "children": [
              {
                "name": "animate1",
                "size": 1500
              },
              {
                "name": "animate2",
                "size": 1500
              },
              {
                "name": "animate3",
                "size": 1500
              }
            ]
          },
          {
            "name": "analytics1",
            "children": [
              {
                "name": "animate4",
                "size": 1500
              },
              {
                "name": "animate5",
                "size": 1500
              },
              {
                "name": "animate6",
                "size": 1500
              }
            ]
          },
          {
            "name": "analytics2",
            "children": [
              {
                "name": "animate7",
                "size": 1500
              },
              {
                "name": "animate8",
                "size": 1500
              },
              {
                "name": "animate9",
                "size": 1500
              }
            ]
          }
        ]
        }


 svg.append("svg:defs")
        .append("svg:marker")
        .attr("id", "arrow")
        .attr("viewBox", "0 0 10 10")
        .attr("refX", 10)
        .attr("refY", 5)
        .attr("markerUnits", "strokeWidth")
        .attr("markerWidth", 6)
        .attr("markerHeight", 3)
        .attr("orient", "auto")
        .append("svg:path")
        .style("stroke","none")
        .attr("d", "M 0 0 L 10 5 L 0 10 z");


const pack = d3.pack()
    .size([diameter/2, diameter/2])
    .padding(40)

  root = d3.hierarchy(root)
      .sum(function(d) { return d.size; })
      .sort(function(a, b) { return b.value - a.value; });

  const node = g.selectAll(".node")
    .data(pack(root).descendants())
    .enter()
    .filter(function(d){
            return  !!d.data.name
        })
    .append("g")
    .attr('id', function(d) {
      return d.data.name;
    })
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
      .text(function(d) { return d.data.name + "n" + format(d.value); });




  
    const arrow = svg.selectAll('path.arrow').data( links, JSON.stringify );
  arrow.enter()
        .append("path")
        .attr("class","arrow")
        .attr("x1", function(d){
            let translate = getTranslate(d.source);
            return translate[0]
        })
        .attr("x2", function(d){
            let translate = getTranslate(d.target);
            return translate[0]
        })
        .attr("y1", function(d){
            let translate = getTranslate(d.source);
            return translate[1]
        })
        .attr("y2", function(d){
            let translate = getTranslate(d.target);
            return translate[1]
        })
        .attr("d", function(d) {
            let source = getTranslate(d.source),
                target = getTranslate(d.target),
                 x1= source[0],
                 x2= target[0],
                 y1= source[1],
                 y2= target[1];


            let dx = x1 - x2,
                dy = y1 - y2,
                dr = Math.sqrt(dx * dx + dy * dy);
            // return "M" + x1 + "," + y1 + "A" + dr + "," + dr + " 0 0,1 " + (x2 - 0.6) + "," + (y2 - 0.9);
            return "M" + x1 + "," + y1 + "A" + dr + "," + dr + " 0 0,1 " + x2 + "," + y2;
        })
        .style("stroke", "black")
        .style("fill", "none")
        .style("stroke-width", 3)
        .attr("marker-end", "url(#arrow)");    



  node.append("circle")
      .attr("r", function(d) { return d.r; })

  node.filter(function(d) { return !d.children; }).append("text")
      .attr("dy", "0.3em")
      .text(function(d) { return d.data.name.substring(0, d.r / 3); });


        function getTranslate(datum) {
            const circle = d3.select('#'+datum);
            const string = circle.attr("transform");
            const translate =  string.substring(string.indexOf("(")+1, string.indexOf(")")).split(",");
            return translate;
        }

circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}

text {
  font: 10px sans-serif;
  text-anchor: middle;
}

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

I found a java script url file that contains the function cameraOffset and increasecameraOffset and i dont know what they are and what they are used for
are they used to turn webcam on ??
or they are not related to webcam
please tell me
Thanks
If you want the url to check it i will put it

How do we log JavaScript based website code, what are the best practices and solution.

Currently we do not have any logging in Javascript code, we started with small but now it has become humongous and very difficult to debug.

Since, it is not best to use console.log developers avoided to use but now it is next to impossible to track what is happening in the code since that code has several sdk calls and different modules within Javascript.

I have spent time to search on this but looking for more insights on what can we use, my findings are on the below lines

1. console.log them and send to Kibana,Elastic,Splunk or a VSI and dump log file there.
2. Elegant way to do the above approach
3. Use some 3rd party logging framework who can handle this efficiently and elegantly

NOTE: The site is already developed and it would be tough to go to each of the function and add console.log, also want to persist the logs in server or splunk etc

I am trying to define a global state provider for an app I am building with react. But I keep getting the error

The object passed as the value prop to the Context provider (at line 19) changes every render. To fix this consider wrapping it in a useMemo hook

Here is my file structure. state.ts

export default interface State {
    data: boolean
}

export const initialState: State = {
    data: false,
}

action.ts

type Action = {
    type: "SET_DATA"
    value: boolean
}

export default Action

context.ts

import { Context, createContext, Dispatch } from "react"
import Action from "./actions"
import State, { initialState } from "./state"

const GlobalContext: Context<{
    globalState: State
    dispatch: Dispatch<Action>
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
}> = createContext({ globalState: initialState, dispatch: (_: Action) => {} })

export default GlobalContext

provider.tsx

import * as React from "react"
import { ReactNode, ReactElement, useReducer } from "react"
import GlobalContext from "./context"
import Reducer from "./reducer"
import State, { initialState as defaultInitialState } from "./state"

export default function GlobalStateProvider({
    children,
    initialState = defaultInitialState,
}: {
    children: ReactNode
    initialState?: State
}): ReactElement {
    const [globalState, dispatch] = useReducer(Reducer, initialState)

    return (
        <GlobalContext.Provider value={{ dispatch, globalState }}>
            {children}
        </GlobalContext.Provider>
    )
}

GlobalStateProvider.defaultProps = {
    initialState: defaultInitialState,
}

I have gone through the code multiple times and I cannot seem to figure out what is wrong and why I am getting this error.
If someone can further explain why this is happening and perhaps and solution that would be helpful.

On this page you can order tickets by clicking on the list items.
Clicked items get grouped and then put in an empty container
on the page. I added a sample view to clarify what the result should
be.

At this point I am stuck. I’m able to insert objects, but I don’t know
how to unpack whats inside the object. That should be the tickets
one clicked. Hopefully someone here can point me in the right
direction to solve this.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        /*  Styling bullets list items */
        li {
            list-style: none;
        }

        li:before {
            content: "1F3B8";
            margin-right: 10px;
        }
        /* Styling for tickets ordered */
        #order {
            background-color: #b0c4de;
            font-size: 120%;
        }
        .sample {
            background-color: #b0c4de;
            font-size: 120%;
        }
    </style>
</head>
<body>

<p>Here you'll find the prices for the tickets:</p>

<ul>
    <li onclick="push(tckt1)">Saturday: €110</li>
    <li onclick="push(tckt2)">Sunday: €110</li>
    <li onclick="push(tckt3)">Monday: €110</li>
    <li onclick="push(tckt4)">Weekend: €230</li>
</ul>
<div id="order">

</div>
<br>
// This is a sample of how the output should look.
<div class="sample">
    Your order:<br>
    3 Weekend-tickets à €230 = € 690<br>
    1 Sunday-tickets à €110 = € 110<br>
    Totaalbedrag: €800 - 10% korting à €80 = €720
</div>
<script>
    const order = document.getElementById("order")
    let tickets = [];

    const tckt1 = {id: 1, name: "Saturday-tickets à €110", price: 110};
    const tckt2 = {id: 2, name: "Sunday-tickets   à €110", price: 110};
    const tckt3 = {id: 3, name: "Monday-tickets   à €110", price: 110};
    const tckt4 = {id: 4, name: "Weekend-tickets  à €230", price: 230};

    // Push object in array tickets
    function push(temp){
    tickets.push(temp);
    let res = tickets.reduce(function (x,cur){
    let item = cur.id + cur.name + cur.price
    if (!x[item]) x[item] = 0;
    x[item] = x[item] + 1
    return x
    }, {})
    let results = []

    for (const key in res) {
    const count = res[key];
    const id = key.slice(0, 1)
    const day = key.slice(1, 24)
    const price = key.slice(24)
    results.push({
    id: id,
    name: day,
    price: price,
    count: count
    })
    }
    console.log(results)
    order.innerHTML+=results[0];
    }
</script>
</body>
</html>

Is it possible to write if conditions in SCSS with v-bind in Vue 3?

<script setup lang="ts"
  interface Props {
    hoverEnabled: boolean;
  }

  const { hoverEnabled = false } = defineProps<Props>();

</script>

  <div class="layout-block">
    <slot />
  </div>

<style lang="scss" scoped>
  .layout-block {
    background-color: red;
    transition: background-color 0.2s ease-in-out;

    //@if v-bind(hoverEnabled) == "true" - as i know v-bind returns string so tried this too
    @if v-bind(hoverEnabled) {
      &:hover {
        background-color: blue;
      }
    }
  }
</style>

I know i can do this with class, but I’m curios if this is possible and how it’s done

I want to get points of respectived logged in user to be displayed from database corresponding to its push key i tried many ways but i just couldn’t make it possible here is my code

const autoid=firebase.database().ref("user").push().key;


    firebase.database().ref("/").child(autoid).set({
    email :email,
    password : password, 
    points :"500", 
    Id:autoid 
   })

And below is my firebase realtime database picture
Realtime database

Im making a site, with a lot of user registration, needed in practice, where the least amount of clicks is needed. Im making text input fields, which only need 1 charachter, before jumping to the next registration. However, these text input fields needs to be able to disable. This have I solved by using checked boxes and a function. My problem now comes, when needing to skip disabled text input fields: Lets say text input 2 is disabled, the cursor needs to jump from text input 1 to text input 3.

<form >
  <input type="text" id="yourText1" enabled maxlength="1"  onkeyup="jump(this,'yourText2')"/>
<input type="checkbox" id="yourBox1" checked onmousedown="this.form.yourText1.disabled=this.checked"/>
 </form>

 <form >
  <input type="text" id="yourText2" enabled maxlength="1"  onkeyup="jump(this,'yourText3')"/>
<input type="checkbox" id="yourBox2" checked onmousedown="this.form.yourText2.disabled=this.checked"/>
 </form>

 <form >
  <input type="text" id="yourText3" enabled maxlength="1"  onkeyup="jump(this,'yourText4')"/>
<input type="checkbox" id="yourBox3" checked onmousedown="this.form.yourText3.disabled=this.checked"/>
 </form>

 <form >
  <input type="text" id="yourText4" enabled maxlength="1"  onkeyup="jump(this,'yourText1')"/>
<input type="checkbox" id="yourBox4" checked onmousedown="this.form.yourText4.disabled=this.checked"/>
 </form>



 <script>
  function jump(field, automove) {
    if (field.value.length >= field.maxLength)
      {document.getElementById(automove).focus();}
    
    }
</script>

I am trying to delete some cookies BEFORE MY REQUEST IS SENT to my backend so I set expiration date for those cookies to be Thu, 01 Jan 1970 00:00:00 UTC, expecting for my backend service to not see any of those cookies when handling the request.

The process to delete cookies, as far as I know, is to set the expiration date of the cookies to be a past date (As I am doing) but for some reason cookies seem to be still alive.

This is what I currently have:

let badCookies = ['cookieName1', 'cookieName2', 'cookieName3'];
      badCookies.forEach((cookieName) => {
          document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
        });

if(GetCookie('cookieName1') === null) {
    // Must fall here since cookieName1 has been forced to expire
} else {
    // ERROR: cookie still alive, I am actually falling here that's the main issue
}

I don’t really know what can be wrong, a simple process keeps causing problems and I cannot find any solution for this. I have searched in several websites but the answer for delete the cookies are always the same, setting the expiration date to force cookie to be deleted before making a request.

The process is described here:

Delete cookie by name?

and also here:

https://www.w3schools.com/js/js_cookies.asp

I have tried both strings without success.

I am using this to check for cookie to see if it is still valid:

Check if cookie is still valid

Sorry if this question seems like duplicate but none of the answers in similar stack overflow posts could help me that’s why I decided to post my own question.

Thanks in advance.

I learn that there are three queue in Event Loop.

1. macrotaskqueue

• related with setTimeout, setInterval, event(user gesture) task, event handler, network response etc..

2. microtaskqueue

• related with MutationObserver, Object.observe, Promise
• have higher priority than mactotask queue
• main thread work on this queue until it is empty
• rendering will be delayed until this queue is empty
• a task inserted into microtaskqueue in processing microtask will be executed at that iteration ( = microtaskqueue should be empty before going next iteration or rendering)

3. animationframequeue

• callback function of requestAnimationFrame() is inserted in this queue
• a task inserted into animationframequeue will be executed at next iteraction(unlike microtaskqueue)
• tasks in this queue will be processed right before rendering

Yes,, But What I want to know is that

• Is microtaskqueue really needed?
• What is practical(useful) example of using microtaskqueue?
• Why the computer guys made this queue? what’s the motivation?

Check please, I need your helps

I use eval for some testing outside of the code or console. However, it doesn’t tell me if it errored or the result with the error. It just shows the error in the console, without telling me. As a result, whenever the bot doesn’t respond to my eval, I have to go all the way to the coding place and restart it to have the bot online again.

I’ve tried to modify the catch script, like removing (err) in catch (err).

Here’s my code:

const args = message.content.split(" ").slice(1);

  if (message.content.startsWith(`${p}eval`)) {
    if (message.author.id !== "821682594830614578") {
      message.channel.send(`Eval command can't be used by users, since the command can do anything, even deleting the files of code from a bot.`)
    } else {
      try {
        const evaled = eval(args.join(" "));
        let cleaned = await clean(client, evaled);
        const embedEval = new MessageEmbed()
          .setTitle('Eval succeeded')
          .setColor('#00ff8f')
          .addField('Result:', ````jsn${cleaned}n````, false)
          .setTimestamp()
          .setFooter({ text: 'Eval has been succeded.' })
        
        message.channel.send({ embeds: [embedEval] });
      } catch {
        message.channel.send(``ERROR` ```xln${cleaned}n````);
      }
    }
  }