diff --git a/src/api/deck/convert.ts b/src/api/deck/convert.ts new file mode 100644 index 0000000..369707c --- /dev/null +++ b/src/api/deck/convert.ts @@ -0,0 +1,35 @@ +import {axios} from '../../lib/axios'; +import {CONVERT_API_URL} from './urlKeys'; +import {MutationConfig} from '../../lib/react-query'; +import {useMutation} from '@tanstack/react-query'; + +export type ConvertDTO = { + pdf: File; +}; + +export type ConvertResponse = { + pdf: string; + pptx: string; +}; + +export const convert = (data: ConvertDTO): Promise => { + const inputData = new FormData(); + inputData.append('pdf', data.pdf); + + return axios.post(CONVERT_API_URL, inputData, { + headers: { + 'Content-Type': 'multipart/form-data' + } + }); +}; + +type UseConvertOptions = { + config?: MutationConfig; +}; + +export const useConvert = ({ config }: UseConvertOptions = {}) => { + return useMutation({ + ...config, + mutationFn: convert + }); +}; \ No newline at end of file diff --git a/src/api/deck/urlKeys.ts b/src/api/deck/urlKeys.ts index e008f4a..65da739 100644 --- a/src/api/deck/urlKeys.ts +++ b/src/api/deck/urlKeys.ts @@ -8,4 +8,6 @@ export const QUESTION_PARAM_QUESTION_ID = 'questionId'; export const QUESTION_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/:${QUESTION_PARAM_QUESTION_ID}`; export const DECK_PARAM = 'deckId'; -export const DECK_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/presentation`; \ No newline at end of file +export const DECK_API_URL = `/decks/question/:${FIRST_QUESTION_PARAM}/presentation`; + +export const CONVERT_API_URL = '/decks/pdf-to-pptx'; \ No newline at end of file diff --git a/src/pages/deck/DeckPage.module.scss b/src/pages/deck/DeckPage.module.scss index cb42af6..95e2aa9 100644 --- a/src/pages/deck/DeckPage.module.scss +++ b/src/pages/deck/DeckPage.module.scss @@ -3,6 +3,7 @@ .DeckPage { position: relative; height: 100svh; + color: $color-text-dark; } .DeckPage__loader { @@ -11,4 +12,12 @@ position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); +} + +.DeckPage__link { + cursor: pointer; +} + +.DeckPage__span { + font-size: 14px; } \ No newline at end of file diff --git a/src/pages/deck/DeckPage.tsx b/src/pages/deck/DeckPage.tsx index c125fb2..32c59f3 100644 --- a/src/pages/deck/DeckPage.tsx +++ b/src/pages/deck/DeckPage.tsx @@ -1,15 +1,16 @@ import {ReactFCC} from '../../utils/ReactFCC'; -import {PDFViewer} from '@react-pdf/renderer'; +import {PDFDownloadLink} from '@react-pdf/renderer'; import {useUrlParam} from '../../hooks/useUrlParam'; import {DECK_PAGE_PARAM} from '../../app/routes'; import {MyDocument} from './document/Document'; import {useDeck} from '../../api/deck/getDeck'; -import {useEffect, useRef, useState} from 'react'; +import {useCallback, useEffect, useRef, useState} from 'react'; import {generateMarketChart} from './document/media/generateMarketChart'; import {Loader} from '../../components/Loader'; import s from './DeckPage.module.scss'; import {generateFinancialChart} from './document/media/generateFinancialChart'; import {generateGrowChart} from './document/media/generateGrowChart'; +import {useConvert} from '../../api/deck/convert'; export const DeckPage: ReactFCC = () => { const deckId = useUrlParam(DECK_PAGE_PARAM, {parser: parseInt}); @@ -70,21 +71,58 @@ export const DeckPage: ReactFCC = () => { }, 3000); }, []); + const { mutateAsync: convert, isLoading } = useConvert(); + + const getPptxLink = useCallback(async (blob: Blob | null) => { + if (!blob || isLoading) { + return; + } + + const file = new File([blob], "name", { + type: 'application/pdf' + }); + + const data = await convert({ pdf: file }); + + if (data.pptx) { + window.open(data.pptx,'_blank', 'noopener'); + } + }, [convert, isLoading]) + return (
{!rendered && ( )} {data && marketChart && financialChart && growChart ? ( - + setRendered(true)} data={data} marketChart={marketChart} financialChart={financialChart} growChart={growChart} - /> - + />} + fileName="somename.pdf"> + {({ blob, url, error }) => +
+ <> + {error && `Ошибка: ${error}`} + + {blob && ( + <> +
getPptxLink(blob)}>Скачать PPTX
+ {isLoading &&
Загрузка...
} + + )} + + {url && ( +