Skip to content

Commit

Permalink
Merge pull request #23 from datopian/setup-code-formatter
Browse files Browse the repository at this point in the history
[Setup][s]- Setup Prettier as Code Formatter
  • Loading branch information
anuveyatsu committed Jun 17, 2020
2 parents 2ecd883 + 5de8ace commit 4452ee0
Show file tree
Hide file tree
Showing 35 changed files with 1,041 additions and 631 deletions.
2 changes: 1 addition & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"presets": ["next/babel"]
}
}
24 changes: 24 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
node_modules/

# testing
/coverage

# next.js
.next/
/out/

# yarn
yarn-error.log
yarn.lock

# sass
.sass-cache

# misc
sandbox/*
.env
.staging.env
.nyc_output/*
.DS_Store

public/
26 changes: 12 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

`Portal` assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for [CKAN][]. `portal` is built in Javascript and React on top of the popular [Next.js][] framework.

[CKAN]: https://ckan.org/
[Next.js]: https://nextjs.com/
[ckan]: https://ckan.org/
[next.js]: https://nextjs.com/

Live DEMO: https://portal.datopian1.now.sh

Expand All @@ -22,13 +22,12 @@ npm init portal-app my-data-portal
```

> NB: Under the hood, this uses the tool called create-next-app, which bootstraps a Next.js app for you. It uses this template through the --example flag.
>
>
> If it doesn’t work, please open an issue.

## Guide

### Styling :art:
### Styling :art:

We use Tailwind as a CSS framework. Take a look at `/styles/index.css` to see what we're importing from Tailwind bundle. You can also configure Tailwind using `tailwind.config.js` file.

Expand All @@ -49,13 +48,13 @@ $ export CMS=http://myblog.wordpress.com

These are the default routes set up in the "starter" app.

* Home `/`
* Search `/search`
* Dataset `/@org/dataset`
* Resource `/@org/dataset/r/resource`
* Organization `/@org`
* Collection (aka group in CKAN) (?) - suggest to merge into org
* Static pages, eg, `/about` etc. from CMS or can do it without external CMS, e.g., in Next.js
- Home `/`
- Search `/search`
- Dataset `/@org/dataset`
- Resource `/@org/dataset/r/resource`
- Organization `/@org`
- Collection (aka group in CKAN) (?) - suggest to merge into org
- Static pages, eg, `/about` etc. from CMS or can do it without external CMS, e.g., in Next.js

### New Routes

Expand All @@ -77,11 +76,10 @@ Boot the demo portal:
$ yarn dev # or npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to see the home page :tada:
Open [http://localhost:3000](http://localhost:3000) to see the home page :tada:

You can start editing the page by modifying `/pages/index.tsx`. The page auto-updates as you edit the file.


### Tests

We use Jest for running tests:
Expand Down
22 changes: 11 additions & 11 deletions __tests__/components/search/Item.test.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from 'react'
import { render } from '@testing-library/react'
import renderer from 'react-test-renderer'
import Item from '../../../components/search/Item'
import React from 'react';
import { render } from '@testing-library/react';
import renderer from 'react-test-renderer';
import Item from '../../../components/search/Item';

test('📸 of Item component', () => {
test('📸 of Item component', () => {
const datapackage = {
name: 'test',
title: 'Title',
description: 'A description.',
organization: {
title: 'test org',
name: 'test-org'
}
}
const tree = renderer.create(<Item datapackage={datapackage} />).toJSON()
expect(tree).toMatchSnapshot()
})
name: 'test-org',
},
};
const tree = renderer.create(<Item datapackage={datapackage} />).toJSON();
expect(tree).toMatchSnapshot();
});
16 changes: 8 additions & 8 deletions __tests__/components/search/Total.test.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'
import { render } from '@testing-library/react'
import renderer from 'react-test-renderer'
import Total from '../../../components/search/Total'
import React from 'react';
import { render } from '@testing-library/react';
import renderer from 'react-test-renderer';
import Total from '../../../components/search/Total';

test('📸 of Total component', () => {
const tree = renderer.create(<Total total={2} />).toJSON()
expect(tree).toMatchSnapshot()
})
test('📸 of Total component', () => {
const tree = renderer.create(<Total total={2} />).toJSON();
expect(tree).toMatchSnapshot();
});
26 changes: 12 additions & 14 deletions __tests__/pages/index.test.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React from 'react'
import { render } from '@testing-library/react'
import renderer from 'react-test-renderer'
import Index from '../../pages/index'
import React from 'react';
import { render } from '@testing-library/react';
import renderer from 'react-test-renderer';
import Index from '../../pages/index';

test('📸 of Home page', () => {
const tree = renderer.create(<Index />).toJSON()
expect(tree).toMatchSnapshot()
})
test('📸 of Home page', () => {
const tree = renderer.create(<Index />).toJSON();
expect(tree).toMatchSnapshot();
});

test('renders text from hero section', () => {
const { getByText } = render(<Index />)
const linkElement = getByText(
/Find, Share and Publish/
)
expect(linkElement).toBeInTheDocument()
})
const { getByText } = render(<Index />);
const linkElement = getByText(/Find, Share and Publish/);
expect(linkElement).toBeInTheDocument();
});
22 changes: 8 additions & 14 deletions components/dataset/About.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 17 additions & 8 deletions components/dataset/Org.tsx
Original file line number Diff line number Diff line change
@@ -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 changes: 18 additions & 19 deletions components/dataset/Resources.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Link from 'next/link'
import Link from 'next/link';

export default function Resources({ datapackage }) {
return (
Expand All @@ -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 changes: 27 additions & 12 deletions components/home/Nav.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,54 @@
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">
<div className="flex items-center flex-shrink-0 text-gray-700 mr-6">
<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>
)
);
}
Loading

0 comments on commit 4452ee0

Please sign in to comment.