@rpcbase/client 0.78.0 → 0.80.0

package/auth/SignOut/index.js

@@ -2,6 +2,7 @@
 import assert from "assert"
 import {useState, useEffect} from "react"
 import {ActivityIndicator} from "react-native"
+import Alert from "react-bootstrap/Alert"
 import page from "page"
 
 import post from "../../helpers/post"
@@ -22,14 +23,15 @@ const SignOut = ({
 
   const [isSignedOut, setIsSignedOut] = useState(false)
 
-  const [accounts, setAccounts] = useState([])
+  const [accounts, setAccounts] = useState()
+  const [selectedAccounts, setSelectedAccounts] = useState([])
+
 
   useEffect(() => {
     const load = async() => {
       const res = await post("/api/v1/auth/get_accounts")
       assert(res.status === "ok")
       setAccounts(res.accounts)
-      console.log("ACCOUNTS", res.accounts)
     }
 
     load()
@@ -44,7 +46,6 @@ const SignOut = ({
       localStorage.clear()
 
       // TODO: clear DB
-
       setIsSignedOut(true)
       onSuccess()
     } else {
@@ -53,49 +54,73 @@ const SignOut = ({
   }
 
 
-  const onClickAccount = () => {
-    console.log("clicked account")
-  }
-
-
   const onSubmit = () => {
     signOut()
+    console.log("SEL", selectedAccounts)
   }
 
   return (
     <div id="sign-out-wrapper">
-      {isSignedOut && <div>signed out successfully</div>}
-      {accounts?.length > 0 && (<><div className="form-signout text-center px-4 py-4 shadow-lg">
-        <div>
+
+      {isSignedOut && (
+        <Alert variant="light" data-bs-theme="dark" style={{maxWidth: 260, position: "absolute"}} onClose={() => setIsSignedOut(false)} dismissible>
+          Signed out successfully
+        </Alert>
+      )}
+
+      {accounts ? (<div className="form-signout text-center px-4 py-4 shadow-lg">
+
           <h1 className="h4 mt-3 mb-3 fw-normal">Sign Out</h1>
-          <p className="text-start text-muted">
-            Select accounts to sign out of:
-          </p>
-
-          <ul className="list-group text-start">
-            {accounts.map((acc, index) => {
-              const id = `acc-${acc.user_id}-${index}`
-              return (
-                <li key={id} className="list-group-item">
-                  <input className="form-check-input me-3" type="checkbox" value="" id={id} />
-                  <label className="form-check-label stretched-link" for={id}>
-                    <AccountListItem
-                      account={acc}
-                      onClick={onClickAccount}
-                    />
-                  </label>
-                </li>
-              )
-            })}
-          </ul>
-
-          <button className="mt-4 mb-3 w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>Sign Out</button>
-
-        </div>
-      </div>
+
+          {Array.isArray(accounts) && accounts.length > 0 && (
+            <>
+              <p className="text-start text-muted">
+                Select accounts to sign out of:
+              </p>
+
+              <ul className="list-group text-start">
+                {accounts.map((acc, index) => {
+                  const id = `acc-${acc.user_id}-${index}`
+
+                  const onChange = (e) => {
+                    if (e.target.checked) {
+                      setSelectedAccounts((prev) => [...prev, acc.user_id])
+                    } else {
+                      setSelectedAccounts((prev) => [...prev.filter((v) => v !== acc.user_id)])
+                    }
+                  }
+
+                  const checked = selectedAccounts.includes(acc.user_id)
+
+                  return (
+                    <li key={id} className="list-group-item">
+                      <input className="form-check-input me-3" type="checkbox" value="" checked={checked} onChange={onChange} id={id} />
+                      <label className="form-check-label stretched-link" for={id}>
+                        <AccountListItem
+                          account={acc}
+                          // onClick={onClickAccount}
+                        />
+                      </label>
+                    </li>
+                  )
+                })}
+              </ul>
+
+              <button className="mt-4 mb-3 w-100 btn btn-lg btn-primary" type="submit" onClick={onSubmit}>Sign Out</button>
+            </>
+          )}
+
+          {Array.isArray(accounts) && accounts.length === 0 && (
+            <p className="text-start text-muted">
+              You aren't signed in to any accounts<br />
+              Go to: <a href="/signin">/signin</a>
+            </p>
+          )}
+
+      </div>) : <div className="h-100"/>}
 
       <Footer name={name} />
-      </>)}
+
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.78.0",
+  "version": "0.80.0",
   "scripts": {
     "build-firebase": "webpack -c firebase/webpack.config.js",
     "build": "yarn build-firebase",

package/rts/getUseQuery.js

@@ -138,7 +138,7 @@ const getUseQuery = (register_query) => (
 
     return () => {
       log && log("useQuery cleanup unsubscribe()")
-      unsubscribe()
+      typeof unsubscribe === "function" && unsubscribe()
     }
   }, [JSON.stringify(query), key])