Portfolio: Blog Live Search

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.9", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Return Home Report An Issue

Blog Page

From the Portfolio: Blog Search exercise, you should already have the ability to search for blogs when the client visits http://localhost:4000/blog?title=search_string.

Using LiveView, you’re going to add a realtime blog search. Now, the list of blogs will update every time the user types into the search text input without needing to press a submit button.

Test and implement a LiveView on a new http://localhost:4000/blog_live route rather than replacing the existing http://localhost:4000/blog route to avoid deleting your existing work.

Blog Live

The Blog LiveView should display a list of all blogs when the user visits http://localhost:4000/blog_live.

There should be a text input that triggers a phx-change event to filter the list of blogs using the value of the text input.

Consider including the following test cases.

• Visit http://localhost:4000/blog_live and assert all blogs are found on the page.
• Visit http://localhost:4000/blog_live and trigger the search event. Assert all matching blogs are found on the page, and non-matching blogs are not found.

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, file_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(progress_path, Jason.encode!(Map.put(existing_progress, file_name, completed)))
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout solutions
$ git checkout -b portfolio-blog-live-search-exercise
$ git add .
$ git commit -m "finish portfolio blog live search exercise"
$ git push origin portfolio-blog-live-search-exercise

Create a pull request from your portfolio-blog-live-search-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your instructor by including @BrooklinJazz in your PR description to get feedback. You (or your instructor) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.