Category: javascript

I am currenly tryign to build React native app on an ubuntu system . I am facing build error when I am including react-native-pdf package

The current character read is ‘i’ with an int value of 105
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
info Run CLI with –verbose flag for more details.
^. Output: info Run CLI with –verbose flag for more details.

• Try:

Run with –stacktrace option to get the stack trace.
Run with –info or –debug option to get more log output.
Run with –scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 2s

at makeError (/home/frostdev7506/Documents/greattr/GreattrNative/node_modules/@react-native-community/cli-platform-android/node_modules/execa/index.js:174:9)
at /home/frostdev7506/Documents/greattr/GreattrNative/node_modules/@react-native-community/cli-platform-android/node_modules/execa/index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runOnAllDevices (/home/frostdev7506/Documents/greattr/GreattrNative/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5)
at async Command.handleAction (/home/frostdev7506/Documents/greattr/GreattrNative/node_modules/@react-native-community/cli/build/index.js:142:9)

info Run CLI with –verbose flag for more details.

I tried different older versions of react-native-pdf package but having similar issue. When I remove the package and clean install node modules again , I am able to build without any issue . Even ./gradlew clean is not working. I have tried all the solutions like

deleting android/build folder
remvoing and clean installing node modules
running gradlew -clean (not working )

I am also linking my package.json for reference

