diff --git a/docs/en/images/create-book.png b/docs/en/images/create-book.png index 52e8ee7fd8..8837236c7c 100644 Binary files a/docs/en/images/create-book.png and b/docs/en/images/create-book.png differ diff --git a/docs/en/images/react-native-store-folder.png b/docs/en/images/react-native-store-folder.png index 2567d41477..b985d3f7d0 100644 Binary files a/docs/en/images/react-native-store-folder.png and b/docs/en/images/react-native-store-folder.png differ diff --git a/docs/en/images/update-book.png b/docs/en/images/update-book.png index 38e831daec..6b0dd851c9 100644 Binary files a/docs/en/images/update-book.png and b/docs/en/images/update-book.png differ diff --git a/docs/en/solution-templates/layered-web-application/mobile-applications.md b/docs/en/solution-templates/layered-web-application/mobile-applications.md index 09da244f27..4a6b6d057a 100644 --- a/docs/en/solution-templates/layered-web-application/mobile-applications.md +++ b/docs/en/solution-templates/layered-web-application/mobile-applications.md @@ -94,22 +94,22 @@ You can follow [Mobile Application Development Tutorial - MAUI](../../tutorials/ This is the mobile application that is built based on Facebook's [React Native framework](https://reactnative.dev/) and [Expo](https://expo.dev/). It will be in the solution only if you've selected React Native as your mobile application option. #### Project Structure -- **Environment.js**: file using for provide application level variables like `apiUrl`, `oAuthConfig` and etc. +- **Environment.ts**: file using for provide application level variables like `apiUrl`, `oAuthConfig` and etc. - **api**: The `api` folder contains HTTP request files that simplify API management in the React Native starter template - - `API.js:` exports **axiosInstance**. It provides axios instance filled api url + - `API.ts:` exports **axiosInstance**. It provides axios instance filled api url - **components**: In the `components` folder you can reach built in react native components that you can use in your app. These components **facilitates** your list, select and etc. operations - **contexts**: `contexts` folder contains [react context](https://react.dev/reference/react/createContext). You can expots your contexts in this folder. `Localization context provided in here` -- **navigators**: folder contains [react-native stacks](https://reactnavigation.org/docs/stack-navigator/). After create new *FeatureName*Navigator we need to provide in `DrawerNavigator.js` file as `Drawer.Screen` +- **navigators**: folder contains [react-native stacks](https://reactnavigation.org/docs/stack-navigator/). After create new *FeatureName*Navigator we need to provide in `DrawerNavigator.tsx` file as `Drawer.Screen` - **screens**: is the content of navigated page. We'll pass as component property to [Stack.Screen](https://reactnavigation.org/docs/native-stack-navigator/) -- **store**: folder manages state-management operations. We will define `actions`, `reducers`, `sagas` and `selectors` here. +- **store**: folder manages state-management operations. We will define `actions`, `listeners`, `reducers`, and `selectors` here. -- **styles**: folder contains app styles. `system-style.js` comes built in template we can also add new styles. +- **styles**: folder contains app styles. `system-style.ts` comes built in template we can also add new styles. - **utils**: folder contains helper functions that we can use in application diff --git a/docs/en/suite/solution-structure.md b/docs/en/suite/solution-structure.md index 5abd50d751..ad6a2d69e6 100644 --- a/docs/en/suite/solution-structure.md +++ b/docs/en/suite/solution-structure.md @@ -318,8 +318,8 @@ React Native application folder structure is like below: ![react-native-folder-structure](../images/react-native-folder-structure.png) -* `App.js` is the bootstrap component of the application. -* `Environment.js` file has the essential configuration of the application. `prod` and `dev` configurations are defined in this file. +* `App.tsx` is the bootstrap component of the application. +* `Environment.ts` file has the essential configuration of the application. `prod` and `dev` configurations are defined in this file. * [Contexts](https://reactjs.org/docs/context.html) are created in the `src/contexts` folder. * [Higher order components](https://reactjs.org/docs/higher-order-components.html) are created in the `src/hocs` folder. * [Custom hooks](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) are created in the `src/hooks`. @@ -353,12 +353,11 @@ Actions, reducers, sagas, selectors are created in the `src/store` folder. Store * [**Store**](https://redux.js.org/basics/store) is defined in the `src/store/index.js` file. * [**Actions**](https://redux.js.org/basics/actions/) are payloads of information that send data from your application to your store. * [**Reducers**](https://redux.js.org/basics/reducers) specify how the application's state changes in response to actions sent to the store. -* [**Redux-Saga**](https://redux-saga.js.org/) is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage. Sagas are created in the `src/store/sagas` folder. * [**Reselect**](https://github.com/reduxjs/reselect) library is used to create memoized selectors. Selectors are created in the `src/store/selectors` folder. ### APIs -[Axios](https://github.com/axios/axios) is used as the HTTP client library. An Axios instance is exported from `src/api/API.js` file to make HTTP calls with the same config. `src/api` folder also has the API files that have been created for API calls. +[Axios](https://github.com/axios/axios) is used as the HTTP client library. An Axios instance is exported from `src/api/API.ts` file to make HTTP calls with the same config. `src/api` folder also has the API files that have been created for API calls. ### Theming @@ -381,7 +380,6 @@ See the [Testing Overview](https://reactjs.org/docs/testing.html) document. * [Axios](https://github.com/axios/axios) is used as HTTP client library. * [Redux](https://redux.js.org/) is used as state management library. * [Redux Toolkit](https://redux-toolkit.js.org/) library is used as a toolset for efficient Redux development. -* [Redux-Saga](https://redux-saga.js.org/) is used to manage asynchronous processes. * [Redux Persist](https://github.com/rt2zz/redux-persist) is used for state persistance. * [Reselect](https://github.com/reduxjs/reselect) is used to create memoized selectors. * [i18n-js](https://github.com/fnando/i18n-js) is used as i18n library. diff --git a/docs/en/tutorials/mobile/react-native/index.md b/docs/en/tutorials/mobile/react-native/index.md index 5b9b539481..76b4e59983 100644 --- a/docs/en/tutorials/mobile/react-native/index.md +++ b/docs/en/tutorials/mobile/react-native/index.md @@ -28,9 +28,6 @@ import api from './API'; export const getList = () => api.get('/api/app/book').then(({ data }) => data); -export const getAuthorLookup = () => - api.get('/api/app/book/author-lookup').then(({ data }) => data); - export const get = id => api.get(`/api/app/book/${id}`).then(({ data }) => data); export const create = input => api.post('/api/app/book', input).then(({ data }) => data); @@ -867,7 +864,6 @@ import CreateUpdateBookForm from './CreateUpdateBookForm'; function CreateUpdateBookScreen({ navigation, route, startLoading, clearLoading }) { const { bookId } = route.params || {}; const [book, setBook] = useState(null); - const [authors, setAuthors] = useState([]); const submit = (data: any) => { startLoading({ key: 'save' }); @@ -887,11 +883,7 @@ function CreateUpdateBookScreen({ navigation, route, startLoading, clearLoading } }, [bookId]); - useEffect(() => { - getAuthorLookup().then(({ items } = {}) => setAuthors(items)); - }, []); - - return ; + return ; } CreateUpdateBookScreen.propTypes = {