add comments controller

Application/GetLinkComments/CommentDto.cs

@@ -7,7 +7,6 @@ namespace HN.Application
     public Guid Id { get; set; }
     public string Content { get; set; }
     public DateTime CreatedAt { get; set; }
-    public string CreatedByName { get; set; }
     public int UpVotes { get; set; }
     public int DownVotes { get; set; }
 

Application/GetLinkComments/GetLinkCommentsQueryHandler.cs

@@ -18,13 +18,11 @@ namespace HN.Application
     public Task<CommentDto[]> Handle(GetLinkCommentsQuery request, CancellationToken cancellationToken)
     {
       var comments = from comment in _context.Comments
-                     join user in _context.Users on comment.CreatedBy equals user.Id
                      where comment.LinkId == request.LinkId
                      select new CommentDto
                      {
                        Id = comment.Id,
                        CreatedAt = comment.CreatedAt,
-                       CreatedByName = user.UserName,
                        Content = comment.Content,
                        UpVotes = comment.Votes.Count(c => c.Type == VoteType.Up),
                        DownVotes = comment.Votes.Count(c => c.Type == VoteType.Down)

Apps/Website/Models/RegisterViewModel.cs

@@ -12,7 +12,6 @@ namespace Website.Models
 
     [Required]
     [Compare(nameof(Password))]
-    [Display(Name = "Password confirmation")]
     public string PasswordConfirm { get; set; }
   }
 }

Apps/Website/Startup.cs

@@ -98,7 +98,7 @@ namespace Website
       {
         endpoints.MapControllerRoute(
                   name: "default",
-                  pattern: "{controller=Links}/{action=Index}/{id?}");
+                  pattern: "{controller=Home}/{action=Index}/{id?}");
       });
     }
 

Apps/Website/Views/Accounts/Login.cshtml

@@ -1,20 +1,13 @@
 @model LoginViewModel
-@{
-  ViewData["Title"] = "Login";
-}
 
-<form class="form" asp-action="Login" method="post">
-  <div class="field">
-    <label asp-for="@Model.Username"></label>
-    <input asp-for="@Model.Username" />
-    <span asp-validation-for="@Model.Username"></span>
-  </div>
+<form asp-action="Login" method="post">
+  <label asp-for="@Model.Username"></label>
+  <input asp-for="@Model.Username" />
+  <span asp-validation-for="@Model.Username"></span>
 
-  <div class="field">
-    <label asp-for="@Model.Password"></label>
-    <input type="password" asp-for="@Model.Password" />
-    <span asp-validation-for="@Model.Password"></span>
-  </div>
+  <label asp-for="@Model.Password"></label>
+  <input type="password" asp-for="@Model.Password" />
+  <span asp-validation-for="@Model.Password"></span>
 
   <button type="submit">Sign in</button>
 </form>

Apps/Website/Views/Accounts/Register.cshtml

@@ -1,27 +1,17 @@
 @model RegisterViewModel
-@{
-  ViewData["Title"] = "Register";
-}
 
-<form class="form" asp-action="Register" method="post">
+<form asp-action="Register" method="post">
+  <label asp-for="@Model.Username"></label>
+  <input asp-for="@Model.Username" />
+  <span asp-validation-for="@Model.Username"></span>
 
-  <div class="field">
-    <label asp-for="@Model.Username"></label>
-    <input asp-for="@Model.Username" />
-    <span asp-validation-for="@Model.Username"></span>
-  </div>
+  <label asp-for="@Model.Password"></label>
+  <input type="password" asp-for="@Model.Password" />
+  <span asp-validation-for="@Model.Password"></span>
 
-  <div class="field">
-    <label asp-for="@Model.Password"></label>
-    <input type="password" asp-for="@Model.Password" />
-    <span asp-validation-for="@Model.Password"></span>
-  </div>
-
-  <div class="field">
-    <label asp-for="@Model.PasswordConfirm"></label>
-    <input type="password" asp-for="@Model.PasswordConfirm" />
-    <span asp-validation-for="@Model.PasswordConfirm"></span>
-  </div>
+  <label asp-for="@Model.PasswordConfirm"></label>
+  <input type="password" asp-for="@Model.PasswordConfirm" />
+  <span asp-validation-for="@Model.PasswordConfirm"></span>
 
   <button type="submit">Register</button>
 </form>

