From fd688021eaf892dcdd66de67b1cc52cb4833712f Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Sat, 2 Oct 2021 00:17:21 +0200
Subject: [PATCH] added table to bucket select

---
 src/components/BucketSelect.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/BucketSelect.tsx b/src/components/BucketSelect.tsx
index 7854471..bd077a2 100644
--- a/src/components/BucketSelect.tsx
+++ b/src/components/BucketSelect.tsx
@@ -1,13 +1,18 @@
 import React from "react"
-import { Link } from "react-router-dom"
+import { useHistory } from "react-router-dom"
 import { useListBucktesQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import MoreMenu from "./MoreMenu"
 import { ReactComponent as Spinner } from "./../assets/spinner.svg"
+import Table, { Data } from "./Table"
 
 const BucketSelect: React.FC = () => {
-
+	const history = useHistory()
 	const {data: buckets, loading} = useListBucktesQuery()
+	const tableData: Data = {
+		headers:[{name:"Bucket"}],
+		body:(!buckets?[]:buckets.buckets.map(e=>{return {cells:[{name:e||""}],onClick:()=>{history.push(`/f/${e}`)}}}))
+	}
 
 	return (
 		<div>
@@ -17,13 +22,7 @@ const BucketSelect: React.FC = () => {
 					<MoreMenu />
 				</div>
 			</div>
-			<ul>
-				{buckets?.buckets.map((e)=>
-					<li key={e}>
-						<Link to={`/f/${e}/`} >{e}</Link>
-					</li>
-				)}
-			</ul>
+			<Table data={tableData}/>
 			{loading && 
 				<div className="flex justify-center mt-4">
 					<Spinner className="animate-spin h-6 w-6 dark:text-white"  />