DEV Community

Building a simple Calendly clone with Phoenix LiveView (pt. 3)

Ricardo García Vega on November 18, 2021

In the last part of the series, we generated a new Phoenix project and made the necessary changes to support Tailwind CSS. We also defined our doma...

Read full post

Anton • Nov 19 '21

I ran into a bit of snag yesterday. Today I started the tutorial again from the beginning and hit the same thing:

Ricardo García Vega • Nov 20 '21 • Edited

👋🏼 Can you run mix hex.outdated and confirm that you have the latest version of LiveView installed?

Anton • Nov 20 '21

I have updated the version of live_view and it worked! Ricardo thanks for your help.

A couple other things that happened:
First, in /lib/calendlex_web/live/page_live.html.heex we have

<EventType.event_type event_type={event_type} path={Routes.live_path(@socket, CalendlexWeb.EventTypeLive, event_type.slug)} />

Which led me to an error message:
function EventType.event_type/1 is undefined (module EventType is not available)

The solution was just to add CalendlexWeb.Components.EventType.event_type instead of just EventType.event_type

So, my question how did you manage to make it just EventType instead of the whole thing CalendlexWeb.Components.EventType?

Second, and instead of EventType.event_type you have in the source code EventType.selector.

Chris Turner • Nov 20 '21 • Edited

I was having the same issue...

Aliasing EventType in the page_live.ex file does work.

Ricardo García Vega • Nov 21 '21

As Chris said, aliasing the component module in your live view should do the trick. Regarding the selector function, it was a last-minute refactor I did. I will pay more attention to these kind of errors in the following parts, sorry for the inconvenience 🙌

Anton • Nov 20 '21

phoenix_live_view 0.16.4 0.17.5
Is the version of live_view an issue here? Seems so, I ran your source code it worked. I also checked it with the hex.outdated command and the live_view version is 0.17.5.
I'll try to update and report back.

Ricardo García Vega • Nov 20 '21

Upgrading phoenix_live_view should fix the issue 🤞🏼

Julio Linarez • Dec 17 '22

Great tutorial!

Chris Turner • Nov 18 '21

I'm running into an issue with the live_session @owner assignment...

When I start up the server and navigate to the page, I get an error like the following:
[error] #PID<0.521.0> running CalendlexWeb.Endpoint (connection #PID<0.520.0>, stream id 1) terminated
Server: localhost:4000 (http)
Request: GET /
** (exit) an exception was raised:
** (ArgumentError) assign @owner not available in template.

Please make sure all proper assigns have been set. If you are
calling a component, make sure you are passing all required
assigns as arguments.

Available assigns: [:changed, :event_types, :flash, :live_action, :socket]

I've made sure all the code matches. Any ideas why? Just seems like the live_session stuff isn't working, or being ignored.

Anton • Nov 19 '21

I think that's because you need to remove this from the router:

  scope "/", CalendlexWeb do
    pipe_through :browser

    live "/", PageLive
  end

But then I think you will ran into the same error I ran into.

Chris Turner • Nov 19 '21

That worked for me, thanks.

Fortunately (unfortunately?), I didn't run into your issue.

Ricardo García Vega • Nov 20 '21

Hi there! Can you run mix hex.outdated and confirm that you have the latest version of LiveView installed?

Chris Turner • Nov 20 '21 • Edited

Actually, I had noticed that your live_view version was higher, so I did update that and it fixed the @owner assignment issue.

I was also running into another issue with the EventType component:
"function EventType.event_type/1 is undefined (module EventType is not available)" and it also couldn't event find the "EventType" module.

It seems that's supposed to be EventType.selector... so changing that, and then adding "alias Calendlex.Components.EventType" to the page_live.ex file helped.

Chris Turner • Nov 20 '21

I see that Anton was having the same issue as me, so disregard this.

Ricardo García Vega • Nov 20 '21

Yeah, my bad. I should have specified that live_session should wrap the current scope. I'll rewrite that part, thanks for reporting the issue :)

AlaaDAhmed • Dec 12 '21 • Edited

Very nice tutorial thank you very much, I have small note for you :)
in selector function component instead of wrapping the whole classes inside {[class: "inline-block w-8 h-8 ..."]} you can just write it like normal HTML class, just like this class={"inline-block w-8 ..."} so just wrap the double quotes only with {".."}

Ricardo García Vega • Dec 13 '21

Thanks for the note, you are right. I'll change it ASAP, cheers!

Tracey Onim • Jun 29 '22

Hello Ricardo, Kindly elaborate more on temporary_assigns options for me , how exactly do they work? I have tried to pass it in my application but when I render the page I can't see the list of items assigned since it has been overriden by the empty list passed in temporary_assigns