You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* control this inside `src/store/slices/layoutSlice` with more section
114
-
*/
115
-
layout: {
116
-
header:false,
117
-
footer:false,
118
-
},
119
-
/*
120
-
* component rendered inside route
121
-
*/
122
-
component: Component,
123
-
},
124
-
];
125
-
```
126
-
127
-
_- You don't need do anything else after create and modify `route.ts` because i'm using [import-glob](https://www.npmjs.com/package/import-glob) to auto import (check at `webpack/webpack.common.js` for plugin, `src/router/index.ts` and `src/layouts/main/index.tsx` for using)._
128
-
129
-
_- If you don't want to use auto import or <b>using project with jest</b>, just using the code that i'm commented. Because i'm not yet support auto import for jest._
130
-
131
-
- Write new component
132
-
133
-
- Create new folder at `src/components/<component-name/>`
134
-
- Create an `index.tsx` and `<any-name>.scss`
135
-
136
-
_- <b>Don't need</b>import`scss` into component, It will already merged into App.scss after you restart server._
137
-
138
-
_- This is a feature by using [import-glob](https://www.npmjs.com/package/import-glob) (check at `webpack/webpack.common.js` for plugin and `src/styles/App.scss` for using)_
139
-
140
-
_- You should use [BEM](http://getbem.com/) to write css without conflict_
141
-
142
-
- Using i18n
143
-
144
-
- Create newjson file at `src/locales/resources/<file-name/>.json`
145
-
- Add content follow this format into json file
146
-
```javascript
147
-
{
148
-
"en": {
149
-
"name": "Name"
150
-
},
151
-
"vi": {
152
-
"name": "Tên"
153
-
}
154
-
}
155
-
```
156
-
- update `src/locales/resources/index.ts` like this:
157
-
158
-
```javascript
159
-
/*
160
-
* you can use other name instead `user`
161
-
* this name will be used as path to key
162
-
*/
163
-
import user from './<file-name/>.json
164
-
165
-
const mergeResource: IResource = {
166
-
..., // others json
167
-
user
168
-
};
169
-
```
170
-
171
-
- Now inside any where, you can access to key like this:
172
-
173
-
```javascript
174
-
const { t } = useTranslation()
175
-
176
-
t('user.name') will be render "Name" for `en` and "Tên" for `vi`
177
-
```
178
-
179
-
- Call APIwith axios
180
-
181
-
```javascript
182
-
import { getUser } from '@/apis/user.ts';
183
-
import { setLoading } from '@/store/slices/appSlice';
184
-
import { errorHandler } from '@/helpers/axios';
185
-
186
-
const dispatch = useDispatch();
187
-
188
-
// Use useCallback to memorize create func (just one time)
189
-
const fetchUser = useCallback(async () => {
190
-
try {
191
-
// Star loading spinner
192
-
dispatch(setLoading(true));
193
-
194
-
// fetch user
195
-
const resp = await getUser();
196
-
console.log(resp);
197
-
} catch (error) {
198
-
// display toast when error
199
-
errorHandler(error);
200
-
} finally {
201
-
// End loading spinner
202
-
dispatch(setLoading(false));
203
-
}
204
-
}, []);
205
-
206
-
useEffect(() => {
207
-
// Trigger function
208
-
fetchUser();
209
-
}, [fetchUser]);
210
-
```
211
-
212
-
- How to use Auth feature
213
-
- If you want to build an admin page, with authorize full layout, just go to line **50** at `src/layouts/main.tsx` and use the code inside comment.
214
-
-**Auth** component is a feature help authorize page by fetching profile each time page rendered.
215
-
- You must have a server API to use thisfeature. ThisAPIwith simple function like receive a header token, return user profile if token is valid and return 404 if token is expired.
216
-
217
-
---
218
-
219
-
## Tips
220
-
221
-
- Go to `.huskyinstall`, remove comment at <b>line 37</b> and run `[yarn or npm install]` again to apply run test when using `git push origin [ branch ]`
222
-
- Go to `config/@types/[any-file-name].d.ts` to declare global type of typescript
223
-
- Go to `pm2/prod.json` and change <b>"name: ~~react-webpack-typescript-starter~~ ->[other-name]"</b> to config pm2 app name
224
-
- Go to `components/spinner/index.tsx` and modify jsx + css to use another loading
225
-
226
-
---
227
-
228
-
## Carefully
229
-
230
-
- Don't create folder with the `PascalCase`. Because it will throw error when build prod at ubuntu. I will fix it later or happy if you have a PR to fix it.
231
-
```javascript
232
-
Module not found: Error: Can't resolve '@/path-to-pascal-case' in '/path-to-lower-case'
0 commit comments