Практическая работа №4

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.env

@@ -0,0 +1,4 @@
+PORT=8080
+DATABASE_URL="mongodb+srv://testcluster-2m2lf.mongodb.net/test?retryWrites=true&w=majority"
+DB_USER="recipelist-user"
+DB_PASSWORD="JVOEEWe8R4Tu8vSi"

.eslintrc

@@ -2,6 +2,7 @@
   "extends": ["airbnb-base", "prettier"],
   "plugins": ["prettier"],
   "rules": {
+    "no-underscore-dangle": "off",
     "prettier/prettier": ["error"]
   }
-}
+}

README.md

@@ -1,15 +1,12 @@
-# Andersen JS Course
+# Recipe client\server app
 
-Репозиторий с задачами для курса Andersen JS. Вам необходимо сделать fork этого репозитория, чтобы начать работу над задачами в рамках курса.
+Cooking is easy!
 
-## Перед запуском
-1. Установите NodeJS (версию Current) - https://nodejs.org/en/
-2. Установите Yarn - https://yarnpkg.com/ru/
-3. Если вы еще не поставили себе редактор кода, то можете поставить VSCode - https://code.visualstudio.com/
-4. Для удобства разработки вам понадобятся плагины для ESlint (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) и Prettier (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+## Start app
 
-## Подготовка к запуску
-* Находясь в папке с проектом выполните в консоле команду `yarn`. Эта команда установит все необходимые пакеты зависимостей.
+- Run `yarn start-server` to start server. Server needs Internet to connect Database. Server works on 8080 port.
+- Run `yarn start-client` to launch client. It will connect to server automaticly, so make sure to start server first. Client works on 3030 port.
 
-## Запуск приложения
-* Выполните команду `yarn start`. После этого у вас должен подняться локальный сервер, открыться новая вкладка в браузере, и вы можете приступать к работе.
+## How to use
+
+You can make new recipes with "Add new recipe" button. You can edit, favor or delete existing recipes. You can filter recipes by favorites with "Favorites" button. If you need to show all recipes, click on "Recipe" button.

package.json

@@ -1,24 +1,62 @@
 {
-  "name": "andersen-js-course",
+  "name": "client-server-app",
   "version": "1.0.0",
   "private": true,
-  "repository": "https://github.com/VictorDanilov/andersen-js-course.git",
-  "author": "Viktor Danilov <wikslayer@gmail.com>",
+  "repository": "https://github.com/rick-nice/andersen-js-course.git",
+  "author": "rick-nice <rickman.nice@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server --open",
-    "build": "webpack"
+    "start-server": "nodemon --exec babel-node src/server/server.js",
+    "start-client": "webpack-dev-server --open",
+    "build": "webpack",
+    "lint": "eslint --debug src/",
+    "lint:write": "eslint --debug src/ --fix",
+    "prettier": "prettier --write src/**/*.js"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "yarn lint:write",
+      "git add"
+    ]
   },
   "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/node": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.6",
+    "babel-polyfill": "^6.26.0",
+    "css-loader": "^2.1.1",
     "eslint": "5.3.0",
     "eslint-config-airbnb-base": "13.1.0",
     "eslint-config-prettier": "^4.3.0",
+    "eslint-loader": "^2.1.2",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-prettier": "^3.1.0",
+    "file-loader": "^4.0.0",
+    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "husky": "^2.4.0",
+    "lint-staged": "^8.2.0",
+    "nodemon": "^1.19.1",
     "prettier": "^1.17.1",
+    "style-loader": "^0.23.1",
     "webpack": "^4.32.2",
     "webpack-cli": "^3.3.2",
     "webpack-dev-server": "^3.5.0"
+  },
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "bootstrap": "^4.3.1",
+    "cors": "^2.8.5",
+    "dotenv": "^8.0.0",
+    "express": "^4.17.1",
+    "mongoose": "^5.6.3"
   }
 }

src/client/Controller.js

@@ -0,0 +1,97 @@
+/* eslint-disable no-undef */
+import * as EVENTS from './constants/events';
+import * as URL from './constants/url';
+
+class Controller {
+  constructor(view) {
+    this.view = view;
+
+    this.initializeEvents();
+
+    this.getAll();
+  }
+
+  initializeEvents() {
+    this.view.on(EVENTS.ADD, this.addRecipe.bind(this));
+    this.view.on(EVENTS.DELETE, this.deleteRecipe.bind(this));
+    this.view.on(EVENTS.EDIT, this.editRecipe.bind(this));
+    this.view.on(EVENTS.ALL, this.getAll.bind(this));
+    this.view.on(EVENTS.FAVORITES, this.getFavorites.bind(this));
+  }
+
+  async getAll() {
+    try {
+      const response = await window.fetch(URL.RECIPES);
+      const recipes = await response.json();
+      this.view.showRecipes(recipes);
+      return response;
+    } catch (err) {
+      throw new Error(err);
+    }
+  }
+
+  async getFavorites() {
+    try {
+      const response = await window.fetch(URL.FAVORITES, {
+        mode: 'cors',
+      });
+      const favorites = await response.json();
+      this.view.showRecipes(favorites);
+      return response;
+    } catch (err) {
+      throw new Error(err);
+    }
+  }
+
+  async addRecipe(recipe) {
+    try {
+      const response = await window.fetch(URL.RECIPES, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(recipe),
+      });
+      const { message } = await response.json();
+      const newRecipe = { ...recipe, _id: message._id };
+      this.view.addRecipe(newRecipe);
+      return response;
+    } catch (err) {
+      throw new Error(err);
+    }
+  }
+
+  async deleteRecipe({ id }) {
+    try {
+      const response = await window.fetch(`${URL.RECIPES}/${id}`, {
+        method: 'DELETE',
+      });
+      this.view.removeRecipe(id);
+      return response;
+    } catch (err) {
+      throw new Error(err);
+    }
+  }
+
+  async editRecipe(recipe) {
+    try {
+      const { id, ...recipeBody } = recipe;
+      const response = await window.fetch(`${URL.RECIPES}/${id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(recipeBody),
+      });
+      // Проверка на добавление рецепта в избранное, изменять данные рецепта не нужно
+      if (Object.keys(recipeBody).length !== 1) {
+        this.view.editRecipe(recipe);
+      }
+      return response;
+    } catch (err) {
+      throw new Error(err);
+    }
+  }
+}
+
+export default Controller;

src/client/EventEmitter.js

@@ -0,0 +1,18 @@
+class EventEmitter {
+  constructor() {
+    this.events = {};
+  }
+
+  on(type, listener) {
+    this.events[type] = this.events[type] || [];
+    this.events[type].push(listener);
+  }
+
+  emit(type, arg) {
+    if (this.events[type]) {
+      this.events[type].forEach(listener => listener(arg));
+    }
+  }
+}
+
+export default EventEmitter;