show commits in news section

lang/en.json

@@ -22,7 +22,7 @@
     "download": "Download"
   },
   "news": {
-    "latest_commits": "Commits",
+    "latest_commits": "Recent Commits",
     "latest_version": "Latest Version"
   }
 }

src-tauri/src/main.rs

@@ -3,7 +3,6 @@ all(not(debug_assertions), target_os = "windows"),
 windows_subsystem = "windows"
 )]
 
-use std::borrow::Borrow;
 use open;
 use structs::{APIQuery};
 
@@ -20,6 +19,7 @@ fn main() {
       disconnect,
       run_program,
       run_jar,
+      req_get,
       get_bg_file,
       downloader::download_file,
       downloader::stop_download,
@@ -65,6 +65,15 @@ fn run_jar(path: String, execute_in: String) {
   };
 }
 
+#[tauri::command]
+async fn req_get(url: String) -> String {
+  // Send a GET request to the specified URL.
+  let response = web::query(&url.to_string()).await;
+
+  // Send the response body back to the client.
+  return response;
+}
+
 #[tauri::command]
 async fn get_bg_file() -> String {
     let query = web::query("https://api.grasscutters.xyz/cultivation/query").await;

src-tauri/src/web.rs

@@ -1,4 +1,8 @@
+use reqwest::header::USER_AGENT;
+
 pub(crate) async fn query(site: &str) -> String {
-    let response = reqwest::get(site).await.unwrap();
+    let client = reqwest::Client::new();
+
+    let response = client.get(site).header(USER_AGENT, "cultivation").send().await.unwrap();
     return response.text().await.unwrap();
 }

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;
@@ -43,3 +44,26 @@
 .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>
     )
   }