Make a read more Card with reactstrap - node.js

Question

So I'm almost wrapping up my personal project, but one thing i'm stuck on is this:
I have a following system, where the user can see all other user's he is following (it's working).
I want to implement it in a way, that he has a reactstrap Card on the left, with a small number of users, and a show more button, which open's up the rest of the users.
This is what I got so far:
The screen :
[![enter image description here][1]][1]
And this is the code which is rendering the users (I got it earlier from a get method):
<div className="following">
<Card body outline color="secondary" >
<CardTitle className = "following-list"><following-list>Following list:</following-list></CardTitle>
<CardBody>
{following.length > 0 &&
following.map(usr => {
// return <p>{usr} </p>
return <div>
<Button className = "button-follow" outline color="primary" onClick = {() =>seachUserHandler(usr)}>{usr}</Button>
</div>
})
}
</CardBody>
</Card>
</div>
CSS code:
.following {
position: absolute;
background: whitesmoke; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
top:87px;
left:2%;
width:15%;
}
.button-follow{
max-width: 100%;
max-height: 100%;
display: block;
}
.following-list {
color:#3a7bd5;
font-size: large;
}
The onClick on which Button just refers me to the followed usr profile page.
How can I implement the card in such a way that the user would see 3-5 users at the start, and then if he clicks "see more.." button he will see the total list? is it even possible with cards?
UPDATED:
For anyone who wanna use the trick that was suggested in the solution by the great guy below, here is the full working code:
import '../App.css';
import { useHistory } from "react-router-dom";
import React , {useState, useEffect} from 'react';
import {Navbar, NavbarBrand, Button, Input, Card,CardTitle, Col, CardBody} from 'reactstrap'
import { getUserPosts,search,getFollowingUsers,getFollowingUsersPosts } from '../fucntions/user_functions'
function Follow(){
let history = useHistory();
var email;
const [length, setLength] = useState(0)
const [following,setFollowing] = useState([])
const [userSearch, setUserSearch] = useState('')
const [followingPosts, setFollowingPosts] = useState([]);
const [showLess, setShowLess] = useState(false)
const [followingData, setFollowingData] = useState({
isInitial: true,
filteredList: following.slice(0,2),
completeList: following,
});
const showMoreUsers = (_evt /*: SyntheticEvent<Event> */) => {
setFollowingData({
...followingData,
filteredList: following,
isInitial: false
});
setShowLess(true)
}
const showLessUsers = (_evt /*: SyntheticEvent<Event> */) => {
setFollowingData({
...followingData,
filteredList: following.slice(0,2),
isInitial: true
});
setShowLess(false)
}
const moreUsersStyle = {
color: 'rgba(0,0,0,0.5)',
textDecoration: 'underline',
marginTop: '10px'
}
const handleSearchUser = e =>{setUserSearch(e.target.value);};
function handleBack(){
history.goBack()
}
function seachUserHandler(usr) {
var tempPosts;
let toSearch = null
if (typeof(usr) == 'undefined'){
toSearch = {
email: userSearch
}
} else {
toSearch = {
email: usr
}
}
search(toSearch).then(res =>{
if (res.data.code.code !== 0){
window.confirm(res.data.code.message)
} else {
const postsOfUser = {
email: toSearch.email
}
tempPosts = postsOfUser
getUserPosts(tempPosts).then(response =>{
localStorage.setItem('searchedUserPosts', JSON.stringify(response.data))
localStorage.setItem('searchedUser', toSearch.email)
localStorage.setItem('searchedUserName', res.data.user.first_name)
var lengthOfPosts = res.data.user.posts.length
localStorage.setItem('numPosts',lengthOfPosts)
history.push('/profile')
})
}
})
}
function getFollowing(){
const container ={
email: email
}
getFollowingUsers(container).then(res =>{
var data = res.data;
setFollowing(data)
setLength(data.length)
getFollowingPosts(data)
setFollowingData({
...followingData,
filteredList: data.slice(0,2),
completeList: following
})
})
}
function getFollowingPosts(data){
const container ={
data: data
}
getFollowingUsersPosts(container).then(res =>{
var data = res.data;
setFollowingPosts(data)
console.log(data)
})
}
useEffect(() =>{
if (localStorage.getItem("usertoken") === null) {
history.push('/errorPage')
} else {
const _email = localStorage.getItem('useremail')
email = _email
localStorage.removeItem('searchedUser') //used to delete the last profile searched
localStorage.removeItem('searchedUserPosts') // used to delete the last profile searched post from cache
getFollowing()
};
},[]);
return (
<div className="box">
<div>
<Navbar color="light" light expand="lg" className="justify-content-flex" style={{ padding: "5" }}>
<div className="header-home">
<NavbarBrand type="text">inTouch</NavbarBrand>
</div>
<div>
<Col>
<Input id="usr" name="user1" type="text" value={userSearch} placeholder="Enter user's email..." onChange={handleSearchUser}></Input>
</Col>
</div>
<div>
<Col>
<Button outline color="primary" onClick={() => seachUserHandler()}>Search</Button>
</Col>
</div>
<div>
<Col>
<NavbarBrand type="button" onClick={handleBack}>Back</NavbarBrand>
</Col>
</div>
</Navbar>
<div className="feed">
<Card body outline color="secondary" >
<CardTitle className = "following-list text-center"><following-list>Feed</following-list></CardTitle>
<CardBody className = "text-center">
Welcome to your feed! Catch up with the people you follow.
</CardBody>
</Card>
</div>
<div className="following">
<Card body outline color="secondary" >
<CardTitle className = "following-list text-center"><following-list>Following list:</following-list></CardTitle>
<CardBody className = "text-center">
{followingData.filteredList.length > 0 &&
followingData.filteredList.map(usr =>
<div>
<Button className = "button-follow"
outline
color="primary"
onClick = {() => seachUserHandler(usr)}>{usr}</Button>
</div>
)
}
{followingData.isInitial ?
<p onClick={showMoreUsers} style={moreUsersStyle}>Show all users...</p>
: null
}
{showLess ?
<p onClick={showLessUsers} style={moreUsersStyle}>Show less...</p>
: null
}
</CardBody>
</Card>
</div>
<div className="wrapper-all-posts">
{length > 0 &&
followingPosts.map(post => {
return <Card body outline color="secondary" className="card-home " >
<CardTitle>Posted at : {post.createdAt} By : {post.email}</CardTitle>
<CardBody>{post.post}</CardBody>
</Card>
})
}
</div>
</div>
</div>
)
}
export default Follow;

Answer 1

Stackblitz demo
The overall idea is using a filtered list in the component. Take a look at the code below.
const {followings} = props;
...
const [followingData, setFollowingData] = useState({
isInigial: true,
filteredList: followings.slice(0,6),
completeList: followings,
});
const _showMoreUsers = (_evt /*: SyntheticEvent<Event> */) => {
setFollowgingData({
...followingData,
filteredList: followingData.completeList,
isInitial: false
});
}
const moreUsersStyle = {
color: 'rgba(0,0,0,0.5)',
textDecoration: 'underline',
marginTop: '10px'
}
...
<div className="following">
<Card body outline color="secondary" >
<CardTitle className="following-list">
<following-list>Following list:</following-list>
</CardTitle>
<CardBody>
{followingData.filteredList.length > 0 &&
followingData.filteredListfollowing.map(usr =>
<div>
<Button className = "button-follow"
outline
color="primary"
onClick = {() => seachUserHandler(usr)}>{usr}</Button>
</div>
)
}
{followingData.isInitial ?
<p onClick={_showMoreUsers} style={moreUsersStyle}>Show More...</p>
: null
}
</CardBody>
</Card>
</div>