From 25d7d9a5af0b6b6dc2bd1f48ab9763807a17fdbb Mon Sep 17 00:00:00 2001 From: riggraz Date: Fri, 6 Sep 2019 14:36:26 +0200 Subject: [PATCH] Improve Roadmap and Board components --- app/javascript/components/Board/NewPost.tsx | 12 ++++++++--- app/javascript/components/Board/PostList.tsx | 21 ++++++++++++------- .../components/Board/SearchFilter.tsx | 2 +- app/javascript/components/Board/index.tsx | 10 +++++---- .../components/Roadmap/PostList.tsx | 19 ++++++++++------- app/javascript/helpers/debounce.js | 4 ---- .../stylesheets/components/Board.scss | 7 ++++++- .../stylesheets/components/Roadmap.scss | 5 +++++ 8 files changed, 52 insertions(+), 28 deletions(-) delete mode 100644 app/javascript/helpers/debounce.js diff --git a/app/javascript/components/Board/NewPost.tsx b/app/javascript/components/Board/NewPost.tsx index 3d3cb929..f520495d 100644 --- a/app/javascript/components/Board/NewPost.tsx +++ b/app/javascript/components/Board/NewPost.tsx @@ -102,10 +102,16 @@ class NewPost extends React.Component { }); this.setState({isLoading: false}); - if (res.status === 204) this.setState({success: 'Your post has been published!'}); - else { + if (res.status === 204) { + this.setState({ + success: 'Your post has been published!', + + title: '', + description: '', + }); + } else { let data = await res.json(); - this.setState({error: data.message}); + this.setState({error: data.error}); } } catch (e) { diff --git a/app/javascript/components/Board/PostList.tsx b/app/javascript/components/Board/PostList.tsx index c6b3eba3..dd9c9e57 100644 --- a/app/javascript/components/Board/PostList.tsx +++ b/app/javascript/components/Board/PostList.tsx @@ -28,15 +28,20 @@ const PostList = ({ posts, areLoading, error, handleLoadMore, page, hasMore }: P loader={} useWindow={true} > - {posts.map((post, i) => ( - 0 ? + posts.map((post, i) => ( + - ))} + key={i} + /> + )) + : + !areLoading ? There are no posts. : null + } ); diff --git a/app/javascript/components/Board/SearchFilter.tsx b/app/javascript/components/Board/SearchFilter.tsx index a9b9d958..bd62d17f 100644 --- a/app/javascript/components/Board/SearchFilter.tsx +++ b/app/javascript/components/Board/SearchFilter.tsx @@ -9,7 +9,7 @@ const SearchFilter = ({ searchQuery, handleChange }: Props) => (
handleChange(e.target.value)} id="searchPostInput" className="form-control" diff --git a/app/javascript/components/Board/index.tsx b/app/javascript/components/Board/index.tsx index a1f06e5c..e8ae8880 100644 --- a/app/javascript/components/Board/index.tsx +++ b/app/javascript/components/Board/index.tsx @@ -9,8 +9,6 @@ import IBoard from '../../interfaces/IBoard'; import IPost from '../../interfaces/IPost'; import IPostStatus from '../../interfaces/IPostStatus'; -import debounce from '../../helpers/debounce.js'; - import '../../stylesheets/components/Board.scss'; interface Props { @@ -40,6 +38,8 @@ interface State { } class Board extends React.Component { + searchFilterTimeoutId: number; + constructor(props) { super(props); @@ -145,11 +145,13 @@ class Board extends React.Component { } setSearchFilter(searchQuery: string) { - debounce(() => ( + if (this.searchFilterTimeoutId) clearInterval(this.searchFilterTimeoutId); + + this.searchFilterTimeoutId = setTimeout(() => ( this.setState({ filters: { ...this.state.filters, searchQuery }, }, this.requestPosts) - ), 1000)(); + ), 500); } setPostStatusFilter(postStatusId: number) { diff --git a/app/javascript/components/Roadmap/PostList.tsx b/app/javascript/components/Roadmap/PostList.tsx index 09dc6139..df3e024f 100644 --- a/app/javascript/components/Roadmap/PostList.tsx +++ b/app/javascript/components/Roadmap/PostList.tsx @@ -12,14 +12,19 @@ interface Props { const PostList = ({ posts, boards }: Props) => (
- {posts.map((post, i) => ( - board.id === post.board_id).name} + { + posts.length > 0 ? + posts.map((post, i) => ( + board.id === post.board_id).name} - key={i} - /> - ))} + key={i} + /> + )) + : + There are no posts that have this status. + }
); diff --git a/app/javascript/helpers/debounce.js b/app/javascript/helpers/debounce.js deleted file mode 100644 index a34244a4..00000000 --- a/app/javascript/helpers/debounce.js +++ /dev/null @@ -1,4 +0,0 @@ -// https://toughcompetent.com/blog/es5-es6-debounce-react-events-on-inputs/ -function debounce(a,b,c){var d,e;return function(){function h(){d=null,c||(e=a.apply(f,g))}var f=this,g=arguments;return clearTimeout(d),d=setTimeout(h,b),c&&!d&&(e=a.apply(f,g)),e}} - -export default debounce; \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Board.scss b/app/javascript/stylesheets/components/Board.scss index 6b6b7168..a7633d77 100644 --- a/app/javascript/stylesheets/components/Board.scss +++ b/app/javascript/stylesheets/components/Board.scss @@ -39,7 +39,6 @@ justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; - .sidebar { .sidebar-box { @@ -208,4 +207,10 @@ margin-top: auto; margin-bottom: auto; margin-right: 4px; +} + +.infoText { + display: block; + text-align: center; + font-style: italic; } \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap.scss b/app/javascript/stylesheets/components/Roadmap.scss index 29801f3b..a1cbd07a 100644 --- a/app/javascript/stylesheets/components/Roadmap.scss +++ b/app/javascript/stylesheets/components/Roadmap.scss @@ -40,6 +40,11 @@ height: 16px; border-radius: 100%; } + + .infoText { + text-align: center; + font-style: italic; + } .columnTitle { margin: 0 8px;