From a5a39eae84835c6d786a4fd01820e53b17f89fff Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Thu, 2 May 2024 09:35:27 -0400 Subject: [PATCH] addressing linting issues. --- src/components/sidebar/index.js | 2 +- src/components/sidebar/menu-item.js | 12 +++-- src/components/sidebar/sidebar.js | 30 +++++------ src/components/sidebar/toggler.js | 12 ++--- src/components/sidebar/tray.js | 14 +++--- src/components/trays/hurricanes.js | 9 ++-- src/components/trays/index.js | 6 +-- src/components/trays/layers/form.js | 7 +-- src/components/trays/layers/index.js | 11 +++-- src/components/trays/layers/list.js | 52 ++++++++++---------- src/components/trays/layers/tray-contents.js | 34 ++++++------- src/components/trays/settings/index.js | 13 ++--- src/components/trays/settings/sample.js | 23 ++++----- src/context/index.js | 4 +- src/context/settings.js | 10 ++-- src/hooks/index.js | 4 +- src/hooks/use-local-storage.js | 26 +++++----- src/hooks/use-toggle-state.js | 28 +++++------ 18 files changed, 153 insertions(+), 144 deletions(-) diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js index 28a1f2af..b2ba9a43 100644 --- a/src/components/sidebar/index.js +++ b/src/components/sidebar/index.js @@ -1 +1 @@ -export * from './sidebar' +export * from './sidebar'; diff --git a/src/components/sidebar/menu-item.js b/src/components/sidebar/menu-item.js index fb569053..bd0dcce6 100644 --- a/src/components/sidebar/menu-item.js +++ b/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 }) => { - ) -} + ); +}; MenuItem.propTypes = { active: PropTypes.bool.isRequired, Icon: PropTypes.node.isRequired, onClick: PropTypes.func.isRequired, title: PropTypes.string.isRequired, -} +}; diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js index 5dd71f2e..c5627125 100644 --- a/src/components/sidebar/sidebar.js +++ b/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 ( @@ -60,7 +60,7 @@ export const Sidebar = () => { Icon={ SidebarTrays[key].icon } onClick={ () => handleClickMenuItem(index) } /> - ) + ); }) } @@ -75,9 +75,9 @@ export const Sidebar = () => { Contents={ SidebarTrays[key].trayContents } closeHandler={ () => setActiveIndex(-1) } /> - ) + ); }) } - ) -} + ); +}; diff --git a/src/components/sidebar/toggler.js b/src/components/sidebar/toggler.js index 0d147076..4bc497b8 100644 --- a/src/components/sidebar/toggler.js +++ b/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 ( { > { drawer.isOpen ? : } - ) -} + ); +}; diff --git a/src/components/sidebar/tray.js b/src/components/sidebar/tray.js index 924748e8..b45d5a93 100644 --- a/src/components/sidebar/tray.js +++ b/src/components/sidebar/tray.js @@ -1,4 +1,6 @@ -import PropTypes from 'prop-types' +import React from 'react'; +import PropTypes from 'prop-types'; + import { DialogContent, DialogTitle, @@ -6,10 +8,10 @@ import { 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 }) => { - ) -} + ); +}; Tray.propTypes = { active: PropTypes.bool.isRequired, @@ -69,4 +71,4 @@ Tray.propTypes = { ]).isRequired, title: PropTypes.string.isRequired, closeHandler: PropTypes.func.isRequired, -} +}; diff --git a/src/components/trays/hurricanes.js b/src/components/trays/hurricanes.js index e08ca88e..7ec41a25 100644 --- a/src/components/trays/hurricanes.js +++ b/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 = -export const title = 'Hurricanes' -export const trayContents = () =>
hurricanes tray
+export const icon = ; +export const title = 'Hurricanes'; +export const trayContents = () =>
hurricanes tray
; diff --git a/src/components/trays/index.js b/src/components/trays/index.js index f428987f..fb820f60 100644 --- a/src/components/trays/index.js +++ b/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: diff --git a/src/components/trays/layers/form.js b/src/components/trays/layers/form.js index 32252b2c..4ed7e1e6 100644 --- a/src/components/trays/layers/form.js +++ b/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! - ) -} \ No newline at end of file + ); +}; \ No newline at end of file diff --git a/src/components/trays/layers/index.js b/src/components/trays/layers/index.js index af4afc48..129017ac 100644 --- a/src/components/trays/layers/index.js +++ b/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 = +export const icon = ; -export const title = 'Layers' +export const title = 'Layers'; -export const trayContents = TrayContents +export const trayContents = TrayContents; diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js index f1c1bb06..3ea317ae 100644 --- a/src/components/trays/layers/list.js +++ b/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 ( { 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 ( { Lorem ipsum ad deserunt adipisicing deserunt sint deserunt qui occaecat consequat aliquip. - ) + ); }) } - ) -} + ); +}; diff --git a/src/components/trays/layers/tray-contents.js b/src/components/trays/layers/tray-contents.js index a20c380c..2520182c 100644 --- a/src/components/trays/layers/tray-contents.js +++ b/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 - ) + ); } return ( @@ -42,8 +42,8 @@ export const TrayContents = () => { onClick={ handleClickToggleState } >Cancel - ) - }, [state]) + ); + }, [state]); return ( { - ) -} + ); +}; diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js index 1dbfca75..464bf421 100644 --- a/src/components/trays/settings/index.js +++ b/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 = +export const icon = ; -export const title = 'Settings' +export const title = 'Settings'; export const trayContents = () => ( -) +); diff --git a/src/components/trays/settings/sample.js b/src/components/trays/settings/sample.js index 06c1e0ca..7637d427 100644 --- a/src/components/trays/settings/sample.js +++ b/src/components/trays/settings/sample.js @@ -1,12 +1,13 @@ -import { IconButton, Stack, Typography } from '@mui/joy' +import React from 'react'; +import { IconButton, Stack, Typography } from '@mui/joy'; import { CheckCircle as OnIcon, Cancel as OffIcon, -} from '@mui/icons-material' -import { useSettings } from '@context' +} from '@mui/icons-material'; +import { useSettings } from '@context'; export const SampleToggle = () => { - const { booleanValue } = useSettings() + const { booleanValue } = useSettings(); return ( { - ) -} + ); +}; export const Toggler = () => { - const { booleanValue } = useSettings() + const { booleanValue } = useSettings(); const handleClick = () => { - booleanValue.toggle() - } + booleanValue.toggle(); + }; return ( { : } - ) -} + ); +}; diff --git a/src/context/index.js b/src/context/index.js index 99feccb5..408b90a2 100644 --- a/src/context/index.js +++ b/src/context/index.js @@ -1,2 +1,2 @@ -export * from './map-context' -export * from './settings' +export * from './map-context'; +export * from './settings'; diff --git a/src/context/settings.js b/src/context/settings.js index 6da3e1bf..a3bdd0a2 100644 --- a/src/context/settings.js +++ b/src/context/settings.js @@ -3,13 +3,13 @@ import PropTypes from "prop-types"; import { // useToggleLocalStorage, useToggleState, -} from '@hooks' +} from '@hooks'; export const SettingsContext = createContext({}); -export const useSettings = () => useContext(SettingsContext) +export const useSettings = () => useContext(SettingsContext); export const SettingsProvider = ({ children }) => { - const booleanValue = useToggleState() + const booleanValue = useToggleState(); // to persist the value in the device's local // storage, use `useToggleLocalStorage` instead: // const booleanValue = useToggleLocalStorage('boolean-value') @@ -18,8 +18,8 @@ export const SettingsProvider = ({ children }) => { { children } - ) -} + ); +}; SettingsProvider.propTypes = { diff --git a/src/hooks/index.js b/src/hooks/index.js index f391b7ca..d48cb3a4 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -1,2 +1,2 @@ -export * from './use-local-storage' -export * from './use-toggle-state' +export * from './use-local-storage'; +export * from './use-toggle-state'; diff --git a/src/hooks/use-local-storage.js b/src/hooks/use-local-storage.js index 7045f045..7fd7b788 100644 --- a/src/hooks/use-local-storage.js +++ b/src/hooks/use-local-storage.js @@ -1,36 +1,36 @@ -import { useState } from 'react' +import { useState } from 'react'; export const useLocalStorage = (key, initialValue) => { // Pass key and initial state to useState so logic is only executed once const [storedValue, setStoredValue] = useState(() => { try { // Get from local storage by key - const item = window.localStorage.getItem(key) + const item = window.localStorage.getItem(key); // Parse stored json or if none return initialValue - return item ? JSON.parse(item) : initialValue + return item ? JSON.parse(item) : initialValue; } catch (error) { // If error also return initialValue - console.error(error.message) - return initialValue + console.error(error.message); + return initialValue; } - }) + }); // Return a wrapped version of useState's setter function that ... // ... persists the new value to localStorage. const setValue = value => { try { // Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(storedValue) : value + const valueToStore = value instanceof Function ? value(storedValue) : value; // Save state - setStoredValue(valueToStore) + setStoredValue(valueToStore); // Save to local storage - window.localStorage.setItem(key, JSON.stringify(valueToStore)) + window.localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { // A more advanced implementation would handle the error case - console.error(error.message) + console.error(error.message); } - } + }; - return [storedValue, setValue] -} + return [storedValue, setValue]; +}; diff --git a/src/hooks/use-toggle-state.js b/src/hooks/use-toggle-state.js index b20e226f..f3706a12 100644 --- a/src/hooks/use-toggle-state.js +++ b/src/hooks/use-toggle-state.js @@ -1,30 +1,30 @@ -import { useCallback, useState } from 'react' -import { useLocalStorage } from '@hooks' +import { useCallback, useState } from 'react'; +import { useLocalStorage } from '@hooks'; export const useToggleState = (initialValue = false) => { - const [value, setValue] = useState(initialValue) - const toggleValue = useCallback(() => setValue(!value), [value]) - const setTrue = useCallback(() => setValue(true), [value]) - const setFalse = useCallback(() => setValue(false), [value]) + const [value, setValue] = useState(initialValue); + const toggleValue = useCallback(() => setValue(!value), [value]); + const setTrue = useCallback(() => setValue(true), [value]); + const setFalse = useCallback(() => setValue(false), [value]); return { enabled: value, toggle: toggleValue, set: setTrue, unset: setFalse, - } -} + }; +}; export const useToggleLocalStorage = (key, initialValue = false) => { - const [value, setValue] = useLocalStorage(key, initialValue) - const toggleValue = useCallback(() => setValue(!value), [value]) - const setTrue = useCallback(() => setValue(true), [value]) - const setFalse = useCallback(() => setValue(false), [value]) + const [value, setValue] = useLocalStorage(key, initialValue); + const toggleValue = useCallback(() => setValue(!value), [value]); + const setTrue = useCallback(() => setValue(true), [value]); + const setFalse = useCallback(() => setValue(false), [value]); return { enabled: value, toggle: toggleValue, set: setTrue, unset: setFalse, - } -} + }; +};