Skip to content

Commit f86b850

Browse files
AlisherAmonulloevAlisherAmonulloev
committed
Fix React lint issues
1 parent 6a33211 commit f86b850

File tree

10 files changed

+79
-74
lines changed

10 files changed

+79
-74
lines changed

‎React/src/components/change-password-form/ChangePasswordForm.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import notify from 'devextreme/ui/notify';
1313

1414
import { changePassword } from '../../api/auth';
1515

16+
const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
17+
const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };
18+
1619
export default function ChangePasswordForm(): JSX.Element {
1720
const navigate = useNavigate();
1821
const [loading, setLoading] = useState(false);
@@ -83,6 +86,3 @@ export default function ChangePasswordForm(): JSX.Element {
8386
</form>
8487
);
8588
}
86-
87-
const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
88-
const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

‎React/src/components/create-account-form/CreateAccountForm.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ import { createAccount } from '../../api/auth';
1515

1616
import './CreateAccountForm.scss';
1717

18+
const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
19+
const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
20+
const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };
21+
1822
export default function CreateAccountForm(): JSX.Element {
1923
const navigate = useNavigate();
2024
const [loading, setLoading] = useState(false);
@@ -106,6 +110,3 @@ export default function CreateAccountForm(): JSX.Element {
106110
);
107111
}
108112

