Need help merginG two API calls into one

Hoping someone here can help me with these codes. FYI I have almost zero experience coding in Java so I just asked ChatGPT to code for me.

I have two separate codes that:

  1. Pulls ticket data (assignee name, ticket ID, created date)
  2. Pulls ticket metrics (ticket ID, solved date, resolution time)

I need to combine these two so I can get only data that was solved within a spific date.

Code to get ticket date:

  function getZendeskTickets() {
    var subdomain = 'our-subdomain';
    var email = 'our-email-address';
    var token = 'our-token';
  
    var url = 'https://' + subdomain + '.zendesk.com/api/v2/tickets.json?per_page=100&page=' + '&sort_by=created_at&sort_order=desc';
    var headers = {
      'Authorization': 'Basic ' + Utilities.base64Encode(email + ':' + token)
    };
    var options = {
      'headers': headers,
      'method': 'get',
      'muteHttpExceptions': true
    };
    
    var sheetName = "Tickets";
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
    if (!sheet) {
      sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet(sheetName);
    }
    var numRows = sheet.getLastRow();
    if (numRows > 1) {
      sheet.getRange(2, 1, numRows - 1, 5).clear(); // clear previous data
    }
    var row = 2;
    
    var nextPageUrl = url;
    while (nextPageUrl) {
      var response = UrlFetchApp.fetch(nextPageUrl, options);
  
      if (response.getResponseCode() == 200) {
        var json = response.getContentText();
        var data = JSON.parse(json);
        
        var groupIds = [4929119087759, 6355597919631, 4444649376143, 360002857975, 360002530015, 360002530396, 6439308953103, 360008036995, 5859298250895, 5739337419023];

        for (var i = 0; i < data.tickets.length; i++) {
          var ticket = data.tickets[i];
          if ((ticket.status === "solved" || ticket.status === "closed") && groupIds.includes(ticket.group_id)) {
            sheet.getRange(row, 1).setValue(ticket.id);
            sheet.getRange(row, 2).setValue(ticket.assignee_id);
            sheet.getRange(row, 3).setValue(ticket.created_at);
            sheet.getRange(row, 4).setValue(ticket.group_id);
            sheet.getRange(row, 5).setValue(ticket.status);
            row++;
          }
        }


        
        nextPageUrl = data.next_page;
      } else {
        var errorMsg = response.getContentText();
        Logger.log(errorMsg);
        break;
      }
    }
  }

Code to get ticket metrics:

function getZendeskTicketMetrics() {
   var subdomain = 'our-subdomain';
   var email = 'our-email-address';
   var token = 'our-token';
  var url = 'https://' + subdomain + '.zendesk.com/api/v2/ticket_metrics.json?per_page=100&page=';
  
  var options = {
    'method': 'get',
    'headers': {
      'Authorization': 'Basic ' + Utilities.base64Encode(username + ':' + password)
    },
    'muteHttpExceptions': true
  };
  
  var allData = [];
  var page = 1;
  
  while (true) {
    var response = UrlFetchApp.fetch(url + page, options);
    var data = JSON.parse(response.getContentText());
    
    if (data.ticket_metrics.length === 0) {
      // No more data to fetch, break out of the loop
      break;
    }
    
    allData = allData.concat(data.ticket_metrics);
    
    page++;
  }
  
  var sheetName = "Metrics";
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  if (!sheet) {
    sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet(sheetName);
  }
  var numRows = sheet.getLastRow();
  if (numRows > 1) {
    sheet.getRange(2, 1, numRows - 1, 6).clear(); // clear previous data
  }
  var row = 2;
  
  sheet.getRange(1, 1, 1, 5).setValues([['Ticket ID', 'Solved at', 'Reopens', 'Replies', 'Full Resolution Time']]);
  
  var values = [];
  for (var i = 0; i < allData.length; i++) {
    var ticketMetric = allData[i];
    values.push([ticketMetric.ticket_id, ticketMetric.solved_at, ticketMetric.reopens, ticketMetric.replies, ticketMetric.full_resolution_time_in_minutes]);
  }
  sheet.getRange(2, 1, values.length, values[0].length).setValues(values);
}

JavaScript If-else Statement and Background Color not Producing Correct Results

