Search and media store refactoring

[obulat]

Fixes

Fixes #383 by @zackkrida

Description

This is the first part of another big store refactoring. Instead of a search and filter store, there are a media and a search stores.

Media store

This store is responsible for keeping information about the search results: the AudioResult or ImageResult arrays, the current Audio or Image, as well as the data about the fetching state (whether it is fetching or not, whether there is a fetching error).

Search store

This is where all the information about applied filters and search query is kept.

I've also added docstrings to actions, and found that they didn't have the necessary awaits in them, which caused problems with loading (I still need to add several docstring descriptions).

Next steps

The next step should be simplifying the query and filter handling:
The filters should be the source of truth for all query parameters except for q and mediaType. This would also simplify media fetching for different media types.

Testing Instructions

You can run the unit tests. Another thing I did was to create a new branch, merge the e2e tests from #394 into it, and test with npm run test:e2e. This has helped me see bugs that I didn't realize exist when testing manually. They all currently pass.

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[krysal]

Shouldn't ticket #382 precede this one? I mean, should we review that first or the order doesn't matter?

[obulat]

It would be better to review this one first, @krysal . I should probably rewrite #382 as I've worked on it before writing e2e tests, and there probably aren't bugs there that do nothing exist here

[krysal]

This looks really good to me, I tested around manually and everything seems to work well as expected. The stores get simplified step by step, and the same for the tests. Great job ⭐️

[obulat]

Several changes added:

• API search query parameters are set in search.query object. It can be changed by dispatching UPDATE_QUERY action with either q or searchType parameters. searchType is the content tab that is selected in the UI, and the query.mediaType is the media type that is queried from the API (currently, only image and audio are supported (audio is supported only under flag). Other search query parameters are updated through filters. Some API parameters have the same names but different value types for different media types (eg. extensions for audio can be mp3 or ogg, and for image - jpg, svg, etc.), so special filter-to-query transformations are applied.

• If the search page is opened directly by going to a URL like <openverse>/search/image?q=cat&license=cc0, it is server-rendered, and the initial search state is set from the $route parameter in created function in the search.vue page. Instead of parsing the query string to extract information about applied filters, I used the more convenient $route.query object.

• media store state is simplified: the information about fetching status is in fetchingState and the information about the search API request results is in the results object, and the component use getters to directly access the data for selected media type.

[sarayourfriend]

LGTM so far. E2E tests pass locally. However when I manually tested it locally I'm unable to enter a new search term in the search results page. Well, I'm able to enter a new one, but when I submit it I keep getting the results from the original search.

Steps to reproduce:

1. Go to / and enter a search term
2. Enter a new completely unrelated search term
3. Observe that the results have not changed

The query string never updates either.

[obulat]

Oh no, I've checked and un-checked the filters and changed the search tabs so many times, but never tried to change the query, @sarayourfriend :) I've fixed the search term not updating, and also the "No image results for 'cat'" showing up in the MetaSearchForm while the page is still fetching. And removed a stray log.
Will need to add the search term test to e2e, too.

[sarayourfriend]

Yay! Everything works great and thank you so much for adding another e2e test for the failing case, I love to see that! Awesome work on this really great PR 🙂