Facing issue with filtering objects inside array objects

I have below the object.

categories: [
  {
    "category": {
      "categoryName": "categoryName1"
    }
    "newsletter": [
      {
        "name": "AAA",
        "description": "111"
      },
      {
        "name": "BBB",
        "description": "222"
      },
      {
        "name": "CCC",
        "description": "333"
      },
    ]
  },
  {
    "category": {
      "categoryName": "categoryName2"
    }
    "newsletter": [
      {
        "name": "DDD",
        "description": "444"
      },
      {
        "name": "EEE",
        "description": "555"
      }
    ]
  }
];

I’m trying to perform search operation between the category, name, and description.

I have below the logic.

this.selectedCategoryData = this.categorisedData.filter((item) => {
    const categoryMatch = item.category.categoryName.toLowerCase().includes(filterValueLowercase);
    const newslettersMatch = item.newsletters.some(newsletter =>
        return newsletter.name.toLowerCase().includes(filterValueLowercase) ||
    newsletter.description.toLowerCase().includes(filterValueLowercase);
    );
    return categoryMatch || newslettersMatch;
});

This is my current logic. But it’s working with some, not OR. Currently, it returns the whole subarray when found anything. If the value is found in the sub-array, it returns the whole array.
How can I filter with subArray and assign the value?

Expected output like below:

First Scenario

filterValue = "AAA" //returns the below object
categories: [
  {
    "category": {
      "categoryName": "categoryName1"
    }
    "newsletter": [
      {
        "name": "AAA",
        "description": "111"
      }
    ]
  }
];

Second Scenario:

filterValue = "categoryName1" //returns the below object
categories: [
  {
    "category": {
      "categoryName": "categoryName1"
    }
    "newsletter": [
      {
        "name": "AAA",
        "description": "111"
      },
      {
        "name": "BBB",
        "description": "222"
      },
      {
        "name": "CCC",
        "description": "333"
      },
    ]
  }
];

cant import class in javascript after renaming it

I have a local library that exports a class called Foo, this is library is built into a module with nx if that matters.

the file of the class looks like this (simplified)

export class Foo {}

the index.js looks like this (simplified)

export * from /path/to/foo/file

in my project i import it with

import { Foo } from FooLib;

all of this works perfectly, no issues whatsoever

however this breaks if i rename the class in both files

export class Bar {}
import { Bar } from FooLib;

this results in node complaining

Error: export 'Bar' (imported as 'Bar') was not found in 'FooLib' (possible exports: Foo)

now this looks suspiciously like i did not rebuilt the library or forgot to install the new version but the lsp used by vscode recognizes the change, i can go to definition of the renamed class, which results in the appropriate file in node_modules.

also i can try to include Foo like before, which also fails

import { Foo } from 'FooLib';

the corresponding error, is simmilar in tone but has different formatting

Module '"FooLib"' has no exported member 'Foo'.

renaming the class back to Foo fixes all those problems, meaning i can import the class under it’s old name again, but I can’t rename this class and have it work

I tried

  • completely removing the node_modules of the project (and reinstalling the new FooLib)
  • rebooting

Am I missing something obvious here?

Loading component inside server page Next 14

I have server page in Next.js 14, which fetch and display data depends by search params, but I would like to apply loading ui for table inside page when user change this search params
The main logic is changing date time options in PerformanceOptions component (code below)
This is client component and when user change datetime option, it just move by router to the same url but with new search params, so until data loading, page still the same. That seems no good. Actually I can change data fetching on the client side, in this way I can just apply loaders on data fetch, but I ned keep SSR.
I have tried use Suspense, but as I know, that will be work only for components which doing some async actions.
Please, help me any ideas if it possible.

  // .......
  const revenue_report_data = await getRevenueReport(revenue_report_payload)
    if (!revenue_report_data) {
        throw new Error("Report data hasn't been got!")
    }
    const table_data = parseRevenueReportData(revenue_report_data)

    return (
        <DetailsPageLayout
            // ... props
        >
            <Card title={"Revenue Report"} contentClassName={"flex flex-col gap-5 p-5"}>
        // this is client component
                <PerformanceOptions time={+props.searchParams.time} period={period} folder_id={folder_id} />
                <PerformanceChart report={revenue_report_data} />
        // I need apply loading UI for this component on chage search params
                <FilteredTable columnHeaders={columnHeaders} rowsData={table_data} />
            </Card>
        </DetailsPageLayout>
    )
}
// .....