Question) Validate that the user age field is at least 21 and at most 35. If valid, set the background of the field to validColor and assign true to userAgeValid. Otherwise, set the background to invalidColor and userAgeValid to false. Note: userAgeInput.value accesses the userAge.

**This is in JavaScript

I have tried two different ways of coding it)

  1. This code below will allow the value and background color of userAge = 28 to be correct. However, when it tests 13 and 130 it says incorrect.
   if (userAge>=21 && userAge<=35) {
      userAgerInput.style.background = invalidColor;
      userAgeValid = false;
   }
   else {
    userAgeInput.style.background = validColor;
    userAgeValid = true;
   }
  1. None of the tests mark as correct
   if (userAge>=21 && userAge<=35) {
      userAgerInput.style.background = validColor;
      userAgeValid = true;
   }
   else {
    userAgeInput.style.background = invalidColor;
    userAgeValid = false;
   }

I don’t understand why the second one is correct since it has the correct condition as well as the correct background color and true/false value.

Any help would be much appreciated.

Switching From Crypto Wallet Auth to Social Auth

I have built a product which has quite a number of users and the authentication method I used was Ethereum and Solana (meaning people connect their wallets to log in). However, I would like to switch to social auth based logins (e.g. google, twitter, etc.). What is the best way I can go about doing this whilst keeping the users account intact? In other words, how can I get existing users (who used their wallet addresses to log in) to connect their social account in order to log in from here onwards? What tools or what procedure should I take?

P.S. My stack is NextJS, NodeJs and Firebase for database.

Ignore width of inline element for a CSS / HTML / JS typing animation

I have a typing animation which is centrally justified for the main page of my portfolio website. It works by animating the typing and deleting of the text using a javascript function and making a pipe ‘|’ character at the end of the typed string blink using CSS keyframes.

enter image description here

My problem is that the ‘|’ character (typing cursor) is accounted for when calculating the width of the line of text. This forces all preceding characters slightly to the left making the typing animation text off center.

Animation with cursor:

Animation with cursor

Animation without cursor:

Animation without cursor

Code:

const cursorElement = document.getElementById('cursor');
const textElement = document.getElementById('typed-text');

const texts = ['Software Engineer', 'Programmer', 'Tech Geek', 'Coffee Lover', 'Pasta Connoisseur' ];
let count = 0;
let index = 0;
let currentText = '';
let letter = '';
let isDeleting = false;

(function type() {

  if(count === texts.length){
    count = 0;
  }
  currentText = texts[count];

  if(isDeleting) {
    letter = currentText.slice(0, index--);
  } else {
    letter = currentText.slice(0, ++index);
  }

  textElement.textContent = letter;

  if(letter.length === currentText.length){
    isDeleting = true;
    setTimeout(type, 1000);
  } else if (isDeleting && index === -1) {
    isDeleting = false;
    count++;
    setTimeout(type, 500);
  } else {
    setTimeout(type, 100);
  }
}());
@import"https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&amp;family=Roboto:wght@400;500&ampdisplay=swap";

:root {
    --header-height: 3.5rem;
    --first-color: hsl(207, 65%, 65%);
    --title-color: hsl(207, 4%, 16%);
    --text-color: hsl(207, 4%, 28%);
    --text-color-light: hsl(207, 4%, 56%);
    --body-color: hsl(207, 4%, 99%);
    --container-color: hsl(207, 4%, 95%);
    --gradient-color: linear-gradient( 180deg, hsla(190, 48%, 72%, 0), rgb(137, 135, 154) );
    --body-font: "Roboto", sans-serif;
    --title-font: "Lora", serif;
    --biggest-font-size: 1.5rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    --tiny-font-size: .625rem;
    --font-medium: 500;
    --font-semi-bold: 600;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-fixed: 100
}

* {
    box-sizing:border-box;
    padding:0;
    margin:0
}

.main {
    overflow:hidden
}

.home__title {
    color:var(--title-color);
    font-family:var(--title-font);
    font-weight:var(--font-medium);
    text-align:center;
    font-size:var(--biggest-font-size);
    letter-spacing:.3px;
    margin-bottom:.5rem
}

.typing-effect {
    display: flex;
    justify-content: center;
    align-items: center;
    /*position: relative;*/
    
}

