anamnesis/src/components/category-details/CategoryDetails.tsx

import React, { useState } from "react";
import styles from './CategoryDetails.module.scss';
import { useLocation } from 'react-router';
import queryString from 'query-string';
import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg';
import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';
import { ReactComponent as ComposeIcon } from '../../assets/icons/compose.svg';
import { ReactComponent as ExportLine } from '../../assets/icons/export-line.svg';

import { CircularProgressbar } from "react-circular-progressbar";
import { NavLink } from "react-router-dom";
import { IShelf } from "../../structure/shelf";
import { useHistory } from "react-router-dom";
import { userProfileData } from "../../App";
import { PopoverOptions } from "../popover-options/PopoverOptions";

export const CategoryDetails: React.FC = () => {
    const location = useLocation();
    const category_id: any = queryString.parse(location.pathname)['/category-details/category_id'];
    const shelfCount: number = userProfileData.categories[category_id].shelves.length;
    const [shelfResult, setShelfResult] = useState<Array<IShelf>>(userProfileData.categories[category_id].shelves);
    const history = useHistory();    

    const searchShelf = (text: string) => {
        if (text.length > 0) {
            let result = userProfileData.categories[category_id].shelves.filter(shelf => {
                return shelf.name.toLowerCase().includes(text.toLowerCase());
            });
    
            setShelfResult(result);
        } else {
            setShelfResult(userProfileData.categories[category_id].shelves);
        }
    }

    return <section className="modalPage">
        <header className={styles.navHeader}>
            <button onClick={() => window.history.back()}>
                <ChevronLeft />
            </button>
            
            <h5> Shelves </h5>

            <figure>
                {/* eslint-disable-next-line */}
                <img src={ userProfileData.image } alt="profile-image" />
            </figure>            
        </header>

        <header className={styles.tabHeading}>
            <div className={styles.icon}>
                { userProfileData.categories[category_id].icon }
            </div>
            <div className={styles.headingDetails}>
                <h4> { userProfileData.categories[category_id].name } </h4>
                <p> { shelfCount } { shelfCount > 1 ? 'Shelves' : 'Shelf' }  </p>
            </div>

            <PopoverOptions options={[{
                icon: <ComposeIcon />,
                title: 'Edit',
                function: () => { console.log("Edit Clicked") }
            }]} />
        </header>
        
        <section className={styles.searchHolder}>
            <div className={styles.searchBar}>
                <input type="text" placeholder={'Search Shelves'} onInput={(event) => searchShelf(event.currentTarget.value)} />
                <SearchIcon />
            </div>
        </section>

        <NavLink to={'/add-shelf'} className={styles.addButton}>
            <PlusCircledIcon /> Add Shelf
        </NavLink>

        <section className={styles.Shelf}>
            <ul>
                { shelfResult.map((shelf, index) => {
                    return <li key={shelf.name} onClick={() => {
                        history.push('/shelf-details/category_id=' + category_id + '&&shelf_id=' + index);
                    }}>
                        <div className={styles.progress}>
                            <CircularProgressbar value={shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0} strokeWidth={7} 
                                styles={{
                                    path: {
                                        stroke: 'white',
                                        strokeLinecap: 'round',
                                    },
                                    trail: {
                                        stroke: 'rgba(255, 255, 255, 0.25)',
                                        strokeLinecap: 'round',
                                    }}
                                } />
                                
                            <span className={styles.text}> { shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0 }% </span>
                        </div>
                        <h5> { shelf.name } </h5>
                        <p> { shelf.words.length } words </p>
                    </li>
                }) }                
            </ul>
        </section>
    </section>
}