Improve the async example

riccardo-forina · Oct 11, 2019 · 1708499 · 1708499
1 parent 5ecb8f2
commit 1708499
Show file tree

Hide file tree

Showing 32 changed files with 841 additions and 299 deletions.
diff --git a/example/app.tsx b/example/app.tsx
@@ -12,15 +12,15 @@ const navItems = [
   {
     title: 'Overview',
     to: '/',
-    exact: true
+    exact: true,
   },
   {
     title: 'Getting Started',
     to: '/getting-started',
     items: [
       { to: '/getting-started/installation', title: 'Installation' },
       { to: '/getting-started/usage', title: 'Usage' },
-    ]
+    ],
   },
   {
     title: 'API',
@@ -38,25 +38,31 @@ const navItems = [
       { to: '/api/useBreadcrumb', title: 'useBreadcrumb' },
       { to: '/api/useDocumentTitle', title: 'useDocumentTitle' },
     ],
-  }, {
+  },
+  {
     title: 'Examples',
     to: '/examples',
     items: [
-      { to: '/examples/async-data-list', title: 'Async Data List' },
+      { to: '/examples/async-data-list-rest', title: 'Async Data List (REST)' },
+      { to: '/examples/async-data-list-graphql', title: 'Async Data List (Graphql)' },
     ],
   },
 ];
 
 const getOverviewPage = () => import('./pages/OverviewPage');
 const getInstallationPage = () => import('./pages/InstallationPage');
 const getUsagePage = () => import('./pages/UsagePage');
-const getAsyncDataList = () => import('./pages/AsyncDataList');
+const getAsyncDataListRest = () => import('./pages/AsyncDataListRestPage');
+const getAsyncDataListGraphQL = () => import('./pages/AsyncDataListGraphQLPage');
 
 export const App = () => {
   const history = useHistory();
-  const logoProps = React.useMemo(() => ({
-    onClick: () => history.push('/')
-  }), [history]);
+  const logoProps = React.useMemo(
+    () => ({
+      onClick: () => history.push('/'),
+    }),
+    [history]
+  );
   return (
     <AppLayout
       logo={Logo}
@@ -66,34 +72,27 @@ export const App = () => {
       navGroupsStyle={'expandable'}
     >
       <SwitchWith404>
-        <LazyRoute
-          path='/'
-          exact={true}
-          getComponent={getOverviewPage}
-        />
+        <LazyRoute path="/" exact={true} getComponent={getOverviewPage} />
         <Redirect
           path={'/getting-started'}
           to={'/getting-started/installation'}
           exact={true}
         />
         <LazyRoute
-          path='/getting-started/installation'
+          path="/getting-started/installation"
           getComponent={getInstallationPage}
         />
+        <LazyRoute path="/getting-started/usage" getComponent={getUsagePage} />
+        <Redirect path="/api" to={'/api/AppLayout'} exact={true} />
         <LazyRoute
-          path='/getting-started/usage'
-          getComponent={getUsagePage}
-        />
-        <Redirect
-          path='/api'
-          to={'/api/AppLayout'}
-          exact={true}
+          path="/examples/async-data-list-rest/:page?"
+          getComponent={getAsyncDataListRest}
         />
         <LazyRoute
-          path='/examples/async-data-list/:page?'
-          getComponent={getAsyncDataList}
+          path="/examples/async-data-list-graphql/:page?"
+          getComponent={getAsyncDataListGraphQL}
         />
       </SwitchWith404>
     </AppLayout>
   );
-};
+};
diff --git a/example/components/AsyncDataListGraphQLHeader.tsx b/example/components/AsyncDataListGraphQLHeader.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { PageSection, Text, TextContent, Title } from '@patternfly/react-core';
+import { ExampleLink } from './ExampleLink';
+
+export const AsyncDataListGraphQLHeader: React.FunctionComponent = () => (
+  <PageSection variant={'light'}>
+    <TextContent>
+      <Title size={'3xl'} headingLevel={'h1'}>
+        Async Data List (GraphQL)
+      </Title>
+      <Text>
+        A common pattern is to query a GraphQL endpoint, wait for its results and show
+        the data in a data list. In this example we use <a href={'https://swapi.graph.cool'}>SWApi GraphQL</a> as a sample backend service
+        to show the list of characters in the Star Wars universe.
+      </Text>
+      <Text>
+        <ExampleLink filename={'AsyncDataListGraphQLPage.tsx'}>
+          Source for this example
+        </ExampleLink>
+        .
+      </Text>
+    </TextContent>
+  </PageSection>
+);
diff --git a/example/components/AsyncDataListRestHeader.tsx b/example/components/AsyncDataListRestHeader.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { PageSection, Text, TextContent, Title } from '@patternfly/react-core';
+import { ExampleLink } from './ExampleLink';
+
+export const AsyncDataListRestHeader: React.FunctionComponent = () => (
+  <PageSection variant={'light'}>
+    <TextContent>
+      <Title size={'3xl'} headingLevel={'h1'}>
+        Async Data List (REST)
+      </Title>
+      <Text>
+        A common pattern is to call a REST API, wait for its results and show
+        the data in a data list. In this example we use {' '}
+        <a href={'https://swapi.co'}>SWApi</a> as a sample backend service
+        to show the list of characters in the Star Wars universe.
+      </Text>
+      <Text>
+        <ExampleLink filename={'AsyncDataListRestPage.tsx'}>
+          Source for this example
+        </ExampleLink>
+        .
+      </Text>
+    </TextContent>
+  </PageSection>
+);
diff --git a/example/components/ExampleLink.tsx b/example/components/ExampleLink.tsx
@@ -1,8 +1,16 @@
 import * as React from 'react';
 