Add a button the top of keyboard in react native

I am implementing a scenario in which I have a View consists of View,Inside this having a search input box, and data in the vertical format and button to View all details. when clicked in the search bar ,the keyboard should open when the button on the top of it,and again when the keyboard removed,the button should stick to the bottom of the view.

  1. I tried using KeyboardAvoidingView,but not working.

when keyboard opened

when keyboard closed

screenshot is attached

Can’t see the button at the buttom of my div when using tailwind

I am creating a dashboard with a header and under it, a fixed sidebar and main section that is scrollable on the vertical. Using tailwind, i set full page to have a height of screen, then the header to have a height of 10% and the sidebar/main section to have a height of 90%. the problem is that at the bottom of my sidebar, i have a logout button, but i cant seem to see the button except i remove the header altogether and make the sidebar main-section be 100% of the height.

This is what i mean:
enter image description here

As opposed to this, after i remove the header:

enter image description here

As you can see from the images, the logout button is meant to be showing even when the header is present but it isnt. I didnt set a specific height to the sidebar, just set it to 90% of the screen, meaning it should be able to scale. I also didnt add any padding or anything so im not sure what is happening.

DashboardLayout :

   <div className=' max-w-screen h-screen'>
      <div className='bg-white sticky top-0 w-full z-30 h-[10%]'>
        <DoctorDashboardHeader openSideBar={openSideBar} setOpenSideBar={setOpenSideBar} />
      </div>
      <div className='flex h-[90%]'>
        <div className='w-[240px] fixed h-full'>
          <SideBar/>
        </div>
        <div className='w-full ml-[240px] bg-gray-100 min-h-full '>
          <Outlet/>
        </div>
      </div>
    </div>

Sidebar:

        <div className='flex flex-col h-full z-50 justify-between  shadow-md text-gray-500 '>
            <div className='space-y-9 flex flex-col justify-center'>
                <NavLink to={'/dashboard'}  end>
                    {({ isActive}) => (
                        <div className=' w-full h-[30px] flex items-center  pl-9 space-x-4' >
                            <span className={isActive ? 'h-10 w-10 bg-blue-200 rounded-full bg-opacity-25 flex justify-center items-center' : 'h-10 w-10 rounded-full flex justify-center items-center'} >
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className={isActive? "w-5 h-5 text-blue-900 z-10": 'w-5 h-5'}><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
                            </span>
                            <span className={isActive ? "text-blue-500" : ""}>Dashboard</span>
                        </div>
                    )}
                </NavLink>
                <NavLink to={'/dashboard/products'} className=' w-full h-[30px] flex items-center space-x-4 '>
                    {({ isActive}) => (
                        <div className=' w-full h-[30px] flex items-center  pl-9 space-x-4' >
                            <span className={isActive ? 'h-10 w-10 bg-blue-200 rounded-full bg-opacity-25 flex justify-center items-center' : 'h-10 w-10 rounded-full flex justify-center items-center'}>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className={isActive? "w-5 h-5 text-blue-900": 'w-5 h-5'}><path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>
                            </span>
                            <span className={isActive ? "text-blue-500" : ""}>Products</span>
                        </div>
                    )}  
                </NavLink>
                <NavLink to={'/dashboard/addproducts'} className=' w-full h-[30px] flex items-center space-x-4 '>
                    {({ isActive}) => (
                        <div className=' w-full h-[30px] flex items-center  pl-9 space-x-4' >
                            <span className={isActive ? 'h-10 w-10 bg-blue-200 rounded-full bg-opacity-25 flex justify-center items-center' : 'h-10 w-10 rounded-full flex justify-center items-center'}>
                                <svg fill="none"  viewBox="0 0 22 28"  xmlns="http://www.w3.org/2000/svg" className={isActive? "w-5 h-4 text-blue-900": 'w-5 h-4'}><path d="M5 6H15" stroke="currentColor" strokeLinecap="round" strokeWidth="2"/><path d="M5 11H15" stroke="currentColor" strokeLinecap="round" strokeWidth="2"/><path d="M5 16H12" stroke="currentColor" strokeLinecap="round" strokeWidth="2"/><path d="M17 26V18" stroke="currentColor" strokeLinecap="round" strokeWidth="2"/><path d="M21 22H13" stroke="currentColor" strokeLinecap="round" strokeWidth="2"/><path d="M12 27H5C2.79086 27 1 25.2091 1 23V5C1 2.79086 2.79086 1 5 1H15C17.2091 1 19 2.79086 19 5V14.5" stroke="currentColor" strokeLinecap="round" strokeWidth="2"/></svg>
                            </span>
                            <span className={isActive ? "text-blue-500" : ""}>Add Products</span>
                        </div>
                    )}  
                </NavLink>
                <NavLink to={'/dashboard/profile'} className=' w-full h-[30px] flex items-center space-x-4  '>
                    {({ isActive}) => (
                        <div className=' w-full h-[30px] flex items-center  pl-9 space-x-4' >
                            <span className={isActive ? 'h-10 w-10 bg-blue-200 rounded-full bg-opacity-25 flex justify-center items-center' : 'h-10 w-10 rounded-full flex justify-center items-center'}>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className={isActive? "w-5 h-5 text-blue-900": 'w-5 h-5'}><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
                            </span>
                            <span className={isActive ? "text-blue-500" : ""}>Profile</span>
                        </div>
                    )} 
                </NavLink>
            </div>

            
            <div className='w-full h-[30px] items-center justify-center '>
                <button className='w-full pl-9 flex space-x-4 ' onClick={handleLogout} >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-5"><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>
                    <span>Log Out</span>
                </button>
            </div>
            
        </div>

