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

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

type CertificatesContentProps = {
    certificates?: Certificate[];
    update: (cert?: Certificate[]) => void;
    associations?: Association[];
    associationLevels?: AssociationLevel[];
    locale: string;
};

export const CertificatesContent = ({
    certificates,
    update,
    associations,
    associationLevels,
    locale
}: CertificatesContentProps) => {
    const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');

    const addCertificate = () => {
        const cert = {
            associationLevelId: undefined,
            document: null
        };

        update(certificates?.length > 0
            ? [
                ...certificates,
                cert
            ]
            : [cert]);
    };

    const deleteCertificate = (index: number) => {
        update([...certificates].filter((cert, i) => i !== index));
    };

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

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

        return true;
    }

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

            return cert;
        }));
    };

    const onChangeAssociation = (val: number, index: number) => {
        update(certificates?.map((cert, i) => {
            if (i === index) {
                return {
                    ...cert,
                    associationId: val,
                    associationLevelId: undefined
                }
            }

            return cert;
        }));
    };

    const onChangeLevel = (val: number, index: number) => {
        update(certificates?.map((cert, i) => {
            if (i === index) {
                return {
                    ...cert,
                    associationLevelId: val
                }
            }

            return cert;
        }));
    };

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

                return cert;
            }));
        }
    };

    return (
        <div className="b-edu-content">
            <div className="b-edu-list">
                {certificates?.map(({ associationId, associationLevelId, document: file }, index) => {
                    let cAssociationId = associationId;

                    if (!cAssociationId) {
                        const [cAssLvl] = associationLevels ? associationLevels.filter(({ id }) => id === associationLevelId) : [];

                        if (cAssLvl?.associationId) {
                            cAssociationId = associations ? associations.filter(({ id }) => id === cAssLvl.associationId)[0]?.id : undefined;
                        }
                    }

                    return (
                        <div className="b-edu-list__item" key={`cert_${index}`}>
                            <div>
                                <CustomSelect
                                    value={cAssociationId}
                                    label={i18nText('association', locale)}
                                    options={associations?.map(({ id, name }) => ({ value: id, label: name })) || []}
                                    onChange={(val) => onChangeAssociation(val, index)}
                                    style={{ maxWidth: 320, minWidth: 320 }}
                                />
                                <CustomSelect
                                    value={associationLevelId}
                                    label={i18nText('level', locale)}
                                    options={associationLevels && associationLevels.length > 0
                                        ? associationLevels
                                            .filter(({ associationId }) => associationId === cAssociationId)
                                            .map(({ id, name }) => ({ value: id, label: name }))
                                        : []}
                                    onChange={(val) => onChangeLevel(val, index)}
                                />
                                {/*<Upload
                                    fileList={tmpFile ? [tmpFile] : file ? [
                                        {
                                            uid: file.original?.id,
                                            name: file.fileName,
                                            status: 'done',
                                            url: file.original?.url
                                        }
                                    ] : undefined}
                                    accept=".jpg,.jpeg,.png,.pdf"
                                    beforeUpload={(file) => beforeUpload(file as UploadFile, index)}
                                    multiple={false}
                                    onRemove={() => onRemoveFile(index)}
                                >
                                    <LinkButton type="link">{i18nText('addDiploma', locale)}</LinkButton>
                                </Upload>*/}
                                <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={() => deleteCertificate(index)}
                            />
                        </div>
                    )
                })}
            </div>
            <OutlinedButton
                type="link"
                onClick={addCertificate}
            >
                {i18nText('addNew', locale)}
            </OutlinedButton>
        </div>
    );
};