addressing linting issues.

src/components/sidebar/index.js

@@ -1 +1 @@
-export * from './sidebar'
+export * from './sidebar';

src/components/sidebar/menu-item.js

@@ -1,9 +1,11 @@
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
+
 import {
   IconButton,
   ListItem,
   Tooltip,
-} from '@mui/joy'
+} from '@mui/joy';
 
 export const MenuItem = ({ Icon, title, onClick, active }) => {
   return (
@@ -23,13 +25,13 @@ export const MenuItem = ({ Icon, title, onClick, active }) => {
         </IconButton>
       </Tooltip>
     </ListItem>
-  )
-}
+  );
+};
 
 MenuItem.propTypes = {
   active: PropTypes.bool.isRequired,
   Icon: PropTypes.node.isRequired,
   onClick: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
-}
+};
 

src/components/sidebar/sidebar.js

@@ -1,25 +1,25 @@
-import { Fragment, useCallback, useState } from 'react'
+import React, { Fragment, useCallback, useState } from 'react';
 import {
   List,
   Sheet,
-} from '@mui/joy'
-import { Tray } from './tray'
-import { MenuItem } from './menu-item'
-import SidebarTrays from '../trays'
+} from '@mui/joy';
+import { Tray } from './tray';
+import { MenuItem } from './menu-item';
+import SidebarTrays from '../trays';
 
 export const Sidebar = () => {
-  const [activeIndex, setActiveIndex] = useState(-1)
+  const [activeIndex, setActiveIndex] = useState(-1);
 
   const handleClickMenuItem = useCallback(newIndex => {
     // if the incoming new index equals the old index,
     // then the user wants to close the currently open tray.
     if (newIndex === activeIndex) {
-      setActiveIndex(-1)
-      return
+      setActiveIndex(-1);
+      return;
     }
-    // otherwise, open desired tray.
-    setActiveIndex(newIndex)
-  }, [activeIndex])
+    // otherwise, open the desired tray.
+    setActiveIndex(newIndex);
+  }, [activeIndex]);
 
   return (
     <Fragment>
@@ -60,7 +60,7 @@ export const Sidebar = () => {
                     Icon={ SidebarTrays[key].icon }
                     onClick={ () => handleClickMenuItem(index) }
                   />
-                )
+                );
               })
             }
         </List>
@@ -75,9 +75,9 @@ export const Sidebar = () => {
               Contents={ SidebarTrays[key].trayContents }
               closeHandler={ () => setActiveIndex(-1) }
             />
-          )
+          );
         })
       }
     </Fragment>
-  )
-}
+  );
+};

src/components/sidebar/toggler.js

@@ -1,12 +1,12 @@
-import { IconButton } from '@mui/joy'
+import React, { IconButton } from '@mui/joy';
 import {
   Menu as HamburgerIcon,
   Close as CloseMenuIcon,
-} from '@mui/icons-material'
-import { useLayout } from '@context'
+} from '@mui/icons-material';
+import { useLayout } from '@context';
 
 export const DrawerToggler = () => {
-  const { drawer } = useLayout()
+  const { drawer } = useLayout();
 
   return (
     <IconButton
@@ -17,5 +17,5 @@ export const DrawerToggler = () => {
     >
       { drawer.isOpen ? <CloseMenuIcon /> : <HamburgerIcon /> }
   </IconButton>
-  )
-}
+  );
+};

src/components/sidebar/tray.js

@@ -1,15 +1,17 @@
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
+
 import {
   DialogContent,
   DialogTitle,
   Divider,
   IconButton,
   Sheet,
   Stack,
-} from '@mui/joy'
+} from '@mui/joy';
 import {
   KeyboardDoubleArrowLeft as CloseTrayIcon,
-} from '@mui/icons-material'
+} from '@mui/icons-material';
 
 export const Tray = ({ active, Contents, title, closeHandler }) => {
   return (
@@ -58,8 +60,8 @@ export const Tray = ({ active, Contents, title, closeHandler }) => {
         <Contents />
       </DialogContent>
     </Sheet>
-  )
-}
+  );
+};
 
 Tray.propTypes = {
   active: PropTypes.bool.isRequired,
@@ -69,4 +71,4 @@ Tray.propTypes = {
   ]).isRequired,
   title: PropTypes.string.isRequired,
   closeHandler: PropTypes.func.isRequired,
