From f69ede49ddc9f4a008c914cdfa97338b0c1ac916 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Thu, 23 Mar 2023 12:25:15 -0600
Subject: [PATCH] chore(cmdk): command menu context with hooks

---
 .../ui/src/components/Command/AiCommand.tsx   |  4 +-
 .../ui/src/components/Command/Command.tsx     | 24 +++++-----
 .../src/components/Command/Command.utils.tsx  | 46 ++++++++++---------
 .../ui/src/components/Command/DocsSearch.tsx  | 13 ++----
 4 files changed, 42 insertions(+), 45 deletions(-)

diff --git a/packages/ui/src/components/Command/AiCommand.tsx b/packages/ui/src/components/Command/AiCommand.tsx
index fbe3deafe94..8460139a9c8 100644
--- a/packages/ui/src/components/Command/AiCommand.tsx
+++ b/packages/ui/src/components/Command/AiCommand.tsx
@@ -30,7 +30,7 @@ import SearchResult, { SearchResultType } from './SearchResult'
 import { CommandGroup, CommandItem, CommandInput } from './Command.utils'
 import { IconCopy } from '../Icon/icons/IconCopy'
 
-import { AiIcon, AiIconChat, COMMAND_ROUTES } from './Command'
+import { AiIcon, AiIconChat, COMMAND_ROUTES, useCommandMenu } from './Command'
 
 const questions = [
   'How do I get started with Supabase?',
@@ -132,13 +132,13 @@ const AiCommand: FC<IAiCommand> = ({ query, setQuery, page }) => {
   // const { close, query, setQuery } = useSearch()
   const [answer, setAnswer] = useState<string | undefined>('')
   const [results, setResults] = useState<any[]>()
-  const [isLoading, setIsLoading] = useState(false)
   const [isResponding, setIsResponding] = useState(false)
   const [hasClippyError, setHasClippyError] = useState(false)
   const [hasSearchError, setHasSearchError] = useState(false)
   const [selectedTab, setSelectedTab] = useState('clippy-panel')
   const eventSourceRef = useRef<SSE>()
   const supabaseClient = useSupabaseClient()
+  const { isLoading, setIsLoading } = useCommandMenu()
 
   const [promptIndex, setPromptIndex] = useState(0)
   const [promptData, dispatchPromptData] = useReducer(promptDataReducer, [])
diff --git a/packages/ui/src/components/Command/Command.tsx b/packages/ui/src/components/Command/Command.tsx
index ed0d5fca7b8..a6ab6dd3125 100644
--- a/packages/ui/src/components/Command/Command.tsx
+++ b/packages/ui/src/components/Command/Command.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import * as React from 'react'
+import { createContext, useContext } from 'react'
 import { useRouter } from 'next/router'
 
 import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
@@ -92,6 +93,13 @@ const ItemHandler = (props: any) => {
   return <CommandItem {...props} />
 }
 
+export interface CommandMenuContextValue {
+  isLoading: boolean
+  setIsLoading: (isLoading: boolean) => void
+}
+export const CommandMenuContext = createContext<CommandMenuContextValue>(undefined)
+export const useCommandMenu = () => useContext(CommandMenuContext)
+
 function CommandMenu({ actions }: { actions: IActions }) {
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
@@ -147,7 +155,7 @@ function CommandMenu({ actions }: { actions: IActions }) {
   const showCommandInput = page === undefined || !AI_CHAT_ROUTES.includes(page)
 
   return (
-    <>
+    <CommandMenuContext.Provider value={{ isLoading, setIsLoading }}>
       <p className="text-sm text-slate-500 dark:text-slate-400">
         Press{' '}
         <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-slate-100 bg-slate-100 px-1.5 font-mono text-[10px] font-medium text-slate-600 opacity-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
@@ -198,7 +206,6 @@ function CommandMenu({ actions }: { actions: IActions }) {
             placeholder="Type a command or search..."
             value={search}
             onValueChange={setSearch}
-            loading={isLoading}
           />
         )}
         {/* <CommandList>
@@ -327,14 +334,7 @@ function CommandMenu({ actions }: { actions: IActions }) {
           )}
           {page === COMMAND_ROUTES.DOCS_SEARCH && (
             <>
-              <DocsSearch
-                query={search}
-                setQuery={setSearch}
-                page={page}
-                isLoading={isLoading}
-                setIsLoading={setIsLoading}
-                router={router}
-              />
+              <DocsSearch query={search} setQuery={setSearch} page={page} router={router} />
             </>
           )}
           {page === COMMAND_ROUTES.AI_RLS_POLICY && (
@@ -436,7 +436,7 @@ function CommandMenu({ actions }: { actions: IActions }) {
         </CommandList>
       </CommandDialog>
       {/* <AiCommand /> */}
-    </>
+    </CommandMenuContext.Provider>
   )
 }
 
diff --git a/packages/ui/src/components/Command/Command.utils.tsx b/packages/ui/src/components/Command/Command.utils.tsx
index a98f3e7c6ab..1c9f710975d 100644
--- a/packages/ui/src/components/Command/Command.utils.tsx
+++ b/packages/ui/src/components/Command/Command.utils.tsx
@@ -9,6 +9,7 @@ import { Modal } from '../Modal'
 import { ModalProps } from '../Modal/Modal'
 import { KeyboardEventHandler } from 'react'
 import { LoadingLine } from './LoadingLine'
+import { useCommandMenu } from './Command'
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -71,33 +72,36 @@ const CommandDialog = ({ children, onKeyDown, page, ...props }: CommandDialogPro
 type CommandPrimitiveInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 
 type CommandInputProps = CommandPrimitiveInputProps & {
-  loading?: boolean
   _key?: string | number
 }
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   CommandInputProps
->(({ className, value, loading, onValueChange, _key, ...props }, ref) => (
-  <div className="flex flex-col items-center" cmdk-input-wrapper="">
-    {/* <IconSearch strokeWidth={2} className="text-scale-1200 mr-2 h-4 w-4 shrink-0 opacity-50" /> */}
-    <CommandPrimitive.Input
-      value={value}
-      key={_key}
-      autoFocus
-      onValueChange={onValueChange}
-      ref={ref}
-      className={cn(
-        'flex h-11 w-full rounded-md bg-transparent px-4 py-7 text-sm outline-none',
-        'focus:shadow-none focus:ring-transparent',
-        'placeholder:text-scale-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-scale-1200 border-0',
-        className
-      )}
-      {...props}
-    />
-    <LoadingLine loading={loading} />
-  </div>
-))
+>(({ className, value, onValueChange, _key, ...props }, ref) => {
+  const { isLoading } = useCommandMenu()
+
+  return (
+    <div className="flex flex-col items-center" cmdk-input-wrapper="">
+      {/* <IconSearch strokeWidth={2} className="text-scale-1200 mr-2 h-4 w-4 shrink-0 opacity-50" /> */}
+      <CommandPrimitive.Input
+        value={value}
+        key={_key}
+        autoFocus
+        onValueChange={onValueChange}
+        ref={ref}
+        className={cn(
+          'flex h-11 w-full rounded-md bg-transparent px-4 py-7 text-sm outline-none',
+          'focus:shadow-none focus:ring-transparent',
+          'placeholder:text-scale-800 disabled:cursor-not-allowed disabled:opacity-50 dark:text-scale-1200 border-0',
+          className
+        )}
+        {...props}
+      />
+      <LoadingLine loading={isLoading} />
+    </div>
+  )
+})
 
 CommandInput.displayName = CommandPrimitive.Input.displayName
 
diff --git a/packages/ui/src/components/Command/DocsSearch.tsx b/packages/ui/src/components/Command/DocsSearch.tsx
index c7ed2b2f039..434a1bc4ba4 100644
--- a/packages/ui/src/components/Command/DocsSearch.tsx
+++ b/packages/ui/src/components/Command/DocsSearch.tsx
@@ -12,6 +12,7 @@ import {
   IconHash,
   IconLoader,
   IconSearch,
+  useCommandMenu,
 } from 'ui'
 import { CommandGroup, CommandItem, CommandLabel } from './Command.utils'
 
@@ -100,19 +101,10 @@ export interface DocsSearchProps {
   query?: string
   setQuery?: () => void
   page?: string
-  isLoading?: boolean
-  setIsLoading?: () => void
   router: any
 }
 
-const DocsSearch = ({
-  query,
-  setQuery,
-  page,
-  isLoading,
-  setIsLoading,
-  router,
-}: DocsSearchProps) => {
+const DocsSearch = ({ query, setQuery, page, router }: DocsSearchProps) => {
   const { isDarkMode } = useTheme()
 
   // const { close, query, setQuery } = useSearch()
@@ -124,6 +116,7 @@ const DocsSearch = ({
   const [selectedTab, setSelectedTab] = useState('clippy-panel')
   const eventSourceRef = useRef<SSE>()
   const supabaseClient = useSupabaseClient()
+  const { isLoading, setIsLoading } = useCommandMenu()
 
   const [promptIndex, setPromptIndex] = useState(0)
   const [promptData, dispatchPromptData] = useReducer(promptDataReducer, [])