DOCS: add data management section

docs/docs/JOTAI-STATE-MANAGEMENT.md

@@ -0,0 +1,124 @@
+---
+id: jotai
+slug: /jotai
+title: State management - jotai
+sidebar_position: 3
+tags:
+  - Jotai
+  - State management
+  - React
+  - React Native
+description: State management - jotai -
+---
+
+# State management - Jotai
+
+## Description
+
+This starter comes with jotai state management tool. Please check documentation on how it work in details:
+
+- https://jotai.org/docs/introduction
+
+## Examples
+
+### Create atom
+
+```tsx
+import { atom } from 'jotai'
+
+export const isSignedInAtom = atom<boolean | null>(null)
+
+export const userAtom = atom<User | null>(null)
+export const userNameAtom = atom<string | null>((get) => {
+  const user = get(userAtom)
+  const userName = user.userName
+
+  return userName
+})
+```
+
+### Get atom value
+
+Get with hook
+
+```tsx
+import { useAtomValue } from 'jotai'
+import { isSignedInAtom, userNameAtom } from '@baca/store/auth'
+
+export const UserName = () => {
+  const isSignedIn = useAtomValue(isSignedInAtom)
+  const userName = useAtomValue(userNameAtom)
+
+  if (isSignedIn) {
+    return <Text>{userName}</Text>
+  }
+
+  return <Text>No user</Text>
+}
+```
+
+Get outside of component
+
+```tsx
+import { store } from '@baca/store'
+import { isSignedInAtom, userNameAtom } from '@baca/store/auth'
+
+const getUserName = () => {
+  const isSignedIn = store.get(isSignedInAtom)
+  const userName = store.get(userNameAtom)
+
+  if (isSignedIn) {
+    return userName
+  }
+
+  return null
+}
+```
+
+### Update atom value
+
+Update with hook
+
+```tsx
+import { isSignedInAtom } from '@baca/store/auth'
+
+const SignInButton = () => {
+  // Optionbally you can use `useSetAtom()`
+  const [isSignedIn, setIsSignedIn] = useAtom(isSignedInAtom)
+
+  const handleSignIn = () => {
+    // Handle logic on backend
+
+    setIsSignedIn(true)
+  }
+
+  if (isSignedIn) {
+    return null
+  }
+
+  return <Button onPress={handleSignIn}>Sign in</Button>
+}
+```
+
+Update outside of component
+
+```tsx
+import { store } from '@baca/store'
+import { isSignedInAtom } from '@baca/store/auth'
+
+const handleSignIn = () => {
+  // Handle logic on backend
+
+  store.set(isSignedInAtom, true)
+}
+
+const SignInButton = () => {
+  const isSignedIn = useAtomValue(isSignedInAtom)
+
+  if (isSignedIn) {
+    return null
+  }
+
+  return <Button onPress={handleSignIn}>Sign in</Button>
+}
+```

docs/docs/tutorials/BACKEND-CONNECTION.md → docs/docs/data-management/API-CONNECTION.md

@@ -1,28 +1,38 @@
 ---
-id: backend-connection
-slug: /backend-connection
-title: Backend connection
-sidebar_position: 4
+id: api-connection
+slug: /api-connection
+title: API connection
+sidebar_position: 1
 tags:
   - Backend
+  - API
   - react-query
   - axios
   - react native
   - orval
-description: Backend connection - check how to fetch data from backend and display it for users
+description: API connection - check how to fetch data from backend and display it for users
 ---
 
-# Backend connection
+# API connection
 
-This template uses this packages to keep connection with backend:
+This template uses this packages to keep connection with API:
 
