-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
121 lines (107 loc) · 3.55 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';
import axios from 'axios';
import base64 from 'base-64';
import './index.css';
const appTypes = [
{ label: "CODE", value: 'Code' },
{ label: "PKCE", value: "PKCE" },
{ label: "Implicit", value: "Implicit" }
];
const languages = [
{ label: "CSharp", value: "CSharp" },
{ label: "Javascript", value: "Javascript" },
{ label: "Java", value: "Java" }
];
const extensions = { "CSharp": "cs", "Java": "java", "Javascript": "js" };
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedLanguage: null,
selectedAppType: null,
sample: null,
link: null
};
}
getGitSamples = () => {
const dataUrl="http://localhost/developer/samples";
if (!this.state.selectedAppType || !this.state.selectedLanguage) {
this.setState({ sample: 'Invalid App Type & Language Pair!' });
return;
}
const appType = this.state.selectedAppType.label;
const language = this.state.selectedLanguage.label;
const filePath = 'https://api.github.com/repos/threepotatoes/' + appType + '-' + language + '-Sample/contents/Program.' + extensions[language];
const link = 'https://github.com/threepotatoes/' + appType + '-' + language + '-Sample/archive/master.zip';
this.setState({ link: link }, () => {
axios.get(filePath)
.then(
res => {
if (res.status === 200) {
this.setState({ sample: base64.decode(res.data.content) });
} else {
this.setState({ sample: "To be done." });
}
},
error => this.setState({ sample: "To be done." }));
})
};
handleAppTypeChange = appType => {
this.setState({ sample: 'Loading....' });
const oldType = this.state.selectedAppType;
this.setState({ selectedAppType: appType }, () => {
if (!oldType || oldType.label !== appType.label) {
this.getGitHubContent();
}
});
};
handleLanguageChange = language => {
this.setState({ sample: 'Loading....' });
const oldLanguage = this.state.selectedLanguage;
this.setState({ selectedLanguage: language }, () => {
if (!oldLanguage || oldLanguage.label !== language.label) {
this.getGitHubContent();
}
});
};
handleClick = () => { alert('Copied'); };
handleDownload = () => {
window.open(this.state.link, '_blank');
};
render() {
const { selectedAppType } = this.state;
const { selectedLanguage } = this.state;
return (
<div className="container">
<div className="row">
<div className="col-md-4"></div>
<div className="col-md-4">
<Select value={selectedAppType} options={appTypes} onChange={this.handleAppTypeChange} />
</div>
<div className="col-md-4"></div>
</div>
<div className="row">
<div className="col-md-4"></div>
<div className="col-md-4">
<Select value={selectedLanguage} options={languages} onChange={this.handleLanguageChange} />
</div>
<div className="col-md-4"></div>
</div>
<h3> Code Sample</h3>
<div className="sample">
<code>{this.state.sample}</code>
</div>
<div>
{this.state.link && this.state.sample !== "To be done." ? <h3><a href={this.state.link}>Download Sample Repo</a></h3> : null}
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<App />,
document.getElementById('root')
);