refactor: Navbar Vue composition api #5033

Jarsen136 · 2023-02-17T04:22:45Z

Thank you for your contribution to the KodaDot NFT gallery.

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

PR Type

Bugfix
Feature
Refactoring

Context

Closes Refactor: Navbar Vue composition api #5015
Requires deployment <>

reduce LOC from 318 to 268

Before submitting pull request, please make sure:

My contribution builds clean without any errors or warnings
I've merged recent default branch -- main and I've no conflicts
I've tried to respect high code quality standards
I've didn't break any original functionality
I've posted a screenshot of demonstrated change in this PR

Optional

I've tested it at </bsx/collection>
I've tested PR on mobile
I've written unit tests 🧪
I've found edge cases

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

My DOT address: Payout

Community participation

Are you at KodaDot Discord?

Screenshot 📸

My fix has changed something on UI; a screenshot is best to understand changes for others.

kodabot · 2023-02-17T04:22:49Z

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

netlify · 2023-02-17T04:22:56Z

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	`6a02f2d`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/63fb447bfc68a900087528da
😎 Deploy Preview	https://deploy-preview-5033--koda-nuxt.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

roiLeo

Strange behavior when I click in searchbar

Not happening on beta idk if it's related.

note: Should we keep import since Nuxt provide auto-imported components?

otherwise lgtm

components/Navbar.vue

Jarsen136 · 2023-02-17T11:05:36Z

Strange behavior when I click in searchbar
Not happening on beta idk if it's related.

They also occur on the beta environment. I have also seen some stuff colors change recently. related to #4855

note: Should we keep import since Nuxt provide auto-imported components?

👍 I will remove some unnecessary components import.

Edit: I'm not sure if I miss something, but when I try to remove some component imports, some errors appear.

Co-authored-by: roiLeo <medina.leo42@gmail.com>

vikiival

Usable

vikiival · 2023-02-20T16:19:39Z

components/Navbar.vue

