Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🔧 basicImage responsive to src props changes #6402

Merged
merged 1 commit into from
Jul 6, 2023

Conversation

daiagi
Copy link
Contributor

@daiagi daiagi commented Jul 6, 2023

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

  • Bugfix
  • Feature
  • Refactoring

Context

Test

https://deploy-preview-6402--koda-canary.netlify.app/stmn/collection/u-2024?collectionId=u-2024

Hover over the identity link, images will show

Did your issue had any of the "$" label on it?

Yes, $

Screenshot 📸

  • My fix has changed UI

image

Copilot Summary

🤖 Generated by Copilot at 05f3404

Added a watchEffect function to BasicImage.vue to handle dynamic image source changes. This improves the image component's compatibility with IPFS and blockchain data.

🤖 Generated by Copilot at 05f3404

watchEffect listens
src prop changes, imageSrc too
Dynamic images, like spring

@daiagi daiagi requested a review from a team as a code owner July 6, 2023 03:33
@daiagi daiagi requested review from roiLeo and Jarsen136 and removed request for a team July 6, 2023 03:33
@netlify
Copy link

netlify bot commented Jul 6, 2023

Deploy Preview for koda-canary ready!

Name Link
🔨 Latest commit 05f3404
🔍 Latest deploy log https://app.netlify.com/sites/koda-canary/deploys/64a6361894323d0008338037
😎 Deploy Preview https://deploy-preview-6402--koda-canary.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@kodabot
Copy link
Collaborator

kodabot commented Jul 6, 2023

SUCCESS @daiagi PR for issue #6399 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

@reviewpad
Copy link
Contributor

reviewpad bot commented Jul 6, 2023

AI-Generated Summary: This pull request includes changes to the BasicImage.vue component in the shared/view directory. It introduces a new watchEffect function that updates the value of imageSrc whenever the props.src changes, making the basicImage component more responsive to source prop changes. This means whenever the image source is updated, the component will re-render to display the new image. Four lines of code were added in total.

@reviewpad reviewpad bot added small Pull request is small waiting-for-review labels Jul 6, 2023
@codeclimate
Copy link

codeclimate bot commented Jul 6, 2023

Code Climate has analyzed commit 05f3404 and detected 0 issues on this pull request.

View more on Code Climate.

Copy link
Contributor

@roiLeo roiLeo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

won't this work better with const imageSrc = computed(() => props.src)?

otherwise code lgtm ✅

@daiagi
Copy link
Contributor Author

daiagi commented Jul 6, 2023

won't this work better with const imageSrc = computed(() => props.src)?

otherwise code lgtm white_check_mark

I avoided that as it would require a let. it would have looked something like:

let innerImageSrc = props.src
const loaded = ref(false)

const imageSrc = computed({
  get: () => innerImageSrc,
  set: (newValue: string) => {
    innerImageSrc = newValue
  },
})

const onImageLoad = () => {
  loaded.value = true
}
const onImageError = (ev: Event) => {
  $consola.error('[BasicImage] to load:', props.src, ev)
  imageSrc.value = placeholder.value
}

@vikiival vikiival merged commit 9d06471 into main Jul 6, 2023
@vikiival vikiival deleted the fix/-basic-image-reponsivity branch July 6, 2023 10:32
@vikiival
Copy link
Member

vikiival commented Jul 6, 2023

pay 15 usd

@yangwao
Copy link
Member

yangwao commented Jul 6, 2023

😍 Perfect, I’ve sent the payout
💵 $15 @ 5.29 USD/DOT ~ 2.836 $DOT
🧗 1cAsKZYNRb8dkSCpn4eVkEn6ycNZTGoDo5dGDgB8J1UUWK8
🔗 0xfe578923b09e60babf147b23c2ae49f12a5660aa88fd41467b9b40e516d089c4

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

@yangwao yangwao added the paid pull-request has been paid label Jul 6, 2023
This was referenced Jul 17, 2023
This was referenced Jul 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
paid pull-request has been paid small Pull request is small
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Hover card on Statemine collections doesn't work
6 participants