#cursor {
    animation: blink 1s infinite;
    padding-bottom: 0.05em;
    padding-left: 0.03em;
    font-family: 'Times New Roman', Times, serif;
    white-space: pre;
}

@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}
    <main class="main">
      <section class="home section" id="home">
        <div class="home__container container grid section__border" id="maincard">
            <div class="home__data grid">
                <div id="home__title" class="home__title">Hello World, I'm Dan<br>
                    <div id="typing-div" class="typing-effect">
                        <span id="typed-text"></span>
                        <span id="cursor"></span>
                      </div>
                </div>
             </div>
          </section>
     </main>

How can I make it so that the cursor width is ignored when calculating the width of the typed text?

Creating dynamic routes from local json file nextjs 13

I have a local JSON file that is an array of objects such as:

projects.json

[
   {"id":0,
    "title":"this is the title",
    "info":"here is more info",
    "img":"www.imagelink.com"},
     ...
     ...
   {"id":10,
    "title":"this is the title",
    "info":"here is more info",
    "img":"www.imagelink.com"},
]

my goal is to map this object and have a separate page link for each one. Right now I have this as a set up. A link with a dynamic URL, distinct for each object.

Projects.tsx

<div className='projects-container'>
      {projectlist.map((project)=>{
        return(
            <Link href={`/${project.id}`}>
              <img src={project.img} alt="this is an image" />
            </Link>
        )
      })}
    </div>

I am having trouble figuring out how to pass all the props to each dynamic route, so that when the user clicks the page they will be directed to a page with all this information set up like this, for an example.

[uniquepage]/page.tsx

export default function UniquePage() {
  return (
    <div>
      {projectlist.map(project=>{
        return(
          <p>ID Here:{project.id}</p>
          <p>Title Here:{project.title}</p>
          <p>Info Here:{project.info}</p>
        )
      })}
    </div>
  )
}

All the guides I follow are based off of getting data from APIs and async functions. Since the json file is in the local directory I do not need an async funciton.

how to send multiple parameters on fetch get request?

guys.
I am using Fetch for GET request, but need to send multiple parameters for filter function.
I have depSeq, workName parameters, but have no idea how to send them via Fetch.
I used axios before, and I could send params as second parameter, so it was kinda straight forward to send params.
But on Fetch method, I dont see anyone using params like axios does.

How can I send multiple params on Fetch GET method?

How do I create a “Hamburger Nav Menu” like this one?

I saw this site on Themeforest, I am in the process of creating a personal website for myself (for fun and for the potential to receive work as a freelancer).

But this “hamburger sidebar nav” is a bit out of my coding knowledge.

Here is the link to the website, https://harry-nuxt.vercel.app/ click on the top right “hamburger icon”. I want to know how I could create this effect, where it slides up from the bottom, and the parent nav links have a + icon next to links that have child links. (and the + icon transforms into an X by rotating it.)

Any help with this would be greatly and sincerely appreciated!
Thank you!

why typescript’s empty object type doesn’t mean an empty object without any properties?

interface Person { name: string };

let person : Person = { name: "John Smith" };

let empt: {} = person;

I don’t really understand the idea why typescript allow the above code to be compiled, isn’t that {} means it doesn’t contain any properties, but Person has one property name, {} obviously doesn’t contain a property name called name, how Person type can be assignable to an empty type?

behavior differences between firebase realtime database and firestore

i used to use realtime database on firebase and i always used update which used to create if the node is missing. So for the below code:

 async updateUser(uid: string, payload: any) {
    const userDocRef = doc(this.firestore, 'users/' + uid );
    return updateDoc(userDocRef, {"email": "[email protected]"});
  }

Realtime db will simply create a new node with uid if does not exist or else update. However, doing the same with Firestore db it gives me error as

api.js?onload=__iframefcb905117:29 ERROR Error: Uncaught (in promise): FirebaseError: [code=not-found]: No document to update: projects/baniya-38d78/databases/(default)/documents/users/vdZMeCkTfrhd12j1CWyR9eGhra12
FirebaseError: No document to update: projects/baniya-38d78/databases/(default)/documents/users/vdZMeCkTfrhd12j1CWyR9eGhra12

is that how firestore db works and i have to always check if it exist to decide create or update?

How can I use writeText() and readText() to copy and paste text throughout browsers using my Chrome Extension?

