Add slugs for Posts, Boards and OAuths (#321)

app/controllers/application_controller.rb

@@ -35,7 +35,7 @@ class ApplicationController < ActionController::Base
       # Load tenant data
       @tenant = Current.tenant_or_raise!
       @tenant_setting = TenantSetting.first_or_create
-      @boards = Board.select(:id, :name).order(order: :asc)
+      @boards = Board.select(:id, :name, :slug).order(order: :asc)
 
       # Setup locale
       I18n.locale = @tenant.locale

app/controllers/boards_controller.rb

@@ -10,7 +10,7 @@ class BoardsController < ApplicationController
   end
 
   def show
-    @board = Board.find(params[:id])
+    @board = Board.friendly.find(params[:id])
     @page_title = @board.name
   end
 
@@ -80,6 +80,6 @@ class BoardsController < ApplicationController
     def board_params
       params
         .require(:board)
-        .permit(:name, :description)
+        .permit(:name, :description, :slug)
     end
 end

app/controllers/o_auths_controller.rb

@@ -12,9 +12,9 @@ class OAuthsController < ApplicationController
   # Generates authorize url with required parameters and redirects to provider
   def start
     if params[:reason] == 'tenantsignup'
-      @o_auth = OAuth.include_only_defaults.find(params[:id])
+      @o_auth = OAuth.include_only_defaults.friendly.find(params[:id])
     else
-      @o_auth = OAuth.include_defaults.find(params[:id])
+      @o_auth = OAuth.include_defaults.friendly.find(params[:id])
     end
     
     return if params[:reason] != 'test' and not @o_auth.is_enabled?
@@ -42,9 +42,9 @@ class OAuthsController < ApplicationController
     Current.tenant ||= Tenant.find_by(subdomain: tenant_domain)
 
     if reason == 'tenantsignup'
-      @o_auth = OAuth.include_only_defaults.find(params[:id])
+      @o_auth = OAuth.include_only_defaults.friendly.find(params[:id])
     else
-      @o_auth = OAuth.include_defaults.find(params[:id])
+      @o_auth = OAuth.include_defaults.friendly.find(params[:id])
     end
 
     return if reason != 'test' and not @o_auth.is_enabled?

app/controllers/posts_controller.rb

@@ -9,6 +9,7 @@ class PostsController < ApplicationController
       .select(
         :id,
         :title,
+        :slug,
         :description,
         :post_status_id,
         'COUNT(DISTINCT likes.id) AS likes_count',
@@ -48,9 +49,11 @@ class PostsController < ApplicationController
 
   def show
     @post = Post
+      .friendly
       .select(
         :id,
         :title,
+        :slug,
         :description,
         :board_id,
         :user_id,

app/javascript/actions/Board/deleteBoard.ts

@@ -62,8 +62,12 @@ export const deleteBoard = (
       } else {
         dispatch(boardDeleteFailure(json.error));
       }
+
+      return Promise.resolve(res);
     } catch (e) {
       dispatch(boardDeleteFailure(e));
+
+      return Promise.resolve(null);
     }
   }
 );

app/javascript/actions/Board/updateBoard.ts

@@ -48,6 +48,7 @@ export const updateBoard = (
   id: number,
   name: string,
   description: string,
+  slug: string,
   authenticityToken: string,
 ): ThunkAction<void, State, null, Action<string>> => async (dispatch) => {
   dispatch(boardUpdateStart());
@@ -60,6 +61,7 @@ export const updateBoard = (
         board: {
           name,
           description,
+          slug,
         },
       }),
     });

app/javascript/components/Board/NewPost.tsx

@@ -107,7 +107,7 @@ class NewPost extends React.Component<Props, State> {
       });
       const json = await res.json();
       this.setState({isLoading: false});
