import React from 'react'
import * as app from 'app'
import * as antd from 'antd'
import * as Icons from 'components/Icons'
import styles from './index.less'
import classnames from 'classnames'
import reactable from 'reactablejs'
import {
__sec,
__pri,
__trendings,
__searchBar,
__suggestions,
__priPost,
__secComments,
__priSearch,
} from './components'
export const SwapMode = {
loose_focus: () => {
OverlayLayoutComponent.loose_focus()
},
close: () => {
OverlayLayoutComponent.Swapper.close()
},
openFragment: (fragment)=>{
if (!fragment) return false
return OverlayLayoutComponent.setState({
rd__sec: fragment,
__sec_active: true,
})
},
openPost: async (id, content) => {
if (!id) return false
let tmp;
let promise = new Promise((res, rej) => {
const payload = { post_id: id }
app.comty_post.get((err, response) => {
try {
res(JSON.parse(response)['post_data'])
} catch (error) {
console.log(error)
}
}, payload)
});
if (!content){
tmp = await promise
}
if (content){
tmp = content
}
const pdata = <__priPost isMobile={OverlayLayoutComponent.props.isMobile} payload={tmp}/>
return OverlayLayoutComponent.setState({
rd__pri: pdata,
__pri_full: true
})
},
openComments: async (id, content) => {
if (!id) return false
let tmp;
let promise = new Promise((res, rej) => {
const payload = { post_id: id }
app.comty_post.get((err, response) => {
try {
res(JSON.parse(response)['post_comments'])
}catch (error) {
console.log(error)
}
}, payload)
});
if (!content){
tmp = await promise
}
if (content){
tmp = content
}
const pdata = <__secComments post_id={id} payload={tmp} />
return OverlayLayoutComponent.setState({
rd__sec: pdata,
__sec_active: true,
})
},
openSearch: async (id, content) => {
if (!id) return false
let tmp;
let promise = new Promise((res, rej) => {
const payload = { key: id }
app.comty_search.keywords((err, response) => {
res(response)
}, payload)
});
if (!content){
tmp = await promise;
}
if (content){
tmp = content;
}
const pdata =
Results of {id || '... nothing ?'}
<__priSearch payload={tmp} />
return OverlayLayoutComponent.setState({
rd__pri: pdata,
__pri_half: true,
})
},
}
export default class Overlay extends React.PureComponent {
constructor(props) {
super(props),
(window.OverlayLayoutComponent = this),
(this.state = {
loading: true,
gen_data: null,
// Lays
rd__pri: null,
rd__sec: null,
__pri_full: false,
__pri_half: false,
__sec_active: false,
__sec_full: false,
})
this.setWrapperRef = this.setWrapperRef.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
}
Swapper = {
close: () => {
this.setState({
rd__pri: null,
rd__sec: null,
__pri_full: false,
__pri_half: false,
__sec_active: false,
__sec_full: false,
})
},
}
handle_Exit(event) {
if (event.keyCode === 27) {
SwapMode.close()
}
}
loose_focus(){
if (this.isOpen()) {
SwapMode.close()
}
}
handle_genData() {
app.comty_data.general_data((err, res) => {
if (err) return false
try {
const notification_data = JSON.parse(res)['notifications']
const trending_hashtag = JSON.parse(res)['trending_hashtag']
this.setState({
loading: false,
gen_data: res,
notification_data: notification_data,
trending_hashtag: trending_hashtag,
})
} catch (error) {
console.log(error)
return null
}
})
}
isOpen() {
if (
this.state.__pri_full ||
this.state.__pri_half ||
this.state.__sec_active ||
this.state.__sec_full
)
return true
return false
}
componentDidMount() {
this.handle_genData()
if(this.props.isMobile){
window.addEventListener('popstate', function(event) {
SwapMode.close()
}, false);
}
}
componentWillUnmount() {
if(this.props.isMobile){
document.removeEventListener('popstate', null)
}
document.removeEventListener('keydown', this.handle_Exit, false)
}
componentDidUpdate() {
if (this.isOpen()) {
document.addEventListener('keydown', this.handle_Exit, false)
document.addEventListener('mousedown', this.handleClickOutside);
} else {
document.removeEventListener('mousedown', this.handleClickOutside);
}
}
/**
* Set the wrapper ref
*/
setWrapperRef(node) {
this.wrapperRef = node;
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
SwapMode.close()
}
}
renderTarget(target) {
try {
switch (target) {
case '__pri': {
const fragment = this.state.rd__pri
if (!fragment && !this.props.isMobile) {
return {this.__main()}
}
return {fragment}
}
case '__sec': {
const fragment = this.state.rd__sec
return <>
{this.props.isMobile? : null}
{fragment}
>
}
default:
return Invalid Render Target
}
} catch (error) {
console.log(error)
return null
}
}
renderExit(target){
if (!target) return null
const { rd__pri, rd__sec } = this.state
const btn = } onClick={() => this.Swapper.close()}> Back
if (this.isOpen()) {
switch (target) {
case '__pri':{
if (rd__pri&&rd__sec) {
return btn
}
if (!rd__sec) {
return btn
}
return null
}
case '__sec':{
if (!rd__pri && this.props.isMobile) {
return null
}
if (!rd__pri) {
return btn
}
return null
}
default:
return null
}
}
return null
}
__main(){
const fragment = this.state.rd__pr
if (!fragment && !this.props.isMobile) {
return (
<__searchBar />
<__trendings data={this.state.trending_hashtag} />
<__suggestions />
)
}
}
render() {
const { userData, isMobile } = this.props
const __sec_functs = (this.Swapper)
if (!this.state.loading)
return (
<>
<__pri render={this.renderTarget('__pri')} isMobile={isMobile} functs={__sec_functs} type={this.state.__pri_full? "full_open" : this.state.__pri_half? "half" : null} />
<__sec render={this.renderTarget('__sec')} isMobile={isMobile} functs={__sec_functs} type={this.state.__sec_full? "full_open" : this.state.__sec_active? "active" : null} />
>
)
return null
}
}