Category: javascript

I am trying to setup a webpack configuration for the first time. I am getting the error “Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema” when i run the app. Here is the code in my webpack.config.js file.

const path = require("path");
const webpack = require("webpack");

const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const IS_DEVELOPMENT = process.env.NODE_ENV === "dev";

const dirApp = path.join(__dirname, "app");
const dirStyles = path.join(__dirname, "styles");
const dirAssets = path.join(__dirname, "assets");

console.log(dirApp, dirAssets, dirStyles);

Here is the code in my webpack.config.development.js file

const path = require("path");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const { merge } = require("webpack-merge");
const config = require("./webpack.config");

module.exports = merge(config, {
  node: "production",
  output: {
    path: path.join(__dirname, "public"),
  },

  plugins: [new CleanWebpackPlugin()],
});

I want to conditionally render my component named Login and Menubar according to the isLogin state.

I want to render either the login page or the Menubar page according to the isLogin state.

If isLogin is false then render the login page either render the menubar page.

I use the “Ternary” Operator for this.

Now the problem is that when I press the login button in the Login component, the gotoMenu function calls the Handler function which is in App.js and I passed this function as Props in the Login component.

It revokes the Handler function, it also changes the isLogin state to true, and renders the Menubar page for a second, and then again Login Page appears.

I can’t figure out what happened.

Here is App.js Code

import React from 'react'
import Navbar from './components/Navbar';
import Menubar from './components/Menubar';
import Login from './components/Login';
import {
  useState
} from 'react';

const App = () => {
  const [isLogin, setisLogin] = useState(false);
  const Handler = () => {
    console.log("In app");
    setisLogin(true);
  }


  return ( <
    >
    <
    Navbar / > {!isLogin ? < Login Handler = {
        Handler
      }
      /> : <Menubar/ >
    }

    <
    />
  );
}
export default App

Button code in the Login component

<button onClick={goTOMenu} className='font-mono  text-white text-4xl text-center'>Login</button>

Login component’s gotoMenu function code:-

const Login = ({ Handler }) => {
    const goTOMenu = () => {
      console.log("switching");
      Handler();
    }
}

Hi I am new to mongodb trying to update date fields in array of objects.

Below I have mentioned my model and I have mentioned my query, it’s working for start_time and end_time but not update array of objects but I need to update dateTime field which is in objects in time_slots array.

This is my mongodb model

db={
  "teacher": [
    {
  "_id": "6434cf" ,
  "start_time":2023-03-22T07:00:25.787+00:00 ,
  "end_time":2023-03-22T10:00:35.604+00:00,
  
  "duration": "15min",
  "time_slots": [
    {
      "sl_no": 1,
      "dateTime": 2023-03-22T06:30:25.787+00:00
    },
    {
      "sl_no": 2 ,
      "dateTime":2023-03-22T06:45:25.787+00:00
    }
  ],
},
    {
  "_id": "6434ctd" ,
  "start_time":2023-03-23T07:00:25.787+00:00 ,
  "end_time":2023-03-23T10:00:35.604+00:00,
  
  "duration": "20min",
  "time_slots": [
    {
      "sl_no": 1,
      "dateTime": 2023-03-23T06:30:25.787+00:00
    },
    {
      "sl_no": 2 ,
      "dateTime":2023-03-23T06:50:25.787+00:00
    }
  ],
}
  ],
}

My query for updating start_time and end_time

