Creating a Forum CMS with React.js and Ruby on Rails

$ npx create-react-app forum-cms
$ cd forum-cms

$ npm i prop-types

$ npm i react-router-dom

$ npm i axios

$ npm i react-quill

{
  "name": "react-cmsblog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "prop-types": "^15.7.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-quill": "^1.3.5",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3"
  },

import './index.css'; // line 3

import './assets/css/index.css'; // line 3

import logo from './logo.svg'; // line 2
import './App.css'; // line 3

import logo from './assets/images/logo.svg'; // line 2
import './assets/css/App.css'; // line 3

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    };
  });

  return (null);
}

export default withRouter(ScrollToTop);

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import './assets/css/index.css';
import App from './App';
import ScrollToTop from './components/misc/pageScrollReset'; // Scrolls page to top on route switch

ReactDOM.render(
  <Router>
    <ScrollToTop />
    <StrictMode>
      <App />
    </StrictMode>
  </Router>,
  document.getElementById('root'),
);

$ rails new forum-cms --database=postgresql --api -T

# Use Active Model has_secure_password
gem 'bcrypt', '~> 3.1.7'
gem 'cloudinary'
gem 'rubocop', '~>0.81.0'

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

group :development, :test do
  gem 'rspec-rails', '~> 3.5'
end

group :test do
  gem 'database_cleaner'
  gem 'factory_bot_rails', '~> 4.0'
  gem 'faker'
  gem 'shoulda-matchers', '~> 3.1'
end

$ bundle

$ rails g model user username:string password_digest:string email:string is_activated:boolean activation_key:string token:string token_date:datetime password_reset_token:string password_reset_date:datetime admin_level:integer can_post_date:datetime can_comment_date:datetime

class User < ApplicationRecord
  has_secure_password
  has_many :posts, inverse_of: 'author', dependent: :destroy
  has_many :comments, dependent: :destroy
  validates :username, length: { in: 4..32 }, presence: true,
                       uniqueness: { case_sensitive: false }
  validates :password, length: { minimum: 8 }
  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i.freeze
  validates :email, presence: true, length: { maximum: 255 },
                    format: { with: VALID_EMAIL_REGEX },
                    uniqueness: { case_sensitive: false }
  validates :admin_level, numericality: { only_integer: true,
                                          less_than_or_equal_to: 3 }
  before_save { username.downcase! }
  before_save { email.downcase! }
end

$ rails g model forum name:string admin_only:boolean admin_only_view:boolean

class Forum < ApplicationRecord
  has_many :subforums, dependent: :destroy
  has_many :posts, dependent: :destroy
  validates :name, length: { in: 3..32 }, presence: true,
                   uniqueness: { case_sensitive: false }
  before_save { name.downcase! }

  # Grabs all posts without a subforum, while also limiting the amount posts retrieved
  def subforum_posts(per_page = 10, page = 1)
    offset = (page * per_page) - per_page
    retrieved_posts = posts.where(subforum_id: nil)
                           .offset(offset).limit(per_page)

    Forum.truncate_posts(retrieved_posts)
  end

  # Truncates posts title and body attribute returning a new array
  def self.truncate_posts(posts)
    returned_posts = []
    posts.each do |post|
      new_post = post.as_json(only: %i[id user_id is_pinned created_at])
      new_post['title'] = post.title.slice(0..30)
      new_post['body'] = post.body.slice(0..32)
      new_post['author'] = post.author.username
      new_post['subforum'] = post.subforum.name if post.subforum.present?
      new_post['forum'] = post.forum.name
      returned_posts.push(new_post)
    end

    returned_posts
  end

  def self.forum_all_json
    returned_json = []
    Forum.all.each do |forum|
      new_forum = forum.as_json
      new_forum['subforums'] = forum.subforums.as_json(only: %i[id name])

      returned_json.push(new_forum)
    end

    returned_json
  end
end

$ rails g model subforum name:string forum:belongs_to

class Subforum < ApplicationRecord
  belongs_to :forum
  has_many :posts, dependent: :destroy
  validates :name, length: { in: 3..32 }, presence: true,
                   uniqueness: { case_sensitive: false }
  before_save { name.downcase! }

  # Grabs all posts by subforum, while also limiting the amount of posts retrieved
  def subforum_posts(per_page = 10, page = 1)
    offset = (page * per_page) - per_page
    retrieved_posts = posts.offset(offset).limit(per_page)

    Forum.truncate_posts(retrieved_posts)
  end
end

$ rails g model post title:string body:text forum:belongs_to subforum:belongs_to is_pinned:boolean is_locked:boolean user:belongs_to

class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :body
      t.belongs_to :forum, null: false, foreign_key: true
      t.belongs_to :subforum, null: true
      t.boolean :is_pinned, default: false
      t.boolean :is_locked, default: false
      t.belongs_to :user, null: false, foreign_key: true

      t.timestamps
    end
  end
end

class Post < ApplicationRecord
  belongs_to :forum
  belongs_to :subforum, optional: true
  belongs_to :author, class_name: 'User', foreign_key: 'user_id'
  has_many :comments, dependent: :destroy
  validates :title, length: { in: 3..48 }, presence: true
  validates :body, length: { in: 8..20_000 }, presence: true
  scope :pins, -> { where('is_pinned = true') }
  scope :not_pinned, -> { where('is_pinned = false') }

  def post_json
    new_post = attributes
    new_post['author'] = author.username
    new_post['subforum'] = subforum.name if subforum.present?
    new_post['forum'] = forum.name
    new_post['admin_only'] = forum.admin_only
    new_post['admin_only_view'] = forum.admin_only_view
    new_post
  end

  def self.author_posts_json(posts_array)
    returned_posts = []
    posts_array.each do |post|
      new_post = post.as_json(only: %i[id user_id is_pinned created_at])
      new_post['title'] = post.title.slice(0..30)
      new_post['body'] = post.body.slice(0..32)
      new_post['author'] = post.author.username
      new_post['subforum'] = post.subforum.name if post.subforum.present?
      new_post['forum'] = post.forum.name
      new_post['admin_only'] = post.forum.admin_only
      new_post['admin_only_view'] = post.forum.admin_only_view
      returned_posts.push(new_post)
    end

    returned_posts
  end

  def self.author_comments_json(comments_array)
    returned_comments = []
    comments_array.each do |comment|
      new_comment = comment.as_json
      new_comment['author'] = comment.author.username
      new_comment['admin_only'] = comment.post.forum.admin_only
      new_comment['admin_only_view'] = comment.post.forum.admin_only_view
      new_comment['server_date'] = DateTime.now
      returned_comments.push(new_comment)
    end

    returned_comments
  end

  def self.pins_json
    results = []
    all_pins = Post.pins
    all_pins.each do |p|
      new_post = p.post_json
      results.push(new_post)
    end

    results
  end
