React Website UI/API Bug Fix -- 3
Budget: $30 – $250 USD
# Seeking a Development Team for Long-Term Collaboration
This job is designed to find a developer for long-term cooperation; therefore, this task is not difficult. We simply want to test if you are suitable for long-term collaboration. Our company currently employs several engineers from various countries with whom we have been cooperating for several years. However, as our business grows, we are planning to expand our development team.
## Our Team
We are in search of a dependable team for long-term outsourcing projects, emphasizing stability in quality, scheduling, and pricing. Our organization is ISO27001 certified, with stringent project specifications. Interested teams must comply with our standards for collaboration. [View our certification](https://www.iafcertsearch.org/certified-entity/00522bad-28f0-51ce-a86a-86b27ffac5ca).
## Please provide your personal information for the interview.
1. Are you a team player or an individual worker?
2. Past projects involving React and TypeScript.
3. Link to your GitHub profile.
4. Have you used Figma before?
# Project Overview
## Objective
This job involves repairing the presentation of an existing website, the main job is to correct existing page errors and exceptions.
## Task
### Issue 1 : [BUG] Implement Non-hyperlinked, Bold Breadcrumb for the Last Item
- Please check the attachment image
### Issue 2 : [BUG] Incorrect filePathType value in payload for image uploads in Article comments
- Please check the attachment image
### Issue 3 : [BUG] Fix Email Sending Bug and Remove Unnecessary API Call in CRM User SES Tab
### Content:
#### Issue 1: Incorrect Email Payload on SES Tab
**Description:**
In the SES tab of the CRM User details page, when attempting to send an email to a single user, the frontend fails to send the correct payload to the backend, resulting in the data not being properly saved. After entering the email content and specifying the recipient's email, and clicking send, the `organizationUserEmail` parameter in the frontend payload is empty.
[ Current Example Payload ❌ ]
**Expected Behavior:**
The email entered by the user should be correctly included in the payload. If no email is entered, or the email input field is empty, the send button should be disabled.
**Steps to Reproduce:**
1. Go to the CRM User details page.
2. Navigate to the SES tab.
3. Enter the email details and recipient's email.
4. Click on the send button.
5. Observe that the `organizationUserEmail` parameter in the payload is empty.
#### Unnecessary API Call on Page Load
**Description:**
There is an unnecessary API call to fetch all SES records when the SES tab of the CRM User details page loads. This call should be removed to improve performance and reduce data load.
**Expected Behavior:**
The API call that fetches all SES records should be removed. Only the API call that fetches SES records with a specific `targetId` should be maintained.
**Steps to Reproduce:**
1. Go to the CRM User details page.
2. Navigate to the SES tab.
3. Observe the network calls to confirm that two API calls are made - one unnecessary call fetching all records, and another necessary call fetching records with a specific `targetId`.
Please address these issues to ensure the functionality and efficiency of the CRM system.
### Deadline
- Within 12HR after accepting the job.
- Late submissions will not be considered.
### Budget
- **Fixed Rate:** USD 60 for this project.
- It is estimated that a junior engineer will need 4 hours to complete, while a senior engineer can complete it in 2 hours.
- **Payment Release:** Upon satisfactory review by our UI and FT Teams.
### Skills Required
- ReactJS
- TypeScript
- NextJs
- Figma
# Acceptance
## Function Review
- Fulfilling requirements.
- UI consistency with designs.
- Complete code and functionality delivery.
- Successful integration and update of the UI for this issue.
## Fool-proof Design
- **API:** No unnecessary triggers; data updates trigger the process's API.
- **UI:** Proper disabling and enabling of buttons; loading icons during API calls; default process messages post-API response.
- **RWD:** Compatibility checked through Viewport Resizer.
## Code Review
- Adherence to development specifications and completion of revisions.
This job is designed to find a developer for long-term cooperation; therefore, this task is not difficult. We simply want to test if you are suitable for long-term collaboration. Our company currently employs several engineers from various countries with whom we have been cooperating for several years. However, as our business grows, we are planning to expand our development team.
## Our Team
We are in search of a dependable team for long-term outsourcing projects, emphasizing stability in quality, scheduling, and pricing. Our organization is ISO27001 certified, with stringent project specifications. Interested teams must comply with our standards for collaboration. [View our certification](https://www.iafcertsearch.org/certified-entity/00522bad-28f0-51ce-a86a-86b27ffac5ca).
## Please provide your personal information for the interview.
1. Are you a team player or an individual worker?
2. Past projects involving React and TypeScript.
3. Link to your GitHub profile.
4. Have you used Figma before?
# Project Overview
## Objective
This job involves repairing the presentation of an existing website, the main job is to correct existing page errors and exceptions.
## Task
### Issue 1 : [BUG] Implement Non-hyperlinked, Bold Breadcrumb for the Last Item
- Please check the attachment image
### Issue 2 : [BUG] Incorrect filePathType value in payload for image uploads in Article comments
- Please check the attachment image
### Issue 3 : [BUG] Fix Email Sending Bug and Remove Unnecessary API Call in CRM User SES Tab
### Content:
#### Issue 1: Incorrect Email Payload on SES Tab
**Description:**
In the SES tab of the CRM User details page, when attempting to send an email to a single user, the frontend fails to send the correct payload to the backend, resulting in the data not being properly saved. After entering the email content and specifying the recipient's email, and clicking send, the `organizationUserEmail` parameter in the frontend payload is empty.
[ Current Example Payload ❌ ]
**Expected Behavior:**
The email entered by the user should be correctly included in the payload. If no email is entered, or the email input field is empty, the send button should be disabled.
**Steps to Reproduce:**
1. Go to the CRM User details page.
2. Navigate to the SES tab.
3. Enter the email details and recipient's email.
4. Click on the send button.
5. Observe that the `organizationUserEmail` parameter in the payload is empty.
#### Unnecessary API Call on Page Load
**Description:**
There is an unnecessary API call to fetch all SES records when the SES tab of the CRM User details page loads. This call should be removed to improve performance and reduce data load.
**Expected Behavior:**
The API call that fetches all SES records should be removed. Only the API call that fetches SES records with a specific `targetId` should be maintained.
**Steps to Reproduce:**
1. Go to the CRM User details page.
2. Navigate to the SES tab.
3. Observe the network calls to confirm that two API calls are made - one unnecessary call fetching all records, and another necessary call fetching records with a specific `targetId`.
Please address these issues to ensure the functionality and efficiency of the CRM system.
### Deadline
- Within 12HR after accepting the job.
- Late submissions will not be considered.
### Budget
- **Fixed Rate:** USD 60 for this project.
- It is estimated that a junior engineer will need 4 hours to complete, while a senior engineer can complete it in 2 hours.
- **Payment Release:** Upon satisfactory review by our UI and FT Teams.
### Skills Required
- ReactJS
- TypeScript
- NextJs
- Figma
# Acceptance
## Function Review
- Fulfilling requirements.
- UI consistency with designs.
- Complete code and functionality delivery.
- Successful integration and update of the UI for this issue.
## Fool-proof Design
- **API:** No unnecessary triggers; data updates trigger the process's API.
- **UI:** Proper disabling and enabling of buttons; loading icons during API calls; default process messages post-API response.
- **RWD:** Compatibility checked through Viewport Resizer.
## Code Review
- Adherence to development specifications and completion of revisions.