if i add “overflow-scroll” to the sidebar, it shows that there is nothing to scroll, so i am so confused right now. Is this just a laptop issue?

Decimal Number not converting to HEX number due to size

I’m using this plugin here: https://mikemcl.github.io/decimal.js/
In order to convert decimals to arrays.
I’m trying to convert the decimal value to a hex string.
However i’m getting a precision error.
Since the decimal value represents the full value with scientific notation;
and not the proper string; it fails to convert to hex.

What i’m doing to convert it into a decimal.

str = new Decimal(str);
if(hash.d == null){
    return [0, 0, 0];
}else{
    str = [str.e + "," + str.d.toString() + "," + str.s].toString();
    return str;
}

What i’m doing to convert it to Hex:

a = str[0];
c = str[h.length - 1];
d = str;
d.pop();
d.shift();
z = new Decimal(1);
z.e = a;
z.d = d;
z.s = c;
z.toString(16); //output: "";

It fails to convert to HEX memory.
I’m looking to convert the full decimal to a hex string.

Any suggestions?

Base64 to canvas

I have a series of base64 images that I am loading one by one from an API. I need to render them on a canvas, but the usual method

const newImage = new Image();
newImage.src = imageBase64;

This works, but it is slow on first render. This has a lot of latency the first time a new image is rendered on the canvas.

Is there a way to convert base64 into a format that does not cause this much latency?

jQuery – Unable to select value of an element added using elementor

I have this code in elementor custom code

<script>
jQuery(document).ready(function($){
    $('#ship-price').on('click', function(){
            var originalPrice = $('#product-price').val();
            console.log(originalPrice);
            //
            var shipPrice = $('#ship-price').val();          
            console.log(shipPrice);
    });
});
</script>

I’m trying to select two elements that I’ve added using elementor and where I have assigned a css id. It will occur that I’m unable to read the product price and ship price values.

What I need to achive is to show a different product price that is loaded using woocommerce, after the user click. How I can fix the problem?

Lottie does not take the value from the variable properly

I use a lottie library for playing animated SVG’s / JSON, and it works nice if I request the JSON from the assets, like this:

initLottie({
  container: document.getElementById('my-animation'), 
  jsonPath: 'path-to-my-lottie.json'
});

However, if I render the JSON value in the DOM in a hidden field, and take that value into the JS, it logs properly in the console, but it does not load the lottie animation. It does not throw an error either. Any ideas what could be the issue?

