#193/add an option to edit created items

[Edga380]

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review on my code
• [x] I have made corresponding changes to the documentation (if any were needed)
• [x] My changes generate no new warnings or errors
• [ ] I have added tests that prove my fix is effective or that my feature works
• [x] New and previously existing unit tests pass locally with my changes
• [ ] Any dependent changes have been merged and published in downstream modules

Description

Closes #193

• User can edit donated items information visible on profile page.

Files changed

• profile/page.tsx

  • I created new file "DisplayDonatedItems.tsx" where I put all the logic that was responsible for displaying donated items and imported it into "profile/page.tsx file.
  • I did this because "profile/page.tsx" have server component (const supabase = newServerClient();). This function "newServerClient()" needs to import (import { cookies } from 'next/headers';) and you can't import this if you use any client side methods.

• DeleteButton.tsx

  • I have changed this "router.refresh" to "window.location.reload();" just because it was not working for me and I spent a lot of time troubleshooting why is that, but couldn't find out why. I decided to use "window.location.reload();" instead because I found that after editing your profile it uses that to reload the page. If you have an answer why "router.refresh" not working I would love to know why thank you.

• Modal.tsx

  • I mainly changed the styling so it would align with the styling of the delete message styling.
  • Previously when user press delete item button it would be disabled and you get pop up with warning confirmation and cancel button now the button stays visible because new style of pop up covers the whole screen so to can't press on anything else.

• editRow.ts

  • I added "PartialItem" type to "EditValues:" so I could use it inside "edit-item/[id]/page.tsx" file "onSubmit" function to submit data. I did this because we don't edit all the item data so typescript would be not happy about it if I just pass "item" as type.

New files/folders

• "edit-item" folder was created inside "(dashboard)" folder to store two new folders "[id]" and "success"

  • [id] folder have "page.tsx" file where edit item form is located.
  • edit form is exactly the same form as add file form except it was tweaked to fetch item data from the server using item id that was passed as parameter to "EditItemPage" function.
  • After receiving the item data using "reset" method we populate "defaultValues" with it.

• DisplayDonatedItems.tsx this file was created to display donated items on profile page and fetch the data every time you visit profile page by using "useEffect" method.

  • DisplayDonatedItems.tsx file is being stored inside "components/" folder.

• success/page.tsx

  • Shows success message after editing item exactly the same as you would get after adding a new item.

UI changes

• Edit item button added.

• Delete item pop up warning changed to align with the styling of delete message pop up styling.

• If user have more visible donated items on profile page the last item at the bottom gets cut off in desktop view and mobile view. So what I did I just added a margin at the bottom depending on the screen width. Screen width checked with "useMediaQuary" I used this because I saw this being used in other places.

• Desktop:

• Mobile:

• Edit item form looks exactly the same as Add item form.

• Success message after editing item.

Changes to Documentation

None

Tests

None

[netlify[bot]]

✅ Deploy Preview for cool-creponne-3e1272 ready!

Name	Link
🔨 Latest commit	5b8e9811b262a2728c361354ec59836347c4477d
🔍 Latest deploy log	https://app.netlify.com/sites/cool-creponne-3e1272/deploys/66657c3a19db5d0008145f6e
😎 Deploy Preview	https://deploy-preview-225--cool-creponne-3e1272.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Edga380]

@camelPhonso Thank you for a detail review of the pull request. I will deal with these suggestions/changes as soon as possible. 😊

[Edga380]

@camelPhonso So I did all the changes I hope I did them correctly let me know if I misunderstand something and if it needs to be changed.

Also I added new file in "supabase/models/upsertRow.ts" to replace "editRow" function with "upsertRow" one it looks like it works as you mention it will. This make sense to use again like you said with one route we cover both use cases.

Here is the code I wrote inside the file:

import newClient from '../utils/newClient';
import { PartialItem } from '@/types/supabaseTypes';

export default async function upsertRow(
  table: string,
  upsertValues: PartialItem
) {
  const supabase = newClient();
  const { error } = await supabase.from(table).upsert(upsertValues);

  if (error) {
    console.log(error);
    return false;
  }

  return true;
}

I return a boolean value here because I want to know if it successful or not so I could show an error to the user if it failed to edit.