How bad/good is my code, and in what places?

Question

JavaScript

Goodnight. Need feedback on the code. Please tell me if I'm moving in the right direction? Thank you.

import {Link} from "react-router-dom";
import React from "react";
import { navigationItems } from '../config/navigationConfig';
import '../css/lowLvlComponents/navigation.css';

export default function GetNavigation() {
    return SelectNavigation(navigationItems);
}

const SelectNavigation = (menuItems) => window.innerWidth < 1000 && window.innerWidth > 700 ? getNavigationTablet(menuItems) :
           window.innerWidth < 700 ? getNavigationMobile(menuItems) : getNavigationPC(menuItems);

function getNavigationPC(navItems) {

    return (
        <SplitUpNavigation
            navItems={navItems}
            itemID={8}
            itemClassName={'pc-list'}
            itemTitle={'больше'}
            itemOnClick={false}
            itemIcon={false}
        />
    )

}

function getNavigationTablet(navItems) {

    return (
        <SplitUpNavigation
            navItems={navItems}
            itemID={5}
            itemClassName={'tablet-list'}
            itemTitle={'больше'}
            itemOnClick={true}
            itemIcon={['fas fa-arrow-down', 'fas fa-arrow-up']}
        />
    )

}

function getNavigationMobile(navItems) {

    return (
        <SplitUpNavigation
            navItems={navItems}
            itemID={1}
            itemClassName={'mobile-list'}
            itemTitle={''}
            itemOnClick={true}
            itemIcon={['fas fa-align-justify', 'fas fa-times']}
        />
    )

}

function SplitUpNavigation({navItems, itemID, itemClassName, itemTitle, itemOnClick, itemIcon}) {

    let items = navItems;

    itemIcon = itemIcon instanceof Array ? itemIcon : [false, false];

    itemOnClick = itemOnClick ?
        (function() {

            let state = navItems.find(item => item.id === itemID).state = !navItems.find(item => item.id === itemID).state;

            !state ?
                document.querySelector('li .icon').setAttribute('class', `icon ${itemIcon[0] ? itemIcon[0] : ''}`) :
                document.querySelector('li .icon').setAttribute('class', `icon ${itemIcon[1] ? itemIcon[1] : ''}`);

            !state ?
                document.querySelector(`.${itemClassName} + ul`).style.display = 'none' :
                document.querySelector(`.${itemClassName} + ul`).style.display = 'flex';

        }) : null;

    navItems = navItems.slice(0, itemID-1);

    navItems.push(
        {
            id: itemID,
            title: itemTitle,
            children: [],
            class: itemClassName,
            classIcon: `icon ${itemIcon[0] ? itemIcon[0] : ''}`,
            state: false,
            onClick: itemOnClick
        }
    );

    navItems.find(item => item.id === itemID).children = items.slice(itemID-1, items.length);

    return (
        <nav>
            <Navigation items={navItems}/>
        </nav>
    )

}

const Navigation = ({ items }) =>
    items instanceof Array && items.length
        ? <ul>
            {items.map(n => (
                <li key={n.id}>
                    <Link to='/' className={n.class} onClick={n.onClick}><div className={n.classIcon} />{n.title}</Link>
                    <Navigation items={n.children} />
                </li>
            ))}
        </ul>
        : null;

Answer 1

no comments