show commits in news section

src/ui/components/news/NewsSection.css

@@ -2,6 +2,7 @@
   background-color: rgba(106, 105, 106, 0.6);
 
   display: flex;
+  flex-direction: column;
   
   position: absolute;
 
@@ -17,7 +18,7 @@
 
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
 
   font-weight: bold;
@@ -42,4 +43,27 @@
 
 .NewsTab.selected {
   border-bottom: 1px solid #ffc61e;
+}
+
+.NewsContent {
+  overflow-y: auto;
+}
+
+.Commit {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  color: #fff;
+
+  margin: 8px;
+}
+
+.CommitAuthor {
+  font-weight: bold;
+}
+
+.CommitMessage {
+  width: 60%;
 }

src/ui/components/news/NewsSection.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable indent */
+import { invoke } from '@tauri-apps/api/tauri'
 import React from 'react'
 import Tr from '../../../utils/language'
 
@@ -9,6 +11,7 @@ interface IProps {
 
 interface IState {
   selected: string;
+  news: any;
 }
 
 export default class NewsSection extends React.Component<IProps, IState> {
@@ -16,14 +19,58 @@ export default class NewsSection extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      selected: props.selected || 'commits'
+      selected: props.selected || 'commits',
+      news: null
     }
 
     this.setSelected = this.setSelected.bind(this)
+    this.showNews = this.showNews.bind(this)
   }
 
   setSelected(item: string) {
     this.setState({ selected: item })
+
+    this.showNews()
+  }
+
+  async showLatestCommits() {
+    const commits: string = await invoke('req_get', { url: 'https://api.github.com/repos/Grasscutters/Grasscutter/commits' })
+    const obj = JSON.parse(commits)
+    
+    // Get only first 5
+    const commitsList = obj.slice(0, 5)
+    const commitsListHtml = commitsList.map((commit: any) => {
+      return (
+        <div className="Commit" key={commit.sha}>
+          <div className="CommitAuthor">{commit.commit.author.name}</div>
+          <div className="CommitMessage">{commit.commit.message.substring(0, 50) + '...'}</div>
+        </div>
+      )
+    })
+
+    return commitsListHtml
+  }
+
+  async showNews() {
+    let news = <div></div>
+
+    switch(this.state.selected) {
+      case 'commits':
+        news = await this.showLatestCommits()
+        break
+
+      case 'latest_version':
+        news = <div>Latest version</div>
+        break
+
+      default:
+        news = <div>Unknown</div>
+        break
+    }
+
+    this.setState({
+      news
+    })
   }
 
   render() {
@@ -33,12 +80,13 @@ export default class NewsSection extends React.Component<IProps, IState> {
           <div className={'NewsTab ' + (this.state.selected === 'commits' ? 'selected' : '')} id="commits" onClick={() => this.setSelected('commits')}>
             <Tr text="news.latest_commits" />
           </div>
-        </div>
-        <div className="NewsTabs">
           <div className={'NewsTab ' + (this.state.selected === 'latest_version' ? 'selected' : '')} id="latest_version" onClick={() => this.setSelected('latest_version')}>
             <Tr text="news.latest_version" />
           </div>
         </div>
+        <div className="NewsContent">
+          {this.state.news}
+        </div>
       </div>
     )
   }