Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: bulma instructions | rails | actioncable #29086

Merged
merged 1 commit into from
Nov 14, 2024
Merged

fix: bulma instructions | rails | actioncable #29086

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions ruby_on_rails/mailers_advanced_topics/actioncable_lesson.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

The app we'll build will be in two stages. The first stage will be an app for sending messages only viewable to those currently logged in. We'll then build on it in the second stage to save the messages so that they are also viewable to anyone who logs in in the future.

### Setup

Check failure on line 7 in ruby_on_rails/mailers_advanced_topics/actioncable_lesson.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Required heading structure 

ruby_on_rails/mailers_advanced_topics/actioncable_lesson.md:7 TOP004/lesson-headings Required heading structure [Expected: ### Lesson overview; Actual: ### Setup] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP004.md

First let's create the app

Expand All @@ -23,7 +23,7 @@
Run the devise installer

```bash
bundle exec rails generate devise:install
rails generate devise:install
```

Open `config/environments/development.rb` and add the following line
Expand All @@ -35,7 +35,7 @@
Generate our user model and migrate

```bash
bundle exec rails generate devise user && bundle exec rails db:migrate
rails generate devise user && rails db:migrate
```

To get things started we'll just create a couple of users in `db/seeds.rb`
Expand All @@ -48,13 +48,13 @@
You can set the user info to whatever you want. Then run the seed file

```bash
bundle exec rails db:seed
rails db:seed
```

Let's create a basic one page app, users will land on our homepage, get redirected to log in, and then directed back to the homepage. First let's create a controller. We'll just call it `hangouts` as our users will hangout there doing absolutely nothing.

```bash
bundle exec rails generate controller hangouts index
rails generate controller hangouts index
```

Set the root to our index page in `routes.rb`
Expand Down Expand Up @@ -82,7 +82,7 @@
Now open the `application.scss` file and right at the bottom add

```css
@import "bulma";
@use "bulma";
```

Lastly, to add the navbar functionality we can just add it straight into the main layout file. Open `app/views/layouts/application.html.erb` add the following code right below the opening `<body>` tag and above the `<%= yield %>` line.
Expand Down Expand Up @@ -117,11 +117,11 @@
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user

def connect
self.current_user = find_verified_user
end

private

def find_verified_user
Expand All @@ -140,7 +140,7 @@
We can create a channel for messages. In the terminal we can write

```bash
bundle exec rails generate channel message
rails generate channel message
```

You can see from the output it creates some files for us
Expand Down Expand Up @@ -206,9 +206,23 @@
}
```

Import this into `app/assets/stylesheets/application.scss` by adding the
following at the bottom of that file:

```scss
@import "./hangouts.scss"
```

The [Asset Pipeline](https://guides.rubyonrails.org/asset_pipeline.html) should
pick up on these changes, but if not:

1. run `./bin/dev` to recompile the stylesheet assets
1. If the changes are not being picked up, run `rails assets:precompile`.

Now when the form is submitted, we need to intercept and handle it. Open up our `app/javascript/channels/message_channel.js` and take a look at the code as it stands.

```javascript

import consumer from "./consumer"

const messageChannel = consumer.subscriptions.create("MessageChannel", {
Expand Down Expand Up @@ -333,19 +347,19 @@
In the terminal type

```bash
bundle exec rails generate model message body:string user:references
rails generate model message body:string user:references
```

And then

```bash
bundle exec rails db:migrate
rails db:migrate
```

Next we need a controller for our messages. We only need a create action since we aren't doing anything else with them

```bash
bundle exec rails generate controller messages
rails generate controller messages
```

Then in your `routes.rb` create the resource
Expand Down
Loading