end

$ rails g model comment body:text user:references post:references comment:references

class Comment < ApplicationRecord
  belongs_to :author, class_name: 'User', foreign_key: 'user_id'
  belongs_to :post
  belongs_to :comment, optional: true
  has_many :comments, dependent: :destroy
  validates :body, length: { in: 2..400 }, presence: true

  def comment_json
    new_comment = attributes
    new_comment['author'] = author.username
    new_comment
  end

  def self.author_comments_json(comments_array)
    returned_comments = []
    comments_array.each do |comment|
      new_comment = comment.as_json
      new_comment['post_author'] = comment.post.author.username
      new_comment['post_title'] = comment.post.title
      new_comment['forum'] = comment.post.forum.name
      new_comment['subforum'] = comment.post.subforum if comment.post.subforum.present?
      new_comment['author'] = comment.author.username
      returned_comments.push(new_comment)
    end

    returned_comments
  end
end

  private

  def register_params
    # whitelist params
    params.require(:user)
          .permit(:username, :email, :password, :password_confirmation)
  end

  def password_params
    # whitelist params
    params.require(:user)
          .permit(:password, :password_confirmation)
  end

{ username: params[:user][:username],
  email: params[:user][:email],
  password: params[:user][:password],
  password_confirmation: [:user][:password_confirmation] }

  # Register a new user account
  def create
    user = User.create!(register_params)
    new_activation_key = generate_token(user.id, 62)
    user.update_attribute(:admin_level, 3) if User.all.size <= 1
    if user.update_attribute(:activation_key, new_activation_key)
      ActivationMailer.with(user: user).welcome_email.deliver_now
    end
    json_response({ message: 'Account registered but activation required' },
                  :created)
  end

  # Link used in account activation email
  def activate_account
    # Set url variable to the front-end url
    url = '//arn-forum-cms.netlify.app/login'
    user = User.find(params[:id])

    if user.activation_key == params[:activation_key]
      user.update_attribute(:is_activated, true)
    end

    # json_response(message: 'Successfully activated account')
    redirect_to url
  end

  # Generate password reset token and send to account's associated email
  def forgot_password
    user = User.find_by(email: params[:email])
    if user
      new_token = generate_token(user.id, 32, true)
      if user.update_attribute(:password_reset_token, new_token)
        user.update_attribute(:password_reset_date, DateTime.now)
        ActivationMailer.with(user: user).password_reset_email.deliver_now
      else
        json_response({ errors: user.errors.full_messages }, 401)
      end
    end
    json_response({ message: 'Password reset information sent to associated account.' })
  end

  # Link used in account password reset email
  def password_reset_account
    # Set url variable to the front-end url
    reset_token = params[:password_reset_token]
    url = "//arn-forum-cms.netlify.app/reset_password?token=#{reset_token}"

    redirect_to url
  end

  # Change a user's password if they have a password reset token
  def change_password_with_token
    token = params[:password_reset_token]
    user = User.find_by(password_reset_token: token) if token.present?
    if user
      # Check if token is still valid
      return json_response({ message: 'Token expired' }, 400) if user.password_token_expired?

      if user.update(password_params)
        user.update_attribute(:password_reset_token, nil)
        json_response({ message: 'Password changed successfully' })
      else
        json_response({ errors: user.errors.full_messages }, 400)
      end
    else
      json_response({ errors: 'Invalid Token' }, 401)
    end
  end

  def password_token_expired?
    offset = (Time.zone.now - password_reset_date).round
    offset / 1.hours >= 1 # Token expires after 1 hour
  end

class ApplicationController < ActionController::API
  include Response
  include ExceptionHandler
  include TokenGenerator
  include CompareDates

  # Determine if user is authenticated
  def authorized_user?
    json_response({ errors: 'Account not Authorized' }, 401) unless current_user
  end

  # Determine if user is authenticated administrator
  def authorized_admin?
    authorized_user?
    json_response({ errors: 'Insufficient Administrative Rights' }, 401) unless @current_user.admin_level.positive?
  end

  private

  # Sets a global @current_user variable if possible
  def current_user
    return nil unless access_token.present?

    @current_user ||= User.find_by(token: access_token)
    return nil unless @current_user
    return nil if token_expire?(@current_user.token_date)

    @current_user
  end

  # Determines if token is expired based on the amount of time between the token_date and server date
  # Default expiration date is 1 day after creation
  def token_expire?(token_date, days = 1, hours = 24, minutes = 0, seconds = 0)
    date_diff = compare_dates(token_date)

    if date_diff[:days] >= days && date_diff[:hrs] >= hours &&
       date_diff[:mins] >= minutes && date_diff[:secns] >= seconds
      true
    end

    false
  end

  # Grabs the token placed in the HTTP Request Header, "Authorization"
  def access_token
    request.headers[:Authorization]
  end
end

module Response
  def json_response(object, status = :ok)
    render json: object, status: status
  end
end

module ExceptionHandler
  extend ActiveSupport::Concern

  included do
    rescue_from ActiveRecord::RecordNotFound do |e|
      json_response({ errors: e.message }, :not_found)
    end

    rescue_from ActiveRecord::RecordInvalid do |e|
      json_response({ errors: e.message }, :unprocessable_entity)
    end
  end
end

$ RegistrationsController.ancestors

# Compares two dates and returns a hash with the difference in seconds, minutes, hours, and days
module CompareDates
  def compare_dates(date1, date2 = DateTime.now)
    diff_secns = date2.to_time - date1.to_time
    diff_mins = (diff_secns / 60).round
    diff_hrs = (diff_mins / 60).round
    diff_days = (diff_hrs / 24).round
    diff_text = "#{diff_days} day/s, #{diff_hrs % 24} hour/s, #{diff_mins % 60} minute/s, #{(diff_secns % 60).round} second/s"

    { diff_string: diff_text,
      days: diff_days, hrs: diff_hrs,
      mins: diff_mins, secns: diff_secns }
  end
