Category: javascript

I want to create an ERP system using:

1. Flutetr for Every Frontend.
2. NestJs (TS) for Backend.
3. PostgresSQL For Database.

Could you give some advice on whether these frameworks are good for ERP systems?
and some advice on which packages I can use for this project.

I am working on a payment-success page in Next.js. On the payment page, I am taking in all the user information, saving it to the database and updating the cart successfully, but I am having a difficult time refreshing the front end to reflect the change in my cart. I am having to manually refresh the page to have the cart reflect the change. I tried using useeffect with location.reload, but that causes an infite loop because it keeps getting called every time it is reloaded, and I don’t know how to stop the infinite loop, and I tried using useRouter but I get an error saying “Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted”. I am still new to Next.js and tried to find answers online, but nothing seemed to work. How can I refresh the page so that it reflects my cart is empty so I don’t have to manually refresh my page to show that?

This is the page where I would ideally like to add the code to refresh the front end. I am calling revalidatePath on the backend to get rid of the cache, which I think is working fine.

"use client";

export default function PaymentSuccess({
  searchParams: { amount },
}: {
  searchParams: { amount: string };
}) {

  return (
    <main className="m-10 mx-auto max-w-6xl rounded-md border bg-gradient-to-tr from-blue-500 to-purple-500 p-10 text-center text-slate-100">
      <div className="mb-10">
        <h1 className="mb-2 text-4xl font-extrabold">Thank you!</h1>
        <h2 className="text-2xl">You successfully sent</h2>

        <div className="p-2 text-4xl font-bold">${amount}</div>
      </div>
    </main>
  );
}

I use the same config files and utility functions across all my projects. I’m working on a shared library that I will host on npm (on an internal server).

If I add config files to this shared library, can I somehow implement these config files in new projects?

In other words, I would like to download and implement config files from a shared library, hosted on npm, in the simplest way possible.

new-project/
  src/
  test/
  package.json <= download shared library package
  ...
    <other config files are provided by shared library somehow>
  ...      

This error isn’t highlighted
Here is an error, but it isn’t highlighted. Others errors isn’t highlighted too. I mean, nothing is highlighted, expect those errors when some symbols are missed. What should i do?

I tried to use ‘use strict’; but it didn’t help.

I wrote a simple animation hook that needs to wait for React to commit renders (for concurrent mode) before painting updates. I have something like this:

function useAnimation() {
  const hasCommittedRef = useRef(false);
  hasCommittedRef.current = false;

  useLayoutEffect(() => {
    hasCommittedRef.current = true;
  });

  const handleUpdate = () => {
    if (!hasCommittedRef.current) {
      // don't paint yet
    }
    // paint
  };
}

Without Suspense, this works perfectly. With Suspense, if the component that calls this hook renders, suspends, then unsuspends: hasCommittedRef.current would always stay false.

E.g. here’s a Codesandbox demo: https://codesandbox.io/p/sandbox/youthful-fast-7vzmkz?file=%2Fsrc%2FApp.js%3A4%2C1

import React from "react";

const infiniteThenable = { then() {} };

function Inner() {
  console.log("Inner");

  const [isSuspended, setIsSuspended] = React.useState(true);

  React.useEffect(() => {
    setTimeout(() => {
      setIsSuspended(false);
    }, 500);
  }, []);

  if (isSuspended) {
    throw infiniteThenable;
  }
}

export default function App() {
  console.log("App");

  React.useLayoutEffect(() => {
    console.log("App effect");
  });

  return (
    <React.Suspense>
      <Inner />
    </React.Suspense>
  );
}

This logs:

App
Inner
App effect
Inner

Since the useLayoutEffect doesn’t run again, I can’t use this method to check if there’s a pending commit. Is there a way to check for pending commits that works with Suspense?

I’m trying to configure the ModeToggle button that is in the ShadCN docs for light/dark mode theming and I’m bothered by the focus ring that appears next to the dropdown menu.

I looked into the code for the dropdown menu and tried to disable things such as bg:accent or bg:text-accent, etc. But I didn’t get any change. Would appreciate some help, thanks!

i’m working with jmeter JSR223 postprocessors and i need help to convert a javascript code to Groovy, my Javascript code is:

// Lee el contenido de crypto-js.js desde el archivo descargado
load('C:/Users/hlopezgu/Desktop/cryptojs/node_modules/crypto-js/crypto-js.js');
load('C:/Users/hlopezgu/Desktop/cryptojs/node_modules/crypto-js/enc-utf8.js');

I need import these libraries using Groovy

Thanks in advance

I am trying to write unit tests for JS code using Node.js, but the JS code will ultimately run in the browser and in some cases depends on browser-only objects (like document). I’m trying to get Puppeteer to work in this context, but can’t seem to get past the basics.

The code I am testing is bundled into a single JS file, so I’m using the addScriptTag of the page object in Puppeteer to add this JS file, then using page.evaluate to execute my test code.

My JS bundle (the code under test) exports a single object, and when I try to access this object from within the evaluate execution, it is undefined. In trying to track down why, I discovered that addScriptTag doesn’t seem to add anything, and the document.scripts array is empty.

Here’s an example:

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.addScriptTag({ 
  path: '/foo/bar/somescript.js', // This path is fake, but in my actual environment is correct
}).catch(error => console.log(error));

const result = await page.evaluate(() => {
  return document.scripts;
}).catch(error => console.log(error));

console.log(result.length); // This returns undefined!

await browser.close();

Does anyone know what is missing from the above to get the script to be added to the page?

I am doing a proyect of a game in javascript native with node.js and express and I have a question, I have done the code but sometimes work and others not becuase there seems to be an issue with the socket.id but I don’t understand how to fix it.

