From 1ab6ad4f137cb26a7713a4355ece15afdd7ebff3 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 12 Aug 2021 11:46:03 +1000
Subject: [PATCH] Add back database disabled banner

---
 src/components/DatabaseDisabledMessage.tsx | 24 ++++++++++++++++++++++
 src/modals/SelectMapModal.tsx              |  7 +++++++
 src/modals/SelectTokensModal.tsx           |  7 +++++++
 3 files changed, 38 insertions(+)
 create mode 100644 src/components/DatabaseDisabledMessage.tsx

diff --git a/src/components/DatabaseDisabledMessage.tsx b/src/components/DatabaseDisabledMessage.tsx
new file mode 100644
index 0000000..0a99b79
--- /dev/null
+++ b/src/components/DatabaseDisabledMessage.tsx
@@ -0,0 +1,24 @@
+import { Box, Text } from "theme-ui";
+
+import Link from "./Link";
+
+function DatabaseDisabledMessage({ type }: { type: string }) {
+  return (
+    <Box
+      sx={{
+        textAlign: "center",
+        borderRadius: "2px",
+        gridArea: "1 / 1 / span 1 / span 3",
+      }}
+      bg="highlight"
+      p={1}
+    >
+      <Text as="p" variant="body2">
+        {type} saving is unavailable. See <Link to="/faq#database">FAQ</Link>{" "}
+        for more information.
+      </Text>
+    </Box>
+  );
+}
+
+export default DatabaseDisabledMessage;
diff --git a/src/modals/SelectMapModal.tsx b/src/modals/SelectMapModal.tsx
index 1f5189b..b46a435 100644
--- a/src/modals/SelectMapModal.tsx
+++ b/src/modals/SelectMapModal.tsx
@@ -8,6 +8,7 @@ import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
 import LoadingOverlay from "../components/LoadingOverlay";
+import DatabaseDisabledMessage from "../components/DatabaseDisabledMessage";
 
 import ImageDrop from "../components/image/ImageDrop";
 
@@ -29,6 +30,7 @@ import { useUserId } from "../contexts/UserIdContext";
 import { useAssets } from "../contexts/AssetsContext";
 import { GroupProvider } from "../contexts/GroupContext";
 import { TileDragProvider } from "../contexts/TileDragContext";
+import { useDatabase } from "../contexts/DatabaseContext";
 
 import { Map } from "../types/Map";
 import {
@@ -55,6 +57,8 @@ function SelectMapModal({
 }: SelectMapProps) {
   const { addToast } = useToasts();
 
+  const { databaseStatus } = useDatabase();
+
   const userId = useUserId();
   const {
     maps,
@@ -274,6 +278,9 @@ function SelectMapModal({
                   onDragCancel={() => setIsDraggingMap(false)}
                 >
                   <TilesContainer>
+                    {databaseStatus === "disabled" && (
+                      <DatabaseDisabledMessage type="Map" />
+                    )}
                     <MapTiles
                       mapsById={mapsById}
                       onMapEdit={setEditingMapId}
diff --git a/src/modals/SelectTokensModal.tsx b/src/modals/SelectTokensModal.tsx
index 07863b6..15c4c9e 100644
--- a/src/modals/SelectTokensModal.tsx
+++ b/src/modals/SelectTokensModal.tsx
@@ -8,6 +8,7 @@ import ConfirmModal from "./ConfirmModal";
 
 import Modal from "../components/Modal";
 import LoadingOverlay from "../components/LoadingOverlay";
+import DatabaseDisabledMessage from "../components/DatabaseDisabledMessage";
 
 import ImageDrop from "../components/image/ImageDrop";
 
@@ -34,6 +35,7 @@ import { useAssets } from "../contexts/AssetsContext";
 import { GroupProvider } from "../contexts/GroupContext";
 import { TileDragProvider } from "../contexts/TileDragContext";
 import { useMapStage } from "../contexts/MapStageContext";
+import { useDatabase } from "../contexts/DatabaseContext";
 
 import { TokenState } from "../types/TokenState";
 import {
@@ -54,6 +56,8 @@ function SelectTokensModal({
 }: SelectTokensModalProps) {
   const { addToast } = useToasts();
 
+  const { databaseStatus } = useDatabase();
+
   const userId = useUserId();
   const {
     tokens,
@@ -277,6 +281,9 @@ function SelectTokensModal({
                   onDragCancel={() => setIsDraggingToken(false)}
                 >
                   <TilesContainer>
+                    {databaseStatus === "disabled" && (
+                      <DatabaseDisabledMessage type="Token" />
+                    )}
                     <TokenTiles
                       tokensById={tokensById}
                       onTokenEdit={setEditingTokenId}