Users page added

hipstagram/src/App.js

@@ -8,6 +8,7 @@ import Music from "./Content/Music/music";
 import Profile from "./Content/Profile/profile";
 import Settings from "./Content/Settings/settings";
 import MessagesContainer from "./Content/Messages/messagesContainer";
+import UsersContainer from "./Content/Users/UsersContainer";
 
 function App(props) {
     return (
@@ -27,6 +28,10 @@ function App(props) {
                         path="/messages"
                         render={() => <MessagesContainer />}
                     />
+                    <Route
+                        path="/users"
+                        render={() => <UsersContainer /> }
+                    />
                     <Route path="/news" component={News} />
                     <Route path="/music" component={Music} />
                     <Route path="/settings" component={Settings} />

hipstagram/src/Content/Users/UsersContainer.js

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import { followAC, setUsersAC, unfollowAC } from '../../Redux/users-reducer';
+import Users from './users';
+
+let mapStateToProps = (state) => {
+    return {
+        users: state.usersPage.users
+    }
+}
+
+let mapDispatchToProps = (dispatch) => {
+    return {
+        follow: (userId) => {
+            dispatch(followAC(userId));
+        },
+        unfollow: (userId) => {
+            dispatch(unfollowAC(userId));
+        },
+        setUsers: (users) => {
+            dispatch(setUsersAC(users));
+        }
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Users);

hipstagram/src/Content/Users/users.css

@@ -0,0 +1,10 @@
+.users-wrapper {
+    background: cadetblue;
+    border: 2px solid #3578e5;
+    border-radius: 5px;
+}
+
+.userPhoto {
+    width: 100px;
+    height: 100px;
+}

hipstagram/src/Redux/store.js

@@ -2,11 +2,13 @@ import { combineReducers, createStore } from "redux";
 import messagesReducer from "./messages-reducer";
 import navbarReducer from "./navbar-reducer";
 import profileReducer from "./profile-reducer";
+import usersReducer from "./users-reducer";
 
 let reducers = combineReducers({
     profilePage: profileReducer,
     messagesPage: messagesReducer,
-    navbar: navbarReducer
+    navbar: navbarReducer,
+    usersPage: usersReducer
 });
 
 let store = createStore(reducers);

hipstagram/src/Redux/users-reducer.js

@@ -0,0 +1,48 @@
+const FOLLOW = 'FOLLOW';
+const UNFOLLOW = 'UNFOLLOW';
+const SET_USERS = 'SET_USERS';
+
+let initialState = {
+    users: [
+        
+    ]
+}
+
+const usersReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case FOLLOW: 
+            return {
+                ...state,
+                users: state.users.map(u => {
+                    if(u.id === action.userId) {
+                        return {...u, followed: true}
+                    }
+                    return u;
+                })
+            };
+        case UNFOLLOW: 
+            return {
+                ...state,
+                users: state.users.map(u => {
+                    if(u.id === action.userId) {
+                        return {...u, followed: false}
+                    }
+                    return u;
+                })
+            };
+        case SET_USERS: {
+            return {
+                ...state, 
+                users: [...state.users, ...action.users]
+            }
+        }
+        default:
+            return state;
+    }
+}
+
+export const followAC = (userId) => ({ type: 'FOLLOW', userId});
+export const unfollowAC = (userId) => ({ type: 'UNFOLLOW', userId});
+export const setUsersAC = (users) => ({ type: 'SET_USERS', users});
+
+export default usersReducer;