Author: Blancer

Hello I am expecting some kind of directions/solution here. I have a react web app which enable user to record screen and video. So i use JS getDisplayMedia() to get the screen recording. So for enhancing the experience I have a timer of 5 seconds shown before the recording starts . In this timer screen I had added a keydown listner to catch space and esc button. esc button will abandon the recording and space will pause the timer. Now I will come to my issue. When I use getDisplayMedia() the chrome will prompt a floating window asking what to share (window, tab, screen). and if I choose something there will be a floating bar shown in the bottom by chrome which says stop sharing or hide. If in the options I choose share my entire window then automatically the focus got to the floating bar below(stop sharing one) and my keydown listners won’t work until i click on the screen. So is there a way in which I can avoid the chrome focussing its floating bar. All other sharing options (screen, tab) it is not getting focussed.

Please don’t down vote the question, if you know some links please point me there or if you know a solution please tell me here. If you find the question irrelevant please let me know that also with some reason.

I am getting this error :
30:9 error Refactor this function to reduce its Cognitive Complexity from 18 to the 15 allowed

Possible solutions I tried is like using if and then else if for the rest of the conditions.
Error will go but my code will not work as expected

How can I refactor the below code?

 workItemDetails.value.map((e: any) => {
        const existingData = touchPointRequests.filter((t) => +t.ticket_no === e.id);
        if (existingData.length && e.fields['System.State']) {
          this.updateBrandWebsiteState(existingData, e.fields['System.State']);
        }
        const existingGoLiveDate = new Date(new Date(existingData[0].go_live_date).toDateString());
        const newGoLiveDate = new Date(new Date(e.fields['Custom.GoLiveDate']).toDateString());
        const updateData: any = {};
        if (
          existingData.length &&
          e.fields['Custom.GoLiveDate'] &&
          newGoLiveDate.getTime() !== existingGoLiveDate.getTime()
        ) {
          const zonedDate = utcToZonedTime(new Date(e.fields['Custom.GoLiveDate']), 'Europe/Berlin');
          updateData.goLiveDate = zonedDate;
        }
        if (
          existingData.length &&
          e.fields['Microsoft.VSTS.Common.Priority'] &&
          AzurePriority[e.fields['Microsoft.VSTS.Common.Priority']] !== existingData[0].priority
        ) {
          updateData.priority = AzurePriority[e.fields['Microsoft.VSTS.Common.Priority']];
        }

        if (Object.keys(updateData).length) {
          this.touchPointRequestRepository.UpdateTouchPointRequestById(existingData[0].tpr_id, updateData);
        }
        if (
          existingData.length &&
          e.fields['Custom.PreviewLinks'] != undefined &&
          existingData[0].preview_link !== e.fields['Custom.PreviewLinks']
        ) {
          this.brandWebsiteRequestRepository.UpdateBrandWebsiteRequestByTPId(existingData[0].tpr_id, {
            previewLink: e.fields['Custom.PreviewLinks'],
          });
          this.sendPreviewLinkUpdateMail(existingData);
        }

        if (
          existingData.length &&
          e.fields['System.State'] === 'In Review' &&
          e.fields['Custom.PreviewLinks'] != undefined &&
          existingData[0].feedback_and_comments !== e.fields['Custom.PreviewLinks']
        ) {
          this.brandWebsiteRequestRepository.UpdateBrandWebsiteRequestByTPId(existingData[0].tpr_id, {
            feedbackAndComments: e.fields['Custom.PreviewLinks'],
          });
        }
      });

I have a form which has dynamic selects, I want to separate these selects into another livewire component, so as not to reprogram them in each form, but I don’t know how to validate them and obtain their values from the parent livewire component, how could I do the selects component to use them in other livewire forms?

I have read the documentation and it can be bound with the parent component, but it only allows one property and in these selects I have 3 properties (Country, State and City) these are the selects:

                    <div class="col-4">
                    <x-adminlte-input type="text" wire:model.live='employeeForm.employee_code' name="employeeForm.employee_code" label="Codigo de empleado" />
                </div>
                <div class="col-4">
                    <x-adminlte-select wire:model.live='employeeForm.team_id' name="employeeForm.team_id" label="Equipo:">
                        <x-adminlte-options :options='$employeeForm->teams' empty-option="Seleciona un equipo..." />
                    </x-adminlte-select>
                </div>
                <div class="col-4">
                    <x-adminlte-select wire:model.live='employeeForm.company_id' name="employeeForm.company_id" label="Empresa:">
                        <x-adminlte-options :options='$employeeForm->companies' empty-option="Seleciona una empresa..." />
                    </x-adminlte-select>
                </div>

