We currently have no error page and non-existent urls result in a blank page.

We should add an error route see like here and an error template like here (yes it looks awful)

Want to write a test?

• Acceptance: nonsensical URL results in error page showing

Features

• Button which deletes the article
• Should only be shown if the current user is the article author

Want to write tests?

• Integration: Button is only shown for the logged in article author
• Acceptance: Clicking the button deletes the article and navigates to the homepage

Hello!

Due to governance changes, we are now using the realworld.io domain for the RealWorld demo (both client and API).
Requests from conduit.productionready.io are redirected to api.realworld.io, but such a redirection might lead to inconsistent responses.

We encourage domain change for the community.
If this repository is maintained anymore, we'll consider hosting a demo of your implementation in a few weeks with the domain change.

The demo link will be added to the RealWorld documentation.

New version is out.
Makes sense to upgrade to it.

Similar to #52

Im using Ember Realworld with Adonis realworld as backend, When they registrate, login and edit their account it works ok, but when it creates a new article the server returns a 500 code with the following message

{ message: "insert into articles (author, body, createdAt, description, slug, title, updatedAt, user_id) values (NULL, 'This is the content', '2021-05-16 01:39:07.272', 'This is the subtitle', 'this-is-the-title', 'This is the title', '2021-05-16 01:39:07.272', 1) - SQLITE_ERROR: table articles has no column named author", name: "Error", status: 500, … }

It seems that the frontend doesn't send the user id (and neither the createdAt date) to the backend when inserts a new article

From @alexlafroscia on April 23, 2017 22:0

Since it would be great to have a solid test suite here, we should mock out the API using Mirage. The API is pretty simple so this should be a good task for someone that's looking for some low-hanging fruit.

Copied from original issue: Alonski/realworld-ember#8

Features

• Disable button if the model isn't dirty
• Save the article
• If a successful save and it's a new article, redirect to the article edit page passing this model
• Navigating away from an unsaved model warns the user they will lose unsaved changes. If confirmed either unload the record (i.e. new post) or rollback the changed attributes (i.e. existing article)

Want to write tests?

• Integration: Submit button is disabled if model isn't dirty
• Integration: Hitting submit makes the correct response to save the model
• Acceptance: Saving a new post redirects to the editing article page

I'd like to propose that we split the main user model into two models: user and profile. They are very similar but serve two subtly different roles.

• user - The current user. Can be used to tell if a user is logged in or not. Can be used on the settings page to edit a user's properties. Can grab the logged in user's article feed.
• profile - Similar to a user but more to do with authors of articles. They can be followed, have their articles favorited/unfavorited.

My reasoning? While I initially tried to use the same model in the Octane version of the app, this abstraction broke down when I needed use the same model between the settings page and article list/profile pages. (Octane repo: Profile, User)

The profile model has the username as the primary key for identifying a user, they have no other unique identifier.

But then when editing the user we need to be able to edit the user's username. This is not possible as we are trying to treat this property as the primary key for the profile. Also the /user endpoint returns a unique integer identifier as well as the username.

Here are some sample payload responses from the API.

// User
{
  "user": {
    "id": 52999,
    "email": "[email protected]",
    "createdAt": "2019-03-31T00:15:23.573Z",
    "updatedAt": "2019-04-05T07:25:08.330Z",
    "username": "someusername",
    "bio": null,
    "image": "https://s3.amazonaws.com/uifaces/faces/twitter/yoyoyo/128.jpg",
    "token": "eyJ0eXAiOiJKV1..........."
  }
}

// Profile
{
  "username": "lifelonglearner123",
  "bio": null,
  "image": "https://static.productionready.io/images/wat-yo.jpg",
  "following": false
}

What do you folks think?

/cc @Alonski @mansona

Follow-up issue to #99 to allow us to discuss without having to focus on the code changes.

Originally it was discussed that Ember Realworld would show how to build a Ember Classic application. A new separate app was then spun up which outlined how to build the RealWorld app using Ember Octane.

But it has since been suggested that these Ember apps should not be separate and should just be merged into this Ember RealWorld app. The thinking is that Ember Octane is not a separate framework but rather just an updating of syntax and the programming model.

Conversation from Discord below:

/cc @mansona @Alonski @GCheung55 @trek

We should able to follow/unfollow a user's profile

