Skip to content

Commit

Permalink
refactor: use state rather than refs
Browse files Browse the repository at this point in the history
  • Loading branch information
agoose77 committed Dec 2, 2024
1 parent bcadf4d commit ad7c738
Showing 1 changed file with 15 additions and 18 deletions.
33 changes: 15 additions & 18 deletions packages/frontmatter/src/FrontmatterBlock.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef, useCallback } from 'react';
import React, { useRef, useCallback, useState } from 'react';
import classNames from 'classnames';
import type { PageFrontmatter } from 'myst-frontmatter';
import { SourceFileKind } from 'myst-spec-ext';
Expand Down Expand Up @@ -273,30 +273,32 @@ type CopyButtonProps = {

function CopyButton(props: CopyButtonProps) {
const { className, defaultMessage, alternateMessage, buildLink, timeout } = props;

const messageRef = useRef<HTMLSpanElement>(null);
const [message, setMessage] = useState(defaultMessage);

const copyLink = useCallback(() => {
// Build the link for the clipboard
const link = props.buildLink();
// In secure links, if we have a link, we can copy it!
if (window.isSecureContext && link) {
// Write to clipboard
window.navigator.clipboard.writeText(link);
// Update UI
setMessage(alternateMessage ?? defaultMessage);

const messageBox = messageRef.current;
if (messageBox) {
messageBox.innerText = alternateMessage ?? defaultMessage;
setTimeout(() => {
messageBox.innerText = defaultMessage;
}, timeout ?? 1000);
}
// Set callback to restore message
setTimeout(() => {
setMessage(defaultMessage);
}, timeout ?? 1000);
}
}, [messageRef, defaultMessage, alternateMessage, buildLink, timeout]);
}, [defaultMessage, alternateMessage, buildLink, timeout, setMessage]);

return (
<button
type="button"
className={classNames(className, 'flex flex-row items-center gap-1')}
onClick={copyLink}
>
<span ref={messageRef}>{defaultMessage}</span> <ClipboardCopyIcon className="inline-block" />
{message} <ClipboardCopyIcon className="inline-block" />
</button>
);
}
Expand All @@ -306,7 +308,6 @@ function BinderLaunchContent(props: BinderLaunchProps) {
const defaultBinderBaseURL = props.binder ?? 'https://mybinder.org';

// Determine Git ref
// TODO: pull this from frontmatter
const refComponent = encodeURIComponent(props.ref ?? 'HEAD');

// Build binder URL path
Expand Down Expand Up @@ -335,11 +336,9 @@ function BinderLaunchContent(props: BinderLaunchProps) {
}

const data = Object.fromEntries(new FormData(form) as any);

const binderURL = ensureBasename(data.url || defaultBinderBaseURL);
binderURL.pathname = `${binderURL.pathname}v2/${gitComponent}/${refComponent}`;
binderURL.search = `?${query}`;

return binderURL.toString();
}, [formRef, gitComponent, refComponent, query]);

Expand Down Expand Up @@ -412,7 +411,7 @@ function JupyterHubLaunchContent(props: JupyterHubLaunchProps) {
const query = encodeURLParams({
repo: props.git,
urlpath: urlPath,
branch: props.ref, // TODO master/main?
branch: props.ref,
});

const formRef = useRef<HTMLFormElement>(null);
Expand All @@ -424,15 +423,13 @@ function JupyterHubLaunchContent(props: JupyterHubLaunchProps) {
}

const data = Object.fromEntries(new FormData(form) as any);

const rawHubBaseURL = data.url;
if (!rawHubBaseURL) {
return;
}
const hubURL = ensureBasename(rawHubBaseURL);
hubURL.pathname = `${hubURL.pathname}hub/user-redirect/git-pull`;
hubURL.search = `?${query}`;

return hubURL.toString();
}, [formRef, query]);

Expand Down

0 comments on commit ad7c738

Please sign in to comment.