update: Postcreator improvemt

src/components/Icons/custom.js

@@ -1,8 +1 @@
 export const VerifiedBadge = () => (<svg xmlns="http://www.w3.org/2000/svg" fill="#55acee" width="15" height="15" viewBox="0 0 24 24"> <path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12m-13 5l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></svg>)
-export const Patreon = () => (<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 100 96">
-<g fill="currentColor" fillRule="evenodd">
-  <path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
-  <polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
-</g>
-</svg>
-)

src/components/Layout/ControlBar/index.js

@@ -1,60 +0,0 @@
-import React from 'react'
-import * as antd from 'antd'
-import styles from './index.less'
-import classnames from 'classnames'
-
-import Radium, { StyleRoot } from 'radium'
-import { fadeInUp, bounceOutDown } from 'react-animations'
-const animationStyles = {
-  fadeInUp: {
-    animation: 'x 0.5s',
-    animationName: Radium.keyframes(fadeInUp, 'fadeInUp'),
-  },
-  bounceOutDown: {
-    animation: 'x 1s',
-    animationName: Radium.keyframes(bounceOutDown, 'bounceOutDown'),
-  },
-}
-
-export const ControlController = {
-  set: (e) => {
-    if (!window.ControlComponent.state.active) {
-      window.ControlComponent.setState({ fadein: true })
-    }
-    window.ControlComponent.setState({ active: true, render: e })
-  },
-  close: () => {
-    window.ControlComponent.setState({ fadein: false })
-    setTimeout(() => window.ControlComponent.setState({ active: false, render: null }), 1000)
-  }
-}
-
-export default class Control extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      active: false,
-      fadein: true,
-    };
-    window.ControlComponent = this;
-  }
-
-
-  render() {
-    const { render, active, fadein } = this.state
-    const isMobile = this.props.mobile? this.props.mobile : false
-    return active ? (
-      <StyleRoot>
-        <div
-          style={
-            fadein ? animationStyles.fadeInUp : animationStyles.bounceOutDown
-          }
-        >
-          <antd.Card bordered={false} className={classnames(styles.ControlCard, {[styles.mobile]: isMobile})} >
-            <React.Fragment>{render}</React.Fragment>
-          </antd.Card>
-        </div>
-      </StyleRoot>
-    ) : null
-  }
-}

src/components/Layout/ControlBar/index.less

@@ -1,31 +0,0 @@
-@import '~theme/index.less';
-
-.ControlCard {
-  overflow: hidden;
-  background-color: rgba(0, 0, 0, 0.1);
-  width: auto;
-  max-width: 60%;
-  padding: 0 5px;
-  margin: 0 0 0 50%;
-  height: auto;
-  position: absolute;
-  z-index: 10000;
-  bottom: 0;
-  text-align: center;
-
-  &.mobile{
-    top:0;
-    bottom: unset;
-  }
-  
-  :global {
-    .ant-card-body {
-      padding: 5px;
-    }
-
-    .ant-btn {
-      background-color: rgba(0, 0, 0, 0.1);
-      margin: 3px;
-    }
-  }
-}

src/components/Layout/Sider/default/index.js

