hapramp / alpha-web Goto Github PK

This would include uploading all the images and putting in a proper structure for the posts.

The second line text, i.e. the subtitle, should be rgba(0,0,0,0.54)

Currently, the rating bar opens only on long pressing. It should also open on hovering for some time.

For example, when we include the tag #hapramp-art (i.e. the community Art is selected), we should also include #art.

In addition to simple text, the user should also be able to add a title in a short post.

The "Feed" section stays even after logout and there are consistency/style issues with rest of the components.

• Write a bit about the project.
• Include CI badge.
• Write contribution steps.

Currently, there is an input box for comment and the comment is posted on pressing Enter. It's better to have a textarea there instead and remove the functionality where Enter posts the comment.

react-autosize-textarea is already present as a dependency and can be used for this purpose.

On smaller screens, the app fails miserably. The goal is to have the app functioning well even when viewing on mobile devices.

Note: This is a parent issue and different views need to be fixed mentioning this issue.

package.json needs to be reorganized to separate different types of dependencies. For example, webpack based packages need to be moved to devDependencies.

Codecov can be used to keep track of coverage over time.

Expected behavior

If you don't include https:// within your embedded link when creating a new article a user should either be shown an error warning, it should automatically prepend https:// or https://. It should not render the 1ramp create a post page as a default link.

Actual Behaviour

If you enter a link without https:// or http:// it will not show the link that you added, instead it will show the 1ramp create a post page within the embedded link.

Steps to reproduce

1. Go to https://alpha.1ramp.io/feed/
2. Sign in using your Steem Account
3. Click the floating menu option shown in the bottom right, select article
4. Click the embedded link option shown in the editor
5. Type in www.google.co.uk
6. Note that the embedded link, does load www.google.co.uk it loads the editor.
7. Repeat step 4 and type in https://www.google.co.uk
8. Note that it loads correctly.

Environment

• Browser: Google Chrome (Version 65.0.3325.162 (Official Build) (64-bit))
• Device: MacBook Pro (Retina, 15-inch, Late 2013)
• Operating system: MacOS HighSierra Version 10.13

Recording of Issue

The following issue can be seen in the view below:

https://youtu.be/IwxxoiDYmDU

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  670.64 KB  build/static/js/main.4c339acd.js
  3.88 KB    build/scss.5c41e27c.css
  3.88 KB    build/static/css/main.5c41e27c.css

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

The bundle size has become large. The components need to be split properly in order to decrease the size and load only what's required in a view.

The votes would appear in a popup modal with the details such as username, avatar, vote % and number of stars.

Although a minor issue, It might be worth improving the overall styling of the blockquotes within the markdown editor. For example, if you use the following markdown:

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy, let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

It will show as:

however, it would be clearer that it is a quote if it displayed something similar to this:

This could be achieved with the following CSS:

    color: rgba(0,0,0,.5);
    padding-left: 1.5em;
    border-left: 5px solid rgba(0,0,0,.1)

In addition to the above CSS, the font-size assigned to <blockquote> should also be adjusted to that of the <p>

At many instances, font size if 12px (which is very small). These need to be updated to 14px.

The code is currently organized in a flat structure.

This is not really a good idea as your application will grow you will have a lot of files in this folders and it will be more and more difficult to develop.

