From 641d66310e3d254f79206d329071f8c32d5cc793 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Mon, 8 Apr 2019 14:46:09 -0700 Subject: [PATCH] Loading indicators. - Fixes #10 - Adding SVG symbols component --- ui/src/components/communities.tsx | 80 +++++++++++++++------------- ui/src/components/community-form.tsx | 23 ++++++-- ui/src/components/community.tsx | 16 ++++-- ui/src/components/login.tsx | 30 ++++++++--- ui/src/components/main.tsx | 32 ++++++----- ui/src/components/post-form.tsx | 23 ++++++-- ui/src/components/post-listings.tsx | 30 +++++++---- ui/src/components/post.tsx | 10 ++-- ui/src/components/symbols.tsx | 80 ++++++++++++++++++++++++++++ ui/src/index.tsx | 59 +------------------- ui/src/main.css | 12 ++++- 11 files changed, 255 insertions(+), 140 deletions(-) create mode 100644 ui/src/components/symbols.tsx diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index b81b11cd0..cf42238e1 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -10,24 +10,26 @@ declare const Sortable: any; interface CommunitiesState { communities: Array; + loading: boolean; } export class Communities extends Component { private subscription: Subscription; private emptyState: CommunitiesState = { - communities: [] + communities: [], + loading: true } constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.subscription = WebSocketService.Instance.subject - .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) - .subscribe( - (msg) => this.parseMessage(msg), + .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) + .subscribe( + (msg) => this.parseMessage(msg), (err) => console.error(err), () => console.log('complete') - ); + ); WebSocketService.Instance.listCommunities(); } @@ -44,40 +46,45 @@ export class Communities extends Component { render() { return (
-

Communities

-
- - - - - - - - - - - - - - {this.state.communities.map(community => + {this.state.loading ? +

: +
+

Communities

+
+
NameTitleCategorySubscribersPostsComments
+ - - - - - - - + + + + + + + - )} - -
{community.name}{community.title}{community.category_name}{community.number_of_subscribers}{community.number_of_posts}{community.number_of_comments} - {community.subscribed - ? - : - } - NameTitleCategorySubscribersPostsComments
+ + + {this.state.communities.map(community => + + {community.name} + {community.title} + {community.category_name} + {community.number_of_subscribers} + {community.number_of_posts} + {community.number_of_comments} + + {community.subscribed ? + : + + } + + + )} + + +
+ } ); } @@ -109,6 +116,7 @@ export class Communities extends Component { let res: ListCommunitiesResponse = msg; this.state.communities = res.communities; this.state.communities.sort((a, b) => b.number_of_subscribers - a.number_of_subscribers); + this.state.loading = false; this.setState(this.state); } else if (op == UserOperation.FollowCommunity) { let res: CommunityResponse = msg; diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx index 6250ef9ca..b5b222c64 100644 --- a/ui/src/components/community-form.tsx +++ b/ui/src/components/community-form.tsx @@ -4,6 +4,7 @@ import { retryWhen, delay, take } from 'rxjs/operators'; import { CommunityForm as CommunityFormI, UserOperation, Category, ListCategoriesResponse, CommunityResponse } from '../interfaces'; import { WebSocketService } from '../services'; import { msgOp } from '../utils'; +import * as autosize from 'autosize'; import { Community } from '../interfaces'; @@ -17,6 +18,7 @@ interface CommunityFormProps { interface CommunityFormState { communityForm: CommunityFormI; categories: Array; + loading: boolean; } export class CommunityForm extends Component { @@ -28,7 +30,8 @@ export class CommunityForm extends Component
-