Category: javascript

I am trying to access my store ($store) variable by importing it from the file
import store from "../store"
but it I am getting this error while console.log(store):

Uncaught ReferenceError: store is not defined
    at eval (eval at _callee$ (functions.services.js:1:1), <anonymous>:1:1)
    at _callee$ (functions.services.js?5215:46:1)
    at tryCatch (runtime.js?96cf:63:1)
    at Generator.invoke [as _invoke] (runtime.js?96cf:294:1)
    at Generator.eval [as next] (runtime.js?96cf:119:1)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3:1)
    at _next (asyncToGenerator.js?1da1:25:1)
    at eval (asyncToGenerator.js?1da1:32:1)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js?1da1:21:1)
eval @ VM388:1
_callee$ @ functions.services.js?5215:46
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ functions.services.js?5215:42
fetchF @ functions.services.js?5215:42
login @ SignIn.vue?c790:92
eval @ SignIn.vue?c790:49
eval @ runtime-dom.esm-bundler.js?830f:1457
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6737
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6746
invoker @ runtime-dom.esm-bundler.js?830f:357

Here is the file where I am using it: “functions.services.js”

import store from "@/store"

export function fetchF(link, body, method, isTokenNeeded = true, isJSON = true) {
    return new Promise(async (resolve, reject) => {
        var access_token = getLocalStorage("access_token");
        var refresh_token = getLocalStorage("refresh_token");
        if (!(access_token == null && refresh_token == null) || isTokenNeeded == false) {
            fetch(store.serverLink + link, {
                method,
                headers: {
                    authorization: `Bearer ${access_token} ${refresh_token}`,
                    Accept: "application/json",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(body),
            }).then((response) => response[isJSON == true ? "json" : "text"]()).then(rsp => {
                setLocalStorage("access_token", rsp.access_token);
                setLocalStorage("refresh_token", rsp.refresh_token);
                resolve(rsp);
            }).catch(error => {
                setLocalStorage("access_token", "");
                setLocalStorage("refresh_token", "");
                store.dispatch("changeData", {
                    option: "alertEl",
                    value: "Please log in, and try again",
                });
                return resolve({ isSuccess: false, err: "Please log in, and try again" });
            })
        } else {
            if (!(access_token == null && refresh_token == null) && isTokenNeeded == true) {
                store.dispatch("changeData", {
                    option: "alertEl",
                    value: "Please log in, and try again",
                });
            }
            return resolve({ isSuccess: false, err: "Please log in, and try again" });
        }
    });
}

here is the store file “index.js”:

import { createStore } from 'vuex'
var isDev = true
export const store = createStore({
  state: {
    serverLink: isDev ? "http://localhost:3000" : "http://.......:3000",
    isAuth: false,
    isInitiated: false,
    alertEl: ""
  },
  mutations: {
  },
  getters: {
    getAuthStatus: state => {
      return state.isAuth
    },
    getInitiatedStatus: state => {
      return state.isInitiated
    }

  },
  setters: {

  },
  actions: {
  },
  modules: {
  }
})

I tried to use it in router.js too, for authenticating routes before entering them but the same issue happens

The condition of while loop, if it’s while (results2[nextVisit]), it log nothing

function useTime(i: number, cb: (num: number) => void) {
  setTimeout(cb, 1000 * Math.round(Math.random()), i * 2);
}

const total = 10;
const results2 = new Array(total);
let nextVisit = 0;
let countTasks = 2;

for (let i = 0; i < total; i++) {
  useTime(i, (result) => {
    results2[i] = result;

    if (results2[nextVisit] !== undefined) {
      console.log(`Tasks ${countTasks}`);
      countTasks++;
      // If the while loop condition is
      // results2[nextVisit], it log nothing
      // while (results2[nextVisit]) {
      while (results2[nextVisit] !== undefined) {
        console.log(nextVisit + "->" + results2[nextVisit]);
        nextVisit++;
      }
    }
  });
}

I am using the google chrome to debugging the javascript source file, now I could debbugging the output js file, but the output js file is not human friendly readable. It looks like this:

from the google chrome console, I can see the call stack, and the google chrome tips shows that the source map are avaliable. But how to navigate the the js source file with current debugging line? I already type command + P in macOS but just shows the source files, I did not know which line should to navigate. the call stack only show the output js file line number.

Tengo el siguiente array de objetos y me gustaría agruparlos por mes, año y U_Subrubro. Intenté con reduce pero no logro hacerlo:

const reducedDocs = array.reduce((acc, curr) => {
const { ANIO, MES, U_Subrubros, Cantidad } = curr;
const [year] = ANIO,
const [month] = MES,


if (!acc[U_Subrubros]) acc[U_Subrubros] = {};
if (!acc[U_Subrubros][year]) acc[U_Subrubros][year] = {};
if (!acc[U_Subrubros][year][month]) acc[U_Subrubros][year][month] = 0;

acc[U_Subrubros][year][month] += Cantidad;

return acc;

}, {});

console.log(‘Items Cantidad’,reducedDocs);

Mi objeto es el siguiente:

[
{
    "ANIO": 2022,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 45,
    "MontoVenta": 146446.44
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 14,
    "MontoVenta": 18061.96
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 43,
    "MontoVenta": 67809.81
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 7,
    "MontoVenta": 21404.95
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 2479.33
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 3,
    "MontoVenta": 3222
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 69,
    "MontoVenta": 109338.71
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 48,
    "MontoVenta": 54374.69
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 10,
    "MontoVenta": 32231.4
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 4,
    "MontoVenta": 5041.33
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3719.01
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 49,
    "MontoVenta": 69132.12
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 14,
    "MontoVenta": 16198.28
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 10,
    "MontoVenta": 32231.4
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 2,
    "MontoVenta": 1776.85
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 47,
    "MontoVenta": 73140.37
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 7,
    "MontoVenta": 5619.8
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 7,
    "MontoVenta": 8099.14
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 1,
    "MontoVenta": 3471.07
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 6,
    "MontoVenta": 10247.94
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 2,
    "MontoVenta": 6942.14
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 1,
    "MontoVenta": 826.44
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 24,
    "MontoVenta": 36529.07
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 1,
    "MontoVenta": 1157.02
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3057.85
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 6,
    "MontoVenta": 20826.42
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 4,
    "MontoVenta": 3223.12
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 16,
    "MontoVenta": 56198.27
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 63,
    "MontoVenta": 104214.9
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 3,
    "MontoVenta": 10909.09
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 5,
    "MontoVenta": 4539.65
},
{
    "ANIO": 2020,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 46,
    "MontoVenta": 89173.48
},
{
    "ANIO": 2020,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 2,
    "MontoVenta": 7603.31
},
{
    "ANIO": 2020,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 12,
    "MontoVenta": 45206.5
},
{
    "ANIO": 2020,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 15,
    "MontoVenta": 20701.84
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 62,
    "MontoVenta": 128512.34
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 17,
    "MontoVenta": 66867.65
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 16,
    "MontoVenta": 17768.65
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3471.08
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 73,
    "MontoVenta": 152396.63
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 17,
    "MontoVenta": 17355.42
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 23,
    "MontoVenta": 94851.08
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 4132.23
},
{
    "ANIO": 2020,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 15,
    "MontoVenta": 15371.94
},
{
    "ANIO": 2020,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 56,
    "MontoVenta": 117768.55
},
{
    "ANIO": 2020,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 10,
    "MontoVenta": 41239.6
},
{
    "ANIO": 2020,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 41,
    "MontoVenta": 113719.2
},
{
    "ANIO": 2020,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 23,
    "MontoVenta": 37892.67
},
{
    "ANIO": 2020,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 7,
    "MontoVenta": 31363.6
},
{
    "ANIO": 2020,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 18,
    "MontoVenta": 22892.62
},
{
    "ANIO": 2020,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 40,
    "MontoVenta": 104545.66
},
{
    "ANIO": 2020,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 7,
    "MontoVenta": 37603.3
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 20,
    "MontoVenta": 107438
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 23,
    "MontoVenta": 36115.79
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 76,
    "MontoVenta": 192314.45
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 2,
    "MontoVenta": 3305.8
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000121",
    "Cantidad": 1,
    "MontoVenta": 888.43
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 54,
    "MontoVenta": 142975.48
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 10,
    "MontoVenta": 13512.43
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 14,
    "MontoVenta": 72728
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 14,
    "MontoVenta": 16198.28
},
{
    "ANIO": 2021,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 49,
    "MontoVenta": 131900.91
},
{
    "ANIO": 2021,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 2,
    "MontoVenta": 2644.62
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 5,
    "MontoVenta": 4539.65
},
{
    "ANIO": 2021,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 12,
    "MontoVenta": 79338.84
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 3,
    "MontoVenta": 10909.09
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 2,
    "MontoVenta": 1776.85
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 7,
    "MontoVenta": 5619.8
},
{
    "ANIO": 2021,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3305.79
},
{
    "ANIO": 2021,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 5,
    "MontoVenta": 8428.56
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 17,
    "MontoVenta": 66867.65
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 23,
    "MontoVenta": 94851.08
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 4132.23
},
{
    "ANIO": 2020,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 10,
    "MontoVenta": 41239.6
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 7,
    "MontoVenta": 8099.14
},
{
    "ANIO": 2021,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000121",
    "Cantidad": 1,
    "MontoVenta": 3719.01
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 6,
    "MontoVenta": 20826.42
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 2,
    "MontoVenta": 6942.14
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 1,
    "MontoVenta": 1157.02
},
{
    "ANIO": 2020,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 7,
    "MontoVenta": 31363.6
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 2,
    "MontoVenta": 3305.8
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3719.01
},
{
    "ANIO": 2021,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 3,
    "MontoVenta": 4958.68
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3471.08
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 2,
    "MontoVenta": 3305.8
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 1,
    "MontoVenta": 3471.07
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000121",
    "Cantidad": 1,
    "MontoVenta": 888.43
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 1,
    "MontoVenta": 826.44
},
{
    "ANIO": 2021,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3719.01
},
{
    "ANIO": 2021,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 8,
    "MontoVenta": 13387.23
},
{
    "ANIO": 2022,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 5,
    "MontoVenta": 33057.85
},
{
    "ANIO": 2021,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 3,
    "MontoVenta": 4958.67
},
{
    "ANIO": 2021,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 8,
    "MontoVenta": 52892.56
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000121",
    "Cantidad": -1,
    "MontoVenta": -888.43
}

]

Como podría hacer para agrupar por ANIO, MES y U_Subrubros? Estoy seguro que es con reduce pero no se como

I have the following code

export default function  monitoring: Monitoring) {
  async function GET(req: express.Request, res: express.Response, next: express.NextFunction) {
    // Create a custom histogram metric
    const httpRequestTimer = monitoring.getHttpRequestDuration();    
    const end = httpRequestTimer.startTimer();

and I am trying to use sandbox to mock the monitoring class and httpRequestTimer.startTimer();

So I wrote

 beforeEach(() => {
    monitoring = <Monitoring><unknown>({
      getHistagram: () => {},
      getPromClient: () => {},
      getHttpRequestDuration: ()=>{}
    });

    GET = status(monitoring).GET;
  });
it('Should return status call when xxx is not finished and pages are 0', async () => {
  const searchMetadata = {
    details: {},
    id: `111`
  };
  const metadata = {
    result_count: 0
  };
  sandbox.mock(monitoring).expects('getHttpRequestDuration').resolves({
    startTimer: () => {}
  });
  await GET(request, res);
});

As soon as I run it I get

  1) test status API
         Should return status call when xxx is not finished and pages are 0:
     TypeError: httpRequestTimer.startTimer is not a function

Also when I console.log(httpRequestTimer) I see

Promise { { startTimer: [Function: startTimer] } }

Any idea how I can mock this scenario?

I want to build a dashboard for a blog. I have a page, listing all blog posts using a component for each list item. Now, inside each list item, I have a button to delete the post.
So far, everything is working. The post gets deleted, and if I reload the page, it is gone from the list. But I can’t get it to re-render the page automatically, after deleting a post. I kind of cheated here using window.location.reload() but there has to be a better way?

This is my Page to build the list of all Posts

import {
  CCol,
  CContainer,
  CRow,
  CTable,
  CTableHead,
  CTableRow,
  CTableHeaderCell,
  CTableBody,
} from "@coreui/react";
import { useState, useEffect } from "react";
import DashboardSidebar from "../../components/dashboard/Sidebar";
import { getAllBlogPosts } from "../../services/blogService";
import BlogListItem from "../../components/dashboard/blog/BlogListItem";
import "./Dashboard.scss";

const AdminBlogListView = () => {
  const [blogposts, setBlogposts] = useState([]);

  useEffect(() => {
    getBlogPosts();
  }, []);

  async function getBlogPosts() {
    const response = await getAllBlogPosts();
    setBlogposts(response.data);
  }
  // console.log(blogposts);
  return (
    <div className="adminContainer">
      <div className="adminSidebar">
        <DashboardSidebar />
      </div>
      <div className="adminContent">
        <CContainer fluid>
          <CRow className="mb-3">
            <CCol>
              <CTable>
                <CTableHead>
                  <CTableRow>
                    <CTableHeaderCell scope="col">#</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Titel</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Content</CTableHeaderCell>
                    <CTableHeaderCell scope="col"></CTableHeaderCell>
                  </CTableRow>
                </CTableHead>
                <CTableBody>
                  {blogposts.map((post) => {
                    return <BlogListItem key={post._id} post={post} />;
                  })}
                </CTableBody>
              </CTable>
            </CCol>
          </CRow>
        </CContainer>
      </div>
    </div>
  );
};

export default AdminBlogListView;

And this is the BlogListItem Component

import { useState, useEffect } from "react";
import {
  CTableRow,
  CTableHeaderCell,
  CTableDataCell,
} from "@coreui/react";
import CIcon from "@coreui/icons-react";
import * as icon from "@coreui/icons";
import {
  deleteBlogPost,
  getBlogPostById,
  // updateBlogPost,
} from "../../../services/blogService";
import { useNavigate } from "react-router-dom";

const BlogListItem = (props) => {
  const id = props.post._id;
  const [visible, setVisible] = useState(false);
  const [post, setPost] = useState({
    title: "",
    content: "",
  });

  useEffect(() => {
    getBlogPostById(id)
      .then((response) => setPost(response.data))
      .catch((error) => console.log(error));
  }, []);

  const handleDelete = async (event) => {
    event.preventDefault();
    const choice = window.confirm("Are you sure you want to delete this post?");
    if (!choice) return;
    await deleteBlogPost(post._id);
    window.location.reload();
  };

  return (
    <>
      <CTableRow>
        <CTableHeaderCell scope="row">1</CTableHeaderCell>
        <CTableDataCell>{post.title}</CTableDataCell>
        <CTableDataCell>{post.content}</CTableDataCell>
        <CTableDataCell>
          <CIcon
            icon={icon.cilPencil}
            size="lg"
            onClick={() => setVisible(!visible)}
          />
          <CIcon
            icon={icon.cilTrash}
            className="deleteButton"
            size="lg"
            color=""
            onClick={handleDelete}
          />
        </CTableDataCell>
      </CTableRow>
    </>
  );
};

export default BlogListItem;

What can I do instead of window.location.reload() to render the AdminBlogListView after deleting an item? I tried using useNavigate() but that doesn’t do anything

Thanks in advance 🙂

I’m trying to authenticate user. Sign-up is working fine but in sign-in req.body.email is undefined and I can’t figure out why.
Here is my code for sign-in:

router.post('/signin',(res,req,next)=>{
    User.findOne({ email: req.body.email })
    .exec()
    .then(user => {
        if(user.length<1){
            return res.status(401).json({
                message: 'Auth Failed'
            })
        }
        bcrypt.compare(req.body.password, this.user[0].password, (err,result)=>{
            if(err){
                return res.status(401).json({
                    message: 'Auth Failed'
                });
            }
            if(result){
                return res.status(200).json({
                    message: 'Auth Successful'
                });
            }
            res.status(401).json({
                message: 'Auth Failed'
            });
        })
    })
    .catch(err => {
        console.log(err);
        res.status(500).json({
            error: err
        });
    })
    
})

On Postman:

{
    "email": "[email protected]",
    "password": "12345"
}

Console Error:

TypeError: Cannot read properties of undefined (reading 'email')
    at C:UsersSJPCauthroutesuser.route.js:62:37
    at Layer.handle [as handle_request] (C:UsersSJPCauthnode_modulesexpresslibrouterlayer.js:95:5)
    at next (C:UsersSJPCauthnode_modulesexpresslibrouterroute.js:137:13)
    at Route.dispatch (C:UsersSJPCauthnode_modulesexpresslibrouterroute.js:112:3)
    at Layer.handle [as handle_request] (C:UsersSJPCauthnode_modulesexpresslibrouterlayer.js:95:5)
    at C:UsersSJPCauthnode_modulesexpresslibrouterindex.js:281:22
    at Function.process_params (C:UsersSJPCauthnode_modulesexpresslibrouterindex.js:341:12)
    at next (C:UsersSJPCauthnode_modulesexpresslibrouterindex.js:275:10)
    at Function.handle (C:UsersSJPCauthnode_modulesexpresslibrouterindex.js:174:3)
    at router (C:UsersSJPCauthnode_modulesexpresslibrouterindex.js:47:12)

I have tried req.query.email but it also thrown the same error.

In the case of JS and NodeJS in particular, I know that there is one thread that runs the event loop, and async calls are delegated to the kernel (which might handle it with multi-threading behind the scenes, but that’s abstracted for us).

However, what about other languages, like Java/Kotlin?
Is there a similar mechanism to prevent using additional threads? Or is that the only way to go?

In case it is, it makes me wonder, is there a difference in such languages between standard multi-threading and async programming? or is it essentially the same?

I want to be able to “embed” a web page, and be able to manipulate the resulting page (click(), textContent etc).

I now understand that’s not possible for security reasons. I tried iframe, embed, objects.

Is it possible to fetch the HTML of the page, insert that into a frame / div, and then manipulate that ‘recreated’ page? I guess I’d need to write a function to add parts to the code so it all looks like a faithful recreation (I don’t think I need help with this part).

I have been struggling on how to add a static linkable image as the last slide at the end of a slideshow before it loops back to the beginning. Any help is greatly appreciated.

                        <#assign photoIndex = 0>
                        <#assign albums = listingElementDetail.getAlbums('${urlPrefix}')>
                        <#if (albums)?has_content>
                        <div id="cont-gallery">
                            <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">
                                <div class="slides"></div>
                                <a class="prev"><h4 class="icon-chevron-left" style="top: -8px; position: relative;"></h4></a>
                                <a class="next"><h4 class="icon-chevron-right" style="top: -8px; position: relative;"></h4></a>
                                <ol class="indicator"></ol><div class="indicator-container"></div>
                            </div>

                            <div id="links" style="display:none;">
                                <#if (albums)?has_content>
                                    <#list albums as album>
                                        <#list album.photos as photo>
                                                <a href="" title="${listingPropertyStreet!}, ${City!} ${StateName!}">
                                                    <img width="48" height="33" src="" alt="${Street!}, ${City!} ${StateName!}" />
                                                </a>
                                            <#assign photoIndex=photoIndex+1>
                                        </#list>
                                    </#list>
                                </#if>
                            </div>

                            <script src="<@resource.url '/static/lib/Gallery-2_15_2/js/blueimp-gallery.min.js'/>"></script>
                            <script>
                                document.getElementById('links').onclick = function (event) {
                                    event = event || window.event;
                                    var target = event.target || event.srcElement,
                                        link = target.src ? target.parentNode : target,
                                        options = {index: link, event: event},
                                        links = this.getElementsByTagName('a');
                                    blueimp.Gallery(links, options);
                                };

                                blueimp.Gallery(
                                    document.getElementById('links').getElementsByTagName('a'),
                                    {
                                        container: '#blueimp-gallery-carousel',
                                        carousel: true,
                                        stretchImages: "cover",
                                        startSlideshow: false,
                                        onslide: function (index, slide) {
                                            var thumbWidth = jQuery("#blueimp-gallery-carousel .indicator li").first().outerWidth(true);
                                            var thumbContMargin = parseInt(jQuery("#blueimp-gallery-carousel .indicator").css("margin-left"));
                                            var slideWidth = $j(slide).width();
                                            var numThumbs = $j('#blueimp-gallery-carousel .indicator li').length;
                                            var thumbContainerWidth = ((numThumbs) * thumbWidth) + (thumbWidth);

                                            jQuery("#blueimp-gallery-carousel .indicator").width(thumbContainerWidth);

                                            var currentThumb = $j('#blueimp-gallery-carousel .indicator li')[index];
                                            var currentThumbOffset = $j(currentThumb).position().left + (thumbWidth);
                                            if( thumbContainerWidth > slideWidth){
                                                if( currentThumbOffset > (slideWidth/2) ){
                                                    var offsetLeft = Math.min((currentThumbOffset - slideWidth/2), (thumbContainerWidth - slideWidth + (thumbContMargin/2)));
                                                } else {
                                                    offsetLeft = 0;
                                                }
                                                jQuery("#blueimp-gallery-carousel .indicator").animate({"left":"-" +offsetLeft + "px"}, 200);
                                            } else {
                                                jQuery("#blueimp-gallery-carousel .indicator").animate({"left":"-40px"}, 200);
                                            }
                                        }
                                    }
                                );
                            </script>
                        </div>
                        </#if>

I want a regex in Angular for validating string and decimal

It should allow only numbers up to two decimal places and restrict user to input 0 as first no.

I have created below regex which was working fine, but it is not restricting user to enter
0 as input.

For example Accepted input

2.34
2.05
234.67
77777.87

Not allowed

0
23.5666
24.677
String and special characters


validateBatchSizeForDecimal(event: any) {
    const reg = /^-?d*(.d{0,2})?$/;
    let input = event.target.value + String.fromCharCode(event.charCode);
    if (!reg.test(input)) {
      event.preventDefault();
    }
  }

trying to remove an object from array after using aggregate(). but im getting this error.
‘subCategory.remove is not a function’

const deleteSubCategory = asyncHandler(async (req, res) => {
 const subCategory = await Category.aggregate([{$unwind: "$SubCats"}, { $replaceRoot: {newRoot: '$SubCats'}}, {$match: {_id: ObjectId(req.params.id)}}])

 if (subCategory) {
     await subCategory.remove()
     res.json({ message: 'sub-category removed' })
 } else {
     res.status(404)
     throw new Error('sub-Category not found')
 }
})

results after aggregation:

[{
  _id: '61cae5daf5bfbebd7cf748ef'
  name: 'subcat 1',
  image: '/assets/images/vr-box-6203301_1920.jpg',
}]

array before aggregation:

[
 {
     _id: '61cae5daf5bfbebd7cf748ee'
     title: 'category 1',
     SubCats: [
         {
             _id: '61cae5daf5bfbebd7cf748ef'
             name: 'subcat 1',
             image: '/assets/images/vr-box-6203301_1920.jpg',
         },
         {
             _id: '61cae5daf5bfbebd7cf748fb'
             name: 'subcat 2',
             image: '/assets/images/galaxy-s20_highlights_kv_00.jpg',
         },
     ]
 },
]

is it saying ‘subCategory.remove is not a function because of the ‘[]’ in the results after aggregation. becasue i find that remove() works fine if the reulsts start with {}

I am trying to draw a chart by passing values for labels and data dynamically using char.js.

The chart.js module refuses to accept the labels when passed as a variable.
When I hardcode it, it works just fine.
The label variable prints out the values on the page and seems to be correct in format.

Very similar to the problem described in the below query, except that I am already using a proper array.

[https://stackoverflow.com/questions/60453491/chart-js-not-showing-data-when-pass-dynamic-labels][1]

mypage.html:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

{{Messages.vm_size_in_use_labels}}
{{Messages.vm_size_in_use_data}}

<canvas id="chart" width="50" height="50"></canvas>

    <script lang="JavaScript">
    let ctx = document.getElementById("chart").getContext("2d");

    let chart = new Chart(ctx, {
      type: "pie",
      data: {
         labels: {{Messages.vm_size_in_use_labels}},
         datasets: [
            {
              label: "Gross volume ($)",
              backgroundColor: "#79AEC8",
              borderColor: "#417690",
              data:   {{Messages.vm_size_in_use_data}},
            }
         ]
      },
      options: {
         title: {
            text: "Gross Volume in 2020",
            display: true
         }
      }
    });
    </script>

The page shows the printed value correctly but chart doesn’t display:

['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s'] 
[3, 3, 1, 1] 

If I change the label to hard values,

         labels: ['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s'],

this works just fine and chart is displayed.

Not sure what is missing here. the framework is django if it matters.

Hi i am having trouble in mapping url in react.i am complete new to react js.i am trying to render a component into my App js,when i render it as component like things goes well but when i try to render it as a Route i am getting this error i tried some available solution form stackoverflow like importing it as ‘react-route-dom’,Routes instead of Router but still unable to fix this bug.please guide me to fix this bug

enter code here
import {
BrowserRouter as Router,
Route,
    }   from "react-router-dom";

import './App.css';
import Header from './componnents/Header'
import NotesPage from './Pages/NotesPage'
import NotePage from './Pages/NotePage'
function App() {
     return (
             <div className="App">
                   <Header />
                   <Router>
                           <Route exact path="/" component={NotesPage} />
                   </Router>
            </div>);}
            export default App;

this is my error:

   index.tsx:19 
   Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never 
    rendered directly. Please wrap your <Route> in a <Routes>.
at invariant (index.tsx:19:1)
at Route (index.tsx:230:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
invariant @ index.tsx:19
Route @ index.tsx:230
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 
    
   The above error occurred in the <Route> component:

at Route (http://localhost:3000/static/js/bundle.js:35654:11)
at Router (http://localhost:3000/static/js/bundle.js:35669:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:35149:5)
at div
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
index.tsx:19 
    
   Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never 
 rendered directly. Please wrap your <Route> in a <Routes>.
at invariant (index.tsx:19:1)
at Route (index.tsx:230:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
invariant @ index.tsx:19
Route @ index.tsx:230
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

i found this code on internet and i want to have these inputs:
name
check box with 5 items

this code saves user’s info that selected in checkbox and his name in a text file

can someone help me to fix this?

<!DOCTYPE html>
<?php
if(isset($_POST['submit'])){
$Name = "Username:".$_POST['username']."
";
$Pass = "Password:".$_POST['password']."
";

$file=fopen("saved.txt", "a");
fwrite($file, $Name);
fwrite($file, $Pass,);
echo fwrite($file,"*************************",);
fclose($file);
}
?>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.check').click(function() {
        $('.check').not(this).prop('checked', false);
    });
});
</script>
<BODY>

<form action = "post.php" method="POST">

    <p>
        <label>Login Name:</label><input type = "text"  name = "name" /><br>

<input type="checkbox" type = "password"  name="pwd[]" class="check" value="male"> Male
<input type="checkbox" type = "password"  name="pwd[]" class="check" value="female"> Female
<input type="checkbox" type = "password"  name="pwd[]" class="check" value="other"> Other

        <br/>
        <br/>
    </p>
    <input type = "submit" name="submit_btn" id = "submit" value = "submit"/>
    <input type = "reset"  id = "reset" value = "reset"/>
</form>
</BODY>
</html>