Statusphere example with ESAV Live
readme
+6
-289
+6
-289
README.md
+6
-289
README.md
···
1
-
Welcome to your new TanStack app!
2
-
3
-
# Getting Started
4
-
5
-
To run this application:
6
-
7
-
```bash
8
-
npm install
9
-
npm run start
10
-
```
11
-
12
-
# Building For Production
13
-
14
-
To build this application for production:
15
-
16
-
```bash
17
-
npm run build
18
-
```
19
-
20
-
## Testing
21
-
22
-
This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
23
-
24
-
```bash
25
-
npm run test
26
-
```
27
-
28
-
## Styling
29
-
30
-
This project uses CSS for styling.
31
-
32
-
33
-
34
-
35
-
## Routing
36
-
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
37
-
38
-
### Adding A Route
39
-
40
-
To add a new route to your application just add another a new file in the `./src/routes` directory.
41
-
42
-
TanStack will automatically generate the content of the route file for you.
43
-
44
-
Now that you have two routes you can use a `Link` component to navigate between them.
45
-
46
-
### Adding Links
47
-
48
-
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
49
-
50
-
```tsx
51
-
import { Link } from "@tanstack/react-router";
52
-
```
53
-
54
-
Then anywhere in your JSX you can use it like so:
55
-
56
-
```tsx
57
-
<Link to="/about">About</Link>
58
-
```
59
-
60
-
This will create a link that will navigate to the `/about` route.
61
-
62
-
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
63
-
64
-
### Using A Layout
65
-
66
-
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
67
-
68
-
Here is an example layout that includes a header:
69
-
70
-
```tsx
71
-
import { Outlet, createRootRoute } from '@tanstack/react-router'
72
-
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
73
-
74
-
import { Link } from "@tanstack/react-router";
75
-
76
-
export const Route = createRootRoute({
77
-
component: () => (
78
-
<>
79
-
<header>
80
-
<nav>
81
-
<Link to="/">Home</Link>
82
-
<Link to="/about">About</Link>
83
-
</nav>
84
-
</header>
85
-
<Outlet />
86
-
<TanStackRouterDevtools />
87
-
</>
88
-
),
89
-
})
90
-
```
91
-
92
-
The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
93
-
94
-
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
95
-
96
-
97
-
## Data Fetching
98
-
99
-
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
100
-
101
-
For example:
102
-
103
-
```tsx
104
-
const peopleRoute = createRoute({
105
-
getParentRoute: () => rootRoute,
106
-
path: "/people",
107
-
loader: async () => {
108
-
const response = await fetch("https://swapi.dev/api/people");
109
-
return response.json() as Promise<{
110
-
results: {
111
-
name: string;
112
-
}[];
113
-
}>;
114
-
},
115
-
component: () => {
116
-
const data = peopleRoute.useLoaderData();
117
-
return (
118
-
<ul>
119
-
{data.results.map((person) => (
120
-
<li key={person.name}>{person.name}</li>
121
-
))}
122
-
</ul>
123
-
);
124
-
},
125
-
});
126
-
```
1
+
# Statusphere ESAV Live
2
+
its statussphere
3
+
using ESAV Live
4
+
its a websocket connection to get a live query running with ESAV
127
5
128
-
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
129
-
130
-
### React-Query
131
-
132
-
React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
133
-
134
-
First add your dependencies:
135
-
136
-
```bash
137
-
npm install @tanstack/react-query @tanstack/react-query-devtools
138
-
```
139
-
140
-
Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
141
-
142
-
```tsx
143
-
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
144
-
145
-
// ...
146
-
147
-
const queryClient = new QueryClient();
148
-
149
-
// ...
150
-
151
-
if (!rootElement.innerHTML) {
152
-
const root = ReactDOM.createRoot(rootElement);
153
-
154
-
root.render(
155
-
<QueryClientProvider client={queryClient}>
156
-
<RouterProvider router={router} />
157
-
</QueryClientProvider>
158
-
);
159
-
}
160
-
```
161
-
162
-
You can also add TanStack Query Devtools to the root route (optional).
163
-
164
-
```tsx
165
-
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
166
-
167
-
const rootRoute = createRootRoute({
168
-
component: () => (
169
-
<>
170
-
<Outlet />
171
-
<ReactQueryDevtools buttonPosition="top-right" />
172
-
<TanStackRouterDevtools />
173
-
</>
174
-
),
175
-
});
176
-
```
177
-
178
-
Now you can use `useQuery` to fetch your data.
179
-
180
-
```tsx
181
-
import { useQuery } from "@tanstack/react-query";
182
-
183
-
import "./App.css";
184
-
185
-
function App() {
186
-
const { data } = useQuery({
187
-
queryKey: ["people"],
188
-
queryFn: () =>
189
-
fetch("https://swapi.dev/api/people")
190
-
.then((res) => res.json())
191
-
.then((data) => data.results as { name: string }[]),
192
-
initialData: [],
193
-
});
194
-
195
-
return (
196
-
<div>
197
-
<ul>
198
-
{data.map((person) => (
199
-
<li key={person.name}>{person.name}</li>
200
-
))}
201
-
</ul>
202
-
</div>
203
-
);
204
-
}
205
-
206
-
export default App;
207
-
```
208
-
209
-
You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
210
-
211
-
## State Management
212
-
213
-
Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
214
-
215
-
First you need to add TanStack Store as a dependency:
216
-
217
-
```bash
218
-
npm install @tanstack/store
219
-
```
220
-
221
-
Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
222
-
223
-
```tsx
224
-
import { useStore } from "@tanstack/react-store";
225
-
import { Store } from "@tanstack/store";
226
-
import "./App.css";
227
-
228
-
const countStore = new Store(0);
229
-
230
-
function App() {
231
-
const count = useStore(countStore);
232
-
return (
233
-
<div>
234
-
<button onClick={() => countStore.setState((n) => n + 1)}>
235
-
Increment - {count}
236
-
</button>
237
-
</div>
238
-
);
239
-
}
240
-
241
-
export default App;
242
-
```
243
-
244
-
One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
245
-
246
-
Let's check this out by doubling the count using derived state.
247
-
248
-
```tsx
249
-
import { useStore } from "@tanstack/react-store";
250
-
import { Store, Derived } from "@tanstack/store";
251
-
import "./App.css";
252
-
253
-
const countStore = new Store(0);
254
-
255
-
const doubledStore = new Derived({
256
-
fn: () => countStore.state * 2,
257
-
deps: [countStore],
258
-
});
259
-
doubledStore.mount();
260
-
261
-
function App() {
262
-
const count = useStore(countStore);
263
-
const doubledCount = useStore(doubledStore);
264
-
265
-
return (
266
-
<div>
267
-
<button onClick={() => countStore.setState((n) => n + 1)}>
268
-
Increment - {count}
269
-
</button>
270
-
<div>Doubled - {doubledCount}</div>
271
-
</div>
272
-
);
273
-
}
274
-
275
-
export default App;
276
-
```
277
-
278
-
We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
279
-
280
-
Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
281
-
282
-
You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
283
-
284
-
# Demo files
285
-
286
-
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
287
-
288
-
# Learn More
289
-
290
-
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
6
+
- [ESAV on Tangled](https://tangled.sh/@whey.party/esav)
7
+
- [Test instance](https://statusphere.whey.party) (uses [esav.whey.party](https://esav.whey.party))