const lottieFromDOM = document.getElementById('hidden-value').textContent.trim(); // same with or without trim
const lottieFromDOMParsed = JSON.parse(lottieFromDOM);
  
initLottie({
  container: document.getElementById('my-animation'), 
  animationData: lottieFromDOM
}); 
// Same with lottieFromDOMParsed, or jsonPath: lottie...

How can I push an input type: ‘radio’ to firebase database

I looped through the radio with it ‘name’ to get the selected ‘term’ for it value then use a button to add data to database with other values.

const inputTerm = document.getElementsByName("terms")

propertyBtn.addEventListener("click", function () {

    for (let  i = 0; i < inputTerm.length; i++){
        if(inputTerm[i].checked){
            let pickedTerm = inputTerm[i].value
        }
    }
    
    
    let propertyData = {
        terms: pickedTerm,
        title: inputTitle.value,
        location: inputLocation.value,
      };

  push(addedPropertyInDB, propertyData);
  
  
});

With this code pickedTerm is not defined, I want all propertyData to get pushed as one to firebase database

How to Manually Add Auth Headers to FireStore Requests

Is it possible to add auth headers to a getDocs(), manually?

async function getCities() {
  const citiesCol = collection(db, "cities");
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map((doc) => doc.data());
  return cityList;
}

Something like:

  const citySnapshot = await getDocs(citiesCol,{
   headers:{Authorization: `Bearer ${token}`}
});

Assuming I have a valid access token.

I haven’t been able to find anything like this in the docs(auth headers are automatically added to requests under the hood after you go through the auth flow in Firebase), so I’m wondering if anyone has had to do this in the past.

Spaeship not appearing

So i havve this online game and i need to create a spaceship for destroying the asteroids. Sadly, i’m not sure what is wrong but it looks like no matter what i do the spaceship does not appear anywhere in the game. I will let the code so that you can look on it better.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Squash The Asteroids - Survival Game</title>
        <style>
            canvas{
                display: none;
            }
        </style>
        <link rel="stylesheet" href="5_1090_Petrescu_Rares-Mihnea.css">
    </head>
    <body>
        <div id="paginaDeStart">
            <h1>Squash The Asteroids - Survival Game</h1>
            <button id="butonPlay" onclick="startGame()">Incepe jocul</button>
            <button id="butonIstoric" onclick="arataIstoricul()">Rezultatele anterioare</button>
            
        </div>
        <canvas id="canvasJocAsteroids" width="800" height="600"></canvas>
        <script src="5_1090_Petrescu_Rares-Mihnea.js"></script>
    </body>

</html>
let asteroids=[];
let rockets=[];
let spaceship;
let lives=3;
let score=0;
let requiredPointsForExtraLife=10000;
let fallingStarsInterval;
let gameStarted=false;



function startGame(){
    document.getElementById("paginaDeStart").style.display='none';
    document.getElementById("canvasJocAsteroids").style.display='block';
    clearInterval(fallingStarsInterval);
    clearStars();
    if(!gameStarted){
        setInterval(function(){
            createAsteroid()
        },1000);
        gameStarted=true;
    }

    spaceship={
        x:window.innerWidth/4,
        y:window.innerHeight/4,
        angle:0
    }
    document.addEventListener('keydown',handleKeyDown);
    document.addEventListener('keyup',handleKeyUp);

    gameLoop();
}
function gameLoop(){

    render();
    requestAnimationFrame(gameLoop);
}
function render(){

    const canvas=document.getElementById("canvasjocAsteroids");
    const context=canvas.getContext("2d");

    context.clearRect(0,0,canvas.width,canvas.height);


    context.save();
    context.translate(spaceship.x,spaceship.y);
    context.rotate(spaceship.angle);
    context.beginPath();
    context.moveTo(0,-15)
    context.lineTo(10,15);
    context.lineTo(-10,15);
    context.closePath();
    context.fillStyle="white";
    context.fill();
    context.restore();
}

What have i done wrong? What am i supposed to do really speaking?
My background is black and the asteroids appear as normal, but the ship, no matter what color i choose does not appear, i can’t see it doing anything but i can’t progress further if i can’t see the ship. Please help anyhow.