jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-06-10 08:14:47 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refactor typescript wiring

Browse source
This commit is contained in:
seavor 2026-04-15 15:46:17 -05:00
parent cea9ae62d8
commit c62c336a11
286 changed files with 2999 additions and 3053 deletions
Download patch file Download diff file Expand all files Collapse all files

2
webclient/src/components/Card/Card.tsx
View file

@ -1,7 +1,7 @@
// eslint-disable-next-line
import React, { useMemo, useState } from 'react';
import { CardDTO } from 'services';
import { CardDTO } from '@app/services';
import './Card.css';

2
webclient/src/components/CardDetails/CardDetails.tsx
View file

@ -1,7 +1,7 @@
// eslint-disable-next-line
import React, { useMemo, useState } from 'react';
import { CardDTO } from 'services';
import { CardDTO } from '@app/services';
import Card from '../Card/Card';

8
webclient/src/components/CountryDropdown/CountryDropdown.tsx
View file

@ -4,9 +4,9 @@ import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import { useTranslation } from 'react-i18next';
import { useLocaleSort } from 'hooks';
import { Images } from 'images/Images';
import { countryCodes } from 'types';
import { useLocaleSort } from '@app/hooks';
import { Images } from '@app/images';
import { App } from '@app/types';
import './CountryDropdown.css';
@ -18,7 +18,7 @@ const CountryDropdown = ({ input: { onChange } }) => {
useEffect(() => onChange(value), [value]);
const translateCountry = country => t(`Common.countries.${country}`);
const sortedCountries = useLocaleSort(countryCodes, translateCountry);
const sortedCountries = useLocaleSort(App.countryCodes, translateCountry);
return (
<FormControl size='small' variant='outlined' className='CountryDropdown'>

10
webclient/src/components/Guard/AuthGuard.tsx
View file

@ -1,15 +1,15 @@
import React from 'react';
import { Navigate } from 'react-router-dom';
import { ServerSelectors } from 'store';
import { RouteEnum } from 'types';
import { useAppSelector } from 'store/store';
import { AuthenticationService } from 'api';
import { ServerSelectors } from '@app/store';
import { App } from '@app/types';
import { useAppSelector } from '@app/store';
import { AuthenticationService } from '@app/api';
const AuthGuard = () => {
const state = useAppSelector(s => ServerSelectors.getState(s));
return !AuthenticationService.isConnected(state)
? <Navigate to={RouteEnum.LOGIN} />
? <Navigate to={App.RouteEnum.LOGIN} />
: <div></div>;
};

10
webclient/src/components/Guard/ModGuard.tsx
View file

@ -1,15 +1,15 @@
import React from 'react';
import { Navigate } from 'react-router-dom';
import { ServerSelectors } from 'store';
import { AuthenticationService } from 'api';
import { RouteEnum } from 'types';
import { useAppSelector } from 'store/store';
import { ServerSelectors } from '@app/store';
import { AuthenticationService } from '@app/api';
import { App } from '@app/types';
import { useAppSelector } from '@app/store';
const ModGuard = () => {
const user = useAppSelector(state => ServerSelectors.getUser(state));
return !AuthenticationService.isModerator(user)
? <Navigate to={RouteEnum.SERVER} />
? <Navigate to={App.RouteEnum.SERVER} />
: <></>;
};

2
webclient/src/components/InputAction/InputAction.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { Field } from 'react-final-form'
import Button from '@mui/material/Button';
import { InputField } from 'components';
import { InputField } from '..';
import './InputAction.css';

74
webclient/src/components/KnownHosts/KnownHosts.tsx
View file

@ -13,13 +13,13 @@ import AddIcon from '@mui/icons-material/Add';
import EditRoundedIcon from '@mui/icons-material/Edit';
import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
import { AuthenticationService } from 'api';
import { KnownHostDialog } from 'dialogs';
import { useReduxEffect } from 'hooks';
import { HostDTO } from 'services';
import { ServerTypes } from 'store';
import { DefaultHosts, Host, getHostPort } from 'types';
import Toast from 'components/Toast/Toast';
import { AuthenticationService } from '@app/api';
import { KnownHostDialog } from '@app/dialogs';
import { useReduxEffect } from '@app/hooks';
import { HostDTO } from '@app/services';
import { ServerTypes } from '@app/store';
import { App } from '@app/types';
import Toast from '../Toast/Toast';
import './KnownHosts.css';
@ -86,7 +86,7 @@ const KnownHosts = (props) => {
if (!hosts?.length) {
// @TODO: find a better pattern to seeding default data in indexedDB
await HostDTO.bulkAdd(DefaultHosts);
await HostDTO.bulkAdd(App.DefaultHosts);
loadKnownHosts();
} else {
const selectedHost = hosts.find(({ lastSelected }) => lastSelected) || hosts[0];
@ -159,7 +159,7 @@ const KnownHosts = (props) => {
}));
setShowEditToast(true)
} else {
const newHost: Host = { name, host, port, editable: true };
const newHost: App.Host = { name, host, port, editable: true };
newHost.id = await HostDTO.add(newHost) as number;
setHostsState(s => ({
@ -196,7 +196,7 @@ const KnownHosts = (props) => {
const testConnection = () => {
setTestingConnection(TestConnection.TESTING);
const options = { ...getHostPort(hostsState.selectedHost) };
const options = { ...App.getHostPort(hostsState.selectedHost) };
AuthenticationService.testConnection(options);
}
@ -236,34 +236,38 @@ const KnownHosts = (props) => {
</Button>
{
hostsState.hosts.map((host, index) => (
<MenuItem value={host} key={index}>
<div className='KnownHosts-item'>
<div className='KnownHosts-item__wrapper'>
<div className={'KnownHosts-item__status ' + testingConnection}>
{
testingConnection === TestConnection.FAILED
? <PortableWifiOffIcon fontSize="small" />
: <WifiTetheringIcon fontSize="small" />
}
hostsState.hosts.map((host, index) => {
const hostPort = App.getHostPort(hostsState.hosts[index]);
return (
<MenuItem value={host} key={index}>
<div className='KnownHosts-item'>
<div className='KnownHosts-item__wrapper'>
<div className={'KnownHosts-item__status ' + testingConnection}>
{
testingConnection === TestConnection.FAILED
? <PortableWifiOffIcon fontSize="small" />
: <WifiTetheringIcon fontSize="small" />
}
</div>
<div className='KnownHosts-item__label'>
<Check />
<span>{host.name} ({ hostPort.host }:{hostPort.port})</span>
</div>
</div>
<div className='KnownHosts-item__label'>
<Check />
<span>{host.name} ({ getHostPort(hostsState.hosts[index]).host }:{getHostPort(hostsState.hosts[index]).port})</span>
</div>
{ host.editable && (
<IconButton className='KnownHosts-item__edit' size='small' color='primary' onClick={() => {
openEditKnownHostDialog(hostsState.hosts[index]);
}}>
<EditRoundedIcon fontSize='small' />
</IconButton>
) }
</div>
{ host.editable && (
<IconButton className='KnownHosts-item__edit' size='small' color='primary' onClick={() => {
openEditKnownHostDialog(hostsState.hosts[index]);
}}>
<EditRoundedIcon fontSize='small' />
</IconButton>
) }
</div>
</MenuItem>
))
</MenuItem>
);
})
}
</Select>
</FormControl>

14
webclient/src/components/LanguageDropdown/LanguageDropdown.tsx
View file

@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next';
import { Select, MenuItem } from '@mui/material';
import FormControl from '@mui/material/FormControl';
import { Images } from 'images/Images';
import { Language, LanguageCountry, LanguageNative } from 'types';
import { Images } from '@app/images';
import { App } from '@app/types';
import './LanguageDropdown.css';
@ -26,19 +26,19 @@ const LanguageDropdown = () => {
margin='dense'
value={language}
fullWidth={true}
onChange={e => setLanguage(e.target.value as Language)}
onChange={e => setLanguage(e.target.value as App.Language)}
>
{
Object.keys(Language).map((lang) => {
const country = LanguageCountry[lang];
Object.keys(App.Language).map((lang) => {
const country = App.LanguageCountry[lang];
return (
<MenuItem value={lang} key={lang}>
<div className="LanguageDropdown-item">
<img className="LanguageDropdown-item__image" src={Images.Countries[country]} />
<span className="LanguageDropdown-item__label">
{LanguageNative[lang]} {
LanguageNative[lang] !== t(`Common.languages.${lang}`) && (
{App.LanguageNative[lang]} {
App.LanguageNative[lang] !== t(`Common.languages.${lang}`) && (
<>({ t(`Common.languages.${lang}`) })</>
)
}

2
webclient/src/components/Message/CardCallout.tsx
View file

@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react';
import { styled } from '@mui/material/styles';
import Popover from '@mui/material/Popover';
import { CardDTO, TokenDTO } from 'services';
import { CardDTO, TokenDTO } from '@app/services';
import CardDetails from '../CardDetails/CardDetails';
import TokenDetails from '../TokenDetails/TokenDetails';

33
webclient/src/components/Message/Message.tsx
View file

@ -3,14 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { NavLink, generatePath } from 'react-router-dom';
import {
RouteEnum,
URL_REGEX,
MESSAGE_SENDER_REGEX,
MENTION_REGEX,
CARD_CALLOUT_REGEX,
CALLOUT_BOUNDARY_REGEX,
} from 'types';
import { App } from '@app/types';
import CardCallout from './CardCallout';
import './Message.css';
@ -28,7 +21,7 @@ const ParsedMessage = ({ message }) => {
const [name, setName] = useState(null);
useMemo(() => {
const name = message.match(MESSAGE_SENDER_REGEX);
const name = message.match(App.MESSAGE_SENDER_REGEX);
if (name) {
setName(name[1]);
@ -46,29 +39,29 @@ const ParsedMessage = ({ message }) => {
};
const PlayerLink = ({ name, label = name }) => (
<NavLink className="link" to={generatePath(RouteEnum.PLAYER, { name })}>
<NavLink className="link" to={generatePath(App.RouteEnum.PLAYER, { name })}>
{label}
</NavLink>
);
function parseMessage(message) {
return message.replace(MESSAGE_SENDER_REGEX, '')
.split(CARD_CALLOUT_REGEX)
return message.replace(App.MESSAGE_SENDER_REGEX, '')
.split(App.CARD_CALLOUT_REGEX)
.filter(chunk => !!chunk)
.map(parseChunks);
}
function parseChunks(chunk, index) {
if (chunk.match(CARD_CALLOUT_REGEX)) {
const name = chunk.replace(CALLOUT_BOUNDARY_REGEX, '').trim();
if (chunk.match(App.CARD_CALLOUT_REGEX)) {
const name = chunk.replace(App.CALLOUT_BOUNDARY_REGEX, '').trim();
return (<CardCallout name={name} key={index}></CardCallout>);
}
if (chunk.match(URL_REGEX)) {
if (chunk.match(App.URL_REGEX)) {
return parseUrlChunk(chunk);
}
if (chunk.match(MENTION_REGEX)) {
if (chunk.match(App.MENTION_REGEX)) {
return parseMentionChunk(chunk);
}
@ -76,10 +69,10 @@ function parseChunks(chunk, index) {
}
function parseUrlChunk(chunk) {
return chunk.split(URL_REGEX)
return chunk.split(App.URL_REGEX)
.filter(urlChunk => !!urlChunk)
.map((urlChunk, index) => {
if (urlChunk.match(URL_REGEX)) {
if (urlChunk.match(App.URL_REGEX)) {
return (<a className='link' href={urlChunk} key={index} target='_blank' rel='noopener noreferrer'>{urlChunk}</a>);
}
@ -88,10 +81,10 @@ function parseUrlChunk(chunk) {
}
function parseMentionChunk(chunk) {
return chunk.split(MENTION_REGEX)
return chunk.split(App.MENTION_REGEX)
.filter(mentionChunk => !!mentionChunk)
.map((mentionChunk, index) => {
const mention = mentionChunk.match(MENTION_REGEX);
const mention = mentionChunk.match(App.MENTION_REGEX);
if (mention) {
const name = mention[0].substr(1);

2
webclient/src/components/Token/Token.tsx
View file

@ -1,7 +1,7 @@
// eslint-disable-next-line
import React, { useMemo, useState } from 'react';
import { TokenDTO } from 'services';
import { TokenDTO } from '@app/services';
import './Token.css';

2
webclient/src/components/TokenDetails/TokenDetails.tsx
View file

@ -1,7 +1,7 @@
// eslint-disable-next-line
import React, { useMemo, useState } from 'react';
import { TokenDTO } from 'services';
import { TokenDTO } from '@app/services';
import Token from '../Token/Token';

17
webclient/src/components/UserDisplay/UserDisplay.tsx
View file

@ -5,12 +5,11 @@ import { NavLink, generatePath } from 'react-router-dom';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { Images } from 'images/Images';
import { SessionService } from 'api';
import { ServerSelectors } from 'store';
import { RouteEnum } from 'types';
import type { ServerInfo_User } from 'generated/proto/serverinfo_user_pb';
import { useAppSelector } from 'store/store';
import { Images } from '@app/images';
import { SessionService } from '@app/api';
import { ServerSelectors } from '@app/store';
import { App, Data } from '@app/types';
import { useAppSelector } from '@app/store';
import './UserDisplay.css';
@ -51,7 +50,7 @@ const UserDisplay = ({ user }: UserDisplayProps) => {
return (
<div className="user-display">
<NavLink to={generatePath(RouteEnum.PLAYER, { name })} className="plain-link">
<NavLink to={generatePath(App.RouteEnum.PLAYER, { name })} className="plain-link">
<div className="user-display__details" onContextMenu={handleClick}>
<img className="user-display__country" src={Images.Countries[country]} alt={country}></img>
<div className="user-display__name single-line-ellipsis">{name}</div>
@ -68,7 +67,7 @@ const UserDisplay = ({ user }: UserDisplayProps) => {
: undefined
}
>
<NavLink to={generatePath(RouteEnum.PLAYER, { name })} className="user-display__link plain-link">
<NavLink to={generatePath(App.RouteEnum.PLAYER, { name })} className="user-display__link plain-link">
<MenuItem dense>Chat</MenuItem>
</NavLink>
{
@ -88,7 +87,7 @@ const UserDisplay = ({ user }: UserDisplayProps) => {
};
interface UserDisplayProps {
user: ServerInfo_User;
user: Data.ServerInfo_User;
}
export default UserDisplay;

3
webclient/src/components/index.ts
View file

@ -17,3 +17,6 @@ export { default as ScrollToBottomOnChanges } from './ScrollToBottomOnChanges/Sc
// Guards
export { default as AuthGuard } from './Guard/AuthGuard';
export { default as ModGuard } from './Guard/ModGuard';
// Toast
export { default as Toast, useToast, ToastProvider } from './Toast';