From 6b5410fba683b4734d4e1e26358b4de3ee624da3 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Tue, 10 Oct 2023 12:35:15 +0200
Subject: [PATCH] feat: Update profile table

---
 app/login/components/profile-tables.tsx | 74 ++++++++++++++++++-------
 1 file changed, 54 insertions(+), 20 deletions(-)

diff --git a/app/login/components/profile-tables.tsx b/app/login/components/profile-tables.tsx
index 1a4a3687a..aa49aa0b8 100644
--- a/app/login/components/profile-tables.tsx
+++ b/app/login/components/profile-tables.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Link,
   Table,
   TableBody,
   TableCell,
@@ -10,7 +11,10 @@ import {
 import NextLink from "next/link";
 
 import { ParsedConfig } from "@/db/config";
+import { useDataCubeMetadataQuery } from "@/graphql/query-hooks";
+import { Icon } from "@/icons";
 import { useRootStyles } from "@/login/utils";
+import { useLocale } from "@/src";
 
 type ProfileVisualizationsTableProps = {
   userConfigs: ParsedConfig[];
@@ -28,28 +32,15 @@ export const ProfileVisualizationsTable = (
       {userConfigs.length > 0 ? (
         <Table>
           <TableHead>
-            <TableCell>Type</TableCell>
-            <TableCell>Title</TableCell>
-            <TableCell>Link</TableCell>
+            <TableCell>Chart type</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Dataset</TableCell>
+            <TableCell>Actions</TableCell>
           </TableHead>
           <TableBody>
-            {userConfigs.map((d) => {
-              return (
-                <TableRow key={d.id}>
-                  <TableCell>
-                    {d.data.chartConfigs.length > 1
-                      ? "multi"
-                      : d.data.chartConfigs[0].chartType}
-                  </TableCell>
-                  <TableCell>{d.data.meta.title.en}</TableCell>
-                  <TableCell>
-                    <NextLink href={`/v/${d.key}`} legacyBehavior>
-                      See chart
-                    </NextLink>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
+            {userConfigs.map((d) => (
+              <Row key={d.key} config={d} />
+            ))}
           </TableBody>
         </Table>
       ) : (
@@ -64,3 +55,46 @@ export const ProfileVisualizationsTable = (
     </Box>
   );
 };
+
+type RowProps = {
+  config: ParsedConfig;
+};
+
+const Row = (props: RowProps) => {
+  const { config } = props;
+  const locale = useLocale();
+  const [{ data }] = useDataCubeMetadataQuery({
+    variables: {
+      iri: config.data.dataSet,
+      sourceType: config.data.dataSource.type,
+      sourceUrl: config.data.dataSource.url,
+      locale,
+    },
+  });
+
+  return (
+    <TableRow>
+      <TableCell>
+        {config.data.chartConfigs.length > 1
+          ? "multi"
+          : config.data.chartConfigs[0].chartType}
+      </TableCell>
+      <TableCell>{config.data.meta.title[locale]}</TableCell>
+      <TableCell>{data?.dataCubeByIri?.title ?? ""}</TableCell>
+      <TableCell>
+        <Box sx={{ display: "flex", gap: 2 }}>
+          <NextLink href={`/v/${config.key}`} passHref legacyBehavior>
+            <Link target="_blank">
+              <Icon name="linkExternal" size={14} />
+            </Link>
+          </NextLink>
+          <NextLink href={`/create/${config.key}`} passHref legacyBehavior>
+            <Link target="_blank">
+              <Icon name="edit" size={14} />
+            </Link>
+          </NextLink>
+        </Box>
+      </TableCell>
+    </TableRow>
+  );
+};