🐛 Fixed bugs with localStorage initialization.

Added basic tests
chrisjpatty · Mar 8, 2019 · 9953a91 · 9953a91
1 parent d9f2b32
commit 9953a91
Show file tree

Hide file tree

Showing 11 changed files with 4,432 additions and 94 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  "env": {
+    "test": {
+      "presets": ['@babel/preset-env', '@babel/preset-react']
+    }
+  }
+};
diff --git a/dist/crooks.cjs.js b/dist/crooks.cjs.js
@@ -4,17 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var react = require('react');
+var React = _interopDefault(require('react'));
 var ls = _interopDefault(require('local-storage'));
 var shortid = _interopDefault(require('shortid'));
 
 const getCache = (key, initial) => {
   const cached = ls.get(key);
+  if(cached === null && initial !== null){
+    ls.set(key, initial);
+  }
   return cached !== null ? cached : initial
 };
 
 const useLocalStorage = (key, initial) => {
-  const [nativeState, setNativeState] = react.useState(getCache(key, initial));
+  const [nativeState, setNativeState] = React.useState(getCache(key, initial));
   const setState = state => {
     if(typeof state === 'function'){
       setNativeState(prev => {
@@ -50,7 +53,7 @@ const useFiler = key => {
   };
 
   const remove = id => {
-    setFiles(({[id]: deleted, newFiles}) => newFiles);
+    setFiles(({[id]: deleted, ...newFiles}) => newFiles);
   };
 
   const update = (id, data) => {
@@ -59,7 +62,7 @@ const useFiler = key => {
       [id]: {
         ...files[id],
         modified: Date.now(),
-        data
+        data: typeof data === 'function' ? data(files[id]) : data
       }
     }));
   };
@@ -72,7 +75,7 @@ const useFiler = key => {
 };
 
 var keyboardShortcut = ({keyCode, action, disabled}) => {
-  react.useEffect(() => {
+  React.useEffect(() => {
     if(!disabled){
       enable();
     }
@@ -100,9 +103,9 @@ var keyboardShortcut = ({keyCode, action, disabled}) => {
 };
 
 var onClickOutside = (onClickOutside, disabled) => {
-  const ref = react.useRef();
+  const ref = React.useRef();
 
-  react.useEffect(() => {
+  React.useEffect(() => {
     if(!disabled){
       window.addEventListener('click', checkForClickOutside);
       return () => {

diff --git a/dist/crooks.esm.js b/dist/crooks.esm.js
@@ -1,14 +1,17 @@
-import { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import ls from 'local-storage';
 import shortid from 'shortid';
 
 const getCache = (key, initial) => {
   const cached = ls.get(key);
+  if(cached === null && initial !== null){
+    ls.set(key, initial);
+  }
   return cached !== null ? cached : initial
 };
 
 const useLocalStorage = (key, initial) => {
-  const [nativeState, setNativeState] = useState(getCache(key, initial));
+  const [nativeState, setNativeState] = React.useState(getCache(key, initial));
   const setState = state => {
     if(typeof state === 'function'){
       setNativeState(prev => {
@@ -44,7 +47,7 @@ const useFiler = key => {
   };
 
   const remove = id => {
-    setFiles(({[id]: deleted, newFiles}) => newFiles);
+    setFiles(({[id]: deleted, ...newFiles}) => newFiles);
   };
 
   const update = (id, data) => {
@@ -53,7 +56,7 @@ const useFiler = key => {
       [id]: {
         ...files[id],
         modified: Date.now(),
-        data
+        data: typeof data === 'function' ? data(files[id]) : data
       }
     }));
   };
@@ -66,7 +69,7 @@ const useFiler = key => {
 };
 
 var keyboardShortcut = ({keyCode, action, disabled}) => {
-  useEffect(() => {
+  React.useEffect(() => {
     if(!disabled){
       enable();
     }
@@ -94,9 +97,9 @@ var keyboardShortcut = ({keyCode, action, disabled}) => {
 };
 
 var onClickOutside = (onClickOutside, disabled) => {
-  const ref = useRef();
+  const ref = React.useRef();
 
-  useEffect(() => {
+  React.useEffect(() => {
     if(!disabled){
       window.addEventListener('click', checkForClickOutside);
       return () => {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "crooks",
   "description": "A collection of useful React hooks",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "main": "dist/crooks.cjs.js",
   "module": "dist/crooks.esm.js",
   "repository": {
@@ -13,13 +13,22 @@
     "shortid": "^2.2.14"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-jest": "^24.3.1",
+    "babel-polyfill": "^6.26.0",
+    "jest": "^24.3.1",
+    "jest-dom": "^3.1.2",
+    "jest-localstorage-mock": "^2.4.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-test-renderer": "^16.8.4",
+    "react-testing-library": "^6.0.0",
     "rollup": "^1.0.0",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^4.0.0"
   },
-  "peerDependencies": {
-    "react": "^16.8.0"
-  },
+  "peerDependencies": {},
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -29,6 +38,11 @@
   "files": [
     "dist"
   ],
+  "jest": {
+    "setupFiles": [
+      "jest-localstorage-mock"
+    ]
+  },
   "keywords": [
     "use",
     "hooks",

diff --git a/src/useFiler.js b/src/useFiler.js
@@ -20,7 +20,7 @@ const useFiler = key => {
   }
 
   const remove = id => {
-    setFiles(({[id]: deleted, newFiles}) => newFiles)
+    setFiles(({[id]: deleted, ...newFiles}) => newFiles)
   }
 
   const update = (id, data) => {

diff --git a/src/useKeyboardShortcut.js b/src/useKeyboardShortcut.js
@@ -1,7 +1,7 @@
-import { useEffect } from 'react'
+import React from 'react'
 
 export default ({keyCode, action, disabled}) => {
-  useEffect(() => {
+  React.useEffect(() => {
     if(!disabled){
       enable()
     }

diff --git a/src/useLocalStorage.js b/src/useLocalStorage.js
@@ -1,13 +1,16 @@
-import { useState } from 'react'
+import React from 'react'
 import ls from 'local-storage'
 
 const getCache = (key, initial) => {
   const cached = ls.get(key)
+  if(cached === null && initial !== null){
+    ls.set(key, initial)
+  }
   return cached !== null ? cached : initial
 }
 
 const useLocalStorage = (key, initial) => {
-  const [nativeState, setNativeState] = useState(getCache(key, initial))
+  const [nativeState, setNativeState] = React.useState(getCache(key, initial))
   const setState = state => {
     if(typeof state === 'function'){
       setNativeState(prev => {

diff --git a/src/useOnClickOutside.js b/src/useOnClickOutside.js
@@ -1,9 +1,9 @@
-import { useRef, useEffect } from 'react'
+import React from 'react'
 
 export default (onClickOutside, disabled) => {
-  const ref = useRef()
+  const ref = React.useRef()
 
-  useEffect(() => {
+  React.useEffect(() => {
     if(!disabled){
       window.addEventListener('click', checkForClickOutside)
       return () => {

diff --git a/test/components.js b/test/components.js
@@ -0,0 +1,94 @@
+import React from 'react'
+import { useLocalStorage, useKeyboardShortcut, useOnClickOutside, useFiler } from '../src/main'
+
+export const LocalStorageTest = () => {
+  const [state, setState] = useLocalStorage("FRUIT", "apple")
+
+  const update = () => {
+    setState('pear')
+  }
+
+  const updateCallback = () => {
+    setState(fruit => fruit + 'pear')
+  }
+
+  return (
+    <div>
+      <div>{state}</div>
+      <button onClick={update}>UPDATE</button>
+      <button onClick={updateCallback}>UPDATECALLBACK</button>
+    </div>
+  )
+}
+
+export const FilerTest = ({getState}) => {
+  const [files, {add, remove, update, clear}] = useFiler('FILES')
+
+  const addFile = () => {
+    add('apple')
+  }
+
+  const addFileWithID = () => {
+    add('apple', 'fruit_id')
+  }
+
+  const removeFile = () => {
+    const id = Object.keys(files)[0]
+    remove(id)
+  }
+
+  const updateFile = () => {
+    const id = Object.keys(files)[0]
+    update(id, 'pear')
+  }
+
+  const clearFiles = () => {
+    clear()
+  }
+  getState(files)
+  return (
+    <div>
+      <button onClick={addFile}>ADD</button>
+      <button onClick={addFileWithID}>ADDID</button>
+      <button onClick={removeFile}>REMOVE</button>
+      <button onClick={updateFile}>UPDATE</button>
+      <button onClick={clearFiles}>CLEAR</button>
+    </div>
+  )
+}
+
+export const OnClickOutside = ({disabled}) => {
+  const [fruit, setFruit] = React.useState('apple')
+
+  const handleClickOutside = () => setFruit('pear')
+
+  const outsideRef = useOnClickOutside(handleClickOutside, disabled)
+
+  return (
+    <div>
+      <div ref={outsideRef} style={{padding: 10}}>
+        <div>MODAL</div>
+      </div>
+      <div>OUTSIDE</div>
+      <div>{fruit}</div>
+    </div>
+  )
+}
+
+export const KeyboardShortcut = ({disabled}) => {
+  const [fruit, setFruit] = React.useState('apple')
+
+  const onKey = () => setFruit('pear')
+
+  const { enable, disable } = useKeyboardShortcut({
+    keyCode: 65,
+    action: onKey,
+    disabled
+  })
+  return (
+    <div>
+      <div>KEYDOWN</div>
+      <div>{fruit}</div>
+    </div>
+  )
+}