From 2aa4fa4be60e4e300932a235230f7dc49b94f6f4 Mon Sep 17 00:00:00 2001 From: laixingyou Date: Wed, 27 Sep 2023 20:26:27 +0800 Subject: [PATCH] fix: submit project error and optimize svg download (#240) Signed-off-by: laixingyou --- apps/web/i18n | 2 +- .../analyze/components/DownCardLoadImage.tsx | 305 ++++++++++-------- .../analyze/components/DownloadAndShare.tsx | 92 +++--- .../FormCommunity/OrgUrlInput.tsx | 13 +- .../submitProject/FormCommunity/index.tsx | 8 +- .../submitProject/Misc/InputUrlField.tsx | 7 +- 6 files changed, 235 insertions(+), 192 deletions(-) diff --git a/apps/web/i18n b/apps/web/i18n index 9211644e..1bdcc211 160000 --- a/apps/web/i18n +++ b/apps/web/i18n @@ -1 +1 @@ -Subproject commit 9211644e4aad967bab90750f7478015f1b59fd20 +Subproject commit 1bdcc21179457fb4644fa0d0d31c15b93e638202 diff --git a/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx b/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx index 402bbdd2..6c071baf 100644 --- a/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx +++ b/apps/web/src/modules/analyze/components/DownCardLoadImage.tsx @@ -1,4 +1,4 @@ -import React, { RefObject, useEffect, useRef } from 'react'; +import React, { RefObject, useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'next-i18next'; import classnames from 'classnames'; import { Portal } from '@mui/base/Portal'; @@ -42,21 +42,17 @@ const DownLoadImage = (props: DownLoadImageProps) => { } = props; const { t } = useTranslation(); + const [qrcodeUrl, setQrcodeUrl] = useState(null); + const [dataURL, setDataUrl] = useState(null); const downloadDivRef = useRef(null); - const cardImgRef = useRef(null); - const qrcodeImgRef = useRef(null); - const cardDownRef = useRef(null); - const qrcodeDownRef = useRef(null); + const downloadDivSvg = useRef(null); const { compareItems } = useCompareItems(); useEffect(() => { const fetchData = async () => { - // qrcode img const qrcodeUrl = await genQrcode(window.location.href); - qrcodeImgRef.current!.src = qrcodeUrl; - qrcodeDownRef.current!.src = qrcodeUrl; - // chart img + setQrcodeUrl(qrcodeUrl); if (size === 'middle') { cardRef.current!.style.width = '1200px'; } @@ -68,8 +64,7 @@ const DownLoadImage = (props: DownLoadImageProps) => { }, }); const dataURL = canvas.toDataURL('image/png'); - cardImgRef.current!.src = dataURL; - cardDownRef.current!.src = dataURL; + setDataUrl(dataURL); cardRef.current!.style.removeProperty('width'); await sleep(300); onCompleteLoad(); @@ -82,7 +77,7 @@ const DownLoadImage = (props: DownLoadImageProps) => { return () => { clearTimeout(timer); }; - }, [downloadDivRef, cardRef, cardImgRef, size]); + }, [cardRef]); useEffect(() => { const downLoadImg = async () => { @@ -101,7 +96,7 @@ const DownLoadImage = (props: DownLoadImageProps) => { }); } else { // Capture specific element - const svgDocument = elementToSVG(downloadDivRef.current!); + const svgDocument = elementToSVG(downloadDivSvg.current!); // Inline external resources (fonts, images, etc) as data: URIs await inlineResources(svgDocument.documentElement); // Get SVG string @@ -119,151 +114,177 @@ const DownLoadImage = (props: DownLoadImageProps) => { console.log('error:', e); }); }, [loadingDownLoadImg]); - return ( -
-
- {compareItems.map(({ name, label, level }, index) => { - const host = getProvider(label); - let labelNode = ( - - {name} - - ); - - if (level === Level.REPO) { - labelNode = ( - - {name} - - ); - } - return ( -
- - {labelNode} - {level === Level.COMMUNITY && ( -
- {t('home:community')} -
- )} - {index < compareItems.length - 1 ? ( - vs - ) : null} + if (fileFormat === 'SVG') { + return ( +
+
+ {/* eslint-disable-next-line @next/next/no-img-element */} + + {dataURL && ( +
+ Powered by oss-compass.org
- ); - })} + )} +
+ ); + } else { + return (
- {/* eslint-disable-next-line @next/next/no-img-element */} - -
-
-
- -
-
- {/* eslint-disable-next-line @next/next/no-img-element */} - -
-
-
-

- Powered by oss-compass.org -

-

- Scan the QR code above to read full report -

-
- -
-
- {compareItems.map(({ name, label, level }, index) => { - const host = getProvider(label); +
+ {compareItems.map(({ name, label, level }, index) => { + const host = getProvider(label); + + let labelNode = ( + + {name} + + ); - let labelNode = ( - + if (level === Level.REPO) { + labelNode = ( + {name} - + ); + } + return ( +
+ + {labelNode} + {level === Level.COMMUNITY && ( +
+ {t('home:community')} +
+ )} + {index < compareItems.length - 1 ? ( + vs + ) : null} +
+ ); + })} +
+
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+
+
+ +
+
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+
+
+

+ Powered by oss-compass.org +

+

+ Scan the QR code above to read full report +

+
+ +
+
+ {compareItems.map(({ name, label, level }, index) => { + const host = getProvider(label); - if (level === Level.REPO) { - labelNode = ( - {name} - + ); - } - return ( -
- - {labelNode} - {level === Level.COMMUNITY && ( -
- {t('home:community')} -
- )} - {index < compareItems.length - 1 ? ( - vs - ) : null} -
- ); - })} -
-
- {/* eslint-disable-next-line @next/next/no-img-element */} - -
-
-
- + + if (level === Level.REPO) { + labelNode = ( + + {name} + + ); + } + return ( +
+ + {labelNode} + {level === Level.COMMUNITY && ( +
+ {t('home:community')} +
+ )} + {index < compareItems.length - 1 ? ( + vs + ) : null} +
+ ); + })}
-
+
{/* eslint-disable-next-line @next/next/no-img-element */} - + +
+
+
+ +
+
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+
+
+

+ Powered by oss-compass.org +

+

+ Scan the QR code above to read full report +

-
-

- Powered by oss-compass.org -

-

- Scan the QR code above to read full report -

-
-
- -
- ); + +
+ ); + } }; export default DownLoadImage; diff --git a/apps/web/src/modules/analyze/components/DownloadAndShare.tsx b/apps/web/src/modules/analyze/components/DownloadAndShare.tsx index 12eb8626..c2d1910b 100644 --- a/apps/web/src/modules/analyze/components/DownloadAndShare.tsx +++ b/apps/web/src/modules/analyze/components/DownloadAndShare.tsx @@ -16,6 +16,7 @@ import Tooltip from '@common//components/Tooltip'; import * as RadioGroup from '@radix-ui/react-radio-group'; import DownCardLoadImage from './DownCardLoadImage'; import { AiOutlineLoading } from 'react-icons/ai'; +import useCompareItems from '@modules/analyze/hooks/useCompareItems'; // import useQueryDateRange from '@modules/analyze/hooks/useQueryDateRange'; // import { format } from 'date-fns'; @@ -32,11 +33,6 @@ const toUnderline = (str) => { const getSvgUrl = (slug, id, yAxisScale, onePointSys, yKey) => { let url = `/chart/${slug}.svg`; - // const { timeStart, timeEnd } = useQueryDateRange(); - // let url = `/chart/${slug}.svg?begin_date=${format( - // timeStart!, - // 'yyyy-MM-dd' - // )}&end_date=${format(timeEnd!, 'yyyy-MM-dd')}`; let metrc = ''; let field = ''; if (id === 'topic_overview') { @@ -72,7 +68,8 @@ const DownloadAndShare = (props: { const { t } = useTranslation(); const router = useRouter(); const slug = router.query.slugs as string; - + const { compareItems } = useCompareItems(); + const len = compareItems.length; const svgUrl = getSvgUrl( slug, cardRef.current.id, @@ -81,9 +78,9 @@ const DownloadAndShare = (props: { yKey ); const [open, setOpen] = useState(false); - const [fileFormat, setFileFormat] = useState('PNG'); - const [loadingDownLoadImg, setLoadingDownLoadImg] = React.useState(false); - const [loadingPrviewImg, setLoadingPrviewImg] = React.useState(false); + const [fileFormat, setFileFormat] = useState('SVG'); + const [loadingDownLoadImg, setLoadingDownLoadImg] = useState(false); + const [loadingPrviewImg, setLoadingPrviewImg] = useState(false); return ( <> @@ -138,39 +135,47 @@ const DownloadAndShare = (props: { >
- +
+ +
+ - - +
+ +
+ -
{loadingPrviewImg && ( @@ -200,20 +205,17 @@ const DownloadAndShare = (props: { setLoadingDownLoadImg(false); }} /> - {/*
- or copy the code below to share -
*/} - + {fileFormat === 'SVG' + ? len === 1 && ( + + ) + : ''}
); }; -const getMarkdownAnchorLink = (id: string) => { - const url = window.origin + window.location.pathname; - return `${url}#${id}`; -}; const TabPanel = ({ badgeSrc, id }: { badgeSrc: string; id: string }) => { const { t } = useTranslation(); const [tab, setTab] = React.useState('Markdown'); diff --git a/apps/web/src/modules/submitProject/FormCommunity/OrgUrlInput.tsx b/apps/web/src/modules/submitProject/FormCommunity/OrgUrlInput.tsx index 3d5a8ab1..65848a15 100644 --- a/apps/web/src/modules/submitProject/FormCommunity/OrgUrlInput.tsx +++ b/apps/web/src/modules/submitProject/FormCommunity/OrgUrlInput.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import Input from '@common/components/Input'; +import { useSubmitUser } from '@modules/auth'; const OrgUrlInput = ({ error, @@ -12,12 +13,22 @@ const OrgUrlInput = ({ onChange: (v: string) => void; }) => { const { t } = useTranslation(); + const { submitUser: user } = useSubmitUser(); + const provider = user?.provider || 'github'; + const providerName = + provider === 'github' + ? t('common:community.github') + : t('common:community.gitee'); return (
{ const url = e.target.value; diff --git a/apps/web/src/modules/submitProject/FormCommunity/index.tsx b/apps/web/src/modules/submitProject/FormCommunity/index.tsx index 6a5eb9d6..bcb6c674 100644 --- a/apps/web/src/modules/submitProject/FormCommunity/index.tsx +++ b/apps/web/src/modules/submitProject/FormCommunity/index.tsx @@ -125,7 +125,9 @@ const FormCommunity = () => { )}
-
社区主页
+
+ {t('submit_project:community_home_page')} +
{
-
社区头像
+
+ {t('submit_project:community_avatar')} +
( onChange={(e) => { setValue(e.target.value); }} - onBlur={() => {}} + onBlur={() => { + if (!value) return; + if (error) return; + onPressEnter?.(value); + setValue(''); + }} />