Skip to content

Commit ed620ab

Browse files
AlisherAmonulloevAlisherAmonulloev
committed
fix lint in react
1 parent 7d5ccf9 commit ed620ab

File tree

8 files changed

+167
-162
lines changed

8 files changed

+167
-162
lines changed

‎React/src/App.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
width: 90vw;
44
}
55

6-
.uploadedImage {
6+
.uploaded-image {
77
max-width: 100px;
88
max-height: 100px;
99
border: 1px solid #ddd;
@@ -12,11 +12,11 @@
1212
display: block;
1313
}
1414

15-
.retryButton {
15+
.retry-button {
1616
margin-top: 10px;
1717
}
1818

19-
.dx-datagrid-edit-form .uploadedImage {
19+
.dx-datagrid-edit-form .uploaded-image {
2020
max-width: 150px;
2121
max-height: 150px;
2222
}

‎React/src/App.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { useState, useCallback } from 'react';
22
import DataGrid, { type DataGridTypes } from 'devextreme-react/data-grid';
3-
import { Column, Editing, Popup, Form } from 'devextreme-react/data-grid';
3+
import {
4+
Column, Editing, Popup, Form,
5+
} from 'devextreme-react/data-grid';
46
import { Item } from 'devextreme-react/form';
57
import { useEvent } from './utils';
68
import { cellRender, FileUploaderEditor } from './FileUploaderEditor';
@@ -10,27 +12,27 @@ import './App.css';
1012
function App(): JSX.Element {
1113
const [retryButtonVisible, setRetryButtonVisible] = useState<boolean>(false);
1214

13-
const onEditCanceled = useEvent((_e: DataGridTypes.EditCanceledEvent<Employee, number>): void => {
15+
const onEditCanceled = useEvent((): void => {
1416
if (retryButtonVisible) {
1517
setRetryButtonVisible(false);
1618
}
1719
});
1820

19-
const onSaved = useEvent((_e: DataGridTypes.SavedEvent<Employee, number>): void => {
21+
const onSaved = useEvent((): void => {
2022
if (retryButtonVisible) {
2123
setRetryButtonVisible(false);
2224
}
2325
});
2426

2527
const editCellRender = useCallback(
2628
(cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>): JSX.Element => (
27-
<FileUploaderEditor
28-
cellInfo={cellInfo}
29-
retryButtonVisible={retryButtonVisible}
30-
setRetryButtonVisible={setRetryButtonVisible}
29+
<FileUploaderEditor
30+
cellInfo={cellInfo}
31+
retryButtonVisible={retryButtonVisible}
32+
setRetryButtonVisible={setRetryButtonVisible}
3133
/>
3234
),
33-
[retryButtonVisible]
35+
[retryButtonVisible],
3436
);
3537

3638
return (

‎React/src/FileUploaderEditor.tsx‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,57 @@
1-
import React, { useRef, useCallback, type Dispatch, type SetStateAction } from "react";
2-
import { type FileUploaderRef } from "devextreme-react/file-uploader";
3-
import Button from "devextreme-react/button";
4-
import { FileUploaderWithPreview } from "./FileUploaderWithPreview";
5-
import { backendURL } from "./constants";
6-
import type { DataGridTypes } from "devextreme-react/data-grid";
7-
import type { Employee } from "./data";
1+
import React, {
2+
useRef, useCallback, type Dispatch, type SetStateAction,
3+
} from 'react';
4+
import { type FileUploaderRef } from 'devextreme-react/file-uploader';
5+
import Button from 'devextreme-react/button';
6+
import type { DataGridTypes } from 'devextreme-react/data-grid';
7+
import { FileUploaderWithPreview } from './FileUploaderWithPreview';
8+
import { backendURL } from './constants';
9+
import type { Employee } from './data';
810

911
interface FileUploaderEditorProps {
1012
cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>;
1113
setRetryButtonVisible: Dispatch<SetStateAction<boolean>>;
1214
retryButtonVisible: boolean;
1315
}
1416

15-
export const cellRender = (data: DataGridTypes.ColumnCellTemplateData<Employee, number>): JSX.Element => {
16-
return <img src={backendURL + data.value} alt="employee pic" style={{ maxWidth: '100%', height: 'auto' }} />;
17-
};
17+
export function cellRender(data: DataGridTypes.ColumnCellTemplateData<Employee, number>): JSX.Element {
18+
return <img src={`${backendURL}${data.value as string}`} alt="employee pic" style={{ maxWidth: '100%', height: 'auto' }} />;
19+
}
1820

19-
export const FileUploaderEditor = React.memo<FileUploaderEditorProps>(({
20-
cellInfo,
21-
setRetryButtonVisible,
22-
retryButtonVisible
21+
export const FileUploaderEditor = React.memo<FileUploaderEditorProps>(({
22+
cellInfo,
23+
setRetryButtonVisible,
24+
retryButtonVisible,
2325
}) => {
2426
const fileUploaderRef = useRef<FileUploaderRef>(null);
25-
27+
2628
const onClick = useCallback((): void => {
2729
// The retry UI/API is not implemented. Use a private API as shown at T611719.
2830
const fileUploaderInstance = fileUploaderRef.current?.instance();
2931
if (fileUploaderInstance) {
3032
// @ts-expect-error: Accessing private API for retry functionality
31-
for (let i = 0; i < fileUploaderInstance._files.length; i++) {
32-
// @ts-expect-error: Accessing private API for retry functionality
33-
delete fileUploaderInstance._files[i].uploadStarted;
33+
for (const file of fileUploaderInstance._files) {
34+
delete file.uploadStarted;
3435
}
3536
fileUploaderInstance.upload();
3637
}
3738
}, []);
3839

3940
return (
40-
<>
41-
<FileUploaderWithPreview
42-
setRetryButtonVisible={setRetryButtonVisible}
43-
cellInfo={cellInfo}
44-
fileUploaderRef={fileUploaderRef}
41+
<React.Fragment>
42+
<FileUploaderWithPreview
43+
setRetryButtonVisible={setRetryButtonVisible}
44+
cellInfo={cellInfo}
45+
fileUploaderRef={fileUploaderRef}
4546
/>
46-
<Button
47-
className="retryButton"
48-
text="Retry"
49-
visible={retryButtonVisible}
50-
onClick={onClick}
47+
<Button
48+
className="retry-button"
49+
text="Retry"
50+
visible={retryButtonVisible}
51+
onClick={onClick}
5152
/>
52-
</>
53+
</React.Fragment>
5354
);
5455
});
5556

56-
FileUploaderEditor.displayName = 'FileUploaderEditor';
57+
FileUploaderEditor.displayName = 'FileUploaderEditor';

‎React/src/FileUploaderWithPreview.tsx‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,77 @@
1-
import { useRef, type Dispatch, type SetStateAction, type RefObject, memo } from "react";
2-
import FileUploader, { type FileUploaderRef } from "devextreme-react/file-uploader";
3-
import { useEvent } from "./utils";
4-
import { backendURL } from "./constants";
5-
import type { FileUploaderTypes } from "devextreme-react/file-uploader";
6-
import type { DataGridTypes } from "devextreme-react/data-grid";
7-
import type { Employee } from "./data";
1+
import React, {
2+
useRef, type Dispatch, type SetStateAction, type RefObject, memo,
3+
} from 'react';
4+
import FileUploader, { type FileUploaderRef, type FileUploaderTypes } from 'devextreme-react/file-uploader';
5+
import type { DataGridTypes } from 'devextreme-react/data-grid';
6+
import { useEvent } from './utils';
7+
import { backendURL } from './constants';
8+
import type { Employee } from './data';
89

910
interface FileUploaderPreviewProps {
1011
cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>;
1112
setRetryButtonVisible: Dispatch<SetStateAction<boolean>>;
1213
fileUploaderRef: RefObject<FileUploaderRef>;
1314
}
1415

15-
export const FileUploaderWithPreview = memo<FileUploaderPreviewProps>(({
16-
setRetryButtonVisible,
17-
cellInfo,
18-
fileUploaderRef
16+
export const FileUploaderWithPreview = memo<FileUploaderPreviewProps>(({
17+
setRetryButtonVisible,
18+
cellInfo,
19+
fileUploaderRef,
1920
}) => {
2021
const imgRef = useRef<HTMLImageElement>(null);
21-
22+
2223
const onValueChanged = useEvent((e: FileUploaderTypes.ValueChangedEvent): void => {
2324
const files = e.value;
2425
if (files && files.length > 0) {
2526
const reader = new FileReader();
26-
reader.onload = function (args) {
27+
reader.onload = (args): void => {
2728
if (typeof args.target?.result === 'string' && imgRef.current) {
2829
imgRef.current.setAttribute('src', args.target.result);
2930
}
3031
};
31-
reader.readAsDataURL(files[0]); // convert to base64 string
32+
reader.readAsDataURL(files[0]); // convert to base64 string
3233
}
3334
});
3435

3536
const onUploaded = useEvent((e: FileUploaderTypes.UploadedEvent): void => {
3637
if (e.request?.responseText) {
37-
cellInfo.setValue("images/employees/" + e.request.responseText);
38+
cellInfo.setValue(`images/employees/${e.request.responseText}`);
3839
setRetryButtonVisible(false);
3940
}
4041
});
4142

4243
const onUploadError = useEvent((e: FileUploaderTypes.UploadErrorEvent): void => {
4344
const xhttp = e.request;
4445
if (xhttp && xhttp.status === 400) {
45-
e.message = e.error?.responseText || "Upload error";
46+
e.message = e.error?.responseText || 'Upload error';
4647
}
4748
if (xhttp && xhttp.readyState === 4 && xhttp.status === 0) {
48-
e.message = "Connection refused";
49+
e.message = 'Connection refused';
4950
}
5051
setRetryButtonVisible(true);
5152
});
5253

5354
return (
54-
<>
55-
<img
56-
ref={imgRef}
57-
className="uploadedImage"
58-
src={`${backendURL}${cellInfo.value}`}
59-
alt="employee pic"
55+
<React.Fragment>
56+
<img
57+
ref={imgRef}
58+
className="uploaded-image"
59+
src={`${backendURL}${cellInfo.value}`}
60+
alt="employee pic"
6061
style={{ maxWidth: '100%', height: 'auto', marginBottom: '10px' }}
6162
/>
62-
<FileUploader
63-
ref={fileUploaderRef}
64-
multiple={false}
65-
accept="image/*"
63+
<FileUploader
64+
ref={fileUploaderRef}
65+
multiple={false}
66+
accept="image/*"
6667
uploadMode="instantly"
67-
uploadUrl={backendURL + "FileUpload/post"}
68+
uploadUrl={`${backendURL}FileUpload/post`}
6869
onValueChanged={onValueChanged}
69-
onUploaded={onUploaded}
70-
onUploadError={onUploadError}
70+
onUploaded={onUploaded}
71+
onUploadError={onUploadError}
7172
/>
72-
</>
73+
</React.Fragment>
7374
);
7475
});
7576

76-
FileUploaderWithPreview.displayName = 'FileUploaderWithPreview';
77+
FileUploaderWithPreview.displayName = 'FileUploaderWithPreview';

‎React/src/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const backendURL = "http://localhost:5020/";
1+
export const backendURL = 'http://localhost:5020/';

0 commit comments

Comments
 (0)