Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
Consider the following,
methodA, methodB and methodC wrapped in a class.
I would like to override methodA in such a way that it keeps its logic, but does not call methodB. MethodC would remain untouched
Copy methodA except methodB would not be effecient.
I am currently trying to use descope on my react expo app. This works great for web but breaks when i use it on my iPhone. I know this is failing due to the redirect url for the app running on my phone is not in my Approved Domains list.
From the reading i did i tried adding the below in my config.
{ scheme: "myTestApp" }
Then i tried adding myTestApp as a allowed domain but it doesn’t seem to help. Am i missing something?
Error starting ApplicationContext. To display the conditions report re-run your application with ‘debug’ enabled.
[2m2024-03-10 23:52:19.423[0;39m [31mERROR[0;39m [35m12968[0;39m [2m—[0;39m [2m[ restartedMain][0;39m [36mo.s.boot.SpringApplication [0;39m [2m:[0;39m Application run failed
org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.onRefresh(ServletWebServerApplicationContext.java:165) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:577) ~[spring-context-5.3.23.jar:5.3.23]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:147) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:734) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:408) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:308) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1306) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.SpringApplication.run(SpringApplication.java:1295) ~[spring-boot-2.7.4.jar:2.7.4]
at com.gymmanagement.GymManagementApplication.main(GymManagementApplication.java:10) ~[classes/:na]
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:na]
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77) ~[na:na]
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:na]
at java.base/java.lang.reflect.Method.invoke(Method.java:568) ~[na:na]
at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) ~[spring-boot-devtools-2.7.4.jar:2.7.4]
Caused by: org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.initialize(TomcatWebServer.java:142) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.(TomcatWebServer.java:104) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getTomcatWebServer(TomcatServletWebServerFactory.java:479) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory.getWebServer(TomcatServletWebServerFactory.java:211) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.createWebServer(ServletWebServerApplicationContext.java:184) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.onRefresh(ServletWebServerApplicationContext.java:162) ~[spring-boot-2.7.4.jar:2.7.4]
… 13 common frames omitted
Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘formContentFilter’ defined in class path resource [org/springframework/boot/autoconfigure/web/servlet/WebMvcAutoConfiguration.class]: Bean instantiation via factory method failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.springframework.boot.web.servlet.filter.OrderedFormContentFilter]: Factory method ‘formContentFilter’ threw exception; nested exception is java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/exc/InvalidDefinitionException
at org.springframework.beans.factory.support.ConstructorResolver.instantiate(ConstructorResolver.java:658) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.ConstructorResolver.instantiateUsingFactoryMethod(ConstructorResolver.java:486) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.instantiateUsingFactoryMethod(AbstractAutowireCapableBeanFactory.java:1352) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBeanInstance(AbstractAutowireCapableBeanFactory.java:1195) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:582) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:542) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:335) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:333) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:213) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.boot.web.servlet.ServletContextInitializerBeans.getOrderedBeansOfType(ServletContextInitializerBeans.java:212) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.servlet.ServletContextInitializerBeans.addAsRegistrationBean(ServletContextInitializerBeans.java:175) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.servlet.ServletContextInitializerBeans.addAsRegistrationBean(ServletContextInitializerBeans.java:170) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.servlet.ServletContextInitializerBeans.addAdaptableBeans(ServletContextInitializerBeans.java:155) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.servlet.ServletContextInitializerBeans.(ServletContextInitializerBeans.java:87) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.getServletContextInitializerBeans(ServletWebServerApplicationContext.java:262) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.selfInitialize(ServletWebServerApplicationContext.java:236) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.web.embedded.tomcat.TomcatStarter.onStartup(TomcatStarter.java:53) ~[spring-boot-2.7.4.jar:2.7.4]
at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5219) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1396) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1386) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264) ~[na:na]
at org.apache.tomcat.util.threads.InlineExecutorService.execute(InlineExecutorService.java:75) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at java.base/java.util.concurrent.AbstractExecutorService.submit(AbstractExecutorService.java:145) ~[na:na]
at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:919) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.core.StandardHost.startInternal(StandardHost.java:835) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1396) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1386) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264) ~[na:na]
at org.apache.tomcat.util.threads.InlineExecutorService.execute(InlineExecutorService.java:75) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at java.base/java.util.concurrent.AbstractExecutorService.submit(AbstractExecutorService.java:145) ~[na:na]
at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:919) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.core.StandardEngine.startInternal(StandardEngine.java:265) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.core.StandardService.startInternal(StandardService.java:432) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.core.StandardServer.startInternal(StandardServer.java:930) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.apache.catalina.startup.Tomcat.start(Tomcat.java:486) ~[tomcat-embed-core-9.0.65.jar:9.0.65]
at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.initialize(TomcatWebServer.java:123) ~[spring-boot-2.7.4.jar:2.7.4]
… 18 common frames omitted
Caused by: org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.springframework.boot.web.servlet.filter.OrderedFormContentFilter]: Factory method ‘formContentFilter’ threw exception; nested exception is java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/exc/InvalidDefinitionException
at org.springframework.beans.factory.support.SimpleInstantiationStrategy.instantiate(SimpleInstantiationStrategy.java:185) ~[spring-beans-5.3.23.jar:5.3.23]
at org.springframework.beans.factory.support.ConstructorResolver.instantiate(ConstructorResolver.java:653) ~[spring-beans-5.3.23.jar:5.3.23]
… 59 common frames omitted
Caused by: java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/exc/InvalidDefinitionException
at org.springframework.http.converter.support.AllEncompassingFormHttpMessageConverter.(AllEncompassingFormHttpMessageConverter.java:94) ~[spring-web-5.3.23.jar:5.3.23]
at org.springframework.web.filter.FormContentFilter.(FormContentFilter.java:61) ~[spring-web-5.3.23.jar:5.3.23]
at org.springframework.boot.web.servlet.filter.OrderedFormContentFilter.(OrderedFormContentFilter.java:29) ~[spring-boot-2.7.4.jar:2.7.4]
at org.springframework.boot.autoconfigure.web.servlet.WebMvcAutoConfiguration.formContentFilter(WebMvcAutoConfiguration.java:177) ~[spring-boot-autoconfigure-2.7.4.jar:2.7.4]
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:na]
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77) ~[na:na]
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:na]
at java.base/java.lang.reflect.Method.invoke(Method.java:568) ~[na:na]
at org.springframework.beans.factory.support.SimpleInstantiationStrategy.instantiate(SimpleInstantiationStrategy.java:154) ~[spring-beans-5.3.23.jar:5.3.23]
… 60 common frames omitted
Caused by: java.lang.ClassNotFoundException: com.fasterxml.jackson.databind.exc.InvalidDefinitionException
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641) ~[na:na]
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188) ~[na:na]
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:525) ~[na:na]
… 69 common frames omitted
SOLVE THE ERROR AND WRITE THE CODE
I want a shared legend for 2 areaspline highcharts. Using react, I am unable to create that shared legend between the 2.
My code:
component.js:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import AreaSplineChart from "./areaspline";
import "./App.css";
const Component = ({ data, filteredData }) => {
const chartData = filteredData.length !== 0 ? filteredData : data;
seriesOne = {"dts":["Feb 25, 2024","Feb 26, 2024","Feb 27, 2024","Feb 28, 2024","Feb 29, 2024","Mar 01, 2024","Mar 02, 2024","Mar 03, 2024","Mar 04, 2024","Mar 05, 2024","Mar 06, 2024","Mar 07, 2024"],"field":"One","legend":false,"series":[{"name":"page_views","data":[444774,484174,557434,492637,466673,409858,350902,445857,560202,554498,519825,507158],"color":"#DA70D6"},{"name":"article_views","data":[326770,340229,411025,346702,330603,297353,256416,328951,396708,392765,371077,365406],"color":"#FFD700"},{"name":"visits","data":[340812,362617,423843,371288,352045,318796,276761,347808,427239,423992,396206,391983],"color":"#6B8E23"},{"name":"return_visits","data":[156492,183181,209536,199166,186924,152693,130780,165849,217871,226510,207835,200054],"color":"#FF7F50"},{"name":"audio_play","data":[3292,3865,4913,4885,4547,4134,3762,2929,3681,4254,4444,4094],"color":"#20B2AA"},{"name":"video_play_e5","data":[687,644,457,476,776,428,572,462,1257,830,884,651],"color":"#FF8C00"}]}
seriesTwo = {"dts":["Feb 25, 2024","Feb 26, 2024","Feb 27, 2024","Feb 28, 2024","Feb 29, 2024","Mar 01, 2024","Mar 02, 2024","Mar 03, 2024","Mar 04, 2024","Mar 05, 2024","Mar 06, 2024","Mar 07, 2024"],"field":"Two","legend":true,"series":[{"name":"page_views","data":[946159,1140360,1213841,1177459,1185913,1078396,1077760,1088569,1386531,1389498,1303569,1217209],"color":"#DA70D6"},{"name":"article_views","data":[608024,733135,788907,764644,772883,713887,740001,719234,914251,906715,851080,783937],"color":"#FFD700"},{"name":"visits","data":[678800,818550,875175,856391,865832,793614,794805,794055,1001979,995969,936937,882231],"color":"#6B8E23"},{"name":"return_visits","data":[470732,558457,580674,569857,584406,520338,491274,534849,671634,666763,629567,596229],"color":"#FF7F50"},{"name":"audio_play","data":[16255,18510,22248,24258,25180,21633,18850,15823,19976,22023,22546,22746],"color":"#20B2AA"},{"name":"video_play_e5","data":[38688,74568,84344,96184,92342,75586,39355,35294,113613,124318,104916,650926],"color":"#FF8C00"}]}
return (
<div className="trends clearfix w-100 column">
<h3 className="mt-1 ms-1" style={{ color: "#81b0d2" }}>
<u>Trends</u>
</h3>
<div className="clearfix w-100 column">
<div className="clearfix w-100 column">
<div className="w-100 oneArea">
<AreaSplineChart
dates={seriesOne.dts}
nm={seriesOne.field}
lgnd={seriesOne.legend}
trendData={seriesOne.series}
/>
</div>
<div className="w-100 twoArea">
<AreaSplineChart
dates={seriesTwo.dts}
nm={seriesTwo.field}
lgnd={seriesTwo.legend}
trendData={seriesTwo.series}
/>
</div>
</div>
</div>
</div>
);
};
export default Component;
areaspline.js
import React, { useMemo } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import highchartsAccessibility from "highcharts/modules/accessibility";
import highchartsExporting from "highcharts/modules/exporting";
import highchartsExportData from "highcharts/modules/export-data";
import dayjs from "dayjs";
import "dayjs/locale/es";
highchartsAccessibility(Highcharts);
highchartsExporting(Highcharts);
highchartsExportData(Highcharts);
const sharedLegendOptions = () => {
const container = document.querySelector(".oneArea");
var XYZ = container && container.highcharts;
var seriesId = this.options.id;
if (XYZ) {
var series = XYZ.get(seriesId);
console.log(seriesId);
if (series) {
series.visible ? series.hide() : series.show();
}
}
};
const AreaSplineChart = ({ dates, nm, lgnd, trendData }) => {
dayjs.locale("en");
const addCommas = (x) =>
x.toString().replace(/B(?<!.d*)(?=(d{3})+(?!d))/g, ",");
const options = useMemo(
() => ({
chart: {
type: "areaspline",
backgroundColor: "#283347",
zoomType: "x",
height: "25%",
// marginRight: 120,
// marginLeft: -10,
},
exporting: {
enabled: true,
},
navigation: {
buttonOptions: {
verticalAlign: "top",
y: -10,
x: -5,
},
},
title: {
text: nm,
style: {
color: "#fff",
},
},
xAxis: {
categories: dates,
lineColor: "#fff",
lineWidth: 3,
labels: {
style: {
color: "#fff",
},
},
},
yAxis: {
gridLineColor: "#283347",
lineColor: "#fff",
lineWidth: 3,
labels: {
style: {
color: "#fff",
},
},
title: {
text: "",
},
opposite: false,
},
legend: {
enabled: lgnd,
itemStyle: {
color: "#fff",
},
},
accessibility: {
enabled: false,
},
credits: {
enabled: false,
},
tooltip: {
backgroundColor: "#283347",
style: { color: "#fff" },
formatter: function () {
const yFormat = addCommas(this.y);
let tooltip = `
<span><b><u>${dayjs(this.key).format(
"MMM DD, YYYY"
)}</u></b>: ${yFormat}</span>`;
return tooltip;
},
useHTML: true,
},
plotOptions: {
series: {
stacking: "normal",
marker: {
enabled: false,
states: {
hover: {
enabled: true,
},
},
},
events: { legendItemClick: lgnd ? sharedLegendOptions() : undefined },
},
},
series: trendData,
}),
[nm, dates, lgnd, trendData]
);
return (
<HighchartsReact
highcharts={Highcharts}
containerProps={{ className: `${nm}-area` }}
options={options}
/>
);
};
export default AreaSplineChart;
I keep getting the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'options')
at sharedLegendOptions
How to create the shared legend between the 2 Highcharts.
I want to make an website in which you enter an url and does multiple simple penetration tests like a Ping Request but I can’t even do that. I made a notepad file, saved it as html and ran the code. The HTML part is all good but I cant do the Javascript part. It’s a school project and I’m very new with these. I don’t know if I need to use Apache or something else to interact with other websites so any help will do.
I’m using chart.js & React in a project, I need to draw a chart of very large data, so I’m using sampling for ease of work and not using all available data.
but I want to update data when user zoom on chart for show them more precise chart.
Is there any way to detect the zoom event and fetch the data again for that part of chart ??
ThreeJS always fails when combined with electron for me.
It can’t find the libraries. I wonder if my paths are wrong in some way. I tried using a absolute path.
`I am trying to make a currency converter application with React but on my console, I get a warning saying “The specified value “[object Object]” cannot be parsed, or is out of range.” and currencyOptions is not showing and not able to see dropdown list i think they are related in some way. I am passing nlabel as string but in InputBox it is showing me as object and not able to show the label
here is the code :App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import InputBox from './components/InputBox';
import useCurrencyinfo from './hooks/useCurrencyinfo'
function App() {
const [amount,setAmount]=useState(0)
const [from,setFrom]=useState('usd')
const [to,setTo]=useState('inr')
const [convertedamount,setConvertedAmount]=useState(0)
const currencyInfo=useCurrencyinfo(from)
const options=Object.keys(currencyInfo)
const str1="from"
console.log("all option",options)
const swap=()=>{
setFrom(to)
setTo(from)
setAmount(convertedamount)
setConvertedAmount(amount)
}
const convert=()=>{
setConvertedAmount(amount*currencyInfo[to])
}
return (
<div className='w-full h-screen flex flex-wrap justify-center items-center bg-cover bg-no-repeat'
style={{background:'url(https://images.pexels.com/photos/259132/pexels-photo-259132.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)'}}
>
<div className='w-full'>
<div className='w-full max-w-md mx-auto border border-gray-60 rounded-lg p-5 background-blur-sm bg-white/30'>
<form onSubmit={
(e)=>{
e.preventDefault()
convert()
}
}></form>
<div className='w-full mb-1'>
<InputBox
nlabel={str1}
amount={amount}
currencyOptions={options}
onAmountChange={(amount)=>{setAmount(amount)}}
onCurrencyChange={(currency)=>{setFrom(currency)}}
selectedCurrency="usd"
amountDisabled="false"
currencyDisabled="false"
/>
</div>
</div>
</div>
</div>
)
}
export default App
Code for InputBox.jsx
import React, { useId } from 'react'
function InputBox(
nlabel,
amount=0,
currencyOptions=[],
onAmountChange,
onCurrencyChange,
selectedCurrency="usd",
amountDisabled=false,
currencyDisabled=false,
className="",
)
{
const id=useId()
return (
<div className={`bg-white p-3 rounded-lg text-sm flex ${className}`}>
<div className='w-1-2'>
<label htmlFor={id} className='text-black/40 mb-2'>{nlabel}</label>
<input type="number"
id={id}
className='outline-none w-full bg-transparent py-3 text-black/90'
placeholder='0'
disabled={amountDisabled}
value={amount}
onChange={(e)=>onAmountChange &&onAmountChange(Number(e.target.value))}
/>
</div>
<div className='w-1-2 flex flex-wrap justify-end text-right'>
<p className="text-black/40 mb-2 w-full">Currency Type</p>
<select value={selectedCurrency}
className='rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none'
onChange={(e)=>{onCurrencyChange && onCurrencyChange(e.target.value)}}
disabled={currencyDisabled}
>
{
console.log("opt",currencyOptions)
}
{
// currencyOptions.map((currency)=>(
// <option key={currency} value={currency}>{currency}</option>))
}
</select>
</div>
</div>
)
}
export default InputBox
code for useCurrencyInfo.jsx
import { useEffect,useState } from "react";
function useCurrencyinfo(currency)
{
const [data,setData]=useState({});
useEffect(()=>{
fetch(`https://cdn.jsdelivr.net/npm/@fawazahmed0/currencyapi@latest
/v1/currencies/${currency}.json`)
.then((res)=>res.json())
.then((res)=>setData(res[currency]))
},[currency])
console.log(data)
return data
}
export default useCurrencyinfo;
can you please fix this i have tried for 2 hours but not able to figure out why currencyOptions is not printing in InputBox and giving error when i simply use {nlabel} `
I’m making a QR Code generator app. It provides QR Codes in SVG but I also want PNG and EPS options to be available (the API I use allows that)
Related code snippets:
type: req.query.type || "svg",
const [type, setType] = useState("");
const res = await axios.get("api/generate-qrcode/", {
params: { input, size, backcolor, forecolor, type, setlabel, labeltext },
});
<select
className="text-primary text-base md:text-xs w-1/2 md:w-4/5 p-3 mt-4 mb-6 bg-secondary border-double border-b-4 border-b-primary border-r-4 border-r-primary rounded outline-none"
onChange={(e) => setType(e.target.value)}
>
<option value="svg">SVG</option>
<option value="png">PNG</option>
<option value="eps">EPS</option>
</select>
My request sends type=png but I can’t receive the QR code as the response. It works okay when I select SVG.
Response snippet:
{response && (
<div className="mt-10 bg-primary">
<SVG src={response} />
</div>
I highly suspect the response code causes the error but I don’t know how to fix it.
I tried this but didn’t work:
{response && (
<div className="mt-10 bg-primary">
{type === "svg" && <SVG src={response} />}
{type === "png" && <img src={`data:image/png;base64,${response}`} alt="QR Code" />}
</div>
Also, on the top of the file, I have import SVG from "react-inlinesvg"; to handle SVG. I did a research to see if I also need to import PNG, but documentations were stating it is not required.
I am new to html and web development. Trying to build a website where a server side python script returns a json which needs to be displayed as a table on the webpage. The fields in the json can be different each time hence the table needs to be dynamically constructed including header/column fields.
I know I can use javascript or jquery but am unable to write the correct code
The json looks like below: It is a pandas dataframe converted to json using df.to_json(orient=”records”)
[{"Date":"2024-01-11","Market":"USA","Region":"East","Prod":"Long","param1":0.0415,"param2":0.0382,"param3":0.1701,"param4":6.3892,"param5":3.8563,"param6":2.7315,"StockLevel":"InStock"},{"Date":"2024-01-12","Market":"USA","Region":"East","Prod":"Long","param1":0.0447,"param2":0.0418,"param3":0.1724,"param4":6.7594,"param5":4.2461,"param6":2.9409,"StockLevel":"InStock"},{"Date":"2024-01-16","Market":"USA","Region":"East","Prod":"Long","param1":0.0506,"param2":0.0465,"param3":0.1756,"param4":7.4431,"param5":4.7551,"param6":3.2096,"StockLevel":"InStock"},{"Date":"2024-01-17","Market":"USA","Region":"East","Prod":"Long","param1":0.0523,"param2":0.05,"param3":0.1783,"param4":7.6712,"param5":5.109,"param6":3.4229,"StockLevel":"InStock"},{"Date":"2024-01-18","Market":"USA","Region":"South","Prod":"Long","param1":0.0551,"param2":0.0539,"param3":0.1814,"param4":7.7536,"param5":5.3988,"param6":3.6171,"StockLevel":"InStock"},{"Date":"2024-01-19","Market":"USA","Region":"East","Prod":"Long","param1":0.0623,"param2":0.0596,"param3":0.1858,"param4":8.6556,"param5":5.9864,"param6":3.9416,"StockLevel":"InStock"},{"Date":"2024-01-22","Market":"USA","Region":"East","Prod":"Long","param1":0.0658,"param2":0.0644,"param3":0.19,"param4":9.8681,"param5":6.7187,"param6":4.3345,"StockLevel":"InStock"},{"Date":"2024-01-23","Market":"USA","Region":"East","Prod":"Long","param1":0.0671,"param2":0.0685,"param3":0.1939,"param4":10.5417,"param5":7.2909,"param6":4.6767,"StockLevel":"InStock"},{"Date":"2024-01-24","Market":"USA","Region":"West","Prod":"Long","param1":0.0702,"param2":0.0732,"param3":0.1985,"param4":11.517,"param5":7.992,"param6":5.0838,"StockLevel":"InStock"},{"Date":"2024-01-25","Market":"USA","Region":"West","Prod":"Long","param1":0.071,"param2":0.0772,"param3":0.2029,"param4":12.1621,"param5":8.5937,"param6":5.4606,"StockLevel":"InStock"},{"Date":"2024-01-26","Market":"USA","Region":"East","Prod":"Long","param1":0.0682,"param2":0.0797,"param3":0.2065,"param4":12.4307,"param5":9.0514,"param6":5.7872,"StockLevel":"InStock"},{"Date":"2024-03-07","Market":"USA","Region":"South","Prod":"Long","param1":0.0941,"param2":0.1447,"param3":0.3495,"param4":16.0539,"param5":15.2252,"param6":12.9338,"StockLevel":"InStock"},{"Date":"2024-03-08","Market":"USA","Region":"West","Prod":"Long","param1":0.0877,"param2":0.145,"param3":0.3545,"param4":15.6296,"param5":15.1376,"param6":13.0054,"StockLevel":"InStock"}]
Right now its displaying as json only using the below html. The code for creating the dynamic table isnt working
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output</title>
</head>
<body>
<div class="container">
<h2>Form Submission Result</h2>
<div id="outputFrame" class="output-frame"></div>
</div>
<script>
// Get the result from the query parameter in the URL
var result = new URLSearchParams(window.location.search).get('result');
// create dynamic table
/*
const dbParam = result.stringify({table:"Output",limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = result.parse(this.responseText);
let text = "<table border='1'>"
for (let x in myObj) {
text += "<tr><td>" + myObj[x].name + "</td></tr>";
}
text += "</table>"
document.getElementById("outputFrame").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_html_table.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
*/
// Display the result in the output frame
document.getElementById('outputFrame').innerHTML = result;
</script>
</body>
</html>
We are adding unit tests to our javaScript project and we are using jest for it.
As I saw online, we can create _mocks_ folder and add different files we want to mock to this folder.
The problem with this approach is that I couldn’t find a way to create dynamic mocks (I want to create different mocks for the same file/class/function).
This is what I tried:
The original class:
const httpClient = {
get(str){
return str;
}
};
module.exports = { httpClient }
The mock file in _mocks_ :
const httpClient = {
get(str){
return 'a';
}
};
module.exports = { httpClient }
The mock in the test file (named project.test.js):
const { httpClient } = require('./httpClient');
describe('fetchAndProcessUserData', () => {
jest.mock('httpClient', () => ({
...jest.requireActual('./httpClient.js'),
get: jest.fn().mockImplementation((str) => 'b')
}));
it('string should return b', () => {
const returnValue = httpClient.get('not good');
expect(returnValue).toBe('b');
});
});
I also tried writing the mock code before the ‘describe’ in the ‘describe’ and in the test itself (the it block)
Some other jest functions I tried:
For some reason it always run the original get() function and not the mock one.
This is the configuration I’m using, incase it’s any help:
const { defaults } = require('jest-config')
module.exports = {
...defaults,
rootDir: '.',
moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node'],
moduleDirectories: ['node_modules'],
automock: false
};
I would appreciate any help 🙂
I have a controller made just to test cookies:
export const checkCookie = async (req: Request, res: Response) => {
res.status(200).json({ message: "Hello" });
};
and then router:
router.get("/login", checkCookie);
and in postman i get:
{
"message": "Hello"
}
i have app.ts file:
import express, { Express } from "express";
import cors from "cors";
import cookieParser from "cookie-parser";
//
import userRouter from "./routes/userRoutes";
import cardsRouter from "./routes/cardsRoutes";
import contactsRouter from "./routes/contactsRoutes";
import transferRouter from "./routes/transferRoutes";
import authRouter from "./routes/authRoutes";
//
const app: Express = express();
app.use(express.json());
app.use(cookieParser());
// app.use((req, res, next) => {
// console.log("hello from the middleware 2 ");
// next();
// });
app.get("/", (req, res) => {
res.cookie("name", "Test");
res.cookie("cookieName", "1", {
expires: new Date(Date.now() + 900000),
httpOnly: true,
});
});
app.get("/", (req, res) => {
res.send(req.cookies);
});
app.use(
cors({
credentials: true,
origin: "http://localhost:4200",
})
);
app.use("/api/v1", [
userRouter,
cardsRouter,
contactsRouter,
transferRouter,
authRouter,
]);
export default app;
I want to set a cookie after a call from the client:
url = 'http://localhost:8000/api/v1/login';
token: string = '';
async login(formObject: any) {
console.log('logging');
try {
const res = await axios.get(`${this.url}`, { withCredentials: true });
console.log(res.data);
console.log('http cookie set!');
} catch (error) {
console.error(error);
}
}
the console says:
logging
Object { message: "Hello" }
http cookie set!
But when i go to dev tools -> storage -> cookies theres no cookie.
Why i cant set a cookie with Node.js? I have cookie-parser, and i dont have any idea why i dont have this cookie.
edit:
i tried adding:
res.send(req.cookies);
but it didnt help.
I am using this Data Table React component: https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro–docs
And i need to make a feature that when the user right click on a table row, it needs to show a list of actions that the user can click and run some code
I searched all over the internet but cannot find anything useful, can anybody help, please?
I tried searchig for a lot of solutions. Tried search if the react-contextify can help but cannot find something that can help me. Not even in the docs of the component i’m using
Having trouble wrapping my head around making requests through the SOCKS proxy to whois.lookup.
I have a socks proxy (smartproxy) and a node server. I’ve tried tunnel, request, socks-proxy-agent, It seems I’m missing the mark completely
I was trying to add firebase phone otp verification on a project but getting frustrated by the message of recatcha has already been rendered on this element ,on a first try the otp sends successfully to the mobile number and goes to verified page but whenever I try to navigate to the otp send page again using back arrow key of the browser gives that recaptcha rendered error I thought on return If I clear the recaptchaVerifier It will be fixed but it did not solve the problem
Code:
typeexport default function testPage() {
const app = initializeApp(firebaseConfig);
const router = useRouter();
const inputRef = useRef(null);
const checkboxRef = useRef(null);
useEffect(() => {
if(!window.recaptchaVerifier){
const auth = getAuth(app);
try {
// Check if reCAPTCHA has already been rendered
window.recaptchaVerifier = new RecaptchaVerifier(auth, "sendCode", {
size: "invisible",
callback: async function (recaptchaToken) {
// reCAPTCHA solved, send recaptchaToken and phone number to backend.
const phoneNumber = inputRef.current.value;
console.log(recaptchaToken);
try {
await signInWithPhoneNumber(
auth,
phoneNumber,
window.recaptchaVerifier
);
console.log("OTP sent successfully");
router.push("/verified");
} catch (error) {
console.log("Error signing in:", error);
}
},
});
// Render the reCAPTCHAVerifier.
window.recaptchaVerifier.render().then(function (widgetId) {
window.recaptchaWidgetId = widgetId;
});
} catch (error) {
console.error("Error creating/re-rendering reCAPTCHA verifier:", error);
}
return () => {
// Clear the reCAPTCHAVerifier only if it has been rendered
if (window.recaptchaWidgetId) {
console.log("Clearing reCAPTCHA verifier");
try {
window.recaptchaVerifier.clear();
window.recaptchaVerifier = null; // Reset the verifier
window.recaptchaWidgetId = null; // Reset the widgetId
} catch (error) {
console.error("Error clearing reCAPTCHA verifier:", error);
}
}
};
}
}, []); // Add 'app' to the dependency array if it's not declared in the code you provided
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh",
width: "100vw",
color: "black",
flexDirection: "column",
}}
>
<div style={{ display: "flex" }}>
<input id="isSignup" ref={checkboxRef} type="checkbox" />
<label for="isSignup">isSignup</label>
</div>
<div style={{ display: "flex" }}>
<input ref={inputRef} />
<button id="sendCode"> send otp </button>
</div>
</div>
);
}
I have tried to search on the google about the solution but did not get fixable solution