1,2,3,4 user stories done

.gitignore

@@ -3,3 +3,4 @@ coverage
 
 # Local cache of Rubocop remote config
 .rubocop-*
+capybara-*.html

Gemfile

@@ -12,6 +12,7 @@ group :test do
   gem 'rspec'
   gem 'simplecov', require: false
   gem 'simplecov-console', require: false
+  gem 'launchy'
 end
 
 group :development, :test do

Gemfile.lock

@@ -15,9 +15,13 @@ 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)
     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)
@@ -83,10 +87,12 @@ GEM
       nokogiri (~> 1.8)
 
 PLATFORMS
+  arm64-darwin-21
   x86_64-darwin-20
 
 DEPENDENCIES
   capybara
+  launchy
   pg
   rspec
   rubocop (= 1.20)

README.md

@@ -32,6 +32,10 @@ command `CREATE DATABASE chitter_test;`;
 
 You should see 1 passing test.
 
+## Testing
+To test this code run
+* rspec
+
 ## User stories
 
 ```

app.rb

@@ -1,8 +1,24 @@
 require 'sinatra/base'
+require './lib/post'
 
 class Chitter < Sinatra::Base
-  get '/test' do
-    'Test page'
+  get '/' do
+    'Chitter App'
+    erb :index
+  end
+
+  get '/posts' do
+    @posts = Post.all
+    erb :see_posts
+  end
+
+  get '/posts/new' do
+    erb :new_post
+  end
+
+  post '/posts' do
+    Post.create(date: params[:date], author: params[:author], message: params[:message])
+    redirect '/posts'
   end
 
   run! if app_file == $0

db/migrations/02_add_author_to_the_post.sql

@@ -0,0 +1 @@
+ALTER TABLE peeps ADD COLUMN author VARCHAR(60);

db/migrations/03_add_date_to_the_post.sql

@@ -0,0 +1 @@
+ALTER TABLE peeps ADD COLUMN date VARCHAR(60);

lib/post.rb

@@ -0,0 +1,35 @@
+require 'pg'
+
+class Post
+  attr_reader :id, :date, :author, :message
+
+  def initialize(id:, date:, author:, message:)
+    @id = id
+    @date = date
+    @author = author
+    @message = message
+  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 date DESC")
+    result.map do |peep|
+      Post.new(id: peep['id'], date: peep['date'], author: peep['author'], message: peep['message'])
+    end
+  end
+
+  def self.create(date:, author:, message:)
+    if ENV['ENVIRONMENT'] == 'test'
+      connection = PG.connect(dbname: 'chitter_test')
+    else
+      connection = PG.connect(dbname: 'chitter')
+    end
+
+    result = connection.exec_params("INSERT INTO peeps (date, author, message) VALUES('#{date}', $1, $2) RETURNING id, date, author, message;", [author, message])
+    Post.new(id: result[0]['id'], date: result[0]['date'], author: result[0]['author'], message: result[0]['message'])
+  end
+end

spec/database_helpers.rb

@@ -0,0 +1,6 @@
+require 'pg'
+
+def persisted_data(id:)
+  connection = PG.connect(dbname: 'chitter_test')
+  result = connection.query("SELECT * FROM peeps WHERE id = #{id};")
+end

spec/features/creating_post_spec.rb

@@ -0,0 +1,13 @@
+feature 'Adding a new post' do
+  scenario 'a user can add a new post' do
+    visit('/posts/new')
+    fill_in("date", with: "2022-04-01")
+    fill_in("author", with: "Rose")
+    fill_in("message", with: "How are you?")
+    click_button('Submit')
+
+    expect(page).to have_content("2022-04-01")
+    expect(page).to have_content("Rose")
+    expect(page).to have_content("How are you?")
+  end
+end

spec/features/viewing_posts_spec.rb

@@ -0,0 +1,37 @@
+require 'pg'
+
+feature 'Welcome page' do
+  scenario 'user visits homepage ' do
+    visit('/')
+    expect(page).to have_content "Chitter App"
+    expect(page).to have_link(href: "/posts")
+    expect(page).to have_link(href: "/posts/new")
+  end
+end
+
+feature 'Viewing posts' do
+  scenario 'visiting /posts shows message' do
+
+    Post.create(date: "2022-04-01", author: "Kate", message: "How are you?")
+
+    visit('/posts')
+    expect(page).to have_content("2022-04-01")
+    expect(page).to have_content("Kate")
+    expect(page).to have_content("How are you?")
+
+  end
+end
+
+feature 'Viewing posts' do
+  scenario 'visiting /posts shows new messages first' do
+
+    Post.create(date: "2022-04-01", author: "Kate", message: "How are you?")
+    Post.create(date: "2022-06-01", author: "Kate", message: "How are you?")
+    Post.create(date: "2022-08-01", author: "Kate", message: "How are you?")
+
+    visit('/posts')
+    expect(page).to have_content("2022-08-01")
+    expect(page).to have_content("2022-06-01")
+    expect(page).to have_content("2022-04-01")
+  end
+end

spec/post_spec.rb

@@ -0,0 +1,35 @@
+require 'post'
+require 'pg'
+require 'database_helpers'
+
+RSpec.describe Post do
+  describe '.all' do
+    it 'returns a list of posts in a reverse chronological order' do
+      connection = PG.connect(dbname: 'chitter_test')
+
+      post = Post.create(date: "2022-04-01", author: 'Kate', message: 'This is my first post!')
+      Post.create(date: "2022-04-02", author: 'Rose', message: 'How are you?')
+      Post.create(date: "2022-04-03", author: 'Emma', message: 'Working from home')
+
+      messages = Post.all
+      expect(messages.length).to eq 3
+      expect(messages.first).to be_a Post
+      expect(messages.first.date).to eq "2022-04-03"
+      expect(messages.first.author).to eq 'Emma'
+      expect(messages.first.message).to eq 'Working from home'
+    end
+  end
+
+  describe '.create' do
+    it 'creates a new post' do
+      post = Post.create(date: "2022-04-01", author: 'Kate', message: 'This is my first post!')
+      persisted_data = persisted_data(id: post.id)
+
+      expect(post).to be_a Post
+      expect(post.id).to eq persisted_data.first['id']
+      expect(post.date).to eq '2022-04-01'
+      expect(post.author).to eq 'Kate'
+      expect(post.message).to eq 'This is my first post!'
+    end
+  end
+end

views/index.erb

@@ -0,0 +1,40 @@
+<head>
+<style>
+body {
+  background-color: lightblue;
+}
+h1 {
+  font-size: 50px;
+  color: black;
+  text-shadow: 2px 2px white;
+  text-align: center;
+}
+ul {
+  margin: 0 auto;
+  padding: 10px 10px;
+  list-style: none;
+  text-align: center;
+}
+li {
+  padding: 10px 10px;
+}
+a {
+  color: white;
+  text-shadow: 1px 1px black;
+  font-size: 30px;
+  text-decoration: none;
+  padding: 3px 5px;
+}
+</style>
+</head>
+<body>
+<h1>Chitter App</h1>
+<ul>
+  <li>
+    <a href="/posts">Click here to see all peeps</a>
+  </li>
+  <li>
+    <a href="/posts/new">Click here to add a new peep</a>
+  </li>
+</ul>
+</body>

views/new_post.erb

@@ -0,0 +1,31 @@
+<head>
+<style>
+body {
+  background-color: lightblue;
+  margin: 20px 20px;
+  text-align: center;
+}
+h1 {
+  font-size: 50px;
+}
+.tweet {
+  display: inline-block;
+  background-color: white;
+  margin: 20px 20px;
+  padding: 30px 60px;
+  border: 2px solid black;
+}
+</style>
+</head>
+<body>
+<h1>Chitter App</h1>
+<form action="/posts" method="post">
+<div class="tweet">
+<h2>Create your first peep.</h2>
+<input type="date" id="date" name="date" value="2022-04-01" min="2012-01-01" max="2040-01-01">
+<input type="text" id="author" name="author" placeholder="Your name"><br><br>
+<textarea id="message" name="message" rows="5" cols="50" placeholder="Your message cannot exceed 60 characters"></textarea><br><br>
+ <input type="submit" value="Submit" />
+ </div>
+</form>
+</body>

views/see_posts.erb

@@ -0,0 +1,44 @@
+<head>
+<style>
+body {
+  background-color: lightblue;
+}
+
+div {
+  padding: 20px 300px;
+  margin: 10px 60px;
+}
+
+h1 {
+  margin-top: 40px;
+  font-size: 80px;
+  text-align: center;
+  color: black;
+  text-shadow: 2px 2px white;
+}
+ h3 {
+   padding: 30px 10px;
+   font-size: 26px;
+   color: navy;
+   text-align: center;
+    border: 2px solid black;
+    background-color: white;
+ }
+ul {
+  list-style: none;
+}
+</style>
+</head>
+<body>
+<h1>Recent Peeps</h1>
+<form>
+<div>
+  <% @posts.each do |peep| %>
+  <h3> date: <%= peep.date %><br><br>
+   name: <%= peep.author %> <br><br>
+   message: <%= peep.message %> </h3>
+    <br>
+  <% end %>
+</div>
+</form>
+</body>