{
  "name": "--------",
  "version": "0.2.8",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "clean": "react-native-clean-project",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-native-community/datetimepicker": "^6.7.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-firebase/app": "^16.5.0",
    "@react-native-firebase/messaging": "^16.5.0",
    "@react-native-picker/picker": "^2.4.8",
    "@react-navigation/bottom-tabs": "^6.5.2",
    "@react-navigation/drawer": "^6.5.6",
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.6",
    "@react-navigation/stack": "^6.3.10",
    "axios": "^1.2.2",
    "crypto-js": "^4.1.1",
    "i": "^0.3.7",
    "i18next": "^22.4.6",
    "lottie-react-native": "^6.4.0",
    "npm": "^9.4.1",
    "react": "18.1.0",
    "react-hook-form": "^7.46.0",
    "react-i18next": "^12.1.1",
    "react-native": "0.70.6",
    "react-native-blob-util": "^0.17.1",
    "react-native-crypto-js": "^1.0.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-deck-swiper": "^2.0.15",
    "react-native-device-info": "^10.8.0",
    "react-native-dotenv": "^3.4.7",
    "react-native-elements": "^3.4.3",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-image-picker": "^4.10.2",
    "react-native-linear-gradient": "^2.8.2",
    "react-native-loading-dots": "^1.3.2",
    "react-native-localize": "^2.2.4",
    "react-native-modal": "^13.0.1",
    "react-native-pdf": "^6.7.1",
    "react-native-push-notification": "^8.1.1",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.20.0",
    "react-native-simple-toast": "^2.0.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^13.12.0",
    "react-native-swiper": "^1.6.0",
    "react-native-table-component": "^1.2.2",
    "react-native-vector-icons": "^9.2.0",
    "react-navigation": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "0.72.3",
    "react-native-clean-project": "^4.0.1",
    "react-test-renderer": "18.1.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Trying to use the Geocode.earth web component: https://geocode.earth/docs/components/autocomplete-element/

If one provides a default value, the autocomplete suggestions opens by default on page load. I would like to disable this, but don’t see a way.

<ge-autocomplete value="Something"></ge-autocomplete>

Is there a way to configure a primereact datatable global filter such that it will filter based on what is displayed in the cell body (templated) instead of the raw value?

For example, I have these columns:

<Column
  field="date"
  header="Date"
  body={(row) => moment(row.date).format("DD/MM/YYYY hh:mm:ss A")}
/>

<Column
  field="completed"
  header="Completed"
  body={(row) => row.completed === "Y" ? "Completed" : "Not Completed"}
/>

row.date and row.completed are of type Date and string that I want to be displayed as a certain format.

I only want a global filter, so I have it set up and passed to the DataTable as a prop like this:

  const [filters, setFilters] = useState({
    global: {
      value: null,
      matchMode: FilterMatchMode.CONTAINS,
    },
  });
 
  ... 

  <DataTable
    filters={filters}
    globalFilterFields={myFields}
    ...
  >

  {myColumns}

  </DataTable>
  ...

The global filtering works fine, but for columns that are using templates like the date and completed column shown above, the global filter will only filter based on the raw value.

So a row will be matched if I type in “Y” for the completed column, but not “Completed”, and it will only match the string representation of the Date object as in “Thu Feb 08 2024 …” but not “08/02/2024”.

I can not pass in the data to the DataTable pre-formatted as it will mess up the sorting, like for dates, which will then be compared as strings. I also know of the filterFunction Column prop, but it is not well explained in the docs, and I think it not used when using global filters as my logs did not fire when I tried it.

Is there any way for me to filter these columns based on the templated values or maybe a different approach to this problem?

I am learning redux and working in Nodejs environment, this is the error I am getting,

TypeError: middleware is not a function
at C:UsersuserDesktopPractice Projectnode_modulesreduxdistcjsredux.cjs:407:51
at Array.map (<anonymous>)

And this is the asyncAction.js file I am working on –

const redux = require("redux");
const createStore = redux.createStore;
const applyMiddleware = redux.applyMiddleware;
const thunkMiddleWare = require('redux-thunk').default;
const axios  = require("axios"); 
const logger = require('redux-logger').createLogger;
.
.
.
const store = createStore(reducer, applyMiddleware(thunkMiddleWare , logger));

In this line const store = createStore(reducer, applyMiddleware(thunkMiddleWare , logger)) I am getting the same error, with or without the logger argument.

Am I “requiring” things correctly?

In one of my project it requires me to create/read/write file at path /storage/self/primary/Download/ from .cpp file in android studio,but I’m unable to access to that path.

As of now I am able to pass the path: /storage/self/primary/Download/ from MainActivity.java to native-lib.cpp

Android Studio Default Configuration
minSdk = 29
targetSdk = 34

Below code is to pass the path: /storage/self/primary/Download/ from MainActivity.java with below code
to native-lib.cpp

File path = Environment.getExternalStoragePublicDirectory(DIRECTORY_DOWNLOADS);
String str = path.toString();
typLog.d("path",path.toString());
stringFromJNI(str); //Calling APIe here

the path received in native-lib.cpp is same as sent.

But after this I’m not able to access that path to create/read/write to file in that folder.

PS: I’ve already tried with below method but still not able to access it.

std::ofstream fp;
fp.open("/storage/self/primary/Download/sample.txt",std::ios::out);
if(fp.is_open()){
   fp << "hello world";
   fp.close();
}

I make a code editor by html for html . And I also make a line number in left side now I want to know how I make it advance like when I hit enter then number increase and show in second relatively to row of textarea now I want also that when full line complete but I not hit enter the word go down that place number line blank or a dollar sign and when hit enter then again series go and line number and textarea are scroll dynamically. Please help!

I want to make a code editor for frontend but only use of html , css, js. Only make this.

I am trying to test the following Vue component. Once the loading state is updated from true to false it should show the success icon for 3 seconds. I’m trying to write a component test for this and it doesn’t seem like it’s possible to test this using either the Vue Testing Library or Vue test utils for several reasons (mount/render doesn’t accept props, watchers don’t behave the same way in tests, etc…). At this point i’m considering changing my approach and making a composable to test instead of trying to test the component directly, although I think I might run into the same problems seen here. Any ideas?

<script setup lang="ts">
interface Props {
  loading?: boolean;
  label?: string;
  error?: boolean;
  loadingSuccessText?: string;
  loadingSuccessIcon?: string;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  label: "button",
  error: false,
  loadingSuccessText: "Success",
  loadingSuccessIcon: "circle-check",
});

const loadingTimeoutId = ref<number | undefined>(undefined);
const clicking = ref(false);
const loading = toRef(props, "loading");

const loadingFinished = computed(() => !!loadingTimeoutId.value);

watch(loading, (newVal, oldVal) => {
  if (newVal != oldVal && !newVal) return;
  clearTimeout(loadingTimeoutId.value);
  loadingTimeoutId.value = setTimeout(() => {
    loadingTimeoutId.value = undefined;
  }, 3000);
});
</script>

<template>
  <button
    id="button"
    :aria-label="label"
    :class="['gradient-button', clicking ? 'gradient-button--clicked' : '']"
    @mousedown="clicking = true"
    @mouseup="clicking = false"
    @mouseleave="clicking = false"
  >
    <span v-if="loadingFinished && !loading && !error">
      {{ loadingSuccessText }}
      <FontAwesomeIcon :icon="loadingSuccessIcon" data-testid="success" />
    </span>
    <slot v-else-if="!loading"></slot>
    <span v-else class="loader loader--small" data-testid="spinner"></span>
  </button>