Client

if (!turnEmitted) {
    socket.emit('turn', { gameID: gameID });
    localStorage.setItem(`turnEmitted_${gameID}`, 'true');
}

socket.on('getCurrentPlayer', (currentPlayer) => {
    console.log(currentPlayer)
    console.log(socket.id)
    currentPlayerFront = currentPlayer.name;
    localStorage.setItem('currentPlayer', currentPlayerFront);
    if (currentPlayer.id === socket.id) {
        socket.emit('sendCurrentPlayer', {player: currentPlayerFront, gameID: gameID})
        questionsZone.style.pointerEvents = 'auto';
        diceButton.disabled = false;
    }
});

socket.on('sendCurrentPlayer', (currentPlayer) => {
    playerTurn(currentPlayer)
})

Server

socket.on('turn', async (data) => {
        const game = await Game.findOne({ gameID: data.gameID })
        if (game && game.start) {
            if (game.players.length != 0) {
                game.turn = Math.floor(Math.random() * game.players.length)
                await game.save()
                console.log('turno: ' , game.turn)
                let currentPlayer = {id: socket.id, name: game.players[game.turn].name}
                console.log('Es el turno de:', currentPlayer.name);
                io.emit('getCurrentPlayer', currentPlayer)
            }
        }
    })

socket.on('sendCurrentPlayer', (data) => {
      io.emit('sendCurrentPlayer', data.player)
})

The turn system works as expected

I’m running a Node.js HTTP server that is supposed to serve a HTML file if the user can login. However, I am experiencing issues where the server fails to send the HTML file as response. Here is the relevant (shortend) code snippet:

http.createServer((req,res) =>{
    // Get called over <a> tag
    if (req.url === "/login" && req.method === "GET"){
        res.writeHead(200, {'Content-Type': `text/html` });
        fs.createReadStream("./public/html/login.html").pipe(res)
    }

    // Get called from Client fetch call
    if (req.url === "/api/login" && req.method === "POST"){
        // User-Authentication and if user and Password are correct:
        res.writeHead(200, {'Content-Type': `text/html` });
        fs.createReadStream("./public/html/message.html").pipe(res)
    }
}).listen(3000, () => {
    console.log("Server is listening on port 3000");
});

The message.html (or any other file I tried to sent) is not displayed in the network traffic tab of the browser. So it is not sent to the client at all.
I also tried just to use res.end() or res.write(), but no file arrives at the client.

Does anybody know what I can do?

I am implementing react-router-dom to handle routing. The routing works for the most part however my Header component is not visible when the user visits AccountHome

My router is very simple:

const router = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
  },
  { path: "/account", element: <AccountHome /> },
]);

The header is found in the AppLayout file:

export const AppLayout = () => {
  const {
    isAuthenticated,
  } = useContext(AppContext);
  return (
    <div className="App">
      <Header />
      {isAuthenticated ? <HomePage /> : <LandingPage />}
      <Outlet />
    </div>
  );
};

I want the header to be visible on all pages. I feel like my implementation is close but I am misunderstanding how the Outlet works.

I’ve built the following directive to transform an input’s v-model into uppercase:

app.directive('uppercase', (el) => {
  el.value = el.value.toUpperCase()
})

But when I apply it, the resulting v-model returns the input value with the last character in lowercase.

  <template>
  <div>
    <input type="text" v-uppercase v-model="testInput" />
    <div>
      {{ testInput }}
    </div>
  </div>
    </template>
    
    <script setup>
      import { ref } from 'vue'
      const testInput = ref('')
    </script>

Why is this not working?

The lit element life cycle methods that take a changedProperties argument that is either of type Map<string, any> or a PropertyValues<this>.

Just curious is it possible to develop a more generic type in Typescript that can be used to return correctly typed values from a map?

Something like Properties<E>, that if for example E is a Todo with a date:Date property on it, we could pass properties: Properties<Todo> in to a function and call something like:

const date:Date = properties.get('date');

And this would lint correctly ….

I often find my self searchign a page for two keywords. Chrome can only search for 1 keyword.

I found this free plugin:
“Chrome Regex SearchFind” plugin allows for page searching using Regular Expression.

What would be the syntax to search for two words on a page?

Example 1: I wanto to search for “color” and “blue”

Example 2: I wanto to search for “Color” and “blue”

Example 3: I wanto to search for “bLue” and “CoLor”

(basically not case senstive on string search and they can appear in any order.)

Thank you

Images of Chrome Regex Search Plugin

https://postimg.cc/gallery/rX2KLmYY

I tried this. “Color” “Blue” and doent work.

This works in Google search only.

I am currently developing a tool to generate a mermaid graph using mermaid.js

Such graph is generated using Python and looks like:

<script type="module">import mermaid  from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';</script>
<script>
  mermaid.initialize({
    securityLevel: 'loose',
  });
</script>
<script>my_function(node_name){alert("my_function is called with ${node_name}")}</script>
<div classname="mermaid">
flowchart TD

subgraph tqt
    test_node[test_node]-->|this is an example message|test_node2[test_node2]
end

click test_node my_function("test_node")

</div>

I notice that the “click” function can trigger a callback.

Now, I am looking for a way to toggle a window to show more details for a specific node (using my_function callback).

If I click one a node, a specific sub window should appear. If I click again it should disappear (with CSS this is doable I think).

If I click one a node, a specific sub window should appear, but if I click on another node when a window is open, it should toggle off the current sub window and open the new one.

I am not sure how to do it, especially because lot’s of comment says that the mermaid.js click feature is pretty limited. I am wondering if this is easy to do(should I save the current state in a JavaScript variable??)

Thank you for your help, mockup is coming.