updateOne(
    { _id:id  },
    [{ $set: { start_time: { $dateAdd: { startDate: "$start_time", unit: "minute", amount: hours } } ,end_time: { $dateAdd: { startDate: "$end_time", unit: "minute", amount: hours } },},}],

this is my desired output if a user wants to delay 1 hour

{
  "_id": "6434cf" ,
  "start_time":2023-03-22T08:00:25.787+00:00 ,
  "end_time":2023-03-22T11:00:35.604+00:00,
  
  "duration": "15min",
  "time_slots": [
    {
      "sl_no": 1,
      "dateTime": 2023-03-22T07:30:25.787+00:00
    },
    {
      "sl_no": 2 ,
      "dateTime":2023-03-22T07:45:25.787+00:00
    }
  ],
}

it should increase 1 hour in start_time, end_time and in dateTime filed in array.

Everytime I try to run the debugger in VS code its say configuration javascript debugger terminal is missing in “launch json”. is there a way to fix this? or should I be using a different debugger? my debugger is Javascript debugger Nightly.

I don’t know much about json settings, but I’ve tried to re-installing it whicih did nothing, I have never been able to use it and it has been this way since I got this extension and I’m starting to believe it’s the extension.

I am having this issue in my Nextjs where I am unable to freeze the page from scrolling even after I set the document.body.style.overflow to hidden.

This is the code:
https://codesandbox.io/p/sandbox/gallant-leavitt-i0fz2c?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A28%2C%22endLineNumber%22%3A13%2C%22startColumn%22%3A27%2C%22startLineNumber%22%3A13%7D%5D

As you can see:
In lines 11-14 where I click the freeze button, it disables scrolling.
enter image description here

Result:
The page is still scrollable.

Please let me know the solution to this.

After taking a picture using the video recording mode on an Android 10 camera, the image file size is 0 and the image is also broken.

Here’s my HTML:

<button class="btn-file-upload">Upload File</button>
<input type="file" name="file" id="file">

Here’s my Javascript:

$('.btn-file-upload').on('click', function() {
  $('#file').click();
})
$(document).on('change', '#file', function(event) {
  var allowedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
  var input = event.target;
  console.log(input.files[0])
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var blob_url = window.URL.createObjectURL(input.files[0]);
      var text = `
        <div class="text-left">
          type => `+input.files[0].type+` <br>
          size => `+input.files[0].size+` <br>
          name => `+input.files[0].name+` <br>
          <img src="`+blob_url+`" width="100">
        </div>
      `;
      Swal.fire({
        html: text,
        icon: 'warning',
      });
      if(allowedTypes.indexOf(input.files[0].type) != -1) {
        console.log("Valid")
      } else {
        console.log("Invalid")
      }
      event.target.value = '';
    }
    reader.readAsDataURL(input.files[0]);
  }
})

Here’s the sample jsfiddle: https://jsfiddle.net/f4zatLoh/1/

Why the size is 0 and the image was broken? How to fix it?

I recently created a bot in node.js, but its super super heavy, uses 100% cpu! I use node-fetch, async.parallel and setInterval, im not sure why it uses 100% cpu, it might be maybe because setInterval queues? Idk. Here is my code though:

async.parallel({
  task1: function () {
    setInterval(function () {
      let itemRandomizer =
        config.generalInfo.itemList[
          Math.floor(Math.random() * config.generalInfo.itemList.length)
        ];
      let cookieRandomizer =
        randomCookies[Math.floor(Math.random() * randomCookies.length)];
      fetch(url, {
        method: "GET",
        agent,
        headers: {
          "Content-Type": "application/json",
          cookie: `cookie=${cookieRandomizer}`,
        },
      })
        .then((res) => res.json())
        .then((json) => {
          checks++;
          //console.log(checks, itemRandomizer, json.data[0].price)
        })
        .catch((err) => {});
    }, 0);
  },
  task2: function () {
    /* same code as task 1 (total 20 tasks) */
  },
});

I do not want to increase the interval, want it to stay as fast as it can, but 100% cpu is unreal, i dont want it to use that much, any work around? Is setInterval cpu-intensive?
Threads consume more CPU than async.parallel, so thats why i dont use threads.

I have a simple node.js with handlebars proyect and I started to do Tests with jest and superTest and I dont know how can I test this POST request with body and file data:

app.post('/new-team', upload.single('shield'), (req, res) => {
  const teams = JSON.parse(fs.readFileSync('./data/teams.db.json'));
  const {
    name, tla, country, address, website, founded,
  } = req.body;
  const state = teams.find((team) => team.tla === tla.toUpperCase());
  if (state) {
    res.render('new-team', {
      layout: 'main',
      data: {
        error: 'Ops! The team you want to create has an existing TLA, try it again',
      },
    });
  } else {
    const newTeam = {
      area: {
        name: country,
      },
      name,
      tla: tla.toUpperCase(),
      country,
      **crestUrl: `/shields/${req.file.filename}`, //HERE IS MY PROBLEM**
      address,
      website,
      founded,
    };
    teams.push(newTeam);
    fs.writeFile('./data/teams.db.json', JSON.stringify(teams), (err) => {
      res.status(200).json({
        status: 'success',
        data: {
          teams,
        },
      });
    });
    res.redirect('/team-created');
  }
  res.render('new-team', {
    layout: 'main',
  });
});

I made this to try to send the body:

  test('POST /new-team', async () => {
    const newTeam = {
      name: 'rosario central',
      tla: 'CARC',
      country: 'Argentina',
      address: 'colombress 1245',
      website: 'www.central.com',
      founded: '1886',
    };
    const response = await request(baseURL).post('/new-team').send(newTeam);
    expect(response.status).toBe(200);
  });

but I dont know how to send the data to have req.file.filename

because, I cant access to req.file.filename

