Skip to content

Ruth.demo add crud#294

Open
ruthgdb wants to merge 2 commits intomainfrom
ruth.demo-add-crud
Open

Ruth.demo add crud#294
ruthgdb wants to merge 2 commits intomainfrom
ruth.demo-add-crud

Conversation

@ruthgdb
Copy link
Copy Markdown
Contributor

@ruthgdb ruthgdb commented Aug 5, 2022

No description provided.

@ruthgdb ruthgdb requested a review from danielgitk August 5, 2022 11:33
@vercel
Copy link
Copy Markdown

vercel Bot commented Aug 5, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
practice ❌ Failed (Inspect) Aug 5, 2022 at 11:35AM (UTC)
practice-project-vue ❌ Failed (Inspect) Aug 5, 2022 at 11:35AM (UTC)
practice-vue ❌ Failed (Inspect) Aug 5, 2022 at 11:35AM (UTC)

Copy link
Copy Markdown
Contributor

@danielgitk danielgitk left a comment

Choose a reason for hiding this comment

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

LGTM 👍

},
async deleteBlog({ commit }, id) {
const res = await this.$axios.delete(
`https://blog-app-backend.onrender.com/api/articles/${id}`
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

An absolute URL is unnecessary since the baseUrl is set in nuxt.config.js.

@@ -0,0 +1,53 @@
import axios from 'axios'
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

No need to import axios. this.$axios can be used to access global variable.

export const actions = {
async fetchBlogs({ commit }) {
const response = await axios.get(
'https://blog-app-backend.onrender.com/api/articles/all'
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Instead we can do await this.$axios.get('articles/all')

'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
],
isLoggedIn: false,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Since it is a read-only property, this can be a computed property.

},
computed: { ...mapState('ruth', ['blogs']) },
created() {
this.isLoggedIn = this.$auth.$state.user
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Instead of this.$auth.$state.user nuxt auth provides this.$auth.loggedIn which returns boolean.

Comment on lines +47 to +48
`https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`,
config
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Let's move all network requests to vuex.

Comment on lines +61 to +62
title: '',
content: '',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

A better approach would be to have an object that represents a blog

blog: {
  title: '',
  content: ''
}

Comment on lines +72 to +76
this.newBlog = {
title: this.title,
content: this.content,
description: 'description',
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

If we apply the above recommendation, we won't need this.

content: this.content,
description: 'description',
}
this.$store.dispatch('ruth/addBlog', this.newBlog)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

this.$store.dispatch('ruth/addBlog', this.blog)

Comment on lines +78 to +79
this.blogTitle = ''
this.blogContent = ''
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Clearing the properties can be done by separate method.

this.dialog = !this.dialog
this.current = blog
},
updBlog(id) {
Copy link
Copy Markdown
Contributor

@TripleThreads TripleThreads Aug 6, 2022

Choose a reason for hiding this comment

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

better naming saveChanges(id)

</nuxt-link>
<v-spacer></v-spacer>

<v-dialog v-model="dialog" persistent max-width="600px">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Let's separate UpdateBlog to its own component

Comment on lines +112 to +113
title: '',
content: '',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Same style can be applied to this.

  • Making this its own object.

Copy link
Copy Markdown
Contributor

@TripleThreads TripleThreads left a comment

Choose a reason for hiding this comment

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

Left some comments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants