Task4: Circle of contributors #851
Conversation
feat(contributor-button): 添加数据未找到组件并初始化React模块- 创建DataNotFound组件，用于在未找到数据时展示可能的原因。- 在index.ts中引入contributor_button模块，确保其在页面加载时被初始化。 - 初始化contributor_button模块的React组件，包括状态管理、数据获取和视图渲染逻辑。 - 添加必要的类型定义和全局变量，以支持贡献者按钮功能的正确运行。 - 通过ReactModal和Graph组件增强用户界面，提供切换视图的功能。 在贡献者提供了贡献者网络视图 Active Developer Collaboration Network,以及切换按钮,通过点击可以切换贡献者展示视图.增强了对GitHub仓库页面中贡献者列表的展示功能，提供了更丰富的交互体验。
|
|
Confirm if you forgot to run |
|
check and update the format of files with "yarn run prettier --write" |
|
First please sign the CLA
Also, I hope you can adjust the size of the container after you switch back to the original view, so that its size is consistent with the original github
At the same time, please adjust the style of the switch button to keep it consistent with GitHub's native style, such as this font style and border In addition, the following changes can be made by switching views. When the current view is a contributor's avatar, the button content is the developer collaboration network. When the current content is the developer collaboration network, the button content is the contributor list, and the button content is replaced by English.
|
src/pages/ContentScripts/features/contributor_button/DataNotFound.tsx
Outdated
Show resolved
Hide resolved
…tyle; ② Revise English annotations and prettier checks, and remove additional images and explanatory documents; ③ The components have been modified according to the unified format and code specifications.
# Conflicts: # src/pages/ContentScripts/features/contributor_button/index.tsx # src/pages/ContentScripts/features/contributor_button/view.tsx
|
Thank you for your valuable suggestions. I have improved and submitted the feature functionality as requested. |
|
Thanks for the edit! Could you give me a diagram to show me what it looks like after the warehouse is switched when the network graph data cannot be found? |
| // Define the View component | ||
| const View = ({ developerNetwork, target }: Props): JSX.Element => { | ||
| // Define state variables, including options, whether to show the chart, and whether to show the repository network | ||
| const [options, setOptions] = useState<HypercrxOptions>(defaults); | ||
| const [showGraph, setShowGraph] = useState(true); | ||
| const [showRepoNetwork, setShowRepoNetwork] = useState(false); | ||
|
|
||
| // Use the translation function | ||
| const { t, i18n } = useTranslation(); | ||
|
|
||
| // Use the useEffect hook to handle side effects, including fetching options and changing the language | ||
| useEffect(() => { | ||
| (async function () { | ||
| setOptions(await optionsStorage.getAll()); | ||
| i18n.changeLanguage(options.locale); | ||
| })(); | ||
| }, [options.locale]); | ||
|
|
||
| // Return JSX elements, including a button and a conditionally rendered chart or target HTML |
There was a problem hiding this comment.
I like your comments, but some of these are not needed. Let's remove the comments here and similar simple comments elsewhere. Thanks!
| import React from 'react'; | ||
|
|
||
| const DataNotFound = () => { | ||
| return ( | ||
| <div | ||
| style={{ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| color: 'var(--color-fg-muted)', | ||
| }} | ||
| > | ||
| <h3>Data Not Found</h3> | ||
| <div style={{ width: '300px', margin: '2em' }}> | ||
| <p>Possible reasons are:</p> | ||
| <ul style={{ marginLeft: '1em' }}> | ||
| <li>This repository is too new, so its data has not been generated</li> | ||
| <li>This repository is not active enough, so its data are not generated</li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DataNotFound; |
There was a problem hiding this comment.
Let's move the src/pages/ContentScripts/features/repo-networks/DataNotFound.tsx to src/pages/ContentScripts/components and use it from there. It is important to reuse code instead of duplicate them
Brief Information
This pull request is in the type of (more info about types):
Related issues (all available keywords):
Details
This feature issue is to track task which is mentioned in #808
In order to present warehouse contributors in a more diverse manner, as well as their contribution size and collaborative relationships. We constructed an Active Developer Collaboration Network on the homepage to replace the original Circle of Contributors.
In addition, we have set up a toggle button where users can switch the contributor interface view to the Circle of Contributors by clicking the button.
For more information, please refer to the README_808 of fork repository and feel free to share your views in this issue.
Checklist
Others