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 } }