Skip to content

Commit b13239a

Browse files
loic-sharmaloic-sharma
authored
[UI] Use Create React App's native TypeScript support (loic-sharma#353)
Followed this guide: https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/
1 parent 44acf8b commit b13239a

15 files changed

+10765
-9652
lines changed

‎src/BaGet.UI/images.d.ts

-7
This file was deleted.

‎src/BaGet.UI/package-lock.json

+10,681-9,571
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/BaGet.UI/package.json

+23-12
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,39 @@
1414
"bootstrap": "3.3.7",
1515
"commonmark": "^0.27.0",
1616
"commonmark-react-renderer": "^4.3.4",
17+
"copy-text-to-clipboard": "^2.1.1",
1718
"office-ui-fabric-react": "^6.163.0",
1819
"react": "^16.6.3",
19-
"react-copy-to-clipboard": "^5.0.1",
2020
"react-dom": "^16.6.3",
2121
"react-router-dom": "^4.3.1",
22-
"react-scripts-ts": "3.1.0",
22+
"react-scripts": "^3.1.2",
2323
"timeago.js": "^3.0.2"
2424
},
2525
"scripts": {
26-
"start": "react-scripts-ts start",
27-
"build": "react-scripts-ts build",
28-
"test": "react-scripts-ts test --env=jsdom",
29-
"eject": "react-scripts-ts eject"
26+
"start": "react-scripts start",
27+
"build": "react-scripts build",
28+
"test": "react-scripts test",
29+
"eject": "react-scripts eject"
3030
},
3131
"devDependencies": {
3232
"@types/commonmark": "^0.27.0",
33-
"@types/jest": "^23.3.9",
34-
"@types/node": "^10.12.6",
35-
"@types/react": "^16.7.3",
36-
"@types/react-copy-to-clipboard": "^4.2.6",
37-
"@types/react-dom": "^16.0.9",
33+
"@types/jest": "^23.3.14",
34+
"@types/node": "^10.14.19",
35+
"@types/react": "^16.9.3",
36+
"@types/react-dom": "^16.9.1",
3837
"@types/react-router-dom": "^4.3.1",
39-
"typescript": "^3.1.6"
38+
"typescript": "^3.6.3"
39+
},
40+
"browserslist": {
41+
"production": [
42+
">0.2%",
43+
"not dead",
44+
"not op_mini all"
45+
],
46+
"development": [
47+
"last 1 chrome version",
48+
"last 1 firefox version",
49+
"last 1 safari version"
50+
]
4051
}
4152
}

