86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import { usePrivateKeyHash } from "@/app/providers/AccountProvider/usePrivateKeyHash";
|
|
import { PacketSearch, PacketSearchUser } from "@/app/providers/ProtocolProvider/protocol/packets/packet.search";
|
|
import { usePacket } from "@/app/providers/ProtocolProvider/usePacket";
|
|
import { useSender } from "@/app/providers/ProtocolProvider/useSender";
|
|
import { Anchor } from "@mantine/core";
|
|
import { useState } from "react";
|
|
import classes from './UserMention.module.css';
|
|
import { cx } from "@/app/utils/style";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export interface UserMentionProps {
|
|
username: string;
|
|
color?: string;
|
|
}
|
|
|
|
export function UserMention(props : UserMentionProps) {
|
|
const send = useSender();
|
|
const privateKey = usePrivateKeyHash();
|
|
const [loading, setLoading] = useState(false);
|
|
const [fail, setFail] = useState(false);
|
|
const [vibrate, setVibrate] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
usePacket(0x03, (packet: PacketSearch) => {
|
|
if(!loading){
|
|
return;
|
|
}
|
|
if(fail){
|
|
vibrateCall();
|
|
return;
|
|
}
|
|
setLoading(false);
|
|
let users = packet.getUsers();
|
|
if(users.length <= 0){
|
|
vibrateCall();
|
|
setFail(true);
|
|
return;
|
|
}
|
|
const user = findMatchuser(users);
|
|
if(!user){
|
|
vibrateCall();
|
|
setFail(true);
|
|
return;
|
|
}
|
|
navigate(`/main/chat/${user.publicKey}`);
|
|
}, [props.username, loading, fail]);
|
|
|
|
const findMatchuser = (users: PacketSearchUser[]) => {
|
|
for(let user of users){
|
|
if(user.username === props.username.replace('@', '')){
|
|
return user;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
const onClick = () => {
|
|
if(fail){
|
|
vibrateCall();
|
|
return;
|
|
}
|
|
let packet = new PacketSearch();
|
|
packet.setSearch(props.username.replace('@', ''));
|
|
packet.setPrivateKey(privateKey);
|
|
send(packet);
|
|
setLoading(true);
|
|
}
|
|
|
|
const vibrateCall = () => {
|
|
if(vibrate){
|
|
return;
|
|
}
|
|
setVibrate(true);
|
|
setTimeout(() => {
|
|
setVibrate(false);
|
|
}, 300);
|
|
}
|
|
|
|
return (
|
|
<Anchor className={cx(
|
|
classes.mention,
|
|
loading && classes.skeleton,
|
|
vibrate && classes.fail_vibrate
|
|
)} onClick={onClick} c={props.color} size="sm">{props.username}</Anchor>
|
|
);
|
|
} |