ДЗ №8 (1)

README.md

@@ -28,13 +28,13 @@ localstorage и отражения инфромации текущего пол
 ├── index.css
 ├── index.js
 ├── ducks
-│   ├── auth.js
+│   ├── actions.js
 │   ├── index.js
-│   └── users.js
+│   └── actions.js
 ├── sagas
-│   ├── auth.js
+│   ├── actions.js
 │   ├── index.js
-│   └── users.js
+│   └── actions.js
 ├── setupTests.js
 ├── localstorage.js
 └── store.js

package.json

@@ -13,7 +13,9 @@
     "react-svg-spinner": "1.0.1",
     "react": "16.4.1",
     "redux-actions": "^2.4.0",
-    "redux": "^4.0.0"
+    "redux": "^4.0.0",
+    "redux-saga": "^0.14.6",
+    "styled-components": "3.3.3"
   },
 
   "scripts": {

src/components/AppRouter.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import {
+  Route,
+  Switch,
+  Redirect
+} from "react-router-dom";
+import Login from "./Login";
+import PrivateRoute from "./PrivateRoute";
+import UserPage from "./UserPage";
+import { connect } from 'react-redux'
+import { getIsNetworkErrorPresent, getNetworkError } from '../ducks/network';
+
+export class AppRouter extends Component {
+  render() {
+    const { isNetworkError, networkErrorText } = this.props;
+    return (
+      <div>
+        {isNetworkError ? (
+          <div className="app-error">
+            {networkErrorText}
+          </div>
+        ) :
+          <Switch>
+            <Route path="/login" component={Login}/>
+            <PrivateRoute path="/user/me" component={UserPage}/>
+            <PrivateRoute path="/user/:name" component={UserPage}/>
+            <Redirect from="*" to="/login"/>
+          </Switch>
+        }
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  isNetworkError: getIsNetworkErrorPresent(state),
+  networkErrorText: getNetworkError(state)
+});
+
+const mapDispatchToProps = {};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AppRouter);

src/components/AppRouter.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { AppRouter } from './AppRouter'
+import { Route, Switch } from "react-router-dom";
+
+describe('Компонент AppRouter', () => {
+
+  const wrapper = shallow(
+    <AppRouter />
+  );
+
+  it('Содержит компонент <Switch/>', () => {
+    expect(wrapper.find('Switch')).toHaveLength(1);
+  });
+
+  it('Содержит компонент <PrivateRoute/> для себя', () => {
+    expect(wrapper.find('Connect(PrivateRoute)').first().prop("path")).toEqual("/user/me");
+  });
+
+  it('Содержит компонент <PrivateRoute/> для кастомного пользователя', () => {
+    expect(wrapper.find('Connect(PrivateRoute)').last().prop("path")).toEqual("/user/:name");
+  });
+
+  it('Содержит компонент <Route/> с указателем на логин', () => {
+    expect(wrapper.find('Route').prop("path")).toEqual("/login");
+  });
+
+});

src/components/Follower.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+
+export class Follower extends Component {
+  render() {
+
+    const {name, avaUrl} = this.props;
+
+    return (
+      <div className="follower_item">
+        <div className="follower_ava">
+          <img
+            src={avaUrl}
+            alt={name}
+          />
+        </div>
+        <div className="follower_title">
+          <a href={"/user/" + name}>
+            <h3>{name}</h3>
+          </a>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Follower

src/components/Follower.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Follower } from './Follower'
+
+describe('Компонент Follower', () => {
+
+  const wrapper = shallow(
+    <Follower name="Vasya" avaUrl="http://nowhere.com/nobody.jpeg"/>
+  );
+
+  it('Компонент имеет переданный через props урл на картинку', () => {
+    expect(wrapper.find('img').prop("src")).toEqual("http://nowhere.com/nobody.jpeg");
+  });
+
+  it('Компонент имеет переданный через props логин', () => {
+    expect(wrapper.find('h3').text()).toEqual("Vasya");
+  });
+
+  it('ссылка с логина пользователя ведет на /user/{user.login}', () => {
+    expect(wrapper.find('a').prop("href")).toEqual("/user/Vasya");
+  });
+
+
+});

src/components/Followers.css

@@ -0,0 +1,37 @@
+.follower_list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    -webkit-box-pack: center;
+    justify-content: center;
+    margin: 20px 60px;
+}
+
+.follower_item {
+    display: flex;
+    flex-direction: row;
+    padding: 30px;
+}
+
+.follower_ava {
+    width: 100px;
+    height: 100px;
+    background-color: rgb(255, 255, 255);
+    padding: 10px;
+    border-radius: 8px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(238, 238, 238);
+    border-image: initial;
+}
+
+.follower_ava img{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.follower_title {
+    padding-left: 20px;
+    text-align: left;
+}

src/components/Followers.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { connect } from "react-redux";
+import { fetchFollowersRequest } from "../ducks/followers/actions";
+import { isFetching } from "../ducks/followers/reducer";
+import Spinner from 'react-svg-spinner';
+import Follower from "./Follower";
+import './Followers.css'
+
+export class Followers extends Component {
+
+  componentDidMount = () => {
+    const requestedUser = this.props.followersFor;
+    this.props.fetchFollowersRequest(requestedUser);
+  };
+
+  render() {
+
+    const { followers, isFetching } = this.props;
+
+    if (isFetching) {
+      return <Spinner size="64px" color="fuchsia" gap={5}/>;
+    }
+
+    return <div className="follower_list">
+        {followers.ids.map(this.renderFollower)}
+      </div>
+  }
+
+  renderFollower = follower => {
+    return (<Follower key={follower.id} name={follower.login} avaUrl={follower.avatar_url}/>)
+  }
+}
+
+const mapStateToProps = state => {
+  return ({
+    followers: state.followers,
+    isFetching: isFetching(state)
+  });
+};
+
+const mapDispatchToProps = { fetchFollowersRequest };
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Followers);
+

src/components/Followers.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Followers } from './Followers'
+
+describe('Компонент Followers', () => {
+
+  let getFollowersMock = () => 'o_0';
+
+  it('Компонента имеет метод componentDidMount', () => {
+
+    const wrapper = shallow(
+      <Followers isFetching={false} followers={{ids : []}} fetchFollowersRequest={getFollowersMock}/>
+    );
+
+    expect(wrapper.instance().componentDidMount).toBeDefined();
+  });
+
+  it('Компонента имеет Spinner при соответствующем флаге', () => {
+
+    const wrapper = shallow(
+      <Followers isFetching={true} fetchFollowersRequest={getFollowersMock}/>
+    );
+
+    expect(wrapper.find('i')).toHaveLength(1);
+  });
+
+  it('Возвращаются компоненты Followers в том количестве, в котором передаются в props.followers', () => {
+
+    const followerData = {ids : [{id : 1, login: 'a', avatar_url: ''}, {id : 2, login: 'b', avatar_url: ''}]};
+
+    const wrapper = shallow(
+      <Followers isFetching={false} followers={followerData} fetchFollowersRequest={getFollowersMock}/>
+    );
+
+    expect(wrapper.find('Follower')).toHaveLength(2);
+  });
+
+});

src/components/Login.css

@@ -0,0 +1,14 @@
+.login-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 30px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+}
+
+.login-form {
+    width: 300px;
+}