Add archive announcement

Author: dismantl

package-lock.json

@@ -14,6 +14,7 @@
     "graphiql": "^0.14.2",
     "react": "^16.14.0",
     "react-app-polyfill": "^1.0.6",
+    "react-cookie": "^4.1.1",
     "react-dom": "^16.14.0",
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
@@ -65,5 +66,5 @@
       "pre-commit": "lint-staged"
     }
   },
-  "proxy": "http://localhost:5000"
+  "proxy": "http://127.0.0.1:5000"
 }

package.json

@@ -7,4 +7,5 @@ flask-restx == 0.5.1
 graphene == 2.1.9
 flask-accepts == 0.18.4
 marshmallow == 3.14.0
-boto3 == 1.18.13
+boto3 == 1.18.13
+werkzeug==2.1.2

server/requirements.txt

@@ -1,6 +1,14 @@
 import React, { Component } from 'react';
-import { getTheme, mergeStyleSets, FontWeights, Modal } from '@fluentui/react';
+import {
+  getTheme,
+  mergeStyleSets,
+  FontWeights,
+  Modal,
+  MessageBar,
+  MessageBarType
+} from '@fluentui/react';
 import { IconButton } from '@fluentui/react/lib/Button';
+import { ArchiveAnnouncement } from './ArchiveModal';
 
 const theme = getTheme();
 const cancelIcon = { iconName: 'Cancel' };
@@ -75,6 +83,9 @@ export default class AboutModal extends Component {
             />
           </div>
           <div className={contentStyles.body}>
+            <MessageBar messageBarType={MessageBarType.warning}>
+              <ArchiveAnnouncement />
+            </MessageBar>
             <p>
               Case Explorer is a web application and set of APIs for exploring
               data scraped from the{' '}

src/AboutModal.jsx

@@ -0,0 +1,3 @@
+.archive-modal .ms-Dialog-main {
+  max-width: 500px;
+}

src/ArchiveModal.css

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
+import { useBoolean } from '@fluentui/react-hooks';
+import { useCookies } from 'react-cookie';
+import './ArchiveModal.css';
+
+const modelProps = {
+  className: 'archive-modal',
+  isBlocking: false,
+  styles: { main: { maxWidth: 800 } }
+};
+const dialogContentProps = {
+  type: DialogType.largeHeader,
+  title: 'Case Explorer will be shutting down soon',
+  styles: {
+    content: {
+      p: { margin: '0px 0px 24px', lineHeight: '1.5em' },
+      a: { outline: 'none' }
+    }
+  }
+};
+
+export function ArchiveAnnouncement() {
+  return (
+    <>
+      <p>
+        At the end of February 2023, Case Explorer will be shutting down until
+        we are able to secure funding for our ongoing database hosting costs.
+        You will still be able to download{' '}
+        <a target="_blank" href="https://exports.mdcaseexplorer.com/">
+          exports of the database
+        </a>
+        .
+      </p>
+      <p>
+        Please note that the database does not contain any cases newer than May
+        2022 due to the MD Judiciary's implementation of anti-scraping
+        technologies.
+      </p>
+    </>
+  );
+}
+
+export default function ArchiveModal() {
+  const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(false);
+  const [cookies, setCookie] = useCookies(['archive']);
+
+  const closeDialog = () => {
+    setCookie('archive', 'true', {
+      expires: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
+    });
+    toggleHideDialog();
+  };
+
+  return (
+    <>
+      {cookies.archive === undefined && (
+        <Dialog
+          hidden={hideDialog}
+          dialogContentProps={dialogContentProps}
+          modalProps={modelProps}
+          onDismiss={closeDialog}
+        >
+          <ArchiveAnnouncement />
+          <DialogFooter>
+            <PrimaryButton onClick={closeDialog} text="OK" />
+          </DialogFooter>
+        </Dialog>
+      )}
+    </>
+  );
+}

src/ArchiveModal.jsx

@@ -18,6 +18,8 @@ import apiName from './ApiName';
 import { useEffect } from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
+import ArchiveModal from './ArchiveModal';
+import { CookiesProvider } from 'react-cookie';
 
 export const version = '0.2';
 
@@ -143,6 +145,7 @@ const App = props => {
   } else {
     return (
       <>
+        <ArchiveModal />
         <Router>
           <Header title={title} version={version} />
           <div className="navbar">
@@ -175,5 +178,10 @@ const App = props => {
 
 if (document.getElementById('root')) {
   initializeIcons();
-  ReactDOM.render(<App />, document.getElementById('root'));
+  ReactDOM.render(
+    <CookiesProvider>
+      <App />
+    </CookiesProvider>,
+    document.getElementById('root')
+  );
 }