From f8197f865c0de2641d9533e5c31ef332d0244d56 Mon Sep 17 00:00:00 2001 From: Tavares Hansen Date: Mon, 3 Aug 2020 18:39:17 -0700 Subject: [PATCH 1/7] [refactor][m]: implement efficient gql management system (#41) --- components/dataset/Org.tsx | 18 +-- components/dataset/Resources.tsx | 23 +-- components/home/Recent.tsx | 25 +--- components/resource/About.tsx | 27 +--- components/resource/DataExplorer.tsx | 27 +--- components/search/List.tsx | 24 +-- components/search/Total.tsx | 17 +-- components/static/List.tsx | 15 +- components/static/Page.tsx | 18 +-- components/static/Post.tsx | 18 +-- graphql/queries.ts | 149 +++++++++++++++++++ pages/[org]/[dataset]/index.tsx | 35 +---- pages/[org]/[dataset]/r/[resource]/index.tsx | 29 +--- pages/blog/[post]/index.tsx | 20 +-- pages/blog/index.tsx | 16 +- pages/index.tsx | 7 +- pages/p/[page]/index.tsx | 20 +-- pages/search.tsx | 23 +-- 18 files changed, 201 insertions(+), 310 deletions(-) create mode 100644 graphql/queries.ts diff --git a/components/dataset/Org.tsx b/components/dataset/Org.tsx index 2cd90b64..6b290574 100644 --- a/components/dataset/Org.tsx +++ b/components/dataset/Org.tsx @@ -1,21 +1,7 @@ import Link from 'next/link'; -import ErrorMessage from '../Error'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -export const GET_ORG_QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result { - organization { - name - title - image_url - } - } - } - } -`; +import ErrorMessage from '../Error'; +import { GET_ORG_QUERY } from '../../graphql/queries'; export default function Org({ variables }) { const { loading, error, data } = useQuery(GET_ORG_QUERY, { diff --git a/components/dataset/Resources.tsx b/components/dataset/Resources.tsx index 2ed6425f..d5214545 100644 --- a/components/dataset/Resources.tsx +++ b/components/dataset/Resources.tsx @@ -1,27 +1,10 @@ import Link from 'next/link'; -import ErrorMessage from '../Error'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -export const GET_DATAPACKAGE_QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result { - name - resources { - name - title - format - created - last_modified - } - } - } - } -`; +import ErrorMessage from '../Error'; +import { GET_RESOURCES_QUERY } from '../../graphql/queries'; export default function Resources({ variables }) { - const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, { + const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching diff --git a/components/home/Recent.tsx b/components/home/Recent.tsx index c784aff8..351c98b4 100644 --- a/components/home/Recent.tsx +++ b/components/home/Recent.tsx @@ -1,29 +1,10 @@ import Link from 'next/link'; -import ErrorMessage from '../Error'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -export const QUERY = gql` - query search($q: String, $sort: String, $rows: Int) { - search(q: $q, sort: $sort, rows: $rows) - @rest(type: "Search", path: "package_search?{args}") { - result { - results { - name - title - organization { - name - title - description - } - } - } - } - } -`; +import ErrorMessage from '../Error'; +import { SEARCH_QUERY } from '../../graphql/queries'; function Recent() { - const { loading, error, data } = useQuery(QUERY, { + const { loading, error, data } = useQuery(SEARCH_QUERY, { variables: { sort: 'metadata_created desc', rows: 3, diff --git a/components/resource/About.tsx b/components/resource/About.tsx index 04a2827e..ab13094c 100644 --- a/components/resource/About.tsx +++ b/components/resource/About.tsx @@ -1,30 +1,9 @@ -import Link from 'next/link'; -import ErrorMessage from '../Error'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result { - resources { - name - id - title - description - format - size - created - last_modified - url - } - } - } - } -`; +import ErrorMessage from '../Error'; +import { GET_RESOURCES_QUERY } from '../../graphql/queries'; export default function About({ variables }) { - const { loading, error, data } = useQuery(QUERY, { + const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching diff --git a/components/resource/DataExplorer.tsx b/components/resource/DataExplorer.tsx index c35e117e..7cba7853 100644 --- a/components/resource/DataExplorer.tsx +++ b/components/resource/DataExplorer.tsx @@ -1,30 +1,9 @@ -import Link from 'next/link'; -import ErrorMessage from '../Error'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result { - resources { - name - id - title - description - format - size - created - last_modified - url - } - } - } - } -`; +import ErrorMessage from '../Error'; +import { GET_RESOURCES_QUERY } from '../../graphql/queries'; export default function DataExplorer({ variables }) { - const { loading, error, data } = useQuery(QUERY, { + const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching diff --git a/components/search/List.tsx b/components/search/List.tsx index 294e7791..49e291ec 100644 --- a/components/search/List.tsx +++ b/components/search/List.tsx @@ -1,28 +1,10 @@ +import { useQuery } from '@apollo/react-hooks'; import Item from './Item'; import ErrorMessage from '../Error'; -import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query search($q: String, $sort: String) { - search(q: $q, sort: $sort) - @rest(type: "Search", path: "package_search?{args}") { - result { - results { - name - title - organization { - name - title - } - } - } - } - } -`; +import { SEARCH_QUERY } from '../../graphql/queries'; export default function List({ variables }) { - const { loading, error, data } = useQuery(QUERY, { + const { loading, error, data } = useQuery(SEARCH_QUERY, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching diff --git a/components/search/Total.tsx b/components/search/Total.tsx index dfd88609..ecc414e0 100644 --- a/components/search/Total.tsx +++ b/components/search/Total.tsx @@ -1,20 +1,9 @@ -import ErrorMessage from '../Error'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query search($q: String, $sort: String) { - search(q: $q, sort: $sort) - @rest(type: "Search", path: "package_search?{args}") { - result { - count - } - } - } -`; +import ErrorMessage from '../Error'; +import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries'; export default function Total({ variables }) { - const { loading, error, data } = useQuery(QUERY, { + const { loading, error, data } = useQuery(GET_TOTAL_COUNT_QUERY, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching diff --git a/components/static/List.tsx b/components/static/List.tsx index 32fa3787..f870d61c 100644 --- a/components/static/List.tsx +++ b/components/static/List.tsx @@ -1,19 +1,10 @@ -import ErrorMessage from '../Error'; import parse from 'html-react-parser'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query posts { - posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") { - found - posts - } - } -`; +import ErrorMessage from '../Error'; +import { GET_POSTS_QUERY } from '../../graphql/queries'; export default function List() { - const { loading, error, data } = useQuery(QUERY, { + const { loading, error, data } = useQuery(GET_POSTS_QUERY, { // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching // more data diff --git a/components/static/Page.tsx b/components/static/Page.tsx index 75635550..c0db6749 100644 --- a/components/static/Page.tsx +++ b/components/static/Page.tsx @@ -1,22 +1,10 @@ -import ErrorMessage from '../Error'; import parse from 'html-react-parser'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query page($slug: String) { - page(slug: $slug) - @rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") { - title - content - modified - featured_image - } - } -`; +import ErrorMessage from '../Error'; +import { GET_PAGE_QUERY } from '../../graphql/queries'; export default function Page({ variables }) { - const { loading, error, data } = useQuery(QUERY, { + const { loading, error, data } = useQuery(GET_PAGE_QUERY, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching diff --git a/components/static/Post.tsx b/components/static/Post.tsx index ea1e934d..c88dcc52 100644 --- a/components/static/Post.tsx +++ b/components/static/Post.tsx @@ -1,22 +1,10 @@ -import ErrorMessage from '../Error'; import parse from 'html-react-parser'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query page($slug: String) { - page(slug: $slug) - @rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") { - title - content - modified - featured_image - } - } -`; +import ErrorMessage from '../Error'; +import { GET_PAGE_QUERY } from '../../graphql/queries'; export default function Post({ variables }) { - const { loading, error, data } = useQuery(QUERY, { + const { loading, error, data } = useQuery(GET_PAGE_QUERY, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching diff --git a/graphql/queries.ts b/graphql/queries.ts new file mode 100644 index 00000000..34948561 --- /dev/null +++ b/graphql/queries.ts @@ -0,0 +1,149 @@ +import gql from 'graphql-tag'; + +export const GET_ORG_QUERY = gql` + query dataset($id: String) { + dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { + result { + organization { + name + title + image_url + } + } + } + } +`; + +export const GET_DATAPACKAGE_QUERY = gql` + query dataset($id: String) { + dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { + result { + name + title + size + metadata_created + metadata_modified + resources { + name + } + } + } + } +`; + +export const GET_RESOURCES_QUERY = gql` + query dataset($id: String) { + dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { + result { + name + resources { + name + id + title + description + format + size + created + last_modified + url + } + } + } + } +`; + +export const SEARCH_QUERY = gql` + query search($q: String, $sort: String, $rows: Int) { + search(q: $q, sort: $sort, rows: $rows) + @rest(type: "Search", path: "package_search?{args}") { + result { + count + results { + name + title + organization { + name + title + description + } + } + } + } + } +`; + +export const GET_TOTAL_COUNT_QUERY = gql` + query search($q: String, $sort: String) { + search(q: $q, sort: $sort) + @rest(type: "Search", path: "package_search?{args}") { + result { + count + } + } + } +`; + +export const GET_POSTS_QUERY = gql` + query posts { + posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") { + found + posts + meta + } + } +`; + +export const GET_PAGE_QUERY = gql` + query page($slug: String) { + page(slug: $slug) + @rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") { + title + content + excerpt + slug + date + modified + featured_image + } + } +`; + +export const GET_DATASET_QUERY = gql` + query dataset($id: String) { + dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { + result { + name + title + size + metadata_created + metadata_modified + resources { + name + title + format + created + last_modified + } + organization { + name + title + image_url + } + } + } + } +`; + +export const GET_POST_QUERY = gql` + query post($slug: String) { + post(slug: $slug) + @rest(type: "Post", path: "{args.slug}", endpoint: "wordpress") { + title + content + excerpt + slug + date + modified + } + } +`; diff --git a/pages/[org]/[dataset]/index.tsx b/pages/[org]/[dataset]/index.tsx index 5122fca8..ee59d2bd 100644 --- a/pages/[org]/[dataset]/index.tsx +++ b/pages/[org]/[dataset]/index.tsx @@ -1,42 +1,15 @@ import { GetServerSideProps } from 'next'; import { useQuery } from '@apollo/react-hooks'; -import { initializeApollo } from '../../../lib/apolloClient'; -import utils from '../../../utils'; import Head from 'next/head'; +import { initializeApollo } from '../../../lib/apolloClient'; import Nav from '../../../components/home/Nav'; import About from '../../../components/dataset/About'; import Org from '../../../components/dataset/Org'; import Resources from '../../../components/dataset/Resources'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result { - name - title - size - metadata_created - metadata_modified - resources { - name - title - format - created - last_modified - } - organization { - name - title - image_url - } - } - } - } -`; +import { GET_DATASET_QUERY } from '../../../graphql/queries'; function Dataset({ variables }) { - const { data, loading } = useQuery(QUERY, { variables }); + const { data, loading } = useQuery(GET_DATASET_QUERY, { variables }); if (loading) return
Loading
; const { result } = data.dataset; @@ -67,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { }; await apolloClient.query({ - query: QUERY, + query: GET_DATASET_QUERY, variables, }); diff --git a/pages/[org]/[dataset]/r/[resource]/index.tsx b/pages/[org]/[dataset]/r/[resource]/index.tsx index 8fe092db..1ab7ec8c 100644 --- a/pages/[org]/[dataset]/r/[resource]/index.tsx +++ b/pages/[org]/[dataset]/r/[resource]/index.tsx @@ -1,35 +1,14 @@ import { GetServerSideProps } from 'next'; -import gql from 'graphql-tag'; import { useQuery } from '@apollo/react-hooks'; -import { initializeApollo } from '../../../../../lib/apolloClient'; -import utils from '../../../../../utils'; import Head from 'next/head'; +import { initializeApollo } from '../../../../../lib/apolloClient'; import Nav from '../../../../../components/home/Nav'; import About from '../../../../../components/resource/About'; import DataExplorer from '../../../../../components/resource/DataExplorer'; - -const QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result { - resources { - name - id - title - description - format - size - created - last_modified - url - } - } - } - } -`; +import { GET_RESOURCES_QUERY } from '../../../../../graphql/queries'; function Resource({ variables }) { - const { data, loading } = useQuery(QUERY, { variables }); + const { data, loading } = useQuery(GET_RESOURCES_QUERY, { variables }); if (loading) return
Loading
; const result = data.dataset.result; @@ -63,7 +42,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { }; await apolloClient.query({ - query: QUERY, + query: GET_RESOURCES_QUERY, variables, }); diff --git a/pages/blog/[post]/index.tsx b/pages/blog/[post]/index.tsx index a71cd5c2..d9c55b20 100644 --- a/pages/blog/[post]/index.tsx +++ b/pages/blog/[post]/index.tsx @@ -1,23 +1,9 @@ import { GetServerSideProps } from 'next'; -import { initializeApollo } from '../../../lib/apolloClient'; import Head from 'next/head'; +import { initializeApollo } from '../../../lib/apolloClient'; import Nav from '../../../components/home/Nav'; import Post from '../../../components/static/Post'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query post($slug: String) { - post(slug: $slug) - @rest(type: "Post", path: "{args.slug}", endpoint: "wordpress") { - title - content - excerpt - slug - date - modified - } - } -`; +import { GET_POST_QUERY } from '../../../graphql/queries'; function PostItem({ variables }) { return ( @@ -42,7 +28,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const apolloClient = initializeApollo(); await apolloClient.query({ - query: QUERY, + query: GET_POST_QUERY, variables, }); diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index cb63683e..38676345 100644 --- a/pages/blog/index.tsx +++ b/pages/blog/index.tsx @@ -1,19 +1,9 @@ import { GetServerSideProps } from 'next'; -import { initializeApollo } from '../../lib/apolloClient'; import Head from 'next/head'; +import { initializeApollo } from '../../lib/apolloClient'; import Nav from '../../components/home/Nav'; import List from '../../components/static/List'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query posts { - posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") { - found - posts - meta - } - } -`; +import { GET_POSTS_QUERY } from '../../graphql/queries'; function PostList() { return ( @@ -34,7 +24,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const apolloClient = initializeApollo(); await apolloClient.query({ - query: QUERY, + query: GET_POSTS_QUERY, }); return { diff --git a/pages/index.tsx b/pages/index.tsx index 86507a1d..b2db91ec 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,9 +1,10 @@ import { GetServerSideProps } from 'next'; -import { initializeApollo } from '../lib/apolloClient'; import Head from 'next/head'; +import { initializeApollo } from '../lib/apolloClient'; import Nav from '../components/home/Nav'; -import Recent, { QUERY } from '../components/home/Recent'; +import Recent from '../components/home/Recent'; import Form from '../components/search/Form'; +import { SEARCH_QUERY } from '../graphql/queries'; function Home() { return ( @@ -39,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const apolloClient = initializeApollo(); await apolloClient.query({ - query: QUERY, + query: SEARCH_QUERY, variables: { sort: 'metadata_created desc', rows: 3, diff --git a/pages/p/[page]/index.tsx b/pages/p/[page]/index.tsx index ffaf17ba..ea613032 100644 --- a/pages/p/[page]/index.tsx +++ b/pages/p/[page]/index.tsx @@ -1,23 +1,9 @@ import { GetServerSideProps } from 'next'; -import { initializeApollo } from '../../../lib/apolloClient'; import Head from 'next/head'; +import { initializeApollo } from '../../../lib/apolloClient'; import Nav from '../../../components/home/Nav'; import Page from '../../../components/static/Page'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query page($slug: String) { - page(slug: $slug) - @rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") { - title - content - excerpt - slug - date - modified - } - } -`; +import { GET_PAGE_QUERY } from '../../../graphql/queries'; function PageItem({ variables }) { return ( @@ -42,7 +28,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const apolloClient = initializeApollo(); await apolloClient.query({ - query: QUERY, + query: GET_PAGE_QUERY, variables, }); diff --git a/pages/search.tsx b/pages/search.tsx index 419f1b9c..9b66b2e4 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -6,26 +6,7 @@ import Nav from '../components/home/Nav'; import Form from '../components/search/Form'; import Total from '../components/search/Total'; import List from '../components/search/List'; -import gql from 'graphql-tag'; - -const QUERY = gql` - query search($q: String, $sort: String) { - search(q: $q, sort: $sort) - @rest(type: "Search", path: "package_search?{args}") { - result { - count - results { - name - title - organization { - name - title - } - } - } - } - } -`; +import { SEARCH_QUERY } from '../graphql/queries'; function Search({ variables }) { return ( @@ -51,7 +32,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => { const apolloClient = initializeApollo(); await apolloClient.query({ - query: QUERY, + query: SEARCH_QUERY, variables, }); From 477fb77a78d3b22c734741c4c6ec0255fe28e2c8 Mon Sep 17 00:00:00 2001 From: Tavares Hansen Date: Mon, 3 Aug 2020 19:03:29 -0700 Subject: [PATCH 2/7] [refactor][x]: refactor, remove duplicated code --- components/dataset/About.tsx | 74 ++++++++++++++++------------- components/dataset/Resources.tsx | 61 ++++++++++++++++-------- components/resource/About.tsx | 80 +++++++++++++++++++++++--------- 3 files changed, 140 insertions(+), 75 deletions(-) diff --git a/components/dataset/About.tsx b/components/dataset/About.tsx index 188aba21..7f166e38 100644 --- a/components/dataset/About.tsx +++ b/components/dataset/About.tsx @@ -1,23 +1,37 @@ -import ErrorMessage from '../Error'; import { useQuery } from '@apollo/react-hooks'; -import gql from 'graphql-tag'; +import ErrorMessage from '../Error'; +import { GET_DATAPACKAGE_QUERY } from '../../graphql/queries'; -export const GET_DATAPACKAGE_QUERY = gql` - query dataset($id: String) { - dataset(id: $id) @rest(type: "Response", path: "package_show?{args}") { - result { - name - title - size - metadata_created - metadata_modified - resources { - name - } - } - } - } -`; +const columns = [ + { + name: 'Files', + render: ({ resources }) => (resources && resources.length) || 0, + }, + { + name: 'Size', + render: ({ size }) => size || 'N/A', + }, + { + name: 'Format', + render: () => null, + }, + { + name: 'Created', + render: ({ metadata_created: created }) => created || 'N/A', + }, + { + name: 'Updated', + render: ({ metadata_modified: updated }) => updated || 'N/A', + }, + { + name: 'License', + render: () => null, + }, + { + name: 'Source', + render: () => null, + }, +]; export default function About({ variables }) { const { loading, error, data } = useQuery(GET_DATAPACKAGE_QUERY, { @@ -37,24 +51,20 @@ export default function About({ variables }) { - - - - - - - + {columns.map(({ name }) => ( + + ))} - - - - - - - + {columns.map(({ name, render }) => ( + + ))}
FilesSizeFormatCreatedUpdatedLicenseSource + {name} +
{result.resources.length}{result.size || 'NA'}{result.metadata_created}{result.metadata_modified} + {render(result)} +
diff --git a/components/dataset/Resources.tsx b/components/dataset/Resources.tsx index d5214545..d44b65f8 100644 --- a/components/dataset/Resources.tsx +++ b/components/dataset/Resources.tsx @@ -3,6 +3,36 @@ import { useQuery } from '@apollo/react-hooks'; import ErrorMessage from '../Error'; import { GET_RESOURCES_QUERY } from '../../graphql/queries'; +const columns = [ + { + name: 'File', + render: ({ name: resName, title }, { name }) => ( + + {title || resName} + + ), + }, + { + name: 'Format', + render: ({ format }) => format, + }, + { + name: 'Created', + render: ({ created }) => created, + }, + { + name: 'Updated', + render: ({ last_modified }) => last_modified, + }, + { + name: 'Link', + render: ({ name }, { name: resName }) => ( + + Preview + + ), + }, +]; export default function Resources({ variables }) { const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, { variables, @@ -23,29 +53,20 @@ export default function Resources({ variables }) { - - - - - + {columns.map(({ name }) => ( + + ))} - {result.resources.map((resource, index) => ( - - - - - - + {/* Do not use array index as key */} + {result.resources.map((resource) => ( + + {columns.map(({ name, render }) => ( + + ))} ))} diff --git a/components/resource/About.tsx b/components/resource/About.tsx index ab13094c..1faebe39 100644 --- a/components/resource/About.tsx +++ b/components/resource/About.tsx @@ -2,6 +2,52 @@ import { useQuery } from '@apollo/react-hooks'; import ErrorMessage from '../Error'; import { GET_RESOURCES_QUERY } from '../../graphql/queries'; +const columns = [ + { + name: 'Name', + key: 'name', + render: ({ name, id }) => { + name || id; + }, + }, + { + name: 'Title', + key: 'title', + }, + { + name: 'Description', + key: 'description', + }, + { + name: 'Format', + key: 'format', + }, + { + name: 'Size', + key: 'size', + }, + { + name: 'Created', + key: 'created', + }, + { + name: 'Updated', + key: 'last_modified', + }, + { + name: 'Download', + key: 'download', + render: ({ url, format }) => ( + + {format} + + ), + }, +]; + export default function About({ variables }) { const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, { variables, @@ -23,33 +69,21 @@ export default function About({ variables }) {
FileFormatCreatedUpdatedLink{name}
- - {resource.title || resource.name} - - {resource.format}{resource.created}{resource.last_modified} - - Preview - -
+ {render(resource, result)} +
- - - - - - - - + {columns.map(({ key, name }) => ( + + ))} - - - - - - - - + {columns.map(({ key, render }) => ( + + ))}
NameTitleDescriptionFormatSizeCreatedUpdatedDownload + {name} +
{resource.name || resource.id}{resource.title || ''}{resource.description || ''}{resource.format}{resource.size}{resource.created}{resource.last_modified || ''} - - {resource.format} - - + {(render && typeof render === 'function' && render(resource)) || + resource[key]} +
From d286c7f6ff492528d99de8445427d317e3081d8b Mon Sep 17 00:00:00 2001 From: Tavares Hansen Date: Mon, 3 Aug 2020 19:09:35 -0700 Subject: [PATCH 3/7] [component][x]: add reusable Table component --- components/_shared/Table.tsx | 37 ++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 components/_shared/Table.tsx diff --git a/components/_shared/Table.tsx b/components/_shared/Table.tsx new file mode 100644 index 00000000..0f824191 --- /dev/null +++ b/components/_shared/Table.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +interface TableProps { + columns: Array; + data: Array; + className?: string; +} + +const Table: React.FC = ({ columns, data, className }) => { + return ( + + + + {columns.map(({ key, name }) => ( + + ))} + + + + {data.map((item) => ( + + {columns.map(({ key, render }) => ( + + ))} + + ))} + +
+ {name} +
+ {(render && typeof render === 'function' && render(item)) || + item[key]} +
+ ); +}; + +export default Table; From a82325b91af94365fa4304c42d4f25a96284d307 Mon Sep 17 00:00:00 2001 From: Tavares Hansen Date: Mon, 3 Aug 2020 19:19:41 -0700 Subject: [PATCH 4/7] [refactor][m]: refactor components using reusable component --- components/dataset/About.tsx | 40 ++++++--------------------- components/dataset/Resources.tsx | 47 ++++++++++++-------------------- components/resource/About.tsx | 28 ++----------------- 3 files changed, 29 insertions(+), 86 deletions(-) diff --git a/components/dataset/About.tsx b/components/dataset/About.tsx index 7f166e38..52ebb01e 100644 --- a/components/dataset/About.tsx +++ b/components/dataset/About.tsx @@ -1,35 +1,36 @@ import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { Table, ErrorMessage } from '../_shared'; import { GET_DATAPACKAGE_QUERY } from '../../graphql/queries'; const columns = [ { name: 'Files', + key: 'files', render: ({ resources }) => (resources && resources.length) || 0, }, { name: 'Size', - render: ({ size }) => size || 'N/A', + key: 'size', }, { name: 'Format', - render: () => null, + key: 'format', }, { name: 'Created', - render: ({ metadata_created: created }) => created || 'N/A', + key: 'metadata_created', }, { name: 'Updated', - render: ({ metadata_modified: updated }) => updated || 'N/A', + key: 'metadata_modified', }, { name: 'License', - render: () => null, + key: 'license', }, { name: 'Source', - render: () => null, + key: 'source', }, ]; @@ -46,28 +47,5 @@ export default function About({ variables }) { if (loading) return
Loading
; const { result } = data.dataset; - return ( - <> - - - - {columns.map(({ name }) => ( - - ))} - - - - - {columns.map(({ name, render }) => ( - - ))} - - -
- {name} -
- {render(result)} -
- - ); + return ; } diff --git a/components/dataset/Resources.tsx b/components/dataset/Resources.tsx index d44b65f8..f42c70ef 100644 --- a/components/dataset/Resources.tsx +++ b/components/dataset/Resources.tsx @@ -1,38 +1,41 @@ import Link from 'next/link'; import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { Table, ErrorMessage } from '../_shared'; import { GET_RESOURCES_QUERY } from '../../graphql/queries'; const columns = [ { name: 'File', - render: ({ name: resName, title }, { name }) => ( - + key: 'file', + render: ({ name: resName, title, parentName }) => ( + {title || resName} ), }, { name: 'Format', - render: ({ format }) => format, + key: 'format', }, { name: 'Created', - render: ({ created }) => created, + key: 'created', }, { name: 'Updated', - render: ({ last_modified }) => last_modified, + key: 'last_modified', }, { name: 'Link', - render: ({ name }, { name: resName }) => ( - + key: 'link', + render: ({ name: resName, parentName }) => ( + Preview ), }, ]; + export default function Resources({ variables }) { const { loading, error, data } = useQuery(GET_RESOURCES_QUERY, { variables, @@ -50,27 +53,13 @@ export default function Resources({ variables }) { return ( <>

Data Files

-
- - - {columns.map(({ name }) => ( - - ))} - - - - {/* Do not use array index as key */} - {result.resources.map((resource) => ( - - {columns.map(({ name, render }) => ( - - ))} - - ))} - -
{name}
- {render(resource, result)} -
+ ({ + ...resource, + parentName: result.name, + }))} + /> ); } diff --git a/components/resource/About.tsx b/components/resource/About.tsx index 1faebe39..4968c073 100644 --- a/components/resource/About.tsx +++ b/components/resource/About.tsx @@ -1,5 +1,5 @@ import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { Table, ErrorMessage } from '../_shared'; import { GET_RESOURCES_QUERY } from '../../graphql/queries'; const columns = [ @@ -64,29 +64,5 @@ export default function About({ variables }) { const resource = result.resources.find( (item) => item.name === variables.resource ); - return ( - <> -
- - - {columns.map(({ key, name }) => ( - - ))} - - - - - {columns.map(({ key, render }) => ( - - ))} - - -
- {name} -
- {(render && typeof render === 'function' && render(resource)) || - resource[key]} -
- - ); + return ; } From ff134a02f901da9424f11acbbdda94aea7a6857c Mon Sep 17 00:00:00 2001 From: Tavares Hansen Date: Mon, 3 Aug 2020 19:21:09 -0700 Subject: [PATCH 5/7] [refactor][x]: move reusable ErrorMessage component to _shared --- components/{ => _shared}/Error.tsx | 0 components/_shared/Table.tsx | 3 ++- components/_shared/index.ts | 4 ++++ components/dataset/Org.tsx | 2 +- components/home/Recent.tsx | 2 +- components/resource/DataExplorer.tsx | 2 +- components/search/List.tsx | 2 +- components/search/Total.tsx | 2 +- components/static/List.tsx | 2 +- components/static/Page.tsx | 2 +- components/static/Post.tsx | 2 +- 11 files changed, 14 insertions(+), 9 deletions(-) rename components/{ => _shared}/Error.tsx (100%) create mode 100644 components/_shared/index.ts diff --git a/components/Error.tsx b/components/_shared/Error.tsx similarity index 100% rename from components/Error.tsx rename to components/_shared/Error.tsx diff --git a/components/_shared/Table.tsx b/components/_shared/Table.tsx index 0f824191..a0869498 100644 --- a/components/_shared/Table.tsx +++ b/components/_shared/Table.tsx @@ -24,7 +24,8 @@ const Table: React.FC = ({ columns, data, className }) => { {columns.map(({ key, render }) => ( ))} diff --git a/components/_shared/index.ts b/components/_shared/index.ts new file mode 100644 index 00000000..9d5cf16c --- /dev/null +++ b/components/_shared/index.ts @@ -0,0 +1,4 @@ +import Table from './Table'; +import ErrorMessage from './Error'; + +export { Table, ErrorMessage }; diff --git a/components/dataset/Org.tsx b/components/dataset/Org.tsx index 6b290574..69314426 100644 --- a/components/dataset/Org.tsx +++ b/components/dataset/Org.tsx @@ -1,6 +1,6 @@ import Link from 'next/link'; import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { ErrorMessage } from '../_shared'; import { GET_ORG_QUERY } from '../../graphql/queries'; export default function Org({ variables }) { diff --git a/components/home/Recent.tsx b/components/home/Recent.tsx index 351c98b4..c67f7281 100644 --- a/components/home/Recent.tsx +++ b/components/home/Recent.tsx @@ -1,6 +1,6 @@ import Link from 'next/link'; import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { ErrorMessage } from '../_shared'; import { SEARCH_QUERY } from '../../graphql/queries'; function Recent() { diff --git a/components/resource/DataExplorer.tsx b/components/resource/DataExplorer.tsx index 7cba7853..7062a933 100644 --- a/components/resource/DataExplorer.tsx +++ b/components/resource/DataExplorer.tsx @@ -1,5 +1,5 @@ import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { ErrorMessage } from '../_shared'; import { GET_RESOURCES_QUERY } from '../../graphql/queries'; export default function DataExplorer({ variables }) { diff --git a/components/search/List.tsx b/components/search/List.tsx index 49e291ec..b13e1f85 100644 --- a/components/search/List.tsx +++ b/components/search/List.tsx @@ -1,6 +1,6 @@ import { useQuery } from '@apollo/react-hooks'; import Item from './Item'; -import ErrorMessage from '../Error'; +import { ErrorMessage } from '../_shared'; import { SEARCH_QUERY } from '../../graphql/queries'; export default function List({ variables }) { diff --git a/components/search/Total.tsx b/components/search/Total.tsx index ecc414e0..0e688021 100644 --- a/components/search/Total.tsx +++ b/components/search/Total.tsx @@ -1,5 +1,5 @@ import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { ErrorMessage } from '../_shared'; import { GET_TOTAL_COUNT_QUERY } from '../../graphql/queries'; export default function Total({ variables }) { diff --git a/components/static/List.tsx b/components/static/List.tsx index f870d61c..db73b895 100644 --- a/components/static/List.tsx +++ b/components/static/List.tsx @@ -1,6 +1,6 @@ import parse from 'html-react-parser'; import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { ErrorMessage } from '../_shared'; import { GET_POSTS_QUERY } from '../../graphql/queries'; export default function List() { diff --git a/components/static/Page.tsx b/components/static/Page.tsx index c0db6749..81c4122f 100644 --- a/components/static/Page.tsx +++ b/components/static/Page.tsx @@ -1,6 +1,6 @@ import parse from 'html-react-parser'; import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { ErrorMessage } from '../_shared'; import { GET_PAGE_QUERY } from '../../graphql/queries'; export default function Page({ variables }) { diff --git a/components/static/Post.tsx b/components/static/Post.tsx index c88dcc52..a698e1b1 100644 --- a/components/static/Post.tsx +++ b/components/static/Post.tsx @@ -1,6 +1,6 @@ import parse from 'html-react-parser'; import { useQuery } from '@apollo/react-hooks'; -import ErrorMessage from '../Error'; +import { ErrorMessage } from '../_shared'; import { GET_PAGE_QUERY } from '../../graphql/queries'; export default function Post({ variables }) { From 773906907753a801d022f2da1b190d4225387638 Mon Sep 17 00:00:00 2001 From: Tavares Hansen Date: Tue, 4 Aug 2020 02:08:00 -0700 Subject: [PATCH 6/7] [misc][xs]: add missing key --- components/_shared/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_shared/Table.tsx b/components/_shared/Table.tsx index a0869498..cc0ca0e4 100644 --- a/components/_shared/Table.tsx +++ b/components/_shared/Table.tsx @@ -22,7 +22,7 @@ const Table: React.FC = ({ columns, data, className }) => { {data.map((item) => ( {columns.map(({ key, render }) => ( -
{(render && typeof render === 'function' && render(item)) || - item[key]} + item[key] || + ''}
+ {(render && typeof render === 'function' && render(item)) || item[key] || ''} From 9908d887ce8d35c142e54bd9d743f025cf6bb241 Mon Sep 17 00:00:00 2001 From: Tavares Hansen Date: Tue, 4 Aug 2020 02:09:58 -0700 Subject: [PATCH 7/7] [misc][xs]: fix minor issue --- components/resource/About.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/resource/About.tsx b/components/resource/About.tsx index 4968c073..1b4f6b7d 100644 --- a/components/resource/About.tsx +++ b/components/resource/About.tsx @@ -6,9 +6,7 @@ const columns = [ { name: 'Name', key: 'name', - render: ({ name, id }) => { - name || id; - }, + render: ({ name, id }) => name || id, }, { name: 'Title',