Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@aha-app/aha-develop-react
Advanced tools
Readme
Install:
npm install @aha-develop/aha-develop-react
or
yarn add @aha-develop/aha-develop-react
Run a callback with authentication to an external service and return the data and/or the auth and loading state.
import { useAuth } from "@aha-develop/aha-develop-react";
function LoadPullRequests(props) {
const { loading, authed, data, fetchData } = useAuth(async (authData) => {
const api = octokit.defaults({
headers: { authorization: `token ${authData.token}` },
});
return await api(FETCH_PULL_REQUESTS_QUERY);
});
if (loading) {
return <aha-spinner />;
}
if (!authed) {
return <button onClick={fetchData}>Load pull requests</button>;
}
const pullRequests = data.map((pr, idx) => <PullRequest key={idx} pr={pr} />);
return <ul>{pullRequests}</ul>;
}
In this example component the callback fetches the data from github. The callback will only be run if the user is authenticated with github. When the component loads it will check the authentication status. If they are not authenticated then authed
will be false and the component can display a button to prompt the user to authenticate.
If loading
is true then the user is authenticated and the data is being requested.
The component must be wrapped in an AuthProvider. This would usually be done at the root node:
import { AuthProvider } from "@aha-develop/aha-develop-react";
aha.on("pullRequests", () => {
return (
<AuthProvider serviceName="github" serviceParameters={{ scope: "repo" }}>
<App />
</AuthProvider>
);
});
It's possible to use multiple services in one extension with useAuth:
<AuthProvider serviceName="github">
<AuthProvider serviceName="gitlab">
<App />
</AuthProvider>
</AuthProvider>
const { data, loading, authed, fetchData } = useAuth(fetchGitlabPrs, {
serviceName: "gitlab",
});
const { data, loading, authed, fetchData } = useAuth(fetchGithubPrs, {
serviceName: "github",
});
If no serviceName is provided then the first registered AuthProvider is used.
If there is a modal or popup component controlled by the extension then capturing mouse clicks outside the area of the popup can be tricky due to the shadowRoot container. This hook will set up a container aware event handler:
function Popup({ onClose }) {
const popupEl = useRef(null);
useOutsideAlerter(popupEl, () => onClose());
return (
<div ref={popupEl}>
I'm a popup
<button onClick={onClose}>Close</button>
</div>
);
}
The event defaults to "mousedown" and can be customised:
useOutsideAlerter(popupEl, onClose, { event: "mousemove" });
This is a simple clipboard helper for React components to copy text to the clipboard and show an indicator for a short time:
function CopyableId({ id }) {
const [onCopy, copied] = useClipboard();
return <div>
<span>{id}</span>
<button onClick={() => onCopy(id)}>
<i className="fa-regular fa-copy"></i>
{copied ? "Copied" : "Copy"}
</button>
</div>
}
Embeds content via an iframe. Constrains element size based on aspect ratio. Sanitizes user input.
<EmbeddedContent
src="https://my.site.xzy/design.png"
aspectRatio={1.333}
/>
Fully-featured component for managing embedded content associated with an Aha! Record. Collects a URL as user input, stores it as extension data on the record, and displays the URL at a fixed aspect ratio when set.
import React from "react";
import { EmbeddedContentAttribute } from "@aha-develop/aha-develop-react";
aha.on("myServiceAttribute", ({ record, fields }, { identifier }) => {
const ensureEmbedFlags = async (url) => {
if (url.includes('emb=1')) {
return url;
} else {
return `${url}?emb=1&ios=false&frameless=false`;
}
};
return (
<EmbeddedContentAttribute
identifier={identifier}
record={record}
fields={fields}
product="MyService"
placeholder="https://my.site.xyz/embed/..."
onLinkUpdated={ensureEmbedFlags}
/>
);
});
FAQs
Common React patterns for Aha! develop
The npm package @aha-app/aha-develop-react receives a total of 7 weekly downloads. As such, @aha-app/aha-develop-react popularity was classified as not popular.
We found that @aha-app/aha-develop-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 44 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.