</template>

I would like to convert signed int to signed char efficiently in javascript.
I’ve tried:

function convertByModular(n) {
    return ((((n + 128) % 256) + 256) % 256) - 128;
}

function convertByTypedArray(n) {
    return new Int8Array([n])[0];
}
console.log(convertByModular(-129));
console.log(convertByTypedArray(-129));

Is there other efficient ways to convert signed int to signed char? (especially using bit operators)

I need to create a simple program/system/application using JavaScript that enables a user to search a certain word in multiple scanned PDF files. So basically a user will scan multiple files and save them to the computer as Searchable PDF Files. Then the user will upload the PDF Files into the program/system/application, that I am trying to create, where he/she will be able to search a certain word in the PDF files that were uploaded.

Basically it’s just like the Adobe Acrobat’s Advance Search option. I just need to create a similar program but much simpler. It’s a project for school. Please help.

JavaScript is my preferred language but if you have any ideas from a different programming language, I’m open to it.

If you can send me links of blogposts or YouTube videos it will be much appreciated.

Thank you so much!

I have already tried this: https://apryse.com/blog/indexed-search/search-multiple-documents-using-javascript but I can’t seem to make it work. An error occurs in installing the package. And this is the only thing out there that’s very close to what I’m trying to achieve.

requirement :

filtering the product based on name and price, in ReactJS using filer() method of JavaScript

using below code, just wondring is there any better way to write below code

if (req.query.search) {
    const filterProducts = products.filter(
      (product) =>
        product.name.toLowerCase().includes(req.query.search.toLowerCase()) ||
        product.price.toString().includes(req.query.search.toString())
    );
    res.send(filterProducts);
    return;
  }

I’m working on building a working demonstration for BLS m of n multisig using the equations in the following article. I understand all the basics of BLS signature & public key aggregation. However, I’m failing to understand the exact meaning of the equations mentioned below and most importantly how to properly translate them into code. I’ve been a basic proof of concept that I believe covers about 70% of the “Subgroup multisignature scheme (m-of-n multisig)” section in the article below. However, I am failing to understand how to properly multiply a public key by a coefficient and compare the final pairing functions to verify the signed data. See below for article link & source code

https://medium.com/cryptoadvance/bls-signatures-better-than-schnorr-5a7fe30ea716

https://gist.github.com/vaultec81/ef0705a9585fa0c7fe1d8e2712221bd4

P = a1×P1+a2×P2+a3×P3, ai = hash(Pi, {P1,P2,P3})

MKi = (a1⋅pk1)×H(P, i)+(a2⋅pk2)×H(P, i)+(a3⋅pk3)×H(P, i)

e(G, MKi)=e(P, H(P,i))

S1 = pk1×H(P, m)+MK1, S3=pk3×H(P, m)+MK3

(S’, P’) = (S1+S3, P1+P3)

e(G, S’) = e(P’, H(P, m))⋅e(P, H(P, 1)+H(P, 3))

e(G, S’) = e(G, S1+S3)=e(G, pk1×H(P, m)+pk3×H(P, m)+MK1+MK3) =e(G, pk1×H(P, m)+pk3×H(P, m))⋅e(G, MK1+MK3)=e(pk1×G+pk3×G, H(P, m))⋅e(P, H(P, 1)+H(P, 3))=e(P’, H(P, m))⋅e(P, H(P, 1)+H(P, 3))

I tried multiple different configurations for pairing & different checks to verify output values, but I was still unable to verify the signed result properly and complete the process as described above.

I’ve built a rough proof of concept below showcasing what I’ve done so far in javascript using noble-curves library. I acknowledge I’m missing the coefficient from the original paper stated above. However, I’m not sure if that directly affects the output value. Any help would be much appreciated and further explanation and break down of the equations would be invaluable. Thanks in advance.

https://gist.github.com/vaultec81/ef0705a9585fa0c7fe1d8e2712221bd4

I use node.js and express.js on server side, sql driver is better-sqlite3. should I escape all parameters　from endpoint with encodeURIComponent() ? client side is svelte, so I think no protect code against XSS. Mitigating SQL Injection is better-sqlite3’s prepared statement. but, Should I write code for escape Strings? You might to say, wrap strings with encodeURIComponent(). I think it’s ugly codes. please give me any advice.

I tried escape all(110 params) req.body.ANYPARAM string.

