Browse Source

Fix several forms, clear errors, remove state setting in constructors

unoptim
GreatBearShark 2 years ago
parent
commit
1fc892143f
  1. 1
      package.json
  2. 6
      src/components/about.tsx
  3. 14
      src/components/admin-settings.tsx
  4. 8
      src/components/community-form.tsx
  5. 30
      src/components/community.tsx
  6. 5
      src/components/create-community.tsx
  7. 5
      src/components/create-post.tsx
  8. 0
      src/components/elements/Box.tsx
  9. 5
      src/components/inbox.tsx
  10. 4
      src/components/main.tsx
  11. 14
      src/components/post-form.tsx
  12. 38
      src/components/search.tsx
  13. 30
      src/components/site-form.tsx
  14. 7
      src/components/sort-select.tsx
  15. 5
      src/components/user.tsx
  16. 4
      src/custom.css
  17. 14
      src/theme.tsx
  18. 2
      tsconfig.json
  19. 1
      vite.config.ts
  20. 5
      yarn.lock

1
package.json

@ -40,6 +40,7 @@
"i18next": "^19.6.3",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"lodash.isequal": "^4.5.0",
"markdown-it": "^11.0.0",
"markdown-it-container": "^3.0.0",
"markdown-it-emoji": "^1.4.0",

6
src/components/about.tsx

@ -6,13 +6,9 @@ import { repoUrl } from '../utils';
import { BASE_PATH } from "../isProduction";
export class About extends Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
}
componentDidMount() {
document.title = `${i18n.t('about')} - ${
WebSocketService.Instance.site.name
WebSocketService.Instance?.site?.name || 'ChapoChat'
}`;
window.scrollTo(0, 0);
}

14
src/components/admin-settings.tsx

