Use related composable #284

obulat · 2021-10-03T03:12:29Z

Fixes

Description

This PR replaces the Vuex related store with a Vue composition API composable useRelated, and uses it in the RelatedAudios and RelatedImages components.

The data about RelatedMedia is only used in one component, so it is not necessary to keep it in the global Vuex state. However, the data fetching logic is similar for different media types. This is why this PR uses the Composition API's composable to abstract the logic, while keeping the state local to the specific media type component. The useRelated composable is using @nuxtjs/composition-api's useFetch to display the fetching state and errors.

Testing Instructions

To try different fetching states, you can edit the getRelatedMedia's data/audio-service:

for error state, if (config.dev) {throw Error('Server error')}
for pending state,

  if (config.dev) {
    return new Promise((resolve) => {
      setTimeout(resolve({ data: sampleAudioResponses.related }) , 3000)
   }
}

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
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.

sarayourfriend

Just some questions about implementation that confused me/one potential improvement to make the code more explicit and understandable... but otherwise works great locally and the code looks good too. Nice work! LGTM 🚀

sarayourfriend · 2021-10-04T15:46:15Z

src/components/AudioDetails/Related.vue

+  },
+  /**
+   * Fetches related audios on `audioId` change
+   * @param props


Generally I think we'd still give props a type of object (at least that's what we did in Gutenberg, not sure if it's actually necessary):

Suggested change

* @param props

* @param {object} props

sarayourfriend · 2021-10-04T15:48:30Z

src/components/AudioDetails/Related.vue

+   * @param props
+   * @param {string} props.audioId
+   * @param {any} props.service
+   * @return {{audios: (Ref<UnwrapRef<[]>>|Ref<AudioDetail[]>)}}


I find it helpful to add some extra spacing so these types don't run together and are more readable

Suggested change

* @return {{audios: (Ref<UnwrapRef<[]>>|Ref<AudioDetail[]>)}}

* @return {{ audios: (Ref<UnwrapRef<[]>> | Ref<AudioDetail[]>) }}

What does Ref<UnwrapRef<[]>> do? UnwrapRef sounds like something that should be passed a Ref itself, not passed to a Ref but I'm uneducated on this at the moment.

Thank you for spacing suggestions, this way JSDoc comments look consistent with the codebase.

As for Ref<UnwrapRef<[]>>, it was an auto-generated type annotation, and it's most likely incorrect, I will remove it. Thank you for spotting it!

sarayourfriend · 2021-10-04T15:49:14Z

src/components/AudioDetails/Related.vue

+  computed: {
+    errorMessage() {
+      return this.$t('media-details.related-error')
+    },


What's the reason to create a computed definition for this rather than inlining the call to $t in the template?

It was probably from the previous implementation where we added a media type to the message, and the $t expression looked really long. But with a more generic message here, it is absolutely unnecessary :)

sarayourfriend · 2021-10-04T15:53:11Z

src/composables/use-related.js

+  // fetch and fetchState are available as this.$fetch and this.$fetchState
+  // in components, so there's no need to export them
+  // eslint-disable-next-line no-unused-vars


🤔 I think it would make more sense to still return the fetchState. Relying on the implicitly created $fetchState in the components is actually kind of confusing now that useFetch isn't even being called directly in the setup function. It might make a little more sense if useRelated was named useFetchRelated, because at least then where the $fetchState was coming from would be slightly more easy to investigate to a new-comer... but the easiest to understand would just be an explicit fetchState returned from the function and consumed in the component. That way there's absolutely 0 magic or obfuscation happening and someone reading the code and draw directly to the specific place the fetch state comes from.

Also... how would this work if there are multiple calls to useFetch? Do they just get magically merged into one magic $fetchState variable somehow? Or would that create a complication?

My comment was based on the Nuxt Composition API's useFetch documentation:

$fetch and $fetchState will already be defined on the instance - so no need to return fetch or fetchState from setup.

I understand the confusion that this magic creates, but I also think it might be better to follow the advice of the library creators. Would adding a comment to the useFetch documentation and renaming the composable to useFetchRelated help?

Nuxt's fetch hooks already have this magic within them: If you have a fetch hook in your component, you can access the $fetchState object in the component, and it is probably not easy to understand where it comes from without knowing about Nuxt's fetch hook.
When I try returning fetch and fetchState, and using them in the component, they seem to work, but my editor complains...

It's so strange that they would recommend relying on that magic! But if that's what the library authors think is best then I agree we can follow it. No need to rename it I guess, just an education thing!

dhruvkb

Looks good. I appreciate the use of Nuxt's fetch hook, especially with the composition API.

obulat added 2 commits October 3, 2021 05:46

Replace Vuex related store with a composable and use in audio

e010adc

Replace related store with useRelated in images

6c258f5

obulat added 🛠 goal: fix Bug fix 💻 aspect: code Concerns the software code in the repository labels Oct 3, 2021

obulat requested a review from a team as a code owner October 3, 2021 03:12

obulat requested review from AetherUnbound and sarayourfriend October 3, 2021 03:12

obulat requested review from dhruvkb and removed request for AetherUnbound October 3, 2021 03:13

sarayourfriend approved these changes Oct 4, 2021

View reviewed changes

obulat added 2 commits October 5, 2021 15:19

Apply changes from code review

4659941

Add type annotations to RelatedImages

aa183c9

dhruvkb approved these changes Oct 5, 2021

View reviewed changes

obulat merged commit 08e3fb6 into image_grid_component Oct 5, 2021

obulat deleted the use_related_composable branch October 5, 2021 19:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use related composable #284

Use related composable #284

obulat commented Oct 3, 2021 •

edited

Loading

sarayourfriend left a comment

sarayourfriend Oct 4, 2021

sarayourfriend Oct 4, 2021

obulat Oct 5, 2021

sarayourfriend Oct 4, 2021

obulat Oct 5, 2021

sarayourfriend Oct 4, 2021

obulat Oct 5, 2021

sarayourfriend Oct 5, 2021

dhruvkb left a comment

	* @return {{audios: (Ref<UnwrapRef<[]>>\|Ref<AudioDetail[]>)}}
	* @return {{ audios: (Ref<UnwrapRef<[]>> \| Ref<AudioDetail[]>) }}

Use related composable #284

Use related composable #284

Conversation

obulat commented Oct 3, 2021 • edited Loading

Fixes

Description

Testing Instructions

Checklist

Developer Certificate of Origin

sarayourfriend left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dhruvkb left a comment

Choose a reason for hiding this comment

obulat commented Oct 3, 2021 •

edited

Loading