src/components/App.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 
 import Quick from "./Quick";
-import QuickItem from "./QuickItem";
-import QuickCategory from "./QuickCategory";
 import Clock from "./Clock";
 import Search from "./Search";
 
@@ -16,23 +14,7 @@ class App extends React.Component {
 			<div className="center-wrapper">
 				<Clock/>
 				<Search/>
-				<Quick>
-					<QuickCategory name="Productivity">
-						<QuickItem name="Nextcloud" url="https://nc.kapelle.org"/>
-						<QuickItem name="Git" url="https://git.kapelle.org"/>
-						<QuickItem name="GitHub" url="https://github.com/"/>
-					</QuickCategory>
-
-					<QuickCategory name="Personal">
-						<QuickItem name="Youtube" url="https://youtube.com/"/>
-						<QuickItem name="Reddit" url="https://reddit.com/"/>
-						<QuickItem name="Netflix" url="https://netflix.com/"/>
-					</QuickCategory>
-
-					<QuickCategory name="Other">
-						<QuickItem name="Bitwarden" url="https://vault.kapelle.org"/>
-					</QuickCategory>
-				</Quick>
+				<Quick/>
 			</div>
 		</div>;
 	}

src/components/Quick.tsx

@@ -1,21 +1,43 @@
 import * as React from "react";
 
 import "../style/quick.scss";
+import { Bookmarks } from "../types/Bookmarks";
+import QuickCategory from "./QuickCategory";
+import getBookmarks from "../functions/getBookmarks";
 
-interface Props {
-	children: React.ReactNode;
+interface State {
+	bookmarks: Bookmarks;
 }
 
-class Quick extends React.Component<Props> {
-	
-	constructor(props){
+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.props.children}
+				{this.state.bookmarks.folder.map((e, i) => {
+					return <QuickCategory folder={e} key={i} />;
+				})}
 			</div>
 		</div>;
 	}

src/components/QuickCategory.tsx

@@ -1,25 +1,28 @@
 import * as React from "react";
 
 import "../style/quickCategory.scss";
+import { BookmarkFolder } from "../types/Bookmarks";
+import QuickItem from "./QuickItem";
 
 interface Props {
-	children: React.ReactNode;
-	name: string;
+	folder: BookmarkFolder;
 }
 
 class QuickCategory extends React.Component<Props> {
-	
-	constructor(props){
+
+	constructor(props) {
 		super(props);
 	}
 
 	render(): JSX.Element {
 		return <div className="quickCategory-component">
 			<div className="title">
-				{this.props.name}
+				{this.props.folder.name}
 			</div>
 			<div className="children">
-				{this.props.children}
+				{this.props.folder.bookmarks.map((e, i) => {
+					return <QuickItem bookmark={e} key={i} />;
+				})}
 			</div>
 		</div>;
 	}

src/components/QuickItem.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 
 import "../style/quickItem.scss";
+import { Bookmark } from "../types/Bookmarks";
 
 interface Props {
-	name: string;
-	url: string;
+	bookmark: Bookmark;
 }
 
 class QuickItem extends React.Component<Props> {
@@ -14,12 +14,12 @@ class QuickItem extends React.Component<Props> {
 	}
 
 	onClick() {
-		window.location.href = this.props.url;
+		window.location.href = this.props.bookmark.url;
 	}
 
 	render(): JSX.Element {
 		return <div className="quickItem-component" onClick={() => this.onClick()}>
-			{this.props.name}
+			{this.props.bookmark.name}
 		</div>;
 	}