My component code:

class CreateEmployeeForm extends Component
{
public EmployeeForm $employeeForm;

public $age = 0;

public function mount()
{
    $this->employeeForm->init();
}

public function updatedEmployeeFormCountryId($value)
{
    $this->employeeForm->updateStates($value);
}
public function updatedEmployeeFormstateId($value)
{
    $this->employeeForm->updateCities($value);
}
public function updatedEmployeeFormBirthDate($value)
{
    $this->age = Carbon::parse($value)->diff(now())->y;
}
public function updatedEmployeeFormCompanyId($value)
{
    $this->employeeForm->updateCompanyAssigment($value);
}
public function updatedEmployeeFormDepartamentId($value)
{
    $this->employeeForm->updateJobPositions($value);
}
public function save()
{
    $this->employeeForm->store();
}
public function render()
{
    return view('livewire.create-employee-form');
}
}

My EmployeeForm Code:

    public function updateStates($citySelectedId)
{
    $this->states = Country::find($citySelectedId)?->states()->get()->pluck('name', 'id')->all();
    $this->reset(['state_id', 'city_id']);
}

public function updateCities($stateSelectedId)
{
    $this->cities = State::find($stateSelectedId)?->cities()->get()->pluck('name', 'id')->all();
    $this->reset(['city_id']);
}

public function updateCompanyAssigment($companySelectedId)
{
    $company = app(CompanyRepository::class)->find($companySelectedId);
    $this->departaments = $company?->departaments()->get()->pluck('name', 'id')->all();
    $this->areas = $company?->areas()->get()->pluck('name', 'id')->all();
    $this->payRolls = $company?->payRolles()->get()->pluck('code', 'id')->all();
    $this->reset(['area_id', 'payroll_id', 'departanment_id']);
}

public function updateJobPositions($departamentSelectedId)
{
    $this->jobPositions = Departament::find($departamentSelectedId)?->jobPositions()->get()->pluck('name', 'id')->all();
}

I have an extension that has added a button to a page. How to make sure that after clicking the button, a file is downloaded from the site/extension folders, the image is allowed in the extension extension, and when you click the download button, it goes in the browser

Didn’t find any information at all, didn’t try anything

I am creating scraping API and yesterday I bumped into a dilemma. When using puppeteer I saw that it takes a long time for certain request to be made and after asking it turned out that there is no need to use puppeteer for static content. For static content cheerio is more appropriate. But then immediately another question arised – if cheerio is better for static websites and puppeteer is better for dynamic websites, is there a way to see programatically if website is dynamic or static and based on that use the appropriate scraping tool. And will this slow the performance of the API? I won’t include any code because it doesn’t seem appropriate.
Thank you all in advance!

Here’s my code