end

module TokenGenerator
  def generate_token(user_id, token_size = 32, url_safe = false)
    random_ascii = [
      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '!', '@', '#', '$', '%', '^', '&',
      '*', '(', ')', '-', '_', '+', '|', '~', '=',
      'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
      'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
      'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    ]
    url_safe_ascii = [
      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '!', '@', '#', '$',
      '*', '(', ')', '-', '_', '~',
      'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
      'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
      'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    ]

    token = [user_id]

    (1..token_size - 1).each do
      token.push(random_ascii.sample) unless url_safe
      token.push(url_safe_ascii.sample) if url_safe
    end

    token.join('')
  end
end

class SessionsController < ApplicationController
  before_action :authorized_user?, except: :create

  # When a user attempts to log in
  def create
    user = User.where(username: params[:user][:username].downcase)
               .or(User.where(email: params[:user][:email].downcase))
               .first

    return json_response({ errors: 'Incorrect login credentials' }, 401) unless user

    authenticate_user(user)
  end

  # When a user logs out
  def destroy
    @current_user.update(token: nil)
    json_response(user: { logged_in: false })
  end

  # Checks if a user is still logged in
  def logged_in
    json_response(user: user_status(@current_user))
  end

  private

  # Returns a Hash with additional keys for Front-End use
  def user_status(user)
    user_with_status = user.as_json(only: %i[id username is_activated
                                             token admin_level can_post_date
                                             can_comment_date])
    user_with_status['logged_in'] = true
    user_with_status['can_post'] = DateTime.now > user.can_post_date
    user_with_status['can_comment'] = DateTime.now > user.can_comment_date

    user_with_status
  end

  # Returns user Hash after successful authentication
  def authenticate_user(user)
    if user.try(:authenticate, params[:user][:password])
      return unless activated(user)

      new_token = generate_token(user.id)
      if user.update_attribute(:token, new_token)
        user.update_attribute(:token_date, DateTime.now)
        json_response(user: user_status(user))
      else
        json_response({ errors: user.errors.full_messages }, 401)
      end
    else
      json_response({ errors: 'Incorrect login credentials' }, 401)
    end
  end

  # Checks to make sure a user has confirmed their email address
  def activated(user)
    unless user.is_activated
      json_response({ errors: ['Account not activated'] }, 401)
      return false
    end

    true
  end
end

class ForumsController < ApplicationController
  before_action :authorized_admin?, only: %i[create update destroy]
  before_action :set_forum, only: %i[update destroy]
  before_action :set_page_params, only: %i[index show_by_forum show_by_subforum]

  # Shows all Forum records and appends their posts and subforums by
  # adding new keys after converting to a hash
  def index
    all_forums = []
    Forum.all.each do |forum|
      new_forum = forum.attributes
      new_forum['posts'] = forum.subforum_posts(@per_page, @page)
      new_forum['subforums'] = return_subforums(forum, @per_page, @page)
      all_forums.push new_forum
    end

    json_response(results: { forums: all_forums, pinned_posts: Post.pins_json,
                             per_page: @per_page, page: @page })
  end

  # Shows all Forum records and their related subforums
  def index_all
    json_response(forums: Forum.forum_all_json)
  end

  # Similar process to the index method but only shows one Forum record
  # along with its Subforums and their posts
  def show_by_forum
    forum = Forum.find_by(name: params[:forum])
    selected_forum = forum.attributes
    selected_forum['posts'] = forum.subforum_posts(@per_page, @page)
    selected_forum['subforums'] = return_subforums(forum, @per_page, @page)

    json_response(results: { forum: selected_forum,
                             per_page: @per_page, page: @page })
  end

  # Shows not only the Forum record but the posts for a specific Subforum
  def show_by_subforum
    forum = Forum.find_by(name: params[:forum])
    selected_forum = forum.attributes

    subforum = Subforum.find_by(name: params[:subforum])
    selected_forum['posts'] = []
    new_subforum = { id: subforum.id,
                     subforum: subforum.name,
                     posts: subforum.subforum_posts(@per_page, @page) }
    selected_forum['subforums'] = [new_subforum]

    json_response(results: { forum: selected_forum,
                             per_page: @per_page, page: @page })
  end

  # Creates a Forum record and populates its Subforums through association
  # building. The params[:forum][:subforums] is an array of names for the
  # Subforums to be created.
  def create
    forum = Forum.create!(forum_params)
    all_subforums = params[:forum][:subforums]
    new_subforums = []
    all_subforums.each do |sub|
      new_hash = { name: sub }
      new_subforums.push(new_hash)
    end
    forum.subforums.create!(new_subforums)
    json_response(forums: Forum.forum_all_json)
  end

  def update
    if @forum.update(forum_params)
      json_response(forums: Forum.forum_all_json)
    else
      json_response({ errors: @forum.errors.full_messages }, 401)
    end
  end

  def destroy
    @forum.destroy
    json_response(forums: Forum.forum_all_json)
  end

  private

  def set_forum
    @forum = Forum.find(params[:id])
  end

  def set_page_params
    @per_page = params[:per_page].present? ? params[:per_page].to_i : 5
    @page = params[:page].present? ? params[:page].to_i : 1
  end

  def return_subforums(forum, per_page, page)
    all_subforums = []
    forum.subforums.each do |subforum|
      new_subforum = { id: subforum.id,
                       subforum: subforum.name,
                       posts: subforum.subforum_posts(per_page, page) }
      all_subforums.push(new_subforum)
    end

    all_subforums
  end

  def forum_params
    params.require(:forum)
          .permit(:name, :admin_only, :admin_only_view)
  end
end

class SubforumsController < ApplicationController
  before_action :authorized_admin?, only: %i[create update destroy]
  before_action :set_forum, only: %i[create]
  before_action :set_subforum, only: %i[update destroy]

  def create
    @forum.subforums.create!(subforum_params)
    json_response(forums: Forum.forum_all_json)
  end

  def update
    if @subforum.update(subforum_params)
      json_response(forums: Forum.forum_all_json)
    else
      json_response({ errors: @forum.errors.full_messages }, 401)
    end
  end

  def destroy
    @subforum.destroy
    json_response(forums: Forum.forum_all_json)
  end

  private

  def set_forum
    @forum = Forum.find(params[:subforum][:forum_id])
  end

  def set_subforum
    @subforum = Subforum.find(params[:id])
  end

  def subforum_params
    params.require(:subforum).permit(:name)
  end
end

  def lock_post
    if @post.update(is_locked: [email protected]_locked)
      json_response(post: @post.post_json)
    else
      json_response({ errors: @post.errors.full_messages }, 401)
    end
  end

  def pin_post
    if @post.update(is_pinned: [email protected]_pinned)
      json_response(post: @post.post_json)
    else
      json_response({ errors: @post.errors.full_messages }, 401)
    end
  end

  def suspended(date)
    if date > DateTime.now
      json_response(errors: ['Your posting communications are still suspended'])
      return true
    end

    false
  end

  def comment_params
    params.require(:comment).permit(:body, :comment_id, :user_id)
  end

  def suspend_comms(user, comms, attr)
    comms_i = comms.map(&:to_i)
    d = DateTime.now
    ban_date = DateTime.new(comms_i[0], comms_i[1], comms_i[2], comms_i[3], comms_i[4], 0, d.offset);
    user.update_attribute(attr, ban_date)
  end

production:
  cloud_name: your_cloud_name
  api_key: <%= ENV['CLOUDINARY_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_SECRET'] %>
  enhance_image_tag: true
  static_file_support: true

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

cloudinary:      
  service: Cloudinary

  # Store uploaded files on the local file system (see config/storage.yml for options).
  config.active_storage.service = :local

  # Store uploaded files on the local file system (see config/storage.yml for options).
  config.active_storage.service = :cloudinary

class User < ApplicationRecord
  has_secure_password
  has_many :posts, inverse_of: 'author', dependent: :destroy
  has_many :comments, dependent: :destroy
  validates :username, length: { in: 4..32 }, presence: true,
                       uniqueness: { case_sensitive: false }
  validates :password, length: { minimum: 8 }
  VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i.freeze
  validates :email, presence: true, length: { maximum: 255 },
                    format: { with: VALID_EMAIL_REGEX },
                    uniqueness: { case_sensitive: false }
  validates :admin_level, numericality: { only_integer: true,
                                          less_than_or_equal_to: 3 }
  has_one_attached :profile_image
  before_save { username.downcase! }
  before_save { email.downcase! }
end

  def show
    json_response(user: user_with_image(@user))
  end

  private

  # Returns a hash object of a user with their profile_image included
  def user_with_image(user)
    user_with_attachment = user.attributes
    user_with_attachment['profile_image'] = nil

    unless user.profile_image_attachment.nil?
      user_with_attachment['profile_image'] = url_for(user.profile_image)
    end

    user_with_attachment
  end

  def show
    selected_user = User.find(params[:id])
    json_response(user: user_with_image(selected_user))
  end

  private

  def user_with_image(user)
    user_with_attachment = { id: user.id, username: user.username,
                             email: user.email, profile_image: nil,
                             can_post_date: user.can_post_date,
                             can_comment_date: user.can_comment_date,
                             created_at: user.created_at}
    unless user.profile_image_attachment.nil?
      user_with_attachment['profile_image'] = url_for(user.profile_image)
    end

    user_with_attachment
  end

$ rails active_storage:install

  def create
    user = User.create!(register_params)
    new_activation_key = generate_token(user.id, 52)
    user.update_attribute(:admin_level, 3) if User.all.size <= 1
    if user.update_attribute(:activation_key, new_activation_key)
      ActivationMailer.with(user: user).welcome_email.deliver_later
    end
    json_response({ user: user }, :created)
  end

  def activate_account
    user = User.find(params[:id])

    if user.activation_key == params[:activation_key]
      user.update_attribute(:is_activated, true)
    end

    json_response(message: 'Successfully activated account')
  end

  get '/activate_account',
      to: 'registrations#activate_account',
      as: 'activate_account'

$ rails generate mailer ActivationMailer

class ActivationMailer < ApplicationMailer
  default from: '[email protected]'

  def welcome_email
    @user = params[:user]
    mail(to: @user.email, subject: 'Welcome to the React.js Forum-CMS Demo')
  end
end

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body>
    <h1><%= @user.username %>,</h1>
    <h1>Welcome to the React.js Forum-CMS Demo</h1>
    <p>
      You have successfully signed up but you need to activate your account.<br>
    </p>
    <p>
      To activate your account and login to the site, just follow this link: 
      <%= link_to "Confirmation link", activate_account_url(:id => @user.id, :activation_key => @user.activation_key) %>
    </p>
    <p>Thanks for joining and have a great day!</p>
  </body>
</html>

Welcome to the React.js Forum-CMS Demo, <%= @user.username %>
===============================================
 
You have successfully signed up but you need to activate your account.
 
To activate your account and login to the site, just follow this link: 
<%= link_to "Confirmation link", activate_account_url(:id => @user.id, :activation_key => @user.activation_key) %>
 
Thanks for joining and have a great day!

$ heroku create

$ git push heroku master

$ heroku run rails db:migrate

$ heroku addons:create sendgrid:starter

ActionMailer::Base.smtp_settings = {
  address: 'smtp.sendgrid.net',
  port: 587,
  domain: 'YourAppName.herokuapp.com',
  user_name: ENV['SENDGRID_USERNAME'],
  password: ENV['SENDGRID_PASSWORD'],
  authentication: :login,
  enable_starttls_auto: true
}

config.action_mailer.delivery_method = :smtp
config.action_mailer.default_url_options = { host: "//YourHerokuApp.herokuapp.com" }

$ heroku config:set SENDGRID_API_KEY=YOURAPIKEY

ActionMailer::Base.smtp_settings = {
  address: 'smtp.sendgrid.net',
  port: 587,
  domain: 'YourHerokuApp.herokuapp.com',
  user_name: 'apikey',
  password: ENV['SENDGRID_API_KEY'],
  authentication: :plain
}

$ heroku config:set CLOUDINARY_KEY=YOURCLOUDINARYKEY

$ heroku config:set CLOUDINARY_SECRET=YOURCLOUDINARYSECRET

import React, { useEffect, useState } from 'react';
import propTypes from 'prop-types';
import PinnedPostDisplay from '../presentational/blogPage/pinnedPostDisplay';
import PostDisplay from '../presentational/blogPage/postDisplay';

const BlogPage = ({ allPosts }) => {
  const [pinnedPosts, setPinnedPosts] = useState([]);

  const populatePins = () => pinnedPosts.map(post => (
    <PinnedPostDisplay key={post.id} post={post} />
  ));

  const populatePosts = () => allPosts.map(post => (
    <PostDisplay key={post.id} post={post} />
  ));

  // Grab all pinned Post on Component Load
  useEffect(() => {
    const postPins = allPosts.filter(post => post.is_pinned);
    setPinnedPosts(postPins);
  });

  return (
    <div className="bg-main pt-1">
      <div className="container">
        <div>
          <h2>Pinned Posts</h2>
          <div>{populatePins()}</div>
        </div>
        <div>
          <h2>All Posts</h2>
          <div>{populatePosts()}</div>
        </div>
      </div>
    </div>
  );
};

BlogPage.propTypes = {
  allPosts: propTypes.instanceOf(Array).isRequired,
};

export default BlogPage;

import React, { useState } from 'react';
import propTypes from 'prop-types';
import { userRegister } from '../../misc/apiRequests';
import ConfirmPage from '../confirmPage';

const Register = ({ handleModal, handleLoader }) => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirm, setPasswordConfirm] = useState('');
  const [message, setMessage] = useState('');
  const [userCreds, setUserCreds] = useState({});
  const [emailConfirm, setEmailConfirm] = useState(false);

  const handleSubmit = e => {
    e.preventDefault();
    if (password !== passwordConfirm) {
      return handleModal(["Password doesn't Match Confirmation!"]);
    }

    const user = {
      username: username.trim(),
      email: email.trim(),
      password,
      password_confirmation: passwordConfirm,
    };

    setUserCreds({ username: username.trim(), email: email.trim() });

    handleLoader(true);
    userRegister(user)
      .then(response => {
        if (response.success) { setMessage(response.message); setEmailConfirm(true); }
        if (!response.success) handleModal(response.errors);
        handleLoader(false);
      });

    return null;
  };

  return emailConfirm
    ? <ConfirmPage user={userCreds} />
    : (
      <div id="LoginPage" className="bg-main pt-1">
        <div className="container-md">
          <h2 className="text-center mb-1">Register New User</h2>
          <form className="login-form" onSubmit={handleSubmit}>
            <h4>Username</h4>
            <input
              type="text"
              value={username}
              onChange={e => setUsername(e.target.value)}
              minLength="3"
              required
            />
            <h4>Email</h4>
            <input
              type="text"
              value={email}
              onChange={e => setEmail(e.target.value)}
              minLength="3"
              required
            />
            <h4>Password</h4>
            <input
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              required
            />
            <h4>Password Confirmation</h4>
            <input
              type="password"
              value={passwordConfirm}
              onChange={e => setPasswordConfirm(e.target.value)}
              required
            />
            <button type="submit">Register</button>
          </form>

          <h4 className="text-center p-1">{message}</h4>
        </div>
      </div>
    );
};

