Chitter Challenge - Rhys

Gemfile

@@ -17,3 +17,9 @@ end
 group :development, :test do
   gem 'rubocop', '1.20'
 end
+
+gem "sinatra-contrib", "~> 2.1"
+
+gem "webrick", "~> 1.7"
+
+gem "launchy", "~> 2.5"

Gemfile.lock

@@ -15,9 +15,14 @@ GEM
       xpath (~> 3.2)
     diff-lcs (1.4.4)
     docile (1.4.0)
+    launchy (2.5.0)
+      addressable (~> 2.7)
     mini_mime (1.1.1)
+    multi_json (1.15.0)
     mustermann (1.1.1)
       ruby2_keywords (~> 0.0.1)
+    nokogiri (1.12.3-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.12.3-x86_64-darwin)
       racc (~> 1.4)
     parallel (1.20.1)
@@ -75,24 +80,35 @@ GEM
       rack (~> 2.2)
       rack-protection (= 2.1.0)
       tilt (~> 2.0)
+    sinatra-contrib (2.1.0)
+      multi_json
+      mustermann (~> 1.0)
+      rack-protection (= 2.1.0)
+      sinatra (= 2.1.0)
+      tilt (~> 2.0)
     terminal-table (3.0.1)
       unicode-display_width (>= 1.1.1, < 3)
     tilt (2.0.10)
     unicode-display_width (2.0.0)
+    webrick (1.7.0)
     xpath (3.2.0)
       nokogiri (~> 1.8)
 
 PLATFORMS
+  arm64-darwin-21
   x86_64-darwin-20
 
 DEPENDENCIES
   capybara
+  launchy (~> 2.5)
   pg
   rspec
   rubocop (= 1.20)
   simplecov
   simplecov-console
   sinatra
+  sinatra-contrib (~> 2.1)
+  webrick (~> 1.7)
 
 RUBY VERSION
    ruby 3.0.2p107

Public/CSS/index.css

