Edit Links component #20

There is no content yet.

changed title from {-feat/linktree editor edit links-} to {+Edit Links component+}

You would need to rebase this locally first @l42luo

added 22 commits

628153d2...ab544fc7 - 8 commits from branch main
4279846c - janky static interface implemented
c8d8405d - react-beautiful-dnd not working but set up
b1590ee8 - drag and drop sometimes works
f3ef76e4 - drag and drop is fully functional
7420392f - refactored EditLink to modify data within the component so that dragndrop still works
54d81e06 - wip
aeb4891f - with steven's edits
44ef918c - drag n drop simplified code
87dff0b3 - drag n drop cleaned up and semi working lol fml
30bf050c - drag n drop is refactored and officially fully functional
87c7c249 - post verbal pr comments with Steven and Adi
9f480959 - first pr
10de1511 - removed unecessary type
2ee1a39c - fixing merge conflicts

Compare with previous version

marked this merge request as draft from 54d81e0660007b997cdb13f5c7aa376c0db83021

I don't think we need a styled div over here. Can we replace <Container /> with a regular <div></div>?

Wait, it's a draft, so I won't review right now :)

changed this line in version 3 of the diff

added 1 commit

be9a9f28 - drag and drop and responsive ui for adding a link functionalities

Compare with previous version

marked this merge request as ready

nit: remove these console logs

nit: let's not set the name for a new link, keep it empty instead

nit: delete these lines

nit: remove this function since we're not using it

replace with inline function from line 90 and use e.target.checked instead

replace with inline function from line 90

nit: abstract this logic into a helper function and put this outside of the component body

I am using the name as the draggableId (it needs to be unique)

changed this line in version 4 of the diff

added 2 commits

6c9aa560 - making changes according to pr comments
91fb3afc - changes made for pr

Compare with previous version

added 6 commits

91fb3afc...7389e555 - 4 commits from branch main
6fcebab2 - Merge branch 'main' into feat/linktree-editor-edit-links
e06c7958 - Cleanup files

Compare with previous version

You should pull out these svgs into separate mini components so that we know what this svg is.

Generally, it's not good practice to name types this way. For eg:

class FooClass {} vs class Foo {}
const barNumber = 1 vs const bar = 1

In TypeScript, types that start with a T should be used when you're working with templates/generics.

Also, why do we have a separate types.ts file?

You can inline the type:

export const useDragDrop: () => { displayDragDrop } = () => {
  ...
}

But this can look a bit weird 🤷

You can also export a function instead.

export function useDragDrop(): { displayDragDrop } {
  ...
}

Because TEditLink is being used in multiple files, I'll put it in utils/types for now and we can change it afterwards

hmmm I feel like both would add too much clutter, we should prob stick with declaring functions a certain way (in this case using arrow fns) and separating types instead of inlining it is better for readability imo