Register.propTypes = {
  handleModal: propTypes.func.isRequired,
  handleLoader: propTypes.func.isRequired,
};

export default Register;

import React, { useState, useEffect, useCallback } from 'react';
import {
  Switch,
  Route,
} from 'react-router-dom';
import './assets/css/App.css';

import Register from './components/functional/users/register';
import Modal from './components/functional/modal';
import Loader from './components/presentational/loader';

const App = () => {
  const [errors, setErrors] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);

  // Toggle modal and clear status
  const handleModal = useCallback((errors = []) => {
    setErrors(errors);
  }, [setErrors]);

  const handleLoader = useCallback((loading = true) => {
    setIsLoading(loading);
  }, [setIsLoading]);

  // open Modal to show errors
  useEffect(() => {
    setShowModal(errors.length > 0);
  }, [errors]);

  return (
    <div className="App">
      {/* ...Some code not shown */}
      <main className="bg-navbar pt-1">
        {/* ...Some code not shown */}
        <Switch>
          <Route
            exact
            path="/sign_up"
            render={() => <Register handleModal={handleModal} handleLoader={handleLoader} />}
          />
        </Switch>
      </main>
      <div className="blend-main-footer" />
      <footer className="footer">
        {/* ...Some code not shown */}
      </footer>
      {showModal && <Modal errors={errors} handleModal={handleModal} />}
      {isLoading && <Loader />}
    </div>
  );
};

