at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,155 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import Categories from './Categories'
+import Filter from './Filter'
+import DeletePopup from './DeletePopup'
+import RenamePopup from './RenamePopup'
+import AddCategoryPopup from './AddCategoryPopup'
+import AddClippingsFeedPopup from './AddClippingsFeedPopup'
+import LoadersAdvanced from '../../common/Loader/Loader'
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
+import PerfectScrollbar from 'react-perfect-scrollbar'
+import HeaderLogo from '../AppHeader/HeaderLogo'
+
+export class Sidebar extends React.Component {
+  static propTypes = {
+    actions: PropTypes.object.isRequired,
+    themeOptions: PropTypes.object.isRequired,
+    backgroundColor: PropTypes.string,
+    backgroundImage: PropTypes.any,
+    backgroundImageOpacity: PropTypes.any,
+    enableBackgroundImage: PropTypes.any,
+    enableMobileMenu: PropTypes.any,
+    enableSidebarShadow: PropTypes.any,
+    setEnableMobileMenu: PropTypes.func,
+    t: PropTypes.func,
+    sidebarState: PropTypes.object.isRequired
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      sidebarAnimationDisabled: true,
+      activeSearch: false
+    }
+  }
+
+  toggleMobileSidebar = () => {
+    let { enableMobileMenu, setEnableMobileMenu } = this.props
+    setEnableMobileMenu(!enableMobileMenu)
+  }
+
+  componentDidMount = () => {
+    this.props.actions.getSidebarCategories()
+  }
+
+  activeSearchFunc = () => {
+    this.setState({ activeSearch: !this.state.activeSearch })
+  }
+
+  render () {
+    let {
+      backgroundColor,
+      enableBackgroundImage,
+      enableSidebarShadow,
+      backgroundImage,
+      backgroundImageOpacity
+    } = this.props.themeOptions
+
+    const { sidebarState, actions } = this.props
+
+    return (
+      <Fragment>
+        <div
+          className="sidebar-mobile-overlay"
+          onClick={this.toggleMobileSidebar}
+        />
+        <CSSTransitionGroup
+          component="div"
+          className={cx('app-sidebar', backgroundColor, {
+            'sidebar-shadow': enableSidebarShadow
+          })}
+          transitionName="SidebarAnimation"
+          transitionAppear
+          transitionAppearTimeout={1500}
+          transitionEnter={false}
+          transitionLeave={false}
+        >
+          <HeaderLogo />
+          {!sidebarState.areCategoriesLoaded && <LoadersAdvanced />}
+          <PerfectScrollbar>
+            <div className="app-sidebar__inner mt-3">
+              <div className="vertical-nav-menu" data-tour="left-panel">
+                <div className="metismenu-container">
+                  <Filter
+                    t={this.props.t}
+                    categories={sidebarState.categories}
+                    areFeedsFiltered={sidebarState.areFeedsFiltered}
+                    setFilteredCategories={actions.setFilteredCategories}
+                    clearFilteredCategories={actions.clearFilteredCategories}
+                  />
+
+                  <Categories
+                    actions={actions}
+                    areCategoriesLoaded={sidebarState.areCategoriesLoaded}
+                    areFeedsFiltered={sidebarState.areFeedsFiltered}
+                    categories={sidebarState.categories}
+                    filteredCategories={sidebarState.filteredCategories}
+                  />
+                </div>
+
+                {sidebarState.popupVisible.delete && (
+                  <DeletePopup
+                    hideDeletePopup={actions.hideDeletePopup}
+                    deleteFeed={actions.deleteFeed}
+                    deleteCategory={actions.deleteCategory}
+                    itemToDelete={sidebarState.popupItems.delete}
+                  />
+                )}
+
+                {sidebarState.popupVisible.rename && (
+                  <RenamePopup
+                    addAlert={actions.addAlert}
+                    hideRenamePopup={actions.hideRenamePopup}
+                    renameFeed={actions.renameFeed}
+                    renameCategory={actions.renameCategory}
+                    itemToRename={sidebarState.popupItems.rename}
+                  />
+                )}
+
+                {sidebarState.popupVisible.addCategory && (
+                  <AddCategoryPopup
+                    hideAddCategoryPopup={actions.hideAddCategoryPopup}
+                    addCategory={actions.addCategory}
+                    parentId={sidebarState.popupItems.addCategory.parentId}
+                  />
+                )}
+
+                {sidebarState.popupVisible.addClippingsFeed && (
+                  <AddClippingsFeedPopup
+                    parentId={sidebarState.popupItems.addClippingsFeed.parentId}
+                    hidePopup={actions.hideAddClippingsFeedPopup}
+                    addClippingsFeed={actions.addClippingsFeed}
+                    addAlert={actions.addAlert}
+                    categories={sidebarState.categories}
+                  />
+                )}
+              </div>
+            </div>
+          </PerfectScrollbar>
+          <div
+            className={cx('app-sidebar-bg', backgroundImageOpacity)}
+            style={{
+              backgroundImage: enableBackgroundImage
+                ? 'url(' + backgroundImage + ')'
+                : null
+            }}
+          ></div>
+        </CSSTransitionGroup>
+      </Fragment>
+    )
+  }
+}
+
+export default React.memo(Sidebar)