‎src/BaGet.UI/src/App.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,11 @@ class App extends React.Component<RouteComponentProps, IAppState> {
4444
<ul className="nav navbar-nav" role="tablist">
4545
<li role="presentation"><NavLink to="/" exact={true} role="tab"><span>Packages</span></NavLink></li>
4646
<li role="presentation"><NavLink to="/upload"><span>Upload</span></NavLink></li>
47-
<li role="presentation"><a role="tab" href="https://loic-sharma.github.io/BaGet/" target="_blank"><span>Documentation</span></a></li>
47+
<li role="presentation">
48+
<a role="tab" href="https://loic-sharma.github.io/BaGet/" target="_blank" rel="noopener noreferrer">
49+
<span>Documentation</span>
50+
</a>
51+
</li>
4852
</ul>
4953
</div>
5054
</div>

‎src/BaGet.UI/src/DisplayPackage/Dependencies.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface IPackageDependenciesProps {
1212
class Dependencies extends React.Component<IDependenciesProps> {
1313

1414
constructor(props: IDependenciesProps) {
15-
props.dependencyGroups.map(group => {
15+
props.dependencyGroups.forEach(group => {
1616
if (!group.dependencies) {
1717
group.dependencies = [];
1818
}
@@ -53,10 +53,6 @@ class Dependencies extends React.Component<IDependenciesProps> {
5353
// tslint:disable-next-line:max-classes-per-file
5454
class PackageDependencies extends React.Component<IPackageDependenciesProps> {
5555

56-
constructor(props: IPackageDependenciesProps) {
57-
super(props);
58-
}
59-
6056
public render() {
6157
if (!this.props.dependencies || this.props.dependencies.length === 0) {
6258
return <div>No dependencies.</div>

‎src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ interface IDisplayPackageState {
5555

5656
class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPackageState> {
5757

58+
private readonly defaultIconUrl: string = 'https://www.nuget.org/Content/gallery/img/default-package-icon-256x256.png';
59+
5860
private id: string;
5961
private version?: string;
6062
private parser: Parser;
@@ -185,7 +187,11 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
185187
return (
186188
<div className="row display-package">
187189
<aside className="col-sm-1 package-icon">
188-
<img src={this.state.package.iconUrl} className="img-responsive" />
190+
<img
191+
src={this.state.package.iconUrl}
192+
className="img-responsive"
193+
onError={this.loadDefaultIcon}
194+
alt="The package icon" />
189195
</aside>
190196
<article className="col-sm-8 package-details-main">
191197
<div className="package-title">
@@ -265,6 +271,10 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
265271
}
266272
}
267273

274+
private loadDefaultIcon = (e: React.SyntheticEvent<HTMLImageElement>) => {
275+
e.currentTarget.src = this.defaultIconUrl;
276+
}
277+
268278
private dateToString(date: Date): string {
269279
return `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear()}`;
270280
}

‎src/BaGet.UI/src/DisplayPackage/InstallationInfo.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Icon } from 'office-ui-fabric-react/lib/Icon';
22
import * as React from 'react';
3-
import * as CopyToClipboard from 'react-copy-to-clipboard';
3+
import CopyText from 'copy-text-to-clipboard';
44

55
import './InstallationInfo.css';
66

@@ -73,11 +73,9 @@ class InstallationInfo extends React.Component<IInstallationInfoProps, IInstalla
7373
{this.state.prefix} {this.state.content}
7474
</div>
7575
<div className="copy-button">
76-
<CopyToClipboard text={this.state.content}>
77-
<button className="btn btn-default btn-warning" type="button" data-tottle="popover" data-placement="bottom" data-content="Copied">
78-
<Icon iconName="Copy" className="ms-Icon" />
79-
</button>
80-
</CopyToClipboard>
76+
<button onClick={this.copyCommand} className="btn btn-default btn-warning" type="button" data-tottle="popover" data-placement="bottom" data-content="Copied">
77+
<Icon iconName="Copy" className="ms-Icon" />
78+
</button>
8179
</div>
8280
</div>
8381
</div>
@@ -87,6 +85,9 @@ class InstallationInfo extends React.Component<IInstallationInfoProps, IInstalla
8785
private handleSelect = (selected: Tab) =>
8886
this.setState(this.buildState(selected));
8987

88+
private copyCommand = () =>
89+
CopyText(this.state.content);
90+
9091
private buildState(tab: Tab): IInstallationInfoState {
9192
let content: string;
9293
let prefix: string;
@@ -148,6 +149,7 @@ class InstallationInfoTab extends React.Component<IInstallationInfoTabProps> {
148149
case Tab.PackageReference: this.title = "PackageReference"; break;
149150
case Tab.Paket: this.title = "Paket CLI"; break;
150151
case Tab.PackageManager: this.title = "Package Manager"; break;
152+
default: this.title = "Unknown"; break;
151153
}
152154
}
153155

@@ -157,9 +159,11 @@ class InstallationInfoTab extends React.Component<IInstallationInfoTabProps> {
157159
}
158160

159161
if (this.props.type === this.props.selected) {
162+
// eslint-disable-next-line
160163
return <li className="active"><a href="#">{this.title}</a></li>
161164
}
162165

166+
// eslint-disable-next-line
163167
return <li><a href="#" onClick={this.onSelect}>{this.title}</a></li>
164168
}
165169

‎src/BaGet.UI/src/DisplayPackage/LicenseInfo.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ interface ILicenseInfoProps {
77

88
class LicenseInfo extends React.Component<ILicenseInfoProps> {
99

10-
constructor(props: ILicenseInfoProps) {
11-
super(props);
12-
}
13-
1410
public render() {
1511
if (!this.props.url) {
1612
return null;

‎src/BaGet.UI/src/DisplayPackage/SourceRepository.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@ interface ISourceRepositoryProps {
88

99
class SourceRepository extends React.Component<ISourceRepositoryProps> {
1010

11-
constructor(props: ISourceRepositoryProps) {
12-
super(props);
13-
}
14-
1511
public render() {
1612
if (!this.props.url) {
1713
return null;

‎src/BaGet.UI/src/SearchResults.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,11 @@ class SearchResults extends React.Component<ISearchResultsProps, ISearchResultsS
157157
{this.state.items.map(value => (
158158
<div key={value.id} className="row search-result">
159159
<div className="col-sm-1 hidden-xs hidden-sm">
160-
<img src={value.iconUrl || this.defaultIconUrl} className="package-icon img-responsive" onError={this.loadDefaultIcon} />
160+
<img
161+
src={value.iconUrl || this.defaultIconUrl}
162+
className="package-icon img-responsive"
163+
onError={this.loadDefaultIcon}
164+
alt="The package icon" />
161165
</div>
162166
<div className="col-sm-11">
163167
<div>

‎src/BaGet.UI/src/Upload.tsx

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Icon } from 'office-ui-fabric-react/lib/Icon';
22
import * as React from 'react';
3-
import * as CopyToClipboard from 'react-copy-to-clipboard';
3+
import CopyText from 'copy-text-to-clipboard';
44

55
import './Upload.css';
66

@@ -24,7 +24,6 @@ class Upload extends React.Component<{}, IUploadState> {
2424
private serviceIndexUrl: string;
2525
private publishUrl: string;
2626

27-
2827
constructor(props: {}) {
2928
super(props);
3029

@@ -61,15 +60,13 @@ class Upload extends React.Component<{}, IUploadState> {
6160
))}
6261
</div>
6362
<div className="copy-button">
64-
<CopyToClipboard text={this.state.content.join("\n")}>
65-
<button className="btn btn-default btn-warning" type="button" data-tottle="popover" data-placement="bottom" data-content="Copied">
66-
<Icon iconName="Copy" className="ms-Icon" />
67-
</button>
68-
</CopyToClipboard>
63+
<button onClick={this.copyCommand} className="btn btn-default btn-warning" type="button" data-tottle="popover" data-placement="bottom" data-content="Copied">
64+
<Icon iconName="Copy" className="ms-Icon" />
65+
</button>
6966
</div>
7067
</div>
7168
<div className="icon-text alert alert-warning">
72-
For more information, please refer to <a target="_blank" href={this.state.documentationUrl}>{this.state.name}'s documentation</a>.
69+
For more information, please refer to <a target="_blank" rel="noopener noreferrer" href={this.state.documentationUrl}>{this.state.name}'s documentation</a>.
7370
</div>
7471
</div>
7572
</div>
@@ -79,6 +76,9 @@ class Upload extends React.Component<{}, IUploadState> {
7976
private handleSelect = (selected: Tab) =>
8077
this.setState(this.buildState(selected));
8178

79+
private copyCommand = () =>
80+
CopyText(this.state.content.join("\n"));
81+
8282
private buildState(tab: Tab): IUploadState {
8383
let name: string;
8484
let content: string[];
@@ -142,14 +142,17 @@ class UploadTab extends React.Component<IUploadTabProps> {
142142
case Tab.NuGet: this.title = "NuGet CLI"; break;
143143
case Tab.Paket: this.title = "Paket CLI"; break;
144144
case Tab.PowerShellGet: this.title = "PowerShellGet"; break;
145+
default: this.title = "Unknown"; break;
145146
}
146147
}
147148

148149
public render() {
149150
if (this.props.type === this.props.selected) {
151+
// eslint-disable-next-line
150152
return <li className="active"><a href="#">{this.title}</a></li>
151153
}
152154

155+
// eslint-disable-next-line
153156
return <li><a href="#" onClick={this.onSelect}>{this.title}</a></li>
154157
}
155158

‎src/BaGet.UI/src/react-app-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="react-scripts" />

‎src/BaGet.UI/tsconfig.json

+17-23
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
11
{
22
"compilerOptions": {
3-
"baseUrl": ".",
4-
"outDir": "build/dist",
5-
"module": "esnext",
63
"target": "es5",
7-
"lib": ["es6", "dom"],
8-
"sourceMap": true,
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
99
"allowJs": true,
10-
"jsx": "react",
11-
"moduleResolution": "node",
12-
"rootDir": "src",
10+
"skipLibCheck": true,
11+
"esModuleInterop": true,
12+
"allowSyntheticDefaultImports": true,
13+
"strict": true,
1314
"forceConsistentCasingInFileNames": true,
14-
"noImplicitReturns": true,
15-
"noImplicitThis": true,
16-
"noImplicitAny": true,
17-
"importHelpers": true,
18-
"strictNullChecks": true,
19-
"suppressImplicitAnyIndexErrors": true,
20-
"noUnusedLocals": true
15+
"module": "esnext",
16+
"moduleResolution": "node",
17+
"resolveJsonModule": true,
18+
"isolatedModules": true,
19+
"noEmit": true,
20+
"jsx": "react"
2121
},
22-
"exclude": [
23-
"node_modules",
24-
"build",
25-
"scripts",
26-
"acceptance-tests",
27-
"webpack",
28-
"jest",
29-
"src/setupTests.ts"
22+
"include": [
23+
"src"
3024
]
3125
}

‎src/BaGet.UI/tsconfig.prod.json

-3
This file was deleted.

‎src/BaGet.UI/tsconfig.test.json

-6
This file was deleted.

0 commit comments

Comments
 (0)