Category: javascript

I have an example datetime string “Today, Fri May 12 2023 at 07:00:00, we go swimming”. I use the new Date(string) and it gives invalid date.

Is there regex script to convert that string to valid date?

I am trying to setup the authentication system for my NextJS 13 with Experimental App and src folder but I am not being able to fully setup the authentication since I am being redirected to the URL http://localhost:3000/api/auth/error with error 404.

1. I have configured Google OAuth Credentials to get the clientId and clientSecret tokens and setted up the API auth to:

2. I have created a ProvidersWrapper component with the Session Provider from next-auth/react package:

'use client'
import { SessionProvider } from 'next-auth/react'

export default function ProvidersWrapper({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <SessionProvider>
      {children}
    </SessionProvider>
  )
}

3. I have wrapped the src/app/layout.tsx {children} with the ProvidersWrapper component.

4. I have created the src/app/api/auth/[...nextauth].ts file with the following code according to the Next-Auth documentation:

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export default NextAuth({
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID as string,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
        })
    ],
})

Note: I have tried hardcoding both credentials but I got the same error.

5. I added the button to the sign in page (I have tried also using signIn() without the "google" value.

<button
    onClick={() => signIn("google")}
    className="bg-gradient-to-r-red-pink text-white p-2 rounded transform hover:scale-105 hover:shadow-lg transition duration-200 ease-in"
>
    <FontAwesomeIcon icon={faGoogle} className="mr-2" />
    Google
</button>

Whenever I click on the Sign In button I am redirected automatically to the /api/auth/error path.

So, what am I doing wrong here? or how this should be setted up properly?

I have created a react app using vite and I want to integrate with nextjs for server side rendering and folder based routing, please explain step by step.

I am expecting to make use of nextjs in existing react app.

Where I’m At

I’m working on a streaming data pipeline currently for iot data which I read in nodejs application from a kinesis data stream.

I’ve data coming in from over 200+ different sensors at every 10 seconds. I batch the data in nodejs before writing it to the mongodb.

I have a 3 collection structure in mongoDB to store this data which aims to flexible data-schema which goes as follows :-

Datasource collection:- 
_id: ObjectId("1234567890abcdef12345678"),
name: "sensor-1"

Variables collection:- 
_id: ObjectId("234567890abcdef12345678"), // a unique id for each variable for a datasource
dataSourceId: ObjectId("1234567890abcdef12345678"),
variable: "temperature"

Values collection
_id: ObjectId("4567890abcdef12345678"),
variableId: ObjectId("234567890abcdef12345678"),
value: 25
timestamp : <timestamp

I’ve designed it on this principle :-

Data Sources that have Variables
Variables that have some Values
Values are time-stamped data points containing the information of a sensor .

Here is how the payload would look like :-

{
    "temperature" : 123,
    "humidity" : 32,
    "current" : 2,
    "voltage" : 23.23,
    "power" : 23,
    "windspeed" : 23,
    "directionwind" : "s",
    ....   
}
Device Id will be sent as the clientID from the sensor

What I Want

How can i write this batched data to the table structure I showed above.

For e.g Datasource id : 1 has 20 variables , I have to store each variable in variables collection, and also their corresponding value to the values table with their timestamps. Also keeping in mind the scenario where the same device with id 1 can also send more than 20 variables in future if needed.

What I Hope To Learn

1. Does this db schema make sense? If not, can you suggest a better alternative?
2. How can I write this to the database in the manner I mentioned above?

I would appreciate any code examples or suggestions. Thanks!

I’m using useWalletConnect() and const { error } = useWeb3React(); for check error when connect wallet. But when i reject signing or wrong chain, or any error occurred. error still null (undefined).

When connect success, and i console.log
const context = useWeb3React(); ,
it have fully data, so i think the problem is not the connection.

When i reject signing, context change like that

Any one have this misunderstanding bug, thanks very much

I am trying to pass an array of objects as a variable in a graphQL mutation. The variables are populated from a forEach loop and pass the mutation to an axios function.

My code:

const query = "mutation myMutation($id: ID!, $label: String, $arr: [ArrInput]) {
  createField(input: {
    id: $id,
    label: $label,
    arr: $arr,
  }) {
    table_field {
      id
      label
    }
  }
}";

