add LiveView for groups #220 / #232

dwyl · Oct 17, 2022 · 997cc36 · 997cc36
1 parent 0d5376b
commit 997cc36
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 9 deletions.
diff --git a/BUILDIT.md b/BUILDIT.md
@@ -34,11 +34,16 @@ before we added `groups`:
 Our objective with **`groups`** 
 is to enable **`people`** 
 to invite others 
-to ***collaborate*** 
-with them.
-
-This is a _generalised_ version
-that can be used in **_any_ application**
+to ***collaborate***.
+
+Our reasoning to include **`groups`**
+in the **`auth`** App is that 
+we _already_ store all **`people`** related
+(_personally identifiable_) data
+in **`auth`** therefore _grouping_ 
+those **`people`** together makes logical sense.
+Therefore this is a **_generalised_ implementation**
+that can be used by **_any_ application**
 that requires collaboration/teamwork.
 
 ## 10.1 Create Schema
@@ -56,5 +61,146 @@ mix phx.gen.schema Group groups name:binary desc:binary kind:string
 Both `group.name` and `group.desc` (description)
 are considered personally identifiable or sensitive information
 hence using the `binary` type in the `gen.schema` command.
-They will be encrypted at rest using 
-[`Fields.Encrypted`](https://github.com/dwyl/fields).
+The data for these fields will be encrypted at rest using 
+[`Fields.Encrypted`](https://github.com/dwyl/fields).
+
+## 10.2 Create `LiveView` for `groups`
+
+Create the `lib/auth_web/live` directory
+and the controller at `lib/auth_web/live/groups_live.ex`:
+
+```elixir
+defmodule AuthWeb.GroupsLive do
+  use AuthWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+end
+```
+
+Create the `lib/auth_web/views/groups_view.ex` file:
+
+```elixir
+defmodule AuthWeb.GroupsLiveView do
+  use AuthWeb, :view
+end
+```
+
+Next, create the
+**`lib/auth_web/live/groups_live.html.heex`**
+file 
+and add the following line of `HTML`:
+
+```html
+<h1 class="">Groups LiveView!</h1>
+```
+
+Finally, to make the **root layout** simpler, 
+open the 
+`lib/auth_web/templates/layout/live.html.heex`
+file and 
+update the contents of the `<body>` to:
+
+```html
+<body>
+  <header>
+    <section class="container">
+      <h1>App Name Here</h1>
+    </section>
+  </header>
+  <%= @inner_content %>
+</body>
+```
+
+## 1.5 Update `router.ex`
+
+Now that you've created the necessary files,
+open the router
+`lib/auth_web/router.ex` 
+replace the default route `PageController` controller:
+
+```elixir
+get "/", PageController, :index
+```
+
+with our newly created `GroupsLive` controller:
+
+
+```elixir
+scope "/", AuthWeb do
+  pipe_through :browser
+
+  live "/groups", GroupsLive
+end
+```
+
+Now if you refresh the page 
+you should see the following:
+
+![liveveiw-page-with-tailwind-style](https://user-images.githubusercontent.com/194400/176137805-34467c88-add2-487f-9593-931d0314df62.png)
+
+## 1.6 Update Tests
+
+At this point we have made a few changes 
+that mean our automated test suite will no longer pass ... 
+Run the tests in your command line with the following command:
+
+```sh
+mix test
+```
+
+You should see the tests fail:
+
+```sh
+..
+
+  1) test GET / (AppWeb.PageControllerTest)
+     test/app_web/controllers/page_controller_test.exs:4
+     Assertion with =~ failed
+     code:  assert html_response(conn, 200) =~ "Hello TailWorld!"
+     left:  "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
+     <main class=\"container\">
+     <h1 class=\"text-6xl text-center\">LiveView App Page!</h1>\n</main></div>
+     </body>\n</html>"
+     right: "Hello TailWorld!"
+     stacktrace:
+       test/app_web/controllers/page_controller_test.exs:6: (test)
+
+Finished in 0.1 seconds (0.06s async, 0.1s sync)
+3 tests, 1 failure
+```
+
+Create a new directory: `test/app_web/live`
+
+Then create the file: 
+`test/app_web/live/app_live_test.exs`
+
+With the following content:
+
+```elixir
+defmodule AppWeb.AppLiveTest do
+  use AppWeb.ConnCase
+
+  test "GET /", %{conn: conn} do
+    conn = get(conn, "/")
+    assert html_response(conn, 200) =~ "LiveView App Page!"
+  end
+end
+```
+
+Save the file 
+and re-run the tests: `mix test`
+
+You should see output similar to the following:
+
+```sh
+Generated app app
+The database for App.Repo has been dropped
+...
+
+Finished in 0.1 seconds (0.08s async, 0.1s sync)
+3 tests, 0 failures
+
+Randomized with seed 796477
+```
diff --git a/lib/auth_web/live/groups_live.ex b/lib/auth_web/live/groups_live.ex
@@ -0,0 +1,7 @@
+defmodule AuthWeb.GroupsLive do
+  use AuthWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+end
diff --git a/lib/auth_web/live/groups_live.html.heex b/lib/auth_web/live/groups_live.html.heex
@@ -0,0 +1 @@
+<h1 class="">Groups LiveView!</h1>
diff --git a/lib/auth_web/router.ex b/lib/auth_web/router.ex
@@ -62,6 +62,9 @@ defmodule AuthWeb.Router do
     # resources "/settings/apikeys", ApikeyController
 
     get "/logout", AuthController, :logout
+
+    # Groups
+    live "/groups", GroupsLive
   end
 
   pipeline :api do

diff --git a/lib/auth_web/templates/layout/live.html.heex b/lib/auth_web/templates/layout/live.html.heex
@@ -0,0 +1,8 @@
+<body>
+  <header>
+    <section class="container">
+      <h1>Your App Name Here</h1>
+    </section>
+  </header>
+  <%= @inner_content %>
+</body>
diff --git a/lib/auth_web/views/groups_view.ex b/lib/auth_web/views/groups_view.ex
@@ -0,0 +1,3 @@
+defmodule AuthWeb.GroupsLiveView do
+  use AuthWeb, :view
+end
diff --git a/mix.exs b/mix.exs
@@ -52,7 +52,7 @@ defmodule Auth.Mixfile do
       {:postgrex, ">= 0.15.13"},
       {:phoenix_html, "~> 3.2.0"},
       {:phoenix_live_reload, "~> 1.3.3", only: :dev},
-      {:phoenix_live_view, "~> 0.17.5"},
+      {:phoenix_live_view, "~> 0.18.0"},
       {:floki, ">= 0.32.0", only: :test},
       # {:phoenix_live_dashboard, "~> 0.6.1"},
       {:esbuild, "~> 0.4", runtime: Mix.env() == :dev},
@@ -121,7 +121,8 @@ defmodule Auth.Mixfile do
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       seeds: ["run priv/repo/seeds.exs"],
       test: ["ecto.reset", "test"],
-      "assets.deploy": ["esbuild default --minify", "phx.digest"]
+      "assets.deploy": ["esbuild default --minify", "phx.digest"],
+      s: ["phx.server"]
     ]
   end
 

diff --git a/mix.lock b/mix.lock
@@ -16,6 +16,7 @@
   "dialyxir": {:hex, :dialyxir, "1.1.0", "c5aab0d6e71e5522e77beff7ba9e08f8e02bad90dfbeffae60eaf0cb47e29488", [:mix], [{:erlex, ">= 0.2.6", [hex: :erlex, repo: "hexpm", optional: false]}], "hexpm", "07ea8e49c45f15264ebe6d5b93799d4dd56a44036cf42d0ad9c960bc266c0b9a"},
   "earmark_parser": {:hex, :earmark_parser, "1.4.25", "2024618731c55ebfcc5439d756852ec4e85978a39d0d58593763924d9a15916f", [:mix], [], "hexpm", "56749c5e1c59447f7b7a23ddb235e4b3defe276afc220a6227237f3efe83f51e"},
   "ecto": {:hex, :ecto, "3.7.2", "44c034f88e1980754983cc4400585970b4206841f6f3780967a65a9150ef09a8", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a600da5772d1c31abbf06f3e4a1ffb150e74ed3e2aa92ff3cee95901657a874e"},
+  "ecto_erd": {:hex, :ecto_erd, "0.5.0", "8281a2c4a41cddb9945189077506f2e489d8a946989022c16f8b63554b98123a", [:mix], [{:ecto, "~> 3.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:html_entities, "~> 0.5", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "b9364408964cbace48dfb26499420a8bc91ba0915c1c90239c5fe99bdca9cb6c"},
   "ecto_sql": {:hex, :ecto_sql, "3.7.2", "55c60aa3a06168912abf145c6df38b0295c34118c3624cf7a6977cd6ce043081", [:mix], [{:db_connection, "~> 2.2", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.7.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.4.0 or ~> 0.5.0 or ~> 0.6.0", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.15.0 or ~> 0.16.0 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "3c218ea62f305dcaef0b915fb56583195e7b91c91dcfb006ba1f669bfacbff2a"},
   "elixir_auth_github": {:hex, :elixir_auth_github, "1.6.2", "ad151050d23d35b5b7a4d5776096cc68deaa95c4b7b182adeb1783b0a2fc4985", [:mix], [{:httpoison, "~> 1.8.0", [hex: :httpoison, repo: "hexpm", optional: false]}, {:jason, "~> 1.2", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "a48b2379bea3aed338db3c44491b12b98fdd307e81544c803abad5acf9746326"},
   "elixir_auth_google": {:hex, :elixir_auth_google, "1.6.3", "13f9fcecc32d8a0e5eee5d24419d603dbec495fcc9c60ac314d64ba4af17fc83", [:mix], [{:httpoison, "~> 1.8.0", [hex: :httpoison, repo: "hexpm", optional: false]}, {:jason, "~> 1.2", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "6c0e9852879b22ac20908ca155cfe389fc099de6075359adbffe5a3d8fa8592f"},