import { Page } from '../components/page'
import { Grid } from 'gridjs-react'
import 'gridjs/dist/theme/mermaid.css'
import { html } from 'gridjs'
import dayjs from 'dayjs'
import { usePrivateUsers, useUsers } from '../hooks/use-users'
import { useUser } from '../hooks/use-user'
import Custom404 from './404'
import { useContracts } from '../hooks/use-contracts'
import _ from 'lodash'
import { useAdmin } from '../hooks/use-admin'
function avatarHtml(avatarUrl: string) {
return ``
}
function UsersTable() {
let users = useUsers()
let privateUsers = usePrivateUsers()
// Map private users by user id
const privateUsersById = _.mapKeys(privateUsers, 'id')
console.log('private users by id', privateUsersById)
// For each user, set their email from the PrivateUser
users = users.map((user) => {
// @ts-ignore
user.email = privateUsersById[user.id]?.email
return user
})
// Sort users by createdTime descending, by default
users = users.sort((a, b) => b.createdTime - a.createdTime)
function exportCsv() {
const csv = users
// @ts-ignore
.map((u) => [u.email, u.name].join(', '))
.join('\n')
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'manifold-users.csv'
a.click()
URL.revokeObjectURL(url)
}
return (
<>
html(avatarHtml(cell as string)),
},
{
id: 'username',
name: 'Username',
formatter: (cell) =>
html(`@${cell}`),
},
'Email',
{
id: 'createdTime',
name: 'Created Time',
formatter: (cell) =>
html(
`${dayjs(cell as number).format(
'MMM D, h:mma'
)}`
),
},
{
id: 'balance',
name: 'Balance',
formatter: (cell) => (cell as number).toFixed(0),
},
{
id: 'id',
name: 'ID',
formatter: (cell) =>
html(`${cell}`),
},
]}
search={true}
sort={true}
pagination={{
enabled: true,
limit: 25,
}}
/>
>
)
}
function ContractsTable() {
let contracts = useContracts() ?? []
// Sort users by createdTime descending, by default
contracts.sort((a, b) => b.createdTime - a.createdTime)
return (
html(`@${cell}`),
},
{
id: 'question',
name: 'Question',
formatter: (cell) => html(`${cell}
`),
},
{
id: 'volume24Hours',
name: '24h vol',
formatter: (cell) => (cell as number).toFixed(0),
},
{
id: 'createdTime',
name: 'Created time',
formatter: (cell) =>
html(
`${dayjs(cell as number).format(
'MMM D, h:mma'
)}`
),
},
{
id: 'closeTime',
name: 'Close time',
formatter: (cell) =>
html(
`${dayjs(cell as number).format(
'MMM D, h:mma'
)}`
),
},
{
id: 'resolvedTime',
name: 'Resolved time',
formatter: (cell) =>
html(
`${dayjs(cell as number).format(
'MMM D, h:mma'
)}`
),
},
{
id: 'visibility',
name: 'Visibility',
formatter: (cell) => cell,
},
{
id: 'id',
name: 'ID',
formatter: (cell) =>
html(`${cell}`),
},
]}
search={true}
sort={true}
pagination={{
enabled: true,
limit: 25,
}}
/>
)
}
export default function Admin() {
return useAdmin() ? (
) : (
)
}