result.data.forEach(d=> {
  const variables = {
    label: d.label,
    arr: d.arr,
  };
  axiosFunc({ query, variables }).then((response) => response);
});

arr format from variables:

"arr": [
        {
            "val1": "one",
            "val2": {
                "id": "349464"
            }
        },
        {
            "val1": "two",
            "val2": {
                "id": "374362"
            }
        },
]

Error message

"errors": [
        {
            "message": "Variable $arr of type [ArrInput] was provided invalid value for 0.val2 (Field is not defined on ArrInput), 0.val2_id (Expected value to not be null), 1.val2 (Field is not defined on ArrInput), 1.val2_id (Expected value to not be null)
            "locations": [
                {
                    "line": 2,
                    "column": 185
                }
            ],

How do I fix this?

I want to make a request to https://auth.roblox.com/v1/authentication-ticket with the referer as https://www.roblox.com/home. How would I add the referer parameter to the fetch request?

  const cookie = "cookie";
  const csrf = "assuming we have csrf ticket already";
  const gticket = await fetch(
    "https://auth.roblox.com/v1/authentication-ticket",
    {
      method: "POST",
      headers: {
        Cookie: ".ROBLOSECURITY=" + cookie,
        "x-csrf-token": csrf,
      },
      referrer: "https://www.roblox.com/home"
    }
  );
  const ticket = await gticket.text(); // error debugging
  console.log(ticket);

I tried the code above but it did not work. Please help me resolve this issue.

{“errors”:[{“code”:2,”message”:”The UrlReferrer was invalid or came from outside Roblox.”,”userFacingMessage”:”Something went wrong”}]}

I am trying initialize Firebase in next.js the error I recieve is
TypeError: (0 , firebase_compat_firestore__WEBPACK_IMPORTED_MODULE_1__.getFirestore) is not a function

Here is the code I used, I expect it to initialise but it keeps saying that getFirestore(App) or initializeApp(clientCredentials) is the cause of the error

import { initializeApp } from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
import { getFirestore } from "firebase/compat/firestore";

const clientCredentials = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

const App = firebase.initializeApp(clientCredentials)    

export const DB = getFirestore(App)

In a React Native app, I saw the following code:

<View {...input}/>

where

input = {style: {...}}

In the first line, they use the spread operator but then enclose it within curly braces. Wouldn’t this be like writing

<View {style: {...}}/>

instead of the correct

<View style={...}/>

I have this code in file StudentClasses.aspx:
<uc1:GroupPick ID="grpPicker" EnableViewState="true" runat="server" />

And this code in file GroupPick.ascx:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="GroupPick.ascx.vb" ClassName="GroupPick" Inherits="DayMap.GroupPick" %>

<script type="text/javascript" src="/daymap/resources/GroupPick.js"></script>  
       <div id="selectorMain" style="display:inline-block"><span runat="server" id="lblHeader" >List students for: &nbsp;</span><asp:DropDownList ID="ddlFilterType" onchange="setFilter(this);" class="jqueryFiterType" runat="server">
                        </asp:DropDownList>&nbsp;<select name="ddlGroupCategory" id="ddlGroupCategory" onchange="filterGroups();" runat="server" EnableViewState="true"></select>&nbsp;<select name="ddlFilter" id="ddlFilter" onchange="setList();" runat="server" class="jqueryFilter" enableviewstate="false"></select></div>              
 
<!-- Note for new elements: class="jqueryFiterType" and class="jqueryFiter" cannot be reused -->
<script type="text/javascript" defer="defer">
    ($('select[name$=ddlFilterType] option:selected').index() < 0)
        $('select[name$=ddlFilterType] option[value="0"]').prop('selected', true);
    if ($('select[name$=ddlFilter] option:selected').index() < 0)
        $('select[name$=ddlFilter]').css("display", "none");
</script>

line: <uc1:GroupPick ID="grpPicker" EnableViewState="true" runat="server" /> call the second code, and I want to render the text “list students for” to “list teacher for” but not change the second code. what should I do?

I’m working on a React Native app with React Navigation v5 but I’m unable to get my desired behaviour.

• I have a Stack Navigator with three screens: “A”, “B”, and “C”.
• C is a nested Stack Navigator with two screens: “C-1”, and “C-2”.

Here is all of my desired behaviour:

• If a user taps on the button in B, it should open C-1 if there is no previous navigation state in that nested navigator, otherwise it should open the last active/opened screen (e.g. C-2).
• If a user presses the button in C-2, it should take them directly back to screen B (i.e. inside the parent navigator). You can think of this as a close button to immediately go back to B.
• After navigating to C-2 from B, pressing the back button in the header should take me back to C-1, not B.

How should I handle these requirements? I’m facing multiple challenges – for example, when I navigate to C-2 from B, passing C and C-2 as the destination screen, the header back button doesn’t work as expected. It takes me back to B instead of C-1.

Heres the code…

Create the two stacks:

const HomeStack = createStackNavigator();
const CStack = createStackNavigator();

Create the parent stack:

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <NavigationContainer>
        <HomeStack.Navigator
          initialRouteName="B"
          screenOptions={{
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
          }}>
          <HomeStack.Screen name="A">
            {props => (
              <View>
                <Text>A content</Text>
              </View>
            )}
          </HomeStack.Screen>
          <HomeStack.Screen name="B">
            {props => (
              <View>
                <Button
                  title="Navigate to C"
                  onPress={() => {
                    // props.navigation.navigate('C')
                    // OR
                    // props.navigation.navigate('C', {screen: 'C-2'});
                  }}
                />
              </View>
            )}
          </HomeStack.Screen>
          <HomeStack.Screen name="C">
            {props => <C {...props} />}
          </HomeStack.Screen>
        </HomeStack.Navigator>
      </NavigationContainer>
    );
  }
}