export default App;

  const handleSubmit = e => {
    e.preventDefault();
    if (password !== passwordConfirm) {
      return handleModal(["Password doesn't Match Confirmation!"]);
    }

    const user = {
      username: username.trim(),
      email: email.trim(),
      password,
      password_confirmation: passwordConfirm,
    };

    setUserCreds({ username: username.trim(), email: email.trim() });

    handleLoader(true);
    userRegister(user)
      .then(response => {
        if (response.success) { setMessage(response.message); setEmailConfirm(true); }
        if (!response.success) handleModal(response.errors);
        handleLoader(false);
      });

    return null;
  };

import React, { useEffect, useState } from 'react';
import { Redirect, useLocation } from 'react-router-dom';
import propTypes from 'prop-types';
import { changePasswordWithToken } from '../../misc/apiRequests';

const ResetPassword = ({ handleModal, handleLoader }) => {
  const [redirect, setRedirect] = useState(false);
  const [passwordReset, setPasswordReset] = useState(false);
  const [message, setMessage] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirm, setPasswordConfirm] = useState('');

  const loginRedirect = (<Redirect to="/login" />);

  function useQuery() {
    return new URLSearchParams(useLocation().search);
  }
  const query = useQuery();

  const handleSubmit = e => {
    e.preventDefault();
    if (password !== passwordConfirm) {
      return handleModal(["Password doesn't Match Confirmation!"]);
    }
    const token = query.get('token');
    const user = { password, passwordConfirm };

    handleLoader(true);
    changePasswordWithToken(token, user)
      .then(response => {
        if (response.success) { setMessage(response.message); setPasswordReset(true); }
        if (!response.success) handleModal(response.errors);
        handleLoader(false);
      });
  };

  useEffect(() => {
    let timer;
    if (passwordReset) {
      timer = setTimeout(() => {
        setRedirect(true);
      }, 5000);
    }
    return () => clearTimeout(timer);
  }, [passwordReset]);

  const renderMain = passwordReset
    ? (
      <div className="bg-main pt-1">
        <div className="text-center container-md">
          <h2>{message}</h2>
          <h4>You will be redirected to the login page in a few seconds...</h4>
        </div>
      </div>
    )
    : (
      <div id="LoginPage" className="bg-main pt-1">
        <div className="container-md">
          <h2 className="text-center mb-1">Set a new Password</h2>
          <form className="login-form" onSubmit={handleSubmit}>
            <h4>New Password</h4>
            <input
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              required
            />
            <h4>Password Confirmation</h4>
            <input
              type="password"
              value={passwordConfirm}
              onChange={e => setPasswordConfirm(e.target.value)}
              required
            />
            <button type="submit">Change Password</button>
          </form>
        </div>
      </div>
    );

  return redirect ? loginRedirect : renderMain;
};

