Skip to content

feat: add copy sandbox link option on Sandbox Card #3886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 14, 2020
Merged

feat: add copy sandbox link option on Sandbox Card #3886

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,18 @@ type State = {
export const DELETE_SANDBOX_DROP_KEY = 'delete';
export const MAKE_TEMPLATE_DROP_KEY = 'makeTemplate';

const copyToClipboard = (str: string) => {
Copy link
Contributor

@SaraVieira SaraVieira Apr 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome! But we already have this function here:

codesandbox-client/packages/app/src/app/overmind/effects/browser.ts

Line 54 in 63ea50d

copyToClipboard: (str: string) => {

You can call it from Overmind with effects.browser.copyToClipboard and passing the string

Let me know if you need any help

Copy link
Contributor Author

@jyash97 jyash97 Apr 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey 👋

Thanks for the quick review, will make this change in some time.

Copy link
Contributor

@SaraVieira SaraVieira Apr 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! Thank you!

Copy link
Contributor Author

@jyash97 jyash97 Apr 13, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we have not refactored these Component yet so is there a way to access effects in Class Components? I was thinking to access the util by useOvermind hook but this won't work here.

Copy link
Contributor

@SaraVieira SaraVieira Apr 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are very right!

I will merge it!

Thank you!

const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};

class SandboxItemComponent extends React.PureComponent<Props, State> {
el: HTMLDivElement;
screenshotTimeout: number;
Expand Down Expand Up @@ -290,6 +302,13 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
return true;
},
},
{
title: 'Copy Sandbox Link',
action: () => {
this.copySandboxURL();
return true;
},
},
{
title: 'Fork Sandbox',
action: () => {
Expand Down Expand Up @@ -383,6 +402,14 @@ class SandboxItemComponent extends React.PureComponent<Props, State> {
return true;
};

copySandboxURL = () => {
const url = sandboxUrl({ id: this.props.id, alias: this.props.alias });

copyToClipboard(`https://codesandbox.io${url}`);

return true;
};

handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
e.stopPropagation();

Expand Down