From d7a3228ff0f78e64748c9e38b68ef45362f59552 Mon Sep 17 00:00:00 2001 From: stdavis Date: Tue, 23 Aug 2022 09:29:48 -0600 Subject: [PATCH] chore: switch to @ugrc/utilities for local storage hook Closes #50 --- package-lock.json | 39 +++++++++++++++++++ package.json | 1 + src/components/SplashScreen.jsx | 2 +- src/hooks/useLocalStorage.js | 18 --------- src/hooks/useLocalStorage.test.js | 62 ------------------------------- 5 files changed, 41 insertions(+), 81 deletions(-) delete mode 100644 src/hooks/useLocalStorage.js delete mode 100644 src/hooks/useLocalStorage.test.js diff --git a/package-lock.json b/package-lock.json index ed9264b..b64fcdc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "@fortawesome/free-solid-svg-icons": "^6.1.2", "@fortawesome/react-fontawesome": "^0.2.0", "@tanstack/react-query": "^4.2.1", + "@ugrc/layer-selector": "^6.1.0", + "@ugrc/utilities": "^2.2.1", "bootstrap": "^5.2.0", "clsx": "^1.2.1", "downshift": "^6.1.9", @@ -6097,6 +6099,29 @@ "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==", "dev": true }, + "node_modules/@ugrc/layer-selector": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@ugrc/layer-selector/-/layer-selector-6.1.0.tgz", + "integrity": "sha512-u+MlNmRJqpu02BQWPW2xYIJsX2Hwoi8kV8SDd7cZoCoa7YhGnX11o1GvfTzi9f8ipcQLEQRPHslekZyZ6/BaFA==", + "dependencies": { + "clsx": "^1.1.1" + }, + "peerDependencies": { + "@arcgis/core": "^4.20.0", + "prop-types": "^15.8.1", + "react": ">=16.8.0" + } + }, + "node_modules/@ugrc/utilities": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@ugrc/utilities/-/utilities-2.2.1.tgz", + "integrity": "sha512-qfC5hpfJoMStjBJ6Tf6m4S2X6gAR2OrzUmDltwsWRJc07rjyqXbtl90E0x+ryUrgOwchy0KZdh8avfk9aFhklg==", + "peerDependencies": { + "@arcgis/core": "^4.20.0", + "prop-types": "^15.8.1", + "react": ">=16.8.0" + } + }, "node_modules/@vitejs/plugin-react": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.0.1.tgz", @@ -29059,6 +29084,20 @@ "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==", "dev": true }, + "@ugrc/layer-selector": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@ugrc/layer-selector/-/layer-selector-6.1.0.tgz", + "integrity": "sha512-u+MlNmRJqpu02BQWPW2xYIJsX2Hwoi8kV8SDd7cZoCoa7YhGnX11o1GvfTzi9f8ipcQLEQRPHslekZyZ6/BaFA==", + "requires": { + "clsx": "^1.1.1" + } + }, + "@ugrc/utilities": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@ugrc/utilities/-/utilities-2.2.1.tgz", + "integrity": "sha512-qfC5hpfJoMStjBJ6Tf6m4S2X6gAR2OrzUmDltwsWRJc07rjyqXbtl90E0x+ryUrgOwchy0KZdh8avfk9aFhklg==", + "requires": {} + }, "@vitejs/plugin-react": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.0.1.tgz", diff --git a/package.json b/package.json index 724ba0b..f86949e 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@fortawesome/react-fontawesome": "^0.2.0", "@tanstack/react-query": "^4.2.1", "@ugrc/layer-selector": "^6.1.0", + "@ugrc/utilities": "^2.2.1", "bootstrap": "^5.2.0", "clsx": "^1.2.1", "downshift": "^6.1.9", diff --git a/src/components/SplashScreen.jsx b/src/components/SplashScreen.jsx index ab3c7a8..798dace 100644 --- a/src/components/SplashScreen.jsx +++ b/src/components/SplashScreen.jsx @@ -1,6 +1,6 @@ +import { useLocalStorage } from '@ugrc/utilities/hooks'; import { useState } from 'react'; import { Button, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; -import useLocalStorage from '../hooks/useLocalStorage'; import config from '../services/config'; export default function SplashScreen() { diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js deleted file mode 100644 index 42b5602..0000000 --- a/src/hooks/useLocalStorage.js +++ /dev/null @@ -1,18 +0,0 @@ -import { useState } from 'react'; - -export default function (key, initialValue, parseWithJSON = false) { - const getValueFromLocalStorage = () => { - const value = localStorage.getItem(key); - - return parseWithJSON ? JSON.parse(value) : value; - }; - - const [value, setValue] = useState(() => getValueFromLocalStorage() ?? initialValue); - - const setNewValue = (newValue) => { - setValue(newValue); - localStorage.setItem(key, parseWithJSON ? JSON.stringify(newValue) : newValue); - }; - - return [value, setNewValue]; -} diff --git a/src/hooks/useLocalStorage.test.js b/src/hooks/useLocalStorage.test.js deleted file mode 100644 index 8ba8757..0000000 --- a/src/hooks/useLocalStorage.test.js +++ /dev/null @@ -1,62 +0,0 @@ -import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import useLocalStorage from './useLocalStorage'; - -describe('useLocalStorage', () => { - beforeEach(() => { - vi.mock('react', () => { - return { - useState: (initialValue) => [initialValue(), () => {}], - }; - }); - }); - - afterEach(() => { - vi.restoreAllMocks(); - }); - - it('can parse using JSON', () => { - const localStorageMock = { - getItem: vi.fn().mockReturnValue('{"a":1}'), - setItem: vi.fn(), - }; - vi.stubGlobal('localStorage', localStorageMock); - - const [value, setValue] = useLocalStorage('key', { a: 1 }, true); - - expect(localStorageMock.getItem).toHaveBeenCalledWith('key'); - expect(value).toEqual({ a: 1 }); - - setValue({ a: 2 }); - - expect(localStorageMock.setItem).toHaveBeenCalledWith('key', '{"a":2}'); - }); - - it('returns the initial value if none is in storage', () => { - const localStorageMock = { - getItem: vi.fn().mockReturnValue(undefined), - setItem: vi.fn(), - }; - vi.stubGlobal('localStorage', localStorageMock); - - const initialValue = 'test value'; - - const [value] = useLocalStorage('key', initialValue); - - expect(value).toEqual(initialValue); - }); - - it('returns the value from storage if it exists', () => { - const localStorageValue = 'changed value'; - const localStorageMock = { - getItem: vi.fn().mockReturnValue(localStorageValue), - setItem: vi.fn(), - }; - vi.stubGlobal('localStorage', localStorageMock); - - const initialValue = 'test value'; - - const [value] = useLocalStorage('key', initialValue); - - expect(value).toEqual(localStorageValue); - }); -});