Add dialog to notify of Reddit's ban of Pushshift

src/pages/about.js

@@ -46,6 +46,14 @@ const About = props => {
           uses <a href='https://pushshift.io/'>Jason Baumgartner&apos;s service</a> for getting removed comments.
         </p>
         <h2 className='todo'>FAQ</h2>
+        <div id='banned' className={!hash || hash == '#banned' ? 'highlighted' : undefined}>
+        <b className='question'><Link to='/about#banned'>Q:</Link> Why do new posts all have zero comments?</b>
+        <p>
+          On May 1st, Reddit banned Pushshift from the Reddit API.
+          Since Unddit relies on Pushshift to find removed and deleted comments and posts, any posts made after this time will appear to have zero comments on Unddit.
+          The official announcement is <a href='https://old.reddit.com/r/modnews/comments/134tjpe/reddit_data_api_update_changes_to_pushshift_access/' target='_blank' rel='noopener'>available here</a>.
+        </p>
+        </div>
         <div id='delete' className={hash == '#delete' ? 'highlighted' : undefined}>
         <b className='question'><Link to='/about#delete'>Q:</Link> I posted some sensitive information on Reddit. Can you delete this from your page?</b>
         <p>

src/pages/thread/Modal.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import ReactDom from "react-dom"
+
+const Modal = props => {
+  return <div className='modal'>
+    <div className='modal-content'>
+      <div className='modal-header'>
+        <span className='close' onClick={() => props.closeModal()}>&times;</span>
+        <h2>Pushshift Ban</h2>
+      </div>
+      <div className='modal-body'>
+        <p>
+          On May 1st, Reddit banned Pushshift from the Reddit API.
+          Since Unddit relies on Pushshift to find removed and deleted comments and posts, any posts made after this time will appear to have zero comments on Unddit.
+          The official announcement is <a href='https://old.reddit.com/r/modnews/comments/134tjpe/reddit_data_api_update_changes_to_pushshift_access/' target='_blank' rel='noopener'>available here</a>.
+        </p>
+        <input onClick={() => props.closeModalPermanent()} type='button' value='Do not show this message again' />
+      </div>
+    </div>
+  </div>
+}
+
+export default Modal

src/pages/thread/index.js

@@ -12,13 +12,14 @@ import {
   getCommentsFromIds,
   chunkSize as pushshiftChunkSize
 } from '../../api/pushshift'
-import { isDeleted, isRemoved, sleep } from '../../utils'
+import { isDeleted, isRemoved, sleep, get, put } from '../../utils'
 import { connect, constrainMaxComments } from '../../state'
 import Post from '../common/Post'
 import CommentSection from './CommentSection'
 import SortBy from './SortBy'
 import CommentInfo from './CommentInfo'
 import LoadMore from './LoadMore'
+import Modal from './Modal'
 
 // A FIFO queue with items pushed in individually, and shifted out in an Array of chunkSize
 class ChunkedQueue {
@@ -53,6 +54,9 @@ class ChunkedQueue {
 // The .firstCreated of the contig containing a post's first comment (see contigs below)
 const EARLIEST_CREATED = 1
 
+// Key for localStorage
+const dismissModalKey = 'modal'
+
 class Thread extends React.Component {
   state = {
     post: {},
@@ -64,7 +68,8 @@ class Thread extends React.Component {
     allCommentsFiltered: false,
     loadedAllComments: false,
     loadingComments: true,
-    reloadingComments: false
+    reloadingComments: false,
+    showModal: !get(dismissModalKey)
   }
   nextMoreContextAvail = true
   nextAllCommentsFiltered = false
@@ -701,6 +706,12 @@ class Thread extends React.Component {
             />
           </>
         }
+        {this.state.showModal &&
+          <Modal
+            closeModal={() => this.setState({showModal: false})}
+            closeModalPermanent={() => {this.setState({showModal: false}); put(dismissModalKey, true)}}
+          />
+        }
       </>
     )
   }

src/sass/index.sass

@@ -7,3 +7,4 @@
 @import thread
 @import subreddit
 @import search
+@import modal

src/sass/modal.sass

@@ -0,0 +1,61 @@
+.modal
+  display: block
+  position: fixed
+  z-index: 1
+  padding-top: 100px
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+  background-color: rgb(0,0,0)
+  background-color: rgba(0,0,0,0.4)
+
+.modal-content
+  position: relative
+  margin: auto
+  padding: 0
+  border: 1px solid #888
+  width: 80%
+  background-color: var(--background)
+  @media (prefers-color-scheme: light)
+    background-color: var(--l-background)
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
+  -webkit-animation-name: animatetop
+  -webkit-animation-duration: 0.4s
+  animation-name: animatetop
+  animation-duration: 0.4s
+
+@-webkit-keyframes animatetop
+  0%
+    top:-300px
+    opacity:0
+  100%
+    top:0
+    opacity:1
+
+@keyframes animatetop
+  0%
+    top:-300px
+    opacity:0
+  100%
+    top:0
+    opacity:1
+
+.close
+  color: $white
+  float: right
+  font-size: 28px
+  font-weight: bold
+
+.close:hover, .close:focus
+  color: black
+  text-decoration: none
+  cursor: pointer
+
+.modal-header
+  padding: 2px 16px
+  color: $white
+  background-color: $removed
+
+.modal-body
+  padding: 2px 16px 16px