From 6d0741bd847145afee1940aeb0fc61a856f0ee0f Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Thu, 9 May 2024 18:47:11 +0200 Subject: [PATCH 1/7] docs: add data management folder --- docs/docs/data-management/_category_.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 docs/docs/data-management/_category_.json diff --git a/docs/docs/data-management/_category_.json b/docs/docs/data-management/_category_.json new file mode 100644 index 00000000..2a6f94af --- /dev/null +++ b/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" + } +} From dd16ec4ae2bb28f9a857066eda83480ec8e5209b Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 10 May 2024 22:42:21 +0200 Subject: [PATCH 2/7] docs: move jotai docs to data-management folder --- docs/docs/{tutorials/JOTAI.md => JOTAI-STATE-MANAGEMENT.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/docs/{tutorials/JOTAI.md => JOTAI-STATE-MANAGEMENT.md} (100%) diff --git a/docs/docs/tutorials/JOTAI.md b/docs/docs/JOTAI-STATE-MANAGEMENT.md similarity index 100% rename from docs/docs/tutorials/JOTAI.md rename to docs/docs/JOTAI-STATE-MANAGEMENT.md From ba914f8d0dca3a06a7c78cc2771f2a6a5ab0b046 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Fri, 10 May 2024 22:42:55 +0200 Subject: [PATCH 3/7] docs: update state management docs --- docs/docs/JOTAI-STATE-MANAGEMENT.md | 114 +++++++++++++++++++++++++++- 1 file changed, 110 insertions(+), 4 deletions(-) diff --git a/docs/docs/JOTAI-STATE-MANAGEMENT.md b/docs/docs/JOTAI-STATE-MANAGEMENT.md index 8b78078c..489e683f 100644 --- a/docs/docs/JOTAI-STATE-MANAGEMENT.md +++ b/docs/docs/JOTAI-STATE-MANAGEMENT.md @@ -1,18 +1,124 @@ --- id: jotai slug: /jotai -title: Jotai - state management -sidebar_position: 2 +title: State management - jotai +sidebar_position: 3 tags: - Jotai - State management - React - React Native -description: Doppler - automatically manage environment variables +description: State management - jotai - --- -## 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(null) + +export const userAtom = atom(null) +export const userNameAtom = atom((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 {userName} + } + + return No user +} +``` + +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 +} +``` + +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 +} +``` From fc1e32b5b364dd1debf55745d7089e6f97ed33f2 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Sat, 11 May 2024 12:27:55 +0200 Subject: [PATCH 4/7] docs: move api-connection docs to data-management folder --- .../BACKEND-CONNECTION.md => data-management/API-CONNECTION.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/docs/{tutorials/BACKEND-CONNECTION.md => data-management/API-CONNECTION.md} (100%) diff --git a/docs/docs/tutorials/BACKEND-CONNECTION.md b/docs/docs/data-management/API-CONNECTION.md similarity index 100% rename from docs/docs/tutorials/BACKEND-CONNECTION.md rename to docs/docs/data-management/API-CONNECTION.md From 13ed51c6dc22aede83c194b8f2e269c458b3aeb5 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Sun, 12 May 2024 09:38:55 +0200 Subject: [PATCH 5/7] docs: improve api connection docs --- docs/docs/data-management/API-CONNECTION.md | 30 ++++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/docs/docs/data-management/API-CONNECTION.md b/docs/docs/data-management/API-CONNECTION.md index 229bf532..f5fae689 100644 --- a/docs/docs/data-management/API-CONNECTION.md +++ b/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 ✨ From 1d9d89ba4e81f512901991a37a3a06674601036d Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Sun, 12 May 2024 09:39:16 +0200 Subject: [PATCH 6/7] docs: add api example --- docs/docs/data-management/API-EXAMPLE.md | 76 ++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 docs/docs/data-management/API-EXAMPLE.md diff --git a/docs/docs/data-management/API-EXAMPLE.md b/docs/docs/data-management/API-EXAMPLE.md new file mode 100644 index 00000000..b267f326 --- /dev/null +++ b/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 = useCallback(({ item: { id, title } }) => { + return ( + + {'id: ' + id} + {'title: ' + title} + + ) + }, []) + + return ( + +
+ THIS IS EXAMPLE SCREEN + which contains data from backend + + + +
+ ) : ( + No data found + ) + } + data={articles} + renderItem={renderItem} + /> + + + ) +} +``` From cf66db8b078ddd3705e3613a90242443de6cefa3 Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Sun, 12 May 2024 09:39:37 +0200 Subject: [PATCH 7/7] docs: add mocking tutorial --- docs/docs/data-management/MOCKING.md | 39 ++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 docs/docs/data-management/MOCKING.md diff --git a/docs/docs/data-management/MOCKING.md b/docs/docs/data-management/MOCKING.md new file mode 100644 index 00000000..9a4e775c --- /dev/null +++ b/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!