Features

• Unfollowed state
  

• Followed state
  

API

Follow user

POST /api/profiles/:username/follow

Authentication required, returns a Profile

No additional parameters required

Unfollow user

DELETE /api/profiles/:username/follow

Authentication required, returns a Profile

No additional parameters required

Tests

• Integration - Initial follow/unfollowed state
• Integration - Follow profile and state should change
• Integration - Unfollow profile and state should change

Ember.js is often called out on having a large filesize. I'm wondering if ember-concurrency can be removed in order to reduce the vendor.js filesize.

I understand that it's useful for dropping tasks to prevent multiple executes of a task when a task is already being performed. Perhaps there's an alternative to using a task that can be leveraged?

Similar to this:
https://github.com/patocallaghan/realworld-starter-kit/blob/master/app/services/session.js

Implement the "Your feed" section on the article list on the Homepage.

Features:

• Hidden when logged out
• Appears when when logged in
• Active/disabled state
• ?feed=your query param
• User feed endpoint

Want to write tests?

• Acceptance: Logged in it shows
• Acceptance: Logged out it doesn't
• Acceptance: Switching from global feed to your feed should 1) work 2) make the right request 3) render the right content 4) have the correct url

From @Alonski on April 24, 2017 10:42

We should be using ESLint and Prettier +- Standard to format our Javascript.
If we need custom CSS we can use stylelint and stylefmt.
Maybe using SASS instead of plain CSS

Copied from original issue: Alonski/realworld-ember#10

We should have the ability to favorite/unfavorite articles

Features:

• Unfavorited state
• Favorited state
• Click to favorite
• Click to unfavorite
• Count should increment/decrement when you favorite/unfavorite

Unfavorited

Favorited

Want to write tests?

• Integration: Click to favorite, state change, count increments
• Integration: Click to unfavorite, state change, count increments

While I understand the value-add of Mirage in the development environment, especially when APIs are not built, in my opinion we don't really need it here. The API provided by gothinkster is feature-complete and I've never had any issues with it in development.

I find in my own development in this repo I'm always disabling it but reverting that change before committing.

Upsides:

• gothinkster API is feature complete
• Working against a live API so we won't miss anything in our mocks

Downsides:

• Can't develop if network is down
• We need to create the mocks anyway for testing

I'd be interested in hearing your thoughts.

/cc @Alonski @delusioninabox @mansona

Currently, our Lighthouse score is quite low: 61 in Incognito.

According to this blog post some of the RealWorld examples have a score of 99:
https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/

We should work to improve our score. I am sure that there are low hanging tasks that we can do to increase this.

Here is the full report that I generated:
Lighthouse Report.pdf

Features

