DEV Community: Tim Kamanin 🚀

How to update post params in Elixir Phoenix

Tim Kamanin 🚀 — Fri, 17 Sep 2021 13:00:40 +0000

Started playing with the Phoenix Framework and I have no idea what I'm doing, but it's nice to have that beginner feeling after 14 years in PHP, Python and JavaScript.

So here I am, trying to create a simple blog with Phoenix.

And one of the first stumbling blocks for me was:

How on earth, I'm going to add current user id to post parameters?

So I have the following posts schema:

defmodule Timphx.Blog.Post do
  use Ecto.Schema
  import Ecto.Changeset

  schema "posts" do
    field :body, :string
    field :published, :boolean, default: false
    field :title, :string
    belongs_to :author, Timphx.Accounts.User

    timestamps()
  end

  @doc false
  def changeset(post, attrs) do
    post
    |> cast(attrs, [:title, :body, :published, :author_id])
    |> validate_required([:title, :body, :published, :author_id])
  end
end

And Phoenix generated for me the following PostController:

defmodule TimphxWeb.PostController do
  use TimphxWeb, :controller

  alias Timphx.Blog
  alias Timphx.Blog.Post

def create(conn, %{"post" => post_params}) do
    case Blog.create_post(post_params) do
      {:ok, post} ->
        conn
        |> put_flash(:info, "Post created successfully.")
        |> redirect(to: Routes.post_path(conn, :show, post))

      {:error, %Ecto.Changeset{} = changeset} ->
        render(conn, "new.html", changeset: changeset)
    end
end

And now, within the create function, I want to add current user to post_params. How can I do this?

Turns out post_params is a map and it's immutable, so you can't do something naive like:

post_params.author_id = conn.assigns.current_user.id

Oh yes, btw, conn.assigns.current_user.id is how you get the current user id.

I had to dig into Elixir docs (which I see for the first time) and found explanation of Maps. There I read about the Map.put method that allows you to create a new map from a map and a new key value:

Map.put(%{:a => 1, 2 => :b}, :c, 3)

Eureka! Now I knew how to update post_params and add current user there:

post_params = Map.put(post_params, "author_id", conn.assigns.current_user.id)

So my final code for the create function looks like:

def create(conn, %{"post" => post_params}) do
    post_params = Map.put(post_params, "author_id", conn.assigns.current_user.id)
    case Blog.create_post(post_params) do
      {:ok, post} ->
        conn
        |> put_flash(:info, "Post created successfully.")
        |> redirect(to: Routes.post_path(conn, :show, post))

      {:error, %Ecto.Changeset{} = changeset} ->
        render(conn, "new.html", changeset: changeset)
    end
  end

Slam dunk, done, baby! For now, I'm super stoked!

How to print exception traceback in Python

Tim Kamanin 🚀 — Fri, 20 Nov 2020 08:59:31 +0000

Sometimes you're deep down in the code, and you need to debug an error quickly, send a traceback somewhere or log it into a file.

Here's how you can print the traceback of an error in the Python:

import traceback

try:
    raise Boom('This is where our code blows')
except Exception:
    # here's how you get a traceback output
    traceback_output = traceback.format_exc()
    # Now you can print it, or send it, or save it in a file
    print(traceback_output)

It's a quick and dirty solution, and you probably should be using more sophisticated ways of debugging like error logging, but sometimes you don't have a choice.

Hope it helps someone, let me know by tweeting @timonweb.

Source: https://timonweb.com/python/how-print-traceback-exception-python/

How to get number of days in a month with JavaScript

Tim Kamanin 🚀 — Thu, 02 Jan 2020 13:44:38 +0000

const getDaysInMonth = date =>
  new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

getDaysInMonth(new Date(2019, 1)); // 28 days in February 2019
getDaysInMonth(new Date(2019, 3)); // 30 days in April 2019

There are two things you need to understand about dates in JS to get how this function is working:

Months in JavaScript Date objects are null-indexed, which means 0 is January, 1 is February ..., and 11 is December;
When we create a Date and provide zero as the third argument new Date(2019, 2, 0), we literally say "the last day of the previous month.".

Examples:

getDaysInMonth(new Date(2019, 1, 0)); // January 31st, 2019
getDaysInMonth(new Date(2019, 2, 0)); // February 28th, 2019
getDaysInMonth(new Date(2019, 0, 0)); // December 31, 2018

So in plain English, in getDaysInMonth we take a date, increment a month, so we get the next month and at the same time, set a day for the next month to "0" which sets the date to the last day of the previous month, which, in turn, is our initial month. Then we use getDate() function that returns us the day as an integer.

Originally posted at: https://timonweb.com/tutorials/how-to-get-number-of-days-in-a-month-with-javascript/

How to add multiple CSS styles to an element in Vanilla JavaScript

Tim Kamanin 🚀 — Tue, 31 Dec 2019 16:31:12 +0000

If you want to add multiple CSS styles to an element in Vanilla JS, you could do something like this:

// Grab a button element.
const button = document.querySelector('button');

button.style.backgroundColor = "red";
button.style.color = "white";
button.style.padding = "20px";

It works but looks a bit tedious and unclean. And it's hard to pass such styles around. Would be nice to put those styles in an object, like this:

const style = {
    backgroundColor: "red",
    color: "white",
    padding: "20px"
};

Now, we need to just mix our style object into button.style, like this:

Object.assign(button.style, style);

And voilà, we're done!

If you find this tutorial helpful, please share it however you can :)

P.S. information for those who while reading this, sputters and tears the hair on the head, shouting: "Use CSS!". This one is not about "Why," it's about "How." Of course, you could and, in most cases, should use CSS for this, but that's another story. Relax.

How to test if element exists/doesn't exist with Jest and react-testing-library

Tim Kamanin 🚀 — Tue, 31 Dec 2019 16:28:14 +0000

At first, let's create a simple avatar component:

function Avatar({ username, src, usernameIsHidden = false }) {
  return (
    <div>
      <img src={src} />
      {!usernameIsHidden && <h4 data-testid="username">{username}</h4>}
    </div>
  );
}

The usernameIsHidden flag allows us to toggle visibility of a username.

We'll test username element for existence and non-existence.

1. Here's how to test if the element exists and its content matches our expectation:

import { render } from "@testing-library/react";

test("username exists", () => {
  const { getByTestId } = render(
    <Avatar username="Timonweb" src="https://example.com/avatar.jpg" />
  );
  expect(getByTestId(/username/i).textContent).toBe("Timonweb");
});

2. We can also test if the element exists at all:

import { render } from "@testing-library/react";

test("username exists", () => {
  const { queryByTestId } = render(
    <Avatar username="Timonweb" src="https://example.com/avatar.jpg" />
  );
  expect(queryByTestId(/username/i)).toBeTruthy();
});

3. Finally, this is how to test for the non-existence of the element:

import { render } from "@testing-library/react";

test("username doesn't exist", () => {
  const { queryByTestId } = render(
    <Avatar
      username="Timonweb"
      src="https://example.com/avatar.jpg"
      usernameIsHidden
    />
  );
  expect(queryByTestId(/username/i)).toBeNull();
});

In cases 2 and 3, we use queryByTestId instead of getByTestId. queryByTestId doesn't fail when the queried element doesn't exist, instead, it returns either a value or null and that's what we test with expect().toBeTruthy() and expect().toBeNull().