-export interface IExampleLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
+export interface IExampleLinkProps
+  extends React.HTMLAttributes<HTMLAnchorElement> {
   filename: string;
 }
 
-export const ExampleLink: React.FunctionComponent<IExampleLinkProps> = ({ filename, ...props }) =>
-  <a href={`https://github.com/riccardo-forina/use-patternfly/tree/master/example/pages/${filename}`} {...props} />
+export const ExampleLink: React.FunctionComponent<IExampleLinkProps> = ({
+  filename,
+  ...props
+}) => (
+  <a
+    href={`https://github.com/riccardo-forina/use-patternfly/tree/master/example/pages/${filename}`}
+    {...props}
+  />
+);
diff --git a/example/components/GettingStarted.tsx b/example/components/GettingStarted.tsx
@@ -1,18 +1,28 @@
 import * as React from 'react';
-import { PageSection, Title, EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody, Button, EmptyStateSecondaryActions } from '@patternfly/react-core';
+import {
+  PageSection,
+  Title,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  Button,
+  EmptyStateSecondaryActions,
+} from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 
-export const GettingStarted: React.FunctionComponent<any> = ({ children, ...props }) => {
+export const GettingStarted: React.FunctionComponent = ({ children }) => {
   return (
-    <PageSection {...props}>
+    <PageSection>
       <EmptyState variant={EmptyStateVariant.full}>
         <EmptyStateIcon icon={CubesIcon} />
         <Title headingLevel="h5" size="lg">
           Empty State (Stub Support Module)
         </Title>
         <EmptyStateBody>
-          This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-          enough to meet a variety of needs.
+          This represents an the empty state pattern in Patternfly 4. Hopefully
+          it's simple enough to use but flexible enough to meet a variety of
+          needs.
         </EmptyStateBody>
         <Button variant="primary">Primary Action</Button>
         <EmptyStateSecondaryActions>
@@ -26,4 +36,4 @@ export const GettingStarted: React.FunctionComponent<any> = ({ children, ...prop
       </EmptyState>
     </PageSection>
   );
-}
+};
diff --git a/example/components/Installation.tsx b/example/components/Installation.tsx
@@ -13,43 +13,56 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Keyword } from './Keyword';
 
-
-export const Installation: React.FunctionComponent<any> = ({ children, ...props }) => {
+export const Installation: React.FunctionComponent = ({ children }) => {
   return (
-    <PageSection {...props}>
+    <PageSection>
       <TextContent>
         <Title size={'3xl'}>Installation</Title>
-        <Text>You can install <Keyword>use-patternfly</Keyword> from npm:</Text>
-          <Text component={'blockquote'}>
-          npm install use-patternfly --save
+        <Text>
+          You can install <Keyword>use-patternfly</Keyword> from npm:
         </Text>
+        <Text component={'blockquote'}>npm install use-patternfly --save</Text>
         <Text>Or if you're using Yarn:</Text>
-        <Text component={'blockquote'}>
-          yarn add use-patternfly
-        </Text>
+        <Text component={'blockquote'}>yarn add use-patternfly</Text>
         <Text>
           This package requires the following packages as peer dependencies:
         </Text>
         <TextList>
-          <TextListItem><Keyword>@patternfly/react-core</Keyword></TextListItem>
-          <TextListItem><Keyword>@patternfly/react-styles</Keyword></TextListItem>
-          <TextListItem><Keyword>@patternfly/react-icons</Keyword></TextListItem>
-          <TextListItem><Keyword>react-router</Keyword></TextListItem>
-          <TextListItem><Keyword>react-router-dom</Keyword></TextListItem>
+          <TextListItem>
+            <Keyword>@patternfly/react-core</Keyword>
+          </TextListItem>
+          <TextListItem>
+            <Keyword>@patternfly/react-styles</Keyword>
+          </TextListItem>
+          <TextListItem>
+            <Keyword>@patternfly/react-icons</Keyword>
+          </TextListItem>
+          <TextListItem>
+            <Keyword>react-router</Keyword>
+          </TextListItem>
+          <TextListItem>
+            <Keyword>react-router-dom</Keyword>
+          </TextListItem>
         </TextList>
         <Text>
-          Please make sure to install them as well. You'll need <Keyword>react@16.8.0</Keyword>
+          Please make sure to install them as well. You'll need{' '}
+          <Keyword>react@16.8.0</Keyword>
           or later since the package uses hooks.
         </Text>
         <Text>
-          Some of the provided components and hooks could require additional dependencies.
+          Some of the provided components and hooks could require additional
+          dependencies.
         </Text>
       </TextContent>
       <Flex>
-        <FlexItem breakpointMods={[{modifier: 'align-right', breakpoint: 'sm'}]}>
-          <Link to={'/getting-started/usage'}><Button component={'div'}>Usage</Button></Link>
+        <FlexItem
+          breakpointMods={[{ modifier: 'align-right', breakpoint: 'sm' }]}
+        >
+          <Link to={'/getting-started/usage'}>
+            <Button component={'div'}>Usage</Button>
+          </Link>
         </FlexItem>
       </Flex>
     </PageSection>
   );
-}
+};
diff --git a/example/components/Keyword.tsx b/example/components/Keyword.tsx
@@ -7,12 +7,10 @@ const styles = StyleSheet.create({
     backgroundColor: `var(--pf-global--BackgroundColor--light-200)`,
     fontFamily: 'monospace',
     padding: '3px',
-    borderRadius: '3px'
-  }
+    borderRadius: '3px',
+  },
 });
 
-export const Keyword: React.FunctionComponent = props =>
-  <span
-    {...props}
-    className={css(styles.keyword)}
-  />;
+export const Keyword: React.FunctionComponent = props => (
+  <span {...props} className={css(styles.keyword)} />
+);