React проблемы с отображением подписчиков + Pagination

Question

Я использую api и получаю пользователей, затем отображаю пользователей на странице (GitHub), все работает нормально, я хочу на странице профиля (profile.jsx) отображать тех пользователей, на которых я подписан.

https://ibb.co/m5tNgV2

Проблема в том, что те пользователи, на которых я подписан, могут отображаться на третьей странице на пятой или двадцатой, я хочу убедиться, что те пользователи, на которых я подписан, отображаются по очереди от первой страницы. Я специально тут сократил мой код чтобы легче читать. Более подробно посмотреть мой код можете посмотреть на Гитхабе, За ранее извините за грамматику

Здесь я получаю пользователей UsersContainer.js

import React from 'react';
import { connect } from 'react-redux';
import {Users} from './Users';
import {
    followThunk,
    getUsers,
    setCurrentPage,
    setTotalUsersCount,
    setUsers,
    unfollowThunk
} from "../Redux/users-reducer";

class UsersContainer extends React.Component {

    componentDidMount() {
        this.props.getUsers(this.props.currentPage, this.props.pageSize);
    }

    onPageChanged = (pageNumber) => {
        const {pageSize} = this.props;
        this.props.getUsers(pageNumber, pageSize);
    }

    render() {

        let pageCount = Math.ceil(this.props.totalUsersCount / this.props.pageSize);
        let pages = [];

        for (let i = 1; i <= pageCount; i++) {
            pages.push(i);
        }

        return(
            <>
                <Users {...this.props} {...this.props.user} onPageChanged={this.onPageChanged}
                       follow={this.props.followThunk} unfollow={this.props.unfollowThunk}/>
            </>
        )
    }
}

let mapStateToProps = (state) => ({
    user: state.usersPage.users,
    totalUsersCount: state.usersPage.totalUsersCount,
    currentPage: state.usersPage.currentPage,
    pageSize: state.usersPage.pageSize,
})

export default connect(mapStateToProps, {getUsers, setCurrentPage, setTotalUsersCount, setUsers, followThunk, unfollowThunk})(UsersContainer);

Здесь отоброжаю пользователей Users.jsx

import React from 'react';
import Paginator from "../Paginator/Paginator";
import userStyle from "./users.module.css";


export let Users = ({currentPage, totalUsersCount, pageSize, onPageChanged, users, ...props}) => {
    const list = props.user.map((user, index) => {
            return <div key={index} className={userStyle.userContainer}>
                <div>
                    {
                        user.followed ?
                            <p> {user.name} </p>
                            :
                            null
                    }
                </div>         
        }
    )

    return (
        <>
            <div style={{padding: '15px'}}>
                <div>
                    <p style={{textAlign: 'left', fontWeight: '600'}}>Popular users</p>
                </div>
                {list}
            </div>
            <div>
                <Paginator currentPage={currentPage} onPageChanged={onPageChanged}
                           totalItemsCount={totalUsersCount} pageSize={pageSize}/>
            </div>
        </>
    )
}
export default Users;

ProfileContainer.js

import React from 'react';
import {connect} from 'react-redux';
import {Profile} from './Profile';
import {profileAC} from "../Redux/profile-reduer";
import * as axios from "axios";
import withRouter from "react-router-dom/es/withRouter";
import {followUsersThunk} from "../Redux/users-reducer";

class ProfileReducer extends React.Component {
    componentDidMount() {
        let userId = this.props.match.params.userId;
        axios.get('https://social-network.samuraijs.com/api/1.0/profile/' + userId).then(response => {
            this.props.profileAC(response.data);
        });

        this.props.followUsersThunk();
    }

    render() {
        return <>
            <Profile {...this.props} />
        </>
    }
}

let mapStateToProps = (state) => ({
    profile: state.profile.profile,
    followedUsers: state.usersPage.followedUsers,
});

let urlDataRouter = withRouter(ProfileReducer)
export default connect(mapStateToProps, {profileAC, followUsersThunk})(urlDataRouter);

Profile.jsx

import React from 'react';
import {Navbar} from '../Navbar/Navbar';
import "./css/style.css"

export class Profile extends React.Component {

    render() {
        if (!this.props.profile) {
            return <p>Loading...</p>
        }

        const list = this.props.followedUsers.map((item, index) => {
            return (
                <div>
                    {
                        item.followed ?
                            <p> {item.name} </p>
                            :
                            null
                    }
                </div>
            );
        });

        return (
            <div>
                <div>
                    <Navbar/>
                </div>

                <div className="contentProfile">
                    <div className="messages">
                        {list}
                    </div>
                </div>
            </div>
        )
    }
}

users-reducer.js

import {usersAPI} from "../Api/Api";

const SET_USERS = 'SET_USERS';
const SET_CURRENT_PAGE = 'SET_CURRENT_PAGE';
const SET_TOTAL_USERS_COUNT = 'SET_TOTAL_USERS_COUNT';
const FOLLOW = 'FOLLOW';
const UNFOLLOW = 'UNFOLLOW';
const FOLLOW_USERS = 'FOLLOW_USERS';

let initialState = {
    users: [],
    followedUsers: [],
    pageSize: 5, // сколько юзеров будет отоброжать на странице
    totalUsersCount: 0, // общее кол-во юзеров
    currentPage: 1, // текущая страница
    follow: false,

};

export let usersReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_USERS: {
            return {...state, users: action.users}
        }

        case FOLLOW_USERS: {
            return {...state, followedUsers: action.followedUsers}
        }

        case SET_CURRENT_PAGE: { // текущая страница
            return {...state, currentPage: action.currentPage}
        }

        case SET_TOTAL_USERS_COUNT: { // общее кол-во юзеров
            return {...state, totalUsersCount: action.count}
        }

        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;
                })
            }


        default:
            return state;
    }
}

export const followUsers = (followedUsers) => ({type: FOLLOW_USERS, followedUsers});
export const setUsers = (users) => ({type: SET_USERS, users});
export const setCurrentPage = (currentPage) => ({type: SET_CURRENT_PAGE, currentPage});
export const setTotalUsersCount = (totalUsersCount) => ({type: SET_TOTAL_USERS_COUNT, count: totalUsersCount});
export const follow = (userID) => ({type: FOLLOW, userID});
export const unfollow = (userID) => ({type: UNFOLLOW, userID});

export const followUsersThunk = () => {
    return (dispatch) => {
        usersAPI.getUsers().then(data => {
            dispatch(followUsers(data.items));
        });
    }
}

export const followThunk = (userID) => {
    return (dispatch) => {
        usersAPI.follow(userID).then(response => {
            if (response.data.resultCode == 0) {
                dispatch(follow(userID))
            }
        })
    }
}

export const unfollowThunk = (userID) => {
    return (dispatch) => {
        usersAPI.unfollow(userID).then(response => {
            if (response.data.resultCode == 0) {
                dispatch(unfollow(userID))
            }
        })
    }
}


export const getUsers = (currentPage, pageSize) => {
    return (dispatch) => {
        usersAPI.getUsers(currentPage, pageSize).then(data => {
            dispatch(setUsers(data.items));
            dispatch(setTotalUsersCount(data.totalCount));
        });
    }
}

export default usersReducer;

БЛОГ НА HUSL

React проблемы с отображением подписчиков + Pagination

Ответы (0 шт):