This project is a toy project for training and quality assurance purposes

Do not modify, change or delete any component or configurations made in this project by default.

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

• in src/pages/AdminListReceipts.jsx - there is a table listing receipts

  • fix the list table, the localReceiptData need data from src/utils/data.jsx, for some reason it is not getting that data

  • fix the bind issue in src/components/MkdListTable/MkdListTableBindOperations.jsx - all //TO DO the MkdListTableV2 component has actions props which is an object of key:value pair of action definitions For example the edit action, find other actions with the bind property

    edit: {
    show: true,
    action: (ids)=> {},
    multiple: false,
    locations: ["buttons", "dropdown"],
    icon: ,
    bind: {
    column: "receipt_status",
    action: "hide",
    operator: operations.EQUAL,
    ifValue: 1,
    },
    }
    

  • complete the open and close action feature, update the status to open and close to see the above binding work, also NOTE that close action is meant to show if status is open, and open is only meant to show if status is closed - lines -> 326,330,444,464

    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

  • 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

    • write the algorithm in src/utils/utils.jsx - Line 179 using the column format and action in format, 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

       Sample Column Format = {
      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
}