Я использую 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;
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
У меня есть дискорд-бот на discordjs, и приложение на electron
Подскажите пожалуйста каким образом можно отфильтровать массив без возвращения нового массиваПри использования filter или new Set возращается...
Мне для проекта необходимо сверстать такие же карточки как на скриншотахПо умолчанию активна первая карточка с описанием элемента слева