strimertul/frontend/src/ui/components/TwitchUserBlock.tsx

import { GetTwitchLoggedUser } from '@wailsapp/go/main/App';
import { helix } from '@wailsapp/go/models';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAppSelector } from '~/store';
import { TextBlock, styled } from '../theme';

interface SyncError {
  ok: false;
  error: string;
}

const TwitchUser = styled('div', {
  display: 'flex',
  gap: '0.8rem',
  alignItems: 'center',
  fontSize: '14pt',
  fontWeight: '300',
});
const TwitchPic = styled('img', {
  width: '48px',
  borderRadius: '50%',
});
const TwitchName = styled('p', { fontWeight: 'bold' });

interface TwitchUserBlockProps {
  authKey: string;
  noUserMessage: string;
}

export default function TwitchUserBlock({
  authKey,
  noUserMessage,
}: TwitchUserBlockProps) {
  const { t } = useTranslation();
  const [user, setUser] = useState<helix.User | SyncError>(null);
  const kv = useAppSelector((state) => state.api.client);

  const getUserInfo = async () => {
    try {
      const res = await GetTwitchLoggedUser(authKey);
      setUser(res);
    } catch (e) {
      setUser({ ok: false, error: (e as Error).message });
    }
  };

  useEffect(() => {
    // Get user info
    void getUserInfo();

    const onKeyChange = () => {
      void getUserInfo();
    };
    void kv.subscribeKey(authKey, onKeyChange);
    return () => {
      void kv.unsubscribeKey(authKey, onKeyChange);
    };
  }, []);

  if (user !== null) {
    if ('id' in user) {
      return (
        <TwitchUser>
          <TextBlock>
            {t('pages.twitch-settings.events.authenticated-as')}
          </TextBlock>
          <TwitchPic
            src={user.profile_image_url}
            alt={t('pages.twitch-settings.events.profile-picture')}
          />
          <TwitchName>{user.display_name}</TwitchName>
        </TwitchUser>
      );
    }
    return <span>{noUserMessage}</span>;
  }

  return <i>{t('pages.twitch-settings.events.loading-data')}</i>;
}