Possible
153 lines
4.3 KiB
Markdown
153 lines
4.3 KiB
Markdown
# This project is a toy project for training and quality assurance purposes
|
|
|
|
# Task
|
|
|
|
All this task must be done in 1 day
|
|
|
|
- in src/utils/MkdSDK.jsx implement Line 17
|
|
- in src/utils/MkdSDK.jsx implement Line 91
|
|
- in src/pages/AdminLoginPage.jsx implement Line 30
|
|
- once login successful, call snackbar component to show logged in toast. DONT use 3rd party library
|
|
- in src/context/Auth/AuthContext.jsx implement 16
|
|
- in src/context/Auth/AuthContext.jsx implement 40 to check if token still valid
|
|
- There's a bug that it flickers Page Not Found
|
|
- once logged in go to dashboard page like figma file
|
|
https://www.figma.com/file/veiESwD61KJBa7BpEHtbdl/react-task-2?node-id=1086%3A15525
|
|
|
|
- Call paginate api as shown below to get video data. Show 10 per page. Have a next button at bottom when clicked, load next 10 videos
|
|
|
|
- Call paginate api as shown below to get video data. Show 10 per page. Have a prev button at bottom when clicked, load prev 10 videos
|
|
|
|
- Implement logout button
|
|
|
|
- Please READ SDK file and reuse code when you can. DO NOT REINVENT THE WHEEL.
|
|
- Use React Drag and drop library https://react-dnd.github.io/react-dnd/about to be able to rearrange the rows and columns in the table in dashboard. On Refresh, the columns go back to default
|
|
|
|
### Table Task
|
|
|
|
- in src/pages/AdminListReceipts.jsx - we have a table listing receipts
|
|
|
|
1. fix the bind issue in src/components/MkdListTable/MkdListTableBindOperations.jsx - all //TO DO
|
|
For example
|
|
<!-- {
|
|
edit: {
|
|
show: true,
|
|
// action: (ids) => navigate(`/admin/edit-receipts/${ids[0]}`),
|
|
multiple: false,
|
|
locations: ["buttons", "dropdown"],
|
|
icon: <EditIcon2 />,
|
|
bind: {
|
|
column: "receipt_status",
|
|
action: "hide",
|
|
operator: operations.EQUAL,
|
|
ifValue: 1,
|
|
},
|
|
}
|
|
} -->
|
|
|
|
the edit action binds via the bind property to a column "receipt_status"
|
|
if the value of receipt_status is 1 then the edit should be hidden, i.e not shown
|
|
|
|
2. in src/components/MkdListTable/MkdListTableRow.jsx each column has a format it should be rendered in
|
|
|
|
- "line_items" and "receipt_charges" have the list property `true`, listType: `json|object_array` could be `json|number_array` or `json|string_array` but in this case it is the `json|object_array`
|
|
|
|
- using the action which tells you what key in the array of objects you need to work on
|
|
operation is either to `list` all the values and return an array or `add` to add all the values of the key and return the result
|
|
|
|
- src/utils/utils.jsx - Line 179
|
|
<!-- Sample = {
|
|
header: "receipt_charges",
|
|
accessor: "receipt_charges",
|
|
isSorted: true,
|
|
list: true,
|
|
limit: 6,
|
|
listType: "json|object_array",
|
|
action: {
|
|
key: "total_charges",
|
|
operation: "add",
|
|
},
|
|
selected_column: true,
|
|
isSortedDesc: false,
|
|
mappingExist: false,
|
|
mappings: {},
|
|
}, -->
|
|
|
|
## Login
|
|
|
|
```
|
|
https://reacttask.mkdlabs.com/v2/api/lambda/login
|
|
Method POST
|
|
content-type application/json
|
|
x-project cmVhY3R0YXNrOmQ5aGVkeWN5djZwN3p3OHhpMzR0OWJtdHNqc2lneTV0Nw==
|
|
body
|
|
{
|
|
"email": "adminreacttask@manaknight.com",
|
|
"password": "a123456",
|
|
"role": "admin"
|
|
}
|
|
Response
|
|
{
|
|
"error": false,
|
|
"role": "admin",
|
|
"token": "",
|
|
"expire_at": 3600,
|
|
"user_id": 1
|
|
}
|
|
```
|
|
|
|
## Check
|
|
|
|
```
|
|
Check if token still valid
|
|
https://reacttask.mkdlabs.com/v2/api/lambda/check
|
|
Method POST
|
|
Header
|
|
x-project cmVhY3R0YXNrOmQ5aGVkeWN5djZwN3p3OHhpMzR0OWJtdHNqc2lneTV0Nw==
|
|
Bearer <token>
|
|
body
|
|
{
|
|
"role": "admin"
|
|
}
|
|
Response
|
|
http code 200
|
|
```
|
|
|
|
## Video Paginate
|
|
|
|
```
|
|
https://reacttask.mkdlabs.com/v1/api/rest/video/PAGINATE
|
|
Method POST
|
|
Header
|
|
x-project cmVhY3R0YXNrOmQ5aGVkeWN5djZwN3p3OHhpMzR0OWJtdHNqc2lneTV0Nw==
|
|
Bearer <token>
|
|
body
|
|
{
|
|
"payload": {},
|
|
"page": 1,
|
|
"limit": 10
|
|
}
|
|
Response
|
|
http code 200
|
|
{
|
|
"error": false,
|
|
"list": [
|
|
{
|
|
"id": 1,
|
|
"title": "Rune raises $100,000 for marketing through NFT butterflies sale",
|
|
"photo": "https://picsum.photos/200/200",
|
|
"user_id": 1,
|
|
"username": "boss",
|
|
"create_at": "2022-01-01",
|
|
"update_at": "2022-01-01T04:00:00.000Z",
|
|
"like": 10
|
|
}
|
|
],
|
|
"page": 1,
|
|
"limit": 10,
|
|
"total": 112,
|
|
"num_pages": 12
|
|
}
|
|
|
|
```
|