improve handling of greeting component [skip ci]

hyperglass/ui/components/greeting/greeting.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import {
   Modal,
   Button,
@@ -6,7 +7,6 @@ import {
   ModalFooter,
   ModalOverlay,
   ModalContent,
-  useDisclosure,
   ModalCloseButton,
 } from '@chakra-ui/react';
 import { If, Markdown } from '~/components';
@@ -17,25 +17,29 @@ import type { TGreeting } from './types';
 
 export const Greeting = (props: TGreeting) => {
   const { web, content } = useConfig();
-  const { isOpen, onClose } = useDisclosure();
-  const [greetingAck, setGreetingAck] = useGreeting();
+  const { ack: greetingAck, isOpen, close, open } = useGreeting();
 
   const bg = useColorValue('white', 'gray.800');
   const color = useOpposingColor(bg);
 
   function handleClose(ack: boolean = false): void {
-    if (web.greeting.required && !greetingAck && !ack) {
-      setGreetingAck(false);
-    } else if (web.greeting.required && !greetingAck && ack) {
-      setGreetingAck();
-      onClose();
-    } else if (web.greeting.required && greetingAck) {
-      onClose();
+    if (web.greeting.required && !greetingAck.value && !ack) {
+      greetingAck.set(false);
+    } else if (web.greeting.required && !greetingAck.value && ack) {
+      greetingAck.set(true);
+      close();
+    } else if (web.greeting.required && greetingAck.value) {
+      close();
     } else if (!web.greeting.required) {
-      setGreetingAck();
-      onClose();
+      greetingAck.set(true);
+      close();
     }
   }
+  useEffect(() => {
+    if (!greetingAck.value && web.greeting.enable) {
+      isOpen.set(true);
+    }
+  }, []);
   return (
     <Modal
       size="lg"
@@ -43,7 +47,7 @@ export const Greeting = (props: TGreeting) => {
       onClose={handleClose}
       motionPreset="slideInBottom"
       closeOnEsc={web.greeting.required}
-      isOpen={!greetingAck ? true : isOpen}
+      isOpen={isOpen.value}
       closeOnOverlayClick={web.greeting.required}>
       <ModalOverlay />
       <ModalContent

hyperglass/ui/hooks/types.ts

@@ -1,3 +1,4 @@
+import { State } from '@hookstate/core';
 import type { QueryFunctionContext } from 'react-query';
 import type { TFormQuery } from '~/types';
 
@@ -6,7 +7,13 @@ export interface TOpposingOptions {
   dark?: string;
 }
 
-export type TUseGreetingReturn = [boolean, (v?: boolean) => void];
+export type TUseGreetingReturn = {
+  ack: State<boolean>;
+  isOpen: State<boolean>;
+  open(): void;
+  close(): void;
+  greetingReady(): boolean;
+};
 
 export interface TUseLGQueryFn {
   pageParam?: QueryFunctionContext['pageParam'];

hyperglass/ui/hooks/useGreeting.ts

@@ -1,21 +1,39 @@
 import { createState, useState } from '@hookstate/core';
 import { Persistence } from '@hookstate/persistence';
+import { useConfig } from '~/context';
 
 import type { TUseGreetingReturn } from './types';
 
-const greeting = createState<boolean>(false);
+const ackState = createState<boolean>(false);
+const openState = createState<boolean>(false);
 
 export function useGreeting(): TUseGreetingReturn {
-  const state = useState<boolean>(greeting);
+  const ack = useState<boolean>(ackState);
+  const isOpen = useState<boolean>(openState);
+  const { web } = useConfig();
+
   if (typeof window !== 'undefined') {
-    state.attach(Persistence('hyperglass-greeting'));
+    ack.attach(Persistence('hyperglass-greeting'));
   }
 
-  function setAck(v: boolean = true): void {
-    if (!state.get()) {
-      state.set(v);
+  function open() {
+    return isOpen.set(true);
+  }
+  function close() {
+    return isOpen.set(false);
+  }
+
+  function greetingReady(): boolean {
+    if (ack.get()) {
+      return true;
+    } else if (!web.greeting.required && !ack.get()) {
+      return true;
+    } else if (web.greeting.required && !ack.get()) {
+      return false;
+    } else {
+      return false;
     }
   }
 
-  return [state.value, setAck];
+  return { ack, isOpen, greetingReady, open, close };
 }