@@ -0,0 +1,93 @@
+@import url('https://fonts.googleapis.com/css2?family=Anybody&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Anybody', fantasy;
+}
+
+body{
+  background-image: linear-gradient(to bottom right, rgba(45, 85, 255, 1), rgba(255, 255, 255, 0));
+  min-height: 100vh;
+  justify-items: center;
+  align-items: center;
+}
+
+.topnav {
+  position: static;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logo{
+  float: left;
+  font-size: 2em;
+  padding: 0 15px;
+}
+
+ul{
+  padding: 0; 
+}
+
+li{
+  list-style-type: none;
+}
+
+.peepContainer{
+  background-image: linear-gradient(to top left, rgba(45, 85, 255, 1), rgba(255, 255, 255, 0));
+  margin: 15px auto;
+  border: 2.5px;
+  border-style: solid;
+  border-radius: 25px;
+  width: 75%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+}
+
+.peepMessage{
+  margin: 15px auto;
+  border: 2.5px;
+  border-style: solid;
+  border-radius: 25px;
+  width: 95%;
+  padding: 25px;
+  font-size: 1.25em;
+}
+
+p{
+  margin: auto;
+  font-size: 0.75em;
+  float:right;
+}
+
+.createPeepCon{
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.createPeep{
+  color: blue;
+  cursor: pointer;
+  margin: auto;
+  border: 2.5px;
+  border-style: solid;
+  border-radius: 25px;
+  width: 40%;
+  padding: 5px 25px;
+  transition: 0.3s;
+  text-decoration: underline;
+}
+
+.createPeep:hover{
+  text-decoration: none;
+  background-color: azure;
+}

Public/CSS/new_peep.css

@@ -0,0 +1,61 @@
+@import url('https://fonts.googleapis.com/css2?family=Anybody&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Anybody', fantasy;
+}
+
+body{
+  background-image: linear-gradient(to bottom right, rgba(45, 85, 255, 1), rgba(255, 255, 255, 0));
+  min-height: 100vh;
+  justify-items: center;
+  align-items: center;
+}
+
+.container{
+  margin: auto;
+  padding: 15px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+form{
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.newContainer{
+  display: flex;
+  flex-direction: column;
+}
+
+.messageLabel{
+  float: left;
+}
+
+form input{
+  border-radius: 5px;
+  font-size: 1.25em;
+}
+
+form .submitButton{
+  align-items: center;
+  justify-content: center;
+  float: right;
+}
+
+label{
+  font-size: 1.25em;
+}
+
+.submitButton{
+  margin: 2.5px 0;
+  padding: 2.5px 15px;
+  cursor: pointer;
+}

app.rb

@@ -1,9 +1,25 @@
 require 'sinatra/base'
+require 'sinatra/reloader'
+require './lib/peeps'
 
 class Chitter < Sinatra::Base
   get '/test' do
     'Test page'
   end
 
+  get '/' do
+    @peeps = Peeps.all
+    erb :index
+  end
+
+  get '/new_peep' do
+    erb :new_peep
+  end
+
+  post '/' do
+    Peeps.create(message: params[:message])
+    redirect '/'
+  end
+
   run! if app_file == $0
 end

db/migrations/02_create_chitter_date.sql

@@ -0,0 +1 @@
+ALTER TABLE peeps ADD COLUMN peep_date DATE DEFAULT CURRENT_DATE;

lib/peeps.rb

@@ -0,0 +1,46 @@
+require 'pg'
+
+class Peeps
+  attr_reader :id, :message, :date
+
+  def initialize(id:, message:, date:)
+    @id = id
+    @message = message
+    @date = date
+  end
+
+  def self.all
+    if ENV['ENVIRONMENT'] == 'test'
+      connection = PG.connect(dbname: 'chitter_test')
+    else
+      connection = PG.connect(dbname: 'chitter')
+    end
+
+    result = connection.exec('SELECT * FROM peeps ORDER BY peep_date DESC')
+    result.map do |peep|
+      Peeps.new(id: peep['id'], message: peep['message'], date: peep['peep_date'])
+    end
+  end
+
+  def self.create(message:)
+    if ENV['ENVIRONMENT'] == 'test'
+      connection = PG.connect(dbname: 'chitter_test')
+    else
+      connection = PG.connect(dbname: 'chitter')
+    end
+
+    post = connection.exec_params("INSERT INTO peeps (message) VALUES('#{message}') 
+    RETURNING id, message, peep_date;")
+    Peeps.new(id: post[0]['id'], message: post[0]['message'], date: post[0]['peep_date'])
+  end
+
+  # def self.filter(filter:)
+  #   if ENV['ENVIRONMENT'] == 'test'
+  #     connection = PG.connect(dbname: 'chitter_test')
+  #   else
+  #     connection = PG.connect(dbname: 'chitter')
+  #   end
+
+  #   connection.exec_params("SELECT * FROM peeps WHERE peeps.message LIKE '%#{filter}%'")
+  # end
+end

spec/features/creating_peeps_spec.rb

@@ -0,0 +1,9 @@
+feature 'posting a new peep' do
+  scenario 'A user can post a peep to chitter' do
+    visit('/new_peep')
+    fill_in('message', with: 'Today was a great day')
+    click_button('Post')
+
+    expect(page).to have_content("Today was a great day")
+  end
+end

spec/features/viewing_peeps_spec.rb

@@ -0,0 +1,13 @@
+feature 'Viewing peeps' do
+  scenario 'A user can see all peeps' do
+    Peeps.create(message: "Today was a great day")
+    Peeps.create(message: "Today was a greater day")
+    Peeps.create(message: "Today was the greatest day")
+
+    visit('/')
+
+    expect(page).to have_content('Today was a great day')
+    expect(page).to have_content('Today was a greater day')
+    expect(page).to have_content('Today was the greatest day')
+  end
+end

spec/peep_spec.rb

@@ -0,0 +1,25 @@
+require 'peeps'
+
+describe Peeps do
+  describe '.all' do
+    it 'returns all peeps' do
+      connection = PG.connect(dbname: 'chitter_test')
+
+      # connection.exec("INSERT INTO peeps (message) VALUES('Hey, Welcome to my chitter page');")
+      Peeps.create(message: "Hey, Welcome to my chitter page")
+      peeps = Peeps.all
+
+      expect(peeps[0]).to be_a Peeps
+    end
+  end
+
+  describe '.create' do
+    it 'creates a new peep' do
+      peep = Peeps.create(message: 'Today was a great day')
+
+      expect(peep).to be_a Peeps
+      expect(peep.message).to eq 'Today was a great day'
+      expect(DateTime.parse(peep.date)).to be_an_instance_of(DateTime)
+    end
+  end
+end

spec/setup_test_database.rb

@@ -2,10 +2,10 @@
 
 def setup_test_database
   connection = PG.connect(dbname: 'chitter_test')
-  connection.exec("TRUNCATE peeps;")
+  connection.exec_params("TRUNCATE peeps;")
 end
 
 def add_row_to_test_database
   connection = PG.connect(dbname: 'chitter_test')
-  connection.exec("INSERT INTO peeps (message) values ('This is a peep!');")
+  connection.exec_params("INSERT INTO peeps (message) values ('This is a peep!');")
 end

views/index.erb

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/CSS/index.css">
+  </head>
+
+  <body>
+    <nav class="topnav">
+      <h1 class="logo">
+        <span>CHITTER</span>
+      </h1>
+    </nav>
+
+    <div class="peepContainer">
+    <h2>Posts: </h2>
+      <ul>
+        <% @peeps.each do |peep| %>
+          <li class="peepMessage">
+          <%= peep.message %>
+          <br>
+          <br>
+          <p class="createdOn">Created on <%= peep.date %></p>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+
+    <div class="createPeepCon">
+      <h3><a class="createPeep" href="/new_peep">New Peep</a></h3>
+    </div>
+  </body>
+</html>