Im trying to create a Chrome extension that's main purpose is to copy and paste text, without using the standard ctrl C and V. Im trying to use writeText() to copy the text into my clipboard which works for the most part. But the issue lies when I try and use readText() to paste that text. When I try writing a line of code using it like, navigator.clipboard.writeText(text); nothing happens (text being the text saved on my clipboard which works).
let text = '';

try{
    text = await navigator.clipboard.readText();
}
catch (err) {
    console.error('Could not read from clipboard', err);
}
if (text) {
    navigator.clipboard.writeText(text);
    alert(text);
}

I’ve tried everything I could find with no solution, I just need it to paste my clipboard. Using a different method is fine I just need a solution of any kind.

checking if directory empty in NodeJs and switching returns in react

I am trying to check if a directory that i’m storing images inside is empty or not (because i don’t want it to contain more than one image) , however the code isn’t working it let’s me store multiple files

what i’m trying to do is upload an image and store it then directy display it,

const express = require('express');
const app = express();
const multer = require('multer');
const cors= require("cors");
const path = require("path");
const fs = require('fs');

app.use(express.json()); 
app.use(cors());
const fileName="map" // static file name
const storage = multer.diskStorage({
  destination :(req,file,cb)=>{
    cb(null,'upload/heat-map'); //second param is destination of storage
  },
  filename: (req,file,cb)=>{
    console.log(file);
    cb(null,fileName+path.extname(file.originalname));//naming the file with the callback function
  }
})
const upload = multer({  storage : storage }); // Set the destination folder for uploaded files
const port = 8000;

this is the function that is making me troubles

const isDirectoryEmpty = (directoryPath) => {
  try {
    const files = fs.readdirSync(directoryPath);
    return files.length === 0;
  } catch (error) {
    console.error('Error reading directory:', error);
    return false; // Handle the error as per your requirement
  }
};
const directoryPath = 'upload/heat-map';

