diff --git a/src/FilterLists.Web/ClientApp/boot.tsx b/src/FilterLists.Web/ClientApp/boot.tsx index f1081ffb1..508f8a698 100644 --- a/src/FilterLists.Web/ClientApp/boot.tsx +++ b/src/FilterLists.Web/ClientApp/boot.tsx @@ -1,30 +1,28 @@ -import './css/site.css'; -import 'bootstrap'; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -import { AppContainer } from 'react-hot-loader'; -import { BrowserRouter } from 'react-router-dom'; -import * as RoutesModule from './routes'; +import "./css/site.css"; +import "bootstrap"; +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import { AppContainer } from "react-hot-loader"; +import { BrowserRouter } from "react-router-dom"; +import * as RoutesModule from "./routes"; let routes = RoutesModule.routes; function renderApp() { - // This code starts up the React app when it runs in a browser. It sets up the routing - // configuration and injects the app into a DOM element. - const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!; + const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href")!; ReactDOM.render( - + , - document.getElementById('react-app') + document.getElementById("react-app") ); } renderApp(); -// Allow Hot Module Replacement if (module.hot) { - module.hot.accept('./routes', () => { - routes = require('./routes').routes; - renderApp(); - }); -} + module.hot.accept("./routes", + () => { + routes = require("./routes").routes; + renderApp(); + }); +} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/components/Counter.tsx b/src/FilterLists.Web/ClientApp/components/Counter.tsx index 4532857d2..6ef5310c6 100644 --- a/src/FilterLists.Web/ClientApp/components/Counter.tsx +++ b/src/FilterLists.Web/ClientApp/components/Counter.tsx @@ -1,5 +1,5 @@ -import * as React from 'react'; -import { RouteComponentProps } from 'react-router'; +import * as React from "react"; +import { RouteComponentProps } from "react-router"; interface CounterState { currentCount: number; @@ -11,16 +11,18 @@ export class Counter extends React.Component, CounterSta this.state = { currentCount: 0 }; } - public render() { + render() { return
-

Counter

+

Counter

-

This is a simple example of a React component.

+

This is a simple example of a React component.

-

Current count: { this.state.currentCount }

+

+ Current count: { this.state.currentCount } +

- -
; + + ; } incrementCounter() { @@ -28,4 +30,4 @@ export class Counter extends React.Component, CounterSta currentCount: this.state.currentCount + 1 }); } -} +} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/components/FetchData.tsx b/src/FilterLists.Web/ClientApp/components/FetchData.tsx index ce191bd78..b0098bba8 100644 --- a/src/FilterLists.Web/ClientApp/components/FetchData.tsx +++ b/src/FilterLists.Web/ClientApp/components/FetchData.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; -import { RouteComponentProps } from 'react-router'; -import 'isomorphic-fetch'; +import * as React from "react"; +import { RouteComponentProps } from "react-router"; +import "isomorphic-fetch"; interface FetchDataExampleState { forecasts: WeatherForecast[]; @@ -12,46 +12,48 @@ export class FetchData extends React.Component, FetchDat super(); this.state = { forecasts: [], loading: true }; - fetch('api/SampleData/WeatherForecasts') + fetch("api/SampleData/WeatherForecasts") .then(response => response.json() as Promise) .then(data => { this.setState({ forecasts: data, loading: false }); }); } - public render() { - let contents = this.state.loading - ?

Loading...

+ render() { + const contents = this.state.loading + ?

+ Loading... +

: FetchData.renderForecastsTable(this.state.forecasts); return
-

Weather forecast

-

This component demonstrates fetching data from the server.

- { contents } -
; +

Weather forecast

+

This component demonstrates fetching data from the server.

+ { contents } + ; } private static renderForecastsTable(forecasts: WeatherForecast[]) { - return - - - - - - - - - - {forecasts.map(forecast => - - - - - - - )} - -
DateTemp. (C)Temp. (F)Summary
{ forecast.dateFormatted }{ forecast.temperatureC }{ forecast.temperatureF }{ forecast.summary }
; + return + + + + + + + + + + {forecasts.map(forecast => + + + + + + + )} + +
DateTemp. (C)Temp. (F)Summary
{ forecast.dateFormatted }{ forecast.temperatureC }{ forecast.temperatureF }{ forecast.summary }
; } } @@ -60,4 +62,4 @@ interface WeatherForecast { temperatureC: number; temperatureF: number; summary: string; -} +} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx index e9ce1f2e3..ba0590e66 100644 --- a/src/FilterLists.Web/ClientApp/components/Home.tsx +++ b/src/FilterLists.Web/ClientApp/components/Home.tsx @@ -1,29 +1,29 @@ -import * as React from 'react'; -import { RouteComponentProps } from 'react-router'; +import * as React from "react"; +import { RouteComponentProps } from "react-router"; export class Home extends React.Component, {}> { - public render() { + render() { return
-

Hello, world!

-

Welcome to your new single-page application, built with:

- -

To help you get started, we've also set up:

-
    -
  • Client-side navigation. For example, click Counter then Back to return here.
    • -
  • Webpack dev middleware. In development mode, there's no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
    • -
  • Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, rebuilt React components will be injected directly into your running application, preserving its live state.
    • -
  • Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.
    • -
-

Going further

-

- For larger applications, or for server-side prerendering (i.e., for isomorphic or universal applications), you should consider using a Flux/Redux-like architecture. - You can generate an ASP.NET Core application with React and Redux using dotnet new reactredux instead of using this template. -

-
; - } +

Hello, world!

+

Welcome to your new single-page application, built with:

+ +

To help you get started, we've also set up:

+
    +
  • Client-side navigation. For example, click Counter then Back to return here.
    • +
  • Webpack dev middleware. In development mode, there's no need to run the webpack build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.
    • +
  • Hot module replacement. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, rebuilt React components will be injected directly into your running application, preserving its live state.
    • +
  • Efficient production builds. In production mode, development-time features are disabled, and the webpack build tool produces minified static CSS and JavaScript files.
    • +
+

Going further

+

+ For larger applications, or for server-side prerendering (i.e., for isomorphic or universal applications), you should consider using a Flux/Redux-like architecture. + You can generate an ASP.NET Core application with React and Redux using dotnet new reactredux instead of using this template. +

+ ; } +}; \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/components/Layout.tsx b/src/FilterLists.Web/ClientApp/components/Layout.tsx index 8c8870e2a..727d732d7 100644 --- a/src/FilterLists.Web/ClientApp/components/Layout.tsx +++ b/src/FilterLists.Web/ClientApp/components/Layout.tsx @@ -1,21 +1,21 @@ -import * as React from 'react'; -import { NavMenu } from './NavMenu'; +import * as React from "react"; +import { NavMenu } from "./NavMenu"; export interface LayoutProps { children?: React.ReactNode; } export class Layout extends React.Component { - public render() { - return
-
-
- -
-
- { this.props.children } -
-
-
; + render() { + return
+
+
+ +
+
+ { this.props.children } +
+
+
; } -} +} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/components/NavMenu.tsx b/src/FilterLists.Web/ClientApp/components/NavMenu.tsx index 1c39133c5..c8ab26d62 100644 --- a/src/FilterLists.Web/ClientApp/components/NavMenu.tsx +++ b/src/FilterLists.Web/ClientApp/components/NavMenu.tsx @@ -1,40 +1,40 @@ -import * as React from 'react'; -import { Link, NavLink } from 'react-router-dom'; +import * as React from "react"; +import { Link, NavLink } from "react-router-dom"; export class NavMenu extends React.Component<{}, {}> { - public render() { - return
-
-
- - FilterLists.Web -
-
-
-
    -
  • - - Home - -
    • -
  • - - Counter - -
    • -
  • - - Fetch data - -
    • -
-
-
-
; + render() { + return
+
+
+ + FilterLists.Web +
+
+
+
    +
  • + + Home + +
    • +
  • + + Counter + +
    • +
  • + + Fetch data + +
    • +
+
+
+
; } -} +} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/css/site.css b/src/FilterLists.Web/ClientApp/css/site.css index 3058af680..56d56353f 100644 --- a/src/FilterLists.Web/ClientApp/css/site.css +++ b/src/FilterLists.Web/ClientApp/css/site.css @@ -1,8 +1,7 @@ -.main-nav li .glyphicon { - margin-right: 10px; -} +.main-nav li .glyphicon { margin-right: 10px; } /* Highlighting rules for nav menu items */ + .main-nav li a.active, .main-nav li a.active:hover, .main-nav li a.active:focus { @@ -11,19 +10,18 @@ } /* Keep the nav menu independent of scrolling and on top of other items */ + .main-nav { - position: fixed; - top: 0; left: 0; + position: fixed; right: 0; + top: 0; z-index: 1; } @media (max-width: 767px) { /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */ - body { - padding-top: 50px; - } + body { padding-top: 50px; } } @media (min-width: 768px) { @@ -32,35 +30,40 @@ height: 100%; width: calc(25% - 20px); } + .main-nav .navbar { - border-radius: 0px; - border-width: 0px; + -ms-border-radius: 0; + border-radius: 0; + border-width: 0; height: 100%; } - .main-nav .navbar-header { - float: none; - } + + .main-nav .navbar-header { float: none; } + .main-nav .navbar-collapse { border-top: 1px solid #444; - padding: 0px; - } - .main-nav .navbar ul { - float: none; + padding: 0; } + + .main-nav .navbar ul { float: none; } + .main-nav .navbar li { float: none; font-size: 15px; margin: 6px; } + .main-nav .navbar li a { - padding: 10px 16px; + -ms-border-radius: 4px; border-radius: 4px; + padding: 10px 16px; } + .main-nav .navbar a { - /* If a menu item's text is too long, truncate it */ - width: 100%; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; + /* If a menu item's text is too long, truncate it */ + width: 100%; } -} +} \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/routes.tsx b/src/FilterLists.Web/ClientApp/routes.tsx index 22fd32e6b..7c4e9e1e4 100644 --- a/src/FilterLists.Web/ClientApp/routes.tsx +++ b/src/FilterLists.Web/ClientApp/routes.tsx @@ -1,12 +1,12 @@ -import * as React from 'react'; -import { Route } from 'react-router-dom'; -import { Layout } from './components/Layout'; -import { Home } from './components/Home'; -import { FetchData } from './components/FetchData'; -import { Counter } from './components/Counter'; +import * as React from "react"; +import { Route } from "react-router-dom"; +import { Layout } from "./components/Layout"; +import { Home } from "./components/Home"; +import { FetchData } from "./components/FetchData"; +import { Counter } from "./components/Counter"; export const routes = - - - -; + + + + ; \ No newline at end of file diff --git a/src/FilterLists.Web/Controllers/HomeController.cs b/src/FilterLists.Web/Controllers/HomeController.cs index 07722ef21..24b36aff6 100644 --- a/src/FilterLists.Web/Controllers/HomeController.cs +++ b/src/FilterLists.Web/Controllers/HomeController.cs @@ -1,8 +1,4 @@ -using System; -using System.Collections.Generic; using System.Diagnostics; -using System.Linq; -using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; namespace FilterLists.Web.Controllers @@ -20,4 +16,4 @@ public IActionResult Error() return View(); } } -} +} \ No newline at end of file diff --git a/src/FilterLists.Web/Controllers/SampleDataController.cs b/src/FilterLists.Web/Controllers/SampleDataController.cs index 615d544ea..24b6de753 100644 --- a/src/FilterLists.Web/Controllers/SampleDataController.cs +++ b/src/FilterLists.Web/Controllers/SampleDataController.cs @@ -1,7 +1,6 @@ using System; using System.Collections.Generic; using System.Linq; -using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; namespace FilterLists.Web.Controllers @@ -9,7 +8,7 @@ namespace FilterLists.Web.Controllers [Route("api/[controller]")] public class SampleDataController : Controller { - private static string[] Summaries = new[] + private static readonly string[] Summaries = { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; @@ -32,13 +31,7 @@ public class WeatherForecast public int TemperatureC { get; set; } public string Summary { get; set; } - public int TemperatureF - { - get - { - return 32 + (int)(TemperatureC / 0.5556); - } - } + public int TemperatureF => 32 + (int) (TemperatureC / 0.5556); } } -} +} \ No newline at end of file diff --git a/src/FilterLists.Web/Views/Home/Index.cshtml b/src/FilterLists.Web/Views/Home/Index.cshtml index 139ed8ac3..507f3cfa0 100644 --- a/src/FilterLists.Web/Views/Home/Index.cshtml +++ b/src/FilterLists.Web/Views/Home/Index.cshtml @@ -6,4 +6,4 @@ @section scripts { -} +} \ No newline at end of file diff --git a/src/FilterLists.Web/Views/Shared/Error.cshtml b/src/FilterLists.Web/Views/Shared/Error.cshtml index 78e35d5d3..6c38a0b5a 100644 --- a/src/FilterLists.Web/Views/Shared/Error.cshtml +++ b/src/FilterLists.Web/Views/Shared/Error.cshtml @@ -5,7 +5,7 @@

Error.

An error occurred while processing your request.

-@if (!string.IsNullOrEmpty((string)ViewData["RequestId"])) +@if (!string.IsNullOrEmpty((string) ViewData["RequestId"])) {

Request ID: @ViewData["RequestId"] @@ -18,4 +18,4 @@

Development environment should not be enabled in deployed applications, as it can result in sensitive information from exceptions being displayed to end users. For local debugging, development environment can be enabled by setting the ASPNETCORE_ENVIRONMENT environment variable to Development, and restarting the application. -

+

\ No newline at end of file diff --git a/src/FilterLists.Web/Views/Shared/_Layout.cshtml b/src/FilterLists.Web/Views/Shared/_Layout.cshtml index 26d7cd66f..dd28063af 100644 --- a/src/FilterLists.Web/Views/Shared/_Layout.cshtml +++ b/src/FilterLists.Web/Views/Shared/_Layout.cshtml @@ -1,20 +1,20 @@ - + - - + + @ViewData["Title"] - FilterLists.Web - + - + - + - @RenderBody() +@RenderBody() - - @RenderSection("scripts", required: false) + +@RenderSection("scripts", false) - + \ No newline at end of file diff --git a/src/FilterLists.Web/Views/_ViewImports.cshtml b/src/FilterLists.Web/Views/_ViewImports.cshtml index 70f3edfcb..2933db932 100644 --- a/src/FilterLists.Web/Views/_ViewImports.cshtml +++ b/src/FilterLists.Web/Views/_ViewImports.cshtml @@ -1,3 +1,3 @@ @using FilterLists.Web @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers -@addTagHelper *, Microsoft.AspNetCore.SpaServices +@addTagHelper *, Microsoft.AspNetCore.SpaServices \ No newline at end of file diff --git a/src/FilterLists.Web/Views/_ViewStart.cshtml b/src/FilterLists.Web/Views/_ViewStart.cshtml index 820a2f6e0..d641c67f3 100644 --- a/src/FilterLists.Web/Views/_ViewStart.cshtml +++ b/src/FilterLists.Web/Views/_ViewStart.cshtml @@ -1,3 +1,3 @@ @{ Layout = "_Layout"; -} +} \ No newline at end of file