Skip to content

Commit 2769530

Browse files
MateuszRostkowskiMateuszRostkowski
authored
Merge pull request #56 from binarapps/docs/data-management
DOCS: add data management section
2 parents 0d8fdc4 + cf66db8 commit 2769530

6 files changed

Lines changed: 269 additions & 28 deletions

File tree

‎docs/docs/JOTAI-STATE-MANAGEMENT.md‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
id: jotai
3+
slug: /jotai
4+
title: State management - jotai
5+
sidebar_position: 3
6+
tags:
7+
- Jotai
8+
- State management
9+
- React
10+
- React Native
11+
description: State management - jotai -
12+
---
13+
14+
# State management - Jotai
15+
16+
## Description
17+
18+
This starter comes with jotai state management tool. Please check documentation on how it work in details:
19+
20+
- https://jotai.org/docs/introduction
21+
22+
## Examples
23+
24+
### Create atom
25+
26+
```tsx
27+
import { atom } from 'jotai'
28+
29+
export const isSignedInAtom = atom<boolean | null>(null)
30+
31+
export const userAtom = atom<User | null>(null)
32+
export const userNameAtom = atom<string | null>((get) => {
33+
const user = get(userAtom)
34+
const userName = user.userName
35+
36+
return userName
37+
})
38+
```
39+
40+
### Get atom value
41+
42+
Get with hook
43+
44+
```tsx
45+
import { useAtomValue } from 'jotai'
46+
import { isSignedInAtom, userNameAtom } from '@baca/store/auth'
47+
48+
export const UserName = () => {
49+
const isSignedIn = useAtomValue(isSignedInAtom)
50+
const userName = useAtomValue(userNameAtom)
51+
52+
if (isSignedIn) {
53+
return <Text>{userName}</Text>
54+
}
55+
56+
return <Text>No user</Text>
57+
}
58+
```
59+
60+
Get outside of component
61+
62+
```tsx
63+
import { store } from '@baca/store'
64+
import { isSignedInAtom, userNameAtom } from '@baca/store/auth'
65+
66+
const getUserName = () => {
67+
const isSignedIn = store.get(isSignedInAtom)
68+
const userName = store.get(userNameAtom)
69+
70+
if (isSignedIn) {
71+
return userName
72+
}
73+
74+
return null
75+
}
76+
```
77+
78+
### Update atom value
79+
80+
Update with hook
81+
82+
```tsx
83+
import { isSignedInAtom } from '@baca/store/auth'
84+
85+
const SignInButton = () => {
86+
// Optionbally you can use `useSetAtom()`
87+
const [isSignedIn, setIsSignedIn] = useAtom(isSignedInAtom)
88+
89+
const handleSignIn = () => {
90+
// Handle logic on backend
91+
92+
setIsSignedIn(true)
93+
}
94+
95+
if (isSignedIn) {
96+
return null
97+
}
98+
99+
return <Button onPress={handleSignIn}>Sign in</Button>
100+
}
101+
```
102+
103+
Update outside of component
104+
105+
```tsx
106+
import { store } from '@baca/store'
107+
import { isSignedInAtom } from '@baca/store/auth'
108+
109+
const handleSignIn = () => {
110+
// Handle logic on backend
111+
112+
store.set(isSignedInAtom, true)
113+
}
114+
115+
const SignInButton = () => {
116+
const isSignedIn = useAtomValue(isSignedInAtom)
117+
118+
if (isSignedIn) {
119+
return null
120+
}
121+
122+
return <Button onPress={handleSignIn}>Sign in</Button>
123+
}
124+
```

docs/docs/tutorials/BACKEND-CONNECTION.md renamed to docs/docs/data-management/API-CONNECTION.md

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,38 @@
11
---
2-
id: backend-connection
3-
slug: /backend-connection
4-
title: Backend connection
5-
sidebar_position: 4
2+
id: api-connection
3+
slug: /api-connection
4+
title: API connection
5+
sidebar_position: 1
66
tags:
77
- Backend
8+
- API
89
- react-query
910
- axios
1011
- react native
1112
- orval
12-
description: Backend connection - check how to fetch data from backend and display it for users
13+
description: API connection - check how to fetch data from backend and display it for users
1314
---
1415

15-
# Backend connection
16+
# API connection
1617

17-
This template uses this packages to keep connection with backend:
18+
This template uses this packages to keep connection with API:
1819

