hooks

Author: maxchistt

client/src/App.js

@@ -9,7 +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'
+import useDebouncedEffect from './Shared/useDebouncedEffect.hook'
 
 const { loadData, postData, updDataServLogin } = DataService()
 

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/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/useDebouncedEffect.js renamed to 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")
+    }
+}