From d46d3317f04c1e435d69dcf5e8a83300153d1307 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Thu, 31 Dec 2020 21:49:27 -0700
Subject: [PATCH] improve handling of greeting component [skip ci]

---
 .../ui/components/greeting/greeting.tsx       | 30 +++++++++--------
 hyperglass/ui/hooks/types.ts                  |  9 +++++-
 hyperglass/ui/hooks/useGreeting.ts            | 32 +++++++++++++++----
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/hyperglass/ui/components/greeting/greeting.tsx b/hyperglass/ui/components/greeting/greeting.tsx
index 0082938..5769278 100644
--- a/hyperglass/ui/components/greeting/greeting.tsx
+++ b/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
diff --git a/hyperglass/ui/hooks/types.ts b/hyperglass/ui/hooks/types.ts
index efde46c..8d1c4ac 100644
--- a/hyperglass/ui/hooks/types.ts
+++ b/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'];
diff --git a/hyperglass/ui/hooks/useGreeting.ts b/hyperglass/ui/hooks/useGreeting.ts
index 20be64a..ac5096d 100644
--- a/hyperglass/ui/hooks/useGreeting.ts
+++ b/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 };
 }