dnd | Beautiful and accessible drag and drop for lists with React | Widget library

I have implemented a Xdnd drop support implementation in VTK some time ago. It was working great except with Thunar file manager. All other file managers were working fine at the time. We dismissed this limitation a Thunar bug at the time.

The feature I implemented was very simple:

• Set the window of the application to be XdndAware
• Receive the position message and respond that we are ready to receive
• Receive the drop mesage and request a selection
• Receive the selection notify and recover the URI
• Convert the URI into something we can work with

Nothing fancy, I did not even touch the list type.

Fast forward a few years and now dolphin users cannot drop files correctly into our application. The URI is always the first file dropped since dolphin was started. Restarting our application has no effect. No bug at all with pcmanfm.

This is not a dolphin bug and files can be dropped on blender or firefox from dolphin without issues.

So there must be a bug in our implementation, but I've been staring at the code for some time and everything I tried had no effect, except for breaking Xdnd support completely.

Here are the interesting part of the implementation:

I made a dropdown using Button and a Popper using Material UI components where you can click on the button and get a list of subjects to choose from.
To make the popper disappear either we can click on the button again or use a component which listens to click event and closes the Popper.

Now I've to make the list capable of drag and drop feature so I use the react-beautiful-dnd npm package.
But the doesn't seem to work when I include , and components.

Can anyone help me figure it out?

Here's the code without drag and drop feature. CodeSandbox link https://codesandbox.io/s/gallant-newton-mfmhd?file=/demo.js

I'm trying to to make view with multiple divs containing Vaadin Charts in them, and move them around with the DnD. I followed this tutorial. This is my class that extends Div.

I have a React front end and Node with Express server. When I build and run it on my computer everything works perfect. When I build and run it on my Azure Ubuntu VM the server starts successfully and it hosts the React front end and I can access it no problem. But I get a "net::ERR_CONNECTION_REFUSED" in the console when it tries to access the node server. I then noticed that if my server was running on my computer the React app hosted on the Azure VM would hit the server on my local computer and not the one on the Azure VM.

So, how do I get the React app hosted on the VM to properly point to the server/vm it is hosted from?

The file structure of the app is:

I am creating a kanban board React app using the draggable-dnd library. Draggable divs (or "tasks") are part of the application, and I want to add "X" buttons to remove those draggables upon clicking. These buttons appear with their proper functionality when I place them inside the Draggable's div. However I want to style them properly with them fixed in the top right corner. So I've tried to add position:'fixed' as well as top and right positions. But when this CSS is implemented, the buttons disappear. What's weirder is that when I drag the draggable, the buttons temporarily appear until the draggable is re-dropped. I've tried changing the z-index of the button to high numbers, as well as re wrapping the button in a div, but to no avail.

The general code behind the draggable:

I was wondering how to reverse the order of the roles on my userinfo and I was trying to test things out with the indexing but I couldn't get it to work. I want it to display the highest role first and then lowest role last in that order.

How to fix this error?

'react-dnd-html5-backend' has no exported member 'HTML5Backend'.

Here are two play console logs and I think both are same issue.
I used https://github.com/z3r0c00l-2k/AquaDroid this library in my app which is on play store.
But I do not know how to solve this crash which is happening.
please someone help me, also posting code of shallNotify below...please help

java.lang.RuntimeException:
at android.app.ActivityThread.handleReceiver (ActivityThread.java:4114)
at android.app.ActivityThread.access$1500 (ActivityThread.java:250)
at android.app.ActivityThread$H.handleMessage (ActivityThread.java:1984)
at android.os.Handler.dispatchMessage (Handler.java:106)
at android.os.Looper.loop (Looper.java:250)
at android.app.ActivityThread.main (ActivityThread.java:7766)
at java.lang.reflect.Method.invoke (Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:604)
at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:958)
Caused by: java.lang.ArithmeticException:
at myapp.w3.b.f (Unknown Source:47)
at myapp.w3.b.e (Unknown Source)
at myapp.recievers.NotifierReceiver.onReceive (Unknown Source:91)
at android.app.ActivityThread.handleReceiver (ActivityThread.java:4105)

java.lang.RuntimeException:
at android.app.ActivityThread.handleReceiver (ActivityThread.java:3798)
at android.app.ActivityThread.access$1400 (ActivityThread.java:220)
at android.app.ActivityThread$H.handleMessage (ActivityThread.java:1871)
at android.os.Handler.dispatchMessage (Handler.java:107)
at android.os.Looper.loop (Looper.java:214)
at android.app.ActivityThread.main (ActivityThread.java:7403)
at java.lang.reflect.Method.invoke (Method.java)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:492)
at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:935)
Caused by: java.lang.ArithmeticException:
at myapp.helpers.NotificationHelper.shallNotify (NotificationHelper.java:47)
at myapp.helpers.NotificationHelper.notify (NotificationHelper.java)
at myapp.recievers.NotifierReceiver.onReceive (NotifierReceiver.java:91)
at android.app.ActivityThread.handleReceiver (ActivityThread.java:3789)
at android.app.ActivityThread.access$1400 (ActivityThread.java:220)
at android.app.ActivityThread$H.handleMessage (ActivityThread.java:1871)
at android.os.Handler.dispatchMessage (Handler.java:107)
at android.os.Looper.loop (Looper.java:214)
at android.app.ActivityThread.main (ActivityThread.java:7403)
at java.lang.reflect.Method.invoke (Method.java)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:492)
at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:935)

This is the code I've got this far. I'd like the channel name to be eg. "Online-was-Offline" if I switch from offline to online. I only want the name to be this way when it changes from offline to online. If there is any other status change, eg: idle to online, I'd like it to only say the new status name. How would I do that?