Merge pull request #807 from mykhalenych/feature/prettier

Feature/prettier

.prettierignore

@@ -0,0 +1,2 @@
+/node_modules
+/build

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "semi": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false
+}

README.md

@@ -14,5 +14,6 @@ using the Redux. It should look and work identically, so use the same markup.
 components (no need to write them in the store file)
 
 ## Instructions
+- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.
 - Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_redux-list-of-todos/)
 - Follow the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline)

package.json

@@ -22,13 +22,13 @@
   "devDependencies": {
     "@cypress/webpack-dev-server": "^1.8.4",
     "@mate-academy/cypress-tools": "^1.0.5",
-    "@mate-academy/eslint-config-react-typescript": "^1.0.12",
-    "@mate-academy/scripts": "^1.2.12",
+    "@mate-academy/eslint-config-react-typescript": "^1.0.15",
+    "@mate-academy/scripts": "^1.7.0",
     "@mate-academy/students-ts-config": "^0.0.4",
-    "@mate-academy/stylelint-config": "^0.0.11",
-    "@types/node": "^17.0.23",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@mate-academy/stylelint-config": "^0.0.12",
+    "@types/node": "^16.18.80",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@types/react-redux": "^7.1.31",
     "@types/react-router-dom": "^5.3.3",
     "cypress": "^9.5.3",
@@ -38,8 +38,9 @@
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.2.0",
     "mochawesome-report-generator": "^6.2.0",
+    "node-sass": "^7.0.1",
     "postcss": "^8.4.12",
-    "node-sass": "^6.0.1",
+    "prettier": "^3.2.5",
     "stylelint": "^15.11.0",
     "typescript": "^4.6.3"
   },
@@ -49,7 +50,8 @@
     "test": "mate-scripts test -l",
     "lint-js": "mate-scripts lint -j",
     "lint-css": "mate-scripts lint -s",
-    "lint": "npm run lint-js && npm run lint-css",
+    "format": "prettier --write './src/**/*.{ts,tsx}'",
+    "lint": "npm run format && npm run lint-js && npm run lint-css",
     "update": "mate-scripts update",
     "postinstall": "npm run update && cypress verify",
     "predeploy": "npm run build",

src/api.ts

@@ -1,8 +1,9 @@
 import { Todo } from './types/Todo';
 import { User } from './types/User';
 
-// eslint-disable-next-line max-len
-const BASE_URL = 'https://mate-academy.github.io/react_dynamic-list-of-todos/api';
+// eslint-disable-next-line operator-linebreak
+const BASE_URL =
+  'https://mate-academy.github.io/react_dynamic-list-of-todos/api';
 
 function wait(delay: number): Promise<void> {
   return new Promise(resolve => {

src/app/store.ts

@@ -15,9 +15,7 @@ const rootReducer = combineReducers({
 // The `store` is passed to the Provider in `/src/index.tsx`
 export const store = createStore(
   rootReducer,
-  composeWithDevTools(
-    applyMiddleware(thunk),
-  ),
+  composeWithDevTools(applyMiddleware(thunk)),
 );
 
 export type RootState = ReturnType<typeof store.getState>;

src/components/TodoList/TodoList.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+/* eslint-disable */
 import React from 'react';
 
 export const TodoList: React.FC = () => {
@@ -47,7 +47,9 @@ export const TodoList: React.FC = () => {
             <td className="is-vcentered"> </td>
 
             <td className="is-vcentered is-expanded">
-              <p className="has-text-danger">quis ut nam facilis et officia qui</p>
+              <p className="has-text-danger">
+                quis ut nam facilis et officia qui
+              </p>
             </td>
 
             <td className="has-text-right is-vcentered">
@@ -78,7 +80,11 @@ export const TodoList: React.FC = () => {
 
           <tr data-cy="todo">
             <td className="is-vcentered">4</td>
-            <td className="is-vcentered"><span className="icon" data-cy="iconCompleted"><i className="fas fa-check" /></span></td>
+            <td className="is-vcentered">
+              <span className="icon" data-cy="iconCompleted">
+                <i className="fas fa-check" />
+              </span>
+            </td>
             <td className="is-vcentered is-expanded">
               <p className="has-text-success">et porro tempora</p>
             </td>
@@ -97,7 +103,9 @@ export const TodoList: React.FC = () => {
             <td className="is-vcentered"> </td>
 
             <td className="is-vcentered is-expanded">
-              <p className="has-text-danger">laboriosam mollitia et enim quasi adipisci quia provident illum</p>
+              <p className="has-text-danger">
+                laboriosam mollitia et enim quasi adipisci quia provident illum
+              </p>
             </td>
 
             <td className="has-text-right is-vcentered">
@@ -114,7 +122,9 @@ export const TodoList: React.FC = () => {
             <td className="is-vcentered"> </td>
 
             <td className="is-vcentered is-expanded">
-              <p className="has-text-danger">qui ullam ratione quibusdam voluptatem quia omnis</p>
+              <p className="has-text-danger">
+                qui ullam ratione quibusdam voluptatem quia omnis
+              </p>
             </td>
 
             <td className="has-text-right is-vcentered">
@@ -131,7 +141,9 @@ export const TodoList: React.FC = () => {
             <td className="is-vcentered"> </td>
 
             <td className="is-vcentered is-expanded">
-              <p className="has-text-danger">illo expedita consequatur quia in</p>
+              <p className="has-text-danger">
+                illo expedita consequatur quia in
+              </p>
             </td>
 
             <td className="has-text-right is-vcentered">
@@ -192,7 +204,9 @@ export const TodoList: React.FC = () => {
             </td>
 
             <td className="is-vcentered is-expanded">
-              <p className="has-text-success">illo est ratione doloremque quia maiores aut</p>
+              <p className="has-text-success">
+                illo est ratione doloremque quia maiores aut
+              </p>
             </td>
 
             <td className="has-text-right is-vcentered">

src/components/TodoModal/TodoModal.tsx

@@ -22,7 +22,9 @@ export const TodoModal: React.FC = () => {
         </header>
 
         <div className="modal-card-body">
-          <p className="block" data-cy="modal-title">fugiat veniam minus</p>
+          <p className="block" data-cy="modal-title">
+            fugiat veniam minus
+          </p>
 
           <p className="block" data-cy="modal-user">
             {/* For not completed */}

src/features/currentTodo.ts

@@ -23,10 +23,7 @@ export const actions = { setTodo, removeTodo };
 type State = Todo | null;
 type Action = SetTodoAction | RemoveTodoAction;
 
-const currentTodoReducer = (
-  state: State = null,
-  action: Action,
-): State => {
+const currentTodoReducer = (state: State = null, action: Action): State => {
   switch (action.type) {
     // Implement all actions here
 

src/features/filter.ts

@@ -1,4 +1,6 @@
-export const actions = { /* put action creators here */};
+export const actions = {
+  /* put action creators here */
+};
 
 const filterReducer = () => {
   return {