The app folder is where most of the UI logic resides.
The app folder contains the following subfolders:
- Api – interaction with server, Axios
- Models – data definitions
- Stores – MobX stores, centralized state and logic
- Hooks – transient state data and functions
- Utils – helper functions
The api folder contains one typescript file, agent.ts, which is the main touchpoint with the server. At the base level, all requests are handled within this ts file.
Axios is a library for interacting with http requests. One of the benefits of using Axios is being able to intercept requests and responses to preform logic. In this case, the base URL for api requests is retrieved from values set in the top-level environment files, .env.development and .env.production, and will be different depending on the app environment.
The react app will run in development mode by default. Creating static files with the npm run build command will run the application in production mode. These static files should be placed in the wwwroot folder of the .Net Web Api project.
Axios response interceptors are used to run a sleep command per each response when in development mode to produce an artificial server response delay. Interceptors are also used to emit toast notification if the server returns an error code.
Each api controller on the server will have a corresponding group of methods defined on the client in agent.ts. While the methods per each model may be specific, all methods derive from the Axios base requests type, with the following 4 methods: get, post, put, del.
The app has method groups for Tenents, Users, Venues, and Account.
The models folder contains models for the data used in the application:
- auth – login, token requests, forgot and reset password
- currentUser – the logged in user
- user – an app user, user management
- tenant – a tenant user, tenant management
- venue – sample business entity
- roles – enumerated list of roles
- responseWrappers – single and paginated results
- searchParams – used by server-paginated table requests
The data stores contain the stateful app data, and methods per each model type. The base MobX store in the client app is store.ts. The following stores are also found in the app:
- commonStore – general utility store with token, app settings, etc.
- appUserStore – list of app users, user management
- currentUserStore– the logged in user, edit profile, preferences
- tenentStore – list of tenant users, tenant management
- venueStore – list of venues, pagination meta, venue management,
There is one hook in the application, usePaginationMetaData which is used by the tables to handle state and pagination. Since MobX stores are like singleton objects, sometimes it can be necessary to use hooks for cases where transient style objects are needed.
The utilities folder contains generic helper functions.