const ReadMore = ({children}) => {
    const text = children;
    const [isReadMore, setIsReadMore] = useState(true);
    const toggleReadMore = () => {
        setIsReadMore(!isReadMore);
    };
    return (
        <>
          <p className={`text ${!isReadMore ? "expanded" : ""}`}>
              {isReadMore  ? text[0] : text}
              <span
                  onClick={toggleReadMore}
                  className={`read-or-hide ${!isReadMore ? "expanded" : ""}`}
                  style={{ color: "#00ADB5", cursor: 'pointer'}}
              >  
                  {isReadMore ? "Position Activities" : " show less"}
              </span>
          </p>
        </>
    );
  };
  
  export default function Experience() {
    
    return (
      <>
        <div className='main_div_experience_section'>
          <div className='experience_h1'>
            <span className='text-6xl font-bold text-white'>
              Experience
            </span>
          </div>
          <div className='parent_section'>
            <div className='rectangle'>
              <div className='grid'>
                <div className='col1'>
                  <div className='years_experience'><p>Sep 2023 - Present</p></div>
                </div>
                <div className='col2'>
                  <div className='text_company'>
                    <div className='grouper_name_and_logo'>
                      <div className='img_div_experience'>
                          <a href="home">
                            <img src={Nymbus} alt="" className='company_img_experience' href="home"/>
                          </a>
                      </div>
                      <h1 className='role_experience text-gray-400 text-xl font-normal'>
                        Full Stack Developer - asdfasdf
                      </h1>
                    </div>
                    <ReadMore>
                      <div className={`role_explanation_experience`}>
                        <ul>
                          <p className='my_p_experience'>Daily Activities:</p>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                          <p className='following_p_experience'>Achievements:</p>
                          <li>SOMETHING</li>
                          <li>SOMETHING</li>
                        </ul>
                      </div>
                    </ReadMore>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }

The function ReadMore is basically a read more section that can increase or decrease by clicking on the <p> tag. However, I’ve been getting the warning “Warning: validateDOMNesting(…): <ul> cannot appear as a descendant of <p>.” and I’d like to fix that.

Furthermore, I’d like to add the functionality to add a transition for my ReadMore function, but I just can’t get it to work, I’ve been thinking is because of the warning (maybe?)

I’d pretty much appreciate your help or recommendations.

I’ve tried

• Modified ReadMore function
• Added CSS for transition functionality

class cfilewriter{    
    constructor(name){
        this.tempname = this.uuidv4() + '.bin';
        this.stream = null;
        this.name = name;
        fs.unlink(this.name);        
        this.stream = fs.createWriteStream(this.tempname, {'flags':'a'});        
    }
    write(dt){        
        this.stream.write(dt, (err, data) => {
            // finish renaming file
            if(err) throw err;
            alert("write ok !");
            this.close();
        });
    }
    uuidv4() {
        return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
          (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
        );
    }
    close(){                
        this.stream.end(()=>{
            // finish closing file
            console.log("finish close file");
            fs.rename(this.tempname, this.name, () => {
                // finish renaming file
                console.log("complete save");
            });
        });
    }
}

var gfile = null;
function save2file(blob){
    var reader = new FileReader();  
    var name = blob.name;    
    reader.onload = function () { // here we save variable 'file' in closure      
        console.log(this.result);
        var arrayBuffer=this.result;
        const buffer = mbuffer.Buffer.from(arrayBuffer);
        if (gfile==null) gfile = new cfilewriter(name);
        gfile.write(buffer);
        //gfile.close();
        
    }     
    reader.readAsArrayBuffer(blob);
}

this code demo download large file (4gb) to stream .
but i dont know how i copy that stream to download folder.

detail:

1. function save2file , read blob only demo to write stream.
2. class cfilewwrite used to write stream, save to download.
3. this code work , but file dont save in download folder.

everyone help me, i dont have experience in javascript, nodejs. thanks !

In my text area im using onKeydown event to listen to characters typed by user.
I need to prevent Alt gr + key combination values (ē, r̥, ṭ,…) to avoid accented keys in my text area.

if (event.code === 'AltRight')  {
      console.log('Prevent Accent letters');
      event.preventDefault();
    }

(or)

if (event.code === 17 || event.code === 18)  {
      console.log('Prevent Accent letters');
      event.preventDefault();
    }

Nothing worked. They are entering these if condition but still the accent text is getting printed in my textarea. How can this be prevented

I have 2 promises and i want to make something after both finish, but it doesn’t seem to run

I have this

console.log(loadFilesPromise);
console.log(getBucketAccessPromise);

console.log(111111111);
Promise.allSettled([getBucketAccessPromise, loadFilesPromise])
    .then(results => {
        console.log('FINISH ALL');
        console.log(results);
        this.$store.commit('setLoadingBucket', false);
    })
    .catch(error => {
        console.log('asdasdasdasdasdasdasd');
        reject(error)
    });
console.log(2222222222);

This is the loadFilesPromise

loadFilesPromise = this.loadFiles()

#... this function is inside methods in Vue.js framework
async loadFiles() {
    return api.getDir({
        to: '',
    })
        .then(ret => {
            console.log('Promise loadFilesPromise');
            # more code

#... in another part
getDir(params) {
    return new Promise((resolve, reject) => {
        axios.post('getdir', {
                dir: params.dir,

And this is the getBucketAccessPromise

let getBucketAccessPromise =  new Promise((resolve, reject) => {
                axios.post('getBucketAccess', {
                    username: '_self_'
                })
                .then(res => {
                    console.log('Promise 2');
                    # more code

and the output is

Promise {<pending>}
[[Prototype]]: Promisecatch: ƒ catch()constructor: .....
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined # the undefined result is expected

Promise {<pending>}
[[Prototype]]: Promisecatch: ƒ catch()constructor: .....
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined # the undefined result is expected

111111111
# the FINISH ALL log should be here
2222222222
Promise 1
Promise 2

This is confusing for me, Promise.allSettled should be wait for both promises, but instead this acts like it’s not there

I’ve bene trying to figure out why an async fetch request gets absolutely ignored in my reactjs app. Basically, I am calling integrate() which, if generates a successful status result from its internal call, then awaits the result of a secondary async const call fetchOtherStuff()

Integrate is executing without issues, however for some reason Chrome is entirely ignoring the fetch request within fetchOtherStuff.

I know for a fact it is being called, as THIS WILL LOG logs every time. However there is no record of a network request being made and, predictably, THIS WILL NOT LOG does not log.

No console errors, no network requests, almost like it just aborts the call (as well as any other awaited constants below fetchOtherStuff()

Has anyone encountered this before? I don’t see anything on S.O.

(Calling await integrate() somewhere)

const integrate = async () => {
  const URL = 'https://whatever-endpoint.com';
  try {
    const response = await fetch(URL, {
      method: "GET",
      headers: {
          "Content-Type": "application/json"
      },
      credentials: 'include'
      });

      const responseData = await response.json();
      if (response.status === 200) {
        await fetchOtherStuff();
      }
   } catch (error) {
       return {status:500, body: 'Server Error, Please Try Again'}
      }
    }


  const fetchOtherStuff = async () =>{
  return new Promise(async (resolve,reject)=>{
    try {
      console.log("THIS WILL LOG")
      const orgCodes = await fetch(`https://endpoint-whatever.com`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json"
        },
        credentials: 'include'
      }); 
      const result = await orgCodes.json();
      console.log("THIS WILL NOT LOG ", result)
      setDomainNotReadyCodes(result)
      resolve(result)               
    } catch (error) {
     reject(error)
    }
  })
}

So far this behavior is in Chrome and Firefox (latest versions of each).

Let’s say we set some cookies with the following JavaScript:

document.cookie = "is_halloween=true";
document.cookie = "skeletons=spooky";

Now let’s break the rules and do this:

document.cookie = "BOO";

If we check the value of document.cookie in the console, it looks like this:

is_halloween=true; skeletons=spooky; BOO

What exactly is BOO? If we try to remove it with the following code, nothing happens:

document.cookie = "BOO=;expires=Thu, 01 Jan 1970 00:00:00 GMT;";

document.cookie is still equal to is_halloween=true; skeletons=spooky; BOO

If we set document.cookie to an empty string:

document.cookie = "";

document.cookie is still equal to is_halloween=true; skeletons=spooky; BOO

Questions:

1. Is this special behavior in document.cookie intended to be used as a free text field for custom cookie syntax? If so, is it documented anywhere?

2. How do I get rid of BOO? The normal method of setting the expires field isn’t working.

Edit: BOO can be removed with document.cookie="Boo;expires=Thu, 01 Jan 1970 00:00:00 GMT"

I’m building a web application using React for the frontend and Express for the backend. I have a feature where users can reset their passwords using a unique token sent via email. However, when I try to access the reset password page with a token in the URL (e.g., /reset-password/56ee236da78383854dfb584343d56048259c6977), I’m encountering the error message “Cannot GET /reset-password/56ee236da78383854dfb584343d56048259c6977”.

app.js

        <Route path="/reset-password/:token" element={<ResetPassword />} />

resetpassword.jsx

import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';


const ResetPassword = () => {
  const { token } = useParams();
  const [newPassword, setNewPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleOnSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post(
        `http://localhost:3000/auth/reset-password/${token}`,
        { newPassword },
        { headers: { 'Content-Type': 'application/json' } }
      );
      setMessage(response.data.message);
    } catch (error) {
      console.error('Error:', error);
      setMessage('Failed to reset password');
    }
  };

  return (
    <div>
      <h2>Reset Password</h2>
      <form onSubmit={handleOnSubmit}>
        <input
          type="password"
          placeholder="Enter new password"
          value={newPassword}
          onChange={(e) => setNewPassword(e.target.value)}
          required
        />
        <button type="submit">Reset Password</button>
      </form>
      <p>{message}</p>
    </div>
  );
};

export default ResetPassword;

router.js

router.get('/reset-password/:token', (req, res) => {
    const { token } = req.params;
    res.render('reset-password', { token });
});

router.post('/reset-password/:token', async (req, res) => {
    const { token } = req.params;
    const { newPassword } = req.body;

    try {
        // Encontre o usuário com o token de redefinição de senha
        const user = await User.findOne({
            resetPasswordToken: token,
            resetPasswordExpires: { $gt: Date.now() } // Verifique se o token ainda não expirou
        });

        if (!user) {
            return res.status(400).json({ message: 'Invalid or expired token' });
        }

        // Atualize a senha do usuário
        user.password = newPassword;
        user.resetPasswordToken = undefined;
        user.resetPasswordExpires = undefined;
        await user.save();

        res.json({ message: 'Password reset successfully' });
    } catch (error) {
        console.error('Error:', error);
        res.status(500).json({ message: 'Internal server error' });
    }
});

I am trying to create a simple math table of 2 printed out in a

tag, below is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Table of 2</h1>
    <p id="table-goes-here">Goes here</p>

    <script src="script.js"></script>
</body>
</html>

and below is the JS I wrote:

let userNumber = 2;
let tableRow = document.getElementById("table-goes-here");

for(counter = 1; counter <= 12; counter++) {
    tableRow.innerHTML = counter + " x " + userNumber + " = " + counter * userNumber + "<br>";
};

my desired output is:

**Table of 2**

1 x 2 = 2
2 x 2 = 4
3 x 2 = 6
4 x 2 = 8
5 x 2 = 10
6 x 2 = 12
7 x 2 = 14
8 x 2 = 16
9 x 2 = 18
10 x 2 = 20
11 x 2 = 22
12 x 2 = 24

In above output the heading would be and the rest all of the table rows will be in a single

tag, but the output that I am getting is:

**Table of 2**

12 x 2 = 24

I am now thinking that my JS code is just repeating itself within the same line and that’s why it’s displaying just the last line of code, I have google a lot on this and also tried n and r solutions but nothing seems to be working I would really appreciate any help 🙂

with that said, I was able to get the desired output with:

let userNumber = 2;
let tableRow = document.getElementById("table-goes-here");

for(counter = 1; counter <= 12; counter++) {
    document.write(counter + " x " + userNumber + " = " + counter * userNumber + "<br>");
};

but obviously this way I wasn’t able to place the dynamically generated content into the

tags.

I’m having trouble building a Preact widget project,
Before that, I used microbundle to build index.js and index.css files
Then I want to use webpack to build one more time to combine these 2 files into 1 js file to embed into other websites that need to use it.
[enter image description here][1]

// webpack.config.js
const Dotenv = require("dotenv-webpack");
const path = require("path");

module.exports = {
  entry: "./dist/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", { targets: "defaults" }],
              ["@babel/preset-react", { runtime: "automatic" }],
            ],
          },
        },
      },
    ],
  },
  resolve: {},
  plugins:[
    new Dotenv()
  ]
};

[1]: https://i.stack.imgur.com/Q6HxL.png

I’m developing a web site with [email protected] and Auth.js([email protected]).

I have already configured the provider with the following code, I can sign in with “Sign in” button correctly.

auth.ts

import NextAuth from 'next-auth'
import Cognito from 'next-auth/providers/cognito'

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Cognito],
})

app/login/page.tsx

import { auth, signIn } from '@/auth'

export default async function Login() {
  return (
    <form
      action={async () => {
        'use server'
        return await signIn('cognito')
      }}
    >
      <button type="submit">Sign in</button>
    </form>
  )
}

Problems

I want to use middleware to protect all pages and redirect to Amazon cognito(IdP) sign-in page automatically.
However, the following code does not work. (Stay protected page without session and does not redirect)

Is there any way to redirect to the Cognito sign-in page?

Note: Already I can redirect to /login in my application, but I want to remove a redundant click for the user.

middleware

import { signIn, auth } from "@/auth"

export default auth((request) => {
  if (!request.auth) {
    signIn('cognito')
  }
})

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|login).*)"],
}

error log

ReadonlyRequestCookiesError: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
    at Proxy.callable (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/spec-extension/adapters/request-cookies.js:22:15)
    at signIn (webpack-internal:///(middleware)/./node_modules/next-auth/lib/actions.js:53:65)
 ⨯ unhandledRejection: ReadonlyRequestCookiesError: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
    at Proxy.callable (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/spec-extension/adapters/request-cookies.js:22:15)
    at signIn (webpack-internal:///(middleware)/./node_modules/next-auth/lib/actions.js:53:65)
 ⨯ unhandledRejection: ReadonlyRequestCookiesError: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
    at Proxy.callable (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/spec-extension/adapters/request-cookies.js:22:15)
    at signIn (webpack-internal:///(middleware)/./node_modules/next-auth/lib/actions.js:53:65)
 GET / 200 in 46ms