• Move app/templates/settings.hbs template content into a {{settings-form}} component
• Make sure all fields are bound to the user model
• Disable the button unless the model is dirty
• Make the submit button work
• Navigating away from the page should revert model change (see https://github.com/patocallaghan/realworld-starter-kit/blob/4611cda2c1b9f391f976b111e2e23a833d3dd00c/app/components/settings-form.js#L8-L13)

API

Update user

PUT /api/user

Example request body:

{
  "user":{
    "email": "[email protected]",
    "bio": "I like to skateboard",
    "image": "https://i.stack.imgur.com/xHWG8.jpg"
  }
}

Authentication required, returns the User

Accepted fields: email, username, password, image, bio

This should be handled by user.save().

Tests

• Integration - Submit button is disabled until content is changed
• Integration - Updating content sends the correct http requests

Octane example: https://github.com/patocallaghan/realworld-starter-kit/blob/4611cda2c1b9f391f976b111e2e23a833d3dd00c/app/templates/components/settings-form.hbs

Similar to #51

Features

• display errors on the page

Want to write tests?

• Integration: submit invalid data and errors are shown

Example from Octane app: https://github.com/patocallaghan/realworld-starter-kit/blob/4611cda2c1b9f391f976b111e2e23a833d3dd00c/app/templates/components/settings-form.hbs#L3-L9

Features

• Make the log out button work, i.e. this.session.logOut()
• Redirect to the homepage afterwards on a successful response

Tests

• Acceptance - log out and redirects to the homepage

From @Alonski on April 27, 2017 17:12

Create model for comments
Make it a hasMany on articles? #13

Copied from original issue: Alonski/realworld-ember#19

Features

• Component with form fields and submit button
• Title, description, content (markdown), tags
• Form should work in two scenarios
  • article model passed in i.e. editing an existing article
  • no article passed in, create record on init if none passed in, i.e. new article
• Tag list can be entered as a space separated list
• Form should appear on the "New article" and "Edit article" pages

Features

• Render the markdown from the article as HTML
• Use marked npm library to render the markdown
• Sanitize the content and then use htmlSafe. See Octane version here

For better encapsulation we should add this behaviour to the article model.

Want to write tests?

• Model unit: marked computed property generates the correct HTML
• Integration: Markdown is rendered as HTML on the page correctly

From @Alonski on April 23, 2017 7:12

Need to create issues for all the features that need to be in this to comply with the realworld.

Copied from original issue: Alonski/realworld-ember#1

On an author's profile page we should be able to favorite/unfavorite articles

This should just start working when this is made to work in #46 from the homepage.

But worth calling out to verify that is actually the case

https://ember.realworld.io/

Seeing a lot of 404's on the assets

Features

• Display submit errors

Want to write tests?

• Integration: displays errors if save returns errors

It would be great to be able to turn on CI for our tests/linting. I believe there may be issues due to the repo being in the gothinkster org but we can see.

/cc @Alonski

Currently we use lots of controllers + templates but we should defer to use components where we can.

We should componentize the top-nav to be a component rather have it directly in the template.

Example from the Octane repo: https://github.com/patocallaghan/realworld-starter-kit/blob/master/app/templates/components/nav.hbs

Wanna write some tests:

• Component integration test: Logged in vs logged out state

Logged out

Logged in

From @Alonski on April 27, 2017 17:8

Create model for tags
Use it in articles model as a hasMany #13

Copied from original issue: Alonski/realworld-ember#17

@Alonski I noticed in #112 that we don't have CI enabled. We had a linting error but the status checks were 🟢

Any chance you could enable it please or is that something I can do?

Features

• Render comments at the bottom of the article
• Comments should load async, i.e. kick off a fetch on init

See similar implementation in the Octane version here

Feature

• Comment field
• disable 'post comment' button when textarea is empty
• It is only shown to logged in users

API

Add Comments to an Article
POST /api/articles/:slug/comments

Example request body:

{
  "comment": {
    "body": "His name was my name too."
  }
}

Authentication required, returns the created Comment

Required field: body

Want to write tests?

• Integration: button is disabled when no content
• Integration: Posting comment sends the correct HTTP request
• Integration: Comment form is only visible when logged in

From @Alonski on April 24, 2017 14:6

Create model for article
Use it for feed articles

Need to add pagination this using:
Ember-Impagination, Ember-Concurrency, Ember-Collection, Route-Actions etc

Copied from original issue: Alonski/realworld-ember#13

Features

• Button which deletes the comment
• Should only be shown if the current user is the comment author

Want to write tests?

• Integration: Button is only shown for comment authors
• Acceptance: Clicking the button deletes the article and redirects to the homepage

Features

• Button which links to the article edit page
• Should only be shown if the current user is the article author

Want to write tests?

• Integration: Button is only shown for logged in users
• Acceptance: Clicking the button navigates to the edit article page

Currently the logo in the top left is linking to index.html.

It should be converted to a link-to and link to 'home'. The link should also set the default query params, i.e. tag=null, page=1 etc

Currently we use lots of controllers + templates but we should defer to use components where we can.

We should componentize the footer to be a component rather have it directly in the template.

Example from the Octane repo: https://github.com/patocallaghan/realworld-starter-kit/blob/master/app/templates/components/footer.hbs

Footer

Currently the tag list is showing tags from all articles loaded. This is due to the tag-list finding all tags, which returns a live array.

An article has a hasMany relationship with tags, so every time an article is fetched and it has tags, the live array will include it.

Need to get the article Data and use it to dynamically show the page.
Currently is a static template.

From @Alonski on April 24, 2017 10:59

Need to create a component for each post and use that in the feed

Copied from original issue: Alonski/realworld-ember#11

Current follow/unfollow buttons are not components so there’s a bit of duplication.

Currently points to a static template.
Need to build to get the Data for the specific profile and show everything related to it