Merge pull request #230 from golemfactory/update-react-sdk-to-3.0

Document the changes in @golem-sdk/react version 3.0

Author: jalas167

src/pages/docs/creators/javascript/react/api-reference-overview.md

@@ -8,13 +8,11 @@ type: React Reference
 
 This section contains short descriptions of all the components and hooks available in the React SDK. Click on the name of the component or hook to see the full documentation.
 
-| Component or hook                                                           | Description                                                                                                                             |
-| --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| [YagnaProvider](/docs/creators/javascript/react/yagna-provider)             | This component provides context for the Golem React SDK. It's required to wrap your app with this component if you want to use the SDK. |
-| [useYagna](/docs/creators/javascript/react/use-yagna)                       | This hook provides information about the Yagna connection status.                                                                       |
-| [useExecutor](/docs/creators/javascript/react/use-executor)                 | This hook allows you to initialize and manage a task executor.                                                                          |
-| [useTask](/docs/creators/javascript/react/use-task)                         | This hook allows you to run a single task on the Golem Network                                                                          |
-| [useInvoices](/docs/creators/javascript/react/use-invoices)                 | This hook allows you to fetch all invoices known to your Yagna node.                                                                    |
-| [useHandleInvoice](/docs/creators/javascript/react/use-handle-invoice)      | This hook allows you to handle invoices (currently only paying them is supported).                                                      |
-| [useDebitNotes](/docs/creators/javascript/react/use-debit-notes)            | This hook allows you to fetch all debit notes known to your Yagna node.                                                                 |
-| [useHandleDebitNote](/docs/creators/javascript/react/use-handle-debit-note) | This hook allows you to handle debit notes (currently only paying them is supported).                                                   |
+| Component or hook                                                      | Description                                                                                                                             |
+| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| [YagnaProvider](/docs/creators/javascript/react/yagna-provider)        | This component provides context for the Golem React SDK. It's required to wrap your app with this component if you want to use the SDK. |
+| [useYagna](/docs/creators/javascript/react/use-yagna)                  | This hook provides information about the Yagna connection status.                                                                       |
+| [useExecutor](/docs/creators/javascript/react/use-executor)            | This hook allows you to initialize and manage a task executor.                                                                          |
+| [useTask](/docs/creators/javascript/react/use-task)                    | This hook allows you to run a single task on the Golem Network                                                                          |
+| [useInvoices](/docs/creators/javascript/react/use-invoices)            | This hook allows you to search through all invoices known to your Yagna node.                                                           |
+| [useHandleInvoice](/docs/creators/javascript/react/use-handle-invoice) | This hook allows you to handle invoices (currently only paying them is supported).                                                      |

src/pages/docs/creators/javascript/react/getting-started.md

@@ -58,7 +58,7 @@ bun add @golem-sdk/react
 Then make sure to wrap your app with the `YagnaProvider` component:
 
 ```jsx
-<YagnaProvider config={{ yagnaAppKey: 'my-app-key' }}>
+<YagnaProvider>
   <App />
 </YagnaProvider>
 ```
@@ -79,23 +79,26 @@ Now that you have the SDK installed and configured, you can start using it in yo
 
 ```jsx
 function YagnaStatus() {
-  const { isConnected, reconnect, isLoading, error } = useYagna()
-  if (isLoading) {
-    return <div>Loading...</div>
+  const { isConnected, setYagnaOptions } = useYagna()
+  const inputRef = useRef(null)
+  if (isConnected) {
+    return <span>Connected to Yagna!</span>
   }
   return (
     <div>
-      <div>Yagna is {isConnected ? 'connected' : 'disconnected'}</div>
-      <button onClick={reconnect} disabled={isConnected}>
-        Reconnect
+      <div>Enter your app key to connect to Yagna</div>
+      <input ref={inputRef} />
+      <button
+        onClick={() => setYagnaOptions({ apiKey: inputRef.current.value })}
+      >
+        Set app key
       </button>
-      {error && <div>Error: {error.toString()}</div>}
     </div>
   )
 }
 ```
 
-Add this component to your application and refresh the page. If you have set up everything correctly you should see "Yagna is connected"
+Add this component to your application and refresh the page. Enter your app-key and if you have set up everything correctly you should see "Connected to Yagna!".
 
 {% docnavigation title="Next steps" %}
 

src/pages/docs/creators/javascript/react/index.md

@@ -19,7 +19,6 @@ The Golem React SDK provides a set of React hooks and components that make it ea
 - Connecting to Yagna - use the [useYagna](/docs/creators/javascript/react/use-yagna) hook to connect display the connection status and reconnect to Yagna if the connection is lost.
 - Running tasks on the network - use the [useExecutor](/docs/creators/javascript/react/use-executor) hook to initialize and terminate executors and the [useTask](/docs/creators/javascript/react/use-task) hook to run tasks on the network.
 - Listing and handling invoices - use the [useInvoices](/docs/creators/javascript/react/use-invoices) hook to list invoices and the [useHandleInvoice](/docs/creators/javascript/react/use-handle-invoice) hook to handle invoices.
