Category: javascript

Category Added in a WPeMatico Campaign

How to listen to a state and set a timer of how long it would wait for the state to change in ReactJS?

I have a loading skeleton indicator when I’m loading data. What I want to do is to take into consideration users with slow internet connection. So I decided to have a skeleton loading indicator which lasts until the fetching completes. However, I want to show a toast maybe 5 seconds after the loading starts, to indicate to the user that he/she has a slow internet connection. So far I have something like:

useEffect(() => {
    const timer = setTimeout(() => {
        // Show toast here
    }, 5000);

    if (!loading) clearTimeout(timer);

}, [loading])

But this doesn’t seem to work because even after loading is set to false, the toast still appear. What am I missing here or is there an alternative way to do this?

I cloned a react repo and installed the dependencies in package.json using “npm install” command. Later, “npm start” to start the applicaton

I got the below Errors as Error: Conversation ended and couldn’t find the root cause. The errors are highlighting the line

__webpack_require__

and

modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

in webpack dependency.

Image from localhost

I tried debugging for the root cause. Can anyone help me fixing it?

Is there a polyfill for parsing this date format? [duplicate]

I have a date in this format:

Jun 21, 2018, 7:02:36 PM UTC

When I run it through Date.parse() on Node v18.16.0, it parses it correctly. But on Node v18.5.0, it returns NaN.

I need to support this date format, but updating Node is not an option right now.

Is there a polyfill available? Is there a name for this format? I had a look through the v18 changelog but I can’t find anything related to this. Thanks.

Issue with JavaScript in WordPress When Logging In

I have this JS code for a YouTube video views counter, hosted at the root of my WordPress site:

<script src="/wp-admin/js/01_YTapi.js"></script>

This script is called in posts through the following div:

<div
  class="ViewCountContainer" 
  style="margin-bottom: 20px; text-align: center;"
  data-video-id="XqZsoesa55w"
>
  Loading...
</div>

The code works correctly, displaying the views counter. However, when I log in to WordPress, the script stops working, and the message “Loading…” remains, without displaying the actual views.

In the Chrome console, I see this error message:

Request URL: https//PageAddress.com/PostName/wp-admin/js/01_YTapi.js
Status Code: 404 Not Found

Instead of executing the JS, its address is added to the end of the post address, resulting in a page not found (404).

I need help understanding why the script stops working after logging in to WordPress and how I can fix this issue.

I appreciate any guidance or suggestions to resolve this problem. Thank you!

How to make display:grid inner long text div fit grid item size

