10. Refactor routes

September 2015 · 4 minute read

When refactoring, it’s a good idea to visualise or draw a diagram of how the outcome is going to look. I’m going to use what I’ve created so far and refactor the working parts that I want to use into my main page.

First I need to understand how it’s going to work. My welcome page already has a partial called ‘left_column’. Within the left column, I am now going to nest another partial view called _income.html.erb which contains a bit of basic HTML

This new partial calls incomes/new, which in turn renders _incomes_form.html.erb

In the app/views/welcome/controller I can now render the new partial by writing

<% render “welcome/incomes”%>

Running the rails server and refreshing the localhost:3000 page will prove this worked and the new partial will appear

After running into a number of errors and having a thinking for a good 10 minutes, it’s decided that the better way to build is to going to start off with only one controller, one set of views and one model. I’m going to root my app in ‘incomes’ and eliminate the need for a welcome/index

Rails.application.routes.draw do  
  root 'incomes#new'
   
  resources :incomes, except: [:show, :index]

My app/views/income/index now consists only of a header and a form render.

# Incomes
<%= render 'incomes/incomes_form' %>

Following steps that were previously described, I’m going to recreate the welcome/index page that I had made earlier in the build. This time I am going to cut out unnecessary lines as I go.

<div class="row">
  <div class="col-md-12">
    <h1>
      <center>
        My Budget
      </center>
    </h1>
    
    This is an app designed to assist individuals in projecting their own budgets, savings and expenses from week to week. It will be built with Ruby on Rails, customized boostrap and postgreSQL assisted by tutorials demonstyrating an understanding of development processes

    <div class="row">
      <div class="col-md-8">
          <%= render 'incomes/new_incomes_form' %>
      </div>
      
      <div class="col-md-4">
      </div>
    </div>
          

Upon testing out the form, it is clear that it still works just fine. However it doesn’t look how I want it to.

By updating the html it is starting to look better, now I’m going to need to create some more new partials and form buttons to ensure the forms are correctly wired.

First I’ll rename the current partial to app/views/incomes/_new_incomes_form.htl.erb, make the same change in the app/views/incomes/index.html.erb and check it by refreshing my web browser

Next, I’ll create a new partial app/views/incomes/_incomes_index.html.erb which will have the same form.  The create action in the app/controllers/income_controller.rb now simply needs to redirect to an edit_income_path, instead of ‘index’

def create
  @income = Income.new(income_params)
    respond_to do |format|
      if @income.save
      format.html { redirect_to edit_income_path(@income)}
    end
  end
end

Now that I have a working new path running from new, directly to edit I can add html to the editable form.html

Now when I submit an edit, the server throws an error – cannot redirect to nil

That’s where the ‘update’ in my app/controllers/income_controller.rb needs to redirect back to the edit page again

def update
  respond_to do |format|
    if @income.update(income_params)
      format.html { redirect_to edit_income_path(@income)}
    end
  end
end

In the same way as above, I’m going to move the root page again as there is no longer a need for the app/views/incomes/index – this app will be rooted to income#new

Rails.application.routes.draw do
  root 'incomes#new'

  resources :incomes, except: [:show, :index]

Now to tidy up the layout HTML used in multiple places across pages can all be brought into the app/views/layouts/application.html.erb instead of taking up space

<div class="row">
  <div class="col-md-12">
    <h1>
      <center>
        My Budget
      </center>
    </h1>
    
    <p>
      <center>
        This is an app designed to assist individuals in projecting their own budgets, savings and expenses from week to week. It will be built with Ruby on Rails, customized boostrap and postgreSQL assisted by tutorials demonstyrating an understanding of development processes
      </center>
    </p> 
  </div> 
</div> 

<%= yield %>

I can also rearrange the layout of the form in the app/views/incomes/_incomes_index_form.html and app/views/incomes/_new_incomes_form.html.

[ruby] <%= form_for [@income] do |f| %>

<%= f.label :wages %> <%= f.number_field :wages %>

<tr>
  <td>
    <div>
      <%= f.label :other_income %>
      <%= f.number_field :other_income %>
    </div>
  </td>
</tr> 

<tr>
  <td>
    <div>
      <%= f.label :income_total %> 
      <%= f.number_field :income_total %>
    </div>
  </td>
</tr> 

<%= f.submit %>

<% end %> ```

It’s also a good time to edit the parameters of the incomes_table as none of the fields are compulsory

Following which, I will need to exit the rails server and run

$ rake db:drop && rake db:create && rake db:migrate

After running the server again, this can be tested by not completing the form fields and clicking the update button.

The index route is no longer needed so I can exclude that in the routes.rb - Test it our by running rake routes

I also no longer need it in the income_controller.r

..and in the views/incomes folder too

And lastly I can get rid of all the welcome page related stuff that will no longer be used or needed

Reference and follow my working example at