import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; import { getCategories } from '../../store/actions'; import classes from './Bookmarks.module.css'; import { Container } from '../UI/Layout/Layout'; import Headline from '../UI/Headlines/Headline/Headline'; import ActionButton from '../UI/Buttons/ActionButton/ActionButton'; import BookmarkGrid from './BookmarkGrid/BookmarkGrid'; import { Category, GlobalState } from '../../interfaces'; import Spinner from '../UI/Spinner/Spinner'; import Modal from '../UI/Modal/Modal'; import BookmarkForm from './BookmarkForm/BookmarkForm'; interface ComponentProps { loading: boolean; categories: Category[]; getCategories: () => void; } export enum FormContentType { category, bookmark } const Bookmarks = (props: ComponentProps): JSX.Element => { const [modalIsOpen, setModalIsOpen] = useState(false); const [formContentType, setFormContentType] = useState(FormContentType.category); useEffect(() => { if (props.categories.length === 0) { props.getCategories(); } }, [props.getCategories]) const toggleModal = (): void => { setModalIsOpen(!modalIsOpen); } const addActionHandler = (contentType: FormContentType) => { setFormContentType(contentType); toggleModal(); } return ( {formContentType === FormContentType.category ? : } Go back)} />
addActionHandler(FormContentType.category)} /> addActionHandler(FormContentType.bookmark)} />
{props.loading ? : }
) } const mapStateToProps = (state: GlobalState) => { return { loading: state.bookmark.loading, categories: state.bookmark.categories } } export default connect(mapStateToProps, { getCategories })(Bookmarks);