feedback incorporated

src/routes/state-management/_components/SearchFilterComponent.tsx

@@ -47,7 +47,7 @@ const SearchFilterComponent = () => {
  <SearchField
  value={searchQuery}
  onChange={value => handleSearchChange(value)}
- label="search"
+ label="Search"
  />
  {filteredList.length > 0 ? (
  <ul>

src/routes/state-management/_components/ServerStateExample.tsx

@@ -50,7 +50,7 @@ function ServerStateExample() {
  search: prev => ({ ...prev, title: value }),
  })
  }
- label="search"
+ label="Search"
  width={'1/2'}
  />
  <Select

src/routes/state-management/_components/UrlSearchFilterComponent.tsx

@@ -59,7 +59,7 @@ const UrlSearchFilterComponent = () => {
  <SearchField
  value={searchQuery}
  onChange={handleSearchChange}
- label="search"
+ label="Search"
  />
  {filteredList.length > 0 ? (
  <ul>

src/routes/state-management/_components/context-api-example.mdx

@@ -7,19 +7,19 @@ import { SectionMessage, Text } from '@marigold/components';
  // from ./ContextApiExample.tsx
  ````
 
- ### Create the context
+ ### Create the Context
 
  Creating a context object, which stores the global data, is straightforward. We just need to use the `createContext` function which lets us create a context object that components can provide or read.
 
  The only param that is required ist the default value - in our case **'all'**.
 
  ---
 
- ```tsx ContextApiExample.tsx focus=36:38
+ ```tsx ContextApiExample.tsx focus=46:50
  // from ./ContextApiExample.tsx
  ````
 
- ### Use the context
+ ### Use the Context
  To read the value from the context `CategoryContext` we can use the hook `useContext`.
  This tells React that the ProductList component wants to read the CategoryContext.
 
@@ -31,13 +31,19 @@ import { SectionMessage, Text } from '@marigold/components';
  // from ./ContextApiExample.tsx
  ````
 
- ### Provide the context
+ ### Provide the Context
  As a final step we need to provide it because until now React doesn't know where to get it.
 
  We need to find the highest component in our tree which uses category and than we just need to wrap this component with a context provider so all children will have access to this Context.
 
  This tells React: "If any component inside this ProductPage asks for CategoryContext, give them this category."
 
+ ---
+
+ ```tsx ContextApiExample.tsx
+ // from ./ContextApiExample.tsx
+ ````
+
  <SectionMessage variant="info">
  <SectionMessage.Title>Note</SectionMessage.Title>
  <SectionMessage.Content>

src/routes/state-management/_components/counter-example.mdx

@@ -6,7 +6,7 @@ import { Block } from '@/components/Container';
  // from ./CounterExample.tsx
  ````
 
- ### Storing an initial value
+ ### Storing an Initial Value
 
  Local state is typically initialized using the `useState` hook. This hook takes an initial state value as an argument and returns an array containing the current state and a function to update it.
 
@@ -18,7 +18,7 @@ import { Block } from '@/components/Container';
  // from ./CounterExample.tsx
  ````
 
- ### Reading the current state value
+ ### Reading the Current State Value
 
  The current state value can be read directly from the state variable returned by useState. This state value can then be used in the component's JSX to dynamically render content.
  This will display the current value of `count` in the UI.
@@ -29,7 +29,7 @@ import { Block } from '@/components/Container';
  // from ./CounterExample.tsx
  ````
 
- ### Updating a state value
+ ### Updating a State Value
  To update the state, we use the state update function (in this case, `setCount`). This function takes the new state value as an argument and triggers a re-render of the component with the new state.
 
  When clicking the button `onPress` it will call the `setCount` function which updates the `count` state by adding 1 to its current value.

src/routes/state-management/_components/search-filter-example.mdx

@@ -1,22 +1,29 @@
 import { Block } from '@/components/Container';
+import {SectionMessage} from '@marigold/components';
 
 <Block>
  <CH.Scrollycoding>
  ```tsx SearchFilterComponent.tsx focus=11:12,23
  // from ./SearchFilterComponent.tsx
  ````
 
- ### Storing an initial value
+ ### Storing an Initial Value
 
- Here we hold two local states. `searchQuery` is for saving the current input value. `filteredList` holds all filtered movies based on the `searchQuery`.
+ In React, we can use the `useState` hook is used to store the initial value of a state variable. When defining state variables, we provide an initial value as an argument to `useState`.
+
+ In our example we hold two local states. `searchQuery` is for saving the current input value. `filteredList` holds all filtered movies based on the `searchQuery`.
 
  ---
 
- ```tsx SearchFilterComponent.tsx focus=52:57
+ ```tsx SearchFilterComponent.tsx focus=47:48,52:57
  // from ./SearchFilterComponent.tsx
  ````
 
- ### Reading the current state value
+ ### Reading the Current State Value
+
+ State variables in React can be accessed directly to read their current values.
+
+ The value of `searchQuery`is shown in the search field.
 
  `filteredList` has the current data based on the `searchQuery`. Initially it shows all available movies loaded from the API.
 
@@ -26,11 +33,24 @@ import { Block } from '@/components/Container';
  // from ./SearchFilterComponent.tsx
  ````
 
- ### Updating a state value
+ ### Updating a State Value
  From our `SearchField` we trigger an onChange event which updates the state variable which is hold by `searchQuery` (also known as [`controlled input`](https://www.marigold-ui.io/patterns/building-forms?theme=core#controlled-or-uncontrolled-components)).
 
  Also `filteredList` will be updated via the state update function `setFilteredList` which only holds the filtered values. Both triggers a re-render of the component which updates the UI based on these updated values.
 
+ ---
+
+ ```tsx SearchFilterComponent.tsx
+ // from ./SearchFilterComponent.tsx
+ ````
+
+ <SectionMessage variant="info">
+ <SectionMessage.Title>Note</SectionMessage.Title>
+ <SectionMessage.Content>
+ In this example we using [`tanstack-query`](https://tanstack.com/query/latest). We will discuss this in more detail in a later chapter.
+ </SectionMessage.Content>
+ </SectionMessage>
+
  </CH.Scrollycoding>
 
 </Block>

src/routes/state-management/_components/server-state.mdx

@@ -8,7 +8,7 @@ import { SectionMessage, Text } from '@marigold/components';
  ```tsx ServerStateExample.tsx focus=21:23
  // from ./ServerStateExample.tsx
  ````
- #### Initializing URL state for filters
+ #### Initializing URL State for Filters
 
  We use the `useSearch` hook to get the url state for our filters. This state will store the user's input for the movie title and category.
 
@@ -21,7 +21,7 @@ import { SectionMessage, Text } from '@marigold/components';
  ```tsx ServerStateExample.tsx focus=30:36
  // from ./ServerStateExample.tsx
  ```
- #### Loading initial data
+ #### Loading Initial Data
 
  For loading the initial data from the server we using the hook `useQuery`. It needs a queryKey for checking if the query is already cached.
  The second param takes a function which is the requested endpoint and returns the requested data.
@@ -31,7 +31,7 @@ import { SectionMessage, Text } from '@marigold/components';
  ```tsx ServerStateExample.tsx focus=26:29
  // from ./ServerStateExample.tsx
  ````
- #### Result object
+ #### Result Object
 
  The result object from `useQuery` has - besides the data - some useful states.
 
@@ -51,16 +51,16 @@ import { SectionMessage, Text } from '@marigold/components';
  ```tsx ServerStateExample.tsx focus=38:40
  // from ./ServerStateExample.tsx
  ````
- #### Error handling
+ #### Error Handling
 
- If an error occurs from the API we just return the error message.
+ If an error occurs from the API we just return the error message. We get the error message from the error object we retrieve from `useQuery`.
 
  ---
 
  ```tsx ServerStateExample.tsx focus=48:52,60:64
  // from ./ServerStateExample.tsx
  ```
- #### Updating search params
+ #### Updating Search Params
 
  Like in the other example we use the navigate function to update our search params. Because we have multiple params we are using the spread operator to copy the whole object and just update the specific value.
 

src/routes/state-management/_components/url-search-filter-example.mdx

@@ -6,7 +6,7 @@ import { Block } from '@/components/Container';
  // from ./UrlSearchFilterComponent.tsx
  ````
 
- ### Reading search params
+ ### Reading Search Params
 
  To read search params you have to import the current route config. With that access to different hooks.
  The `useSearch` hook allows to get access to the search params. In our case we can read the value from `name`.
@@ -18,10 +18,26 @@ import { Block } from '@/components/Container';
  // from ./UrlSearchFilterComponent.tsx
  ````
 
- ### Update the URL state
+ ### Update the URL State
  To update our search params to the actual value from the search bar we can use the `useNavigate` hook.
  This allows to put the current value back in to the search param.
 
+ ---
+
+ <CH.Code>
+ ```tsx UrlSearchFilterComponent.tsx
+ // from ./UrlSearchFilterComponent.tsx
+ ````
+
+ ---
+
+ ```tsx SearchFilterComponent.tsx
+ // from ./SearchFilterComponent.tsx
+ ````
+ </CH.Code>
+
+ Compared to the `SearchFilterComponent` the rest stays as it is.
+
  </CH.Scrollycoding>
 
 </Block>