[catalog/org][l]: implemented org page using TailwindUI.
- Removed outdated tests for search page.
This commit is contained in:
anuveyatsu
parent
12df6dba3b
commit
4dfaaad85e
@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import Item from '../../../components/search/Item';
|
||||
|
||||
test('📸 of Input component with empty', () => {
|
||||
const fixture = {
|
||||
name: 'qw',
|
||||
title: '12',
|
||||
organization: null,
|
||||
__typename: 'Package',
|
||||
};
|
||||
const tree = renderer
|
||||
.create(<Item datapackage={fixture} key={0} />)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
@ -1,31 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`📸 of Input component with empty 1`] = `
|
||||
<div
|
||||
className="mb-6"
|
||||
>
|
||||
<h3
|
||||
className="text-xl font-semibold"
|
||||
>
|
||||
<a
|
||||
className="text-primary"
|
||||
href="/@dataset/qw"
|
||||
onClick={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
>
|
||||
12
|
||||
</a>
|
||||
</h3>
|
||||
<a
|
||||
className="text-gray-500 block mt-1"
|
||||
href="/@dataset"
|
||||
onClick={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
>
|
||||
dataset
|
||||
</a>
|
||||
<div
|
||||
className="leading-relaxed mt-2"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
154
examples/catalog/components/org/About.tsx
Normal file
154
examples/catalog/components/org/About.tsx
Normal file
@ -0,0 +1,154 @@
|
||||
import { useQuery } from '@apollo/react-hooks';
|
||||
import * as timeago from 'timeago.js';
|
||||
import { ErrorMessage } from '../_shared';
|
||||
import { GET_ORG_QUERY } from '../../graphql/queries';
|
||||
|
||||
const About: React.FC<{ variables: any }> = ({ variables }) => {
|
||||
const { loading, error, data } = useQuery(GET_ORG_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
|
||||
// more data
|
||||
notifyOnNetworkStatusChange: true,
|
||||
});
|
||||
|
||||
if (error) return <ErrorMessage message="Error loading dataset." />;
|
||||
if (loading) return <div>Loading</div>;
|
||||
|
||||
const { result } = data.org;
|
||||
|
||||
return (
|
||||
<div className="relative bg-white py-16 sm:py-4">
|
||||
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:gap-24 lg:items-start">
|
||||
<div className="relative sm:py-16 lg:py-0">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen"
|
||||
>
|
||||
<div className="absolute inset-y-0 right-1/2 w-full bg-gray-50 rounded-r-3xl lg:right-72" />
|
||||
<svg
|
||||
className="absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12"
|
||||
width={404}
|
||||
height={392}
|
||||
fill="none"
|
||||
viewBox="0 0 404 392"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="02f20b47-fd69-4224-a62a-4c9de5c763f7"
|
||||
x={0}
|
||||
y={0}
|
||||
width={20}
|
||||
height={20}
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect
|
||||
x={0}
|
||||
y={0}
|
||||
width={4}
|
||||
height={4}
|
||||
className="text-gray-200"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width={404}
|
||||
height={392}
|
||||
fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0 lg:max-w-none lg:py-20">
|
||||
{/* Testimonial card*/}
|
||||
<div className="relative pt-64 pb-10 rounded-2xl shadow-xl overflow-hidden">
|
||||
<img
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
src={
|
||||
result.image ||
|
||||
'https://datahub.io/static/img/datahub-cube-edited.svg'
|
||||
}
|
||||
alt={result.title || result.name}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-indigo-500 mix-blend-multiply" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-indigo-600 via-indigo-600 opacity-90" />
|
||||
<div className="relative px-8">
|
||||
<blockquote className="mt-8">
|
||||
<div className="relative text-lg font-medium text-white md:flex-grow">
|
||||
<p className="relative">
|
||||
{result.description ||
|
||||
"This organization doesn't have a description."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer className="mt-4">
|
||||
<p className="text-base font-semibold text-indigo-200">
|
||||
{result.title}
|
||||
</p>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
|
||||
{/* Content area */}
|
||||
<div className="pt-12 sm:pt-16 lg:pt-20">
|
||||
<h1 className="text-3xl text-gray-900 font-extrabold tracking-tight sm:text-4xl">
|
||||
{result.title || result.name}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Stats section */}
|
||||
<div className="mt-10">
|
||||
<dl className="grid grid-cols-2 gap-x-4 gap-y-8">
|
||||
<div className="border-t-2 border-gray-100 pt-6">
|
||||
<dt className="text-base font-medium text-gray-500">
|
||||
Datasets
|
||||
</dt>
|
||||
<dd className="text-3xl font-extrabold tracking-tight text-gray-900">
|
||||
{result.total}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="border-t-2 border-gray-100 pt-6">
|
||||
<dt className="text-base font-medium text-gray-500">Users</dt>
|
||||
<dd className="text-3xl font-extrabold tracking-tight text-gray-900">
|
||||
{result.users && result.users.length}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="border-t-2 border-gray-100 pt-6">
|
||||
<dt className="text-base font-medium text-gray-500">
|
||||
Followers
|
||||
</dt>
|
||||
<dd className="text-3xl font-extrabold tracking-tight text-gray-900">
|
||||
{result.followers}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="border-t-2 border-gray-100 pt-6">
|
||||
<dt className="text-base font-medium text-gray-500">
|
||||
Created
|
||||
</dt>
|
||||
<dd className="text-3xl font-extrabold tracking-tight text-gray-900">
|
||||
{timeago.format(result.created)}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div className="mt-10">
|
||||
<a
|
||||
href={`/search?fq=organization:${result.name}`}
|
||||
className="text-base font-medium text-indigo-600"
|
||||
>
|
||||
{' '}
|
||||
Datasets by {result.title || result.name}{' '}
|
||||
<span aria-hidden="true">→</span>{' '}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
49
examples/catalog/pages/[org]/index.tsx
Normal file
49
examples/catalog/pages/[org]/index.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import { GetServerSideProps } from 'next';
|
||||
import { useQuery } from '@apollo/react-hooks';
|
||||
import Head from 'next/head';
|
||||
import { initializeApollo } from '../../lib/apolloClient';
|
||||
import Nav from '../../components/home/Nav';
|
||||
import About from '../../components/org/About';
|
||||
import Footer from '../../components/home/Footer';
|
||||
import { GET_ORG_QUERY } from '../../graphql/queries';
|
||||
|
||||
const Org: React.FC<{ variables: any }> = ({ variables }) => {
|
||||
const { data, loading } = useQuery(GET_ORG_QUERY, { variables });
|
||||
|
||||
if (loading) return <div>Loading</div>;
|
||||
|
||||
const { result } = data.org;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Portal | {result.title || result.name}</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Nav />
|
||||
<About variables={variables} />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (context) => {
|
||||
const apolloClient = initializeApollo();
|
||||
const variables = {
|
||||
id: context.query.org.replace('@', ''),
|
||||
};
|
||||
|
||||
await apolloClient.query({
|
||||
query: GET_ORG_QUERY,
|
||||
variables,
|
||||
});
|
||||
|
||||
return {
|
||||
props: {
|
||||
initialApolloState: apolloClient.cache.extract(),
|
||||
variables,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default Org;
|
||||
Loading…
x
Reference in New Issue
Block a user