[examples/openspending,home][xl]: removes datasets table, implement dataset cards grid, implement country facet
This commit is contained in:
deme
@@ -1,6 +1,10 @@
|
||||
import { promises as fs } from 'fs';
|
||||
import path from 'path';
|
||||
import { GithubProject, getProjectDataPackage } from '../lib/octokit';
|
||||
import {
|
||||
GithubProject,
|
||||
getProjectDataPackage,
|
||||
getProjectMetadata,
|
||||
} from '../lib/octokit';
|
||||
import getConfig from 'next/config';
|
||||
import ExternalLinkIcon from '../components/icons/ExternalLinkIcon';
|
||||
import TimeAgo from 'react-timeago';
|
||||
@@ -10,44 +14,48 @@ import { Header } from '../components/Header';
|
||||
import { Container } from '../components/Container';
|
||||
import { FiscalDataPackage } from '../lib/datapackage.interface';
|
||||
import { loadDataPackage } from '../lib/loader';
|
||||
import { Project } from '../lib/project.interface';
|
||||
import { Index } from 'flexsearch';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import DatasetsSearch from '../components/DatasetsSearch';
|
||||
|
||||
export async function getStaticProps() {
|
||||
const jsonDirectory = path.join(process.cwd(), '/datasets.json');
|
||||
const repos = await fs.readFile(jsonDirectory, 'utf8');
|
||||
const github_pat = getConfig().serverRuntimeConfig.github_pat;
|
||||
const datapackages = await Promise.all(
|
||||
JSON.parse(repos).map(
|
||||
async (_repo: GithubProject) =>
|
||||
await getProjectDataPackage(_repo.owner, _repo.name, 'main', github_pat)
|
||||
)
|
||||
JSON.parse(repos).map(async (_repo: GithubProject) => {
|
||||
const datapackage = await getProjectDataPackage(
|
||||
_repo.owner,
|
||||
_repo.name,
|
||||
'main',
|
||||
github_pat
|
||||
);
|
||||
const repo = await getProjectMetadata(
|
||||
_repo.owner,
|
||||
_repo.name,
|
||||
github_pat
|
||||
);
|
||||
|
||||
return {
|
||||
datapackage,
|
||||
repo,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
const projects = datapackages.map(
|
||||
(datapackage: FiscalDataPackage & { repo: string }) =>
|
||||
loadDataPackage(datapackage, 'os-data', datapackage.name)
|
||||
(item: { datapackage: FiscalDataPackage & { repo: string }; repo: any }) =>
|
||||
loadDataPackage(item.datapackage, item.repo)
|
||||
);
|
||||
|
||||
return {
|
||||
props: {
|
||||
projects,
|
||||
projects: JSON.stringify(projects),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function Datasets({ projects }) {
|
||||
const index = new Index({ tokenize: 'full' });
|
||||
projects.forEach((project: Project) =>
|
||||
index.add(
|
||||
project.name,
|
||||
`${project.repo} ${project.name} ${project.title} ${project.author} ${project.title} ${project.cityCode} ${project.fiscalPeriod?.start} ${project.fiscalPeriod?.end}`
|
||||
)
|
||||
);
|
||||
const { register, watch, handleSubmit, reset } = useForm({
|
||||
defaultValues: {
|
||||
searchTerm: '',
|
||||
},
|
||||
});
|
||||
projects = JSON.parse(projects);
|
||||
|
||||
return (
|
||||
<div className="bg-white min-h-screen">
|
||||
<Header />
|
||||
@@ -65,101 +73,8 @@ export function Datasets({ projects }) {
|
||||
Find spending data about countries all around the world.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<div className="mt-6 flex flex-col gap-3 sm:flex-row">
|
||||
<input
|
||||
placeholder="Search here"
|
||||
aria-label="Hate speech on Twitter"
|
||||
{...register('searchTerm')}
|
||||
className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-600 focus:border-emerald-500 focus:outline-none focus:ring-4 focus:ring-emerald-500/10 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
<table className="min-w-full divide-y divide-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Repository
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Author
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
||||
>
|
||||
Fiscal Year
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="relative py-3.5 pl-3 pr-4 sm:pr-0"
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{projects
|
||||
.filter((project: Project) =>
|
||||
watch().searchTerm && watch().searchTerm !== ''
|
||||
? index
|
||||
.search(watch().searchTerm)
|
||||
.includes(project.name)
|
||||
: true
|
||||
)
|
||||
.map((project: Project) => (
|
||||
<tr key={project.name}>
|
||||
<td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
|
||||
{project.name}
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-3 py-6 text-sm group text-gray-500 hover:text-gray-900 transition-all duration-250">
|
||||
<a
|
||||
href={`https://github.com/${project.owner.name}/${project.repo.name}`}
|
||||
target="_blank"
|
||||
className="flex items-center"
|
||||
>
|
||||
@{project.owner.name}/{project.repo.name}{' '}
|
||||
<ExternalLinkIcon className="ml-1" />
|
||||
</a>
|
||||
</td>
|
||||
<td className="px-3 py-4 text-sm text-gray-500">
|
||||
{project.author}
|
||||
</td>
|
||||
{project.fiscalPeriod ? (
|
||||
<td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
|
||||
{project.fiscalPeriod.start} -{' '}
|
||||
{project.fiscalPeriod.end}
|
||||
</td>
|
||||
) : (
|
||||
<td className="whitespace-nowrap px-3 py-6 text-sm text-gray-500">
|
||||
No data
|
||||
</td>
|
||||
)}
|
||||
<td className="relative whitespace-nowrap py-6 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
|
||||
<a
|
||||
href={`/@${project.owner.name}/${project.repo.name}/`}
|
||||
className="border border-gray-900 text-gray-900 px-4 py-2 transition-all hover:bg-gray-900 hover:text-white"
|
||||
>
|
||||
info
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10">
|
||||
<DatasetsSearch datasets={projects} />
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user