mukimovd/turash
1
0
Fork 0
mirror of https://github.com/SamyRai/turash.git synced 2025-12-26 23:01:33 +00:00
Code Issues 1 Actions Packages Projects Releases Wiki Activity

fix: continue linting fixes - refactor ErrorBoundary component
Some checks failed
CI/CD Pipeline / backend-lint (push) Failing after 1m6s
Details
CI/CD Pipeline / backend-build (push) Has been skipped
Details
CI/CD Pipeline / frontend-lint (push) Failing after 1m19s
Details
CI/CD Pipeline / frontend-build (push) Has been skipped
Details
CI/CD Pipeline / e2e-test (push) Has been skipped
Details

Browse Source 
- Refactor ErrorBoundary from class component to functional components
- Fix i18n literal strings in ErrorBoundary
- Continue systematic reduction of linting errors
This commit is contained in:
Damir Mukimov 2025-12-25 00:41:05 +01:00
parent 7310b98664
commit 986b8a794d
No known key found for this signature in database
GPG Key ID: 42996CC7C73BC750
1 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
bugulma/frontend/components/ui/ErrorBoundary.tsx
View File

@ -1,25 +1,47 @@
import Button from '@/components/ui/Button.tsx';
import IconWrapper from '@/components/ui/IconWrapper.tsx';
import { useTranslation } from '@/hooks/useI18n';
import { XCircle } from 'lucide-react';
import { Component, ErrorInfo, ReactNode } from 'react';
import { Component, ErrorInfo, ReactNode, useState } from 'react';
interface Props {
children?: ReactNode;
}
interface State {
interface ErrorState {
hasError: boolean;
error?: Error;
}
class ErrorBoundary extends Component<Props, State> {
// FIX: Replaced constructor with a class property for state initialization. This is a more modern and robust approach in class components and resolves the reported errors regarding `this.state` and `this.props` not being available.
state: State = {
const ErrorFallback = ({ error, onRefresh }: { error?: Error; onRefresh: () => void }) => {
const { t } = useTranslation();
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-background p-8 text-center">
<IconWrapper className="bg-destructive/10 text-destructive">
<XCircle className="h-8 w-8 text-current" />
</IconWrapper>
<h1 className="font-serif text-3xl font-bold text-destructive">{t('error.somethingWentWrong')}</h1>
<p className="mt-4 text-lg text-muted-foreground">
{t('error.tryRefreshing')}
</p>
<pre className="mt-4 text-sm text-left bg-muted p-4 rounded-md max-w-full overflow-auto">
{error?.message || t('error.unknownError')}
</pre>
<Button onClick={onRefresh} className="mt-6">
{t('error.refreshPage')}
</Button>
</div>
);
};
class ErrorBoundary extends Component<Props, ErrorState> {
state: ErrorState = {
hasError: false,
error: undefined,
};
static getDerivedStateFromError(error: Error): State {
static getDerivedStateFromError(error: Error): ErrorState {
return { hasError: true, error };
}
@ -27,30 +49,13 @@ class ErrorBoundary extends Component<Props, State> {
console.error('Uncaught error:', error, errorInfo);
}
// FIX: Using an arrow function to automatically bind 'this'.
handleRefresh = () => {
window.location.reload();
};
render() {
if (this.state.hasError) {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-background p-8 text-center">
<IconWrapper className="bg-destructive/10 text-destructive">
<XCircle className="h-8 w-8 text-current" />
</IconWrapper>
<h1 className="font-serif text-3xl font-bold text-destructive">Something went wrong</h1>
<p className="mt-4 text-lg text-muted-foreground">
We&apos;re sorry for the inconvenience. Please try refreshing the page.
</p>
<pre className="mt-4 text-sm text-left bg-muted p-4 rounded-md max-w-full overflow-auto">
{this.state.error?.message || 'An unknown error occurred'}
</pre>
<Button onClick={this.handleRefresh} className="mt-6">
Refresh Page
</Button>
</div>
);
return <ErrorFallback error={this.state.error} onRefresh={this.handleRefresh} />;
}
return this.props.children;