fix: remove timer's live property

[AmanNegi]

Description 🤷‍♂️

After adding a product as a farmer, we are redirected to the home page. On the home page, we see a grid of items with the time they were added. However, the newly added item shows a live timer such as "1, 2, 3 seconds ago" which is unexpected and seems like an error.

We want to remove the live behaviour of the time shown.

Demo 📽️

https://github.com/AmanNegi/FreshNest/assets/37607224/7fb7239f-5b60-470a-876d-2db8160ae2ad

Affected Files 🗃️

• frontend/react/src/components/ShopItem.jsx

[MohitKambli]

Hello @AmanNegi, Hope you're doing well. I would like to work on this issue. Firstly, Is this how the cart should look like?

Secondly, for some reason, I am not able to login neither as a customer nor as a farmer. All I am able to see is something like this:

Do you think I did something wrong while implementing the above steps? According to the documentation, I did these steps.

My .env file has the following line as of now: VITE_API_URL="https://agromillets.adaptable.app/api"

My node version is: v18.18.0

Thanks and Regards, Mohit Kambli

[AmanNegi]

Thank you for investigating the problem, @MohitKambli. It appears that the profile page was causing issues due to a react query cache problem. However, I have fixed the issue now. Please pull from the main branch and use the credentials provided below to log in as a farmer.

email: farmer@gmail.com
password: password

[AmanNegi]

Firstly, Is this how the cart should look like?

This is the shop page, you are currently not signed in as I can see. If you login as a customer you'll be able to see a cart icon at the top which is currently not visible.

References

The cart icon is visible in customer view only.

Here's the cart view opened.

Let me know if something else is needed.

[MohitKambli]

Hello @AmanNegi, Hope you're doing well. Thank you for your assistance and crisp explanation. Now, I am successfully able to login as a farmer and customer as well. So, on making the code changes for removing the time, this is how the farmer page looks like:

This is how the customer page looks like:

Do you think the above changes satisfy the requirements? If at all there's any issue from my end, then do let me know. Sincere apologies for my mistakes if you find any. I will raise a PR for the same in some time. Thank you so much for your understanding and assistance

Thanks and Regards, Mohit Kambli

[AmanNegi]

Hi @MohitKambli, I understand that the issue description was not clear enough. Just to clarify, we would like to keep the timer as it is, but we want to remove the live behavior of the timer updating in real time when we add an item. The purpose of this issue is not to remove the timer.

I will update the details accordingly to avoid any confusion in the future. Additionally, you may refer to the timeago package documentation for more information regarding this matter. I hope this clears things up. Let me know if you have any other questions or concerns.

[MohitKambli]

Hello @AmanNegi, Sincere apologies for not understanding the issue quite correctly. I sort of misunderstood the requirement. So, I was trying to add an item from my end, but this is what I get while adding an item.

Could you please help me in resolving this issue?

Thanks and Regards, Mohit Kambli

[AmanNegi]

@MohitKambli There's no need to do that I believe, check this out I found this in react-timeago library:

• https://github.com/nmn/react-timeago?tab=readme-ov-file#live-optional

This resolves our issue of live timer, could you add the optional parameter to all places where react-timeago is used.

[MohitKambli]

Hello @AmanNegi, Awesome. Thank you so much for informing. Should've checked the documentation for this. Sincere apologies for this. I checked the code base. I am able to see only this file (frontend\react\src\components\ShopItem.jsx) where the react-timeago has been used. So now, this is how the code would look like

<div className="bg-gray-200 inline-flex flex-row mx-2 items-center justify-start px-3 gap-3 py-1 rounded-[5px] text-xs ">
  <FaClockRotateLeft />
  <TimeAgo date={item.listedAt} live={false} />
</div> 

I guess this would help in meeting the necessary requirements, right? Sincere apologies for my mistakes. If at all you think this looks fine, then I'll raise a PR for the same.

Thanks and Regards, Mohit Kambli

[AmanNegi]

That's fine @MohitKambli. Yes that seems to be the only change required. Feel free to raise a PR. 🙏