Modernize the application & Performance tweaks

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -5,6 +5,7 @@ node_modules
 
 # testing
 coverage
+.nyc_output
 
 # production
 build
@@ -13,4 +14,9 @@ build
 .DS_Store
 .env
 npm-debug.log
-.idea
+.idea
+
+.eslintcache
+
+cypress/videos
+cypress/screenshots

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

README.md

@@ -1,21 +1,21 @@
 # ![React + Redux Example App](project-logo.png)
-
+[![Netlify Status](https://api.netlify.com/api/v1/badges/aa569c8f-ebd5-413e-9fb2-e34facc71873/deploy-status)](https://app.netlify.com/sites/react-redux-realworld/deploys)
 [![RealWorld Frontend](https://img.shields.io/badge/realworld-frontend-%23783578.svg)](http://realworld.io)
 
 > ### React + Redux codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld-example-apps) spec and API.
 
 <a href="https://stackblitz.com/edit/react-redux-realworld" target="_blank"><img width="187" src="https://github.com/gothinkster/realworld/blob/master/media/edit_on_blitz.png?raw=true" /></a>&nbsp;&nbsp;<a href="https://thinkster.io/tutorials/build-a-real-world-react-redux-application" target="_blank"><img width="384" src="https://raw.githubusercontent.com/gothinkster/realworld/master/media/learn-btn-hr.png" /></a>
 
-### [Demo](https://react-redux.realworld.io)&nbsp;&nbsp;&nbsp;&nbsp;[RealWorld](https://github.com/gothinkster/realworld)
+### [Demo](https://react-redux-realworld.netlify.app/)&nbsp;&nbsp;&nbsp;&nbsp;[RealWorld](https://github.com/gothinkster/realworld)
 
 Originally created for this [GH issue](https://github.com/reactjs/redux/issues/1353). The codebase is now feature complete; please submit bug fixes via pull requests & feedback via issues.
 
-We also have notes in [**our wiki**](https://github.com/gothinkster/react-redux-realworld-example-app/wiki) about how the various patterns used in this codebase and how they work (thanks [@thejmazz](https://github.com/thejmazz)!)
+We also have notes in [**our wiki**](https://github.com/khaledosman/react-redux-realworld-example-app/wiki) about how the various patterns used in this codebase and how they work (thanks [@thejmazz](https://github.com/thejmazz)!)
 
 
 ## Getting started
 
-You can view a live demo over at https://react-redux.realworld.io/
+You can view a live demo over at https://react-redux-realworld.netlify.app/
 
 To get the frontend running locally:
 
@@ -29,11 +29,11 @@ Alternatively, you can add `.env` file in the root folder of project to set envi
 
 ### Making requests to the backend API
 
-For convenience, we have a live API server running at https://conduit.productionready.io/api for the application to make requests against. You can view [the API spec here](https://github.com/GoThinkster/productionready/blob/master/api) which contains all routes & responses for the server.
+For convenience, we have a live API server running at https://api.realworld.io/api for the application to make requests against. You can view [the API spec here](https://github.com/GoThinkster/productionready/blob/master/api) which contains all routes & responses for the server.
 
 The source code for the backend server (available for Node, Rails and Django) can be found in the [main RealWorld repo](https://github.com/gothinkster/realworld).
 
-If you want to change the API URL to a local server, simply edit `src/agent.js` and change `API_ROOT` to the local server's URL (i.e. `http://localhost:3000/api`)
+If you want to change the API URL to a local server, start/build the app with the REACT_APP_BACKEND_URL environment variable pointing to the local server's URL (i.e. `REACT_APP_BACKEND_URL="http://localhost:3000/api" npm run build`)
 
 
 ## Functionality overview

cypress.json

@@ -0,0 +1,9 @@
+{
+  "baseUrl": "http://localhost:4100",
+  "env": {
+    "apiUrl": "https://conduit.productionready.io/api",
+    "username": "warren_boyd",
+    "email": "[email protected]",
+    "password": "Pa$$w0rd!"
+  }
+}

cypress/README.md

@@ -0,0 +1,22 @@
+# Cypress.io end-to-end tests 🚀
+
+[Cypress.io](https://www.cypress.io) is an open source, MIT licensed end-to-end test runner
+
+## Folder structure
+
+These folders hold the end-to-end tests and supporting files for the [Cypress Test Runner](https://github.com/cypress-io/cypress).
+
+- [fixtures](fixtures) folder holds optional JSON data for mocking, [read more](https://on.cypress.io/fixture)
+- [integration](integration) holds the actual test files, [read more](https://on.cypress.io/writing-and-organizing-tests)
+- [plugins](plugins) allow you to customize how tests are loaded, [read more](https://on.cypress.io/plugins)
+- [support](support) file runs before all tests and is a great place to write or load additional custom commands, [read more](https://on.cypress.io/writing-and-organizing-tests#Support-file)
+
+## `cypress.json` file
+
+You can configure project options in the [../cypress.json](../cypress.json) file, see [Cypress configuration doc](https://on.cypress.io/configuration).
+
+## More information
+
+- [https://github.com/cypress.io/cypress](https://github.com/cypress.io/cypress)
+- [https://docs.cypress.io/](https://docs.cypress.io/)
+- [Writing your first Cypress test](https://on.cypress.io/intro)

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/article-spec.js

@@ -0,0 +1,177 @@
+// enables intelligent code completion for Cypress commands
+// https://on.cypress.io/intelligent-code-completion
+/// <reference types="cypress" />
+/// <reference types="@testing-library/cypress" />
+import faker from 'faker';
+
+describe('Article page', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '**/articles?*')
+      .as('getAllArticles')
+      .intercept('GET', '**/articles/*/comments')
+      .as('getCommentsForArticle')
+      .intercept('GET', '**/articles/*')
+      .as('getArticle')
+      .visit('/');
+
+    cy.wait('@getAllArticles').get('.preview-link').first().click();
+  });
+
+  it('should show the article', () => {
+    cy.wait('@getArticle')
+      .its('response.body.article')
+      .then((article) => {
+        cy.location('pathname').should('equal', `/article/${article.slug}`);
+
+        cy.findByRole('heading', { name: article.title }).should('be.visible');
+
+        cy.get('.article-meta').within(() => {
+          cy.findByRole('img', { name: article.author.username }).should(
+            'be.visible'
+          );
+
+          cy.findByText(article.author.username).should('be.visible');
+        });
+
+        cy.get('.article-content .col-xs-12')
+          .children()
+          .first()
+          .should('not.be.empty');
+
+        cy.get('.tag-list')
+          .children()
+          .should('have.length', article.tagList.length);
+      });
+  });
+
+  it('should require to be logged to comment', () => {
+    cy.findByText(/to add comments on this article/i).should('be.visible');
+  });
+});
+
+describe('Article page (authenticated)', () => {
+  const commentPlaceholder = 'Write a comment...';
+  const postCommentButton = 'Post Comment';
+
+  beforeEach(() => {
+    cy.intercept('GET', '**/articles?*')
+      .as('getAllArticles')
+      .intercept('GET', '**/articles/*/comments')
+      .as('getCommentsForArticle')
+      .intercept('GET', '**/articles/*')
+      .as('getArticle')
+      .intercept('POST', '**/articles/*/comments')
+      .as('createComment')
+      .intercept('DELETE', '**/articles/*/comments/*')
+      .as('deleteComment')
+      .visit('/')
+      .login();
+
+    cy.wait('@getAllArticles').get('.preview-link').first().click();
+  });
+
+  it('should show the comment box', () => {
+    cy.wait(['@getArticle', '@getCommentsForArticle']);
+
+    cy.get('.comment-form').should('exist');
+  });
+
+  it('should add a new comment', () => {
+    const comment = faker.lorem.paragraph();
+
+    cy.wait(['@getArticle', '@getCommentsForArticle']);
+
+    cy.findByPlaceholderText(commentPlaceholder).type(comment);
+
+    cy.findByRole('button', { name: postCommentButton }).click();
+
+    cy.wait('@createComment').its('response.statusCode').should('equal', 200);
+
+    cy.wait(100)
+      .get('.card:not(form)')
+      .first()
+      .within(() => {
+        cy.findByText(comment).should('exist');
+      });
+  });
+
+  it('should validate the comment box', () => {
+    cy.wait(['@getArticle', '@getCommentsForArticle']);
+
+    cy.findByRole('button', { name: postCommentButton }).click();
+
+    cy.wait('@createComment').its('response.statusCode').should('equal', 422);
+
+    cy.get('.error-messages').within(() => {
+      cy.findAllByRole('listitem').should('have.length', 1);
+    });
+  });
+
+  it('should remove my own comment', () => {
+    const comment = faker.lorem.sentence();
+
+    cy.wait(['@getArticle', '@getCommentsForArticle']);
+
+    cy.findByPlaceholderText(commentPlaceholder).type(comment);
+
+    cy.findByRole('button', { name: postCommentButton }).click();
+
+    cy.wait('@createComment');
+
+    cy.findByText(comment)
+      .as('comment')
+      .parent()
+      .parent()
+      .find('.mod-options i')
+      .click();
+
+    cy.wait('@deleteComment').its('response.statusCode').should('equal', 200);
+
+    cy.findByText(comment).should('not.exist');
+  });
+});
+
+describe('Article page (author)', () => {
+  const commentPlaceholder = 'Write a comment...';
+  const postCommentButton = 'Post Comment';
+
+  beforeEach(() => {
+    cy.intercept('GET', '**/articles/*')
+      .as('getArticle')
+      .intercept('GET', '**/articles/*/comments')
+      .as('getCommentsForArticle')
+      .intercept('POST', '**/articles/*/comments')
+      .as('createComment')
+      .intercept('DELETE', '**/articles/*')
+      .as('deleteArticle');
+
+    cy.visit('/')
+      .login()
+      .createArticle()
+      .then((article) => {
+        cy.visit(`/article/${article.slug}`);
+
+        cy.wait(['@getArticle', '@getCommentsForArticle']);
+      });
+  });
+
+  it('should add a new comment', () => {
+    const comment = faker.lorem.paragraph();
+
+    cy.findByPlaceholderText(commentPlaceholder).type(comment);
+
+    cy.findByRole('button', { name: postCommentButton }).click();
+
+    cy.wait('@createComment').its('response.statusCode').should('equal', 200);
+  });
+
+  it('should remove my article', () => {
+    cy.findByRole('button', {
+      name: /delete article/i,
+    }).click();
+
+    cy.wait('@deleteArticle').its('response.statusCode').should('equal', 200);
+
+    cy.location('pathname').should('equal', '/');
+  });
+});