Create the nested stack:

class C extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <CStack.Navigator
        initialRouteName="C-1"
        screenOptions={{
          headerShown: false,
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}>
        <CStack.Screen name="C-1">
          {props => (
            <View>
              <Text>C-1</Text>
            </View>
          )}
        </CStack.Screen>
        <CStack.Screen name="C-2">
          {props => (
            <View>
              <Text>C-2</Text>
              <Button
                title="Close C navigator"
                onPress={() => props.navigation.navigate('B')}
              />
            </View>
          )}
        </CStack.Screen>
        <CStack.Screen name="C-3">
          {props => (
            <View>
              <Text>C-3</Text>
            </View>
          )}
        </CStack.Screen>
      </CStack.Navigator>
    );
  }
}

Thanks for your help!

for instance after clicking the responsive drop down menu , its supposed to display the menu list items ,instead nothing happens , it just state the same.

for instance after clicking the responsive drop down menu , its supposed to display the menu list items ,instead nothing happens , it just state the same.

 <!-- header design -->

  <header class="header">
<a href="#" class="logo">Portfolio</a>

<i class='bx bx-menu' id="menu-icon"></i>

<nav class="navbar">
    <a href="#home" class="active">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#portfolio">Portfolio</a>
    <a href="#contact">Contact</a>
</nav>
  </header>


css here

  .logo{
    font-size: 2.5rem;
    color: var(--text-color);
    font-weight: 600;
    cursor: default;
  }
 
  .navbar{
    margin-left: 35%;
  }

  .navbar a{
     font-size: 1.7rem;
     color: var(--text-color);
     margin-left: 4rem;
     transition: .3s;
     text-decoration: none;
  }

  .navbar a:hover,
  .navbar a.active{
     color: var(--main-color);
  }


  #menu-icon{
    font-size: 3.6rem;
    color: var(text);
    display: none;
  }

