tusmanakhter / MigrantHub

MIT License
4 stars 3 forks source link

Review Fix/Cleanup #213

Closed iamlax closed 5 years ago

iamlax commented 5 years ago

Review fix #202

Changes to be fixed:

Additional fixes requested in PR:

Demo Steps:

  1. Navigate to website
  2. Login
  3. Select a service and scroll down to reviews
  4. Select Add Review 4.1. Redirected to new form page 4.2. Verify that validation doesn't allow empty comments 4.3. Verify that the new title field is requested in create review form 4.4. Fill fields and click Post Review 4.5. Observer circular load(if slow request) or you'll be redirected back to the service 4.6. Verify that a toast is displayed when review is posted 4.7. Verify that Post Review button is not shown if you have already reviewed the service
  5. Select Delete Review 5.1. Sweet Alert -> Cancel Request -> Review not cancelled 5.2. Sweet Alert -> Confirm or Cancel Request -> Review Deleted 5.3. Verify that a toast is displayed when review is deleted
  6. View new compact review layout 6.1. Verify average review and review count is displayed 6.2. Verify new title field is displayed if review has a title 6.3 Verify that review user is displayed 6.4. Verify that the Add Review button is not shown if you have already reviewed the service
  7. Verify UI is mobile friendly

Before:

image

After:

View Reviews

image

View Reviews Mobile

image

Add Review

image

Add Review Mobile

image

tusmanakhter commented 5 years ago

Can you also format the date to look nice, time should be left out since the user should not care about that (we still should store in DB for ordering purposes). Name should be visible to see who is reviewing the service. Optionally, a title for the review can be given, this is up to you, most sites do it but some don't. Also it should be overall more compact. Examples on websites such as bestbuy, airbnb, walmart, amazon, canadian tire, yelp, google reviews. Most of them also bring you to a new page when reviewing, optionally we can add this.

Summary:

  1. Properly formatted date
  2. Display reviewers name
  3. Make display more compact
  4. Let user include title (optional)
  5. Create review on another pager (very optional)
iamlax commented 5 years ago

Can you also format the date to look nice, time should be left out since the user should not care about that (we still should store in DB for ordering purposes). Name should be visible to see who is reviewing the service. Optionally, a title for the review can be given, this is up to you, most sites do it but some don't. Also it should be overall more compact. Examples on websites such as bestbuy, airbnb, walmart, amazon, canadian tire, yelp, google reviews. Most of them also bring you to a new page when reviewing, optionally we can add this.

Summary:

  1. Properly formatted date
  2. Display reviewers name
  3. Make display more compact
  4. Let user include title (optional)
  5. Create review on another pager (very optional)

@tusmanakhter Fixed 1-4, let me know what you think. I actually like 5, I was playing around with Best Buy and Amazon and i noticed that their review page can be accessed by URL. So I made our website similar to these sites.

I used circular load and toast for add review and sweet alert and toast for delete review. I mixed both for delete since I felt like it had a better experience, than an alert on the screen till the post was deleted.

taj-ch commented 5 years ago

Well done on fixing the reviews UI. It needed to be done. The code looks neat and clean. 💪 . The reviews look much organized. Since the reviews are a critical part of our system, here are few suggestions:

Firstly, the "View Reviews Mobile" has a lot of padding on each side, I think it be nice to have more text per line instead of spaces. Secondly, the user should not see their email on the review for security purposes instead the user should see "First Name" "Last Name" of the reviewer. Lastly the delete button looks really big on the mobile UI, I believe we should fix that as well.

iamlax commented 5 years ago

Well done on fixing the reviews UI. It needed to be done. The code looks neat and clean. 💪 . The reviews look much organized. Since the reviews are a critical part of our system, here are few suggestions:

Firstly, the "View Reviews Mobile" has a lot of padding on each side, I think it be nice to have more text per line instead of spaces. Secondly, the user should not see their email on the review for security purposes instead the user should see "First Name" "Last Name" of the reviewer. Lastly the delete button looks really big on the mobile UI, I believe we should fix that as well.

@CodeTaj Removed the padding on all the review components(view+add). I agree, first name and last name is safer. Buttons still look to big? Updated the pics to reflect the suggestions.

iamlax commented 5 years ago

@tusmanakhter Ammended the fixes