-- [axios](https://axios-http.com/docs/intro) - direct calls to backend
+- [axios](https://axios-http.com/docs/intro) - direct calls to API
 - [react-query](https://tanstack.com/query/latest/docs/framework/react/overview) - use hooks that helps displaying data on UI
-- [orval](https://orval.dev/overview) - generating query hooks based on swagger (provided by backend)
+- [orval](https://orval.dev/overview) - generating query hooks based on swagger (provided by backend developers)
+
+:::note
+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.
+
+If you will have any issues please contact **[Mateusz Rostkowski](https://www.github.com/MateuszRostkowski)**
+:::
 
 ## Generate new query
 
-1. Get `swagger-spec.json` - example: https://gist.github.com/lenage/08964335de9064540c8c335fb849c5da
+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.
+
+1. Get `swagger-spec.json` from backend - example: https://gist.github.com/lenage/08964335de9064540c8c335fb849c5da
+   - This also could be automaticaly done, probably we will work on it soon :)
 2. Replace it in `./scripts/data` folder
 3. Run script `yarn generate:query`
 4. See the magic happens ✨

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

@@ -0,0 +1,76 @@
+---
+id: api-example
+slug: /api-example
+title: API connection - example
+sidebar_position: 3
+tags:
+  - Backend
+  - MSW
+  - Mocking
+  - react-query
+  - react-query example
+  - axios
+  - react native
+  - orval
+description: Api example - check how to get data from backend and display it for users
+---
+
+# Api example
+
+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)
+
+```tsx
+// This is auto generated by orval scripts
+// success-line
+import { useArticlesControllerFindAll } from '@baca/api/query/articles/articles'
+import { ArticleEntity } from '@baca/api/types'
+import { Loader, Center, Text, Box, Spacer } from '@baca/design-system'
+import { useScreenOptions, useTranslation } from '@baca/hooks'
+import { useCallback } from 'react'
+import { ListRenderItem, FlatList } from 'react-native'
+
+export const DataFromBeScreen_EXAMPLE = () => {
+  const { t } = useTranslation()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.data_from_be_screen_example'),
+  })
+
+  // success-line
+  const { data: articles, isInitialLoading: isInitialLoadingArticles } =
+    // success-line
+    useArticlesControllerFindAll({ page: 1, pageSize: 10 })
+
+  const renderItem: ListRenderItem<ArticleEntity> = useCallback(({ item: { id, title } }) => {
+    return (
+      <Box mb="1" bg="fg.brand.primary" borderRadius={2} m={2}>
+        <Text>{'id: ' + id}</Text>
+        <Text.MdRegular mb={2}>{'title: ' + title}</Text.MdRegular>
+      </Box>
+    )
+  }, [])
+
+  return (
+    <Box flex={1}>
+      <Center flex={1}>
+        <Text.XlRegular>THIS IS EXAMPLE SCREEN</Text.XlRegular>
+        <Text.XlRegular>which contains data from backend</Text.XlRegular>
+        <Spacer y="1" />
+        <FlatList
+          ListEmptyComponent={
+            !isInitialLoadingArticles ? (
+              <Center height={400} flex={1}>
+                <Loader type="circle" />
+              </Center>
+            ) : (
+              <Text>No data found</Text>
+            )
+          }
+          data={articles}
+          renderItem={renderItem}
+        />
+      </Center>
+    </Box>
+  )
+}
+```

docs/docs/data-management/MOCKING.md

@@ -0,0 +1,39 @@
+---
+id: mocking-data
+slug: /mocking-data
+title: Mocking data
+sidebar_position: 5
+tags:
+  - Backend
+  - MSW
+  - Mocking
+  - react-query
+  - axios
+  - react native
+  - orval
+description: Mocking - check how to mock data from backend and display it for users
+---
+
+# Mocking data
+
+This template uses [MSW](https://mswjs.io/docs) to mock data.
+
+Mocks are automatically generated with orval script - you can check [docs here](/api-connection)
+
+## Enabling mocks
+
+Go to `App.tsx` and change `ENABLE_MOCKED_SERVER` variable from false to true
+
+```tsx title="/App.tsx"
+// FIXME: moking not working on mobile app - follow this discussion https://github.com/mswjs/msw/issues/2026
+// error-line
+const ENABLE_MOCKED_SERVER = false
+// success-line
+const ENABLE_MOCKED_SERVER = true
+
+if (ENABLE_MOCKED_SERVER) {
+  startMockedServer()
+}
+```
+
+This will start msw server and api calls will be mocked!

docs/docs/data-management/_category_.json

@@ -0,0 +1,10 @@
+{
+  "label": "Data management",
+  "position": 5,
+  "collapsible": true,
+  "collapsed": false,
+  "link": {
+    "type": "generated-index",
+    "description": "Documentation for data management in BACA projects"
+  }
+}