Given that JavaScript is single threaded by nature, would there be any performance difference between the following approaches to read a message?

 // Approach A
 const listener = new Promise(async (res)=> {
     while(listening) {
          const socket = await acceptAsync()
          const handler = new Promise(async (res)=> {
              while(socket.connected) {
                  const message = await handler.readAsync()
              }
          })
     }
 })
 
 // Approach B
 on("connection", (socket)=> {
     socket.on("data", (message)=> {
         ...
     })
 })

Although it’s clear that the second approach would be easier to read, I’d like to know if there would be any serious performance issues associated with the first approach since JavaScript is single threaded.

I am synching a div scrolling effect animation with an audio, the synching works fine when I set the element.style.animation property to ‘none’ when the audio is paused. The problem is when I try to pause the animation instead when the audio is paused. When I pause and play multiple times, the animation is not synched with the audio anymore (animation is too advanced).

//This is the audio element
const pupHymn = document.querySelector(".pup-hymn");
//This is the container div of the lyrics
const hymnLyrics = document.querySelector(".lyrics");

const init = () => {
    pupHymn.volume = 0.3;
    //Sync when playing manually 
    pupHymn.addEventListener('play', () => {
        audioTime = pupHymn.currentTime;
        playbackRate = pupHymn.playbackRate;
        hymnLyrics.style.animation = `scroll-effect ${160/playbackRate}s ${(12-audioTime)/playbackRate}s forwards running`;
    );

    pupHymn.addEventListener('pause', () => {
        hymnLyrics.style.animation = 'none'; 
    });

//This works fine.
pupHymn.addEventListener('pause', () => {
        hymnLyrics.style.animation = 'none'; });
}

But when I paused the animationPlayState instead, it won’t synch properly when I pause and play multiple times.

pupHymn.addEventListener('pause', () => {
        hymnLyrics.style.animationPlayState = 'paused'; });

I already have tried logging the animation property of my div when the audio will be played, even though the delay is still a positive value, the animation started already.

ESLint no-multi-spaces rule is not working in Vue methods or computed when using multiple spaces between function name and paren.
It only working in between paren and curly.

Screenshot: no-multi-spaces working only between paren and curly

Screenshot: My expected result(it’s not Vue.)

I also tried vue/no-multi-spaces and space-before-function-paren.
But vue/no-multi-spaces not working at all,
and space-before-function-paren can’t fix number of spaces.

This is my rule.
'no-multi-spaces': ['error', { ignoreEOLComments: true }]

How can I use like below?

/* GOOD */
foo () {
}

/* BAD */
foo() {
}
bar     () {
}

I am trying to create this API in postman. The access token must refresh every hour and I have scheduled a run for it. It works well however, the variable doesn’t update with the new access token.When I manually run it, it works fine. Here is the code I have.

`let responseBodyJSON = pm.response.json();

///pm.environment.set(“access_token”, responseBodyJSON.access_token);

pm.collectionVariables.set(“authtoken”, responseBodyJSON.access_token);

console.log(“Access token: ” + pm.collectionVariables.get(“authtoken”));`

I tried changing the variable from collection to global and the problem remained.

I can make a javascript based paypal buy button usign this code (not shown the API key src variable)

paypal.Buttons().render('#paypal-button-container');
  paypal.Buttons({
    createOrder: function (data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    }
  }).render('#paypal-button-container');
  paypal.Buttons({
    createOrder: function (data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.01'
          }
        }]
      });
    },
    onApprove: function (data, actions) {
      // This function captures the funds from the transaction.
      return actions.order.capture().then(function (details) {
        // This function shows a transaction success message to your buyer.
        alert('Transaction completed by ' + details.payer.name.given_name);
      });
    }
  }).render('#paypal-button-container');

I’d like to render these buttons using React.

  render() {
    return (

      <button className="empty-cart-button" onClick={this.handleEmptyCart}>Empty Cart</button>
      <div className="paypal-buttons-container">
        <div id="paypal-button"></div>
      </div>
    );
  }

How can I render these correctly in the React Render function?