-- Listing and handling debit notes - use the [useDebitNotes](/docs/creators/javascript/react/use-debit-notes) hook to list debit notes and the [useHandleDebitNote](/docs/creators/javascript/react/use-handle-debit-note) hook to handle debit notes.
 
 {% docnavigation title="API reference" %}
 
@@ -31,6 +30,8 @@ If you want to learn more about each of the hooks and components provided by the
 
 To help you get started we have created an example application that uses every hook and component provided by the SDK. You can find the source code for the example app on [GitHub](https://github.com/golemfactory/golem-sdk-react/tree/master/examples/react-with-vite). Feel free to clone the repository and play around with the code. Follow the instructions in the README to run the app locally.
 
+To see the example app in action, you can also visit the [live demo](https://golem-react-showcase.vercel.app/).
+
 ## GitHub repository
 
 The source code for the SDK along with an example app is available on [GitHub](https://github.com/golemfactory/golem-sdk-react) and we welcome contributions.

src/pages/docs/creators/javascript/react/use-debit-notes.md

@@ -1,12 +1,12 @@
 ---
 title: useInvoices
-description: React hook for fetching all invoices
+description: React hook for searching invoices
 type: React Reference
 ---
 
 # useInvoices
 
-`useInvoices` is a hook that fetches all invoices known to the connected yagna instance. It paginates data by default. Under the hood it uses [SWR](https://swr.vercel.app/) so you get all the benefits of caching and revalidation. It's also possible to configure that behavior by passing the `swrConfig` parameter. It returns an object with the following properties:
+`useInvoices` is a hook that allows you to search through all invoices known to the connected yagna instance. Under the hood it uses [SWR](https://swr.vercel.app/) so you get all the benefits of caching and revalidation. It's also possible to configure that behavior by passing the `swrConfig` parameter. It returns an object with the following properties:
 
 | Name         | Description                                                                                    |
 | ------------ | ---------------------------------------------------------------------------------------------- |
@@ -37,46 +37,28 @@ type: React Reference
 
 This hook accepts a single configuration object with the following properties:
 
-| Name                 | Description                                                                                                                                                                                  |
-| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| after (optional)     | A string representing the timestamp to start fetching invoices from. If not provided, the hook will fetch invoices starting from the earliest invoice known to the connected yagna instance. |
-| limit (optional)     | The maximum number of invoices to fetch. Defaults to 10.                                                                                                                                     |
-| swrConfig (optional) | [SWR configuration object](https://swr.vercel.app/docs/api#options)                                                                                                                          |
-
-To achieve pagination, pass the `timestamp` of the last invoice in the `after` parameter of the next call.
+| Name                        | Description                                                                              |
+| --------------------------- | ---------------------------------------------------------------------------------------- |
+| after (optional)            | Only return invoices with a timestamp greater than this value.                           |
+| limit (optional)            | Maximum number of invoices to return. Default is 50.                                     |
+| statuses (optional)         | Array of statuses to filter by.                                                          |
+| providerIds (optional)      | Array of provider IDs to filter by.                                                      |
+| minAmount (optional)        | Only return invoices with an amount greater than or equal to this value.                 |
+| maxAmount (optional)        | Only return invoices with an amount less than or equal to this value.                    |
+| providerWallets (optional)  | Array of provider wallets to filter by.                                                  |
+| invoiceIds (optional)       | Array of invoice IDs to filter by. If provided, all other search parameters are ignored. |
+| paymentPlatforms (optional) | Array of payment platforms to filter by.                                                 |
+| swrConfig (optional)        | [SWR configuration object](https://swr.vercel.app/docs/api#options)                      |
 
 ## Example
 
 ```jsx
 function MyComponent() {
-  const { invoices, isLoading, error, refetch } = useInvoices()
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-  if (error) {
-    return <div>Error: {error.toString()}</div>
-  }
-  return (
-    <div>
-      <ul>
-        {invoices.map((invoice) => (
-          <li key={invoice.invoiceId}>
-            {invoice.invoiceId} - {invoice.status}
-          </li>
-        ))}
-      </ul>
-      <button onClick={refetch}> Refresh </button>
-    </div>
-  )
-}
-```
-
-With pagination:
-
-```jsx
-function MyComponent() {
-  const [after, setAfter] = useState()
-  const { invoices, isLoading, error, refetch } = useInvoices({ after })
+  const { invoices, isLoading, error, refetch } = useInvoices({
+    limit: 10,
+    statuses: ['RECEIVED'],
+    after: new Date('2021-01-01'),
+  })
   if (isLoading) {
     return <div>Loading...</div>
   }
@@ -92,9 +74,6 @@ function MyComponent() {
           </li>
         ))}
       </ul>
-      <button onClick={() => setAfter(invoices[invoices.length - 1].timestamp)}>
-        Next
-      </button>
       <button onClick={refetch}> Refresh </button>
     </div>
   )