├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── VSReact.Api ├── App_Start │ ├── JsonContentNegatiator.cs │ └── WebApiConfig.cs ├── Controllers │ └── TodoController.cs ├── Global.asax ├── Global.asax.cs ├── Models │ ├── Todo.cs │ └── TodoRepository.cs ├── Properties │ └── AssemblyInfo.cs ├── VSReact.Api.csproj ├── VSReact.Api.csproj.user ├── Web.Debug.config ├── Web.Release.config ├── Web.config └── packages.config ├── VSReact.Web ├── Properties │ └── AssemblyInfo.cs ├── VSReact.Web.csproj ├── app │ ├── apiclient.ts │ ├── components │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── MainSection.tsx │ │ ├── TodoItem.tsx │ │ └── TodoTextInput.tsx │ ├── containers │ │ ├── App.tsx │ │ └── TodoApp.tsx │ ├── index.tsx │ ├── model │ │ └── TodoItem.ts │ └── store │ │ ├── AppState.ts │ │ └── TodoStore.ts ├── index.html ├── package.json ├── tsconfig.json └── webpack.config.js └── VSReact.sln /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | 7 | [*.cs] 8 | indent_size = 4 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | 4 | # User-specific files 5 | *.suo 6 | *.user 7 | *.userosscache 8 | *.sln.docstates 9 | 10 | # User-specific files (MonoDevelop/Xamarin Studio) 11 | *.userprefs 12 | 13 | # Build results 14 | [Dd]ebug/ 15 | [Dd]ebugPublic/ 16 | [Rr]elease/ 17 | [Rr]eleases/ 18 | x64/ 19 | x86/ 20 | build/ 21 | dist/ 22 | bld/ 23 | [Bb]in/ 24 | [Oo]bj/ 25 | 26 | # Visual Studio 2015 cache/options directory 27 | .vs/ 28 | # Uncomment if you have tasks that create the project's static files in wwwroot 29 | #wwwroot/ 30 | 31 | # MSTest test Results 32 | [Tt]est[Rr]esult*/ 33 | [Bb]uild[Ll]og.* 34 | 35 | # NUNIT 36 | *.VisualState.xml 37 | TestResult.xml 38 | 39 | # Build Results of an ATL Project 40 | [Dd]ebugPS/ 41 | [Rr]eleasePS/ 42 | dlldata.c 43 | 44 | # DNX 45 | project.lock.json 46 | artifacts/ 47 | 48 | *_i.c 49 | *_p.c 50 | *_i.h 51 | *.ilk 52 | *.meta 53 | *.obj 54 | *.pch 55 | *.pdb 56 | *.pgc 57 | *.pgd 58 | *.rsp 59 | *.sbr 60 | *.tlb 61 | *.tli 62 | *.tlh 63 | *.tmp 64 | *.tmp_proj 65 | *.log 66 | *.vspscc 67 | *.vssscc 68 | .builds 69 | *.pidb 70 | *.svclog 71 | *.scc 72 | 73 | # Chutzpah Test files 74 | _Chutzpah* 75 | 76 | # Visual C++ cache files 77 | ipch/ 78 | *.aps 79 | *.ncb 80 | *.opendb 81 | *.opensdf 82 | *.sdf 83 | *.cachefile 84 | 85 | # Visual Studio profiler 86 | *.psess 87 | *.vsp 88 | *.vspx 89 | *.sap 90 | 91 | # TFS 2012 Local Workspace 92 | $tf/ 93 | 94 | # Guidance Automation Toolkit 95 | *.gpState 96 | 97 | # ReSharper is a .NET coding add-in 98 | _ReSharper*/ 99 | *.[Rr]e[Ss]harper 100 | *.DotSettings.user 101 | 102 | # JustCode is a .NET coding add-in 103 | .JustCode 104 | 105 | # TeamCity is a build add-in 106 | _TeamCity* 107 | 108 | # DotCover is a Code Coverage Tool 109 | *.dotCover 110 | 111 | # NCrunch 112 | _NCrunch_* 113 | .*crunch*.local.xml 114 | nCrunchTemp_* 115 | 116 | # MightyMoose 117 | *.mm.* 118 | AutoTest.Net/ 119 | 120 | # Web workbench (sass) 121 | .sass-cache/ 122 | 123 | # Installshield output folder 124 | [Ee]xpress/ 125 | 126 | # DocProject is a documentation generator add-in 127 | DocProject/buildhelp/ 128 | DocProject/Help/*.HxT 129 | DocProject/Help/*.HxC 130 | DocProject/Help/*.hhc 131 | DocProject/Help/*.hhk 132 | DocProject/Help/*.hhp 133 | DocProject/Help/Html2 134 | DocProject/Help/html 135 | 136 | # Click-Once directory 137 | publish/ 138 | 139 | # Publish Web Output 140 | *.[Pp]ublish.xml 141 | *.azurePubxml 142 | # TODO: Comment the next line if you want to checkin your web deploy settings 143 | # but database connection strings (with potential passwords) will be unencrypted 144 | *.pubxml 145 | *.publishproj 146 | 147 | # NuGet Packages 148 | *.nupkg 149 | # The packages folder can be ignored because of Package Restore 150 | **/packages/* 151 | # except build/, which is used as an MSBuild target. 152 | !**/packages/build/ 153 | # Uncomment if necessary however generally it will be regenerated when needed 154 | #!**/packages/repositories.config 155 | 156 | # Windows Azure Build Output 157 | csx/ 158 | *.build.csdef 159 | 160 | # Windows Azure Emulator 161 | ecf/ 162 | rcf/ 163 | 164 | # Windows Store app package directory 165 | AppPackages/ 166 | 167 | # Visual Studio cache files 168 | # files ending in .cache can be ignored 169 | *.[Cc]ache 170 | # but keep track of directories ending in .cache 171 | !*.[Cc]ache/ 172 | 173 | # Others 174 | ClientBin/ 175 | [Ss]tyle[Cc]op.* 176 | ~$* 177 | *~ 178 | *.dbmdl 179 | *.dbproj.schemaview 180 | *.pfx 181 | *.publishsettings 182 | node_modules/ 183 | orleans.codegen.cs 184 | 185 | # RIA/Silverlight projects 186 | Generated_Code/ 187 | 188 | # Backup & report files from converting an old project file 189 | # to a newer Visual Studio version. Backup files are not needed, 190 | # because we have git ;-) 191 | _UpgradeReport_Files/ 192 | Backup*/ 193 | UpgradeLog*.XML 194 | UpgradeLog*.htm 195 | 196 | # SQL Server files 197 | *.mdf 198 | *.ldf 199 | 200 | # Business Intelligence projects 201 | *.rdl.data 202 | *.bim.layout 203 | *.bim_*.settings 204 | 205 | # Microsoft Fakes 206 | FakesAssemblies/ 207 | 208 | # GhostDoc plugin setting file 209 | *.GhostDoc.xml 210 | 211 | # Node.js Tools for Visual Studio 212 | .ntvs_analysis.dat 213 | 214 | # Visual Studio 6 build log 215 | *.plg 216 | 217 | # Visual Studio 6 workspace options file 218 | *.opt 219 | 220 | # Visual Studio LightSwitch build output 221 | **/*.HTMLClient/GeneratedArtifacts 222 | **/*.DesktopClient/GeneratedArtifacts 223 | **/*.DesktopClient/ModelManifest.xml 224 | **/*.Server/GeneratedArtifacts 225 | **/*.Server/ModelManifest.xml 226 | _Pvt_Extensions 227 | 228 | # Paket dependency manager 229 | .paket/paket.exe 230 | 231 | # FAKE - F# Make 232 | .fake/ 233 | 234 | .vscode/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-2017 Martijn Boland 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VSReact 2 | React TodoMVC app with ASP.NET Web Api backend, developed with Visual Studio. 3 | 4 | The ReactJS frontend app originated from the [Redux Devtools TodoMVC example](https://github.com/gaearon/redux-devtools/tree/master/examples/todomvc), 5 | but has been rewritten with [TypeScript](https://www.typescriptlang.org/) and [MobX](https://mobx.js.org/index.html). The original ES2015/Redux 6 | version can still be found at [a new repo](https://github.com/martijnboland/VSReact-Redux). 7 | 8 | The ASP.NET Web Api backend app is a slightly modified version of https://github.com/mforman/todo-backend-webapi 9 | 10 | Thanks to the original authors for the examples. 11 | 12 | # Prerequisites 13 | - Visual Studio 2015/2017 14 | - NodeJS 4.0 or higher 15 | - [WebPack Task Runner Extension](https://visualstudiogallery.msdn.microsoft.com/5497fd10-b1ba-474c-8991-1438ae47012a) or [NPM Scripts Task Runner Extension](https://visualstudiogallery.msdn.microsoft.com/8f2f2cbc-4da5-43ba-9de2-c9d08ade4941) 16 | 17 | # Usage 18 | Clone the example solution, open the .sln file with Visual Studio 2015, hit F5, have a little patience and be amazed :-). 19 | -------------------------------------------------------------------------------- /VSReact.Api/App_Start/JsonContentNegatiator.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Net.Http; 4 | using System.Net.Http.Formatting; 5 | using System.Net.Http.Headers; 6 | 7 | namespace VSReact.Api.App_Start 8 | { 9 | public class JsonContentNegotiator : IContentNegotiator 10 | { 11 | private readonly JsonMediaTypeFormatter _jsonFormatter; 12 | 13 | public JsonContentNegotiator(JsonMediaTypeFormatter formatter) 14 | { 15 | _jsonFormatter = formatter; 16 | } 17 | 18 | public ContentNegotiationResult Negotiate(Type type, HttpRequestMessage request, IEnumerable formatters) 19 | { 20 | var result = new ContentNegotiationResult(_jsonFormatter, new MediaTypeHeaderValue("application/json")); 21 | return result; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /VSReact.Api/App_Start/WebApiConfig.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using Newtonsoft.Json.Serialization; 3 | using System; 4 | using System.Collections.Generic; 5 | using System.Linq; 6 | using System.Net.Http.Formatting; 7 | using System.Web.Http; 8 | using System.Web.Http.Cors; 9 | using VSReact.Api.App_Start; 10 | 11 | namespace VSReact.Api 12 | { 13 | public static class WebApiConfig 14 | { 15 | public static void Register(HttpConfiguration config) 16 | { 17 | // Web API configuration and services 18 | var cors = new EnableCorsAttribute("*", "*", "*"); 19 | config.EnableCors(cors); 20 | 21 | var json = GlobalConfiguration.Configuration.Formatters.JsonFormatter; 22 | json.SerializerSettings = new JsonSerializerSettings() 23 | { 24 | ContractResolver = new CamelCasePropertyNamesContractResolver(), 25 | NullValueHandling = NullValueHandling.Ignore 26 | }; 27 | 28 | 29 | // JSON only 30 | config.Services.Replace(typeof(IContentNegotiator), new JsonContentNegotiator(json)); 31 | 32 | // Web API routes 33 | config.MapHttpAttributeRoutes(); 34 | 35 | config.Routes.MapHttpRoute( 36 | name: "DefaultApi", 37 | routeTemplate: "{controller}/{id}", 38 | defaults: new { id = RouteParameter.Optional } 39 | ); 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /VSReact.Api/Controllers/TodoController.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Net; 5 | using System.Net.Http; 6 | using System.Web.Http; 7 | 8 | namespace TodoMvc.Controllers 9 | { 10 | public class TodoController : ApiController 11 | { 12 | private readonly Data.TodoRepository repo; 13 | 14 | public TodoController() 15 | { 16 | repo = new Data.TodoRepository(); 17 | } 18 | 19 | // GET: Todo 20 | public IEnumerable Get() 21 | { 22 | var items = repo.GetAll(); 23 | 24 | foreach (var t in items) 25 | { 26 | t.Url = String.Format("{0}/{1}", Request.RequestUri.ToString(), t.Id.ToString()); 27 | } 28 | 29 | return items; 30 | } 31 | 32 | // GET: Todo/5 33 | public Models.Todo Get(int id) 34 | { 35 | var t = repo.Get(id); 36 | if (t != null) 37 | { 38 | t.Url = Request.RequestUri.ToString(); 39 | } 40 | return t; 41 | } 42 | 43 | // POST: Todo 44 | public HttpResponseMessage Post(Models.Todo item) 45 | { 46 | var t = repo.Save(item); 47 | t.Url = String.Format("{0}/{1}", Request.RequestUri.ToString(), t.Id.ToString()); 48 | 49 | var response = Request.CreateResponse(HttpStatusCode.OK, t); 50 | response.Headers.Location = new Uri(Request.RequestUri, "todo/" + t.Id.ToString()); 51 | 52 | return response; 53 | } 54 | 55 | // PATCH: Todo/5 56 | public HttpResponseMessage Patch(int id, Models.Todo item) 57 | { 58 | var todo = repo.Get(id); 59 | if (item.Title != null) 60 | { 61 | todo.Title = item.Title; 62 | } 63 | if (item.Completed.HasValue) 64 | { 65 | todo.Completed = item.Completed; 66 | } 67 | var t = repo.Save(todo); 68 | t.Url = Request.RequestUri.ToString(); 69 | 70 | var response = Request.CreateResponse(HttpStatusCode.OK, t); 71 | response.Headers.Location = new Uri(Request.RequestUri, t.Id.ToString()); 72 | 73 | return response; 74 | } 75 | 76 | // DELETE: Todo 77 | public void Delete() 78 | { 79 | repo.Delete(); 80 | } 81 | 82 | // DELETE: Todo/5 83 | public void Delete(int id) 84 | { 85 | repo.Delete(id); 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /VSReact.Api/Global.asax: -------------------------------------------------------------------------------- 1 | <%@ Application Codebehind="Global.asax.cs" Inherits="VSReact.Api.WebApiApplication" Language="C#" %> 2 | -------------------------------------------------------------------------------- /VSReact.Api/Global.asax.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.Http; 6 | using System.Web.Routing; 7 | 8 | namespace VSReact.Api 9 | { 10 | public class WebApiApplication : System.Web.HttpApplication 11 | { 12 | protected void Application_Start() 13 | { 14 | GlobalConfiguration.Configure(WebApiConfig.Register); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /VSReact.Api/Models/Todo.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | 6 | namespace TodoMvc.Models 7 | { 8 | public class Todo 9 | { 10 | public int Id { get; set; } 11 | public int? Order { get; set; } 12 | public string Title { get; set; } 13 | public string Url { get; set; } 14 | public bool? Completed { get; set; } 15 | 16 | public override bool Equals(object obj) 17 | { 18 | var todo = obj as Todo; 19 | return (todo != null) && (Id == todo.Id); 20 | } 21 | 22 | public override int GetHashCode() 23 | { 24 | return Id.GetHashCode(); 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /VSReact.Api/Models/TodoRepository.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | 6 | namespace TodoMvc.Data 7 | { 8 | public class TodoRepository 9 | { 10 | public static List Todos = new List(); 11 | public static int MaxId = 0; 12 | 13 | public IEnumerable GetAll() 14 | { 15 | return Todos.OrderByDescending(t => t.Order); 16 | } 17 | 18 | public Models.Todo Get(int id) 19 | { 20 | return Todos.Where(t => t.Id == id).FirstOrDefault(); 21 | } 22 | 23 | public Models.Todo Save(Models.Todo item) 24 | { 25 | if (item.Id == 0) 26 | { 27 | item.Id = ++MaxId; 28 | if (!item.Order.HasValue) 29 | { 30 | item.Order = item.Id; 31 | } 32 | } 33 | 34 | int index = Todos.IndexOf(item); 35 | if (index != -1) 36 | { 37 | Todos[index] = item; 38 | } 39 | else 40 | { 41 | Todos.Add(item); 42 | } 43 | 44 | return item; 45 | } 46 | 47 | public void Delete() 48 | { 49 | Todos.Clear(); 50 | } 51 | 52 | public void Delete(int id) 53 | { 54 | Todos.RemoveAll(t => t.Id == id); 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /VSReact.Api/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // General Information about an assembly is controlled through the following 6 | // set of attributes. Change these attribute values to modify the information 7 | // associated with an assembly. 8 | [assembly: AssemblyTitle("VSReact.Api")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("")] 12 | [assembly: AssemblyProduct("VSReact.Api")] 13 | [assembly: AssemblyCopyright("Copyright © 2015")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // Setting ComVisible to false makes the types in this assembly not visible 18 | // to COM components. If you need to access a type in this assembly from 19 | // COM, set the ComVisible attribute to true on that type. 20 | [assembly: ComVisible(false)] 21 | 22 | // The following GUID is for the ID of the typelib if this project is exposed to COM 23 | [assembly: Guid("12859c39-e832-4bd6-b740-ffc8d9a690b3")] 24 | 25 | // Version information for an assembly consists of the following four values: 26 | // 27 | // Major Version 28 | // Minor Version 29 | // Build Number 30 | // Revision 31 | // 32 | // You can specify all the values or you can default the Revision and Build Numbers 33 | // by using the '*' as shown below: 34 | [assembly: AssemblyVersion("1.0.0.0")] 35 | [assembly: AssemblyFileVersion("1.0.0.0")] 36 | -------------------------------------------------------------------------------- /VSReact.Api/VSReact.Api.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | Debug 8 | AnyCPU 9 | 10 | 11 | 2.0 12 | {12859C39-E832-4BD6-B740-FFC8D9A690B3} 13 | {349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc} 14 | Library 15 | Properties 16 | VSReact.Api 17 | VSReact.Api 18 | v4.6 19 | true 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | true 30 | full 31 | false 32 | bin\ 33 | DEBUG;TRACE 34 | prompt 35 | 4 36 | 37 | 38 | pdbonly 39 | true 40 | bin\ 41 | TRACE 42 | prompt 43 | 4 44 | 45 | 46 | 47 | ..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\lib\net45\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.dll 48 | True 49 | 50 | 51 | 52 | 53 | ..\packages\Microsoft.AspNet.Cors.5.2.3\lib\net45\System.Web.Cors.dll 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | ..\packages\Microsoft.AspNet.WebApi.Cors.5.2.3\lib\net45\System.Web.Http.Cors.dll 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | ..\packages\Newtonsoft.Json.6.0.4\lib\net45\Newtonsoft.Json.dll 78 | 79 | 80 | ..\packages\Microsoft.AspNet.WebApi.Client.5.2.3\lib\net45\System.Net.Http.Formatting.dll 81 | 82 | 83 | ..\packages\Microsoft.AspNet.WebApi.Core.5.2.3\lib\net45\System.Web.Http.dll 84 | 85 | 86 | ..\packages\Microsoft.AspNet.WebApi.WebHost.5.2.3\lib\net45\System.Web.Http.WebHost.dll 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | Global.asax 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | Web.config 108 | 109 | 110 | Web.config 111 | 112 | 113 | 114 | 115 | 116 | 117 | 10.0 118 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | True 128 | True 129 | 51673 130 | / 131 | http://localhost:51407/ 132 | False 133 | False 134 | 135 | 136 | False 137 | 138 | 139 | 140 | 141 | 142 | 143 | This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is {0}. 144 | 145 | 146 | 147 | 148 | 155 | -------------------------------------------------------------------------------- /VSReact.Api/VSReact.Api.csproj.user: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | URL 10 | True 11 | False 12 | False 13 | False 14 | 15 | 16 | http://localhost:3000/index.html 17 | 18 | 19 | 20 | 21 | True 22 | True 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /VSReact.Api/Web.Debug.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /VSReact.Api/Web.Release.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 30 | 31 | -------------------------------------------------------------------------------- /VSReact.Api/Web.config: -------------------------------------------------------------------------------- 1 |  2 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 42 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /VSReact.Api/packages.config: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /VSReact.Web/Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // General Information about an assembly is controlled through the following 6 | // set of attributes. Change these attribute values to modify the information 7 | // associated with an assembly. 8 | [assembly: AssemblyTitle("VSReact.Web")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("")] 12 | [assembly: AssemblyProduct("VSReact.Web")] 13 | [assembly: AssemblyCopyright("Copyright © 2015")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // Setting ComVisible to false makes the types in this assembly not visible 18 | // to COM components. If you need to access a type in this assembly from 19 | // COM, set the ComVisible attribute to true on that type. 20 | [assembly: ComVisible(false)] 21 | 22 | // The following GUID is for the ID of the typelib if this project is exposed to COM 23 | [assembly: Guid("898e5c63-2b7e-42f8-a505-cace65ed1eeb")] 24 | 25 | // Version information for an assembly consists of the following four values: 26 | // 27 | // Major Version 28 | // Minor Version 29 | // Build Number 30 | // Revision 31 | // 32 | // You can specify all the values or you can default the Revision and Build Numbers 33 | // by using the '*' as shown below: 34 | [assembly: AssemblyVersion("1.0.0.0")] 35 | [assembly: AssemblyFileVersion("1.0.0.0")] 36 | -------------------------------------------------------------------------------- /VSReact.Web/VSReact.Web.csproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | Debug 9 | AnyCPU 10 | 11 | 12 | 2.0 13 | {898E5C63-2B7E-42F8-A505-CACE65ED1EEB} 14 | {349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc} 15 | Library 16 | Properties 17 | VSReact.Web 18 | VSReact.Web 19 | v4.6 20 | true 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 2.4 29 | 30 | 31 | true 32 | full 33 | false 34 | bin\ 35 | DEBUG;TRACE 36 | prompt 37 | 4 38 | 39 | 40 | pdbonly 41 | true 42 | bin\ 43 | TRACE 44 | prompt 45 | 4 46 | 47 | 48 | 49 | ..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\lib\net45\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.dll 50 | True 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 | 10.0 100 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 101 | 102 | 103 | 104 | ES6 105 | React 106 | False 107 | False 108 | System 109 | False 110 | 111 | 112 | False 113 | True 114 | True 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | True 126 | True 127 | 51676 128 | / 129 | http://localhost:51408/ 130 | False 131 | False 132 | 133 | 134 | False 135 | 136 | 137 | 138 | 139 | 140 | 141 | This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is {0}. 142 | 143 | 144 | 145 | 146 | 153 | -------------------------------------------------------------------------------- /VSReact.Web/app/apiclient.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | // __API_URL_ comes from webpack DefinePlugin 4 | declare const __API_URL__: string; 5 | const apiUrl: string = __API_URL__; 6 | 7 | const handleErrors = err => { 8 | console.error(err); 9 | throw err; 10 | }; 11 | 12 | const responseData = res => res.data; 13 | 14 | const requests = { 15 | get: (url: string) => axios.get(`${apiUrl}${url}`) 16 | .then(responseData) 17 | .catch(handleErrors), 18 | post: (url: string, data: any) => axios.post(`${apiUrl}${url}`, data) 19 | .then(responseData) 20 | .catch(handleErrors), 21 | put: (url: string, data: any) => axios.put(`${apiUrl}${url}`, data) 22 | .then(responseData) 23 | .catch(handleErrors), 24 | patch: (url: string, data: any) => axios.patch(`${apiUrl}${url}`, data) 25 | .then(responseData) 26 | .catch(handleErrors), 27 | del: (url: string) => axios.delete(`${apiUrl}${url}`) 28 | .then(responseData) 29 | .catch(handleErrors) 30 | }; 31 | 32 | export const todosApi = { 33 | getAll: () => requests.get('/todo'), 34 | add: (todo: any) => requests.post('/todo', todo), 35 | remove: (id: number) => requests.del(`/todo/${id}`), 36 | patch: (id: number, todo: any) => requests.patch(`/todo/${id}`, todo) 37 | } -------------------------------------------------------------------------------- /VSReact.Web/app/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { observer } from 'mobx-react'; 3 | import * as classnames from 'classnames'; 4 | import { TodoFilter } from '../store/AppState'; 5 | 6 | const FILTER_TITLES = { 7 | [TodoFilter.All]: 'All', 8 | [TodoFilter.Active]: 'Active', 9 | [TodoFilter.Completed]: 'Completed' 10 | }; 11 | 12 | interface IFooterProps { 13 | markedCount: number, 14 | unmarkedCount: number, 15 | filter: TodoFilter, 16 | onClearMarked(): void, 17 | onShow(filter: TodoFilter): void 18 | } 19 | 20 | @observer 21 | export default class Footer extends React.Component { 22 | 23 | render() { 24 | const filters: TodoFilter[] = Object.keys(TodoFilter) 25 | .filter(key => !isNaN(Number(TodoFilter[key]))) 26 | .map(key => TodoFilter[key]); 27 | return ( 28 |
29 | {this.renderTodoCount()} 30 |
    31 | {filters.map(filter => 32 |
  • 33 | {this.renderFilterLink(filter)} 34 |
    • 35 | )} 36 |
