Modal windows remake & Data service update

maxchistt · maxchistt · commit 5fcf1d304923 · 2021-04-08T08:46:13.000+03:00
diff --git a/src/App.css b/src/App.css
@@ -50,13 +50,3 @@
     transform: rotate(360deg);
   }
 }
-
-.show_login {
-  position:absolute;
-  top:1em;
-  right: 1em;
-  font-size:small;
-  color:lightgray;
-  transition: 1s;
-}
-
diff --git a/src/App.js b/src/App.js
@@ -7,11 +7,9 @@ import Context from './context'
 import Loader from './Content/Loader'
 import ModalCardEdit from './Modal/ModalCardEdit'
 import ModalLogin from './Modal/ModalLogin'
-import Modal from './Modal/Modal'
 import DataService from './DataService'
 
-const { loadData, postData, setLogin } = DataService()
-
+const { loadData, postData, setDataServLogin } = DataService()
 const testText = "My little cards-app c:"
 
 var cardCount = 0
@@ -55,49 +53,69 @@ function checkCardFields(card) {
   return res
 }
 
+var timer
+
 function App() {
   const [cardsArr, setCards] = useCardsArr([])
   const [editCardId, setEditCardId] = React.useState(null)
-  const [loading, setLoading] = React.useState(true)
+  const [loading, setLoading] = React.useState(false)
   const [logged, setLogged] = React.useState(false)
-  const [userName, setUserName] = React.useState(null)
-  React.useEffect(clearIfUnlogged, [logged]) // eslint-disable-line react-hooks/exhaustive-deps
-  React.useEffect(loadDataFromServer, [logged]) // eslint-disable-line react-hooks/exhaustive-deps
+  const [userName, setUserName] = React.useState(undefined)
+
+  const [timerVal, setTimerVal] = React.useState(null)
+  if (timer) clearInterval(timer)
+  timer = setInterval(() => setTimerVal(Date.now()), 60 * 1000) // обновяем через минуту
+  React.useEffect(onLogout, [logged, userName])// eslint-disable-line react-hooks/exhaustive-deps
+  React.useEffect(loadDataFromServer, [logged, userName, timerVal]) // eslint-disable-line react-hooks/exhaustive-deps
   React.useEffect(loadDataToServer, [cardsArr]) // eslint-disable-line react-hooks/exhaustive-deps
+  const [openLogin, setOpenLogin] = React.useState(false)
 
   ///////////
   function tryLogin(login) {
     return new Promise((res, rej) => {
-      try {
-        setLogin(login)
-          .then((r => {
-            setLogged(Boolean(r))
-            setUserName(login)
-          }), console.log)
-          .then(res, rej)
-      } catch (e) {
-        rej(e)
-        console.error(e)
-      }
+      tryLogout()
+        .then(() => {
+          setDataServLogin(login)
+            .then(
+              r => {
+                setLogged(Boolean(r))
+                setUserName(login)
+                res(r)
+              }
+            )
+            .catch(
+              e => {
+                console.log("setDataServLogin in Try login", "catch", e);
+                rej(e)
+              }
+            )
+        })
+        .catch((e) => console.log("logout catch in tryLogin", e))
     })
   }
 
-  function dislogin() {
-    if (logged) console.log("Dislogin")
-    setLogged(null)
+  function tryLogout() {
+    return new Promise((res) => {
+      if (logged) console.log("Dislogin")
+      let result = setDataServLogin(null)
+      setUserName(undefined)
+      setLogged(false)
+      result.then(onLogout, onLogout).then(res, res).then(onLogout).catch(e => console.log("Data service dislogif failed", e))
+    })
   }
 
-  function clearIfUnlogged() {
-    if (logged === null && cardsArr) deleteAll()
+  function onLogout() {
+    if (!logged && !!cardsArr) deleteAll()
   }
   ///////////
 
   ///////////
   function loadDataToServer() {
     try {
-      if (logged) postData(cardsArr).then((res) => {
-        console.log('[onPostData]', res)
-      }, dataError)
+      if (logged && userName) postData(cardsArr)
+        .then((res) => {
+          console.log('[onPostData]', res)
+        }, e => console.log(`Data post request error. Response: ${e}`))
     }
     catch (e) {
       console.error(e)
@@ -106,23 +124,20 @@ function App() {
 
   function loadDataFromServer() {
     try {
-      if (logged) {
+      if (logged && userName) {
         setLoading(true)
-        loadData().then(data => {
-          console.log('[onLoadData]', 'Данные с сервера загружены')
-          setLoadedCards(data)
-          setLoading(false)
-        }, dataError)
+        loadData()
+          .then(data => {
+            console.log('[onLoadData]', 'Данные с сервера загружены')
+            setLoadedCards(data)
+            setLoading(false)
+          }, e => console.log(`Data load request error. Response: ${e}`))
       }
     }
     catch (e) {
       console.error(e)
     }
   }
-
-  function dataError(msg) {
-    console.log(`Data request error. Response: ${msg}`)
-  }
   ///////////
 
   ///////////
@@ -178,26 +193,38 @@ function App() {
   return (
     <Context.Provider value={{ removeCard, changeCardState, setEditCard, unsetEditCard, editCardContent, editCardId }}>
       <div className="App">
-        <header className="p-1 h2 text-center">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="d-inline-block h2">{testText}</h1>
-          <p className="show_login btn btn-light py-0" onClick={(e) => { setLogged(logged === false ? 0 : false) }}>
-            {logged ? `Login: ${userName}` : "LOG IN"}
-          </p>
+        <header className="p-1">
+          <nav className="d-flex container px-0 flex-wrap-reverse">
+            <div className="text-center d-flex p-1 align-items-center justify-content-center flex-wrap">
+              <img src={logo} className="App-logo" alt="logo" />
+              <h1 className="h2 m-0">{testText}</h1>
+            </div>
+            <div className="text-center d-flex p-1 align-items-center ml-auto">
+              <button className="btn btn-light " onClick={() => setOpenLogin(true)}>
+                {logged ? `Login: ${userName}` : "LOG IN"}
+              </button>
+            </div>
+          </nav>
+          <ModalLogin login={tryLogin} logout={tryLogout} logged={logged} userName={userName} isOpen={openLogin} setOpenState={setOpenLogin} />
         </header>
 
         <main className="p-1">
           <AddCard onCreate={addCard} onDeleteAll={deleteAll} />
-          <Modal component={ModalLogin} componentProps={{ logged: logged, login: tryLogin, dislogin: dislogin, userName: userName }} />
-          <Modal component={ModalCardEdit} componentProps={{ card: getCardByIndex(editCardId), index: editCardId }} />
-          {loading && <Loader />}
+          <ModalCardEdit card={getCardByIndex(editCardId)} index={editCardId} />
+
           {cardsArr.length ? (
             <CardList cards={cardsArr} />
-          ) : loading && !logged ? null : (
+          ) : loading ? null : logged ? (
             <div className="container text-center">
               <p className="m-3 p-3 h5 text-muted">No cards. You can add a new one!</p>
             </div>
+          ) : (
+            <div className="container text-center">
+              <p className="m-3 p-3 h5 text-muted">Unlogged</p>
+            </div>
           )}
+
+          {loading && <Loader />}
         </main>
       </div>
     </Context.Provider>
diff --git a/src/DataService.js b/src/DataService.js
@@ -7,11 +7,22 @@ export default function DataService() {
     //let recuestCount = 1;
 
     ////////////////////////////////////////////////////////////
-    function setLogin(login) {
-        if (login && typeof login === "string") {
-            user = login
-            return Promise.resolve(user)
-        } else return Promise.reject(login)
+    function setDataServLogin(login) {
+        return new Promise((res, rej) => {
+            if (login && typeof login === "string") {
+                user = login
+                //console.log("data serv login set")
+                res(user)
+            } else if (login === null) {
+                user = null
+                //console.log("data serv dislogin")
+                res()
+            } else {
+                //console.log("data serv cant set login", login)
+                rej(login)
+            }
+        }).catch(e => { console.log("data serv login not set", e); return e })
+
     }
     ////////////////////////////////////////////////////////////
 
@@ -65,6 +76,30 @@ export default function DataService() {
         }
         return value;
     }
+
+    function checkData(data) {
+        //console.log('start check data')
+        const checkCard = (card) => {
+            return !(
+                (typeof card.id === "number" || typeof card.id === "string") &&
+                !isNaN(card.id) && typeof card.completed === "boolean" &&
+                typeof card.text === "string"
+            )
+        }
+        const checkArr = (arr) => {
+            let res = true
+            arr.forEach(element => {
+                if (checkCard(element)) res = false
+            })
+            return res
+        }
+        try {
+            return data === null || data === [] || checkArr(data)
+        } catch {
+            return false
+        }
+
+    }
     ////////////////////////////////////////////////////////////
 
     ////////////////////////////////////////////////////////////
@@ -77,7 +112,15 @@ export default function DataService() {
                     .then((d) => {
                         let data = tryParce(d)//here we parce json
                         //console.log("[DATA] from loadData(): ", data)
-                        res(data || [])
+                        if (!checkData(data)) {
+                            console.error("[loadData] Bad data format", data)
+                            if (user !== null) {
+                                console.log('clear data')
+                                requestPostData([{ id: 0, completed: false, text: "Данные были очищены из за ошибки" }]).then(() => loadData().then(res, rej), rej)//очистка данных
+                            } else rej("Not format data & unlogged")
+                        } else {
+                            res(data || [])
+                        }
                     }, rej)
                     .catch(rej)
             } catch (e) {
@@ -106,5 +149,5 @@ export default function DataService() {
     }
     ////////////////////////////////////////////////////////////
 
-    return { loadData, postData, setLogin }
+    return { loadData, postData, setDataServLogin }
 }
diff --git a/src/Modal/Modal.css b/src/Modal/Modal.css
@@ -13,11 +13,8 @@
 }
 
 .modal-window-body {
-  padding: 2rem;
   width: 100%;
   max-width: 620px;
-  border-radius: 5px;
-  background: #fff;
   height: fit-content;
 }
 
diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
@@ -3,49 +3,86 @@ import PropTypes from 'prop-types'
 import './Modal.css'
 
 const classes = {
-    modalWrapper: ' modal-window-wrapper ',
-    modalBody: ' modal-window-body '
+    modalWrapper: 'modal-window-wrapper modal',
+    modalBody: 'modal-window-body'
 }
-export const ModalContext = React.createContext()
+
 function Modal(props) {
+    const { isOpen, setOpenState, openButton, sideClose, onSideClick } = props
 
-    const [isOpen, setOpenState] = React.useState(false)
-    const Component = props.component
-    const ComponentProps = props.componentProps
+    const wrapperRef = React.useRef(null)
 
     function open() {
         setOpenState(true)
     }
 
     function close() {
         setOpenState(false)
+        if (typeof onSideClick === "function") onSideClick()
+    }
+
+    function handleOpenButtonClick() {
+        open()
+    }
+
+    function handleWrapperClick(e) {
+        if (wrapperRef.current && wrapperRef.current === e.target) {
+            if (sideClose) close()
+        }
     }
 
     return (
         <React.Fragment>
-            <div className="container p-1 d-none">
-                <button className="btn" onClick={open}>Open modal</button>
+            <div className="container p-1" style={{ display: openButton ? "block" : "none" }}>
+                <button className="btn" onClick={handleOpenButtonClick}>Open modal</button>
             </div>
 
             <div
                 style={{ display: !isOpen ? "none" : "flex" }}
                 className={classes.modalWrapper}
-                onClick={(e) => { if (e.target.className === classes.modalWrapper) close() }}
+                ref={wrapperRef}
+                onClick={handleWrapperClick}
             >
-                <div className={classes.modalBody + 'bg-light'}>
-                    <ModalContext.Provider value={{ open, close, isOpen, classes }}>
-                        <Component {...ComponentProps} />
-                    </ModalContext.Provider>
+                <div className={classes.modalBody}>
+                    <div className="rounded container p-3 bg-light">
+                        {props.children}
+                    </div>
                 </div>
             </div>
 
         </React.Fragment>
     )
 }
 
+class ModalProps {
+    constructor() {
+        this.isOpen = false
+        this.setOpenState = null
+        this.openButton = false
+        this.sideClose = false
+        this.onSideClick = null
+    }
+
+    bind() {
+        return {
+            isOpen: this.isOpen,
+            setOpenState: this.setOpenState,
+            openButton: this.openButton,
+            sideClose: this.sideClose,
+            onSideClick: this.onSideClick
+        }
+    }
+}
+
 Modal.propTypes = {
-    component: PropTypes.func,
-    componentProps: PropTypes.object
+    children: PropTypes.object,
+
+    isOpen: PropTypes.bool,
+    setOpenState: PropTypes.func,
+    openButton: PropTypes.bool,
+    sideClose: PropTypes.bool,
+    onSideClick: PropTypes.func
 }
 
 export default Modal
+export { Modal, ModalProps }
diff --git a/src/Modal/ModalCardEdit.js b/src/Modal/ModalCardEdit.js
diff --git a/src/Modal/ModalLogin.js b/src/Modal/ModalLogin.js

Original file line number	Diff line number	Diff line change
`@@ -50,13 +50,3 @@`
`50`	`50`	`transform: rotate(360deg);`
`51`	`51`	`}`
`52`	`52`	`}`
`53`		`-`
`54`		`-.show_login {`
`55`		`- position:absolute;`
`56`		`- top:1em;`
`57`		`- right: 1em;`
`58`		`- font-size:small;`
`59`		`- color:lightgray;`
`60`		`- transition: 1s;`
`61`		`-}`
`62`		`-`
Original file line number	Diff line number	Diff line change
`@@ -13,11 +13,8 @@`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.modal-window-body {`
`16`		`- padding: 2rem;`
`17`	`16`	`width: 100%;`
`18`	`17`	`max-width: 620px;`
`19`		`- border-radius: 5px;`
`20`		`- background: #fff;`
`21`	`18`	`height: fit-content;`
`22`	`19`	`}`
`23`	`20`