19-
- [axios](https://axios-http.com/docs/intro) - direct calls to backend
20+
- [axios](https://axios-http.com/docs/intro) - direct calls to API
2021
- [react-query](https://tanstack.com/query/latest/docs/framework/react/overview) - use hooks that helps displaying data on UI
21-
- [orval](https://orval.dev/overview) - generating query hooks based on swagger (provided by backend)
22+
- [orval](https://orval.dev/overview) - generating query hooks based on swagger (provided by backend developers)
23+
24+
:::note
25+
If you are not using swagger (or open API v3) on your backend side it could be hard for you to make this working, because we are using [orval](https://orval.dev/overview) to auto generate everything.
26+
27+
If you will have any issues please contact **[Mateusz Rostkowski](https://www.github.com/MateuszRostkowski)**
28+
:::
2229

2330
## Generate new query
2431

25-
1. Get `swagger-spec.json` - example: https://gist.github.com/lenage/08964335de9064540c8c335fb849c5da
32+
All api connection code is automatically generated based on swagger schema, you will just need to do this few steps to update your code base.
33+
34+
1. Get `swagger-spec.json` from backend - example: https://gist.github.com/lenage/08964335de9064540c8c335fb849c5da
35+
- This also could be automaticaly done, probably we will work on it soon :)
2636
2. Replace it in `./scripts/data` folder
2737
3. Run script `yarn generate:query`
2838
4. See the magic happens ✨

‎docs/docs/data-management/API-EXAMPLE.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
id: api-example
3+
slug: /api-example
4+
title: API connection - example
5+
sidebar_position: 3
6+
tags:
7+
- Backend
8+
- MSW
9+
- Mocking
10+
- react-query
11+
- react-query example
12+
- axios
13+
- react native
14+
- orval
15+
description: Api example - check how to get data from backend and display it for users
16+
---
17+
18+
# Api example
19+
20+
We have prepared example with react query in this file: [src/screens/DataFromBeScreen_EXAMPLE.tsx](https://github.com/binarapps/baca-react-native-template/blob/main/src/screens/DataFromBeScreen_EXAMPLE.tsx)
21+
22+
```tsx
23+
// This is auto generated by orval scripts
24+
// success-line
25+
import { useArticlesControllerFindAll } from '@baca/api/query/articles/articles'
26+
import { ArticleEntity } from '@baca/api/types'
27+
import { Loader, Center, Text, Box, Spacer } from '@baca/design-system'
28+
import { useScreenOptions, useTranslation } from '@baca/hooks'
29+
import { useCallback } from 'react'
30+
import { ListRenderItem, FlatList } from 'react-native'
31+
32+
export const DataFromBeScreen_EXAMPLE = () => {
33+
const { t } = useTranslation()
34+
35+
useScreenOptions({
36+
title: t('navigation.screen_titles.data_from_be_screen_example'),
37+
})
38+
39+
// success-line
40+
const { data: articles, isInitialLoading: isInitialLoadingArticles } =
41+
// success-line
42+
useArticlesControllerFindAll({ page: 1, pageSize: 10 })
43+
44+
const renderItem: ListRenderItem<ArticleEntity> = useCallback(({ item: { id, title } }) => {
45+
return (
46+
<Box mb="1" bg="fg.brand.primary" borderRadius={2} m={2}>
47+
<Text>{'id: ' + id}</Text>
48+
<Text.MdRegular mb={2}>{'title: ' + title}</Text.MdRegular>
49+
</Box>
50+
)
51+
}, [])
52+
53+
return (
54+
<Box flex={1}>
55+
<Center flex={1}>
56+
<Text.XlRegular>THIS IS EXAMPLE SCREEN</Text.XlRegular>
57+
<Text.XlRegular>which contains data from backend</Text.XlRegular>
58+
<Spacer y="1" />
59+
<FlatList
60+
ListEmptyComponent={
61+
!isInitialLoadingArticles ? (
62+
<Center height={400} flex={1}>
63+
<Loader type="circle" />
64+
</Center>
65+
) : (
66+
<Text>No data found</Text>
67+
)
68+
}
69+
data={articles}
70+
renderItem={renderItem}
71+
/>
72+
</Center>
73+
</Box>
74+
)
75+
}
76+
```

‎docs/docs/data-management/MOCKING.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
id: mocking-data
3+
slug: /mocking-data
4+
title: Mocking data
5+
sidebar_position: 5
6+
tags:
7+
- Backend
8+
- MSW
9+
- Mocking
10+
- react-query
11+
- axios
12+
- react native
13+
- orval
14+
description: Mocking - check how to mock data from backend and display it for users
15+
---
16+
17+
# Mocking data
18+
19+
This template uses [MSW](https://mswjs.io/docs) to mock data.
20+
21+
Mocks are automatically generated with orval script - you can check [docs here](/api-connection)
22+
23+
## Enabling mocks
24+
25+
Go to `App.tsx` and change `ENABLE_MOCKED_SERVER` variable from false to true
26+
27+
```tsx title="/App.tsx"
28+
// FIXME: moking not working on mobile app - follow this discussion https://github.com/mswjs/msw/issues/2026
29+
// error-line
30+
const ENABLE_MOCKED_SERVER = false
31+
// success-line
32+
const ENABLE_MOCKED_SERVER = true
33+
34+
if (ENABLE_MOCKED_SERVER) {
35+
startMockedServer()
36+
}
37+
```
38+
39+
This will start msw server and api calls will be mocked!

‎docs/docs/data-management/_category_.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"label": "Data management",
3+
"position": 5,
4+
"collapsible": true,
5+
"collapsed": false,
6+
"link": {
7+
"type": "generated-index",
8+
"description": "Documentation for data management in BACA projects"
9+
}
10+
}

‎docs/docs/tutorials/JOTAI.md‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)