pjullrich/pragprog-book-tables

Meow

This is the reference implementation of the demo project of the book Build Table Views with Phoenix LiveView.

You can find the starter version of the application to which we'll add the code step-by-step in pragprog-book-tables-starter-app.zip. It was created by the super kind @thebrianemory who went through the book backwards and removed all code that we added! Now, you can download that version and add the code from the book step-by-step yourself. Super great work, Brian! Thank you so much! ❤️💛💙💚🧡

To start your Phoenix server:

• Install dependencies with mix deps.get
• Create and migrate your database with mix ecto.setup
• Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.

Learn more

• Official website: https://www.phoenixframework.org/
• Guides: https://hexdocs.pm/phoenix/overview.html
• Docs: https://hexdocs.pm/phoenix
• Forum: https://elixirforum.com/c/phoenix-forum
• Source: https://github.com/phoenixframework/phoenix

pragprog-book-tables's Issues

mix.exs missing :inets dependency

Apparently newer versions of Elixir no longer come with the :http_util module. This is solved by adding :inets into the extra_applications as shown below:

# Configuration for the OTP application.
  #
  # Type `mix help compile.app` for more information.
  def application do
    [
      mod: {Meow.Application, []},
      extra_applications: [:logger, :runtime_tools, :inets]
    ]
  end

This should be done with the mix.exs in the zipped up starter app as well.

Multiple window "scroll" events on the window may cause bugs

Hello!

Thanks for your book, I've bought it and I'm currently reading it 👍🏻 .

I would like to make a small comment about the infinite scrolling part. About 1 year ago, I implemented it a bit the same way you did and had an "hard-to-debug" issue.

The issue was more or less this: basically by using window.addEventListener directly inside the mounted function of the hook, there were cases where multiple identical events were attached to the window. So basically every time the user was using live navigation, it would add a new scroll event to the window. Something which is not really wanted.

The issue I had is that at some point, the JavaScript was pushing the event to a dead LiveView and causing the page to reload because multiple scroll events were bound on the window and one of them was triggered on a dead LiveView.

I fixed the issue by removing the scroll event using removeEventListener when the LiveView gets destroyed, something like that:

mounted() {
  // ...
  window.addEventListener("scroll", this.boundInfiniteScroll);
  // ...
},
destroyed() {
  // ...
  window.removeEventListener("scroll", this.boundInfiniteScroll);
  // ...
}

Note that the removeEventListener function needs a reference to the exact callback function that was added

Ecto.ParameterizedType.init/2

pragprog-book-tables/lib/meow/ecto_helper.ex

Line 3 in d2e3825

{:parameterized, Ecto.Enum, Ecto.Enum.init(values: values)}

There‘s a way in ecto itself to do that:
https://hexdocs.pm/ecto/Ecto.ParameterizedType.html#init/2

Unexpected behaviour when filter and pagination live components interact

@PJUllrich thanks for this well written and informative book.

Issue

When a filter is applied to a paginated list the current page is not being reset - this sometimes causes the list to appear empty.

Reproduce

• Go to page 2 of the meerkat list page.
• Add a filter for meerkat name.
• If there are not enough records to reach the second page the entire list will appear empty.

Solution?

Reset page to 1 in MeowWeb.MeerkatLive when new filter is detected