109-
const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
110-
const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
111-
const confirmedPasswordEditorOptions = { stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' };

‎React/src/components/login-form/LoginForm.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ import { useAuth } from '../../contexts/auth';
1414

1515
import './LoginForm.scss';
1616

17+
const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
18+
const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
19+
const rememberMeEditorOptions = { text: 'Remember me', elementAttr: { class: 'form-text' } };
20+
1721
export default function LoginForm(): JSX.Element {
1822
const navigate = useNavigate();
1923
const { signIn } = useAuth();
@@ -99,6 +103,3 @@ export default function LoginForm(): JSX.Element {
99103
);
100104
}
101105

102-
const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
103-
const passwordEditorOptions = { stylingMode: 'filled', placeholder: 'Password', mode: 'password' };
104-
const rememberMeEditorOptions = { text: 'Remember me', elementAttr: { class: 'form-text' } };

‎React/src/components/reset-password-form/ResetPasswordForm.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import { resetPassword } from '../../api/auth';
1414
import './ResetPasswordForm.scss';
1515

1616
const notificationText = 'We\'ve sent a link to reset your password. Check your inbox.';
17+
const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
18+
const submitButtonAttributes = { class: 'submit-button' };
1719

1820
export default function ResetPasswordForm(): JSX.Element {
1921
const navigate = useNavigate();
@@ -78,5 +80,3 @@ export default function ResetPasswordForm(): JSX.Element {
7880
);
7981
}
8082

81-
const emailEditorOptions = { stylingMode: 'filled', placeholder: 'Email', mode: 'email' };
82-
const submitButtonAttributes = { class: 'submit-button' };

‎React/src/contexts/auth.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ import React, {
99
import { getUser, signIn as sendSignInRequest, type AuthResponse } from '../api/auth';
1010
import type { UserData, AuthContextType } from '../types';
1111

12+
const AuthContext = createContext<AuthContextType>({
13+
loading: false,
14+
signIn: () => Promise.resolve({ isOk: false }),
15+
signOut: () => {},
16+
});
17+
1218
function AuthProvider(props: React.PropsWithChildren<{}>): JSX.Element {
1319
const [user, setUser] = useState<UserData>();
1420
const [loading, setLoading] = useState(true);
@@ -46,12 +52,6 @@ function AuthProvider(props: React.PropsWithChildren<{}>): JSX.Element {
4652
);
4753
}
4854

49-
const AuthContext = createContext<AuthContextType>({
50-
loading: false,
51-
signIn: () => Promise.resolve({ isOk: false }),
52-
signOut: () => {},
53-
});
54-
5555
function useAuth(): AuthContextType {
5656
return useContext(AuthContext);
5757
}

‎React/src/contexts/theme.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ function useTheme(): ThemeContextType {
3131
}
3232

3333
function ThemeProvider({ theme, ...props }: React.PropsWithChildren<{ theme?: string }>): JSX.Element {
34-
const [_theme, setTheme] = useState(theme);
34+
const [themeState, setTheme] = useState(theme);
3535

3636
const getTheme = useCallback(
37-
() => _theme ?? window.localStorage[storageKey] as string ?? 'orange.light',
38-
[_theme],
37+
() => themeState ?? window.localStorage[storageKey] as string ?? 'orange.light',
38+
[themeState],
3939
);
4040

41-
const applyBaseTheme = useCallback((theme: string, themeMarker: string) => {
41+
const applyBaseTheme = useCallback((themeName: string, themeMarker: string) => {
4242
for (const styleSheet of document.styleSheets) {
4343
const href = styleSheet.href;
4444
if (href) {
@@ -47,7 +47,7 @@ function ThemeProvider({ theme, ...props }: React.PropsWithChildren<{ theme?: st
4747
const startPosition = themeMarkerPosition + themeMarker.length;
4848
const endPosition = href.indexOf('.css');
4949
const fileNamePart = href.substring(startPosition, endPosition);
50-
if (fileNamePart === theme) {
50+
if (fileNamePart === themeName) {
5151
for (let i = 0; i < styleSheet.cssRules.length; i++) {
5252
const cssRule = styleSheet.cssRules.item(i) as CSSStyleRule;
5353
if (cssRule?.selectorText === '.dx-theme-accent-as-text-color') {
@@ -58,7 +58,7 @@ function ThemeProvider({ theme, ...props }: React.PropsWithChildren<{ theme?: st
5858
}
5959
}
6060
}
61-
styleSheet.disabled = fileNamePart != theme;
61+
styleSheet.disabled = fileNamePart != themeName;
6262
}
6363
}
6464
}
@@ -86,19 +86,19 @@ function ThemeProvider({ theme, ...props }: React.PropsWithChildren<{ theme?: st
8686
}, []);
8787

8888
const applyTheme = useCallback(() => {
89-
const theme = getTheme();
90-
applyBaseTheme(theme, baseThemeMarker);
91-
const accent = theme?.substring(theme.indexOf('.') + 1) as ThemeSwatchAccent;
89+
const appliedTheme = getTheme();
90+
applyBaseTheme(appliedTheme, baseThemeMarker);
91+
const accent = appliedTheme?.substring(appliedTheme.indexOf('.') + 1) as ThemeSwatchAccent;
9292
applySwatchVariables(accent);
9393
applySwatchTheme(accent, additionalThemeMarker);
94-
window.localStorage[storageKey] = theme;
95-
currentTheme(`'material.'${theme}`);
94+
window.localStorage[storageKey] = appliedTheme;
95+
currentTheme(`'material.'${appliedTheme}`);
9696
refreshTheme();
9797
}, [getTheme]);
9898

9999
useEffect(() => {
100100
applyTheme();
101-
}, [_theme, applyTheme]);
101+
}, [themeState, applyTheme]);
102102

103103
const themeContextValue = useMemo<ThemeContextType>(() => ({
104104
getThemeData,

‎React/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ import { useScreenSize } from '../../utils/media-query';
1818
import { useMenuPatch } from '../../utils/patches';
1919
import type { SideNavToolbarProps } from '../../types';
2020

21+
const MenuStatus = {
22+
Closed: 1,
23+
Opened: 2,
24+
TemporaryOpened: 3,
25+
};
26+
2127
export default function SideNavInnerToolbar({ title, children }: React.PropsWithChildren<SideNavToolbarProps>): JSX.Element {
2228
const scrollViewRef = useRef<ScrollViewRef>(null);
2329
const navigate = useNavigate();
@@ -132,8 +138,3 @@ export default function SideNavInnerToolbar({ title, children }: React.PropsWith
132138
);
133139
}
134140

135-
const MenuStatus = {
136-
Closed: 1,
137-
Opened: 2,
138-
TemporaryOpened: 3,
139-
};

‎React/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ import { useScreenSize } from '../../utils/media-query';
1616
import { useMenuPatch } from '../../utils/patches';
1717
import type { SideNavToolbarProps } from '../../types';
1818

19+
const MenuStatus = {
20+
Closed: 1,
21+
Opened: 2,
22+
TemporaryOpened: 3,
23+
};
24+
1925
export default function SideNavOuterToolbar({ title, children }: React.PropsWithChildren<SideNavToolbarProps>): JSX.Element {
2026
const scrollViewRef = useRef<ScrollViewRef>(null);
2127
const navigate = useNavigate();
@@ -119,8 +125,3 @@ export default function SideNavOuterToolbar({ title, children }: React.PropsWith
119125
);
120126
}
121127

122-
const MenuStatus = {
123-
Closed: 1,
124-
Opened: 2,
125-
TemporaryOpened: 3,
126-
};

‎React/src/pages/profile/profile.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import React, { useCallback, useMemo, useState } from 'react';
22
import './profile.scss';
33
import Form, { type FormTypes } from 'devextreme-react/form';
44

5+
const colCountByScreen = {
6+
xs: 1,
7+
sm: 2,
8+
md: 3,
9+
lg: 4,
10+
};
11+
512
export default function Profile(): JSX.Element {
613
const [notes, setNotes] = useState(
714
'Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you`ve not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.',
@@ -53,9 +60,3 @@ export default function Profile(): JSX.Element {
5360
);
5461
}
5562

56-
const colCountByScreen = {
57-
xs: 1,
58-
sm: 2,
59-
md: 3,
60-
lg: 4,
61-
};

‎React/src/utils/media-query.ts‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,35 @@ interface ScreenSize {
77
isLarge: boolean;
88
}
99

10+
let handlers: Function[] = [];
11+
const xSmallMedia = window.matchMedia('(max-width: 599.99px)');
12+
const smallMedia = window.matchMedia('(min-width: 600px) and (max-width: 959.99px)');
13+
const mediumMedia = window.matchMedia('(min-width: 960px) and (max-width: 1279.99px)');
14+
const largeMedia = window.matchMedia('(min-width: 1280px)');
15+
16+
[xSmallMedia, smallMedia, mediumMedia, largeMedia].forEach((media) => {
17+
media.addEventListener('change', (e) => {
18+
if (e.matches) { handlers.forEach((handler) => { handler(); }); }
19+
});
20+
});
21+
22+
function subscribe(handler: Function): void {
23+
handlers.push(handler);
24+
}
25+
26+
function unsubscribe(handler: Function): void {
27+
handlers = handlers.filter((item) => item !== handler);
28+
}
29+
30+
function getScreenSize(): ScreenSize {
31+
return {
32+
isXSmall: xSmallMedia.matches,
33+
isSmall: smallMedia.matches,
34+
isMedium: mediumMedia.matches,
35+
isLarge: largeMedia.matches,
36+
};
37+
}
38+
1039
export function useScreenSize(): ScreenSize {
1140
const [screenSize, setScreenSize] = useState<ScreenSize>(getScreenSize());
1241
const onSizeChanged = useCallback(() => {
@@ -41,32 +70,3 @@ export function useScreenSizeClass(): string {
4170

4271
return 'screen-x-small';
4372
}
44-
45-
let handlers: Function[] = [];
46-
const xSmallMedia = window.matchMedia('(max-width: 599.99px)');
47-
const smallMedia = window.matchMedia('(min-width: 600px) and (max-width: 959.99px)');
48-
const mediumMedia = window.matchMedia('(min-width: 960px) and (max-width: 1279.99px)');
49-
const largeMedia = window.matchMedia('(min-width: 1280px)');
50-
51-
[xSmallMedia, smallMedia, mediumMedia, largeMedia].forEach((media) => {
52-
media.addEventListener('change', (e) => {
53-
e.matches && handlers.forEach((handler) => { handler(); });
54-
});
55-
});
56-
57-
function subscribe(handler: Function): void {
58-
handlers.push(handler);
59-
}
60-
61-
function unsubscribe(handler: Function): void {
62-
handlers = handlers.filter((item) => item !== handler);
63-
}
64-
65-
function getScreenSize(): ScreenSize {
66-
return {
67-
isXSmall: xSmallMedia.matches,
68-
isSmall: smallMedia.matches,
69-
isMedium: mediumMedia.matches,
70-
isLarge: largeMedia.matches,
71-
};
72-
}

0 commit comments

Comments
 (0)