knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[setup][s]-setup code formatting with prettier

Browse Source 
- add husky and lint-stages for pre-commit hooks
 - format entire codebase using `yarn format`
This commit is contained in:
Gift Egwuenu
2020-06-17 13:00:54 +01:00
parent 2ecd88388a
commit 5de8ace421
35 changed files with 1038 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/dataset/About.tsx
View File

@@ -15,22 +15,16 @@ export default function About({ datapackage }) {
</thead>
<tbody>
<tr>
<td className="px-4 py-2">{ datapackage.resources.length }</td>
<td className="px-4 py-2">{ datapackage.size || 'N\A' }</td>
<td className="px-4 py-2">
</td>
<td className="px-4 py-2">{ datapackage.created }</td>
<td className="px-4 py-2">{ datapackage.modified }</td>
<td className="px-4 py-2">
</td>
<td className="px-4 py-2">
</td>
<td className="px-4 py-2">{datapackage.resources.length}</td>
<td className="px-4 py-2">{datapackage.size || 'NA'}</td>
<td className="px-4 py-2"></td>
<td className="px-4 py-2">{datapackage.created}</td>
<td className="px-4 py-2">{datapackage.modified}</td>
<td className="px-4 py-2"></td>
<td className="px-4 py-2"></td>
</tr>
</tbody>
</table>
</>
)
);
}

25
components/dataset/Org.tsx
View File

@@ -1,17 +1,26 @@
import Link from 'next/link'
import Link from 'next/link';
export default function Org({ org }) {
return (
<>
{org
? <>
<img src={org.image_url || 'https://datahub.io/static/img/datahub-cube-edited.svg'} className="h-5 w-5 mr-2 inline-block" />
{org ? (
<>
<img
src={
org.image_url ||
'https://datahub.io/static/img/datahub-cube-edited.svg'
}
className="h-5 w-5 mr-2 inline-block"
/>
<Link href={`/@${org.name}`}>
<a className="font-semibold text-primary underline">{ org.title || org.name }</a>
<a className="font-semibold text-primary underline">
{org.title || org.name}
</a>
</Link>
</>
: ''
}
) : (
''
)}
</>
)
);
}

37
components/dataset/Resources.tsx
View File

@@ -1,4 +1,4 @@
import Link from 'next/link'
import Link from 'next/link';
export default function Resources({ datapackage }) {
return (
@@ -16,25 +16,24 @@ export default function Resources({ datapackage }) {
</thead>
<tbody>
{datapackage.resources.map((resource, index) => (
<tr key={index}>
<td className="px-4 py-2">
<Link href={`${datapackage.name}/r/${resource.name}`}>
<a className="underline">{ resource.title || resource.name }</a>
</Link>
</td>
<td className="px-4 py-2">{ resource.format }</td>
<td className="px-4 py-2">{ resource.created }</td>
<td className="px-4 py-2">{ resource.last_modified }</td>
<td className="px-4 py-2">
<Link href={`${datapackage.name}/r/${resource.name}`}>
<a className="underline">Preview</a>
</Link>
</td>
</tr>
)
)}
<tr key={index}>
<td className="px-4 py-2">
<Link href={`${datapackage.name}/r/${resource.name}`}>
<a className="underline">{resource.title || resource.name}</a>
</Link>
</td>
<td className="px-4 py-2">{resource.format}</td>
<td className="px-4 py-2">{resource.created}</td>
<td className="px-4 py-2">{resource.last_modified}</td>
<td className="px-4 py-2">
<Link href={`${datapackage.name}/r/${resource.name}`}>
<a className="underline">Preview</a>
</Link>
</td>
</tr>
))}
</tbody>
</table>
</>
)
);
}

39
components/home/Nav.tsx
View File

@@ -1,13 +1,13 @@
import Link from 'next/link'
import React, { useState } from 'react'
import Link from 'next/link';
import React, { useState } from 'react';
export default function Nav() {
const [open, setOpen] = useState(false)
const [open, setOpen] = useState(false);
const handleClick = (event) => {
event.preventDefault()
setOpen(!open)
}
event.preventDefault();
setOpen(!open);
};
return (
<nav className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200">
@@ -15,25 +15,40 @@ export default function Nav() {
<img src="/images/logo.svg" alt="portal logo" width="40" />
</div>
<div className="block lg:hidden mx-4">
<button onClick={handleClick} className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black">
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
<button
onClick={handleClick}
className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
>
<svg
className="fill-current h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div className={`${open ? `block` : `hidden`} lg:block`}>
<Link href="/search">
<Link href="/search">
<a className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6">
Search
</a>
</Link>
<Link href="http://tech.datopian.com/frontend/">
<a className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6" target="_blank">
<a
className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
target="_blank"
>
Docs
</a>
</Link>
<Link href="https://github.com/datopian/portal">
<a className="inline-block text-sm px-4 py-2 leading-none border rounded text-white bg-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0">GitHub</a>
<a className="inline-block text-sm px-4 py-2 leading-none border rounded text-white bg-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0">
GitHub
</a>
</Link>
</div>
</nav>
)
);
}

34
components/home/Recent.tsx
View File

