create account

[Steemia] - Comments in tree structure, replies, and more by jaysermendez

View this thread on: hive.blogpeakd.comecency.com
· @jaysermendez ·
$143.20
[Steemia] - Comments in tree structure, replies, and more
#### Repository and Pull Requests
https://github.com/Steemia/Steemia
https://github.com/Steemia/Steemia/pull/66

#### About Steemia
Steemia is a social network app running over the Steem Blockchain. This app will provide the users an enriched user experience plus features commonly encountered in a casually used social media. The goal of this project is to give the community a mobile app where they can do their daily activity in the blockchain.

#### Bug Fixes (caused by third party dependencies) 
- Token not being saved if user's device is not secured
Due to an error with a third party plugin, tokens were not able to be saved in localstorage if the user's device didn't have a password. To workaround this, I've decide to remove the plugin and use the standard method meanwhile.

Here is the url for the third party plugin used before https://github.com/Crypho/cordova-plugin-secure-storage

#### Bug Fixes (not caused by third party dependencies)

- Comments cannot be edited
Our input had a max length. When an user tried to edit a post with exceed the max length, it will not allow the user to perform any action in this input. To solve this, we've just removed the max-length property in the input allowing the user to write freely.

- Transparent toolbar in some devices
After seeing a video from one of our users reporting a bug, we noticed something interesting. The toolbar with options to create a post was half transparent (weird because in my device it did show correctly). However, after looking through Ionic forums, I realized that I was missing te <ion-toolbar> tag in the footer in order to have a background in it.

- App frozen after inserting a whitespace as tag
We have to admit that we didn't think about this edge case when we were validating the user input in the tags input. A single whitespace was breaking the app. In order to resolve this, we just add a trim() function to remove any extra empty space in the user input.

#### New Features

- Show videos in comments and posts
Now videos can be seem directly from our app. We do not longer just show the url of the video but the player itself :D

