Merge pull request #6 from maxchistt/debounce

Debounce & hooks

Author: maxchistt

client/src/App.js

@@ -9,6 +9,7 @@ import ModalCardEdit from './Cards/ModalCardEdit'
 import ModalLogin from './Login/ModalLogin'
 import DataService from './Services/DataService'
 import Card, { checkCardsArr } from './Cards/cardType/Card'
+import useDebouncedEffect from './Shared/useDebouncedEffect.hook'
 
 const { loadData, postData, updDataServLogin } = DataService()
 
@@ -58,7 +59,7 @@ function App() {
   const [updaterVal] = useUpdater()
 
   React.useEffect(loadDataFromServer, [logged, userName, updaterVal]) // eslint-disable-line react-hooks/exhaustive-deps
-  React.useEffect(loadDataToServer, [cardsArr]) // eslint-disable-line react-hooks/exhaustive-deps
+  useDebouncedEffect(loadDataToServer, [cardsArr], 1200) // eslint-disable-line react-hooks/exhaustive-deps
   React.useEffect(clearOldData, [logged]) // eslint-disable-line react-hooks/exhaustive-deps
 
   ///////////

client/src/Cards/AddCard.js

@@ -1,20 +1,8 @@
-import React, { useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import TextareaAutosize from 'react-textarea-autosize'
 import Palette, { colors } from './palette/palette'
-
-function useInputValue(defaultValue) {
-  const [value, setValue] = useState(defaultValue)
-  return {
-    bind: {
-      value,
-      onChange: event => setValue(event.target.value)
-    },
-    clear: () => setValue(defaultValue),
-    value: () => value,
-    addBreak: () => setValue(value + "\n")
-  }
-}
+import useInputValue from '../Shared/useInputValue.hook'
 
 function AddCard({ onCreate, onDeleteAll }) {
   const input = useInputValue('')
@@ -36,8 +24,8 @@ function AddCard({ onCreate, onDeleteAll }) {
   }
 
   function submitHandler() {
-    if (String(input.value()).trim() && String(color).trim()) {
-      onCreate({ name: String(input.value()).trim(), text: "", color: String(color) })
+    if (String(input.value).trim() && String(color).trim()) {
+      onCreate({ name: String(input.value).trim(), text: "", color: String(color) })
       input.clear()
       setColor(defColor)
     }
@@ -71,7 +59,7 @@ function AddCard({ onCreate, onDeleteAll }) {
         </div>
 
         <div className="col-xl-1 col-lg-1 col-md-1 col p-1">
-          <button disabled={!input.value().trim()} className="btn btn-success btn-block" onClick={submitHandler}>
+          <button disabled={!input.value.trim()} className="btn btn-success btn-block" onClick={submitHandler}>
             <i className="bi bi-clipboard-plus"></i>
           </button>
         </div>

client/src/Cards/ModalCardEdit.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import Context from '../context'
 import TextareaAutosize from 'react-textarea-autosize'
 import Modal, { ModalProps } from "../Shared/Modal/Modal"
-import debounce from '../Shared/debounce'
 import Card, { PropTypeCard } from './cardType/Card'
 import Palette from './palette/palette'
 
@@ -32,7 +31,6 @@ function ModalCardEdit({ card = new Card(), index }) {
     modalProps.sideClose = true
     modalProps.onSideClick = unsetEditCard
 
-
     function open() {
         setShowForm(true)
     }
@@ -47,7 +45,7 @@ function ModalCardEdit({ card = new Card(), index }) {
         editCardContent(index, name, text)
     }
 
-    function onInputCange(e) {
+    function onInputChange(e) {
         let name = card.name
         let text = card.text
         if (e.target.id === "modal-edit-name") name = e.target.value
@@ -82,7 +80,7 @@ function ModalCardEdit({ card = new Card(), index }) {
                                 maxRows={3}
                                 maxLength="100"
                                 value={card.name}
-                                onChange={debounce(onInputCange, 700)}
+                                onChange={onInputChange}
                             />
 
                             <p style={{ fontWeight: "500" }} className="mb-2 text-dark">
@@ -99,7 +97,7 @@ function ModalCardEdit({ card = new Card(), index }) {
                                 minRows={3}
                                 maxRows={calcMaxRows()}
                                 value={card.text}
-                                onChange={debounce(onInputCange, 1000)}
+                                onChange={onInputChange}
                             />
                         </React.Fragment>
                     ) : (

client/src/Login/ModalLogin.js

@@ -1,6 +1,7 @@
 import React from "react"
 import Modal, { ModalProps } from "../Shared/Modal/Modal"
 import PropTypes from 'prop-types'
+import useInputValue from '../Shared/useInputValue.hook'
 import LoginService from '../Services/LoginService'
 const { logIn, logOut } = LoginService()
 
@@ -12,19 +13,6 @@ function validateUsername(str) {
     return String(str).replace(/@|;|:|\.|,|\/|\\|\||\$|\?|!|#|%|\*|\^|\+|=|\[|\]| |\\ |«|<|>/gi, "").trim()
 }
 
-function useInputValue(defaultValue) {
-    const [value, setValue] = React.useState(defaultValue)
-
-    return {
-        bind: {
-            value: value,
-            onChange: event => setValue(event.target.value)
-        },
-        clear: () => setValue(""),
-        value: value
-    }
-}
-
 function ModalLogin(props) {
     const { onLogin, onLogout, logged, userName, isOpen, setOpenState } = props
 

client/src/Shared/debounce.js

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(
+        () => {
+
+            const handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+
+
+            return () => {
+                clearTimeout(handler);
+            };
+        },
+
+        [delay, value]
+    );
+
+    return debouncedValue;
+}
+
+export default function useDebouncedEffect(func, deps, delay) {
+    const debounced = useDebounce(deps, delay || 0)
+    const debDepsList = Array.isArray(debounced) ? debounced : debounced ? [debounced] : undefined
+    useEffect(func, debDepsList) // eslint-disable-line react-hooks/exhaustive-deps
+}

client/src/Shared/useDebouncedEffect.hook.js

@@ -0,0 +1,14 @@
+import { useState } from 'react'
+
+export default function useInputValue(defaultValue) {
+    const [value, setValue] = useState(defaultValue)
+    return {
+        bind: {
+            value,
+            onChange: event => setValue(event.target.value)
+        },
+        clear: () => setValue(defaultValue),
+        value: value,
+        addBreak: () => setValue(value + "\n")
+    }
+}