Add spinner (#987)
This commit is contained in:
FRC
GitHub
parent
27e6534d94
commit
f5a3abf0bc
|
|
@ -37,6 +37,7 @@ import { REFERRAL_AMOUNT } from 'common/economy'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
import { ENV_CONFIG } from 'common/envs/constants'
|
import { ENV_CONFIG } from 'common/envs/constants'
|
||||||
import { PostCard } from '../post-card'
|
import { PostCard } from '../post-card'
|
||||||
|
import { LoadingIndicator } from '../loading-indicator'
|
||||||
|
|
||||||
const MAX_TRENDING_POSTS = 6
|
const MAX_TRENDING_POSTS = 6
|
||||||
|
|
||||||
|
|
@ -140,93 +141,97 @@ function GroupOverviewPinned(props: {
|
||||||
setOpen(false)
|
setOpen(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
return isEditable || pinned.length > 0 ? (
|
return isEditable || (group.pinnedItems && group.pinnedItems.length > 0) ? (
|
||||||
<>
|
pinned.length > 0 || isEditable ? (
|
||||||
<Row className="mb-3 items-center justify-between">
|
|
||||||
<SectionHeader label={'Pinned'} />
|
|
||||||
{isEditable && (
|
|
||||||
<Button
|
|
||||||
color="gray"
|
|
||||||
size="xs"
|
|
||||||
onClick={() => {
|
|
||||||
setEditMode(!editMode)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{editMode ? (
|
|
||||||
'Done'
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<PencilIcon className="inline h-4 w-4" />
|
|
||||||
Edit
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Row>
|
|
||||||
<div>
|
<div>
|
||||||
<Masonry
|
<Row className="mb-3 items-center justify-between">
|
||||||
breakpointCols={{ default: 2, 768: 1 }}
|
<SectionHeader label={'Pinned'} />
|
||||||
className="-ml-4 flex w-auto"
|
{isEditable && (
|
||||||
columnClassName="pl-4 bg-clip-padding"
|
<Button
|
||||||
>
|
color="gray"
|
||||||
{pinned.length == 0 && !editMode && (
|
size="xs"
|
||||||
<div className="flex flex-col items-center justify-center">
|
onClick={() => {
|
||||||
<p className="text-center text-gray-400">
|
setEditMode(!editMode)
|
||||||
No pinned items yet. Click the edit button to add some!
|
}}
|
||||||
</p>
|
>
|
||||||
</div>
|
{editMode ? (
|
||||||
)}
|
'Done'
|
||||||
{pinned.map((element, index) => (
|
) : (
|
||||||
<div className="relative my-2">
|
<>
|
||||||
{element}
|
<PencilIcon className="inline h-4 w-4" />
|
||||||
|
Edit
|
||||||
{editMode && (
|
</>
|
||||||
<CrossIcon
|
|
||||||
onClick={() => {
|
|
||||||
const newPinned = group.pinnedItems.filter((item) => {
|
|
||||||
return item.itemId !== group.pinnedItems[index].itemId
|
|
||||||
})
|
|
||||||
updateGroup(group, { pinnedItems: newPinned })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</Button>
|
||||||
))}
|
|
||||||
{editMode && group.pinnedItems && pinned.length < 6 && (
|
|
||||||
<div className=" py-2">
|
|
||||||
<Row
|
|
||||||
className={
|
|
||||||
'relative gap-3 rounded-lg border-4 border-dotted p-2 hover:cursor-pointer hover:bg-gray-100'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="flex w-full justify-center"
|
|
||||||
onClick={() => setOpen(true)}
|
|
||||||
>
|
|
||||||
<PlusCircleIcon
|
|
||||||
className="h-12 w-12 text-gray-600"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</Row>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</Masonry>
|
</Row>
|
||||||
|
<div>
|
||||||
|
<Masonry
|
||||||
|
breakpointCols={{ default: 2, 768: 1 }}
|
||||||
|
className="-ml-4 flex w-auto"
|
||||||
|
columnClassName="pl-4 bg-clip-padding"
|
||||||
|
>
|
||||||
|
{pinned.length == 0 && !editMode && (
|
||||||
|
<div className="flex flex-col items-center justify-center">
|
||||||
|
<p className="text-center text-gray-400">
|
||||||
|
No pinned items yet. Click the edit button to add some!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{pinned.map((element, index) => (
|
||||||
|
<div className="relative my-2">
|
||||||
|
{element}
|
||||||
|
|
||||||
|
{editMode && (
|
||||||
|
<CrossIcon
|
||||||
|
onClick={() => {
|
||||||
|
const newPinned = group.pinnedItems.filter((item) => {
|
||||||
|
return item.itemId !== group.pinnedItems[index].itemId
|
||||||
|
})
|
||||||
|
updateGroup(group, { pinnedItems: newPinned })
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{editMode && group.pinnedItems && pinned.length < 6 && (
|
||||||
|
<div className=" py-2">
|
||||||
|
<Row
|
||||||
|
className={
|
||||||
|
'relative gap-3 rounded-lg border-4 border-dotted p-2 hover:cursor-pointer hover:bg-gray-100'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="flex w-full justify-center"
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
|
>
|
||||||
|
<PlusCircleIcon
|
||||||
|
className="h-12 w-12 text-gray-600"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Masonry>
|
||||||
|
</div>
|
||||||
|
<PinnedSelectModal
|
||||||
|
open={open}
|
||||||
|
group={group}
|
||||||
|
posts={posts}
|
||||||
|
setOpen={setOpen}
|
||||||
|
title="Pin a post or market"
|
||||||
|
description={
|
||||||
|
<div className={'text-md my-4 text-gray-600'}>
|
||||||
|
Pin posts or markets to the overview of this group.
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<PinnedSelectModal
|
) : (
|
||||||
open={open}
|
<LoadingIndicator />
|
||||||
group={group}
|
)
|
||||||
posts={posts}
|
|
||||||
setOpen={setOpen}
|
|
||||||
title="Pin a post or market"
|
|
||||||
description={
|
|
||||||
<div className={'text-md my-4 text-gray-600'}>
|
|
||||||
Pin posts or markets to the overview of this group.
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
onSubmit={onSubmit}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user