ResetPassword.propTypes = {
  handleModal: propTypes.func.isRequired,
  handleLoader: propTypes.func.isRequired,
};

export default ResetPassword;

  useEffect(() => {
    let timer;
    if (passwordReset) {
      timer = setTimeout(() => {
        setRedirect(true);
      }, 5000);
    }
    return () => clearTimeout(timer);
  }, [passwordReset]);

  const loginRedirect = (<Redirect to="/login" />);

  return redirect ? loginRedirect : renderMain;

import React, { useEffect, useState } from 'react';
import propTypes from 'prop-types';
import RenameForumModal from './modals/renameForumModal';
import NewSubforumModal from './modals/newSubforumModal';
import NewforumModal from './modals/newForum';
import RenameSubforumModal from './modals/renameSubforum';
import SuspendUser from './modals/suspendUser';
import PromoteUser from './modals/promoteUser';
import { fetchAllForums, forumRemove } from '../../../misc/apiRequests';

const AdminPanel = ({
  user, selectedUser, handleSelectedUser, handleLoader, handleMainModal,
}) => {
  const [allForums, setForums] = useState([]);
  const [selectedForum, setSelectedForum] = useState({});
  const [selectedSubforum, setSelectedSubforum] = useState({});
  const [showModal, setShowModal] = useState(false);
  const [modalType, setModalType] = useState('renameForum');

  const handleModal = (forum, formType = 'renameForum', subforum = {}) => {
    setSelectedSubforum(subforum);
    setSelectedForum(forum);
    setModalType(formType);
    setShowModal(true);
  };
.......................

        {showModal && (
        <div className="modal">
          <button type="button" className="modal-bg" onClick={handleFormReset}>x</button>
          <div className="modal-content">
            <div className="container-md">
              {modalType === 'renameForum' && (
                <RenameForumModal
                  forum={selectedForum}
                  handleForums={handleForums}
                  handleFormReset={handleFormReset}
                  handleLoader={handleLoader}
                  handleModal={handleMainModal}
                />
              )}
              {modalType === 'renameSubforum' && (
                <RenameSubforumModal
                  forum={selectedForum}
                  subforum={selectedSubforum}
                  handleForums={handleForums}
                  handleFormReset={handleFormReset}
                  handleLoader={handleLoader}
                  handleModal={handleMainModal}
                />
              )}
              {modalType === 'newSubforum' && (
                <NewSubforumModal
                  forum={selectedForum}
                  handleForums={handleForums}
                  handleFormReset={handleFormReset}
                  handleLoader={handleLoader}
                  handleModal={handleMainModal}
                />
              )}
              {modalType === 'newForum' && (
                <NewforumModal
                  handleFormReset={handleFormReset}
                  handleForums={handleForums}
                  handleLoader={handleLoader}
                  handleModal={handleMainModal}
                />
              )}
            </div>
          </div>
        </div>
        )}

import React, { useState } from 'react';
import propTypes from 'prop-types';
import { userSuspendComms } from '../../../../misc/apiRequests';
import { convertRailsDate, convertToRubyDate } from '../../../../misc/convertDate';

const SuspendUser = ({
  user, selectedUser, handleSelectedUser, handleFormReset, handleLoader, handleMainModal,
}) => {
  // eslint-disable-next-line camelcase
  const { can_post_date, can_comment_date } = selectedUser;
  const [suspendPostsExpiryDate, setSuspendPostExpiry] = useState(convertRailsDate(can_post_date));
  const [
    suspendCommentsExpiryDate,
    setSuspendCommentsExpiry,
  ] = useState(convertRailsDate(can_comment_date));
// ... Some code not shown

      <h4>Suspend Posting abilities until</h4>
      <input
        type="datetime-local"
        value={suspendPostsExpiryDate}
        onChange={e => setSuspendPostExpiry(e.target.value)}
        required
      />
      <h4>Suspend Commenting abilities until</h4>
      <input
        type="datetime-local"
        value={suspendCommentsExpiryDate}
        onChange={e => setSuspendCommentsExpiry(e.target.value)}
        required
      />

  // Handle modification of User's suspended activities
  const handleSubmit = e => {
    e.preventDefault();
    const suspendUser = {
      id: selectedUser.id,
      can_post_date: convertToRubyDate(suspendPostsExpiryDate),
      can_comment_date: convertToRubyDate(suspendCommentsExpiryDate),
      admin_id: user.id,
    };
// ...Some code not shown

// ...Some code above not shown

const convertRailsDate = date => date.substring(0, date.length - 1);

const convertToRubyDate = date => {
  const dateArray = date.split('-');
  let timeArray = dateArray[2].substring(dateArray[2].indexOf('T'));
  timeArray = timeArray.split(':');
  timeArray[0] = timeArray[0].substring(1);
  dateArray[2] = dateArray[2].substring(0, dateArray[2].indexOf('T'));

  return dateArray.concat(timeArray.slice(0, 2));
};

export { convertDate, convertRailsDate, convertToRubyDate };

const BlogPage = ({
  user, handlePostSelect, handleLoader, handleModal,
}) => {
  const [pinnedPosts, setPinnedPosts] = useState([]);
  const [forumTopics, setForumTopics] = useState([]);
  // ...Some code not shown

  // Grab all pinned Posts, and sort all other posts by forum on Component Load
  useEffect(() => {
    handleLoader(true);
    const forum = { per_page: 5, page: 1 };
    fetchAllForumPosts(forum.per_page, forum.page)
      .then(response => {
        if (response.success) {
          setPinnedPosts(response.pinned_posts.filter(post => !post.admin_only_view));
          setForumTopics(response.forums);
        }
        if (!response.success) handleModal(response.errors);
        handleLoader(false);
      });
  }, [handleLoader, handleModal]);
// ...Some code not shown

import React, { useEffect, useState } from 'react';
import propTypes from 'prop-types';
import PinnedPostDisplay from '../presentational/blogPage/pinnedPostDisplay';
import ForumDisplay from '../presentational/blogPage/forumDisplay';
import '../../assets/css/blogPage.css';
import { fetchAllForumPosts } from '../misc/apiRequests';

const BlogPage = ({
  user, handlePostSelect, handleLoader, handleModal,
}) => {
  const [pinnedPosts, setPinnedPosts] = useState([]);
  const [forumTopics, setForumTopics] = useState([]);

  // Populate Pinned Posts
  const populatePins = () => pinnedPosts.map(post => (
    <button type="button" key={post.id} className="bare-btn" onClick={() => handlePostSelect(post)}>
      <PinnedPostDisplay post={post} />
    </button>
  ));

  // Populate all subforums and related posts paginated by 5 posts per page
  const populateAllForums = () => forumTopics.map(forumData => (
    <ForumDisplay
      key={forumData.name}
      user={user}
      forum={forumData}
      handlePostSelect={handlePostSelect}
      postsPages={5}
    />
  ));

  const App = () => {
  const [selectedPost, setSelectedPost] = useState(null);
  const [redirect, setRedirect] = useState(null);

  // Handles selection of post when post is clicked
  const handlePostSelect = post => {
    setSelectedPost(post);
  };

  // Follow up redirect after a post is selected
  useEffect(() => {
    if (selectedPost) {
      const { forum, subforum, id } = selectedPost;
      setRedirect(<Redirect to={`/${forum}${subforum ? `/${subforum}` : ''}/posts/${id}/show`} />);
    }
  }, [selectedPost]);

  useEffect(() => { setRedirect(null); setSelectedPost(null); }, [redirect]);

  return redirect || (
    <div className="App">
      <header className="bg-navbar">
        <nav className="container">
          <div className="flex-row">
// ...Some code not shown

import React, { useEffect, useState } from 'react';
import propTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Paginate from '../../functional/blogPage/paginatePosts';
import populatePosts from './populatePosts';
import SubForumDisplay from './subForumDisplay';

const ForumDisplay = ({
  user, forum, postsPages, handlePostSelect, isSubforum,
}) => {
  // ...Some code not shown

  const populateSubForums = () => subForums.map(subforumData => (
    <SubForumDisplay
      key={subforumData.subforum}
      forum={{ id: forum.id, name: forum.name, isSubforum }}
      subforum={subforumData}
      handleIcon={handleIcon}
      handlePostSelect={handlePostSelect}
      checkForumContraints={checkForumContraints}
    />
  ));

import React from 'react';
import PostDisplay from './postDisplay';

const PopulatePosts = (postsArray, handlePostSelect, isPinned = false) => postsArray.map(post => (
  <button type="button" key={post.id} className="bare-btn row" onClick={() => handlePostSelect(post)}>
    <PostDisplay post={post} isPinned={isPinned} />
  </button>
));

export default PopulatePosts;

import React, { useEffect, useState } from 'react';
import propTypes from 'prop-types';

const Paginate = ({
  posts, populatePosts, postsPages, handlePostSelect,
}) => {
  const [pinnedPosts, setPinnedPosts] = useState([]);
  const [selectedPosts, setPosts] = useState([]);
  const [postsPerPage] = useState(postsPages);
  const [page, setPage] = useState(1);
  const [maxPages, setMaxPages] = useState(1);

  const handlePrev = () => {
    if (page > 1) {
      setPage(page - 1);
    }
  };

  const handleNext = () => {
    if (page < maxPages) {
      setPage(page + 1);
    }
  };

  // Calculates the max amount of pages using the length of the posts and postsPages props
  useEffect(() => {
    const pageMax = Math.ceil(posts.length / postsPerPage);
    setMaxPages(pageMax || 1);
  }, [posts, postsPerPage]);

  // Filters and stores the posts prop array into pinned and unpinned posts.
  // Unpinned posts are then paginated and stored into the selectedPosts state
  useEffect(() => {
    const postsPinned = posts.filter(post => post.is_pinned);
    const unPinnedPosts = posts.filter(post => !post.is_pinned);
    const startingIndex = (page * postsPerPage) - postsPerPage;
    const endingIndex = (page * postsPerPage) - 1;
    const paginatedPosts = unPinnedPosts.filter((post, index) => {
      if (index >= startingIndex && index <= endingIndex) {
        return post;
      }
      return null;
    });
    setPinnedPosts(postsPinned);
    setPosts(paginatedPosts);
  }, [page, posts, postsPerPage]);

  return (
    <div>
      {populatePosts(pinnedPosts, handlePostSelect, true)}
      {populatePosts(selectedPosts, handlePostSelect)}
      <div className="paginate">
        <button type="button" onClick={handlePrev}>Prev</button>
        <span>
          {page}
          /
          {maxPages}
        </span>
        <button type="button" onClick={handleNext}>Next</button>
      </div>
    </div>
  );
};
// Some code not shown...

import Paginate from '../../functional/blogPage/paginatePosts';
import populatePosts from './populatePosts';

const SubForumDisplay = ({
  forum, subforum, handleIcon, handlePostSelect, checkForumContraints, postsPerPage,
}) => {
  const [forumTitle, setForumTitle] = useState('');
  const [posts, setPosts] = useState([]);
  const [showForum, setShowForum] = useState(false);

  // Some code not shown...
  return (
    <div className="forum-section ml-1">
      <div className="header-title">
        <Link to={`/${forum.name}/${forumTitle}`}>
          <h4 className="text-camel">{forumTitle}</h4>
        </Link>
        <button type="button" onClick={() => handleShowForum(showForum)}>
          {handleIcon(showForum)}
        </button>
      </div>
      {showForum && (
        <div>
          {checkForumContraints() && (
            <Link
              to={`/${forum.name}/${forumTitle}/posts/new?forum_id=${forum.id}&&subforum_id=${subforum.id}`}
              className="new-post-btn"
            >
              New Topic
            </Link>
          )}
          <div className="post-section">
            <Paginate
              posts={posts}
              handlePostSelect={handlePostSelect}
              populatePosts={populatePosts}
              postsPages={postsPerPage}
            />
          </div>
        </div>
      )}
    </div>
  );
};

import React, { useState } from 'react';
import propTypes from 'prop-types';
import { Link, Redirect, useLocation } from 'react-router-dom';
import ReactQuill from 'react-quill';
import { postNew } from '../../misc/apiRequests';
import { modules, formats } from '../../misc/presets/quillModules';
import 'react-quill/dist/quill.snow.css';

const NewBlogPost = ({
  match, user, handlePostSelect, handleLoader, handleModal,
}) => {
  const [newPostTitle, setPostTitle] = useState('');
  const [newPostBody, setPostBody] = useState('');
  const { forum, subforum } = match.params;

  function useQuery() {
    return new URLSearchParams(useLocation().search);
  }
  const query = useQuery();

  const handleChangeTitle = e => {
    const elem = e.target;
    setPostTitle(elem.value);
  };

  const handleSubmitPost = e => {
    e.preventDefault();
    if (!user.can_post) return;

    const formData = new FormData();
    formData.append('post[title]', newPostTitle.trim());
    formData.append('post[body]', newPostBody);
    formData.append('post[forum_id]', query.get('forum_id'));
    formData.append('post[subforum_id]', query.get('subforum_id'));
    formData.append('post[user_id]', user.id);

    handleLoader(true);
    postNew(formData)
      .then(response => {
        if (response.success) handlePostSelect(response.post);
        if (!response.success) handleModal(response.errors);
        handleLoader(false);
      });
  };

  const renderMain = (
    <div id="BlogPage" className="bg-main">
      <div className="container-md">
        <form className="newPost" onSubmit={handleSubmitPost} encType="multipart/form-data">
          <Link to={`/${forum}${subforum ? `/${subforum}` : ''}`}>
            <i className="fas fa-chevron-circle-left pr-01" />
            Back
          </Link>
          <h4 className="text-grey">Forum</h4>
          <h3 className="text-camel">{`New ${forum}/${subforum} Topic`}</h3>
          <input
            name="postTitle"
            type="text"
            value={newPostTitle}
            onChange={handleChangeTitle}
            placeholder="Post Title"
            minLength="6"
            maxLength="32"
            required
          />
          <ReactQuill
            theme="snow"
            modules={modules}
            formats={formats}
            value={newPostBody}
            onChange={setPostBody}
          />
          <button type="submit" className="submit-btn">Submit</button>
        </form>
      </div>
    </div>
  );

  return user.logged_in ? renderMain : <Redirect to="/login" />;
};

//arn-forum-cms.netlify.app/announcements/rules/posts/new?forum_id=1&&subforum_id=1

// Create New Post
const postNew = async post => {
  let login;
  if (sessionStorage.getItem('user')) login = JSON.parse(sessionStorage.getItem('user'));
  return axios.post(`${URL}posts`, post,
    { headers: { 'Content-Type': 'multipart/form-data', Authorization: login.token } })
    .then(response => {
      const { post } = response.data;

      return { post, success: true };
    })
    .catch(error => errorCatch(error));
};

// Some code not shown...
  <Route
    exact
    path="/:forum/posts/new"
    render={props => (
      <NewPost
        match={props.match}
        user={user}
        handlePostSelect={handlePostSelect}
        handleLoader={handleLoader}
        handleModal={handleModal}
      />
    )}
  />
  <Route
    exact
    path="/:forum/:subforum/posts/new"
    render={props => (
      <NewPost
        match={props.match}
        user={user}
        handlePostSelect={handlePostSelect}
        handleLoader={handleLoader}
        handleModal={handleModal}
      />
    )}
  />
// Some code not shown...

  useEffect(() => {
    let isMounted = true;

    if (match.params.id) {
      const postID = parseInt(match.params.id, 10);
      handleLoader(true);
      fetchPost(postID)
        .then(response => {
          if (response.success) {
            if (isMounted) setSelectedPost(response.post);
          }
          if (!response.success) handleModal(response.errors);
          handleLoader(false);
        });
    }
    return () => { isMounted = false; };
  }, [match.params.id, handleLoader, handleModal]);

          <Route
            exact
            path="/:forum/posts/:id/edit"
            render={props => (
              <EditPost
                match={props.match}
                user={user}
                handlePostSelect={handlePostSelect}
                handleLoader={handleLoader}
                handleModal={handleModal}
              />
            )}
          />
          <Route
            exact
            path="/:forum/:subforum/posts/:id/edit"
            render={props => (
              <EditPost
                match={props.match}
                user={user}
                handlePostSelect={handlePostSelect}
                handleLoader={handleLoader}
                handleModal={handleModal}
              />
            )}
          />

import React, { useEffect, useRef, useState } from 'react';
import propTypes from 'prop-types';
import { Link } from 'react-router-dom';
import CommentDisplay from './commentDisplay';
import PaginateComments from './paginateComments';
import { commentNew, commentEdit, commentRemove } from '../../misc/apiRequests';

  const populateComments = commentsArray => commentsArray.map(comment => (
    <CommentDisplay
      key={comment.id}
      user={user}
      allComments={postComments}
      comment={comment}
      handleSelectComment={handleSelectComment}
      handleEditComment={handleEditComment}
      handleRemoveComment={handleRemoveComment}
    />
  ));

{
  "name": "react-cmsblog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "prop-types": "^15.7.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-quill": "^1.3.5",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "server": "react-scripts start",
    "start": "react-scripts build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
//... Some code not shown
}