(as pointed out by Gregory Latinier on https://busy.org/@singhpratyush/open-sourcing-hapramp-alpha-web-app-and-adding-travis-ci).

The goal is to separate the app by components.

Expected behavior

A users profile should load, a user should then be able to navigate around that profile.

Actual Behaviour

When visiting the profile for @tobias-g (https://alpha.1ramp.io/@tobias-g) the profile loads initially, but then a while screen is shown.

Steps to reproduce

1. Go to https://alpha.1ramp.io/@utopian-io
2. Note that it loads successfully.
3. Got to https://alpha.1ramp.io/@tobias-g
4. Note that it initially loads, then shows a blank screen.

Error

The following error is shown upon click of the clear button when using the editor.

react-dom.production.min.js:164 

TypeError: Cannot read property 'length' of null
    at g (index.js:25)
    at beginWork (react-dom.production.min.js:132)
    at i (react-dom.production.min.js:161)
    at a (react-dom.production.min.js:161)
    at s (react-dom.production.min.js:162)
    at w (react-dom.production.min.js:169)
    at _ (react-dom.production.min.js:168)
    at p (react-dom.production.min.js:167)
    at d (react-dom.production.min.js:165)
    at Object.enqueueSetState (react-dom.production.min.js:108)
    at l.o.setState (react.production.min.js:13)
    at l.onStateChange (connectAdvanced.js:205)
    at Object.notify (Subscription.js:26)
    at e.notifyNestedSubs (Subscription.js:65)
    at l.onStateChange (connectAdvanced.js:202)
    at Object.notify (Subscription.js:26)

Environment

• Browser: Google Chrome (Version 65.0.3325.162 (Official Build) (64-bit))
• Device: MacBook Pro (Retina, 15-inch, Late 2013)
• Operating system: MacOS HighSierra Version 10.13

I also tested this on Firefox Quantum 57.0.4 (64-bit) and the same issue takes place.

Recording of Issue

The following issue can be seen in the view below:

https://www.youtube.com/watch?v=XqQBy4RSMZQ&feature=youtu.be

The backend API already provides ways to CRUD communities for a user. The requirement is to use the API to select communities for a user from the web app.

The above margin needs to be fixed (maybe 24px).

Expected behavior

A user should be able to make a post with the same title as a previous post and the application should be able to submit via the blockchain.

Actual Behaviour

When a user attempts to submit a post within a title that has already been used previously, the application will through an error. When you create a post with the same title the application prepends the current date & time to the permlink, however the timestamp is causing an error upon submission with Steem Connect.

Steps to reproduce

1. Go to https://alpha.1ramp.io/feed/

2. Sign in using your Steem Account

3. Using the create the new article option shown within the floating menu, create a post with the title of "This is a title" and the body of "This is the body", select any category and add a tag of "test". Note that the category, body, and tag have no effect on the outcome of these tests.

4. Submit your post to the blockchain.

5. Wait 5 minutes (you can only post every 5 minutes) and then repeat steps 3 & 4.

6. Note that the platform will state that an error has occurred.

Environment

• Browser: Google Chrome (Version 65.0.3325.162 (Official Build) (64-bit))
• Device: MacBook Pro (Retina, 15-inch, Late 2013)
• Operating system: MacOS HighSierra Version 10.13

Issues Details

Upon submitting the first post, the request payload is as follows:

{"operations":[["comment",{"parent_author":"","parent_permlink":"hapramp","author":"votezilla","permlink":"this-is-a-title","title":"this is a title","body":"<p>this is a body</p>\n\n  <div id=\"1ramp-footer\" />\n  <hr>\n  <center>\n  <h4>\n  <a href=\"https://1ramp.io\">\n  <img src=\"https://ipfs.busy.org/ipfs/QmTFN4mf55SRZkP8Ug7jXVP3sXAmH7sd35zMNwLFpgGqNU\"/>\n  </a>\n  <br>\n  See this post on <a href=\"https://play.google.com/store/apps/details?id=com.hapramp\">1Ramp Android</a> and <a href=\"https://alpha.1ramp.io/@votezilla/this-is-a-title\">Web</a>.\n  </h4>\n  </center>","json_metadata":"{\"tags\":[\"hapramp\",\"hapramp-design\",\"design\"],\"app\":\"hapramp/0.0.16\"}"}]]}

This created the following post: https://alpha.1ramp.io/@votezilla/this-is-a-title

When attempting to submit a post with the same title, the following errors are shown within the console:

Error 1

steemconnect.com/api/broadcast:1
Failed to load resource: the server responded with a status of 500 ()

Error 2

actions.js:86 [CREATE POST ERROR] Error: sc2-sdk error

at o.p [as _captureStackTrace] (bluebird.js:1068)

at o._resolveFromExecutor (bluebird.js:3246)

at new o (bluebird.js:2845)

at Object.createPost (steem.js:341)

at Object.<anonymous> (actions.js:69)

at r (runtime.js:62)

at Generator._invoke (runtime.js:296)

at Generator.e.(anonymous function) [as next] (https://alpha.1ramp.io/static/js/main.3492e6e4.js:1:1732164)

at r (main.3492e6e4.js:56758)

at main.3492e6e4.js:56758

Within the response from SteemConnect the following error is provided:

{"error":"server_error","error_description":"false: Invalid permlink character: T"}

The following request payload was used in the above request:

{"operations":[["comment",{"parent_author":"","parent_permlink":"hapramp","author":"votezilla","permlink":"20181202T132132047Z-this-is-a-title","title":"this is a title","body":"<p>this is a body</p>\n\n <div id=\"1ramp-footer\" />\n <hr>\n <center>\n <h4>\n <a href=\"https://1ramp.io\">\n <img src=\"https://ipfs.busy.org/ipfs/QmTFN4mf55SRZkP8Ug7jXVP3sXAmH7sd35zMNwLFpgGqNU\"/>\n </a>\n <br>\n See this post on <a href=\"https://play.google.com/store/apps/details?id=com.hapramp\">1Ramp Android</a> and <a href=\"https://alpha.1ramp.io/@votezilla/20181202T132132047Z-this-is-a-title\">Web</a>.\n </h4>\n </center>","json_metadata":"{\"tags\":[\"hapramp\",\"hapramp-design\",\"design\"],\"app\":\"hapramp/0.0.16\"}"}]]}

If you compare the request payload for both the posts, you can see when you attempt to create a post that has the same title, a time stamp is being prepended to the permlink. Once the the time stamp has been prepended the permlink link should be lowercased using toLowerCase()

Recording of Issue

The following issue can be seen in the view below:

https://www.youtube.com/watch?v=xL4HQonsKB0&feature=youtu.be

meta tags help in better representation of a page over the Internet.

We can add these tags in many places throughout the application - primarily posts, competitions, and communities.

react-helmet is the perfect library to use for this purpose.

There are two major issue in the app right now -

1. Posting key is being stored in localstorage. This is not good as user's posting key can be stolen this way.

2. The login flow currently consists of creating a comment with a key and deleting it when it gets verified by the backend. This is an unnecessary step.

The above two and many more issues can be solved by using SteemConnect.

As of now, the earnings are shown in the format 28.355 SBD. We need to show 28.355 only.

Here is the desired format -

{
  "json_metadata": {
    "app": "hapramp/x.x.x",
    "format": "markdown",
    "tags": ["xxx", "yyy", "zzz"],
    "image": ["xxx", "yyy", "zzz"],
    "users": ["xxx", "yyy", "zzz"],
    "links": ["xxx", "yyy", "zzz"],
  }
}

The header already contains a button to trigger a search. Use the same to allow to search for users.

This would come along with the WYSIWYG editor. There should be preview rendered in the below section.

As of now, there is no loading indicator. The aim is to have a skeleton placeholder for the posts.

In the post body, there is no special indication for links.

It should have a different color so that readers can distinguish it from plain text.

Expected behavior

Upon creating a new post the front end should show that the title has a max length or it should be sliced upon submission via Steem connect.

Actual Behaviour

Upon creating a post if the title is greater than 256 characters, an error will be thrown by SteemConnect.

Steps to reproduce

1. Go to https://alpha.1ramp.io/feed/
2. Sign in using your Steem Account
3. Click the floating menu option shown in the bottom right, select article
4. Create a title with over 256 for example "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, s"
5. Enter the body as "This is the body", the category as "Fashion" and the tag as "test".
6. Submit the post to blockchain and note error.

Environment

• Browser: Google Chrome (Version 70.0.3538.110 (Official Build) (64-bit))
• Device: MacBook Pro (Retina, 15-inch, Late 2013)
• Operating system: MacOS Mojave Version 10.14.1

Issue & Resolution

Upon submitting the post the blockchain the following error is shown for SteemConnect:

{"error":"server_error","error_description":"title.size() < 256: Title larger than size limit"}

using the following request:

{"operations":[["comment",{"parent_author":"","parent_permlink":"hapramp","author":"votezilla","permlink":"lorem-ipsum-dolor-sit-amet-consectetuer-adipiscing-elit-aenean-commodo-ligula-eget-dolor-aenean-massa-cum-sociis-natoque","title":"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, s","body":"<p>test</p>\n\n  <div id=\"1ramp-footer\" />\n  <hr>\n  <center>\n    <h4>\n      <a href=\"https://1ramp.io\">\n        <img src=\"https://ipfs.busy.org/ipfs/QmTFN4mf55SRZkP8Ug7jXVP3sXAmH7sd35zMNwLFpgGqNU\"/>\n      </a>\n      <br>\n      See this post on <a href=\"https://play.google.com/store/apps/details?id=com.hapramp\">1Ramp Android</a> and <a href=\"https://alpha.1ramp.io/@votezilla/lorem-ipsum-dolor-sit-amet-consectetuer-adipiscing-elit-aenean-commodo-ligula-eget-dolor-aenean-massa-cum-sociis-natoque\">Web</a>.\n    </h4>\n  </center>","json_metadata":"{\"tags\":[\"hapramp\",\"hapramp-photography\",\"photography\"],\"app\":\"hapramp/0.0.18\"}"}]]}

The title should be set have validation rules that only allow a user to enter 256 characters, alternatively a temporary quick resolution would be to .slice(0,255) the title and permlink prior to submission to the blockchain.

To be implemented after integrating SteemConnect (#3)

In the competition creation UI, most of the fields are required while some are optional.

Having an asterisk with required fields would make the difference clearer to the users.

The flow would be similar as that in the Android App.

Will try to add mockups if possible.

While searching, capital case letters result in an issue where the rest of the search terms are ignored.

The input box should automatically transform capital case characters to small case.

Currently, when a post with an image is created, no progress bar is shown. The expected behavior is having a progress bar while uploading the image.

Expected behavior

A user should be able to submit a comment for any given post.

Actual Behaviour

When attempting to comment on a post, the comment is not submitted to the blockchain.

Steps to reproduce

1. Go to https://alpha.1ramp.io/feed/
2. Sign in using your Steem Account
3. Go to https://alpha.1ramp.io/@ceeka-dacrafta/hb1jnkc00b4ddp6oq12wkamr55wkzmgg4hra1x2huqrzybrvm0gyv33amtss002t20181130100307
4. At the bottom, a comment bar is shown. Within the comment bar, attempt to submit a comment. For example "Test Comment"
5. Click send on the comment.
6. Note that the comment is not submitted to the blockchain.

Environment

• Browser: Google Chrome (Version 65.0.3325.162 (Official Build) (64-bit))
• Device: MacBook Pro (Retina, 15-inch, Late 2013)
• Operating system: MacOS HighSierra Version 10.13

Issues Details

The following error is shown within the console:

steemconnect.com/api/broadcast:1 

Failed to load resource: the server responded with a status of 500 ()

Within the response from SteemConnect the following error is provided:

{"error":"server_error","error_description":"permlink.size() > STEEM_MIN_PERMLINK_LENGTH && permlink.size() < STEEM_MAX_PERMLINK_LENGTH: Permlink is not a valid size."}

The following request payload was used in the above request:

{"operations":[["comment",{"parent_author":"","parent_permlink":"","author":"tobias-g","permlink":"re---20181201t043845449z","title":"","body":"test comment","json_metadata":"{\"app\":\"hapramp/0.0.16\"}"}]]}

Recording of Issue

The following issue can be seen in the view below:

https://www.youtube.com/watch?v=3fpZrtEIoUg&feature=youtu.be