import * as React from "react";

import "../style/quick.scss";
import { Bookmarks } from "../types/Bookmarks";
import QuickCategory from "./QuickCategory";
import getBookmarks from "../functions/getBookmarks";

interface State {
	bookmarks: Bookmarks;
}

class Quick extends React.Component<{}, State> {

	constructor(props) {
		super(props);
		this.state = {
			bookmarks: {
				folder: [],
				orphans: []
			}
		};
	}

	async getBookmarks(): Promise<void> {
		const bookmarks = await getBookmarks();
		this.setState({
			bookmarks: bookmarks
		});
	}

	componentDidMount() {
		this.getBookmarks();
	}

	render(): JSX.Element {
		return <div className="quick-component">
			<div className="container">
				{this.state.bookmarks.folder.map((e, i) => {
					return <QuickCategory folder={e} key={i} />;
				})}
			</div>
		</div>;
	}

}


export default Quick;
