314 lines
9.5 KiB
TypeScript
314 lines
9.5 KiB
TypeScript
/*
|
|
* Copyright (C) 2026 Fluxer Contributors
|
|
*
|
|
* This file is part of Fluxer.
|
|
*
|
|
* Fluxer is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Fluxer is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import styles from '@app/components/auth/InstanceSelector.module.css';
|
|
import {Input} from '@app/components/form/Input';
|
|
import {Button} from '@app/components/uikit/button/Button';
|
|
import {Spinner} from '@app/components/uikit/Spinner';
|
|
import AppStorage from '@app/lib/AppStorage';
|
|
import RuntimeConfigStore from '@app/stores/RuntimeConfigStore';
|
|
import {Trans, useLingui} from '@lingui/react/macro';
|
|
import {CaretDownIcon, CheckCircleIcon, GlobeIcon, TrashIcon, WarningCircleIcon} from '@phosphor-icons/react';
|
|
import {clsx} from 'clsx';
|
|
import {observer} from 'mobx-react-lite';
|
|
import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
|
|
|
|
const RECENT_INSTANCES_KEY = 'federation_recent_instances';
|
|
const MAX_RECENT_INSTANCES = 5;
|
|
|
|
export type InstanceDiscoveryStatus = 'idle' | 'discovering' | 'success' | 'error';
|
|
|
|
export interface InstanceInfo {
|
|
domain: string;
|
|
name?: string;
|
|
lastUsed: number;
|
|
}
|
|
|
|
interface InstanceSelectorProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
onInstanceDiscovered?: (domain: string) => void;
|
|
onDiscoveryStatusChange?: (status: InstanceDiscoveryStatus) => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
function loadRecentInstances(): Array<InstanceInfo> {
|
|
const stored = AppStorage.getJSON<Array<InstanceInfo>>(RECENT_INSTANCES_KEY);
|
|
if (!stored || !Array.isArray(stored)) {
|
|
return [];
|
|
}
|
|
return stored.sort((a, b) => b.lastUsed - a.lastUsed).slice(0, MAX_RECENT_INSTANCES);
|
|
}
|
|
|
|
function saveRecentInstance(domain: string, name?: string): void {
|
|
const recent = loadRecentInstances();
|
|
const normalizedDomain = domain.toLowerCase().trim();
|
|
|
|
const existingIndex = recent.findIndex((inst) => inst.domain.toLowerCase() === normalizedDomain);
|
|
if (existingIndex !== -1) {
|
|
recent.splice(existingIndex, 1);
|
|
}
|
|
|
|
recent.unshift({
|
|
domain: normalizedDomain,
|
|
name,
|
|
lastUsed: Date.now(),
|
|
});
|
|
|
|
AppStorage.setJSON(RECENT_INSTANCES_KEY, recent.slice(0, MAX_RECENT_INSTANCES));
|
|
}
|
|
|
|
function removeRecentInstance(domain: string): void {
|
|
const recent = loadRecentInstances();
|
|
const normalizedDomain = domain.toLowerCase().trim();
|
|
const filtered = recent.filter((inst) => inst.domain.toLowerCase() !== normalizedDomain);
|
|
AppStorage.setJSON(RECENT_INSTANCES_KEY, filtered);
|
|
}
|
|
|
|
export const InstanceSelector = observer(function InstanceSelector({
|
|
value,
|
|
onChange,
|
|
onInstanceDiscovered,
|
|
onDiscoveryStatusChange,
|
|
disabled = false,
|
|
className,
|
|
}: InstanceSelectorProps) {
|
|
const {t} = useLingui();
|
|
const [discoveryStatus, setDiscoveryStatus] = useState<InstanceDiscoveryStatus>('idle');
|
|
const [discoveryError, setDiscoveryError] = useState<string | null>(null);
|
|
const [recentInstances, setRecentInstances] = useState<Array<InstanceInfo>>(() => loadRecentInstances());
|
|
const [showDropdown, setShowDropdown] = useState(false);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
const discoveryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
const updateDiscoveryStatus = useCallback(
|
|
(status: InstanceDiscoveryStatus) => {
|
|
setDiscoveryStatus(status);
|
|
onDiscoveryStatusChange?.(status);
|
|
},
|
|
[onDiscoveryStatusChange],
|
|
);
|
|
|
|
const discoverInstance = useCallback(
|
|
async (instanceUrl: string) => {
|
|
if (!instanceUrl.trim()) {
|
|
updateDiscoveryStatus('idle');
|
|
setDiscoveryError(null);
|
|
return;
|
|
}
|
|
|
|
updateDiscoveryStatus('discovering');
|
|
setDiscoveryError(null);
|
|
|
|
try {
|
|
await RuntimeConfigStore.connectToEndpoint(instanceUrl);
|
|
updateDiscoveryStatus('success');
|
|
saveRecentInstance(instanceUrl);
|
|
setRecentInstances(loadRecentInstances());
|
|
onInstanceDiscovered?.(instanceUrl);
|
|
} catch (error) {
|
|
updateDiscoveryStatus('error');
|
|
const errorMessage = error instanceof Error ? error.message : t`Failed to connect to instance`;
|
|
setDiscoveryError(errorMessage);
|
|
}
|
|
},
|
|
[onInstanceDiscovered, updateDiscoveryStatus, t],
|
|
);
|
|
|
|
const handleInputChange = useCallback(
|
|
(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newValue = event.target.value;
|
|
onChange(newValue);
|
|
updateDiscoveryStatus('idle');
|
|
setDiscoveryError(null);
|
|
|
|
if (discoveryTimeoutRef.current) {
|
|
clearTimeout(discoveryTimeoutRef.current);
|
|
}
|
|
|
|
if (newValue.trim()) {
|
|
discoveryTimeoutRef.current = setTimeout(() => {
|
|
discoverInstance(newValue);
|
|
}, 800);
|
|
}
|
|
},
|
|
[onChange, discoverInstance, updateDiscoveryStatus],
|
|
);
|
|
|
|
const handleSelectRecent = useCallback(
|
|
(instance: InstanceInfo) => {
|
|
onChange(instance.domain);
|
|
setShowDropdown(false);
|
|
discoverInstance(instance.domain);
|
|
},
|
|
[onChange, discoverInstance],
|
|
);
|
|
|
|
const handleRemoveRecent = useCallback((event: React.MouseEvent, domain: string) => {
|
|
event.stopPropagation();
|
|
removeRecentInstance(domain);
|
|
setRecentInstances(loadRecentInstances());
|
|
}, []);
|
|
|
|
const handleConnectClick = useCallback(() => {
|
|
if (value.trim()) {
|
|
discoverInstance(value);
|
|
}
|
|
}, [value, discoverInstance]);
|
|
|
|
const handleDropdownToggle = useCallback(() => {
|
|
if (recentInstances.length > 0 && !disabled) {
|
|
setShowDropdown((prev) => !prev);
|
|
}
|
|
}, [recentInstances.length, disabled]);
|
|
|
|
const handleInputFocus = useCallback(() => {
|
|
if (recentInstances.length > 0 && !value.trim()) {
|
|
setShowDropdown(true);
|
|
}
|
|
}, [recentInstances.length, value]);
|
|
|
|
useEffect(() => {
|
|
function handleClickOutside(event: MouseEvent) {
|
|
if (
|
|
dropdownRef.current &&
|
|
!dropdownRef.current.contains(event.target as Node) &&
|
|
inputRef.current &&
|
|
!inputRef.current.contains(event.target as Node)
|
|
) {
|
|
setShowDropdown(false);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (discoveryTimeoutRef.current) {
|
|
clearTimeout(discoveryTimeoutRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const statusIcon = useMemo(() => {
|
|
if (discoveryStatus === 'discovering') {
|
|
return <Spinner size="small" className={styles.statusSpinner} />;
|
|
}
|
|
if (discoveryStatus === 'success') {
|
|
return <CheckCircleIcon weight="fill" className={styles.statusSuccess} size={18} />;
|
|
}
|
|
if (discoveryStatus === 'error') {
|
|
return <WarningCircleIcon weight="fill" className={styles.statusError} size={18} />;
|
|
}
|
|
return null;
|
|
}, [discoveryStatus]);
|
|
|
|
const placeholder = t`Enter instance URL (e.g. fluxer.app)`;
|
|
|
|
return (
|
|
<div className={clsx(styles.container, className)}>
|
|
<div className={styles.inputContainer}>
|
|
<Input
|
|
ref={inputRef}
|
|
value={value}
|
|
onChange={handleInputChange}
|
|
onFocus={handleInputFocus}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
leftIcon={<GlobeIcon size={18} weight="regular" />}
|
|
rightElement={
|
|
<div className={styles.inputActions}>
|
|
{statusIcon}
|
|
{recentInstances.length > 0 && (
|
|
<button
|
|
type="button"
|
|
className={styles.dropdownToggle}
|
|
onClick={handleDropdownToggle}
|
|
disabled={disabled}
|
|
aria-label={t`Show recent instances`}
|
|
>
|
|
<CaretDownIcon
|
|
size={16}
|
|
weight="bold"
|
|
className={clsx(styles.caretIcon, showDropdown && styles.caretIconOpen)}
|
|
/>
|
|
</button>
|
|
)}
|
|
</div>
|
|
}
|
|
aria-label={t`Instance URL`}
|
|
aria-describedby={discoveryError ? 'instance-error' : undefined}
|
|
/>
|
|
|
|
{showDropdown && recentInstances.length > 0 && (
|
|
<div ref={dropdownRef} className={styles.dropdown}>
|
|
<div className={styles.dropdownHeader}>
|
|
<Trans>Recent instances</Trans>
|
|
</div>
|
|
<ul className={styles.dropdownList}>
|
|
{recentInstances.map((instance) => (
|
|
<li key={instance.domain}>
|
|
<button type="button" className={styles.dropdownItem} onClick={() => handleSelectRecent(instance)}>
|
|
<GlobeIcon size={16} weight="regular" className={styles.instanceIcon} />
|
|
<span className={styles.instanceDomain}>{instance.domain}</span>
|
|
{instance.name && <span className={styles.instanceName}>{instance.name}</span>}
|
|
<button
|
|
type="button"
|
|
className={styles.removeButton}
|
|
onClick={(e) => handleRemoveRecent(e, instance.domain)}
|
|
aria-label={t`Remove ${instance.domain} from recent instances`}
|
|
>
|
|
<TrashIcon size={14} weight="regular" />
|
|
</button>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{discoveryError && (
|
|
<div id="instance-error" className={styles.errorMessage}>
|
|
{discoveryError}
|
|
</div>
|
|
)}
|
|
|
|
{discoveryStatus !== 'success' && value.trim() && (
|
|
<Button
|
|
onClick={handleConnectClick}
|
|
disabled={disabled}
|
|
submitting={discoveryStatus === 'discovering'}
|
|
variant="secondary"
|
|
small
|
|
className={styles.connectButton}
|
|
>
|
|
<Trans>Connect</Trans>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|