if(isDirectoryEmpty(directoryPath)){ // checking if the path of the image is empty (trying to prevent //mutiple upload
app.post('/upload', upload.single('file'), async (req, res) => {
    if (!req.file) {
      
      return res.status(400).json({ message: 'No file uploaded' });
    }else{
      res.send("Image uploaded");
    }});
}else{
try{
app.use('map', express.static(path.join(__dirname, 'upload','heat-map')));
}catch(e){
  console.log(e);
}  
app.get('/getMap', async (req,res)=>{ 
  //const imgPath="http://localhost:8000/heat-map_back/upload/heat-map/.png"
  try{
  res.sendFile(path.join(__dirname, 'upload/heat-map/', 'map.png'));
  res.status(200);
}catch(e){
  console.log(`tahchelek lena ${e}`);
}

in the front-end i’m trying to display the image once i have an Image,
the the code is as follows , it’s not working tho



import { InboxOutlined } from '@ant-design/icons';
import { message, Upload } from 'antd';
import { useState, useEffect } from 'react';
import axios  from  'axios';

const { Dragger } = Upload;



const App = () => {
  const [imageUrl, setImageUrl] = useState(null);
  const handleUploadChange = async (info) => {
    const { status } = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      const response = info.file.response;
      message.success(`${info.file.name} file uploaded successfully.`);
      
      setImageUrl(response.imageUrl); 
      return true; // notice i return true here in case it is uploaded succefully
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };

  const handleFileDrop = (e) => {
    console.log('Dropped files', e.dataTransfer.files);
  };

i added the displayImage component so i can switch between it and dragger

  const DisplayImage = () => {
    const [imgPath, setImgPath] = useState('');
    useEffect(() => {
      fetch('http://localhost:8000/getMap')
        .then((response) => response.blob())
        .then((blob) => {
          setImgPath(URL.createObjectURL(blob));
        })
        .catch((error) => {
          console.error('Error retrieving image:', error);
        });
    }, []);
    return (
      <div>
      {imgPath && <img src={imgPath} alt="Image uploaded"  />}
      </div>
    );
  };

from here on i’m facing the problem to change the view based on the handleUploadChange


  if(handleUploadChange===true){ 
    return(
      <DisplayImage />
    )
  }else{
  return (
    <div>
      <Dragger name="file" multiple={false} action="http://localhost:8000/upload" onChange={handleUploadChange} onDrop={handleFileDrop}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">Click or drag file to this area to upload</p>
        <p className="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
        </p>
      </Dragger>
    </div>
  );
};
}
export default App;

I’m sorry if i couldnt explain the problem exactly as i should but i’m trying my best to understand every step.

How to tell if a watcher function ran immediately in vue3?

In vue3, if I have something like this

watch(loading, (new_val, old_val) => {
    // how can I check if this function ran from the immediate being true, or when it changed after the immediate ran?
}, {immediate:true});

Is there something like this?

watch(loading, (new_val, old_val, options) => {
    console.log(options.immediate); // prints true the first time, and then false afterwords
}, {immediate:true});

Thanks

Compile NextJS Application after build to an executable

I want to turn a built next js application into an executable using nexe or pkg.

After building my next js application the .next folder contains
NextJS .next folder after build

I want to use the pkg or nexe node packages to turn my application into an executable, the user will run it, a terminal will display that a server is listening on port 3000 finally the user opens the browser and he is able to use the app.
I’m struggling to integrate these packages to attain my goal.

Any suggestions ?

socket request 404 error in nestjs/react environment that I don’t know why

i don’t know why it returns a 404 error even though it seems to have worked in a standard way
i’ve been trying to find the cause all day, but I can’t find it.
if anyone knows about this issue, I would be very grateful if you could let me know

[errorMessage] Failed to load resource: the server responded with a status of 404 (Not Found)
[errorMessage] GET http://localhost:3001/socket.io/?EIO=4&transport=polling&t=Oaywi1f 404 (Not Found)

— this is my source —
nestjs / chat.gateway.ts

import { Logger } from '@nestjs/common';
import {
  ConnectedSocket,
  MessageBody,
  OnGatewayConnection,
  OnGatewayDisconnect,
  OnGatewayInit,
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Namespace, Socket } from 'socket.io';


@WebSocketGateway({
  path: '/api/chat',
  namespace: 'chat',
  cors: {
    origin: ['http://localhost:3000'],
  },
})

@WebSocketGateway(3000, { transports: ['websocket'] })
export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect
{
  private logger = new Logger('Gateway');

  @WebSocketServer() nsp: Namespace;


  @SubscribeMessage('message')
  handleMessage(
    @ConnectedSocket() socket: Socket,
    @MessageBody() message: string,
  ) {
    socket.broadcast.emit('message', { username: socket.id, message });
    return { username: socket.id, message };
  }
}

nestjs/chat.module.ts

import { Module } from '@nestjs/common';
import { ChatGateway } from './chat.gateway';

@Module({
    providers: [ChatGateway],
})
export class ChatModule {}

reactjs/chat.tsx

import Footer from 'components/common/footer';
import Header from 'components/common/header';
import { ChangeEvent, FormEvent, useCallback, useEffect, useRef, useState } from 'react';
import { io } from 'socket.io-client';

const path = "http://localhost:3001/chat"
const socket = io(path);

nestjs/package.json

{
  "name": "backend",
  "version": "0.0.2",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "nest build",
    "format": "prettier --write "src/**/*.ts" "test/**/*.ts"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint "{src,apps,libs,test}/**/*.ts" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
  "dependencies": {
    "@nestjs/axios": "^0.0.7",
    "@nestjs/common": "^8.0.0",
    "@nestjs/config": "^1.2.0",
    "@nestjs/core": "^8.0.0",
    "@nestjs/jwt": "^8.0.0",
    "@nestjs/mapped-types": "^1.0.1",
    "@nestjs/mongoose": "^9.0.3",
    "@nestjs/passport": "^8.2.1",
    "@nestjs/platform-express": "^8.0.0",
    "@nestjs/platform-socket.io": "^10.0.5",
    "@nestjs/throttler": "^2.0.0",
    "@nestjs/typeorm": "^8.0.3",
    "@nestjs/websockets": "^10.0.5",
    "@types/cookie-parser": "^1.4.2",
    "@types/passport-jwt": "^3.0.6",
    "axios": "^0.26.1",
    "axios-observable": "^1.4.0",
    "bcryptjs": "^2.4.3",
    "cache-manager": "^3.6.0",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.13.2",
    "concurrently": "^8.2.0",
    "cookie-parser": "^1.4.6",
    "express-session": "^1.17.2",
    "joi": "^17.6.0",
    "mapped-types": "^0.0.1",
    "mongoose": "^6.2.7",
    "mysql2": "^2.3.3",
    "nodemon": "^2.0.22",
    "passport": "^0.5.2",
    "passport-jwt": "^4.0.0",
    "passport-kakao": "^1.0.1",
    "passport-local": "^1.0.0",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^7.5.5",
    "typeorm": "^0.2.43"
  },
  "devDependencies": {
    "@nestjs/cli": "^8.0.0",
    "@nestjs/schematics": "^8.0.0",
    "@nestjs/testing": "^8.0.0",
    "@types/bcryptjs": "^2.4.2",
    "@types/cache-manager": "^3.4.3",
    "@types/express": "^4.17.13",
    "@types/express-session": "^1.17.4",
    "@types/jest": "27.4.0",
    "@types/joi": "^17.2.3",
    "@types/multer": "^1.4.7",
    "@types/node": "^16.0.0",
    "@types/passport-kakao": "^0.2.1",
    "@types/passport-local": "^1.0.34",
    "@types/supertest": "^2.0.11",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "^27.2.5",
    "prettier": "^2.3.2",
    "source-map-support": "^0.5.20",
    "supertest": "^6.1.3",
    "ts-jest": "^27.0.3",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "tsconfig-paths": "^3.10.1",
    "typescript": "^4.3.5"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\.spec\.ts$",
    "transform": {
      "^.+\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
  }
}

reactjs/package.json

{
  "name": "frontend",
  "version": "0.1.1",
  "private": true,
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^38.0.1",
    "@ckeditor/ckeditor5-react": "^6.0.0",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "@types/axios": "^0.14.0",
    "@types/jest": "^27.4.0",
    "@types/next": "^9.0.0",
    "@types/node": "^16.11.25",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "@types/react-redux": "^7.1.25",
    "@types/react-router-dom": "^5.3.3",
    "@types/react-select": "^5.0.1",
    "@types/socket.io-client": "^3.0.0",
    "@types/universal-cookie": "^3.0.0",
    "batch": "^0.6.1",
    "browser-image-compression": "^2.0.2",
    "multer": "^1.4.5-lts.1",
    "react": "^18.0.0",
    "react-apexcharts": "^1.4.0",
    "react-cookie": "^4.1.1",
    "react-dom": "^18.2.0",
    "react-redux": "^7.0.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "sass": "^1.63.6",
    "styled-component": "^2.8.0",
    "swiper": "^9.3.2",
    "typesafe-actions": "^5.1.0",
    "typescript": "^4.5.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently "npm start" "npm run start --prefix frontend""
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:3001",
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }
}

i want socket to communicate

why selected option text display null although i assign it on asp.net core razor page?

I work on razor page asp.net core 6 . I face issue two properties SelectedOptionValue and SelectedOptionText display as null on page model .

on page model I using hidden field to retain and store values of selected text and selected option id .

                 <select id="PrinterName-select" asp-for="SelectedPrinterId" name="selectprinterid" class="form-select" style="margin-left:3px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
                        <option value="0">--Select--</option>
                        @foreach (var printer in Model.PrinterList)
                        {

                            <option value="@printer.UserPC">@printer.PrinterName</option>


                        }
                    </select>
<input type="hidden" id="selected-option-text" name="selected-option-text" value="@Model.SelectedOptionText" />
                    <input type="hidden" id="selected-option-value" name="selected-option-value" value="@Model.SelectedOptionValue" />

on JavaScript i do as below :

var selectElement = document.getElementById("PrinterName-select");
        selectElement.addEventListener("change", function () {
            var selectedOption = selectElement.options[selectElement.selectedIndex];
            var selectedText = selectedOption.text;
            var selectedId = selectedOption.id;
            console.log("Selected Text: " + selectedText);
            console.log("Selected ID: " + selectedId);

on page model two properties display as null value so
How to solve this issue please

public ActionResult OnGetSelectedPrinter(string selectedtext,string selectedvalues)
        {
            string a = SelectedOptionValue;//display as null
            string b = SelectedOptionText;//display as null
        }