From cd4e0ab3c2cfd615e4771fb9181a31ce237b5ceb Mon Sep 17 00:00:00 2001 From: Dessalines Date: Wed, 8 Jul 2020 01:02:14 -0400 Subject: HTML title bugs. - Fixing HTML titles for some pages. Fixes #801 - Removing WebSocketService.Instance.site, fetching site on demand now. --- ui/src/components/post-form.tsx | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'ui/src/components/post-form.tsx') diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index fdf6ebe4..8c693ac0 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -16,7 +16,6 @@ import { SearchForm, SearchType, SearchResponse, - GetSiteResponse, WebSocketJsonResponse, } from '../interfaces'; import { WebSocketService, UserService } from '../services'; @@ -52,6 +51,8 @@ interface PostFormProps { onCancel?(): any; onCreate?(id: number): any; onEdit?(post: Post): any; + enableNsfw: boolean; + enableDownvotes: boolean; } interface PostFormState { @@ -63,7 +64,6 @@ interface PostFormState { suggestedTitle: string; suggestedPosts: Array; crossPosts: Array; - enable_nsfw: boolean; } export class PostForm extends Component { @@ -87,7 +87,6 @@ export class PostForm extends Component { suggestedTitle: undefined, suggestedPosts: [], crossPosts: [], - enable_nsfw: undefined, }; constructor(props: any, context: any) { @@ -138,7 +137,6 @@ export class PostForm extends Component { }; WebSocketService.Instance.listCommunities(listCommunitiesForm); - WebSocketService.Instance.getSite(); } componentDidMount() { @@ -240,7 +238,12 @@ export class PostForm extends Component {
{i18n.t('cross_posts')}
- + )} @@ -265,7 +268,11 @@ export class PostForm extends Component {
{i18n.t('related_posts')}
- + )} @@ -346,7 +353,7 @@ export class PostForm extends Component { )} - {this.state.enable_nsfw && ( + {this.props.enableNsfw && (
@@ -631,10 +638,6 @@ export class PostForm extends Component { this.state.crossPosts = data.posts; } this.setState(this.state); - } else if (res.op == UserOperation.GetSite) { - let data = res.data as GetSiteResponse; - this.state.enable_nsfw = data.site.enable_nsfw; - this.setState(this.state); } } } -- cgit v1.2.3 From 32d43b85b942e7b9d12b462a13c3dd52252acc6c Mon Sep 17 00:00:00 2001 From: Dessalines Date: Wed, 8 Jul 2020 14:32:37 -0400 Subject: Blocking page refresh when forms are filled. Fixes #671 --- ui/src/components/post-form.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'ui/src/components/post-form.tsx') diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 8c693ac0..a88d38c7 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -151,8 +151,22 @@ export class PostForm extends Component { setupTippy(); } + componentDidUpdate() { + if ( + !this.state.loading && + (this.state.postForm.name || + this.state.postForm.url || + this.state.postForm.body) + ) { + window.onbeforeunload = () => true; + } else { + window.onbeforeunload = undefined; + } + } + componentWillUnmount() { this.subscription.unsubscribe(); + window.onbeforeunload = null; } render() { -- cgit v1.2.3 From db09730d5f391c37bde87f59ed2ea6f3418034e4 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Thu, 9 Jul 2020 13:32:23 -0400 Subject: Removing twemoji, and the massive emoji picker. Fixes #895 --- ui/src/components/post-form.tsx | 29 ----------------------------- 1 file changed, 29 deletions(-) (limited to 'ui/src/components/post-form.tsx') diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index a88d38c7..fc7884d7 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -33,7 +33,6 @@ import { randomStr, setupTribute, setupTippy, - emojiPicker, hostname, pictrsDeleteToast, } from '../utils'; @@ -95,7 +94,6 @@ export class PostForm extends Component { this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this); this.tribute = setupTribute(); - this.setupEmojiPicker(); this.state = this.emptyState; @@ -332,15 +330,6 @@ export class PostForm extends Component { - - - - -
{!this.props.post && ( @@ -420,20 +409,6 @@ export class PostForm extends Component { ); } - setupEmojiPicker() { - emojiPicker.on('emoji', twemojiHtmlStr => { - if (this.state.postForm.body == null) { - this.state.postForm.body = ''; - } - var el = document.createElement('div'); - el.innerHTML = twemojiHtmlStr; - let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt'); - let shortName = `:${emojiShortName[nativeUnicode]}:`; - this.state.postForm.body += shortName; - this.setState(this.state); - }); - } - handlePostSubmit(i: PostForm, event: any) { event.preventDefault(); @@ -596,10 +571,6 @@ export class PostForm extends Component { }); } - handleEmojiPickerClick(_i: PostForm, event: any) { - emojiPicker.togglePicker(event.target); - } - parseMessage(msg: WebSocketJsonResponse) { let res = wsJsonToRes(msg); if (msg.error) { -- cgit v1.2.3 From 8e96507cb19f7694a31a1407d1bcd2a347a70342 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Fri, 10 Jul 2020 14:01:45 -0400 Subject: Replacing selectr with choices.js for community searching. (#932) - Fixes #839 - Fixes #847 --- ui/src/components/post-form.tsx | 46 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 41 insertions(+), 5 deletions(-) (limited to 'ui/src/components/post-form.tsx') diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index fc7884d7..247c4cc6 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -39,7 +39,7 @@ import { import autosize from 'autosize'; import Tribute from 'tributejs/src/Tribute.js'; import emojiShortName from 'emoji-short-name'; -import Selectr from 'mobius1-selectr'; +import Choices from 'choices.js'; import { i18n } from '../i18next'; const MAX_POST_TITLE_LENGTH = 200; @@ -69,6 +69,7 @@ export class PostForm extends Component { private id = `post-form-${randomStr()}`; private tribute: Tribute; private subscription: Subscription; + private choices: Choices; private emptyState: PostFormState = { postForm: { name: null, @@ -164,6 +165,7 @@ export class PostForm extends Component { componentWillUnmount() { this.subscription.unsubscribe(); + this.choices.destroy(); window.onbeforeunload = null; } @@ -596,11 +598,45 @@ export class PostForm extends Component { // Set up select searching let selectId: any = document.getElementById('post-community'); if (selectId) { - let selector = new Selectr(selectId, { nativeDropdown: false }); - selector.on('selectr.select', option => { - this.state.postForm.community_id = Number(option.value); - this.setState(this.state); + this.choices = new Choices(selectId, { + shouldSort: false, + classNames: { + containerOuter: 'choices', + containerInner: 'choices__inner bg-secondary border-0', + input: 'form-control', + inputCloned: 'choices__input--cloned', + list: 'choices__list', + listItems: 'choices__list--multiple', + listSingle: 'choices__list--single', + listDropdown: 'choices__list--dropdown', + item: 'choices__item bg-secondary', + itemSelectable: 'choices__item--selectable', + itemDisabled: 'choices__item--disabled', + itemChoice: 'choices__item--choice', + placeholder: 'choices__placeholder', + group: 'choices__group', + groupHeading: 'choices__heading', + button: 'choices__button', + activeState: 'is-active', + focusState: 'is-focused', + openState: 'is-open', + disabledState: 'is-disabled', + highlightedState: 'text-info', + selectedState: 'text-info', + flippedState: 'is-flipped', + loadingState: 'is-loading', + noResults: 'has-no-results', + noChoices: 'has-no-choices', + }, }); + this.choices.passedElement.element.addEventListener( + 'choice', + (e: any) => { + this.state.postForm.community_id = Number(e.detail.choice.value); + this.setState(this.state); + }, + false + ); } } else if (res.op == UserOperation.CreatePost) { let data = res.data as PostResponse; -- cgit v1.2.3 From 8d2465989230fae7d9aae334a67a726fd6ced912 Mon Sep 17 00:00:00 2001 From: Tony Antonov Date: Fri, 10 Jul 2020 19:15:53 -0600 Subject: Forbid users to use empty titles for posts (#930) - Add a regex that checks if string contains anything but whitespace - Check for whitespace-only titles on post creation and edit - Trim whitespace from titles before saving - Add frontend validation to title --- ui/src/components/post-form.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'ui/src/components/post-form.tsx') diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 247c4cc6..30527510 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -35,6 +35,7 @@ import { setupTippy, hostname, pictrsDeleteToast, + validTitle, } from '../utils'; import autosize from 'autosize'; import Tribute from 'tributejs/src/Tribute.js'; @@ -271,12 +272,19 @@ export class PostForm extends Component { value={this.state.postForm.name} id="post-title" onInput={linkEvent(this, this.handlePostNameChange)} - class="form-control" + class={`form-control ${ + !validTitle(this.state.postForm.name) && 'is-invalid' + }`} required rows={2} minLength={3} maxLength={MAX_POST_TITLE_LENGTH} /> + {!validTitle(this.state.postForm.name) && ( +
+ {i18n.t('invalid_post_title')} +
+ )} {this.state.suggestedPosts.length > 0 && ( <>
-- cgit v1.2.3 From 4b30b6d764a28008ef1dfff06da43539e9efa1a1 Mon Sep 17 00:00:00 2001 From: ernestwisniewski Date: Sat, 11 Jul 2020 16:13:45 +0200 Subject: Redirect error on create_post page for not logged in users. #937 (#938) --- ui/src/components/post-form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/src/components/post-form.tsx') diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 30527510..e5efeaac 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -166,7 +166,7 @@ export class PostForm extends Component { componentWillUnmount() { this.subscription.unsubscribe(); - this.choices.destroy(); + this.choices && this.choices.destroy(); window.onbeforeunload = null; } -- cgit v1.2.3