mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 07:33:22 +00:00
e86101ae7f
* remove nip-07 extension sign-in temporarily * bring kind-1 back! * separated relay views
78 lines
3.0 KiB
TypeScript
78 lines
3.0 KiB
TypeScript
/** @jsx h */
|
|
import { Component, h } from "https://esm.sh/preact@10.17.1";
|
|
import { recommendedRelays } from "./relay-config.ts";
|
|
import { AddIcon } from "./icons/add-icon.tsx";
|
|
import { CenterClass, NoOutlineClass } from "./components/tw.ts";
|
|
import {
|
|
DividerBackgroundColor,
|
|
ErrorColor,
|
|
HoverButtonBackgroundColor,
|
|
PrimaryTextColor,
|
|
} from "./style/colors.ts";
|
|
import { emitFunc } from "../event-bus.ts";
|
|
import { RelayConfig } from "./relay-config.ts";
|
|
import { HidePopOver } from "./components/popover.tsx";
|
|
|
|
type RelayRecommendListProps = {
|
|
relayConfig: RelayConfig;
|
|
emit: emitFunc<HidePopOver>;
|
|
};
|
|
|
|
export class RelayRecommendList extends Component<RelayRecommendListProps> {
|
|
computeRecommendedRelays() {
|
|
// remove the relays that are already in the relayConfig
|
|
return recommendedRelays.filter((r) => {
|
|
return !this.props.relayConfig.getRelayURLs().has(r);
|
|
});
|
|
}
|
|
|
|
handleAddRelay = async (relayUrl: string) => {
|
|
const p = this.props.relayConfig.add(relayUrl);
|
|
this.props.emit({
|
|
type: "HidePopOver",
|
|
});
|
|
const relay = await p;
|
|
if (relay instanceof Error) {
|
|
console.error(relay);
|
|
return;
|
|
}
|
|
this.forceUpdate();
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div class={`text-[${PrimaryTextColor}] text-center`}>
|
|
<div class={`text-lg mt-4`}>
|
|
Recommend Relays
|
|
</div>
|
|
<ul
|
|
class={`mt-[0.5rem] text-[${PrimaryTextColor}] flex flex-col justify-center items-center w-full`}
|
|
>
|
|
{this.computeRecommendedRelays().map((r) => {
|
|
return (
|
|
<li
|
|
class={`w-[80%] px-[1rem] py-[0.75rem] rounded-lg bg-[${DividerBackgroundColor}80] mb-[0.5rem] flex items-center justify-between cursor-pointer hover:bg-[${HoverButtonBackgroundColor}]`}
|
|
>
|
|
<div class={`flex items-center flex-1 overflow-hidden`}>
|
|
<span class={`truncate`}>{r}</span>
|
|
</div>
|
|
<button
|
|
class={`w-[2rem] h-[2rem] rounded-lg bg-transparent hover:bg-[${DividerBackgroundColor}] ${CenterClass} ${NoOutlineClass}`}
|
|
onClick={() => this.handleAddRelay(r)}
|
|
>
|
|
<AddIcon
|
|
class={`w-[1rem] h-[1rem]`}
|
|
style={{
|
|
stroke: ErrorColor,
|
|
}}
|
|
/>
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
}
|