|This is the Form|

   <v-form ref="formzz">
              <v-row class="mt-3">
                <v-col cols="12" sm="6" md="4">
                  <v-text-field label="First Name" hint="Input your first name" :rules="inputRule"
                    v-model="dataItem.firstNameBor" :prepend-inner-icon="userIcon" required outlined                                            dense
                    color="warning">
                  </v-text-field>
                </v-col>
                <v-col cols="12" sm="6" md="4">
                  <v-text-field label="Middle Initial" hint="Input your middle initial"
                    v-model="dataItem.middleNameBor" :prepend-inner-icon="userIcon" required outlined dense
                    color="warning" :rules="middleRule">
                  </v-text-field>
                </v-col>
                <v-col cols="12" sm="6" md="4">
                  <v-text-field label="Last Name" hint="Input your last name" v-model="dataItem.lastNameBor"
                    :prepend-inner-icon="userIcon" required outlined dense color="warning" :rules="inputRule">
                  </v-text-field>
                </v-col>
                <v-col cols="8">
                  <v-select :items="divisionsData" label="Choose Division" outlined v-model="dataItem.divisionBor"
                    dense color="warning" :rules="selectRule">
                  </v-select>
                </v-col>
                <v-col cols="4">
                  <v-menu ref="borMenu" v-model="borMenu" :close-on-content-click="false"
                    transition="scale-transition" offset-y max-width="290px" min-width="auto">
                    <template v-slot:activator="{ on, attrs }">
                      <v-text-field v-model="dataItem.dateBor" label="Date Borrowed" required outlined
                        :append-icon="dateIcon" dense hint="format: yyyy-mm-dd" v-bind="attrs" v-on="on"
                        color="warning" :rules="dateRule">
                      </v-text-field>
                    </template>
                    <v-date-picker v-model="dataItem.dateBor" @input="borMenu = false" color="warning">
                    </v-date-picker>
                  </v-menu>
                </v-col>

                <v-col cols="12">
                  <h4 class="text-start">Equipment/s to borrow:
                    <span v-if="!showCheckboxErrorMsg" class="text-caption red--text">Please select at least one
                      checkbox.</span>

                  </h4>
                  <div class="d-flex flex-row justify-space-between">
                    <v-checkbox label="Projector" value="Projector" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                    <v-checkbox label="Laptop" value="Laptop" v-model="dataItem.borEquipments" color="warning">
                    </v-checkbox>
                    <v-checkbox label="Microphone" value="Microphone" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                    <v-checkbox label="Document Reader" value="Document Reader" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                    <v-checkbox label="White Screen" value="White Screen" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                    <v-checkbox label="Extension Cord" value="Extension Cord" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                  </div>
                </v-col>
                <v-col cols="12">
                  <div class="d-flex flex-row justify-space-between align-center">
                    <v-checkbox color="warning" label="Others: " class="mb-6" value="Others"
                      v-model="dataItem.OthersBox4" name="InstallationBox" :checked="isOthersBoxChecked" >
                    </v-checkbox>
                    <!-- <v-text-field class="ml-4" hint="Please specify others to check/repair"
                      v-model="dataItem.OthersInput4" required outlined :disabled="!dataItem.OthersBox4" dense
                      color="warning" :rules="checkInputRule4">
                    </v-text-field> -->
                    <v-text-field class="ml-4" hint="Please specify others to check/repair"
                      v-model="dataItem.OthersInput4" required outlined :disabled="!dataItem.OthersBox4" dense
                      color="warning" :rules="checkInputRule4">
                    </v-text-field>
                  </div>
                </v-col>

                <v-col cols="12">
                  <div class="d-flex flex-row justify-space-between">
                    <v-textarea class="ml-4" label="Purpose" hint="Please specify your purpose" required
                      v-model="dataItem.purposeBor" outlined color="warning" :rules="inputRule"></v-textarea>
                  </div>
                </v-col>
              </v-row>
            </v-form>

|This is the edit item method

    async editItem(item) {

    this.itemIndex = this.items.indexOf(item);
    console.log(this.itemIndex)
    if (this.itemIndex > -1) {

      let datas = Object.assign({}, item);
      this.dataItem = datas
      this.dataItem.firstNameBor = datas.firstname;
      this.dataItem.middleNameBor = datas.middleinitial;
      this.dataItem.lastNameBor = datas.lastname;
      this.dataItem.divisionBor = datas.division;
      this.dataItem.dateBor = datas.date;
      this.dataItem.purposeBor = datas.purpose;
      this.dataItem.borEquipments = datas.borrowed;
      //console.log(this.dataItem.borEquipments)
      this.dataItem.OthersInput4 = datas.others;
      //console.log(datas.others)

      if(this.dataItem.OthersBox4){
        this.dataItem.OthersInput4 = true;
      
      }

      this.itemId = datas.id;
      this.docRef = doc(borColRef, this.itemId);
      this.showDelete = true;
    }
    this.dialog = true;
       },

It should check the checkbox of dataItem.OthersInput4 if there is a data. the checkbox has a v-model of dataItem.OthersBox4. When the edit button is clicked, it does not check the checkbox when it has data. There is only value with the corresponding input but the checkbox is not checked.

How do I make it check the checkbox (dataItem.OthersBox4) when the input(dataItem.OthersInput4) has value or data?

`help!!

enter image description here
enter image description here

`