Apps/Website/Views/Links/Create.cshtml

@@ -3,16 +3,15 @@
   ViewData["Title"] = "Post a new link";
 }
 
-<form class="form" method="post">
-  @* @Html.LabelFor(m => m.Url)
+<form method="post">
+  <div>
+    @* @Html.LabelFor(m => m.Url)
     @Html.EditorFor(m => m.Url)
     @Html.ValidationMessageFor(m => m.Url) *@
 
-  <div class="field">
     <label asp-for="@Model.Url"></label>
     <input asp-for="@Model.Url" />
     <span asp-validation-for="@Model.Url"></span>
   </div>
-
   <button type="submit">Post!</button>
 </form>

Apps/Website/Views/Links/Index.cshtml

@@ -3,9 +3,10 @@
   ViewData["Title"] = "Latest Links";
 }
 
-<a class="mb" asp-action="Create" title="New post">Share a link with the world!</a>
+<a asp-action="Create" title="New post">Post a new super duber link</a>
 
-<ul class="links">
+<p>Here are the links</p>
+<ul>
   @foreach (var link in Model)
   {
     <li>

Apps/Website/Views/Links/Show.cshtml

@@ -1,22 +1,14 @@
 @model ShowLinkViewModel
-@{
-  ViewData["Title"] = "Viewing";
-}
 
 <partial name="_LinkItem" model="@Model.Link" />
 
-@if (Model.Comments.Length == 0)
-{
-  <p class="no-comment-yet">No comments yet</p>
-}
-else
-{
-  <ul class="comments">
-  @foreach (var comment in Model.Comments)
+@if(Model.Comments.Length == 0) {
+  <p>No comments yet</p>
+} else {
+  <ul>
+    @foreach (var comment in Model.Comments)
     {
-      <li>
-        <partial name="_CommentItem" model="@comment" />
-      </li>
+        <li><partial name="_CommentItem" model="@comment" /></li>
     }
   </ul>
 }

Apps/Website/Views/Shared/Components/Login/Default.cshtml

@@ -1,2 +1,2 @@
-<a asp-action="Register" asp-controller="Accounts">Register</a> or <a asp-action="Login" asp-controller="Accounts">Sign
-  in</a>
+<a asp-action="Register" asp-controller="Accounts">Register</a>
+<a asp-action="Login" asp-controller="Accounts">Sign in</a>

Apps/Website/Views/Shared/Components/Login/LoggedIn.cshtml

@@ -1,6 +1,4 @@
-<div class="loggedin-panel">
-  <p>Connected as <strong>@User.Identity.Name</strong></p>
-  <form asp-action="Logout" asp-controller="Accounts" method="post">
-    <button class="loggedin-panel__out" type="submit">Sign out</button>
-  </form>
-</div>
+<p>Connected as @User.Identity.Name</p>
+<form asp-action="Logout" asp-controller="Accounts" method="post">
+  <button type="submit">Sign out</button>
+</form>

Apps/Website/Views/Shared/_CommentForm.cshtml

@@ -1,21 +1,16 @@
 @model HN.Application.CommentLinkCommand
 
 <div>
-  <h3 class="add-a-comment">Add a comment</h3>
-  @if (User.Identity.IsAuthenticated)
-  {
-    <form class="form" asp-action="Create" asp-controller="Comments" method="post">
-      <div class="field">
-        <input type="hidden" asp-for="@Model.LinkId" />
-        <textarea asp-for="@Model.Content"></textarea>
-        <span asp-validation-for="@Model.Content"></span>
-      </div>
-
+  <h2>Add a comment</h2>
+  @if(User.Identity.IsAuthenticated) {
+    <form asp-action="Create" asp-controller="Comments" method="post">
+      <input type="hidden" asp-for="@Model.LinkId" />
+      <textarea asp-for="@Model.Content"></textarea>
+      <span asp-validation-for="@Model.Content"></span>
+      
       <button type="submit">Post a comment</button>
     </form>
-  }
-  else
-  {
+  } else {
     <p>Only logged in users can comment.</p>
   }
 </div>

Apps/Website/Views/Shared/_CommentItem.cshtml

@@ -1,21 +1,14 @@
 @model HN.Application.CommentDto
 
-<article class="comment">
-  <p>@Model.Content</p>
-  <ul class="comment__actions">
-    <li>posted at @Model.CreatedAt.ToLocalTime() by <strong>@Model.CreatedByName</strong></li>
-    <li>
-      <strong>@Model.UpVotes</strong> 👍 / <strong>@Model.DownVotes</strong> 👎
-    </li>
-    @if (User.Identity.IsAuthenticated)
-    {
-      <li>
-        <form class="votable" asp-controller="Comments" asp-action="Vote" asp-route-id="@Model.Id" method="post">
-          <input type="hidden" name="redirectTo" value="@Context.Request.Path" />
-          vote&nbsp;<input type="submit" name="type" value="up" />&nbsp;or&nbsp;<input type="submit" name="type"
-            value="down" />
-        </form>
-      </li>
-    }
-  </ul>
-</article>
+<span>@Model.Content</span>
+<div>
+  👍: @Model.UpVotes / 👎: @Model.DownVotes
+</div>
+
+@if (User.Identity.IsAuthenticated) {
+  <form asp-action="Vote" asp-controller="Comments" asp-route-id="@Model.Id" method="post">
+    <input type="hidden" name="redirectTo" value="@Context.Request.Path" />
+    <input type="submit" name="type" value="up" />
+    <input type="submit" name="type" value="down" />
+  </form>
+}

Apps/Website/Views/Shared/_Layout.cshtml

@@ -1,31 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - Website</title>
     <link rel="stylesheet" asp-append-version="true" href="~/css/site.css" />
 </head>
-
 <body>
-    <header class="topnav">
-        <div class="logo">
-            <a class="logo__link" href="/" title="back home">hn-dotnet</a>
-        </div>
-        <div class="topnav__account">
-            <vc:login />
-        </div>
+    <header>
+        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
+            <div class="container">
+                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Website</a>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
+                    <ul class="navbar-nav flex-grow-1">
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-controller="Links" asp-action="Index">Links</a>
+                        </li>
+                    </ul>
+                </div>
+
+                <vc:login />
+            </div>
+        </nav>
     </header>
-
-    <main class="main-content">
+    <div class="container">
         <partial name="_FlashMessage" />
-        <h1 class="main-content__title">@ViewData["Title"]</h1>
-        @RenderBody()
-    </main>
+        <main role="main" class="pb-3">
+            @RenderBody()
+        </main>
+    </div>
 
+    <footer class="border-top footer text-muted">
+        <div class="container">
+            &copy; 2020 - Website - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
+        </div>
+    </footer>
     <script src="~/js/site.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Scripts", required: false)
 </body>
-
 </html>

Apps/Website/Views/Shared/_LinkItem.cshtml

@@ -1,26 +1,11 @@
 @model HN.Application.LinkDto
 
-<article class="link">
-  <h2>
-    <a class="link_title" href="@Model.Url" rel="nofollow">@Model.Url</a>
-  </h2>
+<a asp-action="Show" asp-controller="Links" asp-route-id="@Model.Id">@Model.Url - created at @Model.CreatedAt.ToLocalTime() by @Model.CreatedByName (👍: @Model.UpVotes / 👎: @Model.DownVotes)</a>
 
-  <ul class="link__actions">
-    <li><a asp-action="Show" asp-controller="Links" asp-route-id="@Model.Id">🔍 view</a></li>
-    <li>posted at @Model.CreatedAt.ToLocalTime() by <strong>@Model.CreatedByName</strong></li>
-    <li>
-      <strong>@Model.UpVotes</strong> 👍 / <strong>@Model.DownVotes</strong> 👎
-    </li>
-    @if (User.Identity.IsAuthenticated)
-    {
-      <li>
-        <form class="votable" asp-controller="Links" asp-action="Vote" asp-route-id="@Model.Id" asp-route-url="@Model.Url"
-          method="post">
-          <input type="hidden" name="redirectTo" value="@Context.Request.Path" />
-          vote&nbsp;<input type="submit" name="type" value="up" />&nbsp;or&nbsp;<input type="submit" name="type"
-            value="down" />
-        </form>
-      </li>
-    }
-  </ul>
-</article>
+@if(User.Identity.IsAuthenticated) {
+  <form asp-controller="Links" asp-action="Vote" asp-route-id="@Model.Id" asp-route-url="@Model.Url" method="post">
+    <input type="hidden" name="redirectTo" value="@Context.Request.Path" />
+    <input type="submit" name="type" value="up" />
+    <input type="submit" name="type" value="down" />
+  </form>
+}

Apps/Website/wwwroot/css/site.css

@@ -1,172 +1,71 @@
-* {
-  margin: 0;
-  padding: 0;
+/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
+for details on configuring this project to bundle and minify static web assets. */
+
+a.navbar-brand {
+  white-space: normal;
+  text-align: center;
+  word-break: break-all;
+}
+
+/* Provide sufficient contrast against white background */
+a {
+  color: #0366d6;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+  font-size: 14px;
+}
+@media (min-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+.border-top {
+  border-top: 1px solid #e5e5e5;
+}
+.border-bottom {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.box-shadow {
+  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+}
+
+button.accept-policy {
+  font-size: 1rem;
+  line-height: inherit;
+}
+
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+  position: relative;
+  min-height: 100%;
 }
 
 body {
-  background-color: #efefef;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 1em;
-  line-height: 1.4;
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
 }
-
-a {
-  color: darkblue;
-}
-
-.mb {
-  display: block;
-  margin-bottom: 1rem;
-}
-
-.topnav {
-  background-color: orangered;
-  color: rgba(255, 255, 255, 0.87);
-  display: flex;
-  justify-content: space-between;
-  padding: 1rem;
-}
-
-.topnav a {
-  color: white;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-.loggedin-panel {
-  display: flex;
-  align-items: center;
-}
-
-.loggedin-panel__out {
-  background-color: transparent;
-  border: none;
-  color: white;
-  cursor: pointer;
-  font: inherit;
-  font-weight: bold;
-  margin-left: 1rem;
-  appearance: none;
-}
-
-.main-content {
-  margin: 2rem auto;
-  max-width: 900px;
+.footer {
+  position: absolute;
+  bottom: 0;
   width: 100%;
-}
-
-.main-content__title {
-  font-size: 2rem;
-  font-weight: bolder;
-  color: gray;
-}
-
-.links,
-.comments {
-  list-style-type: none;
-}
-
-.link,
-.form {
-  background-color: white;
-  padding: 1rem;
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
-  margin-bottom: 1rem;
-}
-
-.link_title {
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 1.25rem;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-.link_title:hover,
-.link_title:focus {
-  text-decoration: underline;
-}
-
-.link__actions,
-.comment__actions {
-  align-items: center;
-  color: rgba(0, 0, 0, 0.54);
-  display: flex;
-  list-style-type: none;
-}
-
-.link__actions li + li,
-.comment__actions li + li {
-  margin-left: 1rem;
-}
-
-.link__actions a,
-.comment__actions a {
-  text-decoration: none;
-}
-
-.link__actions a:hover,
-.link__actions a:focus,
-.comment__actions a:hover,
-.comment__actions a:focus {
-  text-decoration: underline;
-}
-
-label,
-input,
-.field-validation-error {
-  display: block;
-}
-
-label {
-  font-weight: bold;
-}
-
-.field-validation-error {
-  color: orangered;
-}
-
-.field {
-  margin-bottom: 1rem;
-}
-
-.message {
-  background-color: bisque;
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.votable {
-  align-items: center;
-  display: flex;
-}
-
-.no-comment-yet {
-  color: rgba(0, 0, 0, 0.72);
-  font-style: italic;
-  margin: 2rem 0;
-}
-
-.add-a-comment {
-  color: gray;
-  font-size: 1.25rem;
-}
-
-textarea {
-  color: inherit;
-  font: inherit;
-  width: 100%;
-  min-height: 100px;
-}
-
-.comments {
-  padding-left: 1rem;
-}
-
-.comment {
-  background-color: #fafafa;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
-  padding: 1rem;
-  margin-bottom: 1rem;
+  white-space: nowrap;
+  line-height: 60px; /* Vertically center the text there */
 }