@ -62,11 +62,9 @@ class BaseAdminSettings extends Component<any, AdminSettingsState> {
siteConfigLoading: true,
};
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
state = this.emptyState
componentDidMount() {
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
@ -114,7 +112,7 @@ class BaseAdminSettings extends Component<any, AdminSettingsState> {
<h5>{capitalizeFirstLetter(i18n.t('admins'))}</h5>
<ul className="list-unstyled">
{this.state.siteRes.admins.map(admin => (
<li className="list-inline-item">
<li key={admin.id} className="list-inline-item">
<UserListing
user={{
name: admin.name,
@ -137,7 +135,7 @@ class BaseAdminSettings extends Component<any, AdminSettingsState> {
<h5>{capitalizeFirstLetter(i18n.t('sitemods'))}</h5>
<ul className="list-unstyled">
{this.state.siteRes.sitemods.map(sitemod => (
<li className="list-inline-item">
<li key={sitemod.id} className="list-inline-item">
<UserListing
user={{
name: sitemod.name,
@ -160,7 +158,7 @@ class BaseAdminSettings extends Component<any, AdminSettingsState> {
<h5>{i18n.t('banned_users')}</h5>
<ul className="list-unstyled">
{this.state.siteRes.banned.map(banned => (
<li className="list-inline-item">
<li key={banned.id} className="list-inline-item">
<UserListing
user={{
name: banned.name,
@ -193,7 +191,7 @@ class BaseAdminSettings extends Component<any, AdminSettingsState> {
<textarea
id={this.siteConfigTextAreaId}
value={this.state.siteConfigForm.config_hjson}
onInput={linkEvent(this, this.handleSiteConfigHjsonChange)}
onChange={linkEvent(this, this.handleSiteConfigHjsonChange)}
className="form-control text-monospace"
rows={3}
/>

8
src/components/community-form.tsx

@ -61,15 +61,17 @@ export class CommunityForm extends Component<
community_settings: null,
};
state = this.emptyState
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
this.handleCommunityDescriptionChange = this.handleCommunityDescriptionChange.bind(
this
);
}
componentDidMount() {
if (this.props.community) {
this.state.communityForm = {
name: this.props.community.name,
@ -193,7 +195,7 @@ export class CommunityForm extends Component<
onInput={linkEvent(this, this.handleCommunityCategoryChange)}
>
{this.state.categories.map(category => (
<option value={category.id}>{category.name}</option>
<option key={category.id} value={category.id}>{category.name}</option>
))}
</select>
</div>

30
src/components/community.tsx

@ -52,6 +52,7 @@ import {
import { i18n } from '../i18next';
import { Icon } from './icon';
import { linkEvent } from '../linkEvent';
import Button from './elements/Button';
interface State {
community: CommunityI;
@ -213,33 +214,32 @@ export class BaseCommunity extends Component<any, State> {
</div>
</div>
{this.state.community.subscribed ? (
<button
className="btn btn-secondary unsubscribe-button"
<Button
onClick={linkEvent(
this.state.community.id,
this.handleUnsubscribe
)}
>
{i18n.t('unsubscribe')}
</button>
</Button>
) : (
<button
className="btn btn-secondary subscribe-button"
<Button
onClick={linkEvent(
this.state.community.id,
this.handleSubscribe
)}
this.handleSubscribe
)
}
>
{i18n.t('subscribe')}
</button>
</Button>
)}
<div className="community-button-separator" />
<Link
className="btn btn-secondary create-post-button"
to={`/create_post?community=${this.state.community.name}`}
>
{isMobile ? '+' : 'Create Post'}
</Link>
<div className="community-button-separator" />
<Link to={`/create_post?community=${this.state.community.name}`} style={{ display: 'block' }}>
<Button variant="secondary">
{isMobile ? '+' : 'Create Post'}
</Button>
</Link>
</div>
</div>
</div>

5
src/components/create-community.tsx

@ -22,11 +22,14 @@ export class BaseCreateCommunity extends Component<any, CreateCommunityState> {
private emptyState: CreateCommunityState = {
enableNsfw: null,
};
state = this.emptyState
constructor(props: any, context: any) {
super(props, context);
this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
this.state = this.emptyState;
}
componentDidMount() {
if (!UserService.Instance.user) {
toast(i18n.t('not_logged_in'), 'danger');
this.props.history.push(`/login`);

5
src/components/create-post.tsx

@ -38,11 +38,14 @@ export class BaseCreatePost extends Component<any, CreatePostState> {
},
};
state = this.emptyState
constructor(props: any, context: any) {
super(props, context);
this.handlePostCreate = this.handlePostCreate.bind(this);
this.state = this.emptyState;
}
componentDidMount() {
if (!UserService.Instance.user) {
toast(i18n.t('not_logged_in'), 'danger');
this.props.history.push(`/login`);

0
src/components/elements/Box.tsx

5
src/components/inbox.tsx

@ -75,10 +75,9 @@ export class Inbox extends Component<any, InboxState> {
enableDownvotes: undefined,
};
constructor(props: any, context: any) {
super(props, context);
state = this.emptyState
this.state = this.emptyState;
componentDidMount() {
this.handleSortChange = this.handleSortChange.bind(this);
this.subscription = WebSocketService.Instance.subject

4
src/components/main.tsx

@ -212,7 +212,7 @@ class Main extends Component<any, MainState> {
<div>
{!this.state.loading && (
<div>
<div className="card border-secondary mb-3">
<Box mb={3}>
<div className="card-body">
{this.trendingCommunities()}
{UserService.Instance.user &&
@ -250,7 +250,7 @@ class Main extends Component<any, MainState> {
</Flex>
)}
</div>
</div>
</Box>
{this.sidebar()}
{this.donations()}
{this.landing()}

14
src/components/post-form.tsx

@ -134,11 +134,11 @@ interface PostFormState {
crosspostCommunityId?: number;
}
export const TextAreaWithCounter = ({ maxLength, ...props }) => {
const characterLimitExceeded = props.value && props.value.length > maxLength;
export const TextAreaWithCounter = ({ maxLength, value, ...props }) => {
const characterLimitExceeded = value && value.length > maxLength;
return (
<>
<textarea {...props} />
<textarea value={value || ''} {...props} />
{props.value && (
<div className="mt-2">
<span
@ -176,14 +176,16 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
crossPosts: [],
};
state = this.emptyState;
constructor(props: any, context: any) {
super(props, context);
this.fetchSimilarPosts = debounce(this.fetchSimilarPosts).bind(this);
this.fetchPageTitle = debounce(this.fetchPageTitle).bind(this);
this.handlePostBodyChange = this.handlePostBodyChange.bind(this);
}
this.state = this.emptyState;
componentDidMount() {
if (this.props.post) {
this.state.postForm = {
body: this.props.post.body,
@ -230,9 +232,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
};
WebSocketService.Instance.listCommunities(listCommunitiesForm);
}
componentDidMount() {
setupTippy();
}

38
src/components/search.tsx

@ -37,6 +37,7 @@ import { SortSelect } from './sort-select';
import { CommentNodes } from './comment-nodes';
import { i18n } from '../i18next';
import { linkEvent } from '../linkEvent';
import { Box, Select } from 'theme-ui';
interface SearchState {
q: string;
@ -206,21 +207,28 @@ export class Search extends Component<any, SearchState> {
selects() {
return (
<div className="mb-2">
<select
value={this.state.type_}
onChange={linkEvent(this, this.handleTypeChange)}
className="custom-select custom-select-sm w-auto"
>
<option disabled>{i18n.t('type')}</option>
<option value={SearchType.All}>{i18n.t('all')}</option>
<option value={SearchType.Comments}>{i18n.t('comments')}</option>
<option value={SearchType.Posts}>{i18n.t('posts')}</option>
<option value={SearchType.Communities}>
{i18n.t('communities')}
</option>
<option value={SearchType.Users}>{i18n.t('users')}</option>
</select>
<span className="ml-2">
<Box css={{ display: 'inline-block' }} mr={2}>
<Select
value={this.state.type_}
onChange={linkEvent(this, this.handleTypeChange)}
css={{
display: 'inline-block',
}}
style={{
display: 'inline-block',
}}
>
<option disabled>{i18n.t('type')}</option>
<option value={SearchType.All}>{i18n.t('all')}</option>
<option value={SearchType.Comments}>{i18n.t('comments')}</option>
<option value={SearchType.Posts}>{i18n.t('posts')}</option>
<option value={SearchType.Communities}>
{i18n.t('communities')}
</option>
<option value={SearchType.Users}>{i18n.t('users')}</option>
</Select>
</Box>
<span>
<SortSelect
sort={this.state.sort}
onChange={this.handleSortChange}

30
src/components/site-form.tsx

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { Prompt } from 'react-router-dom';
import isEqual from 'lodash.isequal'
import { MarkdownTextArea } from './markdown-textarea';
import { Site, SiteForm as SiteFormI } from '../interfaces';
import { WebSocketService } from '../services';
@ -29,13 +30,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
loading: false,
};
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
state = this.emptyState;
componentDidMount() {
if (this.props.site) {
this.state = {
this.setState({
siteForm: {
name: this.props.site.name,
description: this.props.site.description,
@ -45,18 +44,20 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
enable_nsfw: this.props.site.enable_nsfw,
},
loading: false
};
});
}
}
// Necessary to stop the loading
UNSAFE_componentWillReceiveProps() {
this.setState({
loading: false
});
}
// UNSAFE_componentWillReceiveProps() {
// this.setState({
// loading: false
// });
// }
componentDidUpdate() {
componentDidUpdate(prevProps) {
// console.log({ prevProps, props: this.props });
// console.log(JSON.stringify(prevProps) === JSON.stringify(this.props));
if (
!this.state.loading &&
!this.props.site &&
@ -66,6 +67,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
} else {
window.onbeforeunload = undefined;
}
if (!isEqual(prevProps, this.props)) {
console.log('NOT EQUAL')
this.setState({ loading: false })
}
}
componentWillUnmount() {

7
src/components/sort-select.tsx

@ -39,13 +39,6 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
<Select
value={this.props.sort}
onChange={linkEvent(this, this.handleSortChange)}
css={{
display: 'inline-block',
}}
style={{
display: 'inline-block',
}}
// className="custom-select custom-select-sm w-auto mr-2"
>
<option disabled>{i18n.t('sort_type')}</option>
{!this.props.hideHot && (

5
src/components/user.tsx

@ -172,10 +172,11 @@ class BaseUser extends Component<any, UserState> {
additionalPronouns: 'none',
};
state = this.emptyState
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
this.handleSortChange = this.handleSortChange.bind(this);
this.handleUserSettingsSortTypeChange = this.handleUserSettingsSortTypeChange.bind(
this
@ -190,7 +191,9 @@ class BaseUser extends Component<any, UserState> {
this
);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
}
componentDidMount() {
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(

4
src/custom.css

@ -307,6 +307,7 @@ a.text-body {
.community-button-separator {
border-right: 3px solid #323232;
margin: 0 15px;
height: 40px;
}
@media only screen and (max-width: 992px) {
@ -321,7 +322,7 @@ a.text-body {
}
.community-stat-section {
width: 100%;
width: 50%;
}
.header-names {
@ -336,6 +337,7 @@ a.text-body {
.header-right-section {
display: flex;
align-items: center;
padding: 15px 25px;
}

14
src/theme.tsx

@ -28,6 +28,7 @@ export const variants = {
},
},
highlight: {
color: 'text',
backgroundColor: lighten('muted', 0.1),
'&:hover': {
backgroundColor: 'muted',
@ -36,7 +37,18 @@ export const variants = {
danger: {
backgroundColor: 'danger',
},
outline: {
borderColor: 'muted',
borderWidth: '1px',
borderStyle: 'solid',
backgroundColor: 'transparent',
}
},
forms: {
select: {
borderColor: lighten('muted', 0.4),
}
}
};
const defaultTheme: ThemeProviderProps<Theme> = {
@ -52,8 +64,6 @@ const defaultTheme: ThemeProviderProps<Theme> = {
},
};
console.log({ defaultTheme });
export const themes = {
chapo: defaultTheme,
...allThemes,

2
tsconfig.json

@ -18,7 +18,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"jsx": "react"
},
"include": [
"src", "public/assets"

1
vite.config.ts

@ -11,6 +11,7 @@ const config: UserConfig = {
'moment',
'markdown-it-emoji',
"markdown-it-emoji/light",
"lodash.isequal",
"moment/locale/es",
"moment/locale/el",
"moment/locale/eu",

5
yarn.lock

@ -3842,6 +3842,11 @@ [email protected]^4.4.2:
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
[email protected]^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
[email protected], [email protected]^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"

Loading…
Cancel
Save