-}
+};

src/components/trays/hurricanes.js

@@ -1,5 +1,6 @@
-import { Storm as HurricaneIcon } from '@mui/icons-material'
+import React from 'react';
+import { Storm as HurricaneIcon } from '@mui/icons-material';
 
-export const icon = <HurricaneIcon />
-export const title = 'Hurricanes'
-export const trayContents = () => <div>hurricanes tray</div>
+export const icon = <HurricaneIcon />;
+export const title = 'Hurricanes';
+export const trayContents = () => <div>hurricanes tray</div>;

src/components/trays/index.js

@@ -1,12 +1,12 @@
-import * as layers from './layers'
+import * as layers from './layers';
 // import * as hurricanes from './hurricanes'
-import * as settings from './settings'
+import * as settings from './settings';
 
 export default {
   layers,
   // hurricanes,
   settings,
-}
+};
 
 /*
   a new menu/tray item, must have these named exports:

src/components/trays/layers/form.js

@@ -1,4 +1,5 @@
-import { Stack } from '@mui/joy'
+import React from 'react';
+import { Stack } from '@mui/joy';
 
 export const AddLayerForm = () => {
   return (
@@ -7,5 +8,5 @@ export const AddLayerForm = () => {
     }}>
       FORM!
     </Stack>
-  )
-}
+  );
+};

src/components/trays/layers/index.js

@@ -1,8 +1,9 @@
-import { Layers as LayersIcon } from '@mui/icons-material'
-import { TrayContents } from './tray-contents'
+import React from 'react';
+import { Layers as LayersIcon } from '@mui/icons-material';
+import { TrayContents } from './tray-contents';
 
-export const icon = <LayersIcon />
+export const icon = <LayersIcon />;
 
-export const title = 'Layers'
+export const title = 'Layers';
 
-export const trayContents = TrayContents
+export const trayContents = TrayContents;

src/components/trays/layers/list.js

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import React, { useState } from 'react';
 import {
   Accordion,
   AccordionGroup,
@@ -9,11 +9,11 @@ import {
   Stack,
   Switch,
   Typography,
-} from '@mui/joy'
+} from '@mui/joy';
 import {
   KeyboardArrowDown as ExpandIcon,
-} from '@mui/icons-material'
-import { DragIndicator as DragHandleIcon } from '@mui/icons-material'
+} from '@mui/icons-material';
+import { DragIndicator as DragHandleIcon } from '@mui/icons-material';
 
 const dummyLayers = [
   {
@@ -28,42 +28,42 @@ const dummyLayers = [
     id: '9846351',
     name: 'Eu in laborum',
   },
-]
+];
 
 export const LayersList = () => {
-  const [expandedIds, setExpandedIds] = useState(new Set())
+  const [expandedIds, setExpandedIds] = useState(new Set());
   // of course, this is dummy state.
   // real state will be maintained in some higher-up context.
-  const [visibleIds, setVisibleIds] = useState(new Set())
+  const [visibleIds, setVisibleIds] = useState(new Set());
 
   const handleToggleExpansion = id => () => {
-    const _expandedIds = new Set([...expandedIds])
+    const _expandedIds = new Set([...expandedIds]);
     if (_expandedIds.has(id)) {
-      _expandedIds.delete(id)
-      setExpandedIds(_expandedIds)
-      return
+      _expandedIds.delete(id);
+      setExpandedIds(_expandedIds);
+      return;
     }
-    _expandedIds.add(id)
-    setExpandedIds(_expandedIds)
-  }
+    _expandedIds.add(id);
+    setExpandedIds(_expandedIds);
+  };
 
   const handleToggleVisibilitySwitch = id => () => {
-    const _visibleIds = new Set([...visibleIds])
+    const _visibleIds = new Set([...visibleIds]);
     if (_visibleIds.has(id)) {
-      _visibleIds.delete(id)
-      setVisibleIds(_visibleIds)
-      return
+      _visibleIds.delete(id);
+      setVisibleIds(_visibleIds);
+      return;
     }
-    _visibleIds.add(id)
-    setVisibleIds(_visibleIds)
-  }
+    _visibleIds.add(id);
+    setVisibleIds(_visibleIds);
+  };
 
   return (
     <AccordionGroup variant="soft">
       {
         dummyLayers.map(layer => {
-          const isExpanded = expandedIds.has(layer.id)
-          const isVisible = visibleIds.has(layer.id)
+          const isExpanded = expandedIds.has(layer.id);
+          const isVisible = visibleIds.has(layer.id);
 
           return (
             <Accordion
@@ -138,10 +138,10 @@ export const LayersList = () => {
                 Lorem ipsum ad deserunt adipisicing deserunt sint deserunt qui occaecat consequat aliquip.
               </AccordionDetails>
             </Accordion>
-          )
+          );
         })
       }
       <Divider />
     </AccordionGroup>
-  )
-}
+  );
+};

src/components/trays/layers/tray-contents.js

@@ -1,25 +1,25 @@
-import { useCallback, useState } from 'react'
-import { Button, Stack } from '@mui/joy'
+import React, { useCallback, useState } from 'react';
+import { Button, Stack } from '@mui/joy';
 import {
   Add as AddLayerIcon,
   Close as CloseIcon,
-} from '@mui/icons-material'
-import { LayersList } from './list'
-import { AddLayerForm } from './form'
+} from '@mui/icons-material';
+import { LayersList } from './list';
+import { AddLayerForm } from './form';
 
-const FORM = 'FORM'
-const LIST = 'LIST'
+const FORM = 'FORM';
+const LIST = 'LIST';
 
 export const TrayContents = () => {
-  const [state, setState] = useState(LIST)
+  const [state, setState] = useState(LIST);
 
   const handleClickToggleState = () => {
     if (state === FORM) {
-      setState(LIST)
-      return
+      setState(LIST);
+      return;
     }
-    setState(FORM)
-  }
+    setState(FORM);
+  };
 
   const TrayFooter = useCallback(() => {
     if (state === LIST) {
@@ -31,7 +31,7 @@ export const TrayContents = () => {
             onClick={ handleClickToggleState }
           >Add a Layer</Button>
         </Stack>
-      )
+      );
     }
     return (
       <Stack p={ 2 }>
@@ -42,8 +42,8 @@ export const TrayContents = () => {
           onClick={ handleClickToggleState }
         >Cancel</Button>
       </Stack>
-    )
-  }, [state])
+    );
+  }, [state]);
 
   return (
     <Stack sx={{
@@ -57,5 +57,5 @@ export const TrayContents = () => {
 
       <TrayFooter />
     </Stack>
-  )
-}
+  );
+};

src/components/trays/settings/index.js

@@ -1,14 +1,15 @@
-import { Stack } from '@mui/joy'
-import { Tune as SettingsIcon } from '@mui/icons-material'
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { Tune as SettingsIcon } from '@mui/icons-material';
 
-import { SampleToggle } from './sample'
+import { SampleToggle } from './sample';
 
-export const icon = <SettingsIcon />
+export const icon = <SettingsIcon />;
 
-export const title = 'Settings'
+export const title = 'Settings';
 
 export const trayContents = () => (
   <Stack gap={ 2 } p={ 2 }>
     <SampleToggle />
   </Stack>
-)
+);