If no user, show loading on home

This commit is contained in:
James Grugett 2022-09-23 16:43:23 -04:00
parent 77ddc456a2
commit 490734db00

View File

@ -45,6 +45,7 @@ import { usePrefetch } from 'web/hooks/use-prefetch'
import { Title } from 'web/components/title' import { Title } from 'web/components/title'
import { CPMMBinaryContract } from 'common/contract' import { CPMMBinaryContract } from 'common/contract'
import { useContractsByDailyScoreGroups } from 'web/hooks/use-contracts' import { useContractsByDailyScoreGroups } from 'web/hooks/use-contracts'
import { LoadingIndicator } from 'web/components/loading-indicator'
export default function Home() { export default function Home() {
const user = useUser() const user = useUser()
@ -82,13 +83,17 @@ export default function Home() {
<DailyStats user={user} /> <DailyStats user={user} />
</Row> </Row>
<> {!user ? (
{sections.map((section) => <LoadingIndicator />
renderSection(section, user, groups, groupContracts) ) : (
)} <>
{sections.map((section) =>
renderSection(section, user, groups, groupContracts)
)}
<TrendingGroupsSection user={user} /> <TrendingGroupsSection user={user} />
</> </>
)}
</Col> </Col>
<button <button
type="button" type="button"
@ -142,13 +147,13 @@ export const getHomeItems = (groups: Group[], sections: string[]) => {
function renderSection( function renderSection(
section: { id: string; label: string }, section: { id: string; label: string },
user: User | null | undefined, user: User,
groups: Group[] | undefined, groups: Group[] | undefined,
groupContracts: Dictionary<CPMMBinaryContract[]> | undefined groupContracts: Dictionary<CPMMBinaryContract[]> | undefined
) { ) {
const { id, label } = section const { id, label } = section
if (id === 'daily-movers') { if (id === 'daily-movers') {
return <DailyMoversSection key={id} userId={user?.id} /> return <DailyMoversSection key={id} userId={user.id} />
} }
if (id === 'daily-trending') if (id === 'daily-trending')
return ( return (
@ -214,7 +219,7 @@ function SectionHeader(props: {
function SearchSection(props: { function SearchSection(props: {
label: string label: string
user: User | null | undefined | undefined user: User
sort: Sort sort: Sort
pill?: string pill?: string
}) { }) {
@ -240,7 +245,7 @@ function SearchSection(props: {
function GroupSection(props: { function GroupSection(props: {
group: Group group: Group
user: User | null | undefined | undefined user: User
contracts: CPMMBinaryContract[] contracts: CPMMBinaryContract[]
}) { }) {
const { group, user, contracts } = props const { group, user, contracts } = props
@ -251,18 +256,16 @@ function GroupSection(props: {
<Button <Button
color="gray-white" color="gray-white"
onClick={() => { onClick={() => {
if (user) { const homeSections = (user.homeSections ?? []).filter(
const homeSections = (user.homeSections ?? []).filter( (id) => id !== group.id
(id) => id !== group.id )
) updateUser(user.id, { homeSections })
updateUser(user.id, { homeSections })
toast.promise(leaveGroup(group, user.id), { toast.promise(leaveGroup(group, user.id), {
loading: 'Unfollowing group...', loading: 'Unfollowing group...',
success: `Unfollowed ${group.name}`, success: `Unfollowed ${group.name}`,
error: "Couldn't unfollow group, try again?", error: "Couldn't unfollow group, try again?",
}) })
}
}} }}
> >
<XCircleIcon className={'h-5 w-5 flex-shrink-0'} aria-hidden="true" /> <XCircleIcon className={'h-5 w-5 flex-shrink-0'} aria-hidden="true" />