TECH;Prettier fix

This commit is contained in:
Roman Jaroš 2020-08-14 22:11:17 +02:00
parent c6b833c4ee
commit 717c677fd6
24 changed files with 181 additions and 171 deletions

View file

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

View file

@ -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 (

View file

@ -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,
<InlineCode>localization</InlineCode>,
LocalizationLocalization.useImport,
<InlineCode>getMessage</InlineCode>,
<InlineCode>@romanjaros/treejs-localization</InlineCode>
)}
</div>
<div>{getMessage(LocalizationLocalization.useGetMessage, <InlineCode>localization</InlineCode>)}</div>
<Code
code={`

View file

@ -19,20 +19,26 @@ const StructurePage = (): React.ReactElement => {
<>
<h2>{getMessage(LocalizationLocalization.structureTitle)}</h2>
<Message status={STATUS.info}>
{getMessage(LocalizationLocalization.onlyRecommendation)}
</Message>
<Message status={STATUS.info}>{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. {
getMessage(
LocalizationLocalization.useWithMessage,
<InlineCode>getMessage()</InlineCode>
)
}</h4>
<Code language="js" code={`
<h4>
3. {getMessage(LocalizationLocalization.useWithMessage, <InlineCode>getMessage()</InlineCode>)}
</h4>
<Code
language="js"
code={`
import { CommonLocalization } from 'documentation/localization/common';
import { getMessage } from '@romanjaros/treejs-localization/message';
console.log(getMessage(CommonLocalization.yes));
`} />
`}
/>
</Section>
</Section>
</>

View file

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

View file

@ -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(
setAuthenticated({
authenticated: false,
accessToken: '',
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);

View file

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

View file

@ -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);
};

View file

@ -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 {
value,
format = 'DD.MM.YYYY',
onChange,
title,
} = props;
const { value, format = 'DD.MM.YYYY', onChange, title } = props;
const [defaultMoment, setDefaultMoment] = useState(moment());
const [currentMoment, setCurrentMoment] = useState(defaultMoment)
const [firstDayOfMonth, setFirstDayOfMonth] = useState(defaultMoment.startOf('month').day() - 1)
const [daysInMonth, setDaysInMonth] = useState(defaultMoment.daysInMonth())
const [currentMoment, setCurrentMoment] = useState(defaultMoment);
const [firstDayOfMonth, setFirstDayOfMonth] = useState(defaultMoment.startOf('month').day() - 1);
const [daysInMonth, setDaysInMonth] = useState(defaultMoment.daysInMonth());
const [innerValue, setInnerValue] = useState(value);
useEffect(() => {
@ -52,25 +47,32 @@ const Calendar: React.FC<IProps> = (props) => {
useEffect(() => {
setInnerValue(value);
}, [value])
}, [value]);
const getStartOfWeek = useCallback((row = 0): number => {
const getStartOfWeek = useCallback(
(row = 0): number => {
return 7 - firstDayOfMonth + (row - 1) * 7;
}, [firstDayOfMonth]);
},
[firstDayOfMonth]
);
const getWeeksInMonth = useCallback((): number => {
return (daysInMonth + firstDayOfMonth - 1) / 7;
}, [daysInMonth, firstDayOfMonth]);
const isToday = useCallback((day: number): boolean => {
const isToday = useCallback(
(day: number): boolean => {
return (
moment(todayMoment).date() === day &&
moment(todayMoment).month() === currentMoment.month() &&
moment(todayMoment).year() === currentMoment.year()
);
}, [todayMoment, currentMoment]);
},
[todayMoment, currentMoment]
);
const isSelected = useCallback((day: number): boolean => {
const isSelected = useCallback(
(day: number): boolean => {
if (moment(innerValue, format).isValid()) {
return (
moment(innerValue, format).date() === day &&
@ -79,25 +81,28 @@ const Calendar: React.FC<IProps> = (props) => {
);
}
return false;
}, [innerValue, currentMoment, format]);
},
[innerValue, currentMoment, format]
);
const handleChangeDate = useCallback((day: number) => (): void => {
const handleChangeDate = useCallback(
(day: number) => (): void => {
const date = currentMoment.set('date', day).format(format);
if (!isNilOrEmpty(onChange)) {
onChange(date);
}
}, [currentMoment, format]);
},
[currentMoment, format]
);
const getRow = useCallback((row = 0): React.ReactElement[] => {
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)
) {
return range(0, 7).map((i) => {
if ((firstDayOfMonth <= i && row === 0) || (daysInMonth > day && row !== 0)) {
day++;
return (
<StyledCalendarCell
@ -114,7 +119,9 @@ const Calendar: React.FC<IProps> = (props) => {
return <StyledCalendarCell key={i} hasValue={false} isToday={false} isSelected={false} />;
}
});
}, [innerValue, firstDayOfMonth, daysInMonth]);
},
[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>
))
}
))}
</tr>
</thead>
<tbody>

View file

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

View file

@ -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 = {

View file

@ -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) => (
<MenuItem key={i} isChild={true} onClick={onClick} {...menuItem} />
))}
subMenu.map((menuItem, i) => <MenuItem key={i} isChild={true} onClick={onClick} {...menuItem} />)}
</>
);
};

View file

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

View file

@ -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 (

View file

@ -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>
{this.props.children}
</StyledMessageContent>
<StyledMessageContent>{this.props.children}</StyledMessageContent>
</StyledMessage>
);
}

View file

@ -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);

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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);