feat: add extension configuration

Added 3 options to set preferred languages, select default language and time interval

Author: 4gray

README.md

@@ -1,5 +1,9 @@
 # VSC Github Trending
 
+[![Version](https://vsmarketplacebadge.apphb.com/version/4gray.vsc-github-trending.svg)](https://marketplace.visualstudio.com/items?itemName=4gray.vsc-github-trending)
+[![Installs](https://vsmarketplacebadge.apphb.com/installs-short/4gray.vsc-github-trending.svg)](https://marketplace.visualstudio.com/items?itemName=4gray.vsc-github-trending)
+[![Downloads](https://vsmarketplacebadge.apphb.com/downloads-short/4gray.vsc-github-trending.svg)](https://marketplace.visualstudio.com/items?itemName=4gray.vsc-github-trending)
+
 Explore Github Trending repositories directly from Visual Studio Code. Extension is based on React, [Material-UI](https://material-ui.com/), [Trending API](https://github.com/huchenme/github-trending-api) and VSCode Webview API.
 
 <img src="https://raw.githubusercontent.com/4gray/vsc-github-trending/master/screenshot.png" title="VSC Github Trending" />
@@ -10,7 +14,6 @@ Just press `Ctrl+P` or `Cmd+P` and type:
 
 `> GT: Open Github Trending`
 
-
 ## Install
 
 Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
@@ -19,11 +22,41 @@ Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter
 
 Extension is available on [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=4gray.vsc-github-trending#overview)
 
+## Usage and configuration
+
+Use `vsc-github-trending.languages` option to set list of preferred languages which should be displayed in the extension, e.g.:
+
+```
+"vsc-github-trending.languages": [
+    "c++"
+    "css"
+    "java",
+    "javascript",
+    "go",
+    "python",
+    "ruby",
+    "rust",
+    "typescript"
+  ],
+...
+```
+
+_Note: See [list](https://github-trending-api.now.sh/languages) of all supported languages (use `urlParam` for configuration)_
+
+Selected language and time interval could also be configured, e.g.:
+
+```
+"vsc-github-trending.selectedInterval": "daily",
+"vsc-github-trending.selectedLanguage": "javascript",
+...
+```
+
 ## Source Code
 
 Source code of this extension is available on <a href="https://github.com/4gray/vsc-github-trending">Github</a>.
 
 ## Credits
-* [Github Trending API](https://github.com/huchenme/github-trending-api)
-* [VSCode React Starter](https://github.com/rebornix/vscode-webview-react)
-* Hot Icon by [Vaibhav Radhakrishnan](https://thenounproject.com/search/?q=hot&i=551479)
+
+-   [Github Trending API](https://github.com/huchenme/github-trending-api)
+-   [VSCode React Starter](https://github.com/rebornix/vscode-webview-react)
+-   Hot Icon by [Vaibhav Radhakrishnan](https://thenounproject.com/search/?q=hot&i=551479)

ext-src/extension.ts

@@ -4,7 +4,13 @@ import * as vscode from 'vscode';
 export function activate(context: vscode.ExtensionContext) {
     context.subscriptions.push(
         vscode.commands.registerCommand('react-webview.start', () => {
-            ReactPanel.createOrShow(context.extensionPath);
+            const panel = ReactPanel.createOrShow(context.extensionPath);
+
+            // get configuration and send to web application
+            const config = vscode.workspace.getConfiguration(
+                'vsc-github-trending'
+            );
+            panel.sendConfig(config);
         })
     );
 }
@@ -39,6 +45,7 @@ class ReactPanel {
                 column || vscode.ViewColumn.One
             );
         }
+        return ReactPanel.currentPanel;
     }
 
     private constructor(extensionPath: string, column: vscode.ViewColumn) {
@@ -64,7 +71,7 @@ class ReactPanel {
         this._panel.webview.html = this._getHtmlForWebview();
 
         // Listen for when the panel is disposed
-        // This happens when the user closes the panel or when the panel is closed programatically
+        // This happens when the user closes the panel or when the panel is closed programmatically
         this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
 
         // Handle messages from the webview
@@ -81,6 +88,12 @@ class ReactPanel {
         );
     }
 
+    public sendConfig(config: any) {
+        // Send a message to the webview webview.
+        // You can send any JSON serializable data.
+        this._panel.webview.postMessage({ command: 'configuration', config });
+    }
+
     public dispose() {
         ReactPanel.currentPanel = undefined;
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vsc-github-trending",
     "displayName": "VSC Github Trending",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "description": "Explore trending Github repositories directly in VSCode",
     "engines": {
         "vscode": "^1.37.0"
@@ -20,7 +20,8 @@
         "theme": "dark"
     },
     "activationEvents": [
-        "onCommand:react-webview.start"
+        "onCommand:react-webview.start",
+        "onCommand:react-webview.setConfig"
     ],
     "main": "./build/ext-src/extension.js",
     "contributes": {
@@ -30,7 +31,45 @@
                 "title": "Open Github Trending",
                 "category": "GT"
             }
-        ]
+        ],
+        "configuration": {
+            "type": "object",
+            "title": "VSC Github Trending Configuration",
+            "properties": {
+                "vsc-github-trending.languages": {
+                    "type": "array",
+                    "default": [
+                        "c++",
+                        "css",
+                        "go",
+                        "html",
+                        "javascript",
+                        "java",
+                        "php",
+                        "python",
+                        "ruby",
+                        "rust",
+                        "typescript"
+                    ],
+                    "description": "Names of the preferred languages"
+                },
+                "vsc-github-trending.selectedLanguage": {
+                    "type": "string",
+                    "default": "go",
+                    "description": "Selected language"
+                },
+                "vsc-github-trending.selectedInterval": {
+                    "type": "string",
+                    "enum": [
+                        "daily",
+                        "weekly",
+                        "monthly"
+                    ],
+                    "default": "monthly",
+                    "description": "Selected time interval (daily, weekly or monthly)"
+                }
+            }
+        }
     },
     "categories": [
         "Other"

src/components/App.tsx

@@ -10,6 +10,8 @@ import './Header.css';
 import RepositoryContainer from './RepositoryContainer';
 
 class App extends React.Component<any> {
+    private BASE_API_URL = 'https://github-trending-api.now.sh';
+
     public state = {
         intervals: ['daily', 'weekly', 'monthly'],
         languages: { all: [], popular: [] },
@@ -19,6 +21,8 @@ class App extends React.Component<any> {
         selectedLanguage: 'javascript',
     };
 
+    public languages: string[] = [];
+
     public theme = createMuiTheme({
         palette: {
             type: 'dark',
@@ -29,29 +33,47 @@ class App extends React.Component<any> {
     });
 
     public componentDidMount() {
-        Promise.all([this.getRepositories(), this.getLanguages()]).then(
-            result => {
-                this.setState({ loading: false });
+        // Handle messages sent from the extension to the webview
+        window.addEventListener('message', async event => {
+            this.setState({ loading: true });
+            const message = event.data; // The json data that the extension sent
+            switch (message.command) {
+                case 'configuration':
+                    this.languages = message.config.languages;
+                    this.state.selectedLanguage =
+                        message.config.selectedLanguage;
+                    this.state.selectedInterval =
+                        message.config.selectedInterval;
+                    await this.getRepositories();
+                    await this.getLanguages();
+                    this.setState({ loading: false });
+                    break;
             }
-        );
+        });
     }
 
     public getLanguages() {
-        fetch('https://github-trending-api.now.sh/languages')
+        return fetch(this.BASE_API_URL + '/languages')
             .then(response => response.json())
-            .then(data =>
+            .then(data => {
+                // TODO: create model
+                data = data.filter(
+                    (item: { name: string; urlParam: string }) =>
+                        this.languages.indexOf(item.urlParam) !== -1
+                );
                 this.setState({
                     languages: {
                         all: data,
                     },
-                })
-            );
+                });
+            });
     }
 
     public getRepositories() {
         this.setState({ loading: true });
-        fetch(
-            'https://github-trending-api.now.sh/repositories?language=' +
+        return fetch(
+            this.BASE_API_URL +
+                '/repositories?language=' +
                 this.state.selectedLanguage +
                 '&since=' +
                 this.state.selectedInterval