The Image Comments Challenge - iOSLeadEssentials.com

It’s time to put your development skills to the test!

You are called to add a new feature to the Feed App: displaying image comments when a user taps on an image in the feed.

The goal is to implement this feature using what you learned in the program.

You'll develop the API, Presentation, and UI layers for this feature.

Important: There's no need to cache comments.

Goals

1. Display a list of comments when the user taps on an image in the feed.

2. Loading the comments can fail, so you must handle the UI states accordingly.

   • Show a loading spinner while loading the comments.

     • If it fails to load: Show an error message.

     • If it loads successfully: Show all loaded comments in the order they were returned by the remote API.

3. The loading should start automatically when the user navigates to the screen.

   • The user should also be able to reload the comments manually (Pull-to-refresh).

4. At all times, the user should have a back button to return to the feed screen.

   • Cancel any running comments API requests when the user navigates back.

5. The comments screen layout should match the UI specs.

   • Present the comment date using relative date formatting, e.g., "1 day ago."

6. The comments screen title should be localized in all languages supported in the project.

7. The comments screen should support Light and Dark Mode.

8. Write tests to validate your implementation, including unit, integration, and snapshot tests (aim to write the test first!).

9. Follow the specs below and test-drive this feature from scratch:

---

UI Specs

Follow the UI specs for loading, error, and success states:

---

BDD Specs

Story: Image Comments

Narrative

As an online customer
I want the app to load image commments
So I can see how people are engaging with images in my feed

Scenarios (Acceptance criteria)

Given the customer has connectivity
 When the customer requests to see comments on an image
 Then the app should display all comments for that image

Given the customer doesn't have connectivity
 When the customer requests to see comments on an image
 Then the app should display an error message

Use Cases

Load Image Comments From Remote Use Case

Data:

• ImageID

Primary course (happy path):

1. Execute "Load Image Comments" command with above data.
2. System loads data from remote service.
3. System validates data.
4. System creates comments from valid data.
5. System delivers comments.

Invalid data – error course (sad path):

1. System delivers invalid data error.

No connectivity – error course (sad path):

1. System delivers connectivity error.

---

Model Specs

Feed Image Comment

Property	Type
id	UUID
message	String
created_at	Date (ISO8601 String)
author	CommentAuthorObject

Feed Image Comment Author

Property	Type
username	String

Payload contract

GET /image/{image-id}/comments

200 RESPONSE

{
	"items": [
		{
			"id": "a UUID",
			"message": "a message",
			"created_at": "2020-05-20T11:24:59+0000",
			"author": {
				"username": "a username"
			}
		},
		{
			"id": "another UUID",
			"message": "another message",
			"create at": "2020-05-19T14:23:53+0000",
			"author": {
				"username": "another username"
			}
		},
		...
	]
}

Base URL

http://image-comments-challenge.essentialdeveloper.com

Feed URL

Base URL + /feed

http://image-comments-challenge.essentialdeveloper.com/feed

Image Comments URL

Base URL + /image/{image-id}/comments

http://image-comments-challenge.essentialdeveloper.com/image/{image-id}/comments

---

Instructions

• Fork the latest version of this repository. Here's how forking works.

• Use the EssentialApp/EssentialApp.xcworkspace workspace to develop this feature.

• You can develop the platform-agnostic logic in the EssentialFeed target using the macOS scheme to speed up the TDD cycle.

• Feel free to organize the 'Image Comments' feature in any way you want in the project. You can use the existing projects and targets, or create new ones if you want to.

  • If you add new projects, make sure to add them to the EssentialApp workspace.

  • If you add new targets, make sure to add them to the CI_macOS and CI_iOS schemes as needed, so we can run all tests on the CI server.

• You can see/interact with your solution by running the Application on the simulator (or device).

  • Switch to the EssentialApp scheme and press CMD+R.

• When you’re done implementing your solutions, create a Pull Request from your branch to the main challenge repo.

Before creating a Pull Request, make sure the feature works and all tests are passing by switching to the CI_iOS scheme and running the tests on your machine (CMD+U).

Guidelines

• Aim to test-first and commit your changes every time you add/alter the behavior of your system or refactor your code.
• The system should always be in a green state, meaning that in each commit, all tests should be passing.
• The project should build without warnings.
• The code should be carefully organized and easy to read (e.g., indentation must be consistent, etc.).
• Aim to create short methods.
• Aim to declare dependencies explicitly, instead of implicitly, leveraging dependency injection wherever necessary.
• Aim for descriptive commit messages that clarify the intent of your contribution, which will help other developers understand your train of thought and purpose of changes.
• Make careful and proper use of access control, marking as private any implementation details that aren’t referenced from other external components.
• Aim to write self-documenting code by providing context and detail when naming your components, avoiding explanations in comments when possible.

Happy coding!