-  get isCreateVisible(): boolean {
-    return createVisible(this.urlPrefix)
-  }
+const isDarkMode = computed(


Isnt there composable from vueuse? Cc @roiLeo

const colorMode = useColorMode() $consola.log(colorMode.preference)

$colorMode from useNuxtApp working tambien

context: You will get system instead of dark/light value, when you visit the preview env the first time and have not set any color mode. So, I introduced this method to solve the incorrect color mode issue.

IMO, we should make this solution a global composable method and use it everywhere to replace useColorMode. That could be a follow-up issue.

vikiival · 2023-02-20T16:19:59Z

components/Navbar.vue

-  get currentCollection() {
-    return this.$store.getters['history/getCurrentlyViewedCollection'] || {}
-  }
+const logoSrc = computed(() => (isDarkMode.value ? KodaBetaDark : KodaBeta))


Time for logo component?

I guess you are talking about the inline image component. I have introduced @nuxtjs/svg to make it in the previous PR, but finally do not merge it.
https://github.com/kodadot/nft-gallery/pull/4780/files

Yes, if we would like to use this kind of component, we need introduce a image loader, like @nuxtjs/svg https://www.npmjs.com/package/@nuxtjs/svg

vikiival · 2023-02-20T16:20:52Z

components/Navbar.vue


-  get showSearchOnNavbar(): boolean {
-    return !this.isLandingPage || !this.showTopNavbar || this.isBurgerMenuOpened
+const onScroll = () => {


Also @preschian used some composable for bottom

I'm not sure what you mean TBH 👀 Which part or composable api could I reuse

I'm not sure what you mean TBH 👀

Was thinking if something like this would help https://vueuse.org/core/useScroll/

After some trying, I found that useScroll could not be used in this case.

vikiival

So let it roll

components/Navbar.vue

Co-authored-by: Viki Val <viktorko99@gmail.com>

vikiival · 2023-02-25T06:51:11Z

Can we fix deepscan please?

…sue-5015

codeclimate · 2023-02-25T08:53:42Z

Code Climate has analyzed commit 9def05f and detected 0 issues on this pull request.

View more on Code Climate.

Jarsen136 · 2023-02-25T08:54:46Z

Can we fix deepscan please?

✅ Fixed

vikiival · 2023-02-26T11:37:58Z

pay 40 usd

yangwao · 2023-02-26T11:38:10Z

😍 Perfect, I’ve sent the payout
💵 $40 @ 38.79 USD/KSM ~ 1.031 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0x92a3259c972f36359926e66cd73d1ce8fc1828e318e171d5619312fdb91a4712

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

yangwao · 2023-08-08T12:00:38Z

pay 40 usd

yangwao · 2023-08-08T12:00:48Z

😍 Perfect, I’ve sent the payout
💵 $40 @ 5 USD/DOT ~ 8 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x237954b4900afc846c06ca7af1dfcb22edec8e974a6030187c0f11b0a923fb22

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

refactor: Navbar Vue composition api

9a3c5e5

Jarsen136 requested a review from a team as a code owner February 17, 2023 04:22

Jarsen136 requested review from roiLeo and vikiival and removed request for a team February 17, 2023 04:22

roiLeo approved these changes Feb 17, 2023

View reviewed changes

components/Navbar.vue Outdated Show resolved Hide resolved

Merge branch 'main' into issue-5015

e6ad1e5

Jarsen136 requested a review from roiLeo February 17, 2023 11:16

Update components/Navbar.vue

13fefcd

Co-authored-by: roiLeo <medina.leo42@gmail.com>

roiLeo approved these changes Feb 20, 2023

View reviewed changes

vikiival reviewed Feb 20, 2023

View reviewed changes

vikiival added 2 commits February 21, 2023 08:36

Merge branch 'main' into issue-5015

0a005d5

Merge branch 'main' into issue-5015

879bebf

roiLeo mentioned this pull request Feb 21, 2023

refactor: collection item composition api #5069

Closed

vikiival mentioned this pull request Feb 22, 2023

Unify usage of dark/ light mode #5096

Closed

vikiival approved these changes Feb 22, 2023

View reviewed changes

components/Navbar.vue Outdated Show resolved Hide resolved

Update components/Navbar.vue

fad8857

Co-authored-by: Viki Val <viktorko99@gmail.com>

Jarsen136 mentioned this pull request Feb 25, 2023

refactor: Unify usage of dark/ light mode #5100

Merged

17 tasks

Jarsen136 and others added 3 commits February 25, 2023 16:50

Merge branch 'main' into issue-5015

3868be3

fix: remove unused code

f3c943e

Merge branch 'issue-5015' of github.com:Jarsen136/nft-gallery into is…

9def05f

…sue-5015

Merge branch 'main' into issue-5015

6a02f2d

vikiival merged commit e80fe13 into kodadot:main Feb 26, 2023

yangwao added the paid pull-request has been paid label Feb 26, 2023

yangwao mentioned this pull request Mar 1, 2023

Revisit failed pull requests payouts #5122

Closed

yangwao removed the paid pull-request has been paid label Aug 8, 2023

yangwao added the paid pull-request has been paid label Aug 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Navbar Vue composition api #5033

refactor: Navbar Vue composition api #5033

Jarsen136 commented Feb 17, 2023 •

edited

kodabot commented Feb 17, 2023

netlify bot commented Feb 17, 2023 •

edited

roiLeo left a comment

Jarsen136 commented Feb 17, 2023 •

edited

vikiival left a comment

vikiival Feb 20, 2023

roiLeo Feb 20, 2023

Jarsen136 Feb 21, 2023

vikiival Feb 20, 2023

Jarsen136 Feb 21, 2023

vikiival Feb 21, 2023

Jarsen136 Feb 21, 2023

vikiival Feb 20, 2023

Jarsen136 Feb 21, 2023

vikiival Feb 21, 2023

Jarsen136 Feb 21, 2023

vikiival left a comment

vikiival commented Feb 25, 2023

codeclimate bot commented Feb 25, 2023

Jarsen136 commented Feb 25, 2023

vikiival commented Feb 26, 2023

yangwao commented Feb 26, 2023

yangwao commented Aug 8, 2023

yangwao commented Aug 8, 2023

refactor: Navbar Vue composition api #5033

refactor: Navbar Vue composition api #5033

Conversation

Jarsen136 commented Feb 17, 2023 • edited

PR Type

Context

Before submitting pull request, please make sure:

Optional

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

Community participation

Screenshot 📸

kodabot commented Feb 17, 2023

netlify bot commented Feb 17, 2023 • edited

✅ Deploy Preview for koda-nuxt ready!

roiLeo left a comment

Choose a reason for hiding this comment

Jarsen136 commented Feb 17, 2023 • edited

vikiival 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vikiival left a comment

Choose a reason for hiding this comment

vikiival commented Feb 25, 2023

codeclimate bot commented Feb 25, 2023

Jarsen136 commented Feb 25, 2023

vikiival commented Feb 26, 2023

yangwao commented Feb 26, 2023

yangwao commented Aug 8, 2023

yangwao commented Aug 8, 2023

Jarsen136 commented Feb 17, 2023 •

edited

netlify bot commented Feb 17, 2023 •

edited

Jarsen136 commented Feb 17, 2023 •

edited