Fix/terms of use modal (#57)

* fix env override * add debug * update astrojs lib * Update UserArea.tsx * Update TermsOfUseModal.tsx * Update Page.tsx * reconnect automatically
impresso · Nov 23, 2024 · 895513d · 895513d
1 parent d9f690f
commit 895513d
Show file tree

Hide file tree

Showing 8 changed files with 539 additions and 435 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -3,9 +3,11 @@ import react from "@astrojs/react"
 import mdx from "@astrojs/mdx"
 import dotenv from "dotenv"
 
-// load .env.local file, .env.development file, and .env file
+console.log("NODE_ENV:", process.env.NODE_ENV)
 dotenv.config({
-  path: [".env.local", `.env.${process.env.NODE_ENV}`, ".env"],
+  path: [".env", ".env.local", `.env.${process.env.NODE_ENV}`],
+  debug: true,
+  override: true,
 })
 const WsApiTarget =
   process.env.PUBLIC_IMPRESSO_WS_API_HOST ?? "http://localhost"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^3.1.8",
-    "@astrojs/react": "^3.6.2",
+    "@astrojs/mdx": "^3.1.9",
+    "@astrojs/react": "^3.6.3",
     "@astrolib/seo": "^1.0.0-beta.6",
     "@codemirror/lang-python": "^6.1.6",
     "@feathersjs/authentication-client": "^5.0.30",
@@ -34,7 +34,7 @@
     "@uiw/codemirror-theme-nord": "^4.23.1",
     "@uiw/codemirror-themes": "^4.23.5",
     "@uiw/react-codemirror": "^4.23.1",
-    "astro": "^4.16.7",
+    "astro": "^4.16.14",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "boring-avatars": "^1.11.2",

diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
@@ -15,13 +15,14 @@ const LoginModal = () => {
   const [error, setError] = useState<FeathersError | null>(null)
 
   const checkCredentials = (credentials: LoginFormPayload) => {
+    console.debug("[LoginModal] call loginService...")
     loginService
       .create({
         strategy: "local",
         ...credentials,
       })
       .then((data) => {
-        // console.log("loginService.create", data)
+        console.debug("[LoginModal] loginService.create", data)
         setAuthenticatedUser(data.user, data.accessToken)
         setView(null)
       })

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -13,6 +13,7 @@ interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
   autoOpenAfterDelay?: boolean
   manualOpen?: boolean
   onHide?: () => void
+  onShow?: () => void
 }
 
 const Page: React.FC<PageProps> = ({
@@ -29,6 +30,7 @@ const Page: React.FC<PageProps> = ({
   // this is used only when autoOpenAfterDelay is false
   manualOpen = false,
   onHide,
+  onShow,
 }) => {
   const [show, setShow] = useState(false)
   const timerRef = useRef<ReturnType<typeof setTimeout>>()
@@ -49,6 +51,11 @@ const Page: React.FC<PageProps> = ({
       )
     }, 1000)
   }
+  const handleShow = () => {
+    if (typeof onShow === "function") {
+      onShow()
+    }
+  }
 
   useEffect(() => {
     clearTimeout(timerRef.current)
@@ -71,6 +78,7 @@ const Page: React.FC<PageProps> = ({
       fullscreen={fullscreen}
       show={show}
       onHide={handleClose}
+      onShow={handleShow}
       backdrop="static"
       size={size === "xxl" ? "xl" : size}
       keyboard={false}

diff --git a/src/components/TermsOfUseModal.tsx b/src/components/TermsOfUseModal.tsx
@@ -1,10 +1,16 @@
-import { useCallback, useEffect, useState, type ChangeEvent } from "react"
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+} from "react"
 import AcceptTermsOfUse from "./AcceptTermsOfUse"
 import Page from "./Page"
 import Alert from "./Alert"
 import { Col, Container, Row } from "react-bootstrap"
 import { useBrowserStore, usePersistentStore } from "../store"
-import { accountDetailsService } from "../services"
+import { termsOfUseService } from "../services"
 import { DateTime } from "luxon"
 import MarkdownSnippet from "./MarkdownSnippet"
 import { BrowserViewTermsOfUse } from "../constants"
@@ -13,28 +19,10 @@ const TermsOfUseModal: React.FC<{
   content: string
   autoOpenAfterDelay?: boolean
 }> = ({ content, autoOpenAfterDelay = true }) => {
+  const bottomRef = useRef<HTMLDivElement>(null)
   const [isIntersecting, setIsIntersecting] = useState<boolean>(false)
-
-  const bottomRef = useCallback((node: HTMLDivElement | null) => {
-    let observer: IntersectionObserver | null = null
-    if (node !== null) {
-      node.textContent = ""
-      observer = new IntersectionObserver(
-        ([entry]) => {
-          setIsIntersecting(entry.isIntersecting)
-        },
-        { threshold: 0.5 },
-      )
-      observer.observe(node)
-    }
-    return () => {
-      console.debug("[TermsOfUseModal] bottomRef cleanup")
-      if (node && observer) {
-        observer.unobserve(node)
-      }
-    }
-  }, [])
-
+  const [isBottomRefUnavailable, setIsBottomRefUnavailable] =
+    useState<boolean>(false)
   const [wsStatus, view] = useBrowserStore((state) => [
     state.wsStatus,
     state.view,
@@ -56,6 +44,28 @@ const TermsOfUseModal: React.FC<{
   const isAcceptedTermsDateValid = acceptedTermsDate
     ? DateTime.fromISO(acceptedTermsDate).isValid
     : false
+
+  const onShowHandler = useCallback(() => {
+    if (!bottomRef.current) {
+      console.warn(
+        "[TermsOfUseModal] onShowHandler - bottomRef.current is null!",
+      )
+      setIsBottomRefUnavailable(true)
+      return
+    }
+    console.debug("[TermsOfUseModal] onShowHandler create BottomRef")
+    const observer: IntersectionObserver = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting)
+      },
+      { threshold: 0.5 },
+    )
+    observer.observe(bottomRef.current)
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
   useEffect(
     () => {
       if (wsStatus !== "connected") {
@@ -72,7 +82,8 @@ const TermsOfUseModal: React.FC<{
         "[TermsOfUseModal] @useEffect - ws connected, call accountDetails.find() ...",
       )
       setIsBusy(true)
-      accountDetailsService
+
+      termsOfUseService
         .find()
         .then((data) => {
           console.debug(
@@ -105,6 +116,7 @@ const TermsOfUseModal: React.FC<{
       setView(null)
     }
   }, [acceptedTermsDate])
+
   useEffect(() => {
     if (!enableAcceptTermsButton && isIntersecting) {
       setEnableAcceptTermsButton(true)
@@ -128,7 +140,7 @@ const TermsOfUseModal: React.FC<{
     setAcceptedTermsDate(DateTime.now().toISOTime())
     setIsBusy(true)
 
-    accountDetailsService
+    termsOfUseService
       .patch(null, {
         acceptTerms: event.target.checked,
       })
@@ -154,12 +166,19 @@ const TermsOfUseModal: React.FC<{
       onHide={() => {
         setView(null)
       }}
+      onShow={onShowHandler}
       footer={
-        <AcceptTermsOfUse
-          checked={isAcceptedTermsDateValid}
-          onChange={AcceptTermsOfUseOnChangeHandler}
-          disabled={!enableAcceptTermsButton}
-        />
+        isBottomRefUnavailable ? (
+          <div className="py-3 text-center w-100 border-top">
+            Please read carefully our Terms of Use
+          </div>
+        ) : (
+          <AcceptTermsOfUse
+            checked={isAcceptedTermsDateValid}
+            onChange={AcceptTermsOfUseOnChangeHandler}
+            disabled={!enableAcceptTermsButton}
+          />
+        )
       }
     >
       <Container>
@@ -194,6 +213,12 @@ const TermsOfUseModal: React.FC<{
               value={content}
               onClick={() => setEnableAcceptTermsButton(true)}
             />
+            {isBottomRefUnavailable ? (
+              <AcceptTermsOfUse
+                checked={isAcceptedTermsDateValid}
+                onChange={AcceptTermsOfUseOnChangeHandler}
+              />
+            ) : null}
           </div>
           <div ref={bottomRef}>&nbsp;</div>
         </Row>

diff --git a/src/components/UserArea.tsx b/src/components/UserArea.tsx
@@ -12,7 +12,7 @@ const CustomToggle = forwardRef(
       children?: React.ReactNode
       onClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {}
     },
-    ref: React.Ref<HTMLAnchorElement>
+    ref: React.Ref<HTMLAnchorElement>,
   ) => (
     <a
       href=""
@@ -26,7 +26,7 @@ const CustomToggle = forwardRef(
       {props.children}
       <PageDown className="ms-2" />
     </a>
-  )
+  ),
 )
 
 const UserArea = () => {
@@ -43,7 +43,7 @@ const UserArea = () => {
     if (wsStatus !== "connected") {
       console.debug(
         "[UserArea] @useEffect - ws not connected, current status",
-        wsStatus
+        wsStatus,
       )
       return
     }
@@ -64,7 +64,7 @@ const UserArea = () => {
         })
     } else {
       console.debug(
-        "[UserArea] @useEffect - ws connected, but no token available. Reset user."
+        "[UserArea] @useEffect - ws connected, but no token available. Reset user.",
       )
       setUser(null)
     }

diff --git a/src/services.tsx b/src/services.tsx
@@ -11,6 +11,7 @@ const socket = io("", {
   forceNew: true,
   transports: ["websocket"],
 })
+let timeoutTimer: NodeJS.Timeout | null = null
 // print ut socket version
 const app = feathers()
 app.configure(
@@ -26,13 +27,20 @@ app.configure(
 console.info("[services] socket.io version", socket.io.engine.id)
 
 socket.on("connect_error", (err) => {
-  console.error("[services] socket.io connection error:", err)
+  console.error("[services] socket.io connection error:", err.message)
   // reconnnect using transports
   socket.disconnect()
   setWsStatus("closed")
+  // automatically try to reconnect after 5 seconds
+  if (timeoutTimer !== null) {
+    clearTimeout(timeoutTimer)
+  }
+  timeoutTimer = setTimeout(() => {
+    socket.connect()
+  }, 5000)
 })
-socket.on("connect_timeout", (timeout) => {
-  console.error("[services] socket.io connection timeout:", timeout)
+socket.on("connect_timeout", (err) => {
+  console.error("[services] socket.io connection timeout:", err.message)
   setWsStatus("closed")
 })
 socket.on("connect", async () => {
@@ -47,7 +55,7 @@ socket.on("connect", async () => {
     .catch((err) => {
       console.warn(
         "[services] @connect reAuthenticate failure, skip. Error:",
-        err,
+        err.message,
       )
       return null
     })
@@ -63,5 +71,5 @@ socket.on("reconnect", (attemptNumber) => {
 export const versionService = app.service("version")
 export const userService = app.service("me")
 export const usersService = app.service("users")
-export const accountDetailsService = app.service("account-details")
+export const termsOfUseService = app.service("terms-of-use")
 export const loginService = app.service("authentication")