Browse Source

Add filtering pattern to websockets

feature/keyword-filtering
zongor 6 months ago
parent
commit
93923295f2
  1. 16
      src/components/comment-form.tsx
  2. 16
      src/components/navbar.tsx
  3. 22
      src/components/post-form.tsx
  4. 97
      src/components/post.tsx
  5. 5
      src/components/user-details.tsx
  6. 84
      src/components/user.tsx
  7. 1
      src/interfaces.ts
  8. 14
      src/services/UserService.ts

16
src/components/comment-form.tsx

@ -205,10 +205,22 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
if (UserService.Instance.user) {
if (res.op == UserOperation.CreateComment) {
let data = res.data as CommentResponse;
this.handleFinished(res.op, data);
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.handleFinished(res.op, data);
}
} else if (isCommentChanged(res.op)) {
let data = res.data as CommentResponse;
this.handleFinished(res.op, data);
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.handleFinished(res.op, data);
}
}
}
}

16
src/components/navbar.tsx

@ -116,6 +116,10 @@ class UnwrappedNavbar extends Component<any, NavbarState> {
UserService.Instance.setUser(data.my_user);
}
if (data.filter_keywords) {
UserService.Instance.setFilterKeywords(data.filter_keywords);
}
this.setState({
siteRes: data,
siteName: data.site.name,
@ -483,9 +487,15 @@ class UnwrappedNavbar extends Component<any, NavbarState> {
let data = res.data as CommentResponse;
if (UserService.Instance.user) {
if (data.recipient_ids.includes(UserService.Instance.user.id)) {
this.sendUnreadCount(this.state.unreadCount + 1);
this.notify(data.comment);
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
if (data.recipient_ids.includes(UserService.Instance.user.id)) {
this.sendUnreadCount(this.state.unreadCount + 1);
this.notify(data.comment);
}
}
}
} else if (res.op == UserOperation.CreatePrivateMessage) {

22
src/components/post-form.tsx

@ -787,14 +787,26 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
return;
} else if (res.op == UserOperation.CreatePost) {
let data = res.data as PostResponse;
if (data.post.creator_id == UserService.Instance.user.id) {
this.props.onCreate(data.post.id);
if (
!UserService.Instance.filterKeywords.some(
f => data.post.name.includes(f) || data.post?.body.includes(f)
)
) {
if (data.post.creator_id == UserService.Instance.user.id) {
this.props.onCreate(data.post.id);
}
}
} else if (isPostChanged(res.op)) {
let data = res.data as PostResponse;
if (data.post.creator_id == UserService.Instance.user.id) {
this.setState({ loading: false });
this.props.onEdit(data.post);
if (
!UserService.Instance.filterKeywords.some(
f => data.post.name.includes(f) || data.post?.body.includes(f)
)
) {
if (data.post.creator_id == UserService.Instance.user.id) {
this.setState({ loading: false });
this.props.onEdit(data.post);
}
}
} else if (res.op == UserOperation.Search) {
let data = res.data as SearchResponse;

97
src/components/post.tsx

@ -594,55 +594,98 @@ export class Post extends Component<any, PostState> {
this.fetch();
} else if (res.op == UserOperation.CreateComment) {
let data = res.data as CommentResponse;
if (
// make sure we filter out comments from other posts
// user might have more than one tab open
this.state.post.id == data.comment.post_id &&
// Necessary since it might be a user reply
data.recipient_ids.length == 0
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
// this.state.comments.unshift(data.comment);
this.setState({
comments: this.state.comments.unshift(data.comment),
});
if (
// make sure we filter out comments from other posts
// user might have more than one tab open
this.state.post.id == data.comment.post_id &&
// Necessary since it might be a user reply
data.recipient_ids.length == 0
) {
// this.state.comments.unshift(data.comment);
this.setState({
comments: this.state.comments.unshift(data.comment),
});
}
}
} else if (isCommentChanged(res.op)) {
let data = res.data as CommentResponse;
this.setState({
comments: editCommentRes(data, this.state.comments),
});
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.setState({
comments: editCommentRes(data, this.state.comments),
});
}
} else if (res.op == UserOperation.SaveComment) {
let data = res.data as CommentResponse;
this.setState({
comments: saveCommentRes(data, this.state.comments),
});
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.setState({
comments: saveCommentRes(data, this.state.comments),
});
}
setupTippy();
} else if (res.op == UserOperation.CreateCommentLike) {
let data = res.data as CommentResponse;
this.setState({
comments: createCommentLikeRes(data, this.state.comments),
});
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.setState({
comments: createCommentLikeRes(data, this.state.comments),
});
}
} else if (res.op == UserOperation.CreatePostLike) {
let data = res.data as PostResponse;
//make sure that this is the correct post in case we're in the wrong room
if (data.post.id === this.state.post.id) {
this.setState({
post: createPostLikeRes(data, this.state.post),
});
if (
!UserService.Instance.filterKeywords.some(
f => data.post.name.includes(f) || data.post?.body.includes(f)
)
) {
this.setState({
post: createPostLikeRes(data, this.state.post),
});
}
}
} else if (isPostChanged(res.op)) {
let data = res.data as PostResponse;
if (this.state.post.id === data.post.id) {
this.state.post = data.post;
this.setState(this.state);
setupTippy();
if (
!UserService.Instance.filterKeywords.some(
f => data.post.name.includes(f) || data.post?.body.includes(f)
)
) {
this.state.post = data.post;
this.setState(this.state);
setupTippy();
}
}
} else if (res.op == UserOperation.SavePost) {
let data = res.data as PostResponse;
if (this.state.post.id === data.post.id) {
this.state.post = data.post;
this.setState(this.state);
setupTippy();
if (
!UserService.Instance.filterKeywords.some(
f => data.post.name.includes(f) || data.post?.body.includes(f)
)
) {
this.state.post = data.post;
this.setState(this.state);
setupTippy();
}
}
} else if (res.op == UserOperation.EditCommunity) {
let data = res.data as CommunityResponse;

5
src/components/user-details.tsx

@ -201,7 +201,10 @@ class BaseUserDetails extends Component<
const data = res.data as CommentResponse;
if (
UserService.Instance.user &&
data.comment.creator_id == UserService.Instance.user.id
data.comment.creator_id == UserService.Instance.user.id &&
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
toast(i18n.t('reply_sent'));
}

84
src/components/user.tsx

@ -1767,31 +1767,61 @@ class BaseUser extends Component<any, UserState> {
});
} else if (res.op == UserOperation.CreatePostLike) {
const data = res.data as PostResponse;
this.setState({
posts: createPostLikeFindRes(data, this.state.posts),
});
if (
!UserService.Instance.filterKeywords.some(
f => data.post.name.includes(f) || data.post?.body.includes(f)
)
) {
this.setState({
posts: createPostLikeFindRes(data, this.state.posts),
});
}
} else if (res.op == UserOperation.CreateComment) {
let data = res.data as CommentResponse;
// this.state.comments.unshift(data.comment);
this.setState({
comments: this.state.comments.unshift(data.comment),
});
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.setState({
comments: this.state.comments.unshift(data.comment),
});
}
} else if (isCommentChanged(res.op)) {
let data = res.data as CommentResponse;
this.setState({
comments: editCommentRes(data, this.state.comments),
});
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.setState({
comments: editCommentRes(data, this.state.comments),
});
}
} else if (res.op == UserOperation.SaveComment) {
let data = res.data as CommentResponse;
this.setState({
comments: saveCommentRes(data, this.state.comments),
});
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.setState({
comments: saveCommentRes(data, this.state.comments),
});
}
setupTippy();
} else if (res.op == UserOperation.CreateCommentLike) {
let data = res.data as CommentResponse;
this.setState({
comments: createCommentLikeRes(data, this.state.comments),
});
if (
!UserService.Instance.filterKeywords.some(f =>
data.comment.content.includes(f)
)
) {
this.setState({
comments: createCommentLikeRes(data, this.state.comments),
});
}
} else if (res.op == UserOperation.BanUser) {
const data = res.data as BanUserResponse;
@ -1801,14 +1831,26 @@ class BaseUser extends Component<any, UserState> {
});
} else if (res.op == UserOperation.SavePost) {
let data = res.data as PostResponse;
this.setState({
posts: savePostFindRes(data, this.state.posts),
});
if (
!UserService.Instance.filterKeywords.some(
f => data.post.name.includes(f) || data.post?.body.includes(f)
)
) {
this.setState({
posts: savePostFindRes(data, this.state.posts),
});
}
} else if (isPostChanged(res.op)) {
let data = res.data as PostResponse;
this.setState({
posts: editPostFindRes(data, this.state.posts),
});
if (
!UserService.Instance.filterKeywords.some(
f => data.post.name.includes(f) || data.post?.body.includes(f)
)
) {
this.setState({
posts: editPostFindRes(data, this.state.posts),
});
}
}
}
}

