Added shared grid context and moved away from calling useContext directly

src/components/token/ProxyToken.js

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState, useContext } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { Image, Box } from "theme-ui";
 import interact from "interactjs";
 
 import usePortal from "../../hooks/usePortal";
 
-import MapStageContext from "../../contexts/MapStageContext";
+import { useMapStage } from "../../contexts/MapStageContext";
 
 /**
  * @callback onProxyDragEnd
@@ -34,7 +34,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
   }, [tokens]);
 
   const proxyOnMap = useRef(false);
-  const mapStageRef = useContext(MapStageContext);
+  const mapStageRef = useMapStage();
 
   useEffect(() => {
     interact(`.${tokenClassName}`).draggable({

src/components/token/TokenDragOverlay.js

@@ -1,7 +1,7 @@
-import React, { useContext } from "react";
+import React from "react";
 
-import AuthContext from "../../contexts/AuthContext";
-import MapInteractionContext from "../../contexts/MapInteractionContext";
+import { useAuth } from "../../contexts/AuthContext";
+import { useMapInteraction } from "../../contexts/MapInteractionContext";
 
 import DragOverlay from "../DragOverlay";
 
@@ -14,8 +14,8 @@ function TokenDragOverlay({
   dragging,
   mapState,
 }) {
-  const { userId } = useContext(AuthContext);
-  const { mapWidth, mapHeight } = useContext(MapInteractionContext);
+  const { userId } = useAuth();
+  const { mapWidth, mapHeight } = useMapInteraction();
 
   function handleTokenRemove() {
     // Handle other tokens when a vehicle gets deleted

src/components/token/TokenMenu.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useEffect, useState } from "react";
 import { Box, Input, Flex, Text, IconButton } from "theme-ui";
 
 import Slider from "../Slider";
@@ -14,7 +14,7 @@ import UnlockIcon from "../../icons/TokenUnlockIcon";
 import ShowIcon from "../../icons/TokenShowIcon";
 import HideIcon from "../../icons/TokenHideIcon";
 
-import AuthContext from "../../contexts/AuthContext";
+import { useAuth } from "../../contexts/AuthContext";
 
 const defaultTokenMaxSize = 6;
 function TokenMenu({
@@ -25,7 +25,7 @@ function TokenMenu({
   onTokenStateChange,
   map,
 }) {
-  const { userId } = useContext(AuthContext);
+  const { userId } = useAuth();
 
   const wasOpen = usePrevious(isOpen);
 

src/components/token/TokenPreview.js

@@ -10,6 +10,8 @@ import useDataSource from "../../hooks/useDataSource";
 import useImageCenter from "../../hooks/useImageCenter";
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
+import { GridProvider } from "../../contexts/GridContext";
+
 import GridOnIcon from "../../icons/GridOnIcon";
 import GridOffIcon from "../../icons/GridOffIcon";
 
@@ -110,7 +112,7 @@ function TokenPreview({ token }) {
             />
             {showGridPreview && (
               <Group offsetY={gridHeight - tokenHeight}>
-                <Grid
+                <GridProvider
                   grid={{
                     size: { x: gridX, y: gridY },
                     inset: {
@@ -121,7 +123,9 @@ function TokenPreview({ token }) {
                   }}
                   width={gridWidth}
                   height={gridHeight}
-                />
+                >
+                  <Grid />
+                </GridProvider>
                 <Rect
                   width={gridWidth}
                   height={gridHeight}

src/components/token/TokenTiles.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Flex, Box, Text, IconButton, Close, Label } from "theme-ui";
 import SimpleBar from "simplebar-react";
 import Case from "case";
@@ -12,7 +12,7 @@ import TokenTile from "./TokenTile";
 import Link from "../Link";
 import FilterBar from "../FilterBar";
 
-import DatabaseContext from "../../contexts/DatabaseContext";
+import { useDatabase } from "../../contexts/DatabaseContext";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
@@ -31,7 +31,7 @@ function TokenTiles({
   onTokensGroup,
   onTokensHide,
 }) {
-  const { databaseStatus } = useContext(DatabaseContext);
+  const { databaseStatus } = useDatabase();
   const layout = useResponsiveLayout();
 
   let hasSelectedDefaultToken = selectedTokens.some(

src/components/token/Tokens.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Box, Flex } from "theme-ui";
 import shortid from "shortid";
 import SimpleBar from "simplebar-react";
@@ -12,14 +12,14 @@ import { fromEntries } from "../../helpers/shared";
 
 import useSetting from "../../hooks/useSetting";
 
-import AuthContext from "../../contexts/AuthContext";
-import TokenDataContext from "../../contexts/TokenDataContext";
+import { useAuth } from "../../contexts/AuthContext";
+import { useTokenData } from "../../contexts/TokenDataContext";
 
 const listTokenClassName = "list-token";
 
 function Tokens({ onMapTokenStateCreate }) {
-  const { userId } = useContext(AuthContext);
-  const { ownedTokens, tokens, updateToken } = useContext(TokenDataContext);
+  const { userId } = useAuth();
+  const { ownedTokens, tokens, updateToken } = useTokenData();
   const [fullScreen] = useSetting("map.fullScreen");
 
   function handleProxyDragEnd(isOnMap, token) {