-
+      
       if (res.status === HttpStatus.Created) {
         this.setState({
           success: I18n.t('board.new_post.submit_success'),
@@ -117,7 +117,7 @@ class NewPost extends React.Component<Props, State> {
         });
 
         setTimeout(() => (
-          window.location.href = `/posts/${json.id}`
+          window.location.href = `/posts/${json.slug || json.id}`
         ), 1000);
       } else {
         this.setState({error: json.error});

app/javascript/components/Board/PostList.tsx

@@ -55,6 +55,7 @@ const PostList = ({
             <PostListItem
               id={post.id}
               title={post.title}
+              slug={post.slug}
               description={post.description}
               postStatus={postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
               likeCount={post.likeCount}

app/javascript/components/Board/PostListItem.tsx

@@ -10,6 +10,7 @@ import IPostStatus from '../../interfaces/IPostStatus';
 interface Props {
   id: number;
   title: string;
+  slug?: string;
   description?: string;
   postStatus: IPostStatus;
   likeCount: number;
@@ -25,6 +26,7 @@ interface Props {
 const PostListItem = ({
   id,
   title,
+  slug,
   description,
   postStatus,
   likeCount,
@@ -36,7 +38,7 @@ const PostListItem = ({
   isLoggedIn,
   authenticityToken,
 }: Props) => (
-  <div onClick={() => window.location.href = `/posts/${id}`} className="postListItem">
+  <div onClick={() => window.location.href = `/posts/${slug || id}`} className="postListItem">
     <LikeButton
       postId={id}
       likeCount={likeCount}
@@ -46,7 +48,7 @@ const PostListItem = ({
       isLoggedIn={isLoggedIn}
       authenticityToken={authenticityToken}
     />
-
+    
     <div className="postContainer">
       <span className="postTitle">{title}</span>
         <ReactMarkdown className="descriptionText" allowedTypes={['text']} unwrapDisallowed>

app/javascript/components/SiteSettings/Boards/BoardEditable.tsx

@@ -14,13 +14,15 @@ interface Props {
   id: number;
   name: string;
   description?: string;
+  slug?: string;
   index: number;
   settingsAreUpdating: boolean;
 
   handleUpdate(
     id: number,
-    description: string,
     name: string,
+    description: string,
+    slug: string,
     onSuccess: Function,
   ): void;
   handleDelete(id: number): void;
@@ -46,11 +48,12 @@ class BoardsEditable extends React.Component<Props, State> {
     this.setState({editMode: !this.state.editMode});
   }
 
-  handleUpdate(id: number, name: string, description: string) {
+  handleUpdate(id: number, name: string, description: string, slug: string) {
     this.props.handleUpdate(
       id,
       name,
       description,
+      slug,
       () => this.setState({editMode: false}),
     );
   }
@@ -60,6 +63,7 @@ class BoardsEditable extends React.Component<Props, State> {
       id,
       name,
       description,
+      slug,
       index,
       settingsAreUpdating,
       handleDelete,
@@ -108,6 +112,7 @@ class BoardsEditable extends React.Component<Props, State> {
                   id={id}
                   name={name}
                   description={description}
+                  slug={slug}
                   handleUpdate={this.handleUpdate}
                 />
 

app/javascript/components/SiteSettings/Boards/BoardForm.tsx

@@ -3,6 +3,7 @@ import { useForm, SubmitHandler } from 'react-hook-form';
 import I18n from 'i18n-js';
 
 import Button from '../../common/Button';
+import { DangerText } from '../../common/CustomTexts';
 
 interface Props {
   mode: 'create' | 'update';
@@ -10,6 +11,7 @@ interface Props {
   id?: number;
   name?: string;
   description?: string;
+  slug?: string;
 
   handleCreate?(
     name: string,
@@ -20,12 +22,14 @@ interface Props {
     id: number,
     name: string,
     description?: string,
+    slug?: string,
   ): void;
 }
 
 interface IBoardForm {
   name: string;
   description: string;
+  slug?: string;
 }
 
 const BoardForm = ({
@@ -33,6 +37,7 @@ const BoardForm = ({
   id,
   name,
   description,
+  slug,
   handleCreate,
   handleUpdate,
 }: Props) => {
@@ -40,15 +45,19 @@ const BoardForm = ({
     register,
     handleSubmit,
     reset,
-    formState: { isValid },
+    formState: { isValid, errors },
+    watch,
   } = useForm<IBoardForm>({
     mode: 'onChange',
     defaultValues: {
       name: name || '',
       description: description || '',
+      slug: slug || undefined,
     },
   });
 
+  const formBoardName = watch('name');
+
   const onSubmit: SubmitHandler<IBoardForm> = data => {
     if (mode === 'create') {
       handleCreate(
@@ -57,7 +66,7 @@ const BoardForm = ({
         () => reset({ name: '', description: '' })
       );
     } else {
-      handleUpdate(id, data.name, data.description);
+      handleUpdate(id, data.name, data.description, data.slug);
     }
   }
 
@@ -91,6 +100,25 @@ const BoardForm = ({
         placeholder={I18n.t('site_settings.boards.form.description')}
         className="formControl"
       />
+
+      {mode === 'update' && (
+        <>
+        <div className="input-group">
+          <div className="input-group-prepend">
+            <div className="input-group-text">boards/</div>
+          </div>
+          <input
+            {...register('slug', { pattern: /^[a-zA-Z0-9-]+$/ })}
+            type="text"
+            placeholder={formBoardName.trim().replace(/\s/g, '-').toLowerCase()}
+            className="formControl"
+          />
+        </div>
+        <DangerText>
+          {errors.slug?.type === 'pattern' && I18n.t('common.validations.url')}
+        </DangerText>
+        </>
+      )}
     </form>
   );
 }

app/javascript/components/SiteSettings/Boards/BoardsSiteSettingsP.tsx

@@ -30,6 +30,7 @@ interface Props {
     id: number,
     name: string,
     description: string,
+    slug: string,
     onSuccess: Function,
     authenticityToken: string,
   ): void;
@@ -61,8 +62,8 @@ class BoardsSiteSettingsP extends React.Component<Props> {
     this.props.submitBoard(name, description, onSuccess, this.props.authenticityToken);
   }
 
-  handleUpdate(id: number, name: string, description: string, onSuccess: Function) {
-    this.props.updateBoard(id, name, description, onSuccess, this.props.authenticityToken);
+  handleUpdate(id: number, name: string, description: string, slug: string, onSuccess: Function) {
+    this.props.updateBoard(id, name, description, slug, onSuccess, this.props.authenticityToken);
   }
 
   handleDragEnd(result) {
@@ -105,6 +106,7 @@ class BoardsSiteSettingsP extends React.Component<Props> {
                           id={board.id}
                           name={board.name}
                           description={board.description}
+                          slug={board.slug}
                           index={i}
                           settingsAreUpdating={settingsAreUpdating}
 

app/javascript/containers/BoardsSiteSettings.tsx

@@ -28,7 +28,10 @@ const mapDispatchToProps = (dispatch: any) => ({
     authenticityToken: string,
   ) {
     dispatch(submitBoard(name, description, authenticityToken)).then(res => {
-      if (res && res.status === HttpStatus.Created) onSuccess();
+      if (res && res.status === HttpStatus.Created) {
+        onSuccess();
+        window.location.reload();
+      }
     });
   },
 
@@ -36,11 +39,15 @@ const mapDispatchToProps = (dispatch: any) => ({
     id: number,
     name: string,
     description: string,
+    slug: string,
     onSuccess: Function,
     authenticityToken: string,
   ) {
-    dispatch(updateBoard(id, name, description, authenticityToken)).then(res => {
-      if (res && res.status === HttpStatus.OK) onSuccess();
+    dispatch(updateBoard(id, name, description, slug, authenticityToken)).then(res => {
+      if (res && res.status === HttpStatus.OK) {
+        onSuccess();
+        window.location.reload();
+      }
     });
   },
 
@@ -54,7 +61,12 @@ const mapDispatchToProps = (dispatch: any) => ({
   },
 
   deleteBoard(id: number, authenticityToken: string) {
-    dispatch(deleteBoard(id, authenticityToken));
+    dispatch(deleteBoard(id, authenticityToken)).then(res => {
+      console.log(res);
+      if (res && res.status === HttpStatus.Accepted) {
+        window.location.reload();
+      }
+    });
   },
 });
 

app/javascript/interfaces/IBoard.ts

@@ -2,6 +2,7 @@ interface IBoard {
   id: number;
   name: string;
   description?: string;
+  slug?: string;
 }
 
 export default IBoard;

app/javascript/interfaces/IPost.ts

@@ -1,6 +1,7 @@
 interface IPost {
   id: number;
   title: string;
+  slug?: string;
   description?: string;
   boardId: number;
   postStatusId?: number;

app/javascript/interfaces/json/IBoard.ts

@@ -2,6 +2,7 @@ interface IBoardJSON {
   id: number;
   name: string;
   description?: string;
+  slug?: string;
 }
 
 export default IBoardJSON;

app/javascript/interfaces/json/IPost.ts

@@ -1,6 +1,7 @@
 interface IPostJSON {
   id: number;
   title: string;
+  slug?: string;
   description?: string;
   board_id: number;
   post_status_id?: number;

app/javascript/reducers/boardsReducer.ts

@@ -63,6 +63,7 @@ const boardsReducer = (
           id: board.id,
           name: board.name,
           description: board.description,
+          slug: board.slug,
         })),
         areLoading: false,
         error: '',

app/javascript/reducers/postReducer.ts

@@ -13,6 +13,7 @@ import IPost from '../interfaces/IPost';
 const initialState: IPost = {
   id: 0,
   title: '',
+  slug: null,
   description: null,
   boardId: 0,
   postStatusId: null,
@@ -37,6 +38,7 @@ const postReducer = (
       return {
         id: action.post.id,
         title: action.post.title,
+        slug: action.post.slug,
         description: action.post.description,
         boardId: action.post.board_id,
         postStatusId: action.post.post_status_id,

app/models/board.rb

@@ -1,9 +1,19 @@
 class Board < ApplicationRecord
   include TenantOwnable
   include Orderable
+  extend FriendlyId
   
   has_many :posts, dependent: :destroy
 
+  before_save :sanitize_slug
+
   validates :name, presence: true, uniqueness: { scope: :tenant_id }
   validates :description, length: { in: 0..1024 }, allow_nil: true
+
+  friendly_id :name, use: :slugged
+
+  def sanitize_slug
+    self.slug = self.slug.parameterize
+    self.slug = nil if self.slug.blank? # friendly_id will generate a slug if it's nil
+  end
 end

app/models/o_auth.rb

@@ -1,8 +1,10 @@
 class OAuth < ApplicationRecord
-  include TenantOwnable
   include ApplicationHelper
   include Rails.application.routes.url_helpers
 
+  include TenantOwnable
+  extend FriendlyId
+
   has_many :tenant_default_o_auths, dependent: :destroy
 
   attr_accessor :state
@@ -17,6 +19,8 @@ class OAuth < ApplicationRecord
   validates :scope, presence: true
   validates :json_user_email_path, presence: true
 
+  friendly_id :generate_random_slug, use: :slugged
+
   def is_default?
     tenant_id == nil
   end
@@ -27,9 +31,9 @@ class OAuth < ApplicationRecord
     # for this reason, we don't preprend tenant subdomain
     # but rather use the "login" subdomain
     if self.is_default?
-      get_url_for(method(:o_auth_callback_url), resource: id, disallow_custom_domain: true, options: { subdomain: "login", host: Rails.application.base_url })
+      get_url_for(method(:o_auth_callback_url), resource: self, disallow_custom_domain: true, options: { subdomain: "login", host: Rails.application.base_url })
     else
-      get_url_for(method(:o_auth_callback_url), resource: id, disallow_custom_domain: true)
+      get_url_for(method(:o_auth_callback_url), resource: self, disallow_custom_domain: true)
     end
   end
 
@@ -46,6 +50,14 @@ class OAuth < ApplicationRecord
     is_default? and tenant_default_o_auths.exists?
   end
 
+  def generate_random_slug
+    loop do
+      self.slug = SecureRandom.hex(8)
+      break unless self.class.exists?(slug: slug)
+    end
+    slug
+  end
+
   class << self
     # returns all tenant-specific o_auths plus all default o_auths that are enabled site-wide
     def include_all_defaults

app/models/post.rb

@@ -1,5 +1,6 @@
 class Post < ApplicationRecord
   include TenantOwnable
+  extend FriendlyId
   
   belongs_to :board
   belongs_to :user
@@ -15,6 +16,8 @@ class Post < ApplicationRecord
 
   paginates_per Rails.application.posts_per_page
 
+  friendly_id :title, use: :slugged
+
   class << self
     def find_with_post_status_in(post_statuses)
       where(post_status_id: post_statuses.pluck(:id))