inproving usability

Author: edimossilva

volume/blog-backend/Gemfile

@@ -23,8 +23,8 @@ gem 'puma', '~> 3.11'
 gem 'bootsnap', '>= 1.4.2', require: false
 
 # Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
+gem 'active_model_serializers'
 gem 'rack-cors'
-
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: %i[mri mingw x64_mingw]

volume/blog-backend/Gemfile.lock

@@ -45,6 +45,11 @@ GEM
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
+    active_model_serializers (0.10.10)
+      actionpack (>= 4.1, < 6.1)
+      activemodel (>= 4.1, < 6.1)
+      case_transform (>= 0.2)
+      jsonapi-renderer (>= 0.1.1.beta1, < 0.3)
     activejob (6.0.2.1)
       activesupport (= 6.0.2.1)
       globalid (>= 0.3.6)
@@ -70,6 +75,8 @@ GEM
       msgpack (~> 1.0)
     builder (3.2.4)
     byebug (11.1.1)
+    case_transform (0.2)
+      activesupport
     coderay (1.1.2)
     concurrent-ruby (1.1.6)
     crass (1.0.6)
@@ -87,6 +94,7 @@ GEM
     i18n (1.8.2)
       concurrent-ruby (~> 1.0)
     jaro_winkler (1.5.4)
+    jsonapi-renderer (0.2.2)
     jwt (2.2.1)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -215,6 +223,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  active_model_serializers
   bcrypt (~> 3.1.7)
   bootsnap (>= 1.4.2)
   byebug

volume/blog-backend/app/controllers/blogs_controller.rb

@@ -8,7 +8,7 @@ def create
     if BlogAccessLevel.can_create?(@current_user, blog)
       blog.save!
       BlogNotificationService.on_blog_created(blog)
-      render_created(blog)
+      render_created(BlogSerializer.new(blog))
     else
       render_unauthorized
     end
@@ -25,16 +25,16 @@ def destroy
   end
 
   def index
-    return render_ok(Blog.only_public) if @current_user.nil?
+    return render_ok(Blog.only_public.map { |blog| BlogSerializer.new(blog) }) if @current_user.nil?
 
-    render_ok(Blog.all)
+    render_ok(Blog.all.map { |blog| BlogSerializer.new(blog) })
   end
 
   def show
     blog = Blog.find_by!(id: search_params[:id])
 
     if BlogAccessLevel.can_show?(@current_user, blog)
-      render_ok(blog.to_json(include: :posts))
+      render_ok(BlogSerializer.new(blog))
     else
       render_unauthorized
     end

volume/blog-backend/app/controllers/posts_controller.rb

@@ -7,7 +7,7 @@ def create
     post.user_id = @current_user.id
 
     if PostAccessLevel.can_create?(@current_user, post)
-      render_created(post) if post.save!
+      render_created(PostSerializer.new(post)) if post.save!
     else
       render_unauthorized
     end
@@ -30,7 +30,7 @@ def show
     post = Post.find_by!(id: search_params[:id], blog_id: search_params[:blog_id])
 
     if PostAccessLevel.can_show?(@current_user, post)
-      render_ok(post)
+      render_ok(PostSerializer.new(post))
     else
       render_unauthorized
     end

volume/blog-backend/app/serializers/blog_serializer.rb

@@ -0,0 +1,12 @@
+class BlogSerializer < ActiveModel::Serializer
+  attributes :id
+  attributes :name
+  attributes :owner
+  attributes :is_private
+
+  has_many :posts
+
+  def owner
+    object.user.username
+  end
+end

volume/blog-backend/app/serializers/post_serializer.rb

@@ -0,0 +1,16 @@
+class PostSerializer < ActiveModel::Serializer
+  attributes :id
+  attributes :title
+  attributes :owner
+  attributes :is_private
+  attributes :blog_id
+  attributes :user_id
+
+  def owner
+    object.user.username
+  end
+
+  def is_private
+    object.blog.is_private
+  end
+end

