[SteemGigs] Enhanced Search & Bug Fixes

in #utopian-io5 years ago

screely-1551515391946.png

Repositories

https://github.com/steemgigs/steemgigs
https://github.com/steemgigs/steemgigsServer

This post is partially related to the following task request, however, I conducted some further work that I believe would benefit both the completion of the tasks as well as provide the site an easier to use experience.

https://busy.org/@surpassinggoogle/task-development-help-us-add-refine-search-capability-to-the-steemgigs-org-search-and-other-tasks

Introduction

It's been a little while since my last update surrounding SteemGigs, but behind the scenes, I have been able to move the site forward slowly. The following post helps to show some of the latest changes and improvements made to SteemGigs.

Pull Request

The work that I carried out on SteemGigs can be found in the following pull requests:

https://github.com/steemgigs/steemgigs/pull/99

and

https://github.com/steemgigs/steemgigsServer/pull/5

The site is live at the following URL:

https://steemgigs.org/

New Features/Improvements

The items I completed from the task request were as follows:

  1. Enhanced Search

In addition to the above I completed the following:

  1. Add the ability to set as free when creating a gig
  2. Resolve issue surrounding title display on gig card
  3. Images not marked up using markdown will display as images
  4. Search cards will pull from the blockchain
  5. Advanced search options with filtering
  6. Autosave posts and comments
  7. Ability to reblog from the post preview page and only ability to reblog other user blogs
  8. Add a page for privacy policy
  9. Basic FAQ area with few questions and answers

Enhanced Search

The main feature completed within this release was the ability for a user to search using a selection of different search options, the aim of this was to provide a user with more control in finding the gigs they need. The search page now has the following search options:

  1. Min & Max Price
  2. Search Text
  3. Category & Sub Category
  4. Currency

In combination with this all of the results can now be sorted using the following sort options:

  1. Lowest Price First
  2. Highest Price First
  3. Newest
  4. Oldest

Prior to this release, the search page looked like this:

screely-1551513905207.png

As you can see from the above, a user had the ability to search using just search text. Upon initiating a search a user would be shown a list of gigs related to their search query. In the previous release a the gigs were not pulling data from the blockchain, this is why the Steemgigs logo is showing as the image for all searches. Following this work being completed the search page now looks like this:

screely-1551515391946.png

In order to get the enhanced search feature, there were two main pieces to consider, first how the results would be surfaced and secondly how they would be displayed on the page.

In terms of the server side search, the search is carried out using an aggregation within MongoDB. The code surrounding search can be found here:

https://github.com/steemgigs/steemgigsServer/blob/master/src/controllers/search.controller.js

As you can see within the search method there are a number of optional matches within the aggregation, this is because I plan to replace a number of the get post calls within the code to overall reduce the maintenance of controllers. To simplify my explanation, the following shows an example of the search end to end based on a request to the server. If a request is made with the following body:

carbon (20).png

The following pipeline will be created:

carbon (19).png

once the posts have been gathered from the database, I then go and get the blockchain data for each post, this can be seen in the following promise:

carbon (21).png

Once this promise is resolved I then send the results in the response, this a combination of the data found within the data and the blockchain for a particular post.

Note: In writing this up I realized I don't reject the promise at any point, I will resolve in a future release.

In order to bring this into the UI I created a new component here:

https://github.com/steemgigs/steemgigs/blob/develop/src/components/search/search-panel.vue

This component handles both how the search panel will look and be displayed within the search page combined with how the request is made.

Autosave Posts & Comments

One of the features @surpassinggoogle requested was the ability for posts and comments to be saved when a user either navigates away from the page or loses connection. In order to allow for the autosaving of both posts and comments I created a mixin that could be reused throughout all of the different post & comment editors within SteemGigs, the mixin can be found here:

https://github.com/steemgigs/steemgigs/blob/develop/src/mixins/form.js

however, the items of importance for this feature can be found here:

carbon (22).png

In the above the there are 3 main methods, Create/Update, Get & Delete. These methods are commonly used on change of the post and comment editors to allow for a draft to be saved between refreshes or navigating away from the page.

Other Items

In relation to some of the other features added you can use the following links to quickly access the code changes related to these changes:

FeatureCommits
Privacy PolicyHere
Basic FAQ area with few questions and answersHere
Images not marked up using markdown will display as imagesHere
Ability to reblog from the post preview page and only ability to reblog other user blogsHere
Add the ability to set a free option on create gigHere

What's next?

Next, I plan to work on the following task request:

https://busy.org/@surpassinggoogle/task-request-help-us-design-re-design-the-steemgigs-org-landing-page-additional-bounty-of-50-steem

I have already mocked this up (will share with graphics in the next couple of days) and will begin to build this shortly.

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1

Sort:  

I've finally taken the dive and started learning Vue.js, so this is a great example for me (I could've sworn SteemGigs was forked from Busy and thus used React before). The UI looks so much better than before, which is to be expected of you, haha. Great stuff!

As for the code, let me try to give you some feedback:

  • I saw that you commit a mutation directly from the component (e.g. search-panel) in an asynchronous function. From what I've read mutations have to be synchronous, whereas actions don't, and so it's better to create an action in the store and dispatch that if something asynchronous needs to be done instead. You can read more about it here.
  • Some small inconsistencies like using var in some places, but that's me being nitpicky.

It's very obvious a lot of work went into this, and the quality of the code (as far as I can tell, being a Vue.js beginner) is great + there are a lot of comments making it more readable! Amazing work!


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Thanks for the review :)

Ulog is the busy fork, but Steem Gigs has had a couple of different front-ends so maybe in the past.

Yeah, it's getting better (I think the refine results need more work/I could make it better, but I guess most of the value is in its ability to refine), the person who created it originally used materialise (I'm not a fan haha) and it's a bit of a battle rewriting it all out, little steps at a time I guess.

I'll take a look, brutally honest, never used actions, so you're likely right there haha. Thank you :)

Ahh, I can see I snuck some vars in by accident, slowly phasing out doing that, getting better haha.

Awesome that you're learning it, have you got any projects planned? or thinking about using it instead of vanilla js in your existing ones?

Once again, thanks for the review :)

Awesome that you're learning it, have you got any projects planned? or thinking about using it instead of vanilla js in your existing ones?

I'm part of a group that creates post-match threads on /r/LeagueOfLegends, and our current tool isn't great. I think someone made it with PHP years ago, and it uses a Google sheet as the database, which is starting to become a pain. Because of this I decided to remake and improve it while learning Vue.js. Other than that, I do have a couple of projects planned, but I will see how this first one goes, haha.

Thank you for your review, @amosbastian! Keep up the good work!

Hi, @tobias-g!

You just got a 1.16% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

Hi @tobias-g!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @tobias-g!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

This post has been included in the latest edition of SoS Daily News - a digest of all the latest news on the Steem blockchain.

Coin Marketplace

STEEM 0.29
TRX 0.12
JST 0.035
BTC 65402.71
ETH 3383.32
USDT 1.00
SBD 4.60