Fixes Bug from the Bugswatter board and updates react to 17.x (#21)

* Update React versions

* Use local Swagger version instead of upstream

* Fix random semicolon

* Fix some prop types errors in console

* Add custom PageNotFound template

* footer fixes and add results numbers to search

* Fix placement of search results text

package.json

@@ -80,13 +80,13 @@
     "jest-axe": "^4.1.0",
     "node-sass": "^4.13.1",
     "prettier": "^1.16.0",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^17.0.2",
     "sass-loader": "^7.1.0",
     "url-loader": "^1.1.2"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "files": [
     "lib",

src/components/ResourceHeader/index.jsx

@@ -39,7 +39,7 @@ const ResourceHeader = ({ setTablePadding, id, distribution, includeFiltered, in
       <div className="ds-l-row ds-u-align-items--center">
         <div className="ds-l-col--6">
           <DataTablePageResults
-            totalRows={totalRows}
+            totalRows={parseInt(totalRows)}
             limit={limit}
             offset={offset}
           />

src/components/ResourcePreview/index.jsx

@@ -47,7 +47,7 @@ const ResourceContent = ({tablePadding, id, options}) => {
         data={value.items}
         columns={prepareColumns(value.columns, value.schema[id])}
         schema={value.schema}
-        totalRows={value.totalRows}
+        totalRows={parseInt(value.totalRows)}
         limit={value.limit}
         offset={value.offset}
         loading={value.loading}

src/index.js

@@ -17,6 +17,7 @@ export { default as Breadcrumb } from './components/Breadcrumb';
 export { default as TransformedDate } from './components/TransformedDate';
 
 // Templates
+export { default as PageNotFound } from './templates/PageNotFound';
 export { default as Footer } from './templates/Footer';
 export { default as Dataset } from './templates/Dataset';
 export { default as DatasetSearch } from './templates/DatasetSearch';

src/styles/scss/templates/footer.scss

@@ -2,6 +2,7 @@
 
 .dc-c-footer {
   background-color: white;
+  padding-top: 100px;
   ul {
     margin: 0;
     padding: 0;

src/templates/APIPage/index.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ApiDocs } from "@civicactions/data-catalog-components";
+import SwaggerUI from 'swagger-ui-react';
 
 const APIPage = () => (
   <section className="ds-l-container">
-    <ApiDocs endpoint={process.env.REACT_APP_ROOT_URL} />
+    <SwaggerUI url={`${process.env.REACT_APP_ROOT_URL}?authentication=false`} docExpansion={'list'} />;
   </section>
 );
 

src/templates/Dataset/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { ApiDocs } from "@civicactions/data-catalog-components";
-import { useMetastoreDataset, Resource, prepareColumns } from '@civicactions/data-catalog-services';
+import SwaggerUI from 'swagger-ui-react';
+import { useMetastoreDataset, Resource } from '@civicactions/data-catalog-services';
 import { Badge, Button } from '@cmsgov/design-system';
 import ResourcePreview from '../../components/ResourcePreview';
 import ResourceHeader from '../../components/ResourceHeader';
@@ -17,7 +17,11 @@ const Dataset = ({ id, rootUrl }) => {
     limit: 10
   }
   const [tablePadding, setTablePadding] = useState('ds-u-padding-y--1')
-  const { dataset, } = useMetastoreDataset(id, rootUrl);
+  const metastore = useMetastoreDataset(id, rootUrl);
+  const { dataset, } = metastore;
+
+  console.log(metastore)
+
   const rawDate = new Date(dataset.modified);
   let modifiedDate = '';
   let options = { year: 'numeric', month: 'long', day: 'numeric' };
@@ -61,10 +65,7 @@ const Dataset = ({ id, rootUrl }) => {
           {dataset.identifier &&
             <div ref={apiDocs}>
               <h2>Try the API</h2>
-              <ApiDocs 
-                endpoint={`${process.env.REACT_APP_ROOT_URL}`}
-                datasetID={dataset.identifier}
-              />
+              <SwaggerUI url={`${process.env.REACT_APP_ROOT_URL}/metastore/schemas/dataset/items/${dataset.identifier}/docs`} docExpansion={'list'} />
             </div>
           }
 

src/templates/DatasetSearch/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import qs from 'qs';
 import { SearchPaginationResults } from '@civicactions/data-catalog-components';
 import { useSearchAPI, separateFacets } from '@civicactions/data-catalog-services';
@@ -44,7 +44,7 @@ export function transformUrlParamsToSearchObject(searchParams, facetList) {
 
 
 const DatasetSearch = ({rootUrl, location}) => {
-  console.log(decodeURI(location.search))
+  const [currentResultNumbers, setCurrentResultNumbers] = useState(null) 
   const {
     fulltext,
     selectedFacets,
@@ -73,7 +73,16 @@ const DatasetSearch = ({rootUrl, location}) => {
     const searchParams = updateUrl(selectedFacets, fulltext, sort)
     window.history.pushState({}, '', `${url.origin}${url.pathname}${searchParams}`);
   },[fulltext, selectedFacets, sort])
-
+  useEffect(() => {
+    const baseNumber = Number(totalItems) > 0 ? 1 : 0;
+    const startingNumber = baseNumber + ((Number(pageSize) * Number(page + 1)) - Number(pageSize))
+    const endingNumber = (Number(pageSize) * Number(page + 1)); 
+    setCurrentResultNumbers({
+      total: Number(totalItems),
+      startingNumber: startingNumber,
+      endingNumber: endingNumber
+    })
+  }, [totalItems, pageSize, page])
 
   return(
     <section className="ds-l-container">
@@ -105,10 +114,18 @@ const DatasetSearch = ({rootUrl, location}) => {
               Search
             </Button>
           </form>
-          <div className="ds-u-display--flex ds-u-justify-content--between">
-            <p className="ds-u-margin-y--0">
-              {selectedFacetsMessage(selectedFacets, {theme: 'Categories', keyword: 'Tags'})}
-            </p>
+          <div className="ds-u-display--flex ds-u-justify-content--between ds-u-align-items--end">
+            <div>
+              {currentResultNumbers
+                && (
+                  <p className="ds-u-margin-y--0">Showing {currentResultNumbers.startingNumber} - {currentResultNumbers.endingNumber} of {currentResultNumbers.total} datasets</p>
+                )
+              }
+              <p className="ds-u-margin-y--0">
+                {selectedFacetsMessage(selectedFacets, {theme: 'Categories', keyword: 'Tags'})}
+              </p>
+            </div>
+
             <Button
               className="ds-u-padding--0 dc-c-clear-filters"
               variation="transparent"
@@ -117,13 +134,6 @@ const DatasetSearch = ({rootUrl, location}) => {
               Clear all filters
             </Button>
           </div>
-          {/* <p className="ds-u-text-align--center ds-u-color--gray">{`[${items.length} ${items.length === 1 ? 'entry' : 'entries'} total on page]`}</p> */}
-          {/* <SearchPaginationResults
-            total={Number(totalItems)}
-            pageSize={Number(pageSize)}
-            currentPage={Number(page + 1)}
-          /> */}
-
           <ol className="dc-dataset-search-list ds-u-padding--0">
             {items.map((item) => (
               <li className="ds-u-padding--0">

src/templates/Footer/index.jsx

@@ -31,7 +31,7 @@ const Footer = ({
                   <p>{emailBody}</p>
                 </div>
                 <div className="ds-l-md-col--4 ds-u-padding-left--7">
-                  {/* <Button href={emailLink}>{emailButton}</Button> */}
+                  <Button href={emailLink}>{emailButton}</Button>
                 </div>
               </div>
             </div>
@@ -226,9 +226,18 @@ Footer.propTypes = {
     )
   }).isRequired,
   socialMediaLinks: PropTypes.shape({
-    facebook: PropTypes.string,
-    twitter: PropTypes.string,
-    linkedin: PropTypes.string,
+    facebook: PropTypes.shape({
+      title: PropTypes.string,
+      url: PropTypes.string,
+    }),
+    twitter: PropTypes.shape({
+      title: PropTypes.string,
+      url: PropTypes.string,
+    }),
+    linkedin: PropTypes.shape({
+      title: PropTypes.string,
+      url: PropTypes.string,
+    }),
   }),
   hhsLogo: PropTypes.string.isRequired,
   cmsLogo: PropTypes.string.isRequired,

src/templates/PageNotFound/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const PageNotFound = ({siteUrl, content}) => {
+  return (
+    <section className="ds-l-container">
+      {content
+        ? (
+          content
+        ) : (
+          <>
+            <h1>Error: Page not found</h1>
+            <p>We're sorry, but there is no {siteUrl} web page that matches your entry. You may have been directed here because:</p>
+            <ol>
+              <li>The address you typed contains a typo;</li>
+              <li>The requested page may have expired or;</li>
+              <li>The requested page may have been moved.</li>
+            </ol>
+            <p><span className="ds-u-font-weight--bold">Note:</span> If you were using a bookmark, please reset it once you find the correct page.</p>
+          </>
+        )
+      }
+    </section>
+  )
+}
+
+export default PageNotFound;