trash deleted

hipstagram/src/App.js

@@ -7,10 +7,10 @@ import { Redirect, Route } from "react-router-dom";
 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";
 import Login from "./Content/Login/Login";
 import Registration from "./Content/Registration/Registration";
+import Users from "./Content/Users/users";
+import Messages from "./Content/Messages/messages";
 
 function App() {
     return (
@@ -28,11 +28,11 @@ function App() {
                     />
                     <Route
                         path="/messages"
-                        render={() => <MessagesContainer />}
+                        render={() => <Messages />}
                     />
                     <Route
                         path="/users"
-                        render={() => <UsersContainer /> }
+                        render={() => <Users /> }
                     />
                     <Route path="/news" component={News} />
                     <Route path="/music" component={Music} />

hipstagram/src/Content/Messages/DialogItem/dialogItem.js

@@ -1,13 +0,0 @@
-import "./../messages.css";
-import { NavLink } from "react-router-dom";
-
-const MessageItem = (props) => {
-    let path = "/messages/" + props.id;
-    return (
-      <div className="dialog">
-        <NavLink to={ path }> { props.name } </NavLink>
-      </div>
-    );
-  };
-
-  export default MessageItem;

hipstagram/src/Content/Messages/Message/message.js

@@ -1,9 +0,0 @@
-import "./../messages.css";
-
-const Message = (props) => {
-    return (
-      <div className="message"> { props.message } </div>
-    )
-  }
-
-  export default Message;

hipstagram/src/Content/Messages/messages.js

@@ -1,42 +1,19 @@
 import React from "react";
-import MessageItem from "./DialogItem/dialogItem";
-import Message from "./Message/message";
 import "./messages.css";
 
-const Messages = (props) => {
-
-    let state = props.messagesPage;
-
-    let dialog = state.dialogsData.map(d => <MessageItem name={d.name} key={d.id} id={d.id} />);
-    let messages = state.messagesData.map(m => <Message message={m.message} key={m.id} />);
-    let newMessageBody = state.newMessageBody;
-
-    let onSendMessageClick = () => {
-        props.sendMessage();
-    }
-    let onNewMessageChange = (e) => {
-        let body = e.target.value;
-        props.updateNewMessageBody(body);
-    }
-
+const Messages = () => {
     return (
         <div className="message-wrapper">
             <div className="dialogs-items">
-                {dialog}
             </div>
 
             <div className="messages">
                 <div>
-                    {messages}
-                </div>
-                <div>
-                    <div><textarea value={newMessageBody}
-                        onChange={onNewMessageChange}
-                        placeholder='Enter your message'></textarea></div>
                     <div>
-                        <button onClick={onSendMessageClick}>
-                            Send
-                        </button>
+                        <textarea placeholder='Enter your message'></textarea>
+                        </div>
+                    <div>
+                        <button>Send</button>
                     </div>
                 </div>
             </div>

hipstagram/src/Content/Messages/messagesContainer.js

@@ -1,25 +0,0 @@
-import { connect } from "react-redux";
-import { sendMessageCreator, updateNewMessageBodyCreator } from "../../Redux/messages-reducer";
-import Messages from "./messages";
-import "./messages.css";
-
-let mapStateToProps = (state) => {
-    return {
-        messagesPage: state.messagesPage
-    }
-}
-
-let mapDispatchToProps = (dispatch) => {
-    return {
-        updateNewMessageBody: (body) => {
-            dispatch(updateNewMessageBodyCreator(body));
-        },
-        sendMessage: (body) => {
-            dispatch(sendMessageCreator());
-        },
-    }
-}
-
-const MessagesContainer = connect(mapStateToProps, mapDispatchToProps)(Messages);
-
-export default MessagesContainer;

hipstagram/src/Content/Profile/MyPosts/MyPostsContainer.js

@@ -1,27 +0,0 @@
-import './myPosts.css';
-import { addPostActionCreator, updateNewPostTextActionCreator } from '../../../Redux/profile-reducer';
-import MyPosts from './myPosts';
-import { connect } from 'react-redux';
-
-const mapStateToProps = (state) => {
-    return {
-        post: state.profilePage.post,
-        newPostText: state.profilePage.newPostText
-    }
-}
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        updateNewPostText: (text) => {
-            let action = updateNewPostTextActionCreator(text);
-            dispatch(action);
-        },
-        addPost: () => {
-            dispatch(addPostActionCreator());
-        }
-    }
-}
-
-const MyPostsContainer = connect(mapStateToProps, mapDispatchToProps)(MyPosts);
-
-export default MyPostsContainer;

hipstagram/src/Content/Profile/MyPosts/myPosts.js

@@ -2,35 +2,21 @@ import React from 'react';
 import Post from './Post/post';
 import './myPosts.css';
 
-function MyPosts(props) {
-
-    let postsElements = props.post.map( p => <Post message={ p.message } likesCount={ p.likesCount } />)
-
-    let newPostElement = React.createRef();
-
-    let onAddPost = () => {
-        props.addPost();
-    }
-
-    let onPostChange = () => {
-        let text = newPostElement.current.value;
-        props.updateNewPostText(text);
-    }
-
+function MyPosts() {
     return(
         <div className="myposts-block">
             My posts
             <div>
                 <div className='myposts-content__block'>
-                    <textarea onChange={ onPostChange } ref={ newPostElement } value={ props.newPostText } />
-                    <button onClick={ onAddPost }>Add post</button>
+                    <textarea />
+                    <button>Add post</button>
                 </div>
 
                 New post
-            </div>
 
-            <div>
-                { postsElements }
+                <Post />
+                <Post />
+                <Post />
             </div>
         </div>
     )

hipstagram/src/Content/Profile/profile.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import MyPostsContainer from './MyPosts/MyPostsContainer';
 import './profile.css';
 import ProfileInfo from './ProfileInfo/profileInfo';
 
-function Profile(props) {
+function Profile() {
     return(
         <div className='content-wrapper'>
 
             <div className='content'>
                 <ProfileInfo />
-                <MyPostsContainer />
             </div>
         </div>
     );

hipstagram/src/Content/Users/UsersContainer.js

@@ -1,25 +0,0 @@
-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.js

@@ -1,44 +1,10 @@
 import React from 'react';
 import "./users.css";
 
-let Users = (props) => {
-    if (props.users.length === 0) {
-        props.setUsers(
-            [
-                { id: 1, photoUrl: "Bruce_Willis01.jpg", followed: true, fullName: "Vladimir", status: "coding like a pro", location: { city: "Minsk", country: "Belarus" } },
-                { id: 2, photoUrl: "Bruce_Willis01.jpg", followed: false, fullName: "Anna", status: "HR", location: { city: "Philadelphia", country: "US" } },
-                { id: 3, photoUrl: "Bruce_Willis01.jpg", followed: false, fullName: "Alex", status: "madness", location: { city: "Riga", country: "?" } }
-            ]
-        )
-    }
-
+let Users = () => {
     return (
         <div className='users-wrapper'>
-            {
-                props.users.map(u => <div key={u.id}>
-                    <span>
-                        <div>
-                            <img src={u.photoUrl} alt='nothing' className='userPhoto' />
-                        </div>
-                        <div>
-                            {u.followed
-                                ? <button onClick={() => { props.unfollow(u.id) }}>Unfollow</button>
-                                : <button onClick={() => { props.follow(u.id) }}>Follow</button>}
-                        </div>
-                    </span>
-
-                    <span>
-                        <span>
-                            <div>{u.fullName}</div>
-                            <div>{u.status}</div>
-                        </span>
-                        <span>
-                            <div>{u.location.country}</div>
-                            <div>{u.location.city}</div>
-                        </span>
-                    </span>
-                </div>)
-            }
+            
         </div>
     )
 }

hipstagram/src/Redux/messages-reducer.js

@@ -1,47 +0,0 @@
-const UPDATE_NEW_MESSAGE_BODY = 'UPDATE-NEW-MESSAGE-BODY';
-const SEND_MESSAGE = 'SEND-MESSAGE';
-
-let initialState = {
-    dialogsData: [
-        { id: 1, name: "Oleh" },
-        { id: 2, name: "Victor" },
-        { id: 3, name: "Maria" },
-        { id: 4, name: "Valeriy" },
-        { id: 5, name: "John" },
-    ],
-    messagesData: [
-        { id: 1, message: "Hi" },
-        { id: 2, message: "How is your project?" },
-        { id: 3, message: "Looks not ok" },
-    ],
-    newMessageBody: ""
-}
-
-const messagesReducer = (state = initialState, action) => {
-    switch (action.type) {
-        case UPDATE_NEW_MESSAGE_BODY:
-            return {
-                ...state,
-                newMessageBody: action.body
-            };
-        case SEND_MESSAGE:
-            let body = state.newMessageBody;
-            return {
-                ...state, 
-                newMessageBody: '',
-                messagesData: [...state.messagesData, { id: 4, message: body }]
-            };
-        default:
-            return state;
-    }
-}
-
-export const sendMessageCreator = () => ({ type: 'SEND-MESSAGE' });
-export const updateNewMessageBodyCreator = (body) => {
-    return {
-        type: 'UPDATE-NEW-MESSAGE-BODY', 
-        body: body
-    }
-}
-
-export default messagesReducer;

hipstagram/src/Redux/navbar-reducer.js

@@ -1,8 +0,0 @@
-let initialState = {}
-
-const navbarReducer = (state = initialState, action) => {
-
-    return state;
-}
-
-export default navbarReducer;

hipstagram/src/Redux/profile-reducer.js

@@ -1,47 +0,0 @@
-const ADD_POST = 'ADD-POST';
-const UPDATE_NEW_POST_TEXT = 'UPDATE-NEW-POST-TEXT';
-
-let initialState = {
-    post: [
-        { id: 1, message: "Hi, how are you?", likesCount: 12 },
-        { id: 2, message: "My first post", likesCount: 9 },
-        { id: 2, message: "Bla Bla Bla", likesCount: 3 },
-        { id: 2, message: "Say you'll haunt me", likesCount: 46 },
-    ],
-    newPostText: "front end",
-}
-
-const profileReducer = (state = initialState, action) => {
-    switch (action.type) {
-        case ADD_POST: {
-            let newPost = {
-                id: 5,
-                message: state.newPostText,
-                likesCount: 0,
-            };
-            return {
-                ...state,
-                post: [...state.post, newPost],
-                newPostText: ''
-            };
-        }
-        case UPDATE_NEW_POST_TEXT: {
-            return {
-                ...state,
-                newPostText: action.newText
-            };
-        }
-        default:
-            return state;
-    }
-}
-
-export const addPostActionCreator = (body) => ({ type: 'ADD-POST', body });
-export const updateNewPostTextActionCreator = (text) => {
-    return {
-        type: 'UPDATE-NEW-POST-TEXT', 
-        newText: text
-    }
-}
-
-export default profileReducer;

hipstagram/src/Redux/promise_reducer.js

@@ -49,7 +49,7 @@ const actionPromise = (name, promise) => {
     }
 }
 
-export const store2 = createStore(combineReducers({
+export const store = createStore(combineReducers({
     auth: authReducer,
     promise: promiseReducer
 }), applyMiddleware(thunk));

hipstagram/src/Redux/state.js

@@ -1,49 +0,0 @@
-import messagesReducer from "./messages-reducer";
-import navbarReducer from "./navbar-reducer";
-import profileReducer from "./profile-reducer";
-
-let store = {
-    _state: {
-        profilePage: {
-            post: [
-                { id: 1, message: "Hi, how are you?", likesCount: 12 },
-                { id: 2, message: "My first post", likesCount: 9 },
-                { id: 2, message: "Bla Bla Bla", likesCount: 3 },
-                { id: 2, message: "Say you'll haunt me", likesCount: 46 },
-            ],
-            newPostText: "front end",
-        },
-        messagesPage: {
-            dialogsData: [
-                { id: 1, name: "Oleh" },
-                { id: 2, name: "Victor" },
-                { id: 3, name: "Maria" },
-                { id: 4, name: "Valeriy" },
-                { id: 5, name: "John" },
-            ],
-            messagesData: [
-                { id: 1, message: "Hi" },
-                { id: 2, message: "How is your project?" },
-                { id: 3, message: "Looks not ok" },
-            ],
-            newMessageBody: ""
-        },
-        navbar: {}
-    },
-    getState() {
-        return this._state;
-    },
-    subscribe(observer) {
-        this._callSubscriber = observer;
-    },
-    dispatch(action) {
-
-        this._state.profilePage = profileReducer(this._state.profilePage, action)
-        this._state.messagesPage = messagesReducer(this._state.messagesPage, action)
-        this._state.navbar = navbarReducer(this._state.navbar, action)
-
-        this._callSubscriber(this._state);
-    }
-};
-
-export default store;

hipstagram/src/Redux/store.js

@@ -1,18 +0,0 @@
-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,
-    usersPage: usersReducer
-});
-
-let store = createStore(reducers);
-
-window.store = store;
-
-export default store; 

hipstagram/src/Redux/users-reducer.js

@@ -1,48 +0,0 @@
-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;

hipstagram/src/index.js

@@ -1,6 +1,5 @@
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
-import store from "./Redux/store";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
@@ -10,7 +9,7 @@ import { Provider } from "react-redux";
 ReactDOM.render(
     <React.StrictMode>
         <BrowserRouter>
-            <Provider store={store}>
+            <Provider>
                 <App />
             </Provider>
         </BrowserRouter>