mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 18:44:16 +00:00
remove debug
This commit is contained in:
parent
550dcafdc0
commit
66c10338b2
@ -1,109 +0,0 @@
|
||||
import React from "react"
|
||||
import { ViewportList } from "react-viewport-list"
|
||||
import { PostCard, LoadMore } from "components"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
const useCenteredContainer = () => {
|
||||
React.useEffect(() => {
|
||||
app.layout.toogleCenteredContent(true)
|
||||
|
||||
return () => {
|
||||
app.layout.toogleCenteredContent(false)
|
||||
}
|
||||
}, [])
|
||||
}
|
||||
|
||||
const useHacks = (hacks) => {
|
||||
React.useEffect(() => {
|
||||
window._hacks = hacks
|
||||
|
||||
return () => {
|
||||
delete window._hacks
|
||||
}
|
||||
}, [])
|
||||
}
|
||||
|
||||
function generateRandomData() {
|
||||
return {
|
||||
_id: Math.random().toString(36).substr(2, 9),
|
||||
message: `Random post ${Math.random().toString(36).substr(2, 9)}`,
|
||||
user: {
|
||||
_id: Math.random().toString(36).substr(2, 9),
|
||||
username: `Random user ${Math.random().toString(36).substr(2, 9)}`,
|
||||
avatar: `https://avatars.dicebear.com/api/initials/${Math.random().toString(36).substr(2, 9)}}.svg`,
|
||||
},
|
||||
countLikes: Math.floor(Math.random() * 100),
|
||||
hasLiked: Math.random() > 0.5,
|
||||
}
|
||||
}
|
||||
|
||||
const defaultList = new Array(20).fill(0).map(() => generateRandomData())
|
||||
|
||||
console.log(defaultList)
|
||||
|
||||
export default (props) => {
|
||||
const listRef = React.useRef()
|
||||
|
||||
const [list, setList] = React.useState(defaultList)
|
||||
|
||||
const appendPost = (post) => {
|
||||
setList((list) => {
|
||||
return [post, ...list]
|
||||
})
|
||||
}
|
||||
|
||||
const removePost = (_id) => {
|
||||
setList((list) => {
|
||||
return list.filter((post) => {
|
||||
return post._id !== _id
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const removeFirstPost = () => {
|
||||
setList((list) => {
|
||||
return list.slice(1)
|
||||
})
|
||||
}
|
||||
|
||||
const onLoadMore = () => {
|
||||
const newList = new Array(20).fill(0).map(() => generateRandomData())
|
||||
|
||||
setList((list) => {
|
||||
return [...list, ...newList]
|
||||
})
|
||||
}
|
||||
|
||||
useCenteredContainer()
|
||||
|
||||
useHacks({
|
||||
appendPost: appendPost,
|
||||
remove: removePost,
|
||||
deleteFirst: removeFirstPost,
|
||||
addRandom: () => {
|
||||
appendPost(generateRandomData())
|
||||
},
|
||||
})
|
||||
|
||||
return <div
|
||||
ref={listRef}
|
||||
className="list"
|
||||
>
|
||||
<ViewportList
|
||||
viewportRef={listRef}
|
||||
items={list}
|
||||
>
|
||||
{(item) => <PostCard
|
||||
key={item._id}
|
||||
data={item}
|
||||
/>}
|
||||
</ViewportList>
|
||||
|
||||
<button
|
||||
onClick={onLoadMore}
|
||||
>
|
||||
Load more
|
||||
</button>
|
||||
</div>
|
||||
}
|
@ -1,23 +0,0 @@
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.postCard {
|
||||
&:first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user