![Screen Shot 2018-05-08 at 4.00.36 AM.png](https://steemitimages.com/DQmXDYnDLsVYyJytF3ZmRrZdJqKMDVvkwHpMy5MaAdgQeFn/Screen%20Shot%202018-05-08%20at%204.00.36%20AM.png)

- Retry http calls up to three times
In order to help slow internet connections, we decide to give three http calls before rejecting a promise with an error. So, if an end user is not able to get the data at first intent, they will have two more chances until the promise is rejected.

- Organize comments in a tree view
We have to admit that implementing this feature was challenging in both client side and server side. In server side, we had to recursively collect all the replies of n depth in the tree until n is equal to 0. In client side, we had to recursively render a template by using a createEmbeddedView. We ended up with the following code:

```
<ul class="pad">
      <ng-template #recursiveComments let-commentsTree>
            <li *ngFor="let item of commentsTree">
                  <render-comment [comment]="item"></render-comment>
                  <ul *ngIf="item.replies.length > 0">
                        <ng-container *ngTemplateOutlet="recursiveComments; context:{ $implicit: item.replies }"></ng-container>
                  </ul>
             </li>
      </ng-template>
      <ng-container *ngTemplateOutlet="recursiveComments; context:{ $implicit: commentsTree }"></ng-container>
</ul>
```

In the code above, it will recreate a nice tree of li and ul tags with the comment inside each of them with the proper indentation and here is the result:

![Screen Shot 2018-05-08 at 4.09.06 AM.png](https://steemitimages.com/DQmdhDFSR9E24c7egCrnBTrDLwUT1fdNnqx2gwHSQ7Crxrz/Screen%20Shot%202018-05-08%20at%204.09.06%20AM.png)

- Ability to reply to comments
Before we had a mess with comments. Comments were showing in a really weird order and users were not able to reply to them. Now, there is a reply option that you can use to reply to that specific comment:

![Screen Shot 2018-05-08 at 4.11.01 AM.png](https://steemitimages.com/DQmTmjBMuhhFGfLpChTm4P1kzFbevuDQvUsDr8CqL9PXLXS/Screen%20Shot%202018-05-08%20at%204.11.01%20AM.png)

#### Misc changes
- Manual detect changes in big pages
Even we are manually detecting changes in feed pages, we had to do the same for big pages like post single page. By letting Angular detect every single change on scroll, it will drastically decrease the performance since not events will occur in realtime other than notifications which are triggered manually for changes detection. By telling Angular when a data will change, it drastically improved the performance due to the lower rate of calculations in the UI.

#### On Next
Stay alert because a new feature is also on its way 😎Steemia will be speaking more languages in few days :D

- Localization & Internationalization 🏁
- Push Notifications
- Filtering by Tags
- Chat Implementation
- iOS Release

#### How to contribute?
Fork the [Steemia Repository](https://github.com/Steemia/Steemia) and send us a pull request with your changes.
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
πŸ‘Ž  
properties (23)
authorjaysermendez
permlinksteemia-comments-in-tree-structure-replies-and-more
categoryutopian-io
json_metadata{"tags":["utopian-io","development","steemia","steemdev","steemapps"],"image":["https://steemitimages.com/DQmXDYnDLsVYyJytF3ZmRrZdJqKMDVvkwHpMy5MaAdgQeFn/Screen%20Shot%202018-05-08%20at%204.00.36%20AM.png","https://steemitimages.com/DQmdhDFSR9E24c7egCrnBTrDLwUT1fdNnqx2gwHSQ7Crxrz/Screen%20Shot%202018-05-08%20at%204.09.06%20AM.png","https://steemitimages.com/DQmTmjBMuhhFGfLpChTm4P1kzFbevuDQvUsDr8CqL9PXLXS/Screen%20Shot%202018-05-08%20at%204.11.01%20AM.png"],"links":["https://github.com/Steemia/Steemia","https://github.com/Steemia/Steemia/pull/66","https://github.com/Crypho/cordova-plugin-secure-storage"],"app":"steemit/0.1","format":"markdown"}
created2018-05-08 08:17:24
last_update2018-05-08 08:17:24
depth0
children14
last_payout2018-05-15 08:17:24
cashout_time1969-12-31 23:59:59
total_payout_value107.863 HBD
curator_payout_value35.337 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length5,156
author_reputation20,790,862,502,465
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,527,398
net_rshares29,848,245,470,286
author_curate_reward""
vote details (33)
@arcange ·
**WARNING** - The message you received from @nkereuwem is a **CONFIRMED SCAM**!
**DO NOT FOLLOW** any instruction and **DO NOT CLICK** on any link in the comment!

For more information, read this post:
https://steemit.com/steemit/@arcange/phishing-site-reported-steemautobot-dot-ml

If you find my work to protect you and the community valuable, please consider to upvote this warning or to [vote for my witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=arcange&approve=1).
πŸ‘  
properties (23)
authorarcange
permlinkre-steemia-comments-in-tree-structure-replies-and-more-20180508t101852000z
categoryutopian-io
json_metadata{"image":["http://i.cubeupload.com/d1Dr28.png"]}
created2018-05-08 08:18:48
last_update2018-05-08 08:18:48
depth1
children0
last_payout2018-05-15 08:18:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length500
author_reputation1,146,633,660,232,745
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,527,580
net_rshares2,765,373,933
author_curate_reward""
vote details (1)
@codingdefined ·
Thank you for your contribution. It feels good to see a project evolving at a fast pace. Its better if you can link your app in every post, in that way its easier for people to find it.

Also, it would be better if you can write comments inside the code where you have written complex logic which helps the users to go through the flow. A documentation will also help people who wanted to learn the development.

----------------------------------------------------------------------
Need help? Write a ticket on https://support.utopian.io.

Chat with us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://join.utopian.io)**
πŸ‘  
properties (23)
authorcodingdefined
permlinkre-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180509t113358665z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://support.utopian.io","https://discord.gg/uTyJkNm","https://join.utopian.io"],"app":"steemit/0.1"}
created2018-05-09 11:33:57
last_update2018-05-09 11:33:57
depth1
children1
last_payout2018-05-16 11:33:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length647
author_reputation532,126,252,586,750
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,736,898
net_rshares2,591,031,765
author_curate_reward""
vote details (1)
@jaysermendez ·
Sure :D will follow your suggestions :D
properties (22)
authorjaysermendez
permlinkre-codingdefined-re-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180509t121834034z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-05-09 12:18:33
last_update2018-05-09 12:18:33
depth2
children0
last_payout2018-05-16 12:18:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length39
author_reputation20,790,862,502,465
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,742,730
net_rshares0
@jtomes123 ·
Upvote
Hi, I really like your content have an upvote.
properties (22)
authorjtomes123
permlinksteembot-upvote-jtomes123-20180508t094600747z
categoryutopian-io
json_metadata{"tags":["upvote","bot"],"app":"steemBot"}
created2018-05-08 09:46:00
last_update2018-05-08 09:46:00
depth1
children0
last_payout2018-05-15 09:46:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length46
author_reputation3,939,014,596,248
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,538,560
net_rshares0
@mayowadavid · (edited)
Hello whats wrong i have been getting this error for a very long time
![Screenshot_20180508-212434.png](https://steemitimages.com/DQmZRKwdyCa7TuZdXaPfGKd37QZAAjZQpYdsDwwQ7jkCxNz/Screenshot_20180508-212434.png)
properties (22)
authormayowadavid
permlinkre-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180508t202524981z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"image":["https://steemitimages.com/DQmZRKwdyCa7TuZdXaPfGKd37QZAAjZQpYdsDwwQ7jkCxNz/Screenshot_20180508-212434.png"],"app":"steemit/0.1"}
created2018-05-08 20:25:30
last_update2018-05-08 20:30:54
depth1
children4
last_payout2018-05-15 20:25:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length209
author_reputation7,803,610,719,182
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,630,692
net_rshares0
@jaysermendez ·
Hello,

Did you update the app? It was solved in the last version weeks ago :D
properties (22)
authorjaysermendez
permlinkre-mayowadavid-re-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180508t204813586z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-05-08 20:48:15
last_update2018-05-08 20:48:15
depth2
children3
last_payout2018-05-15 20:48:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length78
author_reputation20,790,862,502,465
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,633,590
net_rshares0
@mayowadavid ·
I will go and do that now.
properties (22)
authormayowadavid
permlinkre-jaysermendez-re-mayowadavid-re-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180508t210751251z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-05-08 21:07:57
last_update2018-05-08 21:07:57
depth3
children2
last_payout2018-05-15 21:07:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length26
author_reputation7,803,610,719,182
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,635,949
net_rshares0
@nkereuwem ·
hey you must try this they are offering free 30 days upvote service for limited time. i am using it for 2 weeks, They upvote my every new post [Click here to see the offer](https://t.co/1DyxseJL8r)
πŸ‘Ž  ,
properties (23)
authornkereuwem
permlinkre-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180508t081736632z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://t.co/1DyxseJL8r"],"app":"steemit/0.1"}
created2018-05-08 08:17:45
last_update2018-05-08 08:17:45
depth1
children0
last_payout2018-05-15 08:17:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length197
author_reputation-717,888,124,626
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,527,434
net_rshares-32,159,283,167
author_curate_reward""
vote details (2)
@researchgeek ·
Would love to use the app. just much easier on a desktop lol @jaysermendez
properties (22)
authorresearchgeek
permlinkre-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180508t081933032z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["jaysermendez"],"app":"steemit/0.1"}
created2018-05-08 08:19:33
last_update2018-05-08 08:19:33
depth1
children1
last_payout2018-05-15 08:19:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length74
author_reputation9,103,472,766,284
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,527,679
net_rshares0
@jaysermendez ·
What do you mean?
properties (22)
authorjaysermendez
permlinkre-researchgeek-re-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180508t082124572z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-05-08 08:21:24
last_update2018-05-08 08:21:24
depth2
children0
last_payout2018-05-15 08:21:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length17
author_reputation20,790,862,502,465
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,527,931
net_rshares0
@steembottrackerr ·
<center>https://steemitimages.com/200x200/https://s-media-cache-ak0.pinimg.com/originals/81/28/3c/81283c6aed7bdb5b9f8ad73b8ce62c2f.jpg</center>
---
<center>Hello @jaysermendez , Congratulations βœ… . Your content began to appear in the hot section.
I am the information account of "SteemBotTracker" site.
</center>
---
<center>
Your Informations
Total SBD: 2.582
Total STEEM: 501.359
</center>
---
<center>
I recommend to increase this;
You can make "Resteem" and advertise to the followers of the whale accounts.
"Resteem Bot" for you;
βœ… The most profitable Resteem Whale @byresteem  has 25.500 Followers + 7000 Sp + Upvote with min +55 accounts. 
</center>
---
<center>
You can purchase "upvote" by bid bots.
"Upvote Bot"
βœ… The most profitable whale in the last round. @smartsteem
</center>
---
<center>
I'm taking this message once. You need to use the #steembottrackerr tag for more information.
Those who "upvote" this interpretation will be awarded a "UpVote" prize of 100 Sbd per week per person.
I am a bot, I can not answer the comment. I hope I could help. Good luck. Sorry if I disturbed you.
</center>
properties (22)
authorsteembottrackerr
permlink20180523t063854955z
categoryutopian-io
json_metadata{"tags":["advice"],"app":"steemjs/test"}
created2018-05-23 06:38:57
last_update2018-05-23 06:38:57
depth1
children0
last_payout2018-05-30 06:38:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,140
author_reputation-1,493,369,324,060
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id57,214,145
net_rshares0
@utopian-io ·
Hey @jaysermendez 
**Thanks for contributing on Utopian**. 
We're already looking forward to your next contribution! 

**Contributing on Utopian**
Learn how to contribute on <a href="https://join.utopian.io">our website</a> or by watching <a href="https://www.youtube.com/watch?v=8S1AtrzYY1Q">this tutorial</a> on Youtube.

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

<a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for Utopian Witness!</a>
properties (22)
authorutopian-io
permlinkre-jaysermendez-steemia-comments-in-tree-structure-replies-and-more-20180509t134321339z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"users":["jaysermendez"],"links":["https://join.utopian.io","https://www.youtube.com/watch?v=8S1AtrzYY1Q","https://discord.gg/h52nFrV","https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1"],"app":"steemit/0.1"}
created2018-05-09 13:43:21
last_update2018-05-09 13:43:21
depth1
children0
last_payout2018-05-16 13:43:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length512
author_reputation152,955,367,999,756
root_title"[Steemia] - Comments in tree structure, replies, and more"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id54,756,325
net_rshares0