volume/blog-frontend/src/components/blog/create-blog/CreateBlog.vue

@@ -45,8 +45,8 @@ export default {
         .then(this.redirectToShowBlog)
         .catch(this.showErrorMessage);
     },
-    redirectToShowBlog(response) {
-      console.log(response);
+    redirectToShowBlog({ data: { data } }) {
+      this.$router.push({ name: "showBlog", params: { id: data.id } });
     },
 
     showErrorMessage({

volume/blog-frontend/src/components/blog/list-blog/ListBlog.vue

@@ -8,16 +8,15 @@
           <th>id</th>
           <th>name</th>
           <th>private</th>
-          <th>show</th>
-          <th>Delete</th>
-
+          <th>owner</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="blog in blogs" v-bind:key="blog.id">
           <td>{{blog.id}}</td>
           <td>{{blog.name}}</td>
           <td>{{blog.is_private}}</td>
+          <td>{{blog.owner}}</td>
           <td><button @click="redirectToShowBlog(blog.id)" class="ListBlog__showBlog-button-js">Show</button></td>
           <td><button @click="deleteBlog(blog.id)" class="ListBlog__deleteBlog-button-js">Delete</button></td>
         </tr>

volume/blog-frontend/src/components/blog/show-blog/ShowBlog.vue

@@ -1,7 +1,5 @@
 <template lang="">
   <div>
-    <h3>Show Blog</h3>
-
     <div>
       <h3> Blog Name: {{blog.name}} </h3>
     </div>
@@ -11,14 +9,17 @@
         <tr>
           <th>id</th>
           <th>title</th>
-          <th>show post</th>
-          <th>delete</th>
+          <th>owner</th>
+          <th>private</th>
         </tr>
       </thead>
       <tbody>
       <tr v-for="post in blog.posts" v-bind:key="post.id">
         <td>{{post.id}}</td>
         <td>{{post.title}}</td>
+        <td>{{post.owner}}</td>
+        <td>{{post.is_private}}</td>
+
         <td><button @click="redirectToShowPost(post.id)">Show post</button></td>
         <td><button @click="deletePost(post.id)">Delete post</button></td>
       </tr>
@@ -76,7 +77,9 @@ export default {
     },
 
     updateData({ data: { data } }) {
-      this.blog = JSON.parse(data);
+      // debugger; // eslint-disable-line
+
+      this.blog = data;
     },
 
     showErrorMessage({

volume/blog-frontend/src/components/post/show-post/ShowPost.vue

@@ -3,8 +3,14 @@
     <h3>Show Post</h3>
 
     <div>
-      <h3> Post Title: {{ post.title }} </h3>
+      <p> Post Title: {{ post.title }} </p>
+      <p> Post Owner: {{ post.owner }} </p>
+
     </div>
+
+    <button @click="redirectToShowBlog">Show posts</button>
+    <button @click="redirectToCreatePost">Create post</button>
+
   </div>
 </template>
 
@@ -42,6 +48,15 @@ export default {
         .catch(this.showErrorMessage);
     },
 
+    redirectToShowBlog() {
+      this.$router.push({ name: "showBlog", params: { id: this.blogId } });
+    },
+    redirectToCreatePost() {
+      this.$router.push({
+        name: "createPost",
+        params: { blogId: this.blogId }
+      });
+    },
     updateData({ data: { data } }) {
       this.post = data;
     },

volume/blog-frontend/src/components/user-header/UserHeader.vue

@@ -18,7 +18,7 @@ export default {
         return "not registred";
       }
       const user = this.$store.getters.user;
-      return `username: ${user.username}, accessLevel: ${user.accessLevel}`;
+      return `username: ${user.username}, accessLevel: ${user.accessLevel}, id: ${user}`;
     },
     isLoged: function() {
       return this.$store.getters.isLoged;