Added shared grid context and moved away from calling useContext directly

src/modals/AuthModal.js

@@ -1,14 +1,12 @@
-import React, { useState, useContext, useRef } from "react";
+import React, { useState, useRef } from "react";
 import { Box, Input, Button, Label, Flex } from "theme-ui";
 
-import AuthContext from "../contexts/AuthContext";
+import { useAuth } from "../contexts/AuthContext";
 
 import Modal from "../components/Modal";
 
 function AuthModal({ isOpen }) {
-  const { password, setPassword, setAuthenticationStatus } = useContext(
-    AuthContext
-  );
+  const { password, setPassword, setAuthenticationStatus } = useAuth();
   const [tmpPassword, setTempPassword] = useState(password);
 
   function handleChange(event) {

src/modals/EditMapModal.js

@@ -1,11 +1,11 @@
-import React, { useState, useContext } from "react";
+import React, { useState } from "react";
 import { Button, Flex, Label } from "theme-ui";
 
 import Modal from "../components/Modal";
 import MapSettings from "../components/map/MapSettings";
 import MapEditor from "../components/map/MapEditor";
 
-import MapDataContext from "../contexts/MapDataContext";
+import { useMapData } from "../contexts/MapDataContext";
 
 import { isEmpty } from "../helpers/shared";
 import { getGridDefaultInset } from "../helpers/grid";
@@ -13,7 +13,7 @@ import { getGridDefaultInset } from "../helpers/grid";
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
 function EditMapModal({ isOpen, onDone, map, mapState }) {
-  const { updateMap, updateMapState } = useContext(MapDataContext);
+  const { updateMap, updateMapState } = useMapData();
 
   function handleClose() {
     setMapSettingChanges({});

src/modals/EditTokenModal.js

@@ -1,18 +1,18 @@
-import React, { useState, useContext } from "react";
+import React, { useState } from "react";
 import { Button, Flex, Label } from "theme-ui";
 
 import Modal from "../components/Modal";
 import TokenSettings from "../components/token/TokenSettings";
 import TokenPreview from "../components/token/TokenPreview";
 
-import TokenDataContext from "../contexts/TokenDataContext";
+import { useTokenData } from "../contexts/TokenDataContext";
 
 import { isEmpty } from "../helpers/shared";
 
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
 function EditTokenModal({ isOpen, onDone, token }) {
-  const { updateToken } = useContext(TokenDataContext);
+  const { updateToken } = useTokenData();
 
   function handleClose() {
     setTokenSettingChanges({});

src/modals/ImportExportModal.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useContext, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { Box, Label, Text, Button, Flex } from "theme-ui";
 import streamSaver from "streamsaver";
 import * as Comlink from "comlink";
@@ -7,14 +7,14 @@ import Modal from "../components/Modal";
 import LoadingOverlay from "../components/LoadingOverlay";
 import LoadingBar from "../components/LoadingBar";
 
-import DatabaseContext from "../contexts/DatabaseContext";
+import { useDatabase } from "../contexts/DatabaseContext";
 
 import DatabaseWorker from "worker-loader!../workers/DatabaseWorker"; // eslint-disable-line import/no-webpack-loader-syntax
 
 const worker = Comlink.wrap(new DatabaseWorker());
 
 function ImportDatabaseModal({ isOpen, onRequestClose }) {
-  const { database } = useContext(DatabaseContext);
+  const { database } = useDatabase();
   const [isLoading, setIsLoading] = useState(false);
 
   const backgroundTaskRunningRef = useRef(false);

src/modals/SelectMapModal.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useContext, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { Button, Flex, Label } from "theme-ui";
 import shortid from "shortid";
 import Case from "case";
@@ -17,16 +17,16 @@ import { resizeImage } from "../helpers/image";
 import { useSearch, useGroup, handleItemSelect } from "../helpers/select";
 import {
   getGridDefaultInset,
-  getGridSize,
+  getGridSizeFromImage,
   gridSizeVaild,
 } from "../helpers/grid";
 import Vector2 from "../helpers/Vector2";
 
-import useKeyboard from "../hooks/useKeyboard";
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
-import MapDataContext from "../contexts/MapDataContext";
-import AuthContext from "../contexts/AuthContext";
+import { useMapData } from "../contexts/MapDataContext";
+import { useAuth } from "../contexts/AuthContext";
+import { useKeyboard } from "../contexts/KeyboardContext";
 
 const defaultMapProps = {
   showGrid: false,
@@ -54,7 +54,7 @@ function SelectMapModal({
   // The map currently being view in the map screen
   currentMap,
 }) {
-  const { userId } = useContext(AuthContext);
+  const { userId } = useAuth();
   const {
     ownedMaps,
     mapStates,
@@ -64,7 +64,7 @@ function SelectMapModal({
     updateMap,
     updateMaps,
     mapsLoading,
-  } = useContext(MapDataContext);
+  } = useMapData();
 
   /**
    * Search
@@ -152,7 +152,7 @@ function SelectMapModal({
           }
 
           if (!gridSize) {
-            gridSize = await getGridSize(image);
+            gridSize = await getGridSizeFromImage(image);
           }
 
           // Remove file extension
@@ -207,10 +207,9 @@ function SelectMapModal({
           grid: {
             size: gridSize,
             inset: getGridDefaultInset(
+              { size: { x: gridSize.x, y: gridSize.y }, type: "square" },
               image.width,
-              image.height,
-              gridSize.x,
-              gridSize.y
+              image.height
             ),
             type: "square",
           },

src/modals/SelectTokensModal.js

@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { Flex, Label, Button } from "theme-ui";
 import shortid from "shortid";
 import Case from "case";
@@ -15,21 +15,21 @@ import LoadingOverlay from "../components/LoadingOverlay";
 import blobToBuffer from "../helpers/blobToBuffer";
 import { useSearch, useGroup, handleItemSelect } from "../helpers/select";
 
-import useKeyboard from "../hooks/useKeyboard";
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
-import TokenDataContext from "../contexts/TokenDataContext";
-import AuthContext from "../contexts/AuthContext";
+import { useTokenData } from "../contexts/TokenDataContext";
+import { useAuth } from "../contexts/AuthContext";
+import { useKeyboard } from "../contexts/KeyboardContext";
 
 function SelectTokensModal({ isOpen, onRequestClose }) {
-  const { userId } = useContext(AuthContext);
+  const { userId } = useAuth();
   const {
     ownedTokens,
     addToken,
     removeTokens,
     updateTokens,
     tokensLoading,
-  } = useContext(TokenDataContext);
+  } = useTokenData();
 
   /**
    * Search

src/modals/SettingsModal.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Label,
   Flex,
@@ -13,8 +13,8 @@ import prettyBytes from "pretty-bytes";
 import Modal from "../components/Modal";
 import Slider from "../components/Slider";
 
-import AuthContext from "../contexts/AuthContext";
-import DatabaseContext from "../contexts/DatabaseContext";
+import { useAuth } from "../contexts/AuthContext";
+import { useDatabase } from "../contexts/DatabaseContext";
 
 import useSetting from "../hooks/useSetting";
 
@@ -22,8 +22,8 @@ import ConfirmModal from "./ConfirmModal";
 import ImportExportModal from "./ImportExportModal";
 
 function SettingsModal({ isOpen, onRequestClose }) {
-  const { database, databaseStatus } = useContext(DatabaseContext);
-  const { userId } = useContext(AuthContext);
+  const { database, databaseStatus } = useDatabase();
+  const { userId } = useAuth();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [labelSize, setLabelSize] = useSetting("map.labelSize");
   const [storageEstimate, setStorageEstimate] = useState();

src/modals/StartModal.js

@@ -1,9 +1,9 @@
-import React, { useContext, useRef } from "react";
+import React, { useRef } from "react";
 import { Box, Label, Input, Button, Flex, Checkbox } from "theme-ui";
 import { useHistory } from "react-router-dom";
 import shortid from "shortid";
 
-import AuthContext from "../contexts/AuthContext";
+import { useAuth } from "../contexts/AuthContext";
 
 import useSetting from "../hooks/useSetting";
 
@@ -11,7 +11,7 @@ import Modal from "../components/Modal";
 
 function StartModal({ isOpen, onRequestClose }) {
   let history = useHistory();
-  const { password, setPassword } = useContext(AuthContext);
+  const { password, setPassword } = useAuth();
 
   function handlePasswordChange(event) {
     setPassword(event.target.value);