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

134
03 мая 2022, 05:00

Я использую 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;
READ ALSO
связь процесса node js и electron js

связь процесса node js и electron js

У меня есть дискорд-бот на discordjs, и приложение на electron

316
Отфильтровать без изменения создания нового массива

Отфильтровать без изменения создания нового массива

Подскажите пожалуйста каким образом можно отфильтровать массив без возвращения нового массиваПри использования filter или new Set возращается...

123
Обход XSS санитизации

Обход XSS санитизации

Надеюсь кто-нибудь сможет выручить

171
Верстка сложных карточек с анимацией (CSS, JS, jQuery?)

Верстка сложных карточек с анимацией (CSS, JS, jQuery?)

Мне для проекта необходимо сверстать такие же карточки как на скриншотахПо умолчанию активна первая карточка с описанием элемента слева

245