1
src/interfaces.ts

@ -958,6 +958,7 @@ export interface GetSiteResponse {
online: number;
version?: string;
my_user?: User;
filter_keywords?: Array<string>;
}
export interface SiteResponse {

14
src/services/UserService.ts

@ -8,10 +8,12 @@ import { LogoutForm } from '../interfaces';
import { changeTheme } from '../theme';
const USER_KEY = 'user-details';
const USER_FILTER_KEY = 'user-filter';
export class UserService {
private static _instance: UserService;
public user: User;
public filterKeywords: Array<string>;
public claims: Claims;
public jwtSub: Subject<string> = new Subject<string>();
public unreadCountSub: Subject<number> = new Subject<number>();
@ -33,6 +35,13 @@ export class UserService {
this.jwtSub.next();
this.unreadCountSub.next(0);
}
const savedUserFilter = localStorage.getItem(USER_FILTER_KEY);
if (savedUserFilter && jwt) {
this.user = JSON.parse(savedUserFilter);
} else if (savedUserFilter) {
localStorage.removeItem(USER_FILTER_KEY);
}
}
public login(res: LoginResponse): void {
@ -71,6 +80,11 @@ export class UserService {
this.fetchUnreads();
}
public setFilterKeywords(data: Array<string>): void {
this.filterKeywords = data;
localStorage.setItem(USER_FILTER_KEY, JSON.stringify(data));
}
public get auth(): string {
const jwt = Cookies.get('jwt');
const bid = localStorage.getItem('bid');

Loading…
Cancel
Save