react_task_1b/README.md

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

         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

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
}