({ deep, require }) => {
const React = require('react');
const axiosHooks = require("axios-hooks");
const axios = require("axios");
const useAxios = axiosHooks.makeUseAxios({ axios: axios.create() });
const makeNpmPackagesUrl = (query) => {
const deepPackageKeyword = 'deep-package';
const textParameter = encodeURIComponent(`${query} keywords:${deepPackageKeyword}`);
return `https://registry.npmjs.com/-/v1/search?text=${textParameter}`;
};
const makePackagesSearchResults = (deep, packageNamespaceTypeId, packageVersionTypeId, packageActiveTypeId, remotePackages, areLinksPrefetched) => {
const installedPackages = [];
const notInstalledPackages = [];
if (remotePackages?.length > 0 && areLinksPrefetched) {
const namespacesByName = {};
for (const namespace of deep.minilinks.byType[packageNamespaceTypeId]) {
namespacesByName[namespace.value.value] = namespace;
}
const versionsByNamespaceId = {};
for (const version of deep.minilinks.byType[packageVersionTypeId]) {
versionsByNamespaceId[version.from_id] = [...(versionsByNamespaceId?.[version.from_id] || []), version];
}
const isActiveByPackageId = {}
for (const packageActive of deep.minilinks.byType[packageActiveTypeId]) {
isActiveByPackageId[packageActive.to_id] = true;
}
for (const remotePackage of remotePackages) {
const name = remotePackage.package.name;
const namespaceId = namespacesByName[name]?.id;
if (namespaceId) {
const versions = versionsByNamespaceId[namespaceId].map(version => ({
packageId: version?.to_id,
version: version?.value?.value,
isActive: isActiveByPackageId[version?.to_id]
}));
installedPackages.push({ localPackage: { namespaceId, name, versions }, remotePackage });
} else {
notInstalledPackages.push({ remotePackage });
}
};
}
return { installedPackages, notInstalledPackages };
}
return ({ fillSize, style, link }) => {
const searchQuery = '';
const [{ data, loading, error }, refetch] = useAxios(makeNpmPackagesUrl(searchQuery));
const packageNamespaceTypeId = deep.idLocal('@deep-foundation/core', 'PackageNamespace');
const packageVersionTypeId = deep.idLocal('@deep-foundation/core', 'PackageVersion');
const packageActiveTypeId = deep.idLocal('@deep-foundation/core', 'PackageActive');
const { data: prefetched } = deep.useDeepSubscription({
type_id: { _in: [packageNamespaceTypeId, packageVersionTypeId, packageActiveTypeId ] }
});
const { installedPackages, notInstalledPackages } = makePackagesSearchResults(deep, packageNamespaceTypeId, packageVersionTypeId, packageActiveTypeId, data?.objects, prefetched?.length > 0);
if (loading || !prefetched?.length) return <p>Loading...</p>;
if (error) return <p>Error!</p>;
return <div
style={{
width: 768,
height: 1024,
...style,
background: 'black',
color: 'green',
position: 'relative',
overflow: 'scroll'
}}
>
<div><button onClick={refetch}>refetch button</button></div>
<div>Current link id: {link.id}</div>
<div>Prefetched links: {prefetched?.length}</div>
<h1>installedPackages:</h1>
<div><pre>{JSON.stringify(installedPackages, null, 2)}</pre></div>
<h1>notInstalledPackages:</h1>
<div><pre>{JSON.stringify(notInstalledPackages, null, 2)}</pre></div>
</div>;
}
}