mirror of
https://github.com/astuto/astuto.git
synced 2025-12-15 19:27:52 +01:00
Add Redux and use it for state management
This commit is contained in:
riggraz
112
app/javascript/components/Board/BoardP.tsx
Normal file
112
app/javascript/components/Board/BoardP.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import NewPost from './NewPost';
|
||||
import SearchFilter from './SearchFilter';
|
||||
import PostStatusFilter from './PostStatusFilter';
|
||||
import PostList from './PostList';
|
||||
|
||||
import IBoard from '../../interfaces/IBoard';
|
||||
import IPost from '../../interfaces/IPost';
|
||||
|
||||
import { PostsState } from '../../reducers/postsReducer';
|
||||
import { PostStatusesState } from '../../reducers/postStatusesReducer';
|
||||
|
||||
interface Props {
|
||||
board: IBoard;
|
||||
isLoggedIn: boolean;
|
||||
authenticityToken: string;
|
||||
posts: PostsState;
|
||||
postStatuses: PostStatusesState;
|
||||
|
||||
requestPosts(
|
||||
boardId: number,
|
||||
page?: number,
|
||||
searchQuery?: string,
|
||||
postStatusId?: number,
|
||||
): void;
|
||||
requestPostStatuses(): void;
|
||||
handleSearchFilterChange(searchQuery: string): void;
|
||||
handlePostStatusFilterChange(postStatusId: number): void;
|
||||
}
|
||||
|
||||
class BoardP extends React.Component<Props> {
|
||||
searchFilterTimeoutId: ReturnType<typeof setTimeout>;
|
||||
|
||||
componentDidMount() {
|
||||
this.props.requestPosts(this.props.board.id);
|
||||
this.props.requestPostStatuses();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { searchQuery } = this.props.posts.filters;
|
||||
const prevSearchQuery = prevProps.posts.filters.searchQuery;
|
||||
|
||||
const { postStatusId } = this.props.posts.filters;
|
||||
const prevPostStatusId = prevProps.posts.filters.postStatusId;
|
||||
|
||||
// search filter changed
|
||||
if (searchQuery !== prevSearchQuery) {
|
||||
if (this.searchFilterTimeoutId) clearInterval(this.searchFilterTimeoutId);
|
||||
|
||||
this.searchFilterTimeoutId = setTimeout(() => (
|
||||
this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusId)
|
||||
), 500);
|
||||
}
|
||||
|
||||
// post status filter changed
|
||||
if (postStatusId !== prevPostStatusId) {
|
||||
this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusId);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
board,
|
||||
isLoggedIn,
|
||||
authenticityToken,
|
||||
posts,
|
||||
postStatuses,
|
||||
|
||||
requestPosts,
|
||||
handleSearchFilterChange,
|
||||
handlePostStatusFilterChange,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className="boardContainer">
|
||||
<div className="sidebar">
|
||||
<NewPost
|
||||
board={board}
|
||||
isLoggedIn={isLoggedIn}
|
||||
authenticityToken={authenticityToken}
|
||||
/>
|
||||
<SearchFilter
|
||||
searchQuery={posts.filters.searchQuery}
|
||||
handleChange={handleSearchFilterChange}
|
||||
/>
|
||||
<PostStatusFilter
|
||||
postStatuses={postStatuses.items}
|
||||
areLoading={postStatuses.areLoading}
|
||||
error={postStatuses.error}
|
||||
|
||||
currentFilter={posts.filters.postStatusId}
|
||||
handleFilterClick={handlePostStatusFilterChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PostList
|
||||
posts={posts.items}
|
||||
postStatuses={postStatuses.items}
|
||||
page={posts.page}
|
||||
hasMore={posts.haveMore}
|
||||
areLoading={posts.areLoading}
|
||||
error={posts.error}
|
||||
|
||||
handleLoadMore={() => requestPosts(board.id, posts.page + 1)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BoardP;
|
||||
@@ -6,9 +6,11 @@ import PostListItem from './PostListItem';
|
||||
import Spinner from '../shared/Spinner';
|
||||
|
||||
import IPost from '../../interfaces/IPost';
|
||||
import IPostStatus from '../../interfaces/IPostStatus';
|
||||
|
||||
interface Props {
|
||||
posts: Array<IPost>;
|
||||
postStatuses: Array<IPostStatus>;
|
||||
areLoading: boolean;
|
||||
error: string;
|
||||
|
||||
@@ -17,7 +19,15 @@ interface Props {
|
||||
hasMore: boolean;
|
||||
}
|
||||
|
||||
const PostList = ({ posts, areLoading, error, handleLoadMore, page, hasMore }: Props) => (
|
||||
const PostList = ({
|
||||
posts,
|
||||
postStatuses,
|
||||
areLoading,
|
||||
error,
|
||||
handleLoadMore,
|
||||
page,
|
||||
hasMore
|
||||
}: Props) => (
|
||||
<div className="box postList">
|
||||
{ error ? <span className="error">{error}</span> : null }
|
||||
<InfiniteScroll
|
||||
@@ -34,7 +44,7 @@ const PostList = ({ posts, areLoading, error, handleLoadMore, page, hasMore }: P
|
||||
<PostListItem
|
||||
title={post.title}
|
||||
description={post.description}
|
||||
postStatus={post.postStatus}
|
||||
postStatus={postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
|
||||
|
||||
key={i}
|
||||
/>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import IPostStatus from '../../interfaces/IPostStatus';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
postStatus: {name: string, color: string};
|
||||
postStatus: IPostStatus;
|
||||
}
|
||||
|
||||
const PostListItem = ({ title, description, postStatus}: Props) => (
|
||||
@@ -23,10 +25,15 @@ const PostListItem = ({ title, description, postStatus}: Props) => (
|
||||
<span className="comment icon"></span>
|
||||
<span>0 comments</span>
|
||||
</div>
|
||||
<div className="postDetailsStatus">
|
||||
<div className="dot" style={{backgroundColor: postStatus.color}}></div>
|
||||
<span className="postStatusName">{postStatus.name}</span>
|
||||
</div>
|
||||
{
|
||||
postStatus ?
|
||||
<div className="postDetailsStatus">
|
||||
<div className="dot" style={{backgroundColor: postStatus.color}}></div>
|
||||
<span className="postStatusName">{postStatus.name}</span>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -1,229 +1,20 @@
|
||||
import * as React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
import NewPost from './NewPost';
|
||||
import SearchFilter from './SearchFilter';
|
||||
import PostStatusFilter from './PostStatusFilter';
|
||||
import PostList from './PostList';
|
||||
import store from '../../stores';
|
||||
|
||||
import IBoard from '../../interfaces/IBoard';
|
||||
import IPost from '../../interfaces/IPost';
|
||||
import IPostStatus from '../../interfaces/IPostStatus';
|
||||
import Board from '../../containers/Board';
|
||||
|
||||
import '../../stylesheets/components/Board.scss';
|
||||
|
||||
interface Props {
|
||||
board: IBoard;
|
||||
isLoggedIn: boolean;
|
||||
authenticityToken: string;
|
||||
}
|
||||
const BoardRoot = ({ board, isLoggedIn, authenticityToken }) => (
|
||||
<Provider store={store}>
|
||||
<Board
|
||||
board={board}
|
||||
isLoggedIn={isLoggedIn}
|
||||
authenticityToken={authenticityToken}
|
||||
/>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
interface State {
|
||||
filters: {
|
||||
byPostStatus: number;
|
||||
searchQuery: string;
|
||||
};
|
||||
posts: {
|
||||
items: Array<IPost>;
|
||||
areLoading: boolean;
|
||||
error: string;
|
||||
|
||||
page: number;
|
||||
hasMore: boolean;
|
||||
};
|
||||
postStatuses: {
|
||||
items: Array<IPostStatus>;
|
||||
areLoading: boolean;
|
||||
error: string;
|
||||
};
|
||||
}
|
||||
|
||||
class Board extends React.Component<Props, State> {
|
||||
searchFilterTimeoutId: ReturnType<typeof setTimeout>;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
filters: {
|
||||
byPostStatus: 0,
|
||||
searchQuery: '',
|
||||
},
|
||||
posts: {
|
||||
items: [],
|
||||
areLoading: false,
|
||||
error: '',
|
||||
|
||||
page: 0,
|
||||
hasMore: true,
|
||||
},
|
||||
postStatuses: {
|
||||
items: [],
|
||||
areLoading: false,
|
||||
error: '',
|
||||
}
|
||||
};
|
||||
|
||||
this.requestPosts = this.requestPosts.bind(this);
|
||||
this.loadMorePosts = this.loadMorePosts.bind(this);
|
||||
this.requestPostStatuses = this.requestPostStatuses.bind(this);
|
||||
|
||||
this.setSearchFilter = this.setSearchFilter.bind(this);
|
||||
this.setPostStatusFilter = this.setPostStatusFilter.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.requestPosts();
|
||||
this.requestPostStatuses();
|
||||
}
|
||||
|
||||
loadMorePosts() {
|
||||
this.requestPosts(this.state.posts.page + 1);
|
||||
}
|
||||
|
||||
async requestPosts(page = 1) {
|
||||
if (this.state.posts.areLoading) return;
|
||||
|
||||
this.setState({
|
||||
posts: { ...this.state.posts, areLoading: true },
|
||||
});
|
||||
|
||||
const boardId = this.props.board.id;
|
||||
const { byPostStatus, searchQuery } = this.state.filters;
|
||||
|
||||
let params = '';
|
||||
params += `page=${page}`;
|
||||
params += `&board_id=${boardId}`;
|
||||
if (byPostStatus) params += `&post_status_id=${byPostStatus}`;
|
||||
if (searchQuery) params += `&search=${searchQuery}`;
|
||||
|
||||
try {
|
||||
let res = await fetch(`/posts?${params}`);
|
||||
let data = await res.json();
|
||||
|
||||
if (page === 1) {
|
||||
this.setState({
|
||||
posts: {
|
||||
items: data.map(post => ({
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
postStatus: {
|
||||
name: post.post_status_name,
|
||||
color: post.post_status_color,
|
||||
},
|
||||
})),
|
||||
areLoading: false,
|
||||
error: '',
|
||||
page,
|
||||
hasMore: data.length === 15,
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
posts: {
|
||||
items: [...this.state.posts.items, ...data.map(post => ({
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
postStatus: {
|
||||
name: post.post_status_name,
|
||||
color: post.post_status_color,
|
||||
},
|
||||
}))],
|
||||
areLoading: false,
|
||||
error: '',
|
||||
page,
|
||||
hasMore: data.length === 15,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
} catch (e) {
|
||||
this.setState({
|
||||
posts: { ...this.state.posts, error: 'An unknown error occurred, try again.' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setSearchFilter(searchQuery: string) {
|
||||
if (this.searchFilterTimeoutId) clearInterval(this.searchFilterTimeoutId);
|
||||
|
||||
this.searchFilterTimeoutId = setTimeout(() => (
|
||||
this.setState({
|
||||
filters: { ...this.state.filters, searchQuery },
|
||||
}, this.requestPosts)
|
||||
), 500);
|
||||
}
|
||||
|
||||
setPostStatusFilter(postStatusId: number) {
|
||||
this.setState({
|
||||
filters: { ...this.state.filters, byPostStatus: postStatusId },
|
||||
}, this.requestPosts);
|
||||
}
|
||||
|
||||
async requestPostStatuses() {
|
||||
this.setState({
|
||||
postStatuses: { ...this.state.postStatuses, areLoading: true },
|
||||
});
|
||||
|
||||
try {
|
||||
let res = await fetch('/post_statuses');
|
||||
let data = await res.json();
|
||||
|
||||
this.setState({
|
||||
postStatuses: {
|
||||
items: data.map(postStatus => ({
|
||||
id: postStatus.id,
|
||||
name: postStatus.name,
|
||||
color: postStatus.color,
|
||||
})),
|
||||
areLoading: false,
|
||||
error: '',
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
this.setState({
|
||||
postStatuses: { ...this.state.postStatuses, error: 'An unknown error occurred, try again.' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { board, isLoggedIn, authenticityToken } = this.props;
|
||||
const { posts, postStatuses, filters } = this.state;
|
||||
|
||||
return (
|
||||
<div className="boardContainer">
|
||||
<div className="sidebar">
|
||||
<NewPost
|
||||
board={board}
|
||||
isLoggedIn={isLoggedIn}
|
||||
authenticityToken={authenticityToken}
|
||||
/>
|
||||
<SearchFilter
|
||||
searchQuery={filters.searchQuery}
|
||||
handleChange={this.setSearchFilter}
|
||||
/>
|
||||
<PostStatusFilter
|
||||
postStatuses={postStatuses.items}
|
||||
areLoading={postStatuses.areLoading}
|
||||
error={postStatuses.error}
|
||||
|
||||
handleFilterClick={this.setPostStatusFilter}
|
||||
currentFilter={filters.byPostStatus}
|
||||
/>
|
||||
</div>
|
||||
<PostList
|
||||
posts={posts.items}
|
||||
areLoading={posts.areLoading}
|
||||
error={posts.error}
|
||||
|
||||
handleLoadMore={this.loadMorePosts}
|
||||
page={posts.page}
|
||||
hasMore={posts.hasMore}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Board;
|
||||
export default BoardRoot;
|
||||
Reference in New Issue
Block a user