Merge pull request #9 from edgeandnode/piotr/toast

Pass toast message through props

demo/index.tsx

@@ -1,113 +1,115 @@
-import { StrictMode, useState } from "react";
-import { createRoot } from "react-dom/client";
+import React, { StrictMode, useState } from 'react'
+import { createRoot } from 'react-dom/client'
 
-import { ThemeProvider } from "@edgeandnode/components";
+import { ThemeProvider, Toast } from '@edgeandnode/components'
 
-import { GraphProtocolGraphiQL } from "../src";
-import { SavedQuery } from "../src/SavedQueriesToolbar/types";
+import { GraphProtocolGraphiQL } from '../src'
+import { SavedQuery } from '../src/SavedQueriesToolbar/types'
 
 // #region utils
 
 const counter = (() => {
-  let value = 0;
-  return () => value++;
-})();
+  let value = 0
+  return () => value++
+})()
 
 // #endregion utils
 
-const url =
-  "https://api.thegraph.com/subgraphs/name/graphprotocol/graph-network-mainnet-staging";
+const url = 'https://api.thegraph.com/subgraphs/name/graphprotocol/graph-network-mainnet-staging'
 
 const DEFAULT_QUERY_STR = `\
 {
   subgraphs(first: 5, orderBy: createdAt, orderDirection: desc) {
     displayName
   }
-}`;
+}`
 
 const SCHEMA_TYPES_QUERY_STR = `\
 query GetSchemaTypes {
   __schema {
     queryType { name }
   }
-}`;
+}`
 
 const initialQueries = [
   {
-    name: "Subgraph Names",
+    name: 'Subgraph Names',
     query: DEFAULT_QUERY_STR,
     isDefault: true,
   },
   {
-    name: "Schema Types",
+    name: 'Schema Types',
     query: SCHEMA_TYPES_QUERY_STR,
   },
 ].map((x, i) => ({
   id: `${i}`,
   ...x,
-}));
+}))
 
 function Demo() {
-  const [currentQueryId, setCurrentQueryId] = useState<SavedQuery["id"] | null>(
-    initialQueries[0].id
-  );
-  const [savedQueries, setSavedQueries] =
-    useState<SavedQuery[]>(initialQueries);
+  const [currentQueryId, setCurrentQueryId] = useState<SavedQuery['id'] | null>(initialQueries[0].id)
+  const [savedQueries, setSavedQueries] = useState<SavedQuery[]>(initialQueries)
+  const [toast, setToast] = useState<GraphProtocolGraphiQL.ToastMessage | undefined>()
 
   return (
-    <GraphProtocolGraphiQL
-      fetcher={{ url }}
-      queries={savedQueries}
-      currentQueryId={currentQueryId}
-      header={
-        <GraphProtocolGraphiQL.SavedQueriesToolbar
-          isMobile={false}
-          isOwner={true}
-          onSelectQuery={(queryId) => {
-            setCurrentQueryId(queryId);
-          }}
-          onSaveAsNewQuery={async ({ name, query }) => {
-            const newQuery: SavedQuery = {
-              id: counter(),
-              name,
-              query,
-            };
+    <>
+      <GraphProtocolGraphiQL
+        fetcher={{ url }}
+        queries={savedQueries}
+        currentQueryId={currentQueryId}
+        header={
+          <GraphProtocolGraphiQL.SavedQueriesToolbar
+            isMobile={false}
+            isOwner={true}
+            onToast={setToast}
+            onSelectQuery={(queryId) => {
+              setCurrentQueryId(queryId)
+            }}
+            onSaveAsNewQuery={async ({ name, query }) => {
+              const newQuery: SavedQuery = {
+                id: counter(),
+                name,
+                query,
+              }
 
-            setSavedQueries((queries) => [...queries, newQuery]);
-          }}
-          onDeleteQuery={async () => {
-            setCurrentQueryId(
-              savedQueries.find((x) => x.isDefault)?.id ??
-                savedQueries[0]?.id ??
-                null
-            );
-            setSavedQueries((queries) =>
-              queries.filter((x) => x.id !== currentQueryId)
-            );
-          }}
-          onSetQueryAsDefault={async () => {
-            setSavedQueries((queries) =>
-              queries.map((q) => ({ ...q, isDefault: q.id === currentQueryId }))
-            );
-          }}
-          onUpdateQuery={async ({ name, query }) => {
-            setSavedQueries((qs) =>
-              qs.map((q) =>
-                q.id === currentQueryId ? { ...q, name, query } : q
-              )
-            );
-          }}
-          showActions
-        />
-      }
-    />
-  );
+              setSavedQueries((queries) => [...queries, newQuery])
+              setCurrentQueryId(newQuery.id)
+            }}
+            onDeleteQuery={async () => {
+              const newCurrent = savedQueries.find((x) => x.isDefault)?.id ?? savedQueries[0]?.id ?? null
+              setSavedQueries((queries) => queries.filter((x) => x.id !== currentQueryId))
+              setCurrentQueryId(newCurrent)
+            }}
+            onSetQueryAsDefault={async () => {
+              setSavedQueries((queries) => queries.map((q) => ({ ...q, isDefault: q.id === currentQueryId })))
+            }}
+            onUpdateQuery={async ({ name, query }) => {
+              setSavedQueries((qs) => qs.map((q) => (q.id === currentQueryId ? { ...q, name, query } : q)))
+            }}
+            showActions
+          />
+        }
+      />
+      {/* TODO: I'm not quite sure if this is the best public API. */}
+      <Toast
+        open={!!toast}
+        severity={toast?.severity || 'error'}
+        title={toast?.title || ''}
+        action={toast?.action}
+        description={toast?.description}
+        onClose={() => {
+          toast?.onClose?.()
+          setToast(undefined)
+        }}
+      />
+    </>
+  )
 }
 
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ThemeProvider>
       <Demo />
     </ThemeProvider>
-  </StrictMode>
-);
+  </StrictMode>,
+)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgeandnode/graphiql-playground",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "commonjs",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -39,7 +39,7 @@
     "@graphiql/toolkit": "0.7.3"
   },
   "devDependencies": {
-    "@edgeandnode/components": "^23.5.10",
+    "@edgeandnode/components": "^23.6.3-rc.0",
     "@edgeandnode/eslint-config": "^1.0.3",
     "@emotion/react": ">=11",
     "@types/node": "^18.7.13",

src/SavedQueriesToolbar/SavedQueriesActionButtons.tsx

@@ -2,7 +2,7 @@
 
 import { Flex, NewGDSButton as Button, Spacing } from '@edgeandnode/components'
 
-import { SnackbarMessageType } from './SavedQueriesSnackbar'
+import { SnackbarMessageType } from './messages'
 import { SavedQuery } from './types'
 import { validateQuery, ValidationStatus } from './validation'