108 lines
2.9 KiB
TypeScript
108 lines
2.9 KiB
TypeScript
import { searchInAny } from 'common/util/parse'
|
|
import { debounce, sortBy } from 'lodash'
|
|
import { useMemo, useState } from 'react'
|
|
import { Col } from 'web/components/layout/col'
|
|
import { Page } from 'web/components/page'
|
|
import { Title } from 'web/components/title'
|
|
import { ftxGrants } from './ftxGrants'
|
|
import GranteeCard from './GranteeCard'
|
|
|
|
export type Grantee = {
|
|
name: string // Better be unique lol
|
|
// slug = name.toLowerCase().replace(/\s/g, '-')
|
|
slug: string
|
|
website?: string
|
|
photo?: string
|
|
preview: string
|
|
description: string
|
|
grantsReceived: Grant[]
|
|
totalReceived: number
|
|
}
|
|
|
|
export type Grant = {
|
|
date: string // in YYYY-MM-DD format
|
|
amount: number // in USD
|
|
from: 'FTX FF' | 'SFF' | 'OP'
|
|
to: string // The name of the receiving charity
|
|
description: string // Why the grant was given; if stated
|
|
}
|
|
|
|
// const grantees: Grantee[] = [
|
|
// {
|
|
// name: 'Manifold Markets',
|
|
// slug: 'manifold-markets',
|
|
// website: 'https://manifold.markets',
|
|
// preview: '',
|
|
// description: '',
|
|
// grantsReceived: [
|
|
// {
|
|
// date: '2022-03-01',
|
|
// amount: 500000,
|
|
// from: 'FTX FF',
|
|
// to: 'Manifold Markets',
|
|
// description: 'Because you guys are awesome!',
|
|
// },
|
|
// ],
|
|
// },
|
|
// ]
|
|
|
|
const grantees = grantsToGrantees(ftxGrants)
|
|
|
|
function grantsToGrantees(grantsList: Grant[]) {
|
|
const grantees = [] as Grantee[]
|
|
for (const grant of grantsList) {
|
|
const name = grant.to
|
|
let grantee: Grantee | undefined = grantees.find((g) => g.name === name)
|
|
if (!grantee) {
|
|
grantee = {
|
|
name,
|
|
slug: name.toLowerCase().replace(/\s/g, '-'),
|
|
preview: grant.description,
|
|
description: grant.description,
|
|
grantsReceived: [],
|
|
totalReceived: 0,
|
|
}
|
|
grantees.push(grantee)
|
|
}
|
|
grantee.grantsReceived.push(grant)
|
|
grantee.totalReceived += grant.amount
|
|
}
|
|
console.log(grantees)
|
|
return grantees
|
|
}
|
|
|
|
export default function Grants() {
|
|
const [query, setQuery] = useState('')
|
|
const debouncedQuery = debounce(setQuery, 50)
|
|
|
|
const filteredGrantees = useMemo(() => {
|
|
const g = grantees.filter((grantee) =>
|
|
searchInAny(query, grantee.name, grantee.description)
|
|
)
|
|
return sortBy(g, 'totalReceived').reverse()
|
|
}, [query])
|
|
|
|
return (
|
|
<Page>
|
|
<Col className="w-full rounded px-4 py-6 sm:px-8 xl:w-[125%]">
|
|
<Col className="">
|
|
<Title className="!mt-0" text="EA Grants Database" />
|
|
|
|
<input
|
|
type="text"
|
|
onChange={(e) => debouncedQuery(e.target.value)}
|
|
placeholder="Find a charity"
|
|
className="input input-bordered mb-6 w-full"
|
|
/>
|
|
|
|
<div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
|
|
{filteredGrantees.map((grantee) => (
|
|
<GranteeCard grantee={grantee} key={grantee.name} />
|
|
))}
|
|
</div>
|
|
</Col>
|
|
</Col>
|
|
</Page>
|
|
)
|
|
}
|