Support to update star and fork dynamically (#259)

apache · Jan 11, 2021 · 4ba7100 · 4ba7100
1 parent 5381ace
commit 4ba7100
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { getScrollTop, getLink } from '../../../utils';
+import { getScrollTop, getLink, getKiloUnit } from '../../../utils';
 import Header from '../../components/header';
 import Button from '../../components/button';
 import Footer from '../../components/footer';
@@ -34,18 +34,18 @@ class Home extends Language {
       }
     });
     // 写死协议，因github会做协议跳转，这种跳转会被Safari拦截
-    // fetch('https://api.github.com/repos/apache/incubator-dolphinscheduler')
-    //     .then(res => res.json())
-    //     .then((data) => {
-    //       this.setState({
-    //         starCount: data.stargazers_count,
-    //         forkCount: data.forks_count,
-    //       });
-    //     });
+    fetch('https://api.github.com/repos/apache/incubator-dolphinscheduler')
+        .then(res => res.json())
+        .then((data) => {
+          this.setState({
+            starCount: data.stargazers_count,
+            forkCount: data.forks_count,
+          });
+        });
   }
 
   render() {
-    // const { starCount, forkCount } = this.state;
+    const { starCount, forkCount } = this.state;
     const language = this.getLanguage();
     const dataSource = homeConfig[language];
     const { headerType } = this.state;
@@ -75,13 +75,13 @@ class Home extends Language {
               <a href="https://github.com/apache/incubator-dolphinscheduler" target="_blank" rel="noopener noreferrer">
                 <div className="star">
                   <img src="https://img.alicdn.com/tfs/TB1FlB1JwHqK1RjSZFPXXcwapXa-32-32.png" />
-                  <span className="count">4.7K </span>
+                  <span className="count" style={{display:starCount?'inline-block':'none'}}>{getKiloUnit(starCount)}</span>
                 </div>
               </a>
               <a href="https://github.com/apache/incubator-dolphinscheduler/fork" target="_blank" rel="noopener noreferrer">
                 <div className="fork">
                   <img src="https://img.alicdn.com/tfs/TB1zbxSJwDqK1RjSZSyXXaxEVXa-32-32.png" />
-                  <span className="count">1.6K </span>
+                  <span className="count" style={{display:forkCount?'inline-block':'none'}}>{getKiloUnit(forkCount)}</span>
                 </div>
               </a>
             </div>

diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
@@ -139,6 +139,7 @@
             padding-left: 4px;
             display: inline-block;
             height: 100%;
+            min-width: 30px;
           }
         }
       }

diff --git a/utils/index.js b/utils/index.js
@@ -34,3 +34,5 @@ export const parseJSONStr = (str) => {
     return str;
   }
 }
+
+export const getKiloUnit = (val) => typeof val === 'number' ? `${Math.round(val / 100) / 10}K` : val