#assign socket value which date_input uses, breaks something without any errors

1 messages · Page 1 of 1 (latest)

grave moth
#

So extremely weird...
I am using

<.form :let={dateFrom} phx-submit="ignore">
            <%= date_input dateFrom, :date_from, [phx_change: "change_date", value: @selected_date_from] %>
            <%= date_input dateFrom, :date_to, [phx_change: "change_date", value: @selected_date_to] %>
          </.form>

def handle_event("change_date", %{"date_from" => string_date_from}, socket) do
    chart_data_type = socket.assigns.selected_data_type
    pos = socket.assigns.selected_pos
    {:ok, date_from} = Date.from_iso8601(string_date_from)
    {:ok, date_to} = Date.from_iso8601(socket.assigns.selected_date_to)
    args = %{
      queriedValue: chart_data_type,
      pos: pos,
      date_from: date_from,
      date_to: date_to
    }
    {:ok, data} = MetacrisisBi.SalesRecord.Record.by_month_warehouse_sales(args)
    {:noreply, socket
    |> assign(selected_date_from: string_date_from)
    |> push_event("update-points-date", %{points: data.datasets, labels: data.dates})}
  end

If I don't do the assign the new value to selected_date_from, all works nice, ChartJS updates and all.
No errors on JS part, and nothing in server logs.

I need to update the selected_date_from as I need to use the value in some other handle_events

Any ideas?
I tried both Date type and well formated string type... weird.

#

And in mount its:
`

And in mount:

def mount(params, _session, socket) do
    ....
    {:ok, default_date_from} = Date.new(2023,01,01)
    default_date_to = Date.utc_today
    string_default_date_from = Date.to_string(default_date_from)
    string_default_date_to = Date.to_string(default_date_to)
   ....
    socket =
      assign(socket,
        values: nil,
        format: "",
        params: params,
        points: [],
        posts: posts,
        post_selector: post_selector(posts),
        selected_date_from: string_default_date_from,
        selected_date_to: string_default_date_to,
        selected_data_type: chart_data_type,
        selected_pos: nil,
        warehouse_selector: warehouse_selector(list_of_pos),
        dataType_selector: dataType_selector(),
        create_form: false,
      )
      IO.puts("----")
      IO.inspect(byte_size(:erlang.term_to_binary(socket)))
    {:ok, socket
    |> push_event("update-points", %{points: data.datasets, labels: data.dates})
  }
  end
#

I wonder if the input_date has some controlled vs uncontrolled value issue...

#

I can hack it by adding new keys to socket for the actually real data, but not update the socket.assign.key that the date_input uses

versed magnet
#

please format you code like this:
```elixir
# Your code here
Enum.map(list, &String.upcase/1)
```
it's really hard to read otherwise

#

I don't understand your quesrion, what's not working exactly?

grave moth
#

Formated, thanks for the Elixir tip.

When I do

|> assign(selected_date_from: string_date_from)

In the handle_event above, the ChartJS app breaks.
The weird thing is there are no relations to it, and no direct data sent because of that assign.
Assign only has to do with the date_input (from above).
Updating the keyvalue in socket.assign which the date_input is using, has some side effect behaviour which breaks the JS interoperability.

versed magnet
#

without seeing the JS code or the actual error I'm not sure anyone can help, I don't think there's really enough info here to know what's going on

#

are you using a custom JS hook?

#

is it re-rendering and re-mounting every time maybe?

grave moth
#

It not re-rendering, not re-mounting, I logged the crap out of everything to find the behaviour.

The assigning of selected_date_from key in socket is only used by date_input in the form.
I understand, its quite mystical. And it only started happening when I introduced the date_input element in LiveView // html

#

So I would bet it has somethign to do with the behaviour of date_input element

versed magnet
#

and use <.input type="date" ... /> function component instead of the old (deprecated) Phoenix.HTML functions

grave moth
#

Yep thank you, changed it, but the issue with input_date still persists!

I can't divine what is the difference with to_form, as the handle_event is currently already getting a map of string:value

#

I found a hack around it as I wrote..
I just assign the input data's handle_event value to a differnt socket.assigns key than the one the input_data is using.

And since input data is preserving its clicked value (not the original @socket.assign value), it works.

But maybe that is also why, both the input_data and the socket.assign.selected_from_date are fighting over the same input data value