102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import { DeleteOutlined } from '@ant-design/icons';
|
|
import { CustomInput } from '../../view/CustomInput';
|
|
import { LinkButton } from '../../view/LinkButton';
|
|
import { OutlinedButton } from '../../view/OutlinedButton';
|
|
import { Experience } from '../../../types/education';
|
|
import { i18nText } from '../../../i18nKeys';
|
|
import {useLocalStorage} from "../../../hooks/useLocalStorage";
|
|
import {AUTH_TOKEN_KEY} from "../../../constants/common";
|
|
|
|
type ExperiencesContentProps = {
|
|
experiences?: Experience[];
|
|
update: (ex?: Experience[]) => void;
|
|
locale: string;
|
|
};
|
|
|
|
export const ExperiencesContent = ({
|
|
experiences,
|
|
update,
|
|
locale
|
|
}: ExperiencesContentProps) => {
|
|
const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
|
|
|
|
const addExperience = () => {
|
|
const ex = {
|
|
title: undefined,
|
|
description: undefined,
|
|
};
|
|
|
|
update(experiences?.length > 0
|
|
? [
|
|
...experiences,
|
|
ex
|
|
]
|
|
: [ex]);
|
|
};
|
|
|
|
const deleteExperience = (index: number) => {
|
|
update([...experiences].filter((ex, i) => i !== index));
|
|
};
|
|
|
|
const onChangeName = (val: string, index: number) => {
|
|
update(experiences?.map((ex, i) => {
|
|
if (i === index) {
|
|
return {
|
|
...ex,
|
|
title: val,
|
|
}
|
|
}
|
|
|
|
return ex;
|
|
}));
|
|
};
|
|
|
|
const onChangeDesc = (val: string, index: number) => {
|
|
update(experiences?.map((ex, i) => {
|
|
if (i === index) {
|
|
return {
|
|
...ex,
|
|
description: val,
|
|
}
|
|
}
|
|
|
|
return ex;
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<div className="b-edu-content">
|
|
<div className="b-edu-list">
|
|
{experiences?.map(({ title, description}, index) => (
|
|
<div className="b-edu-list__item" key={`ex_${index}`}>
|
|
<div>
|
|
<CustomInput
|
|
value={title}
|
|
placeholder={i18nText('name', locale)}
|
|
onChange={(e) => onChangeName(e?.target?.value, index)}
|
|
/>
|
|
<CustomInput
|
|
value={description}
|
|
placeholder={i18nText('description', locale)}
|
|
onChange={(e) => onChangeDesc(e?.target?.value, index)}
|
|
/>
|
|
</div>
|
|
<LinkButton
|
|
type="link"
|
|
danger
|
|
icon={<DeleteOutlined />}
|
|
onClick={() => deleteExperience(index)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<OutlinedButton
|
|
type="link"
|
|
onClick={addExperience}
|
|
>
|
|
{i18nText('addNew', locale)}
|
|
</OutlinedButton>
|
|
</div>
|
|
);
|
|
};
|