random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished updating the reformatting of propTypes and set redux, intl functions to end of component

Browse Source 
• Finished:
- updating the reformatting of propTypes and set redux, intl functions to end of component

• Removed:
- Gif implementation
This commit is contained in:
mgabdev
2020-08-18 19:22:15 -05:00
parent e21a6ff897
commit 99982c0391
102 changed files with 2540 additions and 3285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/gabsocial/components/modal/display_options_modal.js
View File

@@ -166,14 +166,6 @@ class DisplayOptionsModal extends ImmutablePureComponent {
class ThemeBlock extends React.PureComponent {
static propTypes = {
checked: PropTypes.bool,
onChange: PropTypes.func.isRequired,
title: PropTypes.string,
value: PropTypes.string,
style: PropTypes.object,
}
render() {
const {
checked,
@@ -215,6 +207,14 @@ class ThemeBlock extends React.PureComponent {
}
ThemeBlock.propTypes = {
checked: PropTypes.bool,
onChange: PropTypes.func.isRequired,
title: PropTypes.string,
value: PropTypes.string,
style: PropTypes.object,
}
const messages = defineMessages({
message: { id: 'display_options.message', defaultMessage: 'Display settings affect your Gab account on this browser. These settings are only visible to you.' },
title: { id: 'display_options', defaultMessage: 'Customize your view' },

279
app/javascript/gabsocial/components/modal/gif_picker_modal.js
View File

@@ -1,279 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { defineMessages, injectIntl } from 'react-intl'
import {
fetchGifCategories,
fetchGifResults,
clearGifResults,
setSelectedGif,
changeGifSearchText
} from '../../actions/tenor'
import Block from '../block'
import Button from '../button'
import ColumnIndicator from '../column_indicator'
import Image from '../image'
import Input from '../input'
import Text from '../text'
class GifPickerModal extends React.PureComponent {
state = {
row: 0,
}
componentDidMount() {
this.props.handleFetchCategories()
}
onChange = (value) => {
this.props.handleOnChange(value)
}
onHandleCloseModal = () => {
this.props.handleCloseModal()
}
handleSelectCategory = (category) => {
this.props.handleOnChange(category)
}
handleSelectGifResult = (resultBlock) => {
this.props.handleSelectResult(resultBlock)
}
render() {
const {
intl,
categories,
results,
loading,
error,
searchText,
} = this.props
return (
<div style={{ width: '560px' }}>
<Block>
<div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
<div className={[_s.d, _s.flexGrow1, _s.mr5].join(' ')}>
<Input
onChange={this.onChange}
value={searchText}
prependIcon='search'
placeholder={intl.formatMessage(messages.searchGifs)}
/>
</div>
<Button
backgroundColor='none'
title={intl.formatMessage(messages.close)}
className={_s.mlAuto}
onClick={this.onHandleCloseModal}
color='secondary'
icon='close'
iconSize='10px'
/>
</div>
<div className={[_s.d, _s.minH50VH, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
{
error &&
<ColumnIndicator type='error' />
}
{
(loading && results.length === 0 && categories.length === 0) &&
<ColumnIndicator type='loading' />
}
{
(results.length > 0 || categories.length > 0) &&
<div className={[_s.d, _s.w100PC, _s.h100PC].join(' ')}>
{
results.length === 0 && categories.length > 0 &&
<GifCategoriesCollection categories={categories} handleSelectCategory={this.handleSelectCategory} />
}
{
results.length > 0 &&
<GifResultsCollection results={results} handleSelectGifResult={this.handleSelectGifResult} />
}
</div>
}
</div>
</Block>
</div>
)
}
}
class GifResultsCollectionColumn extends React.PureComponent {
static propTypes = {
results: PropTypes.array.isRequired,
handleSelectGifResult: PropTypes.func.isRequired,
}
onClick = (resultId) => {
this.props.handleSelectGifResult(resultId)
}
render() {
const { results } = this.props
return (
<div className={[_s.d, _s.flexNormal].join(' ')}>
{
results.map((result, i) => (
<button
key={`gif-result-item-${i}`}
onClick={() => this.onClick(result)}
className={[_s.d, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
>
<Image
height={result.media[0].tinygif.dims[1]}
src={result.media[0].tinygif.url}
/>
</button>
))
}
</div>
)
}
}
class GifResultsCollection extends React.PureComponent {
static propTypes = {
results: PropTypes.array.isRequired,
handleSelectGifResult: PropTypes.func.isRequired,
}
render() {
const { results, handleSelectGifResult } = this.props
// : todo :
const count = results.length
const columnIndex = 10
return (
<div className={[_s.d, _s.h100PC, _s.flexRow, _s.w100PC].join(' ')}>
<GifResultsCollectionColumn
results={results.slice(0, columnIndex)}
handleSelectGifResult={handleSelectGifResult}
/>
<GifResultsCollectionColumn
results={results.slice(columnIndex, columnIndex * 2)}
handleSelectGifResult={handleSelectGifResult}
/>
<GifResultsCollectionColumn
results={results.slice(columnIndex * 2, count)}
handleSelectGifResult={handleSelectGifResult}
/>
</div>
)
}
}
class GifCategoriesCollection extends React.PureComponent {
static propTypes = {
categories: PropTypes.array.isRequired,
handleSelectCategory: PropTypes.func.isRequired,
}
onClick = (term) => {
this.props.handleSelectCategory(term)
}
render() {
const { categories } = this.props
return (
<div className={[_s.d, _s.h100PC, _s.w100PC, _s.flexRow, _s.flexWrap].join(' ')}>
{
categories.map((category, i) => (
<button
key={`gif-category-${i}`}
onClick={() => this.onClick(category.searchterm)}
className={[_s.d, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.w50PC].join(' ')}
>
<div className={[_s.d, _s.cursorPointer].join(' ')}>
<Image
height={150}
src={category.image}
/>
<div className={[_s.d, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
<Text color='white' weight='bold' size='extraLarge'>
{category.searchterm}
</Text>
</div>
</div>
</button>
))
}
</div>
)
}
}
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
title: { id: 'pick_gif', defaultMessage: 'Select a GIF' },
searchGifs: { id: 'search_gifs', defaultMessage: 'Search for GIFs' },
})
const mapStateToProps = (state) => ({
categories: state.getIn(['tenor', 'categories']),
suggestions: state.getIn(['tenor', 'suggestions']),
results: state.getIn(['tenor', 'results']),
loading: state.getIn(['tenor', 'loading']),
error: state.getIn(['tenor', 'error']),
searchText: state.getIn(['tenor', 'searchText']),
})
const mapDispatchToProps = (dispatch, { onClose }) => ({
handleCloseModal() {
dispatch(changeGifSearchText(''))
dispatch(clearGifResults())
onClose()
},
handleFetchCategories: () => {
dispatch(fetchGifCategories())
},
handleOnChange: (value) => {
dispatch(changeGifSearchText(value))
if (value.length >= 3) {
dispatch(fetchGifResults())
} else if (value.length === 0) {
dispatch(clearGifResults())
}
},
handleSelectResult: (result) => {
dispatch(setSelectedGif(result))
onClose()
},
// dispatchSubmit: (e) => {
// e.preventDefault();
// dispatch(getGifs());
// },
})
GifPickerModal.propTypes = {
intl: PropTypes.object.isRequired,
handleCloseModal: PropTypes.func.isRequired,
handleFetchCategories: PropTypes.func.isRequired,
handleOnChange: PropTypes.func.isRequired,
handleSelectResult: PropTypes.func.isRequired,
categories: PropTypes.array.isRequired,
results: PropTypes.array.isRequired,
loading: PropTypes.bool,
error: PropTypes.bool,
searchText: PropTypes.string,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GifPickerModal))

48
app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
View File

@@ -1,60 +1,20 @@
import React from 'react'
import PropTypes from 'prop-types'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import Button from '../button'
import Text from '../text'
import ModalLayout from './modal_layout'
class HomeTimelineSettingsModal extends ImmutablePureComponent {
class GroupTimelineSettingsModal extends React.PureComponent {
render() {
const { intl } = this.props
return (
<div>
<Text>
{intl.formatMessage(messages.text)}
</Text>
<Text>
{intl.formatMessage(messages.benefits)}
</Text>
<div className={[_s.d, _s.my10].join(' ')}>
<Text>• Schedule Posts</Text>
<Text>• Get Verified</Text>
<Text>• Create Groups</Text>
<Text>• Larger Video and Image Uploads</Text>
<Text>• Receive the PRO Badge</Text>
<Text>• Remove in-feed promotions</Text>
</div>
<Button
backgroundColor='brand'
color='white'
icon='pro'
href='https://pro.gab.com'
className={_s.jcCenter}
iconClassName={[_s.mr5, _s.cWhite].join(' ')}
>
<Text color='inherit' weight='bold' align='center'>
{intl.formatMessage(messages.title)}
</Text>
</Button>
</div>
<div/>
)
}
}
const messages = defineMessages({
title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
text: { id: 'pro_upgrade_modal.text', defaultMessage: 'Gab is fully funded by people like you. Please consider supporting us on our mission to defend free expression online for all people.' },
benefits: { id: 'pro_upgrade_modal.benefits', defaultMessage: 'Here are just some of the benefits that thousands of GabPRO members receive:' },
})
HomeTimelineSettingsModal.propTypes = {
GroupTimelineSettingsModal.propTypes = {
intl: PropTypes.object.isRequired,
}
export default injectIntl(HomeTimelineSettingsModal)
export default injectIntl(GroupTimelineSettingsModal)

42
app/javascript/gabsocial/components/modal/hotkeys_modal.js
View File

@@ -1,12 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ModalLayout from './modal_layout'
import Text from '../text'
import Heading from '../heading'
class HotkeysModal extends ImmutablePureComponent {
class HotkeysModal extends React.PureComponent {
render() {
const { intl, onClose } = this.props
@@ -89,29 +88,22 @@ class HotkeysModal extends ImmutablePureComponent {
}
class HotKeysModalRow extends React.PureComponent {
render() {
const { hotkey, action } = this.props
return (
<tr>
<td>
<kbd>
<Text size='small'>
{hotkey}
</Text>
</kbd>
</td>
<td>
<Text size='small'>
{action}
</Text>
</td>
</tr>
)
}
}
const HotKeysModalRow = ({ hotkey, action }) => (
<tr>
<td>
<kbd>
<Text size='small'>
{hotkey}
</Text>
</kbd>
</td>
<td>
<Text size='small'>
{action}
</Text>
</td>
</tr>
)
HotKeysModalRow.propTypes = {
hotkey: PropTypes.string.isRequired,

3
app/javascript/gabsocial/components/modal/list_create_modal.js
View File

@@ -1,11 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ModalLayout from './modal_layout'
import ListCreate from '../../features/list_create'
class ListCreateModal extends ImmutablePureComponent {
class ListCreateModal extends React.PureComponent {
render() {
const { intl, onClose } = this.props

3
app/javascript/gabsocial/components/modal/list_editor_modal.js
View File

@@ -1,12 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ModalLayout from './modal_layout'
import { ListEdit } from '../../features/ui/util/async_components'
import WrappedBundle from '../../features/ui/util/wrapped_bundle'
class ListEditorModal extends ImmutablePureComponent {
class ListEditorModal extends React.PureComponent {
render() {
const { intl, onClose, id } = this.props

3
app/javascript/gabsocial/components/modal/modal_base.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'
import { injectIntl, defineMessages } from 'react-intl'
import { getWindowDimension } from '../../utils/is_mobile'
import { openModal } from '../../actions/modal'
import { cancelReplyCompose } from '../../actions/compose'
@@ -9,7 +9,6 @@ import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../../constants'
import Responsive from '../../features/ui/util/responsive_component'
const initialState = getWindowDimension()

3
app/javascript/gabsocial/components/modal/modal_root.js
View File

@@ -17,7 +17,6 @@ import {
MODAL_EDIT_PROFILE,
MODAL_EDIT_SHORTCUTS,
MODAL_EMBED,
MODAL_GIF_PICKER,
MODAL_GROUP_CREATE,
MODAL_GROUP_DELETE,
MODAL_HASHTAG_TIMELINE_SETTINGS,
@@ -49,7 +48,6 @@ import {
EditProfileModal,
EditShortcutsModal,
EmbedModal,
GifPickerModal,
GroupCreateModal,
GroupDeleteModal,
GroupMembersModal,
@@ -84,7 +82,6 @@ MODAL_COMPONENTS[MODAL_DISPLAY_OPTIONS] = DisplayOptionsModal
MODAL_COMPONENTS[MODAL_EDIT_SHORTCUTS] = EditShortcutsModal
MODAL_COMPONENTS[MODAL_EDIT_PROFILE] = EditProfileModal
MODAL_COMPONENTS[MODAL_EMBED] = EmbedModal
MODAL_COMPONENTS[MODAL_GIF_PICKER] = GifPickerModal
MODAL_COMPONENTS[MODAL_GROUP_CREATE] = GroupCreateModal
MODAL_COMPONENTS[MODAL_GROUP_DELETE] = GroupDeleteModal
MODAL_COMPONENTS[MODAL_HASHTAG_TIMELINE_SETTINGS] = HashtagTimelineSettingsModal

10
app/javascript/gabsocial/components/modal/mute_modal.js
View File

@@ -41,13 +41,9 @@ const messages = defineMessages({
mute: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
})
const mapStateToProps = (state, { accountId }) => {
const getAccount = makeGetAccount()
return {
account: getAccount(state, accountId),
}
}
const mapStateToProps = (state, { accountId }) => ({
account: makeGetAccount()(state, accountId),
})
const mapDispatchToProps = (dispatch) => ({
onConfirm(account, notifications) {

3
app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
View File

@@ -2,7 +2,6 @@ import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import {
URL_GAB_PRO,
DEFAULT_THEME,
@@ -13,7 +12,7 @@ import Icon from '../icon'
import Image from '../image'
import ModalLayout from './modal_layout'
class ProUpgradeModal extends ImmutablePureComponent {
class ProUpgradeModal extends React.PureComponent {
render() {
const {

3
app/javascript/gabsocial/components/modal/unauthorized_modal.js
View File

@@ -1,12 +1,11 @@
import React from 'react'
import PropTypes from 'prop-types'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ModalLayout from './modal_layout'
import Text from '../text'
import Button from '../button'
class UnauthorizedModal extends ImmutablePureComponent {
class UnauthorizedModal extends React.PureComponent {
render() {
const { intl, onClose } = this.props