Implement squads and members functionality

[weteamsteve]

Implement squads model and associations from squadsnap

Reference squadsnap project, as well as the squadsnap/wiki/Models page.

Reference How to Set Up a Ruby on Rails Project with a React Frontend

[weteamsteve]

create members migration rails g model Member

      t.references :user, foreign_key: true
      t.string :position
      t.string :number
      t.string :membership # ie owner, manager, member, request, ghost

create squads migration rails g model Squad

      t.string :name
      t.string :sport
      t.references :owner, index: true, foreign_key: { to_table: :users }

add squad to members migration rails g migration AddSquadToMember squad:references

    add_reference :members, :squad, null: false, index: true, foreign_key: true

[weteamsteve]

rails generate controller api/v1/Squads index create show destroy -j=false -y=false --skip-template-engine --no-helper

[weteamsteve]

• [x] Show squad 4 gives error NameError (undefined local variable or method 'squad' for #<Api::V1::SquadsController:0x00007fdf762819e8>): in server console and Squad.jsx:21 GET http://localhost:3000/api/v1/show/1 500 (Internal Server Error) in web console

• [ ] How are we going to access member data from the squads area on the frontend. Check out how to include rails associated model data in react components and Show associated model data in React Rails

• [ ] Will have to investigate how we are going to implement approve and reject membership requests in squadsnap2. This should be a post api call, if we have permissions, change membership status.

[weteamsteve]

How are we going to access member data from the squads area on the frontend. Check out how to include rails associated model data in react components

However, unlike in a Rails view, if we call message.user.name inside our React component without having specifically included that data in the prop sent to the component, it will throw an error.

While a Rails template is actually able to call the model on-the-fly and get data it doesn't have, we don't have that luxury with React.

We need to explicitly compose the JSON with the associated User model data because a React component can only access the JSON data we provide it.

There are many ways to include the associated model data, including manually composing the JSON in the controller, defining a custom as_json method on the model or using ActiveModelSerializers.

One of the cleanest and most flexible ways is to use jbuilder, which gives you a simple DSL for declaring JSON structures. The jbuilder gem comes included with Rails.

In the example above, we can include our user data in the message JSON by defining it in a _message.json.jbuilder file like this:

json.(message, :body, :id)
json.user do
  json.extract! message.user, :id, :name, :image
end

The jbuilder DSL is quite powerful and allows you to do all sorts of custom structuring of the data.

For example, let's say we want to send all the messages in chronological order and user data for a particular chatroom to a Chatroom component. We can define the chatroom json like this:

json.(chatroom, :name, :id)
json.messages(chatroom.messages
                .sort_by{|m| m[:created_at]}) do |message|
  json.extract! message, :id, :body
  json.user do
    json.extract! message.user, :id, :name, :image
  end
end

Also check out rails building json api responses with jbuilder