Following is my code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      width: 300px;
      border: solid 5px grey;
      gap: 10px; /* Optional: Add some gap between grid items */
    }

    .grid-item {
      /* Optional styling for the grid items */
      border: 1px solid #000;
      padding: 10px;
      /* Set a specific width for the grid items */
      width: 100%; /* Adjust this value based on your preference */
      /* Optional: Add styles for better visibility */
      display: flex;
      flex-direction: column;
    }



    .long-text {
      /* Make the text overflow ellipsis and hide overflow */
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
  <title>Grid Example</title>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">
    <div class="long-text">car 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    </div>
  </div>
  <!-- Add more grid items as needed -->
</div>

</body>
</html>

I set grid item width 100% and div width 100%, the div size still overflow grid border

Can’t fetch from different localhost port

I have webpack dev server running the client at http://locahost:8080 and an express server running on https://localhost:443 allowing all CORS requests. I’m also using a self-signed certificate created with instructions from this answer.

When I’m sending a fetch request, I get ERR_CERT_COMMON_NAME_INVALID or ERR_CONNECTION_REFUSED. I know that https defaults to port 443 but I noticed the fetch request still points to https://localhost/api/my_api What am I doing wrong? Let me know if there’s anything else I can provide to clarify the issue.

I’ve tried the following

  • specifying my client’s URL in the express cors config (origin: 'http://localhost:8080')
  • recreating my self-signed certificates using subject alt names, specifying localhost:443

Here’s my fetch request:

var response = await fetch('https://localhost:443/api/create_link_token', {
                method: 'POST',
                url: 'https://localhost:443',
                body: { idToken }
            })

My express server allows all CORS requests:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

My self-signed certificate was created using this .ext file (originally didn’t have the port in the alt names but still faced the same issue)

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost:443
DNS.2 = https://localhost:443

How can I get an animation to play in the order of an array?

Im new to programming and making the infamous Simon says game but I’m having trouble getting the computer generated sequence to animate in the order of the array.

I wanted to have a function that both wiped the previous sequence (assuming the game has started) and creates a new one while animating the buttons in the order of new array. I tried a few different methods but their outputs only confused me more.

var pattern       = []
var userPattern   = [];
var buttonColours = ["red", "blue", "green", "yellow"];
var started       = false
var level         = 0;

function nextSequence() {
  pattern     = [];
  userPattern = [];
  while (pattern.length < 4) {
    var randomNumber = Math.floor(Math.random() * 4);
    var randomColour = buttonColours[randomNumber];
    pattern.push(randomColour);
  }

  /*Method 1*/
  for (i = 0; i < pattern.length; i++) {
    setTimeout(function() {
      $("." + pattern[i]).fadeOut(200).fadeIn(200);
    }, 500 * (i + 1));
  }

  /*Mehtod 2*/
  // setTimeout($("." + pattern[0]).fadeOut(200).fadeIn(200), 500);
  // setTimeout($("." + pattern[1]).fadeOut(200).fadeIn(200), 1000);
  // setTimeout($("." + pattern[2]).fadeOut(200).fadeIn(200), 1500);
  // setTimeout($("." + pattern[3]).fadeOut(200).fadeIn(200), 2000);


  $("h1").html("Level" + " " + level);
  level++;
  console.log(pattern)
}

The first method doesn’t play the animation at all and the second plays the animations simultaneously completely disregaurding the setTimeout function. Method 2 also returns a Uncaught SyntaxError: Unexpected identifier ‘Object’ directed at all 4 lines of code.

Back to top button: hide or keep being displayed (JS)

I have a line at the bottom of certain of my PHP pages:

<p>
    <a href="#gototop" title="Start of page">
        <img src="img/toparrow.png" class="icons" border="0" />
    </a>
    &nbsp;&nbsp;
    <a href="biografie_de.php" title="back">
        <img src="img/leftarrow.png" class="icons" border="0" />
    </a>
</p>

The line should be displayed as a default (for those who don’t have JS enabled).

If the user has scrolled because there is enough text on the page, the line with the back to top button (the button is set in the .css file) should be visible.

However, if the user hasn’t scrolled down because he has a big screen/high resolution, the entire part

<p>
    <a href="#gototop" title="Start of page">
        <img src="img/toparrow.png" class="icons" border="0" />
    </a>
    &nbsp;&nbsp;
    <a href="biografie_de.php" title="back">
        <img src="img/leftarrow.png" class="icons" border="0" />
    </a>
</p>

should be hidden. How can I hide it?

Please help me as this is the last problem of my website I’ve been tweaking for many days.

The problem is I don’t know JS at all and can only paste code.
I’ve already tried some Google results that work per se, but not with my layout and use of CSS and PHP etc.

I tried some Google results, but could not implement them to my page.

I cant get any clientSecret (Stripe Api / Stripe Payments) React/ Asp.net Core

Im trying to make api Post request to my Asp.net Core app, but litteraly i cant idk why but icant, mybe its about the requesting type?! Its 400.React and Asp.net core in diffrent project(VSCODE/VS).I dont know too much about how to use stackoverflow, sorry if i make bad.

In there im trying to Make a POST request to my Api and in second useEffects Console logs im getting Undifined and also the console giving 400 for Api request. I guess i cant accses the clientsecret.
In the return i cant see “asda” im just write this for testing and i cant see it.

import React, { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import "./checkout3.css";
import ChekOutForm11 from "./CheckOutForm/page"

const stripePromise = loadStripe("pk_test_51OSxlkFNkBfCO5e3vnPPxPYZrBc8gRy2NueDfDqA7DkfjhSwhirscfQCPsZyQJjNZXJXs5L6QwdiopFSLTOLLq400044fcZmBR");

export default function CheckOut3() {
  const [clientSecret, setClientSecret] = useState("");

  useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("http://localhost:5187/api/stripeValueAdderTester/processPayment", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);
  useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("http://localhost:5187/api/stripeValueAdderTester/processPayment", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    })
      .then((res) => console.log(res.data))
      .then((data) => console.log(data.clientSecret));
  }, []);


  const appearance = {
    theme: 'stripe',
  };
  const options = {
    clientSecret,
    appearance,
  };

  return (
    <div className="App checkout3body">
  
      {clientSecret && (
        <Elements options={options} stripe={stripePromise}>
        asda
          <ChekOutForm11 />
        </Elements>
      )}
    </div>
  );
}

