Merge pull request #13 from sighrobot/og

Updates for social/OG and calendar tweak

components/calendar-day.js

@@ -29,12 +29,12 @@ export default class Day extends React.PureComponent {
   getCount = (props = this.props) => get(props, 'count.count')
 
   componentDidMount() {
-    if (this.props.date && !this.getCount()) { !this.props.isActive && this.fetchCount(this.props.date); }
+    if (this.props.date && !this.getCount()) { this.fetchCount(this.props.date); }
   }
 
   componentWillReceiveProps(nextProps) {
     if (moment(nextProps.date).diff(this.props.date, 'days') && !this.getCount(nextProps)) {
-      !nextProps.isActive && this.fetchCount(nextProps.date);
+      this.fetchCount(nextProps.date);
     }
   }
 
@@ -46,7 +46,7 @@ export default class Day extends React.PureComponent {
         <span className='calendar-day-count'>
           <strong>{formatNum(this.getCount())}{this.props.count.exact ? '' : '+'}</strong>
           &nbsp;
-          <small>{this.getCount() === 1 ? 'record' : 'records'}</small>
+          <small>{this.getCount() === 1 ? 'dataset' : 'datasets'}</small>
 
           <style jsx>{`
             .calendar-day-count {

components/card.js

@@ -223,7 +223,11 @@ const Card = (props) => (
       {getCellData2(props.dataset, props.todayAsISO)}
     </div>
     <a className='dataset-link' target="_blank" href={`https://public.enigma.com/datasets/${props.dataset.id}?filter=${constructDatasetFilter(props.date)}`}>
-      View all {props.dataset.current_snapshot.table_rows.count.toLocaleString()} records&hellip;
+      {
+        props.dataset.current_snapshot.table_rows.count === 1
+        ? 'View this record'
+        : `View all ${props.dataset.current_snapshot.table_rows.count.toLocaleString()} records`
+      }
     </a>
 
     <style jsx>{`

components/head.js

@@ -1,9 +1,9 @@
 import NextHead from 'next/head'
 import { string } from 'prop-types'
 
-const defaultDescription = ''
-const defaultOGURL = ''
-const defaultOGImage = ''
+const defaultDescription = 'What\'s happening in public data today?'
+const defaultOGURL = 'https://publicdata.today/'
+const defaultOGImage = 'https://publicdata.today/static/preview2.png'
 
 const Head = (props) => (
   <NextHead>
@@ -22,6 +22,8 @@ const Head = (props) => (
     <meta name="twitter:site" content={props.url || defaultOGURL} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:image" content={props.ogImage || defaultOGImage} />
+    <meta name="twitter:creator" content='@sighrobot' />
+
     <meta property="og:image" content={props.ogImage || defaultOGImage} />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />

pages/index.js

@@ -59,10 +59,6 @@ export default class App extends React.PureComponent {
         this.setState((state) => ({
           datasets: uniqBy(flattened, 'id').map((d) => pick(d, 'description', 'id', 'display_name', 'name', 'current_snapshot', 'ancestors', 'score')),
           isLoading: false,
-          countsByDate: {
-            ...state.countsByDate,
-            [getISO(this.state.date)]: {count: count, exact: flattened.length !== 1000},
-          },
         }));
       });
     });
@@ -97,6 +93,7 @@ export default class App extends React.PureComponent {
       <div className='content'>
         {this.state.datasets ? this.state.datasets.map(this.renderCard) : null}
 
+        {this.maybeRenderSearchLink()}
         <style jsx>{`
           .content {
             height: 100%;
@@ -109,10 +106,42 @@ export default class App extends React.PureComponent {
     );
   }
 
+  maybeRenderSearchLink() {
+    if (!this.state.isLoading) {
+      return (
+        <aside className='search-link-wrapper'>
+          <h3>Looking for more data?</h3>
+          <p>Full search results are available on Enigma Public!</p>
+
+          <a target="_blank" href={`https://public.enigma.com/search/${encodeURIComponent(createStringsForDate(this.state.date).join(' || '))}`}>
+            View all of today's datasets
+          </a>
+
+          <style jsx>{`
+            .search-link-wrapper {
+              padding: 100px 0;
+              margin: 0 auto;
+              max-width: 1200px;
+            }
+
+            h3 {
+              margin: 0;
+            }
+            a:after {
+              content: ' ↗';
+            }
+          `}</style>
+        </aside>
+      );
+    }
+  }
+
   render() {
     return (
       <div className='wrapper'>
-        <Head title={`${moment(this.state.date).format('MMMM D, YYYY')} – Today in Public Data`} />
+        <Head
+          title={`${moment(this.state.date).format('MMMM D, YYYY')} – Today in Public Data`}
+          description={`What's happening in public data on ${moment(this.state.date).format('MMMM D, YYYY')}?`}/>
 
         <Nav
           date={this.state.date}
@@ -139,8 +168,6 @@ export default class App extends React.PureComponent {
             flex-shrink: 0;
           }
 
-
-
           .wrapper {
             display: flex;
             flex-direction: column

utils/index.js

@@ -3,10 +3,9 @@ import {get} from 'lodash';
 
 const API_KEY = process.env.API_KEY;
 const API_URL = 'https://public.enigma.com/api/datasets/?&row_limit=1';
+const API_SUMMARY_URL = 'https://public.enigma.com/api/dataset_summary?';
 const OPTIONS = {
-  headers: {
-    'Range': 'resources=0-999',
-  },
+  headers: {'Range': 'resources=0-24'},
 };
 
 if (API_KEY) {
@@ -45,11 +44,11 @@ export const fetchForDateString = (s) => {
 };
 
 export const fetchCountForDateString = (s) => {
-  return fetch(`${API_URL}&query_mode=advanced&query=(${encodeURIComponent(s)})`, {...OPTIONS, 'cache': 'no-store'}).then((response) => {
-    return response.json().then((data) => {
+  return fetch(`${API_SUMMARY_URL}&query_mode=advanced&query=(${encodeURIComponent(s)})`, {'cache': 'no-store'}).then((response) => {
+    return response.json().then((summary) => {
       return {
-        exact: data.length < 1000,
-        count: data.reduce((acc, d) => acc + get(d, 'current_snapshot.table_rows.count', 0), 0),
+        exact: true,
+        count: summary.row_count_summary.reduce((acc, b) => acc + b.count, 0),
       };
     });
   });
@@ -87,11 +86,11 @@ export const formatNum = function(num, fixed) {
 export const getNumDaysPerSide = () => {
   const w = global.innerWidth;
 
-  if (w < 500) { return 1; }
-  // if (w < 570) { return 2; }
-  // if (w < 800) { return 3; }
+  if (w < 450) { return 1; }
+  if (w < 600) { return 2; }
+  if (w < 960) { return 3; }
 
-  return 2;
+  return 4;
 };
 
 export const isToday = (d) => d && moment(d).diff(moment(new Date()), 'days') === 0;