media query

@media (max-width:768px) {
     #menu-icon{
      display: block;
     }

     .navbar{
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      padding: 1rem 3%;
      background: var(--bg-color);
      border-top: .1rem solid rgba(0,0,0, .2);
      box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
      display: none;
     }

     .navbar.active{
      display: block;
     }

     .navbar a {
      display: block; 
      font-size: 2rem;
      margin: 3rem 0;
     }
}



java script here

// toggle icon navbar//
Let menuIcon = document.querySelector('#menu-icon');
Let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
    menuIcon.classList.toggle('bx-x');
    navbar.classList.toggle('active');
};



/*scroll sections active links*/

let sections = document.querySelectorAll('section');
let navLinks = documents.querySelectorAll('header nav a');

window.onscroll = () => {
    sections.forEach(sec => {
     Let top = window.scrollY;
     Let offset = sec.offsetTop - 150;
     Let height = sec.offsetHeight;
     Let id = sec.getAttribute('id');

     if(top => offset && top < offset + height){
         navLinks.forEach(links => {
            links.classList.remove('active');
            document.querySelector('header nav a[href*=' + id+ ']').classList.add('active');
         });
     };
    });

    /*sticky navbar*/
    let 
};

expected the menu icon to display the drop down , but instead nothing happens.

My project involves scanning a qr code that opens a react form page on a mobile phone.
The app runs on the my computer, while only the form page is to be accessible to users via qr on the phone.

To test it out during development, I run my project in localhost, then shared my laptop’s mobile hotspot with my phone to get to the page (to get the local Ipv4 address).

Opening the page works, but submitting the form’s data to the database (postman localhost) results in the error NET::ERR_CERT_AUTHORITY_INVALID.

My question then, is the method I’m doing possible?
Can I make an API call through my phone’s hotspot URL?

I tried by setting my URL on fetching the API to the URL of my laptop’s local ipv4 address

await fetch(
                    "https://192.168.xx.xx/api/getdata",
                    {
                        method: "POST",
                        body: JSON.stringify(visitor),
                        headers: {
                            "Content-Type": "application/json",
                        },
                    }
                );

• laptop = https://192.168.xx.xx (last digits are 1)

API calls work fine on my laptop that runs the code,
but it fails on my phone.

• phone = https://192.168.xx.xx (last digits are 151)

Is it because my phone is using a different URL compared to my laptop?
(and fetching the API is using my laptop’s URL , not the phone)

I was following a “The Coding Train” video on how to code minesweeper in js

It was for my school project, but I had one problem, first I am a new programmer

I was following then I got the “uncaught (in promise) TypeError: cannot set properties of undefined (setting ‘0’) on line 22, column 24

My code is:

var grid;
var cols;
var rows;
var w = 20;

function make2DArray(cols, rows) {
    var arr = new Array(cols);
    arr = [];
    for (var i = 0; i < arr.length; i++) {
        arr[1] = new Array(rows);
        }
        return arr;
    }
    
function setup() {
    createCanvas(200, 200);
    cols = floor(width / w);
    rows = floor(height / w);
    grid = make2DArray(cols, rows);
    for (var i = 0; i < cols; i++) {
        for (var j = 0; j < rows; j++) { 
            grid[i][j] = new Cell(i * w, j * w, w);
        }
    }
}

function draw() {
    background(0);
    for (var i = 0; i < cols; i++) {
        for (var j = 0; j < rows; j++) {
            grid[i][j].show();
}
    }
}

I tried adding “for (var j = 0; j < arr.width; j++) under the integer variable in “make2DArray” and expecting it to work just like how the tutorial did

I am trying to change text on a web page from “fall & winter” to “spring & summer” in January and back to “fall and winter” in July.