react.js Here im trying to show Stripes From but i cant

export default function ChekOutForm11() {
  const stripe = useStripe();
  const elements = useElements();

  const [message, setMessage] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    const clientSecret = new URLSearchParams(window.location.search).get(
      "payment_intent_client_secret",
    );

    if (!clientSecret) {
      return;
    }

    stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
      switch (paymentIntent.status) {
        case "succeeded":
          setMessage("Payment succeeded!");
          break;
        case "processing":
          setMessage("Your payment is processing.");
          break;
        case "requires_payment_method":
          setMessage("Your payment was not successful, please try again.");
          break;
        default:
          setMessage("Something went wrong.");
          break;
      }
    });
  }, [stripe]);

  return (
    <form className="checkout3form" id="payment-form" onSubmit={handleSubmit}>
      <PaymentElement id="payment-element" options={paymentElementOptions} />
      <button
        className="checkout3button"
        disabled={isLoading || !stripe || !elements}
        id="submit"
      >
        <span id="button-text">
          {isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
        </span>
      </button>
      {message && <div id="payment-message">{message}</div>}
    </form>
  );
}

namespace EcomApi.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class stripeValueAdderTesterController : Controller
    {
        [HttpPost, Route("processPayment")]
        public ActionResult ProcessPayment(PaymentIntentCreateRequest request)
        {
            try
            {
                // Stripe secret key'i burada kullanılır
                StripeConfiguration.ApiKey = "sk_test_51OSxlkFNkBfCO5e3bGJXyhg6mgyF6AwRF1DNwJn9bEkJzW6E2ALggkM0WRoKok4XFfuMk1KeTDXAl49O2lhiiNPq00un9hidwd";
                var paymentIntentService = new PaymentIntentService();
                var paymentIntent = paymentIntentService.Create(new PaymentIntentCreateOptions
                {
                    Amount = CalculateOrderAmount(request.Items),
                    Currency="usd",
                    AutomaticPaymentMethods= new PaymentIntentAutomaticPaymentMethodsOptions
                    {
                        Enabled = true,
                    },
                });
                return Json(new { clientsecret = paymentIntent.ClientSecret });

            

            }
            catch (Exception ex)
            {
                // Ödeme sırasında bir hata oluştu
                return BadRequest(new { Message = "Ödeme başarısız", Error = ex.Message });
            }
        }
        private int CalculateOrderAmount(Item[] items)
        {
            return 1400;
        }

    }


    public class Item
    {
        [JsonProperty("id")]
        public string Id { get; set; }
        [JsonProperty("Amount")]
        public string Amount { get; set; }
    }

    public class PaymentIntentCreateRequest
    {
        [JsonProperty("items")]
        public Item[] Items { get; set; }
    }
}

react and webpack devserver routes errors mime type

I keep getting the errors at bottom of post, not sure why.

src/
  index.tsx
  components/
  ...
public/
 index.html
 js/
   bundle.js
webpack.js

Webpack file:

module.exports = merge.merge(common, {
  output: {
    filename: 'bundle.js',
    path: path.join(process.cwd(), "public/js"),
    publicPath: '/'
  },
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    open: true,
    static: {
      directory: path.join(process.cwd(), 'public'),
    },
    historyApiFallback: true,
    port: 3000,
  },
  plugins: [
    new ESLintPlugin(),
  ],
  mode: "development"
});

Index.html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <div id="root"></div>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="js/bundle.js" type="text/javascript"></script>
  </body>
</html>

Routes file

const AppRoutes = createBrowserRouter([
  {
    element: <App />,
    errorElement: <ErrorBoundary />,
    children: [
      {
        path: '/home',
        element: <Home/>
      },
      {
        path: '/profile',
        element: <Profile/>
      },
    ]
  }
]);

export default AppRoutes;

App.js

createRoot(document.getElementById(ROOT_ID) as HTMLElement).render(
  <RouterProvider
    router={AppRoutes}
    fallbackElement={<div>Error</div>}
  />
);

I am wondering is this has something to do with the src attribute in my index.html file.

These are the errors and warnings I get with a blank page.

