[Project Update] Smults a.k.a Steem MULti Tags Search - New Features

What's up fellow Steemians!! This is my update for Smults, after nearly one month of launching it. Smults (or Steem MULti Tags Search) is a web application that allows users to search multiple tags (up to 5 tags) at a time. User can also mark the 'First tag as category' checkbox, such that all returned results will be in the same category as the first tag. And thanks to yours truly, now users can even search posts filtered by author!

<p dir="auto">In this update, I have added ES-linting, unit test cases and the cool feature to filter by author, search for author and subsequently return posts by said author. User can also further filter the author's posts by using the multi tags search. <h4>URL link <p dir="auto"><span><a href="https://smults-search.appspot.com" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://smults-search.appspot.com <h3>Repository <p dir="auto"><span><a href="https://github.com/Alvin-Voo/smults" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/Alvin-Voo/smults <h4>Pull requests <p dir="auto"><br /><br /><br /><br /><span><a href="https://github.com/Alvin-Voo/smults/pull/10" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/Alvin-Voo/smults/pull/10<span> <a href="https://github.com/Alvin-Voo/smults/pull/8" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/Alvin-Voo/smults/pull/8<span> <a href="https://github.com/Alvin-Voo/smults/pull/7" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/Alvin-Voo/smults/pull/7<span> <a href="https://github.com/Alvin-Voo/smults/pull/5" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/Alvin-Voo/smults/pull/5<span> <a href="https://github.com/Alvin-Voo/smults/pull/3" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/Alvin-Voo/smults/pull/3 <h3>New Features <h4>Filter by authors <p dir="auto"><a href="https://github.com/Alvin-Voo/smults/pull/7" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">PR #7 and <a href="https://github.com/Alvin-Voo/smults/pull/10" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">PR #10 implemented the filter by authors feature, as seen below:<br /> <img src="https://images.hive.blog/0x0/https://user-images.githubusercontent.com/28261161/45873408-0121cf00-bdc5-11e8-9d7f-a54ac3ba5b32.gif" alt="sc-filter-by-author-1" /> <p dir="auto">By choosing the filter 'Author', a dropdown input box will pop up to the right, where user can search for author's name instantaneously, much like the search box of <a href="https://busy.org" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">busy.org. While user searches, suggestions of user names will appear in the dropdown. <p dir="auto"><img src="https://images.hive.blog/0x0/https://user-images.githubusercontent.com/28261161/45873871-04698a80-bdc6-11e8-89a1-d37e1bae7266.gif" alt="sc-filter-by-author-2" /> <p dir="auto">The search will return all posts by this said author if multiple tags search field is empty. User can also further filter the posts list using the existing multi tags search input box. <p dir="auto">The were 2 challenges in implementing this feature: <ol> <li>Getting the author names search suggestion <li>Re-implement a new fetch posts action with author's name <p dir="auto">For challenge No. 1, the dispatch action is quite straight-forward (at <a href="https://github.com/Alvin-Voo/smults/pull/7/commits/02402044881f8509ca25ec0d94d959611c799c2e" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit): <pre><code>export function lookupAuthors(search) { const request = client.call('condenser_api', 'get_account_reputations', [search, MAX_AUTHORS]); //MAX_AUTHORS here is 20 return { type: LOOKUP_AUTHORS, payload: request, // this goes to redux promise }; } <p dir="auto">whereby this will return an array of 20 authors, with their reputation scores. All I have to do after that was to filter away (at <a href="https://github.com/Alvin-Voo/smults/pull/7/commits/67a3f2ff4cdee994317e52a20c8086517761ba90" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit) those authors with zero reputation scores and I get the <em>valid authors. <p dir="auto">At the Search page (pages/search.js), I wanted the input of user to be throttled or debounced (at <a href="https://github.com/Alvin-Voo/smults/pull/7/commits/203c8ad8cab0a84f62700a5041105431391bd733" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit): <pre><code> asyncLookupAuthors = async (query) => { const { lookupAuthors } = this.props; await lookupAuthors(query); const { authorsOptions } = this.props; this.setState({ authorsOptions }); } // since debounce and throttle functions *returns* the executable function // they are declared here lookupAuthorsDebouncer = debounce(this.asyncLookupAuthors, 300); lookupAuthorsThrottler = throttle(this.asyncLookupAuthors, 300); authorSearchChange = async (e, d) => { const query = d.searchQuery; if (query.length < 5) this.lookupAuthorsThrottler(query); else this.lookupAuthorsDebouncer(query); } <p dir="auto">I put a delay of 300ms for both debounce and throttle functions of <a href="https://lodash.com/docs/4.17.10" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">lodash, and to check that the async lookupAuthors function will be called consistently (i.e. throttled) if search string is short while it will only be called once at the end (i.e. debounced) if search string is longer (than 5). <p dir="auto">For the second challenge, since I already have the posts reducer with the <a href="https://steemit.com/utopian-io/@alvinvoo/new-project-smults-a-k-a-steem-multi-tag-search" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">magic function to filter out posts with specific tags. I just need an API which can return the exact same raw posts data, which I can then supply to my posts reducer. Luckily, steemit's appbase API got me covered (at <a href="https://github.com/Alvin-Voo/smults/pull/7/commits/02402044881f8509ca25ec0d94d959611c799c2e" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit): <pre><code>async function fetchFilterByAuthor(author) { const blogs = await client.call('condenser_api', 'get_discussions_by_blog', [{ tag: author, limit: MAX_POSTS }]); const posts = blogs.map((blog) => { const retBlog = { ...blog }; if (retBlog.author !== author) retBlog.resteemed = true; return retBlog; }); return { type: FETCH_AND_FILTER_POSTS, payload: posts, }; } <p dir="auto">Here, the 'get_discussion_by_blog' API call returns the exact raw posts results as per 'get_discussions_by_<em>filtername'. Once the posts data return, I need to check whether they are created by this said author, if they are not, means they were re-steemed (or re-blogged). After that, the data goes into the posts reducer. The posts reducer will then be able to further filter down the posts based on any tag(s) entered by the user. <h4>Other minor features (improvements) <h5>Searching with no tag by default will return full search results <p dir="auto">Prior to this, the application would not search if there were no tag supplied by user, but I needed a way to return all results for an author, so the only logical solution is to remove this constraint. Now, by selecting a filter and then clicking 'Search' will return all posts for that filter (just like how steemit does it). Searching by author with no search tags will return all his/her posts. <h5>Customized next.js 404 page with back to home page's link <p dir="auto"><img src="https://images.hive.blog/768x0/https://ipfs.busy.org/ipfs/QmUtbrH7uUf3e5jPX7m5eXZeGy6XLA6Y3pJRdyKiRTJynd" alt="not_found.png" srcset="https://images.hive.blog/768x0/https://ipfs.busy.org/ipfs/QmUtbrH7uUf3e5jPX7m5eXZeGy6XLA6Y3pJRdyKiRTJynd 1x, https://images.hive.blog/1536x0/https://ipfs.busy.org/ipfs/QmUtbrH7uUf3e5jPX7m5eXZeGy6XLA6Y3pJRdyKiRTJynd 2x" /> <h5>Able to show fetch posts error (if any) <p dir="auto"><img src="https://images.hive.blog/0x0/https://user-images.githubusercontent.com/28261161/45877332-06384b80-bdd0-11e8-938b-57e4f455d466.gif" alt="page-error" /> <p dir="auto">I have written a single Notify component to display any error or custom messages (at <a href="https://github.com/Alvin-Voo/smults/pull/7/commits/193b79f3d03a615cc2a35300a7eaddebef9ad3cf" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this and <a href="https://github.com/Alvin-Voo/smults/pull/7/commits/1962bf5a32921e28e32aa56362d227ef32e740d2" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit). <h5>Able to show a customized message <p dir="auto"><img src="https://images.hive.blog/0x0/https://user-images.githubusercontent.com/28261161/45877333-08020f00-bdd0-11e8-9c03-c011c4cd7ad0.gif" alt="no-post" /> <p dir="auto">The 'No post found' message is a bit more trickier to get it to display <em>at the right time. I can only display it when 1) The posts reducer has finished processing <em>and 2) The posts list from redux store is empty. I cannot display it straight away after dispatching the fetch posts action, because at that time, the posts reducer might still be running, hence whatever state I get from redux store would be wrong, so I made use of React's lifecycle componentDidUpdate function (at <a href="https://github.com/Alvin-Voo/smults/pull/7/commits/1962bf5a32921e28e32aa56362d227ef32e740d2" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit) . <pre><code> componentDidUpdate = (prevProps) => { const { postsState, postsLength } = this.props; if (postsState !== prevProps.postsState) { if (postsState === FETCHED_POSTS && postsLength === 0) { this.setState({ notify: { type: MESSAGE, message: 'Opps. No post found!' } }); } } } <p dir="auto">I added 2 states constants for the posts reducer, one is STORED_TAGS and another FETCHED_POSTS. The store's state constants (or flags) will change from STORED_TAGS to FETCHED_POSTS only when the reducer returns (finished processing). So, only by then the application will check the posts list length and tell the search page to display the message if it's indeed zero. <h3>ESLint <p dir="auto">I've only decided to do the <em>proper way and started applying linting in this update, so I did quite a bit of code refactoring in <a href="https://github.com/Alvin-Voo/smults/pull/3" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">PR #3. I've applied the <a href="https://www.npmjs.com/package/eslint-config-airbnb" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">airbnb eslint preset. Final lint test: <p dir="auto"><img src="https://images.hive.blog/768x0/https://user-images.githubusercontent.com/28261161/45886464-ced79800-bdeb-11e8-9d89-3605c9adb555.png" alt="es-lint" srcset="https://images.hive.blog/768x0/https://user-images.githubusercontent.com/28261161/45886464-ced79800-bdeb-11e8-9d89-3605c9adb555.png 1x, https://images.hive.blog/1536x0/https://user-images.githubusercontent.com/28261161/45886464-ced79800-bdeb-11e8-9d89-3605c9adb555.png 2x" /> <p dir="auto">For those who are starting with any modern day JS frameworks (React, Angular, Vue or even Riot), I strongly recommend to use ES-linting from the get-go, even if it's just for prototyping. It really did help a lot in my case. Of course, there were a lot of figuring out what all the lint rules are about and configurations (at <a href="https://github.com/Alvin-Voo/smults/pull/3/commits/1a07dda8cde99858c4a5fc6e48b49ed8c18e5e50" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit) done at first, but afterwards it made my life easier, for example: <ol> <li>By using ESLint plugin for editor (in my case VSCode), I was able to pretty format my code with shortcut key and maintain a decent coding style/practice, thus cutting out redundant code. <li>ESLint enforces PropTypes for React (eslint-plugin-react), which I found tedious at first but afterwards I <em>get it. <li>ESLint plugin also warns of potential error <em>all the time. Since Javascript is a type-less scripting language which can be <em>molded into different frameworks, this definitely helps to pick out those easily overlooked mistakes/errors. <li>With respect to above, ESLint helped me discovered a boo-boo that I made which I kinda knew about but forgot (at <a href="https://github.com/Alvin-Voo/smults/pull/3/commits/b7e66fa106858b55552917ae4148ac0cdb858351" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit): <pre><code> dropDownAddItem = (e, d) => { const value = d.value.trim(); this.setState((prevState) => { const newTags = prevState.tagsOptions; newTags.unshift({ value, text: value }); return { tagsOptions: newTags }; }); } <p dir="auto">Which is to prevent the use of this.state value in this.setState() in the function above. Value should be taken from previous state instead because this.state might not be referencing to the current state (possibility of race condition due to batch calls of this.setState()) <h4>Unit test cases <p dir="auto"><a href="https://github.com/Alvin-Voo/smults/pull/3" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">PR #3 and <a href="https://github.com/Alvin-Voo/smults/pull/8" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">PR #8 implemented all the unit test cases as shown: <p dir="auto"><img src="https://images.hive.blog/768x0/https://user-images.githubusercontent.com/28261161/45886480-d434e280-bdeb-11e8-8bf0-c1657bece821.png" alt="t1" srcset="https://images.hive.blog/768x0/https://user-images.githubusercontent.com/28261161/45886480-d434e280-bdeb-11e8-8bf0-c1657bece821.png 1x, https://images.hive.blog/1536x0/https://user-images.githubusercontent.com/28261161/45886480-d434e280-bdeb-11e8-8bf0-c1657bece821.png 2x" /><br /> <img src="https://images.hive.blog/768x0/https://user-images.githubusercontent.com/28261161/45886482-d6973c80-bdeb-11e8-853b-73753b3a29d0.png" alt="t2" srcset="https://images.hive.blog/768x0/https://user-images.githubusercontent.com/28261161/45886482-d6973c80-bdeb-11e8-853b-73753b3a29d0.png 1x, https://images.hive.blog/1536x0/https://user-images.githubusercontent.com/28261161/45886482-d6973c80-bdeb-11e8-853b-73753b3a29d0.png 2x" /><br /> <img src="https://images.hive.blog/768x0/https://user-images.githubusercontent.com/28261161/45886487-d8f99680-bdeb-11e8-96a2-f00e3fe1472e.png" alt="t3" srcset="https://images.hive.blog/768x0/https://user-images.githubusercontent.com/28261161/45886487-d8f99680-bdeb-11e8-96a2-f00e3fe1472e.png 1x, https://images.hive.blog/1536x0/https://user-images.githubusercontent.com/28261161/45886487-d8f99680-bdeb-11e8-96a2-f00e3fe1472e.png 2x" /> <p dir="auto">Testing is pretty mundane stuff, but one cool thing I want to mention about <a href="https://jestjs.io" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Jest is it's mocking ability. It's truly unprecedented.<br /> For example, I'm stumped when I wanted to test my ScrollButton component, the button which lets user scroll all the way up to the top in an evenly speed:<br /> <img src="https://images.hive.blog/0x0/https://steemitimages.com/0x0/https://github.com/Alvin-Voo/smults/raw/master/screencast_backtotop.gif" alt="scroll" /> <p dir="auto">Luckily, Jest has <a href="https://jestjs.io/docs/en/timer-mocks" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">timer mocks which allows me to test my animation by <em>manipulating time (at <a href="https://github.com/Alvin-Voo/smults/pull/5/commits/f908e82f46dd1e7b785b288c3172ddbe6fec4f6b" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">this commit look for ScrollButton.test.js). <a href="https://www.youtube.com/watch?v=5gVv10J4nio" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Great Scott! <pre><code>describe('Scroll Up click function tests', () => { jest.useFakeTimers(); test('should trigger scrollStep function correctly', () => { // the test case before this has called click once, so clear before hand jest.clearAllTimers(); jest.clearAllMocks(); window.pageYOffset = 1000; window.scroll = jest.fn((initVal, offsetVal) => { window.pageYOffset = offsetVal; }); wrapper.simulate('click'); const intervalId = wrapper.state('intervalId'); expect(window.scroll).not.toBeCalled(); // fast forward one timer call jest.runOnlyPendingTimers(); expect(setInterval).toHaveBeenCalledTimes(1); expect(window.scroll).toHaveBeenCalledTimes(1); expect(window.scroll).toHaveBeenCalledWith(0, 1000 - 50); expect(window.pageYOffset).toBe(1000 - 50); .... <p dir="auto">This truly amazed me the first time I saw it, we could also advance time by certain milliseconds like such: <pre><code>jest.advanceTimersByTime(*some miliseconds*); <p dir="auto">Other than this, Jest also have the capabilities to mock modules, libraries, component functions.. practically anything can be <em>counterfeited for testing purpose. =D <h3>Ideas?? <p dir="auto">Well, I have pretty much implemented everything I wanted for the <em>search features now. One idea I have is to enable the route to take tags as parameters as such:<br /><br /><br /> This is enable user to post url links that refer to Smults, that says "look at this bunch of posts at steemit, this is what I'm talking about"<span> for e.g. <a href="https://smults-search.appspot.com/search?tags=tag1,tag2,tag3&filter=trending" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://smults-search.appspot.com/search?tags=tag1,tag2,tag3&filter=trending<span> or e.g. <a href="https://smults-search.appspot.com/search?tags=tag1,tag2,tag3&filter=author&author=johnny" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://smults-search.appspot.com/search?tags=tag1,tag2,tag3&filter=author&author=johnny <p dir="auto">Another thing I thought might be fun to do is to have some sort of data visualizer for a user's followers' demography, <em>including how many <em>bot followers a user has.. Of course, this will be an entirely different thing and will be in a different tab if implemented. <p dir="auto"><span>Alright, let me know if you have any ideas or issues in the comment below, or you can hit me up in discord <a href="/@alvinvoo">@alvinvoo. <h3>Github Account <p dir="auto"><span><a href="https://github.com/Alvin-Voo" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/Alvin-Voo <p dir="auto">Thanks for reading. And until next time, Full Steem Ahead!~!