2

I am building this PWA with ReactJS.

As the title says, I just want to play a sound whenever a new order is placed.

I am using the Context API in order to manage the states.

This is my OrderContext.js where I fetch the orders from the API using React Query.

import React, { createContext } from "react";
import { useQuery } from "react-query";
import apiClient from "../EventService";

export const OrderContext = createContext();

export const OrderProvider = (props) => {
  const fetchOrders = async () => {
    const { data } = await apiClient.getEvents();
    return data;
  };

  let { data: orders, status } = useQuery("orders", fetchOrders, {
    refetchInterval: 15000,
    refetchIntervalInBackground: true,
    notifyOnStatusChange: false,
  });

  return (
    <OrderContext.Provider value={[orders, status]}>
      {props.children}
    </OrderContext.Provider>
  );
};

Then somewhere in my OrdersList.js component, I just use the state and map through it:

{orders.map((order) => (
     <Order key={order.id} order={order} />
))}

And lastly, in my Order.js component is where I check if there is a new order or not:

I am using this function to check if the order has been placed 15 or less minutes ago.

const isNewOrder = (orderCreatedDate) => {
    if (moment().diff(moment(orderCreatedDate)) / 900000 <= 1) {
      return true;
    } else {
      return false;
    }
  };

and then in the in the JSX of the component I simply do this to display a badge on the new orders:

  {isNewOrder(order.date_created) && (
        <Badge style={{ padding: 3 }} content="Nuevo" />
   )}

I am having troubles adding a sound effect to these new orders, I tried using Howler but couldn't make it work properly.

If someone could help me or maybe show me a way to achieve this I would really appreciate. I can provide the full components if needed, let me know. Thanks in advance.

Have a nice day!

Alessandro
  • 164
  • 1
  • 2
  • 11
  • 1
    When you say you are having trouble, what happens exactly? Are there any errors? What is the actual result? – Technoh Nov 03 '20 at 21:35
  • The sounds are playing really buggy, and they are triggering everywhere, like literally if you click anywhere on the website, they play. – Alessandro Nov 03 '20 at 21:39
  • We would need to see the code that you are using to play the sounds the. There are a lot of missing pieces right now. I understand it can be a lot of code to paste, you could also provide a github or other code repository. – Technoh Nov 03 '20 at 21:42
  • Here is the full component Order.js, where I am using howler: https://jsfiddle.net/q5tbj0vd/ and here is the buggy noise I am talking about https://imgur.com/Q82CTxS – Alessandro Nov 03 '20 at 21:46
  • As you can see in the component, I am just using sound.play() where I return true in the function, but it creates this weird behaviour – Alessandro Nov 03 '20 at 21:48
  • Are you using the same component to show the orders in the order list? If so it would trigger it multiple times. – Technoh Nov 03 '20 at 21:50
  • yes I am using this component as you can see in the main post. I am not sure how to make it work or play the sound only when a new order is received – Alessandro Nov 03 '20 at 21:52

1 Answers1

0

I think your best approach is to add a prop to your Order component and check if you are on the order list page or on the order page. If on one single order then you call sound.play, otherwise you do not.

Also, you should use React Howler if you're not already. Regular Howler does not play well (no pun intended) with React.

Finally, you should add a componentWillUnmount function to stop the sound from playing (just call sound.stop() inside componentWillUnmount).

Technoh
  • 1,606
  • 15
  • 34
  • Oh I see, the only problem is that I am using React Hooks, my components aren't class component. What's the equivalent of componentWillUnmount? – Alessandro Nov 03 '20 at 22:02
  • You can use the `useEffect` function and place the code to stop the sound playing inside an anonymous function inside the return statement. See https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks for details. – Technoh Nov 03 '20 at 22:06
  • I tried to use React Howler and it doesn't seem to work, it doesn't play any sound – Alessandro Nov 03 '20 at 22:42