Я всегда получал эту обратную связь, чтобы улучшить соглашение об именах для переменных и функций / компонентов. Несколько дней назад я отправил задание по кодированию на собеседование, но не дошел до финального раунда. В основном было 2 отзыва
- Ошибка установки npm (неправда, поскольку я запустил репозиторий Github с нуля, и он сработал).
- Названия функций и переменных немного сбивали с толку.
- Текст не всегда читался.
Это действительно расстраивает, так как я получал этот отзыв пару раз во время проверки кода в моей предыдущей компании. Я прочитал много фрагментов кода и статей, чтобы понять соглашение об именах, и подумал, что стал лучше. Я буду очень признателен, если я смогу получить отзывы об именах переменных, функций, компонентов. Это будет действительно полезно для меня в решении проблемы кодирования.
Утверждает: —
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Box } from '@material-ui/core';
import { mainWrapper } from './styles';
import { CommonLayout } from '../components/CommonLayout';
import { Home } from '../components/Home';
import { PretrainedIntent } from '../components/PretrainedIntent';
import { GetStarted } from '../components/GetStarted';
const AppRoutes: React.FC = () => (
<BrowserRouter>
<Box style={mainWrapper}>
<CommonLayout />
<Switch>
<Route exact path="https://codereview.stackexchange.com/" component={Home} />
<Route exact path="/pretrainedintent" component={PretrainedIntent} />
<Route exact path="/getstarted" component={GetStarted} />
</Switch>
</Box>
</BrowserRouter>
);
export default AppRoutes;
Имя компонента: — GetStarted
import React from 'react';
import { Box, Typography } from '@material-ui/core';
import { header, linkWrapper, outerWrapper, innerWrapper } from './styles';
import ArrowRightAltOutlinedIcon from '@material-ui/icons/ArrowRightAltOutlined';
import { useHistory } from 'react-router-dom';
import { setupWizardLink } from '../../common/constants';
export const GetStarted: React.FC = () => {
const history = useHistory();
// eslint-disable-next-line no-unused-vars
const onClickHandler: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void = () =>
history.push('/pretrainedintent');
return (
<Box style={outerWrapper}>
<Box style={innerWrapper}>
<Box style={linkWrapper} onClick={onClickHandler}>
<Typography variant="h6" style={header}>
{setupWizardLink}
</Typography>
<ArrowRightAltOutlinedIcon style={{ fontSize: '3em' }} />
</Box>
</Box>
</Box>
);
};
Название компонента: — Общий макет
import React from 'react';
import { outerWrapper } from './styles';
import { Box } from '@material-ui/core';
import Header from './Header';
import Footer from './Footer';
import { bkgVideoUrl } from '../../common/constants';
export const CommonLayout:React.FC = () => (
<Box style={outerWrapper}>
<Header/>
<video width="100%" height="" loop muted autoPlay>
<source src={bkgVideoUrl}/>
</video>
<Footer/>
</Box>
);
Имя компонента: — PretrainedIntent (это было в соответствии с инструкцией в задаче кодирования)
import React from 'react';
import { outerWrapper } from './styles';
import { Box } from '@material-ui/core';
import { ChatBotList } from './ChatBotList';
export const PretrainedIntent:React.FC = () => (
<Box style={outerWrapper}>
<ChatBotList/>
</Box>
);
Название компонента: — ChatBotList
import React, { useState, useEffect }from 'react';
import { Box, Button } from '@material-ui/core';
import { outerWrapper, selectAll, innerWrapper } from './styles';
import { listOfIntents } from '../../../common/constants';
import { Card } from '../Card';
interface IExpression {
id : string; text: string
}
interface IState {
botIndex: number;
botStatus: boolean;
id: string;
name: string;
description: string;
trainingData: {expressionCount: number, expressions: IExpression[]},
reply: { id : string, text: string}
}
const updatedListOfIntent = listOfIntents.map(intent=>({ ...intent,
botIndex: -1,
botStatus: false }));
export const ChatBotList: React.FC = () => {
const [isBotAllSelect, SetIsBotAllSelect] = useState<boolean>(false);
const [allBotSelectStatus, SetAllBotSelectStatus] = useState<string>('Select All');
const [botValue, SetBotValue] = useState<IState[]>(updatedListOfIntent);
// eslint-disable-next-line no-unused-vars
const onSelectAllBotHandler: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void = () =>
SetIsBotAllSelect((prevState) => !prevState);
// eslint-disable-next-line no-unused-vars
const onSelectBotHandler: (value: number)=>(event: React.MouseEvent<HTMLButtonElement, MouseEvent>)=> void = (value:number) => (e) => {
const filteredBot = botValue.map((bot, idx)=>idx === value ? ({
...bot,
botIndex: value,
botStatus: !bot.botStatus
}) : ({
...bot,
botIndex: idx,
botStatus: bot.botStatus
}));
SetBotValue([...filteredBot]);
};
useEffect(()=>{
if (!isBotAllSelect) {
const filteredBot = botValue.map((bot, idx)=>({
...bot,
botIndex: idx,
botStatus: true
}));
SetAllBotSelectStatus('Select All');
SetBotValue([...filteredBot]);
} else {
const filteredBot = botValue.map((bot, idx)=>({
...bot,
botIndex: idx,
botStatus: false
}));
SetAllBotSelectStatus('UnSelect All');
SetBotValue([...filteredBot]);
}
}, [isBotAllSelect]);
return (
<Box style={outerWrapper}>
<Button onClick={onSelectAllBotHandler}
style={selectAll} variant="contained"
color="secondary">{allBotSelectStatus}</Button>
<Box style={innerWrapper}>
{botValue?.map((intent, idx) => {
const intentName = intent.name.concat(' Intent');
const expressionText = intent.trainingData.expressions.map((text) => text.text);
const sampleExpr = expressionText.slice(0, 1);
const { botStatus } = intent;
return (
<Card
description={intent.description}
intentName={intentName}
sampleExpr={sampleExpr}
key={idx}
idx={idx}
onSelectBotHandler={onSelectBotHandler}
botStatus={botStatus}
expressionText={expressionText}
reply={intent.reply.text}
/>
);
})}
</Box>
</Box>
);
};
Название компонента: — Карта
import React, { useState } from 'react';
import { Box, Typography, Button } from '@material-ui/core';
import InfoIcon from '@material-ui/icons/Info';
import {
unSelectedWrapper,
selectedWrapper,
initials,
desc,
expr,
innerWrapper,
importBtn,
sampleInitials,
info,
} from './styles';
import ChatBotInfo from '../ChatBotInfo';
interface IProps {
intentName: string;
description: string;
expressionText: string[];
sampleExpr: string[];
idx: number;
reply: string;
// eslint-disable-next-line no-unused-vars
onSelectBotHandler: (value: number) => (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
botStatus: boolean;
}
export const Card: React.FC<IProps> = ({
intentName,
description,
sampleExpr,
onSelectBotHandler,
botStatus,
idx,
expressionText,
reply,
}) => {
const [isChatBotInfoVisible, setIsChatBotInfoVisible] = useState<boolean>(false);
const displayChatBotInfo = () => setIsChatBotInfoVisible(true);
return (
<Box style={botStatus ? selectedWrapper : unSelectedWrapper}>
<Typography variant="h5" style={initials}>
{intentName}
</Typography>
<InfoIcon style={info} onClick={displayChatBotInfo} />
{isChatBotInfoVisible && (
<ChatBotInfo setIsChatBotInfoVisible={setIsChatBotInfoVisible} expressionText={expressionText} reply={reply} />
)}
<Typography variant="h6" style={sampleInitials}>
Description:-
</Typography>
<Typography variant="h6" style={desc}>
{description}
</Typography>
<Box style={innerWrapper}>
<Typography variant="h6" style={sampleInitials}>
Sample Training Expression:-
</Typography>
<Typography variant="h6" style={expr}>
{sampleExpr}
</Typography>
</Box>
<Button onClick={onSelectBotHandler(idx)} style={importBtn} variant="contained" color="secondary">
{botStatus ? 'Select' : 'UnSelect'}
</Button>
</Box>
);
};