Skip to content

Instantly share code, notes, and snippets.

@mrhat24

mrhat24/DetailJudging.js

Created May 24, 2022 12:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mrhat24/d0d5a6c04b57a4f752c21b60e19496d8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mrhat24/d0d5a6c04b57a4f752c21b60e19496d8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
DetailJudging.js
import React, { useEffect, useMemo, useState } from 'react';
import classnames from 'classnames';
import { useGetDetailJudging } from '../../../hooks';
import { MainFieldsDetailJudging } from './MainFieldsDetailJudging';
import { Icon } from 'uiKit/Icon';
import { Button } from 'uiKit/Button';
import {
getFileType,
MAIN_URL,
REQUEST_PROPERTIES_CODE,
REQUEST_STATUS
} from '../../../Utils';
import { QUERY_KEYS } from '../../../QueryClient';
import { LeagueAnswerContent } from './LeagueAnswerContent';
import update from 'immutability-helper';
import { setScrollTopPage } from '../../../Utils/functions';
import './DetailJudging.scss';
import { api } from '../../../Api';
import { useMutation, useQueryClient } from 'react-query';
const icons = {
image: 'img',
doc: 'add-folder',
video: 'play'
};
const defaultLang = 'ru';
const newJudge = () => {
return '';
};
const getValueSource = () => ({
judge: {
code: REQUEST_PROPERTIES_CODE.JUDGE,
value: [newJudge()]
},
league_comment: {
code: REQUEST_PROPERTIES_CODE.LEAGUE_COMMENT,
value: ''
},
episode_decision: {
code: REQUEST_PROPERTIES_CODE.DECISION,
value: ''
},
league_answer_number: {
code: REQUEST_PROPERTIES_CODE.LEAGUE_ANSWER_NUMBER,
value: ''
}
});
const getLandAndDataLeagueAnswer = (dataDetail) => {
if (dataDetail?.properties) {
const checkLang = Object.entries(dataDetail?.properties)
.map(([, value]) => value)
.filter((el) => el.lang);
const lang = checkLang?.[0]?.lang;
const initData = {
status: REQUEST_STATUS.REWIEWED,
properties: [
{
code: REQUEST_PROPERTIES_CODE.LEAGUE_ANSWER,
value: [
...(dataDetail?.properties?.[`episode@${lang}`]?.value ?? []),
...(dataDetail?.properties?.episode?.value ?? [])
].map(() => getValueSource())
}
]
};
return {
lang,
dataLeagueAnswer: initData
};
}
return {
lang: defaultLang,
dataLeagueAnswer: ''
};
};
export const DetailJudging = (props) => {
const { id, onCloseDetail } = props;
const {
data: dataDetail,
isLoading: isLoadingDetailJudging,
refetch
} = useGetDetailJudging(id);
const [activeValidate, updateActiveValidate] = useState(false);
const [listLeagueAnswerErrors, updateListLeagueAnswerErrors] = useState({});
const queryClient = useQueryClient();
const { lang, dataLeagueAnswer } = useMemo(
() => getLandAndDataLeagueAnswer(dataDetail),
[dataDetail]
);
const isActiveEng = lang !== defaultLang;
const propElement = (propEl) => (isActiveEng ? `${propEl}@${lang}` : propEl);
const detailStatusEndCheck = dataDetail?.state?.[0]?.state
? dataDetail?.state?.[0]?.state === REQUEST_STATUS.REWIEWED
: false;
const checkValueOfLeagueAnswer =
dataDetail?.state[0]?.state_parameters?.writeFields &&
dataDetail?.state[0]?.state_parameters?.writeFields?.find(
(el) => el === REQUEST_PROPERTIES_CODE.LEAGUE_ANSWER
);
const callbackSendLeagueAnswer = () => {
onCloseDetail();
setScrollTopPage();
onCloseDetail();
queryClient.invalidateQueries(QUERY_KEYS.JUDGING_ELEMENTS);
};
const updateJudging = useMutation(
(id) => {
return api.judging.updateJudging(id, dataLeagueAnswer);
},
{
onSuccess: (data) => {
if (data?.data?.success) {
callbackSendLeagueAnswer();
} else {
console.log('error', data?.data?.data?.message);
}
}
}
);
const handlerAddJudge = (episodeIndex) => {
update(dataLeagueAnswer, {
properties: {
[0]: {
value: {
[episodeIndex]: {
judge: {
value: {
$push: [newJudge()]
}
}
}
}
}
}
});
refetch();
};
const handlerChangeEpisode = (episodeIndex, data) => {
update(dataLeagueAnswer, {
properties: {
[0]: {
value: {
[episodeIndex]: {
episode_decision: {
$set: data.properties[0].value[episodeIndex].episode_decision
},
judge: {
$set: data.properties[0].value[episodeIndex].judge
},
league_comment: {
$set: data.properties[0].value[episodeIndex].league_comment
},
league_answer_number: {
value: {
$set: `${episodeIndex + 1}`
}
}
}
}
}
}
});
refetch();
};
const getValidForm = () => {
if (!activeValidate) {
updateActiveValidate(true);
}
return Object.keys(listLeagueAnswerErrors).length === 0;
};
const handlerSubmitLeagueAnswer = () => {
const isValid = getValidForm();
if (isValid) {
updateJudging.mutateAsync(id);
}
};
const leagueAnswerBtns = (
<div className='answer-detail-request__btns'>
<Button size='middle' onClick={handlerSubmitLeagueAnswer}>
Рассмотрен
</Button>
</div>
);
const episodeJsx =
dataDetail?.properties?.[propElement('episode')]?.value?.length > 0 &&
dataDetail.properties[propElement('episode')].value.map((el, index) => {
const filesArray =
el?.value?.file_description?.value?.length &&
el.value.file_description.value.map((item) => ({
id: item.id,
name: item.description,
type: getFileType(item.description.split('.').pop()),
value: item.value
}));
const episodeNumberId = el.value.episode_number.value[0].value;
const leagueAnswerShort =
dataDetail?.properties?.league_answer?.value?.[index]?.value;
const checkLeagueAnswerNumber =
leagueAnswerShort?.league_answer_number?.value?.[0]?.value ===
episodeNumberId;
const leagueAnswerJudges =
checkLeagueAnswerNumber &&
leagueAnswerShort?.judge?.value?.map((item, index) => {
return (
<span key={`judge-id-${item.id}`}>
{(index ? ', ' : '') + item.value}
</span>
);
});
const leagueAnswerDecision =
checkLeagueAnswerNumber &&
leagueAnswerShort?.episode_decision?.value?.[0]?.value === '1'
? 'Верное'
: 'Не верное';
const leagueAnswerLeagueComment =
checkLeagueAnswerNumber &&
leagueAnswerShort?.league_comment?.value?.[0]?.value;
const filesJsxEpisode =
filesArray?.length &&
filesArray.map((file) => {
return (
<div key={file.id} className='file-detail-request col-lg-6 col-12'>
<a
href={`${MAIN_URL.URL}/files/${file.value}`}
target='_blank'
rel='noreferrer'
className='file-detail-request__link'
>
<div className='file-detail-request__img'>
<Icon icon={icons[file.type]} />
</div>
<div className='file-detail-request__title'>{file.name}</div>
</a>
</div>
);
});
return (
<div key={el.id} className='detail-episode-item'>
<div className='detail-episode-item__label'>
Эпизод № {el.value.episode_number.value[0].value}
</div>
<div className='detail-request__content'>
<div className='row'>
<div className='offset-lg-1 col-md-8 offset-md-2 col-12'>
{el?.value?.description?.value?.[0]?.value && (
<div className='detail-request__description'>
{el.value.description.value[0].value}
</div>
)}
{el?.value?.file_description?.value?.length && (
<div className='detail-request__files'>
<div className='row'>{filesJsxEpisode}</div>
</div>
)}
{el?.value?.link?.value?.[0]?.value && (
<div className='detail-request__link'>
<div className='detail-request__title label'>Ссылка</div>
<a href={el.value.link.value[0].value}>
{el.value.link.value[0].value}
</a>
</div>
)}
</div>
</div>
</div>
{detailStatusEndCheck && (
<div className='answer-detail-request league-answer'>
<div className='row'>
<div className='offset-lg-1 offset-md-2 col-md-11 col-12'>
<div className='answer-detail-request__title label'>
Ответ Лиги
</div>
</div>
<div className='offset-lg-1 offset-md-2 col-md-4 col-12'>
<div className='label'>Судьи:</div>
<div className='answer-detail-request__judges'>
{leagueAnswerJudges}
</div>
</div>
<div className='col-md-4 col-12'>
<div className='label'>Решение по эпизоду:</div>
<div className='answer-detail-request__episode-decision'>
{leagueAnswerDecision}
</div>
</div>
<div className='offset-lg-1 offset-md-2 col-md-8 col-12'>
<div className='answer-detail-request__league_comment'>
{leagueAnswerLeagueComment}
</div>
</div>
</div>
</div>
)}
{checkValueOfLeagueAnswer && (
<LeagueAnswerContent
key={el.id + index + 1}
episodeIndex={index}
data={dataLeagueAnswer}
activeValidate={activeValidate}
onChangeErrors={(data) => {
updateListLeagueAnswerErrors(data);
}}
addJudge={handlerAddJudge}
onChange={handlerChangeEpisode}
/>
)}
</div>
);
});
return (
<>
{!isLoadingDetailJudging && dataDetail && (
<div
className={classnames('detail-request', {
'detail-request--finished': detailStatusEndCheck
})}
>
{dataDetail && <MainFieldsDetailJudging dataDetail={dataDetail} />}
<div className='detail-episode__list'>{episodeJsx}</div>
{checkValueOfLeagueAnswer && leagueAnswerBtns}
</div>
)}
</>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment