manifold/web/components/nav/sidebar.tsx

277 lines
8.2 KiB
TypeScript
Raw Normal View History

import {
HomeIcon,
CakeIcon,
SearchIcon,
BookOpenIcon,
DotsHorizontalIcon,
CashIcon,
HeartIcon,
PresentationChartLineIcon,
2022-05-18 15:57:22 +00:00
SparklesIcon,
2022-05-30 00:33:41 +00:00
NewspaperIcon,
} from '@heroicons/react/outline'
import clsx from 'clsx'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useUser } from 'web/hooks/use-user'
2022-05-30 00:33:41 +00:00
import { firebaseLogin, firebaseLogout, User } from 'web/lib/firebase/users'
import { ManifoldLogo } from './manifold-logo'
import { MenuButton } from './menu'
2022-05-30 00:33:41 +00:00
import { ProfileSummary } from './profile-menu'
import {
2022-05-23 21:14:44 +00:00
getUtcFreeMarketResetTime,
useHasCreatedContractToday,
} from 'web/hooks/use-has-created-contract-today'
2022-05-18 15:57:22 +00:00
import { Row } from '../layout/row'
import NotificationsIcon from 'web/components/notifications-icon'
import React, { useEffect, useState } from 'react'
2022-05-30 00:33:41 +00:00
import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
// Create an icon from the url of an image
function IconFromUrl(url: string): React.ComponentType<{ className?: string }> {
return function Icon(props) {
return <img src={url} className={clsx(props.className, 'h-6 w-6')} />
}
}
function getNavigation(username: string) {
return [
{ name: 'Home', href: '/home', icon: HomeIcon },
{
name: 'Portfolio',
href: `/${username}/bets`,
icon: PresentationChartLineIcon,
},
{
name: 'Notifications',
href: `/notifications`,
icon: NotificationsIcon,
},
2022-06-13 04:34:11 +00:00
{ name: 'Get M$', href: '/add-funds', icon: CashIcon },
]
}
2022-05-30 00:33:41 +00:00
function getMoreNavigation(user?: User | null) {
if (IS_PRIVATE_MANIFOLD) {
return [{ name: 'Leaderboards', href: '/leaderboards' }]
}
if (!user) {
return [
{ name: 'Leaderboards', href: '/leaderboards' },
2022-06-13 04:34:11 +00:00
{ name: 'Charity', href: '/charity' },
2022-05-30 00:33:41 +00:00
{ name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
{ name: 'Twitter', href: 'https://twitter.com/ManifoldMarkets' },
]
}
return [
{ name: 'Leaderboards', href: '/leaderboards' },
2022-06-13 04:34:11 +00:00
{ name: 'Charity', href: '/charity' },
2022-05-30 00:33:41 +00:00
{ name: 'Blog', href: 'https://news.manifold.markets' },
{ name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
{ name: 'Twitter', href: 'https://twitter.com/ManifoldMarkets' },
{ name: 'About', href: 'https://docs.manifold.markets/$how-to' },
2022-05-30 00:33:41 +00:00
{ name: 'Sign out', href: '#', onClick: () => firebaseLogout() },
]
}
const signedOutNavigation = [
{ name: 'Home', href: '/home', icon: HomeIcon },
{ name: 'Explore', href: '/markets', icon: SearchIcon },
{ name: 'Charity', href: '/charity', icon: HeartIcon },
{
name: 'About',
href: 'https://docs.manifold.markets/$how-to',
icon: BookOpenIcon,
},
]
const signedOutMobileNavigation = [
{ name: 'Charity', href: '/charity', icon: HeartIcon },
{ name: 'Leaderboards', href: '/leaderboards', icon: CakeIcon },
2022-05-30 00:33:41 +00:00
{ name: 'Blog', href: 'https://news.manifold.markets', icon: NewspaperIcon },
{
name: 'Discord',
href: 'https://discord.gg/eHQBNBqXuh',
icon: IconFromUrl('/discord-logo.svg'),
},
{
name: 'Twitter',
href: 'https://twitter.com/ManifoldMarkets',
icon: IconFromUrl('/twitter-logo.svg'),
},
{
name: 'About',
href: 'https://docs.manifold.markets/$how-to',
icon: BookOpenIcon,
},
]
const mobileNavigation = [
2022-06-13 04:25:57 +00:00
{ name: 'Get M$', href: '/add-funds', icon: CashIcon },
...signedOutMobileNavigation,
]
2022-05-18 19:45:08 +00:00
export type Item = {
name: string
href: string
icon: React.ComponentType<{ className?: string }>
}
function SidebarItem(props: { item: Item; currentPage: string }) {
const { item, currentPage } = props
return (
<Link href={item.href} key={item.name}>
<a
className={clsx(
item.href == currentPage
? 'bg-gray-200 text-gray-900'
: 'text-gray-600 hover:bg-gray-100',
'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
)}
aria-current={item.href == currentPage ? 'page' : undefined}
>
<item.icon
className={clsx(
item.href == currentPage
? 'text-gray-500'
: 'text-gray-400 group-hover:text-gray-500',
'-ml-1 mr-3 h-6 w-6 flex-shrink-0'
)}
aria-hidden="true"
/>
<span className="truncate">{item.name}</span>
</a>
</Link>
)
}
function MoreButton() {
return (
<a className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-100">
<DotsHorizontalIcon
className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
<span className="truncate">More</span>
</a>
)
}
export default function Sidebar(props: { className?: string }) {
const { className } = props
const router = useRouter()
const currentPage = router.pathname
const [countdown, setCountdown] = useState('...')
useEffect(() => {
const nextUtcResetTime = getUtcFreeMarketResetTime({ previousTime: false })
const interval = setInterval(() => {
2022-05-24 13:31:44 +00:00
const now = new Date().getTime()
const timeUntil = nextUtcResetTime - now
2022-05-24 13:31:44 +00:00
const hoursUntil = timeUntil / 1000 / 60 / 60
2022-06-10 15:15:55 +00:00
const minutesUntil = (hoursUntil * 60) % 60
const secondsUntil = Math.round((hoursUntil * 60 * 60) % 60)
const timeString =
2022-06-10 15:15:55 +00:00
hoursUntil < 1 && minutesUntil < 1
? `${secondsUntil}s`
2022-06-10 15:15:55 +00:00
: hoursUntil < 1
? `${Math.round(minutesUntil)}m`
: `${Math.floor(hoursUntil)}h`
setCountdown(timeString)
}, 1000)
return () => clearInterval(interval)
}, [])
const user = useUser()
const mustWaitForFreeMarketStatus = useHasCreatedContractToday(user)
const navigationOptions =
user === null
? signedOutNavigation
: getNavigation(user?.username || 'error')
const mobileNavigationOptions =
user === null ? signedOutMobileNavigation : mobileNavigation
const gradient =
'from-indigo-500 to-blue-500 hover:from-indigo-700 hover:to-blue-700'
const buttonStyle =
'border-w-0 mx-auto mt-4 -ml-1 w-full rounded-md bg-gradient-to-r py-2.5 text-base font-semibold text-white shadow-sm lg:-ml-0'
return (
<nav aria-label="Sidebar" className={className}>
<ManifoldLogo className="pb-6" twoLine />
2022-05-18 16:06:41 +00:00
{user && (
<div className="mb-2" style={{ minHeight: 80 }}>
<ProfileSummary user={user} />
2022-05-18 16:06:41 +00:00
</div>
)}
<div className="space-y-1 lg:hidden">
{mobileNavigationOptions.map((item) => (
<SidebarItem key={item.name} item={item} currentPage={currentPage} />
))}
{user && (
<MenuButton
menuItems={[
{ name: 'Sign out', href: '#', onClick: () => firebaseLogout() },
]}
buttonContent={<MoreButton />}
/>
)}
</div>
<div className="hidden space-y-1 lg:block">
{navigationOptions.map((item) => (
2022-03-31 08:38:57 +00:00
<SidebarItem key={item.name} item={item} currentPage={currentPage} />
))}
<MenuButton
2022-05-30 00:33:41 +00:00
menuItems={getMoreNavigation(user)}
buttonContent={<MoreButton />}
/>
</div>
2022-04-19 14:15:05 +00:00
2022-05-18 16:06:41 +00:00
<div className={'aligncenter flex justify-center'}>
{user ? (
2022-05-18 14:20:39 +00:00
<Link href={'/create'} passHref>
<button className={clsx(gradient, buttonStyle)}>
2022-05-28 20:48:08 +00:00
Create a question
</button>
</Link>
2022-05-18 16:06:41 +00:00
) : (
<button
onClick={firebaseLogin}
className={clsx(gradient, buttonStyle)}
2022-05-18 16:06:41 +00:00
>
Sign in
</button>
)}
</div>
2022-05-18 15:57:22 +00:00
{user &&
mustWaitForFreeMarketStatus != 'loading' &&
mustWaitForFreeMarketStatus ? (
2022-05-18 15:57:22 +00:00
<Row className="mt-2 justify-center">
<Row className="gap-1 text-sm text-gray-400">
2022-05-24 14:28:09 +00:00
Next free question in {countdown}
2022-05-18 15:57:22 +00:00
</Row>
</Row>
) : (
user &&
mustWaitForFreeMarketStatus != 'loading' &&
!mustWaitForFreeMarketStatus && (
<Row className="mt-2 justify-center">
<Row className="gap-1 text-sm text-indigo-400">
2022-05-24 14:28:09 +00:00
Daily free question
<SparklesIcon className="mt-0.5 h-4 w-4" aria-hidden="true" />
</Row>
</Row>
)
2022-05-18 15:57:22 +00:00
)}
</nav>
)
}