bbuddy-ui/src/components/Modals/educationModalContent/Trainings.tsx

import { DeleteOutlined } from '@ant-design/icons';
import { CustomInput } from '../../view/CustomInput';
import { LinkButton } from '../../view/LinkButton';
import { OutlinedButton } from '../../view/OutlinedButton';
import { Details } from '../../../types/education';
import { i18nText } from '../../../i18nKeys';
import { Upload, UploadFile } from 'antd';
import { validateDoc } from '../../../utils/account';
import { useLocalStorage } from '../../../hooks/useLocalStorage';
import { AUTH_TOKEN_KEY } from '../../../constants/common';

type TrainingsContentProps = {
    trainings?: Details[];
    update: (tr?: Details[]) => void;
    locale: string;
};

export const TrainingsContent = ({
    trainings,
    update,
    locale
}: TrainingsContentProps) => {
    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');

    const addTrainings = () => {
        const training = {
            title: undefined,
            description: undefined,
            document: null
        };

        update(trainings?.length > 0
            ? [
                ...trainings,
                training
            ]
            : [training]);
    };

    const deleteTrainings = (index: number) => {
        update([...trainings].filter((tr, i) => i !== index));
    };

    const beforeUpload = (file: UploadFile) => {
        const isValid = validateDoc(file);

        if (!isValid) {
            return Upload.LIST_IGNORE;
        }

        return true;
    }

    const onRemoveFile = (index: number) => {
        update(trainings?.map((tr, i) => {
            if (i === index) {
                return {
                    ...tr,
                    document: null,
                }
            }

            return tr;
        }));
    };

    const onChange = (file: any, index: number) => {
        if (file?.response) {
            update([...trainings].map((tr, i) => {
                if (i === index) {
                    return {
                        ...tr,
                        document: file?.response || null,
                    }
                }

                return tr;
            }));
        }
    };

    const onChangeName = (val: string, index: number) => {
        update(trainings?.map((tr, i) => {
            if (i === index) {
                return {
                    ...tr,
                    title: val,
                }
            }

            return tr;
        }));
    };

    const onChangeDesc = (val: string, index: number) => {
        update(trainings?.map((tr, i) => {
            if (i === index) {
                return {
                    ...tr,
                    description: val,
                }
            }

            return tr;
        }));
    };

    return (
        <div className="b-edu-content">
            <div className="b-edu-list">
                {trainings?.map(({ title, description, document: file}, index) => (
                    <div className="b-edu-list__item" key={`training_${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)}
                            />
                            <Upload
                                fileList={file ? [
                                    {
                                        uid: file.original?.id,
                                        name: file.fileName,
                                        status: 'done',
                                        url: file.original?.url
                                    }
                                ] : undefined}
                                accept=".jpg,.jpeg,.png,.pdf"
                                beforeUpload={beforeUpload}
                                multiple={false}
                                onRemove={() => onRemoveFile(index)}
                                action="https://api.bbuddy.expert/api/home/uploadfile"
                                method="POST"
                                headers={{
                                    authorization: `Bearer ${jwt}`,
                                    'X-User-Language': locale,
                                    'X-Referrer-Channel': 'site',
                                }}
                                onChange={(obj) => onChange(obj.file, index)}
                            >
                                <LinkButton type="link">{i18nText('addDiploma', locale)}</LinkButton>
                            </Upload>
                        </div>
                        <LinkButton
                            type="link"
                            danger
                            icon={<DeleteOutlined />}
                            onClick={() => deleteTrainings(index)}
                        />
                    </div>
                ))}
            </div>
            <OutlinedButton
                type="link"
                onClick={addTrainings}
            >
                {i18nText('addNew', locale)}
            </OutlinedButton>
        </div>
    );
};