Adding badge when people start editing code from someone else's project #553

New Issue

2021-10-12T12:19:47+02:00

Irev-Dev commented

2021-10-12 12:19:47 +02:00

(Migrated from github.com)

Adding badge when people start editing code from someone else's project (full designs)

The fork button is in app/web/src/components/IdeHeader/IdeHeader.tsx so that's probably where changes need to go.
the following logic should help determine if there's been changes to the code

const hasUnsavedChanges = project?.code && state?.code && project?.code !== state?.code

and there is already a canEdit boolean which effectively is where the project belongs to the current user, since we want to add tell the user to fork when they have made changes but it's not their project we'll use something like

const showForkMessage = !canEdit && hasUnsavedChanges

Now that showForkMessage can be used to show the badge below the fork button.
Changes will look something like

But you'll have to figure out the badge yourself.

Please use Tailwind for styles and the svg is part of @heroicons called exclamation-circle

Follow the instructions in CONTRIBUTING.md to get setup, and of course ask for help here or in the dev-help discord channel.

If you'd like to contribute the CadHub but this issue is taken or you'd prefer something else, have a look at #535 to see if there's something else you would like

[Adding badge](https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=1002%3A184) when people start editing code from someone else's project ([full designs](https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=1002%3A184)) ![image](https://user-images.githubusercontent.com/29681384/136937406-63ec61ce-b116-47b3-806b-78d4a385baa4.png) The fork button is in `app/web/src/components/IdeHeader/IdeHeader.tsx` so that's probably where changes need to go. the following logic should help determine if there's been changes to the code `const hasUnsavedChanges = project?.code && state?.code && project?.code !== state?.code` and there is already a `canEdit` boolean which effectively is where the project belongs to the current user, since we want to add tell the user to fork when they have made changes but it's not their project we'll use something like `const showForkMessage = !canEdit && hasUnsavedChanges` Now that `showForkMessage` can be used to show the badge below the fork button. Changes will look something like ![image](https://user-images.githubusercontent.com/29681384/136937870-2342275d-1fdf-4ee2-bc69-79ff594d1f38.png) But you'll have to figure out the badge yourself. Please use Tailwind for styles and the svg is part of [`@heroicons`](https://github.com/tailwindlabs/heroicons#react) called `exclamation-circle` ----- Follow the instructions in [CONTRIBUTING.md](https://github.com/Irev-Dev/cadhub/blob/main/CONTRIBUTING.md) to get setup, and of course ask for help here or in the [dev-help discord channel](https://discord.gg/Vgmky37UtD). If you'd like to contribute the CadHub but this issue is taken or you'd prefer something else, have a look at #535 to see if there's something else you would like

javibodas commented

2021-10-12 12:40:48 +02:00

(Migrated from github.com)

Hi, i would like to take a look on this

Irev-Dev commented

2021-10-12 12:43:15 +02:00

(Migrated from github.com)

Go for it @javibodas 😁

I've assigned it to you. Let me know if you need any help.

Go for it @javibodas 😁 I've assigned it to you. Let me know if you need any help.

Irev-Dev commented

2021-10-12 12:46:04 +02:00

(Migrated from github.com)

Some steps I just realised I missed is that you need to sign in locally with one of the demo users

localUser1@kurthutten.com: abc123

Create a project (plus button up the top right)

Then sign in as another user

localUser2@kurthutten.com: abc123

and edit the project in order to cause showForkMessage to become true.

Some steps I just realised I missed is that you need to sign in locally with one of the demo users localUser1@kurthutten.com: abc123 Create a project (plus button up the top right) Then sign in as another user localUser2@kurthutten.com: abc123 and edit the project in order to cause `showForkMessage` to become `true`.

javibodas commented

2021-10-12 19:14:22 +02:00

(Migrated from github.com)

Hi, I have created #554 PR, please check it out and let met know if there is something to modify

Irev-Dev commented

2021-10-12 21:11:07 +02:00

(Migrated from github.com)

Thanks @javibodas

Resolved by #554

Thanks @javibodas Resolved by #554

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: h3n3/cadhub#553