@@ -1,4 +1,4 @@
import Link from 'next/link'
import Link from 'next/link';
export default function Recent() {
return (
@@ -8,28 +8,46 @@ export default function Recent() {
<div className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm">
<h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
<p className="text-gray-500">Dataset</p>
<p>data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus</p>
<p>
data collected and managed by Our World in Data - COVID 19 pulled
from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
</p>
<Link href="/">
<a className="pt-3 flex justify-end text-orange-500"> View Dataset </a>
<a className="pt-3 flex justify-end text-orange-500">
{' '}
View Dataset{' '}
</a>
</Link>
</div>
<div className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm">
<h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
<p className="text-gray-500">Dataset</p>
<p>data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus</p>
<p>
data collected and managed by Our World in Data - COVID 19 pulled
from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
</p>
<Link href="/">
<a className="pt-3 flex justify-end text-orange-500"> View Dataset </a>
<a className="pt-3 flex justify-end text-orange-500">
{' '}
View Dataset{' '}
</a>
</Link>
</div>
<div className="border px-4 mb-4 border-gray-100 w-5/6 shadow-sm">
<h1 className="text-2xl font-thin">Our World in Data - COVID 19</h1>
<p className="text-gray-500 mb-2">Dataset</p>
<p>data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus</p>
<p>
data collected and managed by Our World in Data - COVID 19 pulled
from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
</p>
<Link href="/">
<a className="pt-3 flex justify-end text-orange-500"> View Dataset </a>
<a className="pt-3 flex justify-end text-orange-500">
{' '}
View Dataset{' '}
</a>
</Link>
</div>
</div>
</section>
)
);
}

22
components/resource/About.tsx
View File

@@ -1,4 +1,4 @@
import Link from 'next/link'
import Link from 'next/link';
export default function About({ resource }) {
return (
@@ -18,21 +18,23 @@ export default function About({ resource }) {
</thead>
<tbody>
<tr>
<td className="px-4 py-2">{ resource.name || resource.id }</td>
<td className="px-4 py-2">{ resource.title || '' }</td>
<td className="px-4 py-2">{ resource.description || '' }</td>
<td className="px-4 py-2">{ resource.format }</td>
<td className="px-4 py-2">{ resource.size }</td>
<td className="px-4 py-2">{ resource.created }</td>
<td className="px-4 py-2">{ resource.last_modified || '' }</td>
<td className="px-4 py-2">{resource.name || resource.id}</td>
<td className="px-4 py-2">{resource.title || ''}</td>
<td className="px-4 py-2">{resource.description || ''}</td>
<td className="px-4 py-2">{resource.format}</td>
<td className="px-4 py-2">{resource.size}</td>
<td className="px-4 py-2">{resource.created}</td>
<td className="px-4 py-2">{resource.last_modified || ''}</td>
<td className="px-4 py-2">
<Link href={resource.path}>
<a className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded">{ resource.format }</a>
<a className="bg-white hover:bg-gray-200 border text-black font-semibold py-2 px-4 rounded">
{resource.format}
</a>
</Link>
</td>
</tr>
</tbody>
</table>
</>
)
);
}

4
components/resource/DataExplorer.tsx
View File

@@ -1,5 +1,5 @@
import Link from 'next/link'
import Link from 'next/link';
export default function DataExplorer({ resource }) {
return <>{JSON.stringify(resource)}</>
return <>{JSON.stringify(resource)}</>;
}

45
components/search/Input.tsx
View File

@@ -1,35 +1,40 @@
import { useState } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import { useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
export default function Input({ query }) {
const router = useRouter()
const [q, setQ] = useState(query.q)
const router = useRouter();
const [q, setQ] = useState(query.q);
const handleChange = (event) => {
setQ(event.target.value)
}
setQ(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault()
event.preventDefault();
router.push({
pathname: '/search',
query: { q },
})
}
});
};
return (
<form onSubmit={handleSubmit} className="flex items-center">
<input
type='text'
name='q'
value={q}
onChange={handleChange}
placeholder='Search'
aria-label='Search'
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
/>
<button onClick={handleSubmit} className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0">Search</button>
type="text"
name="q"
value={q}
onChange={handleChange}
placeholder="Search"
aria-label="Search"
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
/>
<button
onClick={handleSubmit}
className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
>
Search
</button>
</form>
)
);
}

28
components/search/Item.tsx
View File

@@ -1,21 +1,31 @@
import Link from 'next/link'
import Link from 'next/link';
export default function Item({ datapackage }) {
return (
<div className="mb-6">
<h3 className="text-xl font-semibold">
<Link href={`/@${datapackage.organization ? datapackage.organization.name : 'dataset'}/${datapackage.name}`}>
<a className="text-primary">{ datapackage.title || datapackage.name }</a>
<Link
href={`/@${
datapackage.organization ? datapackage.organization.name : 'dataset'
}/${datapackage.name}`}
>
<a className="text-primary">
{datapackage.title || datapackage.name}
</a>
</Link>
</h3>
<Link href={`/@${datapackage.organization ? datapackage.organization.name : 'dataset'}`}>
<Link
href={`/@${
datapackage.organization ? datapackage.organization.name : 'dataset'
}`}
>
<a className="text-gray-500 block mt-1">
{ datapackage.organization ? datapackage.organization.title : 'dataset' }
{datapackage.organization
? datapackage.organization.title
: 'dataset'}
</a>
</Link>
<div className="leading-relaxed mt-2">
{ datapackage.description }
</div>
<div className="leading-relaxed mt-2">{datapackage.description}</div>
</div>
)
);
}

8
components/search/List.tsx
View File

@@ -1,9 +1,11 @@
import Item from './Item'
import Item from './Item';
export default function List({ datapackages }) {
return (
<ul>
{datapackages.map((datapackage, index) => <Item datapackage={datapackage} key={index} />)}
{datapackages.map((datapackage, index) => (
<Item datapackage={datapackage} key={index} />
))}
</ul>
)
);
}

2
components/search/Sort.tsx
View File

@@ -10,5 +10,5 @@ export default function Sort() {
<option value="views_recent:desc">Popular</option>
</select>
</div>
)
);
}

4
components/search/Total.tsx
View File

@@ -1,7 +1,7 @@
export default function Total({ total }) {
return (
<h1 className="text-3xl font-semibold text-primary my-6 inline-block">
{ total } results found
{total} results found
</h1>
)
);
}