Add drag and drop reordering for images uploaded to how-to steps

[thisismattia]

Sometimes can happen that a user uploads pics in a step in the wrong order. We should enable users to move pics up and down to fix this little issue

child of #3

[BenGamma]

When creating a how-to on the page https://dev.onearmy.world/how-to/create, you can upload multiple images to a step. For now the images are displayed in the uploaded order and if you want to change this order, you need to manually delete the uploaded image (by clicking the top right cross on it) and reupload in the wanted order. It can be painfull/long when you have a lot of images.
The wanted behavior here is the ability to drag and drop images up and down to change their order.

[thisismattia]

@sanjuskm05 is working on this 🥳

[sanjuskm05]

@BenGamma @chrismclarke Do we have an edit feature for the "How to" and its steps? If not, i think we should address that first. Also, I was thinking can we address reordering of steps rather than drag and drop the images. 'Drag and drop' feature could be more helpful when we are creating and editing.

[chrismclarke]

Issue is there (#103) but nobody is currently assigned to it. Your call if you want to first work on images, editor or anything else. Reordering steps would also be a good feature, in the past I've used libraries like dragula but sure there are plenty of options out there so might be worth a quick bit of research. In all of these cases we're essentially just talking about ways of reordering arrays.

[sanjuskm05]

thanks for the input on dragula. I will try to implement this.

[chrismclarke]

I think there might be more popular choices for react:
https://www.npmjs.com/search?q=react%20drag%20and%20drop&ranking=popularity

Will leave you to experiment and see what works

[chrismclarke]

https://www.npmjs.com/package/react-beautiful-dnd seems particularly nice

[thisismattia]

@sanjuskm05 I know you said you won't be able to help us anymore for the time being but are you gonna complete this issue or shall I de-assign you from this?
Thanks for your work so far 👊

[sanjuskm05]

Thanks. Please unassign it

[chrismclarke]

Thanks for the update, I see you have been unassigned and I have just added back the Help wanted label. I would suggest you unsubscribe from the thread if you wish to stop receiving notifications on it (totally optional of course)

[drydenwilliams]

I've used react-sortable-hoc for re-ordering before which works really nicely.

Please note: We do not currently have ability on the backend for image ordering.

[chrismclarke]

merge into #939