many new

2020-06-24 18:56:24 +03:00
parent 9447ee613b
commit 5d4972145b
119 changed files with 5412 additions and 5086 deletions
@@ -0,0 +1,111 @@
+import React from "react";
+import './Navbar.sass'
+import {connect} from "react-redux";
+import {userLogout} from "../../api/users";
+import {Link} from "react-router-dom";
+import {logout, setModal} from "../../store/actions";
+import {hasAccessToAdminPanel} from "../../utils";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faBars} from '@fortawesome/free-solid-svg-icons';
+import RegisterModal from "../Modals/RegisterModal";
+import LoginModal from "../Modals/LoginModal";
+
+type Props = {
+    setModal: SetModalType
+    logout: () => void
+    currentUser: UserType
+};
+
+type State = {
+    expand: boolean
+    width: number
+}
+
+class Navbar extends React.Component<Props, State> {
+    state: State = {
+        expand: false, width: window.screen.width
+    }
+
+    logout = () => {
+        this.props.logout();
+        localStorage.removeItem('user');
+        userLogout().then();
+    };
+
+    changeSize = () => {
+        this.setState({ expand: !this.state.expand })
+    }
+
+    componentDidMount() {
+        window.addEventListener("resize", () => {
+            if(this.state.width !== window.screen.width)
+                this.setState({ width: window.screen.width });
+        })
+    }
+
+    render() {
+        const { currentUser, setModal } = this.props;
+        const { expand } = this.state;
+
+        const isMinimized = window.screen.width <= 1000;
+
+        const links = (
+            <div className="Header__Links">
+                <Link to="/" className={'Header_Button'}>
+                    Главная
+                </Link>
+                <Link to="/novels" className={'Header_Button'}>
+                    Новеллы
+                </Link>
+                <Link to="/users" className={'Header_Button'}>
+                    Пользователи
+                </Link>
+                {expand && isMinimized && (
+                    <div onClick={this.changeSize} className={'Header_Button'} style={{ position: "absolute", right: 0, margin: '.5rem' }}>X</div>
+                )}
+            </div>
+        );
+
+        return (
+            <nav className={`Header ${expand ? 'Expanded' : 'Minimized'}`}>
+                {expand || !isMinimized ? links : (
+                    <div className="Header__Links">
+                        <div onClick={this.changeSize} className={'Header_Button'}>
+                            <FontAwesomeIcon icon={faBars}/>
+                        </div>
+                    </div>
+                )}
+                {currentUser &&
+                    (<div className={'Header__User'}>
+                        {currentUser.authorized ? (<>
+                            <Link to={`/user/${currentUser.id}`} className="Header__User_Profile">
+                                <div className={'Header__User_Avatar'} style={{ backgroundImage: `url(${currentUser.avatar}?s=40&t=${new Date().getTime()})` }}/>
+                                <div>{this.props.currentUser.username}</div>
+                            </Link>
+                            {currentUser.group && hasAccessToAdminPanel(currentUser) && (
+                                <Link to={'/kawaii__neko'} className={'Header_Button'}>
+                                    Админ-панель
+                                </Link>
+                            )}
+                            <Link className="Header_Button" to={`/user/${currentUser.id}/settings`}>Настройки</Link>
+                            <div className={'Header_Button'} onClick={this.logout}>Выйти</div>
+                        </>) : (<>
+                            <div className={'Header_Button'} onClick={() => setModal(<RegisterModal/>)}>Регистрация</div>
+                            <div className={'Header_Button'} onClick={() => setModal(<LoginModal/>)}>Войти</div>
+                        </>)}
+                    </div>)
+                }
+            </nav>
+        )
+    }
+}
+
+export default connect(
+    (state: StoreState) => ({
+        currentUser: state.currentUser
+    }),
+    dispatch => ({
+        logout: () => dispatch(logout()),
+        setModal: (modal: React.ReactNode | null) => dispatch(setModal(modal))
+    })
+)(Navbar);