DEV Community

John Josef
John Josef

Posted on

Creating an application using Ruby & React

My partner and I created an application that allows you to view a list of dad jokes that come from the database created using Ruby. I started by forking, then cloning the repository given to me by Flatiron's phase 3 project module which included a majority of the gems required for the project. I had to create 3 models, 2 having a 1-to-many relationship and the other one belonging to those 2 models. I started off creating models for all 3 of them (user, comment, joke) and using Active Record on all of them which had relationships through their hasmany relationships.
joke.rb

class Joke < ActiveRecord::Base
   has_many :comments,
   has_many :users, through: :comments
Enter fullscreen mode Exit fullscreen mode

comment.rb

class Comment < ActiveRecord::Base
   belongs_to :joke 
   belongs_to :user
Enter fullscreen mode Exit fullscreen mode

user.rb

has_many :comments 
has_many :jokes, through: :comments
Enter fullscreen mode Exit fullscreen mode

After that I decided to create seeds for each model to show some data in the seeds.rb file. I decided to implement faker into the model to make some random information to use.
seeds.rb

require 'faker' 
I18n.reload! 
#reset seeds file 
User.destroy_all
Comment.destroy_all
Joke.destroy_all 

#create 20 random usernames
20.times do 
   User.create(username: Faker::Name.name, password: 'password')
end

#create 80 random comments
80.times do 
   Comment.create( 
      comment: Faker::Lorem.paragraph(sentence_count: 3)
      rating: Faker::Number.between(from: 0, to: 5),
      joke_id: Faker::Number.between(from: 0, to: 108)

#99 lines of dad jokes 🥴
(insert 99 lines of dad jokes here)
Enter fullscreen mode Exit fullscreen mode

After that I had to create migrations for each model that I created in the terminal so that I could create tables for each model.
$bundle exec rake db:migrate db:seed
After that I noticed application controller had sinatra base inherited into it so I inherited that into my jokes controller where I had all of my crud operations.


Enter fullscreen mode Exit fullscreen mode

We struggled a lot on the react portion of the project where we had to create Comment.js, ErrorPage.js, JokesList.js, JokesForm.js, Login.js, NavBar.js, Search.js, SingleJoke.js all having their own functions inside of the code to essentially be exported into App.js and having App.js exported into index.js. We start by rendering the Jokes onto JokesList which allows us to render the database of jokes onto the main page. We also have buttons implemented that allows us delete the jokes from the page and if you click on a joke, you can edit the joke.

const editJoke = (id, newJoke) => { 
   fetch(`${API}/jokes/${id}`, { 
      method: "PATCH",
      headers: { 
         "Content-Type": "application/json",
      }, 
      body: JSON.stringify({
         joke: newJoke
      }),
   })
};
Enter fullscreen mode Exit fullscreen mode

Delete the joke.

const handleTrash = (someName) => {
   fetch(`${API}/jokes/${someName.id}`, {
      method: "DELETE"
   }) 
   const newJoke = jokes.filter 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)