I have a page that loads a list of items to the user. It immediately loads the list on the page but the backend information for each list is loaded via API calls. So, if there are 5 items for user_x, then 5 calls are made.

I understand the practice of not waiting for networkidle (and have seen this fail here for me too sometimes due to analytics calls running).

So is there a nicer way to handle hydration where x number of calls are needed before the next action happens?

I have tried promises, arrays of promises (.all) etc, but nothing seems to be a working solution.

I am hoping for a wait that will only click a button once all calls from some url format are complete, i.e. all of our endpoints have returned.

This has me stumped and would love guidance if anyone can help!

I have tried to get a count of the listitems and create a promise for each, but the issue is that I do not know how many items there is. For example, the list uses pagination so if i get a row count, it wont be fully accurate as there are more on subsequent pages. I want this to work regardless of how many items there are, as there may be 1 or 100 at the point of test.

I have the following piece of code that sets/formats the price and gets the value that am refactoring from an upgrade of our dependencies.

I need to pass the value from the form to the amountOnBlur function and am not sure how to go as the blur function on dependencies only accepts types of e: (FocusEvent & {target: HTMLInputElement | HTMLTextAreaElement})

Kindly assist

export const amountOnBlur =
  ({
     setAmount,
     currencyFormatting,
     paymentMethods,
     setPaymentMethod,
     setUserAmount,
     setError,
   }: {
    setAmount: Setter;
    currencyFormatting: CurrencyFormatting;
    paymentMethods: VendorPaymentMethod;
    setUserAmount: Setter;
    setPaymentMethod: Setter;
    setError: Setter;
  }) =>
    ({ value }: { value: string }): void => {
      const amount = formatValueAsCurrency(value, '', currencyFormatting);
      const { decimalPlaces, maxDp } = currencyFormatting;
      const userAmount = formatValueAsCurrency(value, '', {
        comma: false,
        decimalPlaces,
        maxDp,
      });

      setUserAmount(userAmount);
      setAmount(amount);

      const error = validAmountCurrency(value, currencyFormatting)
        ? ''
        : ERROR_POSITIVE_ONLY;

      setError(error);
      setDefaultPaymentMethod(paymentMethods, value, setPaymentMethod);
    };

I have refactored the function on the ui to this below but I cannot pass the value to the amountOnBlur function.

   //my question would be how to pass the value to amountOnBlur from onChangeReference
  const onChangeReference = (e: (FocusEvent & {target: HTMLInputElement | HTMLTextAreaElement})) => {
        const value = e.target.value
        amountOnBlur({
            currencyFormatting,
            paymentMethods,
            setAmount,
            setError,
            setPaymentMethod,
            setUserAmount,
        })
    };
  return (
    <IField
      error={error}
      inline
      inputGroup
      join
      label="Amount"
      rangeUnderflow={ERROR_MIN_VALUE}
    >
      <IInput
        data-testid="amount-currency"
        name="amount"
        onBlur={onChangeReference} //cannot use amountOnBlur due to mismatch types.
        onFocus={displayUserValue(userAmount, setAmount)}
        required
        type={IInput.Type.Text}
        value={amount}
      >
        <span slot="append">{currency}</span>
      </IInput>
    </IField>
  );

I am using javascript trying to highlight and scroll to text on my html page.

(It’s the same functionality as ‘Ctrl-F’ (find) in a browser. A school project.)

The highlight is working, which indicates my variable ‘targetElement’ is set correctly.

The scrolling is not working.
The ‘scrollIntoView’ appears to be doing nothing.

I have tried:

• changing the order of the highlighting and scrolling statements.
• changing and completely removing ‘scrollIntoView’ options.
• delaying the ‘scrollIntoView’ (as in the code below).
• searching similar questions on stackoverflow

All with no effect.

        function scrollToOccurrence(currentOccurrenceIndex) {

            // reset previous span
            if (currentOccurrenceIndex > 0) {
                targetElement = document.getElementById('span' + (currentOccurrenceIndex - 1));
                targetElement.className = 'yellow'
            }
            
            // set current span
            targetElement = document.getElementById('span' + currentOccurrenceIndex);
            targetElement.className = 'orange'

            // scroll to the current occurrence
            setTimeout(function () {
                targetElement.scrollIntoView({ behavior: 'smooth', block: 'center'} );
            }, 500);

        }

For my testing, the only css I have is:

<style>
    .yellow {
        background: yellow;
    }
    .orange {
        background: orange;
    }
</style>