Some minor improvements

p2panda · Feb 5, 2024 · e78dc24 · e78dc24
1 parent 6d9e7fe
commit e78dc24
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/website/docs/tutorials/queries.md b/website/docs/tutorials/queries.md
@@ -38,6 +38,7 @@ homepage](https://graphql.org/) has useful learning resources.
 ## What do I need?
 
 - Browser
+- terminal
 - `aquadoggo` node
 
 ## What is `aquadoggo`?
@@ -225,7 +226,7 @@ function QueriesApp(props) {
   `;
 
   return (
-    <App header="🔍 🗟">
+    <App header="🔍 🗎">
       <Query query={query}></Query>
     </App>
   );
@@ -340,7 +341,7 @@ function QueriesApp(props) {
   `;
 
   return (
-    <App header="🔍 🗟">
+    <App header="🔍 🗎">
       <Query query={query}></Query>
     </App>
   );
@@ -403,7 +404,7 @@ function QueriesApp(props) {
   `;
 
   return (
-    <App header="🔍 🗟">
+    <App header="🔍 🗎">
       <Query query={query}></Query>
     </App>
   );
@@ -446,7 +447,7 @@ function QueriesApp(props) {
   `;
 
   return (
-    <App header="🔍 🗟">
+    <App header="🔍 🗎">
       <PaginatedQuery queryBuilder={queryBuilder} endCursor=""></PaginatedQuery>
     </App>
   );

diff --git a/website/src/theme/ReactLiveScope/query-tutorial/Query.jsx b/website/src/theme/ReactLiveScope/query-tutorial/Query.jsx
@@ -3,21 +3,23 @@ import { gql } from 'graphql-request';
 import JsonView from 'react18-json-view';
 import 'react18-json-view/src/style.css';
 import { P2pandaContext } from '../P2pandaContext';
+import { MessageContext } from '../MessageContext';
 
 export const Query = ({ query }) => {
-  const [result, setResult] = useState('No results');
+  const [result, setResult] = useState('No results, is your node online?');
   const { graphQLClient } = useContext(P2pandaContext);
-
+  const { setError } = useContext(MessageContext);
+
   const makeQuery = useCallback(async () => {
     try {
       const result = await graphQLClient.request(gql`
         ${query}
       `);
       setResult(result);
     } catch (err) {
-      setResult(err);
+      setError(`${err}`);
     }
-  }, [graphQLClient, query]);
+  }, [graphQLClient, query, setError]);
 
   useEffect(() => {
     makeQuery();

diff --git a/website/src/theme/ReactLiveScope/query-tutorial/StudySetForm.jsx b/website/src/theme/ReactLiveScope/query-tutorial/StudySetForm.jsx
@@ -5,12 +5,13 @@ import { gql } from 'graphql-request';
 import { P2pandaContext } from '../P2pandaContext';
 import { MessageContext } from '../MessageContext';
 import { STUDY_SET_MEMBERS_SCHEMA_ID, STUDY_SETS_SCHEMA_ID } from '../consts';
+import { NodeStatusContext } from '../NodeStatusContext';
 
 export const StudySetForm = ({ studySetsQuery }) => {
   const { graphQLClient, session } = useContext(P2pandaContext);
   const { setError, setSuccess } = useContext(MessageContext);
 
-  const [studySets, setStudySets] = useState([]);
+  const [studySets, setStudySets] = useState(null);
   const [busy, setBusy] = useState([]);
 
   const getStudySets = useCallback(async () => {
@@ -78,6 +79,7 @@ export const StudySetForm = ({ studySetsQuery }) => {
 };
 
 const Form = ({ studySets, onAddVocabulary, busy, onRefresh }) => {
+  const { nodeOnline } = useContext(NodeStatusContext);
   const [values, setValues] = useState({
     studySet: '',
     vocabulary: '',
@@ -98,7 +100,7 @@ const Form = ({ studySets, onAddVocabulary, busy, onRefresh }) => {
     if (!studySets) {
       return (
         <option key={0} value={''}>
-          {'no data'}
+          no study sets found...
         </option>
       );
     }
@@ -119,17 +121,21 @@ const Form = ({ studySets, onAddVocabulary, busy, onRefresh }) => {
     setValues({ studySet: '', vocabulary: '' });
   };
 
-  const disabled = !values.studySet || !values.vocabulary || busy;
+  const disabled =
+    !values.studySet || !values.vocabulary || busy || !nodeOnline;
 
   return (
     <div id="study-sets-form">
       <div className="button-wrapper">
-        <button onClick={onRefresh}>&#8635;</button>
+        <button disabled={disabled} onClick={onRefresh}>
+          &#8635;
+        </button>
       </div>
       <form onSubmit={onSubmit}>
         <fieldset>
           <label htmlFor="studySet">Study Sets</label>
           <select
+            disabled={disabled}
             id="studySet"
             name="studySet"
             size={3}
@@ -142,6 +148,7 @@ const Form = ({ studySets, onAddVocabulary, busy, onRefresh }) => {
         <fieldset>
           <label htmlFor="vocabulary">Vocabulary ID</label>
           <input
+            disabled={disabled}
             type="text"
             id="vocabulary"
             name="vocabulary"