cannot GET https://localhost:3000/home/js/bundle.js

The resource from “https://localhost:3000/home/js/bundle.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Cannot scrape non-hidden text with cheerio [duplicate]

I cannot scrape the amount value from the first row of the table in the link.

I tried the following but it returns nothing.

const fetch = require('node-fetch');
const cheerio = require('cheerio');

const response = await fetch('https://client.quotemedia.com/demo/portal/quote-fund-dividends.php?qm_symbol=CIG6109:CA&type=fund');

const body = await response.text();
const $ = cheerio.load(body);

const amount = $('tbody > tr:nth-child(1) > td:nth-child(2) > .qmod-tcell').text();
console.log(amount);

Why should we use const/let even though Babel is going to transpile it to var? [closed]

Besides the scope part, what are the differences?
Is babel still useful? Because for in my head is just a way to lose performance over and over. Should not be better to recommend the user a browser update?

As a student I fell pity to know that even though I’m using the latest “tools” at the dev phase seeking for performance, a transpiler would still modify to older versions

React Native fails to render mutliple chart components

I’ve run into a long running stumper. Have a chart component in react native I want to render a series of chaerts from some api data. Heres fragment of the containing element, this is fine data is collected and rendered as you’d expect, until it’s feed into the chart.

<View className={'w-full'}>
  {chartWidgets &&
    chartWidgets.length > 0 &&
    chartWidgets?.map((w: PageWidget<IQuickGraphWidget>, i) => {
      return (
        <View className={'w-full mb-4'} key={i}>
          {w?.widget?.settings?.graph?.split(':')[1] && (
            <ChartWidget
              enabled={true}
              widgetData={w}
              key={i}
              onSelectControl={() => {}}
              pointData={{}}
              graphId={w?.widget?.settings?.graph?.split(':')[1]}
              pos={i}
            />
          )}
        </View>
      );
    })}
</View>

below is the chart component. In my test scenario I want to render 3 charts each charts has an array of on average 1000 – 2000 points to render. when I get over 2 charts the render of the 3rd or more charts is always broken.

/** Vendor */
import React, {useEffect, useRef, useState} from 'react';
import {
  Pressable,
  View,
  Text,
  ActivityIndicator,
  TextInput,
} from 'react-native';
import {useQueries, useQuery} from '@tanstack/react-query';
import Modal from 'react-native-modal';
import {RadioGroup} from 'react-native-radio-buttons-group';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {
  faEllipsisVertical,
  faLineChart,
} from '@fortawesome/free-solid-svg-icons';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';

/** Lib */
import {
  someApiEndpoint
} from 'someApiEndpoint';
import {cardShadow} from '../../utils/nativeStyles';

/** State */
import {useStateContext} from '../../stateManager';
import {VictoryLineChart} from './VictoryLineChart';
import {VictoryBarChart} from './VictoryBarChart';

