Add an option to edit created items

[KkageG]

Expected Behaviour

As a user I expect to be able to edit my added items on the profile page

Current Behaviour

Newly created item is shown on profile page 
Only "Delete" button is shown below the item 

Steps to Reproduce

1. Run the application locally 
2. Log in as a user 
3. Go to add item page http://localhost:3000/add-item 
4. Fill in item name - test, description - test, postcode - CF1, condition - Good, category - Toys, check - Willing to post
5. Pick an image to upload (a valid jpeg file) 
6. Click  "add your item" button 
7. Click "Profile" button 

[github-actions[bot]]

🤖 Meep Morp! This Issue is now marked as stale because there has been no activity for a while. \n\nIt will be deleted in 7 days unless there are new contributions.

[Edga380]

@camelPhonso @nichgalzin Hey I have a question regarding profile page. After successfully updating a item you navigate to profile page where the item looks like it's not been edited because I believe the page was cached when you accessed it before so when you reload the page just then you can see that the item was actually updated. I was wondering how could I change this so you always get the latest data on the profile page? Should I remove caching from the profile page or you have some other ideas how I should approach this? I tried add 'refreshId' to the path when you route to the profile page like this:

router.push(`/profile?refreshId=${new Date().getTime()}`);

This works but not well because if you navigate to a different page on the website and then come back to profile page it looks like nothing was edited. I hope my explanation make sense thanks :)

[camelPhonso]

@camelPhonso @nichgalzin Hey I have a question regarding profile page. After successfully updating a item you navigate to profile page where the item looks like it's not been edited because I believe the page was cached when you accessed it before so when you reload the page just then you can see that the item was actually updated. I was wondering how could I change this so you always get the latest data on the profile page? Should I remove caching from the profile page or you have some other ideas how I should approach this? I tried add 'refreshId' to the path when you route to the profile page like this:

router.push(`/profile?refreshId=${new Date().getTime()}`);

This works but not well because if you navigate to a different page on the website and then come back to profile page it looks like nothing was edited. I hope my explanation make sense thanks :)

Hey @Edga380 just from a first read I think the fix is much simpler. There's a database call for all the items being made on this page that initialises the fetchedItems value. The issue is that's being done as a "lazy initialisation" so two things happen:

• a change to the items list does not cause a re-render of the ItemCard components
• changes in the database do not cause a change in the UI

Because of that, we need to manually re-render the page in order to see new items.

In our messaging feature we are using supabase's websockets to watch updates to our conversations and trigger a render of messages and the same solution would solve this problem here.

It's an interesting feat to work on if you have the edit button ready and want to tack that onto the PR 😉

[camelPhonso]

In our messaging feature we are using supabase's websockets to watch updates to our conversations and trigger a render of messages and the same solution would solve this problem here.

It's an interesting feat to work on if you have the edit button ready and want to tack that onto the PR 😉

Actually @Edga380 I got away of myself with excitement 😅 - you don't need to use a websocket at all because no one is expected to be watching the items list page as it updates. Just stick that database call in a useEffect and force it to re-run with each render. It's a pretty common pattern and we've used it loads throughout the codebase already :)

[Edga380]

@camelPhonso Thank you for the suggestions. I will implement them and this new feature should be ready for a pull request. 😊