@@ -37,7 +37,7 @@ export default class Sider_Default extends React.PureComponent {
           width="175px"
           style={{ flex:'unset', maxWidth: 'unset', minWidth: '175px', width: '100%'}}
         >
-          <div className={styles.left_sider_brandholder}>
+          <div className={styles.left_sider_header}>
             <img
               onClick={() => handleClickMenu({key: ''})}
               src={logo}
@@ -54,7 +54,7 @@ export default class Sider_Default extends React.PureComponent {
                 {this.renderMenus(this.state.menus, "top")}
               </antd.Menu>
 
-              <div className={styles.something_thats_pulling_me_down}>
+              <div className={styles.left_sider_footer}>
                 <antd.Menu
                   selectable={false}
                   className={styles.left_sider_menuItems}

src/components/Layout/Sider/default/index.less

@@ -69,7 +69,7 @@
 }
 
 
-.left_sider_brandholder {
+.left_sider_header {
   cursor: pointer;
 
   img{
@@ -80,7 +80,7 @@
   }
 }
 
-.something_thats_pulling_me_down {
+.left_sider_footer {
   margin: 0 0 12px;
   :global {
     text-align: center;

src/components/Layout/index.js

@@ -1,6 +1,5 @@
 import Sider from './Sider'
-import Control from './ControlBar'
 import Overlay from './Overlay'
 import WindowNavbar from './WindowNavbar'
 
-export { Sider, Control, Overlay, WindowNavbar }
+export { Sider, Overlay, WindowNavbar }

src/components/PostCreator/index.js

@@ -1,12 +1,44 @@
 import React from 'react'
 import * as antd from 'antd'
-import * as core from 'core'
+import { imageToBase64 } from 'core'
 import * as Icons from 'components/Icons'
 import styles from './index.less'
 import { connect } from 'umi'
 import { stricts } from 'config'
 import { settings, newSetting } from 'core/libs/settings'
-import $ from 'jquery'
+
+const PrivacyList = [
+  {
+    id: 0,
+    type: "any",
+    icon: "Globe",
+    decoratorText: "Share with everyone"
+  },
+  {
+    id: 1,
+    type: "only_followers",
+    icon: "UserCheck",
+    decoratorText: "Share with people I follow"
+  },
+  {
+    id: 2,
+    type: "only_follow",
+    icon: "Users",
+    decoratorText: "Share with people follow me"
+  },
+  {
+    id: 3,
+    type: "private",
+    icon: "Shield",
+    decoratorText: "Dont share, only me"
+  },
+  {
+    id: 4,
+    type: "anon",
+    icon: "EyeOff",
+    decoratorText: "Anonymous"
+  }
+]
 
 @connect(({ app }) => ({ app }))
 class PostCreator extends React.PureComponent {
@@ -23,7 +55,7 @@ class PostCreator extends React.PureComponent {
       rawText: '',
       posting: false,
       postingResult: false,
-      shareWith: 'any',
+      privacity: 0,
 
       uploader: false,
       uploaderFile: null,
@@ -47,7 +79,7 @@ class PostCreator extends React.PureComponent {
     if (info.file.status === 'done') {
       this.setState({ uploaderFileOrigin: info.file.originFileObj, uploader: false })
 
-      core.getBase64(info.file.originFileObj, fileURL => {
+      imageToBase64(info.file.originFileObj, fileURL => {
         this.setState({ uploaderFile: fileURL, loading: false })
       })
     }
@@ -102,7 +134,7 @@ class PostCreator extends React.PureComponent {
 
   componentDidMount() {
     // Validate for render
-    if (this.props.app.userData) {
+    if (this.props.app.session_data) {
       this.setState({renderValid: true})
     }
 
@@ -116,7 +148,7 @@ class PostCreator extends React.PureComponent {
     //       let a;
     //       a = item.getAsFile()
     //       _this.setState({ uploaderFileOrigin: a })
-    //       core.ReadFileAsB64(a, res => {
+    //       ReadFileAsB64(a, res => {
     //         _this.setState({ uploaderFile: res })
     //       })
     //     } else {
@@ -142,57 +174,28 @@ class PostCreator extends React.PureComponent {
     return isUploadedFile || isTypedSomething
   }
 
+  renderShareOptions = () => {
+    return PrivacyList.map(e => {
+      if (!e) return null
+      return(
+        <antd.Menu.Item key={e.id}>
+          {e.icon? React.createElement(Icons[e.icon]) : null} {e.decoratorText? e.decoratorText : "Bruh"}
+        </antd.Menu.Item>
+      )
+    })
+  }
+  
   render() {
-    const { userData } = this.props.app
+    const userData = this.props.app.session_data
     const { textLenght, uploaderFile } = this.state
 
-    const GetPostPrivacy = {
-      bool: (e) => {
-        switch (e) {
-          case 'any':
-              return '0'
-          case 'only_followers':
-              return '1'
-          case 'only_follow':
-              return '2'
-          case 'private':
-              return '3'
-          default:
-              return '0'
-        }
-      },
-      decorator: (e) => {
-          switch (e) {
-              case 'any':
-                  return  <span><Icons.GlobalOutlined /> Share with everyone</span>
-              case 'only_follow':
-                  return <span><Icons.TeamOutlined /> Share with people I follow</span>
-              case 'only_followers':
-                  return <span><Icons.UsergroupAddOutlined /> Share with people follow me</span> 
-              case 'private':
-                  return <span><Icons.EyeInvisibleOutlined /> Dont share, only me</span>
-              default:
-                  return <span>Unknown</span>
-          }
-      },
-    }
-
-    const shareOptionsMenu = (
-      <antd.Menu onClick={key => this.setState({ shareWith: key })}>
-        <antd.Menu.Item key="any">
-          {GetPostPrivacy.decorator('any')}
-        </antd.Menu.Item>
-        <antd.Menu.Item key="only_follow">
-          {GetPostPrivacy.decorator('only_follow')}
-        </antd.Menu.Item>
-        <antd.Menu.Item key="only_followers">
-          {GetPostPrivacy.decorator('only_followers')}
-        </antd.Menu.Item>
-        <antd.Menu.Item key="private">
-          {GetPostPrivacy.decorator('private')}
-        </antd.Menu.Item>
+    const ShareOptionsMenu = () => {
+      return(
+        <antd.Menu onClick={e => this.setState({ privacity: e.key })}>
+          {this.renderShareOptions()}
         </antd.Menu>
       )
+    }
 
     const PostCreator_Uploader = () => {
       return(
@@ -280,20 +283,18 @@ class PostCreator extends React.PureComponent {
           >
 
             {this.state.uploader ? (
-              <Icons.Cancel />
+              <Icons.xCicle style={{ margin: 0 }} />
             ) : (
-              <Icons.AddCircle />
+              <Icons.Plus style={{ margin: 0 }} />
             )}
           </antd.Button>
           <antd.Button type="ghost" onClick={() => null}>
-            <Icons.Tune />
+            <Icons.Sliders style={{ margin: 0 }} />
           </antd.Button>
-          <antd.Dropdown overlay={shareOptionsMenu}>
-            <a
-              className={styles.shareWith}
-              onClick={e => e.preventDefault()}
-            >
-              {GetPostPrivacy.decorator(this.state.shareWith)}
+          <antd.Dropdown overlay={ShareOptionsMenu}>
+            <a className={styles.shareWith} onClick={e => e.preventDefault()}>
+              {PrivacyList[this.state.privacity].icon? React.createElement(Icons[PrivacyList[this.state.privacity].icon]) : null}
+              {PrivacyList[this.state.privacity].decoratorText? PrivacyList[this.state.privacity].decoratorText : "Bruh"}
             </a>
           </antd.Dropdown>
         </div>
@@ -301,19 +302,11 @@ class PostCreator extends React.PureComponent {
      )
     }
 
-    const PostCreator_Invalid = () => {
-      return(
-        <div>
-          <h3>This component cant be displayed!</h3>
-          <antd.Skeleton active />
-        </div>
-      )
-    }
-
+    if(!this.state.renderValid) return null
     return (
         <div className={styles.cardWrapper}>
           <antd.Card bordered="false">
-            { this.state.renderValid? <PostCreatorComponent /> : <PostCreator_Invalid /> }
+            <PostCreatorComponent />
           </antd.Card>
         </div>
       )

src/components/index.js

@@ -8,7 +8,7 @@ import * as Feather from 'feather-reactjs'
 import Invalid from './Invalid'
 
 // App Layout Components
-import * as MyLayout from './Layout/index.js'
+import * as AppLayout from './Layout/index.js'
 import PageTransition from './PageTransition'
 
 // User Components
@@ -19,13 +19,13 @@ import PostCreator from './PostCreator'
 
 // Mix & Export all
 export {
+  AppLayout,
   Invalid,
   Icons,
   Feather,
   About,
   MediaPlayer,
   PageTransition,
-  MyLayout,
   Loader,
   PostCreator
 }

src/layouts/PrimaryLayout.js

@@ -4,7 +4,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {withRouter, connect} from 'umi'
 import {
-  MyLayout,
+  AppLayout,
 } from 'components'
 import { enquireScreen, unenquireScreen } from 'enquire-js'
 import store from 'store'
@@ -17,7 +17,7 @@ import * as antd from 'antd'
 import styles from './PrimaryLayout.less'
 
 const { Content } = antd.Layout
-const { Sider, Control, Overlay } = MyLayout
+const { Sider, Overlay } = AppLayout
 const isActive = (key) => { return key? key.active : false }
 
 @withRouter
@@ -58,6 +58,8 @@ class PrimaryLayout extends React.Component {
     const { collapsed, isMobile } = this.state
     const { onCollapseChange } = this
     const currentTheme = theme.get()
+    const app_theme = isActive(currentTheme["darkmode"])? "dark" : null
+
     const breakpoint = {
       xs: '480px',
       sm: '576px',
@@ -72,19 +74,18 @@ class PrimaryLayout extends React.Component {
       isMobile,
       collapsed,
       onCollapseChange,
-      theme: isActive(currentTheme["darkmode"])? "dark" : null
+      app_theme
     }
 
     const OverlayProps = {
       breakpoint,
       isMobile,
-      theme: isActive(currentTheme["darkmode"])? "dark" : null
+      app_theme
     }
    
     window.DarkMode = isActive(currentTheme["darkmode"])? true : false
     return (
       <React.Fragment >
-          <Control />
           {isActive(currentTheme['backgroundImage'])
           ?<div style={{ 
                   backgroundImage: `url(${currentTheme.backgroundImage.src})`,

src/pages/settings/components/base.js

@@ -1,6 +1,5 @@
 import React, { Component, Fragment } from 'react'
 import { List, Switch, Button, notification, InputNumber } from 'antd'
-import { control } from 'components/layout/ControlBar'
 
 import verbosity from 'core/libs/verbosity'
 import * as Icons from 'components/Icons'