Help Users Avoid Duplicates on Utopian - Display Similar Contributions in the Right Side Bar

Background

Originally I was going to help work on another feature for Utopian. @elear asked that I work on this as a contribution and said it was urgent so I gave it a go. He helped me setup the appropriate environment to run the UI and use the official API endpoint. Setting up the UI for use is far more straight forward than expected, despite the many configuration files. This is my first contribution to the Utopian project itself, and it's also a thanks to the developers of Utopian for making this possible.

Contribution

By displaying similar contributions in the side bar, users will have an easier time avoiding duplicate contribution submissions. Thereby helping free up a moderator's time as well. The look up works exactly the same way that search does, including title and body, displaying the top results.

Development

A SimilarPosts React component was created that carries the necessary functionality of handling the API call. It uses a data prop that contains the fields necessary to start the search. The same API endpoint as searching is used when invoking the API call. This ensures that the same results are received as you would from searching. The results are stored in a state and then displayed to the user.

Adjusting what data gets returned is easy to do within the created React component. An updateContributions function gets invoked with a debounce to prevent server spam with constant requests. The query happens inside of that functions and sets the state for the results to be displayed.

Pull request: https://github.com/utopian-io/utopian.io/pull/88