TECH;Prettier fix

modules/documentation/src/components/InlineCode.tsx

@@ -5,12 +5,12 @@ const InlineCode = styled.span.attrs({
 })`
 	font-size: 14px;
 	font-family: monospace;
-	
+
-	background-color: ${p => p.theme.gray};
+	background-color: ${(p) => p.theme.gray};
-	color: ${p => p.theme.black};
+	color: ${(p) => p.theme.black};
-	
+
 	padding: 4px 5px;
-	
+
 	border-radius: 6px;
 `;
 

modules/documentation/src/pages/FetchPage/components/index.tsx

@@ -12,7 +12,6 @@ import { fetch } from '../actions';
 import { getUrlKey } from '../utils';
 import { getResponse } from '../selectors';
 
-
 const FetchPage = (): React.ReactElement => {
 	const dispatch = useDispatch();
 
@@ -20,7 +19,7 @@ const FetchPage = (): React.ReactElement => {
 	const isFetching = useSelector((state) => getIsFetching(state, getUrlKey(FetchMethod.get)));
 
 	const handleFetch = useCallback(() => {
-		dispatch(fetch())
+		dispatch(fetch());
 	}, []);
 
 	return (
@@ -43,4 +42,4 @@ const FetchPage = (): React.ReactElement => {
 	);
 };
 
-export default FetchPage;
+export default FetchPage;

modules/documentation/src/pages/LocalizationPage/GetStarted.tsx

@@ -37,23 +37,17 @@ initLocalization(currentLanguage, localization);
 			/>
 		</Section>
 
-
 		<Section>
 			<h3>3. {getMessage(LocalizationLocalization.use)}</h3>
 
-			<div>{
-				getMessage(
-					LocalizationLocalization.useImport,
-					<InlineCode>getMessage</InlineCode>,
-					<InlineCode>@romanjaros/treejs-localization</InlineCode>,
-				)}
-			</div>
 			<div>
 				{getMessage(
-					LocalizationLocalization.useGetMessage,
+					LocalizationLocalization.useImport,
-					<InlineCode>localization</InlineCode>,
+					<InlineCode>getMessage</InlineCode>,
+					<InlineCode>@romanjaros/treejs-localization</InlineCode>
 				)}
 			</div>
+			<div>{getMessage(LocalizationLocalization.useGetMessage, <InlineCode>localization</InlineCode>)}</div>
 
 			<Code
 				code={`

modules/documentation/src/pages/LocalizationPage/Structure.tsx

@@ -19,20 +19,26 @@ const StructurePage = (): React.ReactElement => {
 		<>
 			<h2>{getMessage(LocalizationLocalization.structureTitle)}</h2>
 
-			<Message status={STATUS.info}>
+			<Message status={STATUS.info}>{getMessage(LocalizationLocalization.onlyRecommendation)}</Message>
-				{getMessage(LocalizationLocalization.onlyRecommendation)}
-			</Message>
 
 			<Section>
 				<h3>{getMessage(LocalizationLocalization.folderTitle)}</h3>
 				<StyledUl>
-					<li>{folderIcon} <b>documentation</b></li>
+					<li>
+						{folderIcon} <b>documentation</b>
+					</li>
 					<StyledUl>
-						<li>{folderIcon} <b>localization</b></li>
+						<li>
+							{folderIcon} <b>localization</b>
+						</li>
 						<StyledUl>
-							<li>{folderIcon} <b>common</b></li>
+							<li>
+								{folderIcon} <b>common</b>
+							</li>
 							<StyledUl>
-								<li>{folderIcon} <b>localization</b></li>
+								<li>
+									{folderIcon} <b>localization</b>
+								</li>
 								<StyledUl>
 									<li>{fileIcon} en.ts</li>
 									<li>{fileIcon} cs.ts</li>
@@ -49,7 +55,9 @@ const StructurePage = (): React.ReactElement => {
 
 				<Section>
 					<h4>1. {getMessage(LocalizationLocalization.importAndUse, <InlineCode>@withNS</InlineCode>)}</h4>
-					<Code language="js" code={`				
+					<Code
+						language="js"
+						code={`				
 import { localizationWithNamespace } from '@romanjaros/treejs-localization/decorator';
 
 const withNS = localizationWithNamespace('common');
@@ -60,13 +68,16 @@ export class InternalCommonLocalization {
 }
 
 export const CommonLocalization = new InternalCommonLocalization();
-				`} />
+				`}
+					/>
 				</Section>
 
 				<Section>
 					<h4>2. {getMessage(LocalizationLocalization.defineForEachLanguage)}</h4>
 					<b>en.ts</b>
-					<Code language="js" code={`
+					<Code
+						language="js"
+						code={`
 import { InternalCommonLocalization } from '..';
 
 export const common: InternalCommonLocalization = {
@@ -75,10 +86,13 @@ export const common: InternalCommonLocalization = {
 };
 
 export default common;
-				`} />
+				`}
+					/>
 
 					<b>cs.ts</b>
-					<Code language="js" code={`
+					<Code
+						language="js"
+						code={`
 import { InternalCommonLocalization } from '..';
 
 export const common: InternalCommonLocalization = {
@@ -87,22 +101,23 @@ export const common: InternalCommonLocalization = {
 };
 
 export default common;
-				`} />
+				`}
+					/>
 				</Section>
 
 				<Section>
-					<h4>3. {
+					<h4>
-						getMessage(
+						3. {getMessage(LocalizationLocalization.useWithMessage, <InlineCode>getMessage()</InlineCode>)}
-							LocalizationLocalization.useWithMessage,
+					</h4>
-							<InlineCode>getMessage()</InlineCode>
+					<Code
-						)
+						language="js"
-					}</h4>
+						code={`
-					<Code language="js" code={`
 import { CommonLocalization } from 'documentation/localization/common';
 import { getMessage } from '@romanjaros/treejs-localization/message';
 
 console.log(getMessage(CommonLocalization.yes));
-				`} />
+				`}
+					/>
 				</Section>
 			</Section>
 		</>

modules/documentation/src/pages/ProfilePage/components/signin.tsx

@@ -15,12 +15,14 @@ export const SignIn: React.FC = () => {
 	}, []);
 
 	const authenticate = useCallback(() => {
-		dispatch(setAuthenticated({
+		dispatch(
-			authenticated: true,
+			setAuthenticated({
-			accessToken: '',
+				authenticated: true,
-			refreshToken: '',
+				accessToken: '',
-			userId: null,
+				refreshToken: '',
-		}));
+				userId: null,
+			})
+		);
 		handleSignOut();
 	}, []);
 
@@ -33,6 +35,6 @@ export const SignIn: React.FC = () => {
 			</a>
 		</div>
 	);
-}
+};
 
 export default SignIn;

modules/documentation/src/pages/ProfilePage/components/signout.tsx

@@ -7,7 +7,6 @@ import Button from '@romanjaros/treejs-components/Button';
 import history from 'documentation/utils/history';
 import { STATUS } from '@romanjaros/treejs-types/common';
 
-
 type IProps = {
 	children: React.ReactElement;
 } & IAuthHOCInjectProps;
@@ -15,18 +14,19 @@ type IProps = {
 export const SignOut: React.FC<IProps> = () => {
 	const dispatch = useDispatch();
 
-
 	const handleSignIn = useCallback(() => {
 		history.push('/signin');
 	}, []);
 
 	const authenticate = useCallback(() => {
-		dispatch(setAuthenticated({
+		dispatch(
-			authenticated: false,
+			setAuthenticated({
-			accessToken: '',
+				authenticated: false,
-			refreshToken: '',
+				accessToken: '',
-			userId: null,
+				refreshToken: '',
-		}));
+				userId: null,
+			})
+		);
 		handleSignIn();
 	}, []);
 
@@ -35,6 +35,6 @@ export const SignOut: React.FC<IProps> = () => {
 			<Button label="Sign out" status={STATUS.warning} onClick={authenticate} />
 		</div>
 	);
-}
+};
 
-export default authRequired(SignOut);
+export default authRequired(SignOut);

modules/treejs-api/src/middleware.tsx

@@ -13,8 +13,8 @@ interface ISettings {
 	BASE_ENDPOINT_URL: string;
 }
 
-export const FetchEndpoint = (setting: ISettings): Middleware => store => next => async (
+export const FetchEndpoint = (setting: ISettings): Middleware => (store) => (next) => async (
-	action: IAction<IFetchConfig>,
+	action: IAction<IFetchConfig>
 ) => {
 	if (action.type === FetchActions.FETCH) {
 		if (isNilOrEmpty(action.payload.url)) {

modules/treejs-auth/src/hoc/authRequired.tsx

@@ -17,7 +17,7 @@ export interface IAuthOptions {
 
 export const authRequired = (
 	WrappedComponent: React.ComponentType<IAuthHOCInjectProps>,
-	options: IAuthOptions = {},
+	options: IAuthOptions = {}
 ): any => {
 	class AuthComponent extends React.PureComponent<IAuthComponent> {
 		public render() {
@@ -28,7 +28,7 @@ export const authRequired = (
 		}
 	}
 
-	return connect(state => ({
+	return connect((state) => ({
 		isAuthenticate: isAuthenticated(state),
 	}))(AuthComponent);
 };

modules/treejs-components/src/Calendar/index.tsx

@@ -23,23 +23,18 @@ type IProps = {
 	format?: string;
 	value?: string;
 	onChange?: (date: string) => void;
-}
+};
 
 const todayMoment: Date = new Date();
 
 const Calendar: React.FC<IProps> = (props) => {
-	const {
+	const { value, format = 'DD.MM.YYYY', onChange, title } = props;
-		value,
-		format = 'DD.MM.YYYY',
-		onChange,
-		title,
-	} = props;
 
 	const [defaultMoment, setDefaultMoment] = useState(moment());
 
-	const [currentMoment, setCurrentMoment] = useState(defaultMoment)
+	const [currentMoment, setCurrentMoment] = useState(defaultMoment);
-	const [firstDayOfMonth, setFirstDayOfMonth] = useState(defaultMoment.startOf('month').day() - 1)
+	const [firstDayOfMonth, setFirstDayOfMonth] = useState(defaultMoment.startOf('month').day() - 1);
-	const [daysInMonth, setDaysInMonth] = useState(defaultMoment.daysInMonth())
+	const [daysInMonth, setDaysInMonth] = useState(defaultMoment.daysInMonth());
 	const [innerValue, setInnerValue] = useState(value);
 
 	useEffect(() => {
@@ -52,69 +47,81 @@ const Calendar: React.FC<IProps> = (props) => {
 
 	useEffect(() => {
 		setInnerValue(value);
-	}, [value])
+	}, [value]);
 
-	const getStartOfWeek = useCallback((row = 0): number => {
+	const getStartOfWeek = useCallback(
-		return 7 - firstDayOfMonth + (row - 1) * 7;
+		(row = 0): number => {
-	}, [firstDayOfMonth]);
+			return 7 - firstDayOfMonth + (row - 1) * 7;
+		},
+		[firstDayOfMonth]
+	);
 
 	const getWeeksInMonth = useCallback((): number => {
 		return (daysInMonth + firstDayOfMonth - 1) / 7;
 	}, [daysInMonth, firstDayOfMonth]);
 
-	const isToday = useCallback((day: number): boolean => {
+	const isToday = useCallback(
-		return (
+		(day: number): boolean => {
-			moment(todayMoment).date() === day &&
-			moment(todayMoment).month() === currentMoment.month() &&
-			moment(todayMoment).year() === currentMoment.year()
-		);
-	}, [todayMoment, currentMoment]);
-
-	const isSelected = useCallback((day: number): boolean => {
-		if (moment(innerValue, format).isValid()) {
 			return (
-				moment(innerValue, format).date() === day &&
+				moment(todayMoment).date() === day &&
-				moment(innerValue, format).month() === currentMoment.month() &&
+				moment(todayMoment).month() === currentMoment.month() &&
-				moment(innerValue, format).year() === currentMoment.year()
+				moment(todayMoment).year() === currentMoment.year()
 			);
-		}
+		},
-		return false;
+		[todayMoment, currentMoment]
-	}, [innerValue, currentMoment, format]);
+	);
 
-	const handleChangeDate = useCallback((day: number) => (): void => {
+	const isSelected = useCallback(
-		const date = currentMoment.set('date', day).format(format);
+		(day: number): boolean => {
-		if (!isNilOrEmpty(onChange)) {
+			if (moment(innerValue, format).isValid()) {
-			onChange(date);
-		}
-	}, [currentMoment, format]);
-
-	const getRow = useCallback((row = 0): React.ReactElement[] => {
-		let day = 0;
-		if (row !== 0) {
-			day = getStartOfWeek(row);
-		}
-		return range(0, 7).map(i => {
-			if (
-				(firstDayOfMonth <= i && row === 0) ||
-				(daysInMonth > day && row !== 0)
-			) {
-				day++;
 				return (
-					<StyledCalendarCell
+					moment(innerValue, format).date() === day &&
-						key={i}
+					moment(innerValue, format).month() === currentMoment.month() &&
-						hasValue
+					moment(innerValue, format).year() === currentMoment.year()
-						isToday={isToday(day)}
-						isSelected={isSelected(day)}
-						onClick={handleChangeDate(day)}
-					>
-						{day}
-					</StyledCalendarCell>
 				);
-			} else {
-				return <StyledCalendarCell key={i} hasValue={false} isToday={false} isSelected={false} />;
 			}
-		});
+			return false;
-	}, [innerValue, firstDayOfMonth, daysInMonth]);
+		},
+		[innerValue, currentMoment, format]
+	);
+
+	const handleChangeDate = useCallback(
+		(day: number) => (): void => {
+			const date = currentMoment.set('date', day).format(format);
+			if (!isNilOrEmpty(onChange)) {
+				onChange(date);
+			}
+		},
+		[currentMoment, format]
+	);
+
+	const getRow = useCallback(
+		(row = 0): React.ReactElement[] => {
+			let day = 0;
+			if (row !== 0) {
+				day = getStartOfWeek(row);
+			}
+			return range(0, 7).map((i) => {
+				if ((firstDayOfMonth <= i && row === 0) || (daysInMonth > day && row !== 0)) {
+					day++;
+					return (
+						<StyledCalendarCell
+							key={i}
+							hasValue
+							isToday={isToday(day)}
+							isSelected={isSelected(day)}
+							onClick={handleChangeDate(day)}
+						>
+							{day}
+						</StyledCalendarCell>
+					);
+				} else {
+					return <StyledCalendarCell key={i} hasValue={false} isToday={false} isSelected={false} />;
+				}
+			});
+		},
+		[innerValue, firstDayOfMonth, daysInMonth]
+	);
 
 	const setDate = useCallback((date: moment.Moment) => {
 		setCurrentMoment(date);
@@ -169,11 +176,9 @@ const Calendar: React.FC<IProps> = (props) => {
 							</StyledCalendarNavigation>
 						</tr>
 						<tr>
-							{
+							{WEEK_DAYS_SHORT.map((day, i) => (
-								WEEK_DAYS_SHORT.map((day, i) => (
+								<StyledCalendarHeader key={i}>{day}</StyledCalendarHeader>
-									<StyledCalendarHeader key={i}>{day}</StyledCalendarHeader>
+							))}
-								))
-							}
 						</tr>
 					</thead>
 					<tbody>

modules/treejs-components/src/DatePicker/components/Modal.tsx

@@ -19,12 +19,15 @@ type IProps = {
 const Modal: React.FC<IProps> = (props) => {
 	const { onChange, onRemove, closeModal, name, value, format } = props;
 
-	const setActiveOption = useCallback((value: string) => {
+	const setActiveOption = useCallback(
-		if (onChange) {
+		(value: string) => {
-			onChange(value);
+			if (onChange) {
-		}
+				onChange(value);
-		closeModal(name);
+			}
-	}, [name]);
+			closeModal(name);
+		},
+		[name]
+	);
 
 	const removeActiveOption = useCallback((): void => {
 		if (onRemove) {
@@ -36,16 +39,11 @@ const Modal: React.FC<IProps> = (props) => {
 	return (
 		<div>
 			<Section>
-				<Calendar
+				<Calendar value={value} onChange={setActiveOption} format={format} title={null} />
-					value={value}
-					onChange={setActiveOption}
-					format={format}
-					title={null}
-				/>
 			</Section>
 			<Button label="Odebrat hodnotu" status={STATUS.error} onClick={removeActiveOption} />
 		</div>
 	);
-}
+};
 
 export default Modal;

modules/treejs-components/src/Grid/index.ts

@@ -6,7 +6,7 @@ type IGrid = {
 
 export const Grid = styled.div.attrs({
 	className: 'Grid',
-}) <IGrid>`
+})<IGrid>`
 	display: flex;
 	flex-wrap: wrap;
 
@@ -29,7 +29,7 @@ type IGridCol = {
 
 export const GridCol = styled.div.attrs({
 	className: 'GridCol',
-}) <IGridCol>`
+})<IGridCol>`
 	margin: 5px;
 	margin-bottom: 10px;
 

modules/treejs-components/src/Layout/components/Layout.tsx

@@ -38,7 +38,7 @@ type IProps = {
 	userComponent?: React.ReactElement;
 	userMenuItems?: IMenuItem[];
 	footComponent?: React.ReactNode;
-}
+};
 
 type IState = {
 	isLeftMenuOpen: boolean;
@@ -46,7 +46,7 @@ type IState = {
 	isSubMenuOpen: boolean;
 	topMenuItems: IMenuItem[];
 	topMenuMissingItems: IMenuItem[];
-}
+};
 
 class PageLayout extends React.PureComponent<IProps, IState> {
 	public static defaultProps = {

modules/treejs-components/src/Layout/components/MenuItem.tsx

@@ -18,7 +18,7 @@ export const MenuItem = (props: IProps) => {
 
 	const handleSetOpen = React.useCallback(() => {
 		setOpen(!open);
-	}, [open])
+	}, [open]);
 
 	const handleOnClick = React.useCallback(() => {
 		if (!isNilOrEmpty(href)) {
@@ -40,9 +40,7 @@ export const MenuItem = (props: IProps) => {
 			</StyledLeftMenuItem>
 			{!isNilOrEmpty(subMenu) &&
 				open &&
-				subMenu.map((menuItem, i) => (
+				subMenu.map((menuItem, i) => <MenuItem key={i} isChild={true} onClick={onClick} {...menuItem} />)}
-					<MenuItem key={i} isChild={true} onClick={onClick} {...menuItem} />
-				))}
 		</>
 	);
 };

modules/treejs-components/src/Link/index.tsx

@@ -6,15 +6,17 @@ type IProps = {
 	children: React.ReactElement | string;
 	href: string;
 	newTab?: boolean;
-}
+};
 
 const Link = (props: IProps): React.ReactElement => {
 	return (
 		<StyledLink
-			{ ...props.newTab ? {
+			{...(props.newTab
-				target: "_blank",
+				? {
-				rel: "noreferrer noopener",
+					target: '_blank',
-			} : {} }
+					rel: 'noreferrer noopener',
+				}
+				: {})}
 			href={props.href}
 		>
 			{props.children}

modules/treejs-components/src/Loader/index.tsx

@@ -5,7 +5,7 @@ import { StyledContentLoader } from './style';
 type IProps = {
 	children: React.ReactElement | React.ReactElement[];
 	isLoading: boolean;
-}
+};
 
 export const ContentLoader = (props: IProps): React.ReactElement => {
 	return (

modules/treejs-components/src/Message/index.tsx

@@ -5,11 +5,10 @@ import { STATUS } from '@romanjaros/treejs-types/common';
 
 import { StyledMessage, StyledMessageContent, StyledMessageIcon } from './style';
 
-
 type IProps = {
 	status: STATUS;
 	children: React.ReactElement | string;
-}
+};
 
 class Message extends React.Component<IProps> {
 	public render() {
@@ -22,9 +21,7 @@ class Message extends React.Component<IProps> {
 					{this.props.status === STATUS.error && <FontAwesomeIcon icon="exclamation-circle" />}
 					{this.props.status === STATUS.none && <FontAwesomeIcon icon="hand-peace" />}
 				</StyledMessageIcon>
-				<StyledMessageContent>
+				<StyledMessageContent>{this.props.children}</StyledMessageContent>
-					{this.props.children}
-				</StyledMessageContent>
 			</StyledMessage>
 		);
 	}

modules/treejs-components/src/Modal/components/Modals.tsx

@@ -19,7 +19,7 @@ import { getModalComponent } from '../utils/registerModal';
 type IProps = {
 	closeModal: (name: string) => void;
 	modals: IModalReducer;
-}
+};
 
 class Modals extends React.PureComponent<IProps> {
 	private closeModal = (name: string) => (): void => {
@@ -39,7 +39,7 @@ class Modals extends React.PureComponent<IProps> {
 
 		return (
 			<>
-				{Object.keys(modals).map(key => {
+				{Object.keys(modals).map((key) => {
 					const modal = modals[key];
 					return (
 						<StyledModalContainer
@@ -62,10 +62,10 @@ class Modals extends React.PureComponent<IProps> {
 }
 
 export default connect(
-	state => ({
+	(state) => ({
 		modals: modals(state),
 	}),
 	{
 		closeModal,
-	},
+	}
 )(Modals);

modules/treejs-components/src/RadioButton/style.ts

@@ -36,6 +36,7 @@ export const StyledRadioButtonItem = styled.div<IStyledRadioButtonItem>`
 
 	& span {
 		margin-left: 5px;
+
 		color: ${(p) => p.theme.black};
 	}
 `;

modules/treejs-components/src/Slider/index.tsx

@@ -8,7 +8,7 @@ type IProps = {
 	min: number;
 	onChange?: (value: number, e: React.ChangeEvent) => void;
 	value?: number;
-}
+};
 
 interface IState {
 	value?: number;

modules/treejs-components/src/Table/components/TableCell.tsx

@@ -4,7 +4,7 @@ import { StyledTableCell } from '../style';
 
 type IProps = {
 	title: string | React.ReactElement;
-}
+};
 
 class TableCell extends React.PureComponent<IProps> {
 	public render() {

modules/treejs-components/src/Table/components/TableHeader.tsx

@@ -4,7 +4,7 @@ import { StyledTableHeaderRow } from '../style';
 
 type IProps = {
 	children: React.ReactElement[];
-}
+};
 
 class TableHeader extends React.PureComponent<IProps> {
 	public render() {

modules/treejs-components/src/Table/components/TableHeaderCell.tsx

@@ -4,7 +4,7 @@ import { StyledTableCell } from '../style';
 
 type IProps = {
 	children: React.ReactElement | string;
-}
+};
 
 class TableCell extends React.PureComponent<IProps> {
 	public render() {

modules/treejs-components/src/Table/components/TableRow.tsx

@@ -4,7 +4,7 @@ import { StyledTableRow } from '../style';
 
 type IProps = {
 	children: React.ReactElement[];
-}
+};
 
 class TableRow extends React.PureComponent<IProps> {
 	public render() {

modules/treejs-components/src/Toaster/components/Toasters.tsx

@@ -9,10 +9,9 @@ import { StyledToasterContainer } from '../styles/toaster';
 import { toasters } from '../selectors';
 import { IToasterReducer } from '../types';
 
-
 type IProps = {
 	toasters: IToasterReducer;
-}
+};
 
 class Toasters extends React.Component<IProps> {
 	public render() {
@@ -24,7 +23,7 @@ class Toasters extends React.Component<IProps> {
 
 		return (
 			<StyledToasterContainer>
-				{Object.keys(toasters).map(key => {
+				{Object.keys(toasters).map((key) => {
 					const toaster = toasters[key];
 					return (
 						<Message key={key} status={toaster.status}>
@@ -37,6 +36,6 @@ class Toasters extends React.Component<IProps> {
 	}
 }
 
-export default connect(state => ({
+export default connect((state) => ({
 	toasters: toasters(state),
 }))(Toasters);