fix toggling history

graphql · May 23, 2022 · 8000ace · 8000ace
1 parent 0a41363
commit 8000ace
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/graphiql-react/src/history.tsx b/packages/graphiql-react/src/history.tsx
@@ -30,6 +30,7 @@ export type HistoryContextType = {
   isVisible: boolean;
   items: readonly QueryStoreItem[];
   show(): void;
+  toggle(): void;
   toggleFavorite(args: {
     query?: string;
     variables?: string;
@@ -104,6 +105,15 @@ export function HistoryContextProvider(props: HistoryContextProviderProps) {
     setIsVisible(true);
   }, [onToggle, storage]);
 
+  const toggle = useCallback(() => {
+    setIsVisible(current => {
+      const newValue = !current;
+      onToggle?.(newValue);
+      storage?.set(STORAGE_KEY, JSON.stringify(newValue));
+      return newValue;
+    });
+  }, [onToggle, storage]);
+
   const toggleFavorite: HistoryContextType['toggleFavorite'] = useCallback(
     ({ query, variables, headers, operationName, label, favorite }) => {
       historyStore.current.toggleFavorite(
@@ -127,9 +137,19 @@ export function HistoryContextProvider(props: HistoryContextProviderProps) {
       isVisible,
       items,
       show,
+      toggle,
       toggleFavorite,
     }),
-    [addToHistory, editLabel, hide, isVisible, items, show, toggleFavorite],
+    [
+      addToHistory,
+      editLabel,
+      hide,
+      isVisible,
+      items,
+      show,
+      toggle,
+      toggleFavorite,
+    ],
   );
 
   return (

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -839,8 +839,12 @@ class GraphiQLWithContext extends React.Component<
           label="Copy"
         />
         <ToolbarButton
-          onClick={() => this.props.historyContext?.show()}
-          title="Show History"
+          onClick={() => this.props.historyContext?.toggle()}
+          title={
+            this.props.historyContext?.isVisible
+              ? 'Hide History'
+              : 'Show History'
+          }
           label="History"
         />
         {this.props.toolbar?.additionalContent