37 | {this.renderClearButton()} 38 |
39 | ); 40 | } 41 | 42 | renderTodoCount() { 43 | const { unmarkedCount } = this.props; 44 | const itemWord = unmarkedCount === 1 ? 'item' : 'items'; 45 | 46 | return ( 47 | 48 | {unmarkedCount || 'No'} {itemWord} left 49 | 50 | ); 51 | } 52 | 53 | renderFilterLink(filter: TodoFilter) { 54 | const title = FILTER_TITLES[filter]; 55 | const { filter: selectedFilter, onShow } = this.props; 56 | 57 | return ( 58 | onShow(filter)}> 61 | {title} 62 | 63 | ); 64 | } 65 | 66 | renderClearButton() { 67 | const { markedCount, onClearMarked } = this.props; 68 | if (markedCount > 0) { 69 | return ( 70 | 74 | ); 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /VSReact.Web/app/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import TodoTextInput from './TodoTextInput'; 3 | import { TodoStore } from '../store/TodoStore'; 4 | 5 | interface IHeaderProps { 6 | todoStore: TodoStore 7 | } 8 | 9 | export default class Header extends React.Component { 10 | 11 | handleSave = (text: string) => { 12 | if (text.length !== 0) { 13 | this.props.todoStore.addTodo(text); 14 | } 15 | } 16 | 17 | render() { 18 | return ( 19 |
20 |

todos

21 | 24 |
25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /VSReact.Web/app/components/MainSection.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { observer } from 'mobx-react'; 3 | import TodoItemComponent from './TodoItem'; 4 | import Footer from './Footer'; 5 | import { AppState, TodoFilter } from '../store/AppState'; 6 | import { TodoStore } from '../store/TodoStore'; 7 | 8 | const TODO_FILTERS = { 9 | [TodoFilter.All]: () => true, 10 | [TodoFilter.Active]: todo => !todo.completed, 11 | [TodoFilter.Completed]: todo => todo.completed 12 | }; 13 | 14 | interface IMainSectionProps { 15 | appState: AppState, 16 | todoStore: TodoStore 17 | } 18 | 19 | @observer 20 | export default class MainSection extends React.Component { 21 | 22 | constructor(props, context) { 23 | super(props, context); 24 | } 25 | 26 | handleClearMarked = () => { 27 | const atLeastOneMarked = this.props.todoStore.todos.some(todo => todo.completed); 28 | if (atLeastOneMarked) { 29 | this.props.todoStore.clearCompleted(); 30 | } 31 | } 32 | 33 | handleMarkAllCompleted = () => { 34 | this.props.todoStore.markAllCompleted(); 35 | } 36 | 37 | handleShow = (filter: TodoFilter) => { 38 | this.props.appState.setTodoFilter(filter); 39 | } 40 | 41 | render() { 42 | const { todoStore, appState } = this.props; 43 | 44 | const filteredTodos = todoStore.todos.filter(TODO_FILTERS[appState.currentTodoFilter]); 45 | 46 | return ( 47 |
48 | {this.renderToggleAll(todoStore.completedCount)} 49 |
    50 | {filteredTodos.map(todo => 51 | 52 | )} 53 |
54 | {this.renderFooter(todoStore.completedCount)} 55 |
56 | ); 57 | } 58 | 59 | renderToggleAll(completedCount) { 60 | const { todoStore } = this.props; 61 | if (todoStore.todos.length > 0) { 62 | return ( 63 |
64 | 69 |
71 | ); 72 | } 73 | } 74 | 75 | renderFooter(markedCount) { 76 | const { todoStore, appState } = this.props; 77 | const unmarkedCount = todoStore.todos.length - markedCount; 78 | 79 | if (todoStore.todos.length) { 80 | return ( 81 |