57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { Tag } from 'antd';
|
|
import { EditOutlined } from '@ant-design/icons';
|
|
import dayjs from 'dayjs';
|
|
import { ScheduleDTO } from '../../../types/schedule';
|
|
import { i18nText } from '../../../i18nKeys';
|
|
import { getCurrentTime, getTimeString } from '../../../utils/time';
|
|
import { ExpertData } from '../../../types/profile';
|
|
import { LinkButton } from '../../view/LinkButton';
|
|
import { EditExpertScheduleModal } from '../../Modals/EditExpertScheduleModal';
|
|
|
|
type ExpertScheduleProps = {
|
|
locale: string;
|
|
data?: ScheduleDTO;
|
|
updateExpert: (key: keyof ExpertData) => void;
|
|
};
|
|
|
|
export const ExpertSchedule = ({ locale, data, updateExpert }: ExpertScheduleProps) => {
|
|
const [showEdit, setShowEdit] = useState<boolean>(false);
|
|
|
|
return (
|
|
<div className="coaching-section__wrap">
|
|
<div className="coaching-section">
|
|
<div className="coaching-section__title">
|
|
<h2 className="title-h2">{i18nText('schedule', locale)}</h2>
|
|
<LinkButton
|
|
type="link"
|
|
icon={<EditOutlined />}
|
|
onClick={() => setShowEdit(true)}
|
|
/>
|
|
</div>
|
|
<div className="b-schedule-list">
|
|
{data && data?.workingTimes?.map((date, index) => {
|
|
const { startDay, startTimeMin, endTimeMin } = getCurrentTime(date, dayjs().format('Z'));
|
|
|
|
return (
|
|
<div key={`date_${index}`}>
|
|
<Tag className="skills__list__item">{i18nText(startDay, locale)}</Tag>
|
|
<div>{startTimeMin ? getTimeString(startTimeMin) : '00:00'}</div>
|
|
<span>-</span>
|
|
<div>{endTimeMin ? getTimeString(endTimeMin) : '00:00'}</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
<EditExpertScheduleModal
|
|
open={showEdit}
|
|
handleCancel={() => setShowEdit(false)}
|
|
locale={locale}
|
|
data={data}
|
|
refresh={() => updateExpert('schedule')}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|