export const ChartWidget: React.FC<any> = ({
  widgetData,
  pointData,
  handleOnSelectControl,
  enabled = true,
  graphId = '',
  inView = false,
  triggerModal = false,
  pos = 0,
}) => {
  /** Variables */
  const navigation = useNavigation<StackNavigationProp<any>>();
  const {appState} = useStateContext();

  const defaultEndDate = new Date();
  const defaultStartDate = new Date();

  defaultStartDate.setDate(defaultEndDate.getDate() - 1);

  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState(defaultEndDate);

  const timeRangeOptions: any[] = [
    {id: '1', label: '1 Hour', value: 1},
    {id: '2', label: '12 Hours', value: 12},
    {id: '3', label: '1 Day', value: 24},
    {id: '4', label: '1 Week', value: 168},
    {id: '5', label: '1 Month', value: 720},
    {id: '6', label: '1 Year', value: 8760},
  ];

  const [selectedTimeRangeOption, setSelectedTimeRangeOption] = useState('3');
  const [scaleMinValue, setScaleMinValue] = useState('');
  const [scaleMaxValue, setScaleMaxValue] = useState('');
  const [showModal, setShowModal] = useState(false);
  const [modalSettingType, setModalSettingType] = useState('');
  const [initDateRange, setInitDateRange] = useState(false);

  const [chartSettings, setChartSettings] = useState<any | null>(null);
  const [chartData, setChartData] = useState<any | null>(null);

  const [isVisible, setIsVisible] = useState(enabled);
  const [shouldRefetch, setShouldRefetch] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  /** Utils */
  const parseDate = (dt): string => {
    const padL = (nr, len = 2, chr = '0') => `${nr}`.padStart(2, chr);

    const returnString = `${padL(dt.getFullYear())}-${padL(
      dt.getMonth() + 1,
    )}-${dt.getDate()} ${padL(dt.getHours())}:${padL(dt.getMinutes())}:${padL(
      dt.getSeconds(),
    )}`;

    return returnString.trim();
  };

  const getSelectedRangeLabel = () => {
    const option = timeRangeOptions.find(i => i.id === selectedTimeRangeOption);
    return option?.label || '';
  };

  const setDefaultStartDateRangeBySetting = defaultTimePeriod => {
    const defaultStartfromSettings = new Date();
    if (!startDate) {
      if (defaultTimePeriod === 604800) {
        setSelectedTimeRangeOption('4');
        defaultStartfromSettings.setDate(defaultEndDate.getDate() - 7);
      } else {
        defaultStartfromSettings.setDate(defaultEndDate.getDate() - 1);
      }
      setStartDate(defaultStartfromSettings);
      setInitDateRange(true);
      return defaultStartfromSettings;
    }
    setInitDateRange(true);
    return startDate;
  };

  const checkDisableForward = (): boolean => {
    const now = new Date();
    now.setMinutes(0);
    now.setSeconds(0);
    now.setMilliseconds(0);
    return endDate > now;
  };

  const getSettings = async (gId: number) => {
    setIsLoading(true);
    const settings = await someApiEndpoint(
      appState?.siteId,
      gId,
    );
    setChartSettings(settings);
    getData(graphId, settings);
  };

  const getData = async (gId, settings: any | null = null) => {
    setIsLoading(true);
    let queryStartDate: Date | null = startDate;
    if (isNaN(parseInt(gId)) || !settings?.web_quick_graph) {
      return null;
    }
    if (settings?.web_quick_graph && !queryStartDate) {
      queryStartDate = setDefaultStartDateRangeBySetting(
        settings.web_quick_graph?.settings?.default_time_period,
      );
    }
    
    const res: any = await someApiEndpoint();
    setChartData(res);
  };

  /** Hooks */
  useEffect(() => {
    if (graphId) {
      getSettings(graphId);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [graphId]);

  useEffect(() => {
    if (initDateRange) {
      getData(graphId, chartSettings);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [startDate, endDate]);

  // refetch when a user preference is changed
  useEffect(() => {
    if (shouldRefetch) {
      setShouldRefetch(false);

      getSettings(graphId);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [shouldRefetch]);

  useEffect(() => {
    if (showModal) {
      return;
    }

    if (chartSettings) {
      const listSetting =
        chartSettings?.web_quick_graph?.settings?.auto_display || false;
      const visible = inView ? true : listSetting;

      setIsVisible(visible);

      if (!visible) {
        return;
      }
    }

    if (!!chartSettings && !!chartData) {
      if (chartSettings?.web_quick_graph?.user_scale) {
        setScaleMinValue(
          chartSettings?.web_quick_graph?.user_scale?.minimum.toString(),
        );
        setScaleMaxValue(
          chartSettings?.web_quick_graph?.user_scale?.maximum.toString(),
        );
      } else if (chartSettings?.web_quick_graph?.value_axes) {
        setScaleMinValue(
          chartSettings?.web_quick_graph?.value_axes[0].minimum.toString(),
        );
        setScaleMaxValue(
          chartSettings?.web_quick_graph?.value_axes[0].maximum.toString(),
        );
      } else {
        let largest = -Infinity;
        let smallest = Infinity;

        for (const item of chartData?.data) {
          if (Array.isArray(item?.g) && item?.g?.length > 0) {
            for (const value of item.g) {
              if (value > largest) {
                largest = value;
              }

              if (value < smallest) {
                smallest = value;
              }
            }
          }
        }

        setScaleMinValue(smallest.toString());
        setScaleMaxValue(largest.toString());
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [chartSettings, chartData]);

  /** Handlers */
  const handleOnCancel = () => {};
  consthandleOnOpenModal = () => {};
  const handleOnSelectOption = val => {};
  const handleOnSetScale = () => {};
  const handleOnTimeline = () => {};
  const handleOnBack = () => {};
  const handleOnForward = () => {};
  const handleOnNavigateToChart = () => {};

  if (!isVisible || !chartSettings || !chartData) {
    return <></>;
  }

  return (
    <View
      className="w-full flex flex-1 bg-white"
      style={!inView ? cardShadow : {}}>
      {!inView && (
        <View className="flex flex-row justify-between w-full border-b border-ricado-gray mb-2 p-4">
          <Text className="text-ricado-green text-sm text-left pt-1">
            {widgetData?.widget?.settings?.title}
          </Text>
          <View className="flex flex-row">
            <Pressable onPress={handleOnNavigateToChart} className="mt-2 mr-4">
              <Text>
                <FontAwesomeIcon icon={faLineChart} />
              </Text>
            </Pressable>
            <Pressable onPress={handleOnOpenModal} className="mt-2">
              <Text>
                <FontAwesomeIcon icon={faEllipsisVertical} />
              </Text>
            </Pressable>
          </View>
        </View>
      )}

      <View className={'w-full relative'} style={{minHeight: 300}}>
        {chartData && chartSettings?.web_quick_graph?.type === 'line' && (
          <VictoryLineChart
            chartData={chartData}
            chartSettings={chartSettings}
          />
        )}

        {chartData && chartSettings?.web_quick_graph?.type === 'bar' && (
          <VictoryBarChart
            chartData={chartData}
            chartSettings={chartSettings}
          />
        )}
      </View>

      <View className="flex flex-row justify-between w-full border-y border-ricado-gray mt-2 p-4">
        <Pressable onPress={handleOnBack}>
          <Text className="text-black uppercase text-sm">
            {'u25C0'} Back {getSelectedRangeLabel()}
          </Text>
        </Pressable>
        <Pressable onPress={handleOnForward} disabled={checkDisableForward()}>
          <Text
            className={`${
              checkDisableForward() ? 'text-gray-400' : 'text-black'
            } text-sm uppercase`}>
            Forward {getSelectedRangeLabel()} {'u25B6'}
          </Text>
        </Pressable>
      </View>
    </View>
  );
};

so far I’ve tried: victory charts native, victory XL, amcharts5 in a webview, echarts, gifted chartds, multiple component and data fetching refactors (too many to list), useMemo, useRef, useCallback, Staggering renders, reducing data points, etc.

All have the same bug, data rendered fine when printed out there only and issue when rendering more than 2 charts.

Research tells me and issue with reactSVG but in the latest iteration I’ve swapped to victoryXL which replaces reactSVG with Skia and the problem remains. Have I just missing something simple?

up to 2 instances of the charts will render but more thn that consistently fails. Not allowed to screenshot the failing render but I mean it draws a couple of gridlines of the chat component is broken including the header and footer which are just simple reactNative elements.

Sometimes they all just bunch up with the mostly rendered charts stacked and the container element just missing.

Often rotating the screen can fix it on a re render. sometimes (but ofc it must rerender first time)

Remove the chart and the rest of the component and it’s data comes out as expected so convinced this is all chart related. no error message is produced in the console.

Send same message to multiple users upon button click

How to loop the channel Id inside the post message api?
I am trying to send a direct message to different users upon button click. I stored the user ids in an array.

Sender: SLACK BOT APP
Receiver: USER1,USER2

const userID = ['USER1','USER2'];
        try {
            // Call the chat.postMessage method using the WebClient
            await client.chat.postMessage({
                channel: userID,
                text: `Multiple Slack Channel`
            });
            console.log('Success: post message');
        } catch (error) {
            console.error(error);
        }

API wrapper to convert cpp to js

I’m currently working on a JavaScript project and need assistance in creating a JavaScript API wrapper for the Steamworks SDK. The existing SDK is coded in C++, and I’m looking to convert it into JavaScript.

I’ve already explored the Steamworks SDK documentation and have a good understanding of how the C++ version works. However, my project requires the use of JavaScript, and I’m not familiar with the process of creating a wrapper or adapting C++ code for JavaScript.

Here is c++ code on how the steamworks sdk works in the c++ side:

#include "steam_api.h"

void InitializeSteam() {
    SteamAPI_Init();
    // Additional initialization code...
}

Therefore, I am asking guidance on how to create a JavaScript wrapper for the Steamworks SDK? Are there any tools or libraries that can simplify this process?