Sprint 1

frontend/auth-microfrontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@mesto/auth",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "webpack serve --env development",
+    "build": "webpack --env production"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "single-spa-react": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "babel-loader": "^8.2.2",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-config-single-spa-react": "^2.1.2",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
+  }
+}

frontend/auth-microfrontend/src/AuthApp.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import Login from './components/Login';
+import Register from './components/Register';
+
+function AuthApp() {
+    return (
+        <Router basename="/auth">
+            <Switch>
+                <Route path="/signin" component={Login} />
+                <Route path="/signup" component={Register} />
+            </Switch>
+        </Router>
+    );
+}
+
+export default AuthApp;

frontend/auth-microfrontend/src/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import singleSpaReact from 'single-spa-react';
+import AuthApp from './AuthApp'; // Корневой компонент микрофронтенда Auth
+
+const lifecycles = singleSpaReact({
+    React,
+    ReactDOM,
+    rootComponent: AuthApp,
+    errorBoundary(err, info, props) {
+        // Обработка ошибок
+        return null;
+    },
+});
+
+export const { bootstrap, mount, unmount } = lifecycles;

frontend/auth-microfrontend/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const singleSpaDefaults = require('webpack-config-single-spa-react');
+
+module.exports = (webpackConfigEnv, argv) => {
+    const defaultConfig = singleSpaDefaults({
+        orgName: 'mesto',
+        projectName: 'auth',
+        webpackConfigEnv,
+        argv,
+    });
+
+    return merge(defaultConfig, {
+        output: {
+            publicPath: 'http://localhost:8500/',
+        },
+        devServer: {
+            port: 8500,
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+            },
+        },
+    });
+};

frontend/gallery-microfrontend/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@mesto/gallery",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "webpack serve --env development",
+    "build": "webpack --env production"
+  }
+//  ...
+}
+

frontend/gallery-microfrontend/src/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import singleSpaReact from 'single-spa-react';
+import GalleryApp from './GalleryApp'; // Корневой компонент микрофронтенда Gallery
+
+const lifecycles = singleSpaReact({
+    React,
+    ReactDOM,
+    rootComponent: GalleryApp,
+    errorBoundary(err, info, props) {
+        return null;
+    },
+});
+
+export const { bootstrap, mount, unmount } = lifecycles;

frontend/gallery-microfrontend/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const singleSpaDefaults = require('webpack-config-single-spa-react');
+
+module.exports = (webpackConfigEnv, argv) => {
+    const defaultConfig = singleSpaDefaults({
+        orgName: 'mesto',
+        projectName: 'gallery',
+        webpackConfigEnv,
+        argv,
+    });
+
+    return merge(defaultConfig, {
+        output: {
+            publicPath: 'http://localhost:8502/',
+        },
+        devServer: {
+            port: 8502,
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+            },
+        },
+    });
+};

frontend/profile-microfrontend/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@mesto/profile",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "webpack serve --env development",
+    "build": "webpack --env production"
+  }
+  //  ...
+}
+

frontend/profile-microfrontend/src/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import singleSpaReact from 'single-spa-react';
+import ProfileApp from './ProfileApp'; // Корневой компонент микрофронтенда Profile
+
+const lifecycles = singleSpaReact({
+    React,
+    ReactDOM,
+    rootComponent: ProfileApp,
+    errorBoundary(err, info, props) {
+        return null;
+    },
+});
+
+export const { bootstrap, mount, unmount } = lifecycles;

frontend/profile-microfrontend/src/utils/api.js

@@ -0,0 +1,106 @@
+class Api {
+  constructor({ address, token, groupId }) {
+    // стандартная реализация -- объект options
+    this._token = token;
+    this._groupId = groupId;
+    this._address = address;
+
+    // Запросы в примере работы выполняются к старому Api, в новом URL изменены.
+  }
+
+  getAppInfo() {
+    return Promise.all([this.getCardList(), this.getUserInfo()]);
+  }
+
+  getCardList() {
+    return fetch(`${this._address}/${this._groupId}/cards`, {
+      headers: {
+        authorization: this._token,
+      },
+    })
+      .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+  }
+
+  addCard({ name, link }) {
+    return fetch(`${this._address}/${this._groupId}/cards`, {
+      method: 'POST',
+      headers: {
+        authorization: this._token,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name,
+        link,
+      }),
+    })
+      .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+  }
+
+  removeCard(cardID) {
+    return fetch(`${this._address}/${this._groupId}/cards/${cardID}`, {
+      method: 'DELETE',
+      headers: {
+        authorization: this._token,
+      },
+    })
+      .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+  }
+
+  getUserInfo() {
+    return fetch(`${this._address}/${this._groupId}/users/me`, {
+      headers: {
+        authorization: this._token,
+      },
+    })
+      .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+  }
+
+  setUserInfo({ name, about }) {
+    return fetch(`${this._address}/${this._groupId}/users/me`, {
+      method: 'PATCH',
+      headers: {
+        authorization: this._token,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name,
+        about,
+      }),
+    })
+      .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+  }
+
+  setUserAvatar({ avatar }) {
+    return fetch(`${this._address}/${this._groupId}/users/me/avatar`, {
+      method: 'PATCH',
+      headers: {
+        authorization: this._token,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        avatar,
+      }),
+    })
+      .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+  }
+
+  changeLikeCardStatus(cardID, like) {
+    // Обычная реализация: 2 разных метода для удаления и постановки лайка.
+    return fetch(`${this._address}/${this._groupId}/cards/like/${cardID}`, {
+      method: like ? 'PUT' : 'DELETE',
+      headers: {
+        authorization: this._token,
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => res.ok ? res.json() : Promise.reject(`Ошибка: ${res.status}`));
+  }
+}
+
+const api = new Api({
+  address: 'https://nomoreparties.co',
+  groupId: `cohort0`,
+  token: `80a75492-21c5-4330-a02f-308029e94b63`,
+});
+
+export default api;

frontend/profile-microfrontend/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const singleSpaDefaults = require('webpack-config-single-spa-react');
+
+module.exports = (webpackConfigEnv, argv) => {
+    const defaultConfig = singleSpaDefaults({
+        orgName: 'mesto',
+        projectName: 'profile',
+        webpackConfigEnv,
+        argv,
+    });
+
+    return merge(defaultConfig, {
+        output: {
+            publicPath: 'http://localhost:8501/',
+        },
+        devServer: {
+            port: 8501,
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+            },
+        },
+    });
+};