Требуется вводная информация по соглашению об именах для переменных, функций и компонентов для мини-приложения React / Typescript

Я всегда получал эту обратную связь, чтобы улучшить соглашение об именах для переменных и функций / компонентов. Несколько дней назад я отправил задание по кодированию на собеседование, но не дошел до финального раунда. В основном было 2 отзыва

  1. Ошибка установки npm (неправда, поскольку я запустил репозиторий Github с нуля, и он сработал).
  2. Названия функций и переменных немного сбивали с толку.
  3. Текст не всегда читался.

Это действительно расстраивает, так как я получал этот отзыв пару раз во время проверки кода в моей предыдущей компании. Я прочитал много фрагментов кода и статей, чтобы понять соглашение об именах, и подумал, что стал лучше. Я буду очень признателен, если я смогу получить отзывы об именах переменных, функций, компонентов. Это будет действительно полезно для меня в решении проблемы кодирования.

Утверждает: —

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

0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *