From 41da156b0e318eefa85b34d7cfab1f00ab563be9 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 29 Sep 2022 08:53:24 -0400
Subject: [PATCH] feat: Add view count to shared links in settings

---
 app/hooks/useAuthorizedSettingsConfig.ts      |  2 +-
 app/scenes/Settings/Shares.tsx                |  4 ++--
 .../Settings/components/SharesTable.tsx       | 21 +++++++++++++------
 shared/i18n/locales/en_US/translation.json    |  3 ++-
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/hooks/useAuthorizedSettingsConfig.ts b/app/hooks/useAuthorizedSettingsConfig.ts
index 0783bbf14..71e30ed0c 100644
--- a/app/hooks/useAuthorizedSettingsConfig.ts
+++ b/app/hooks/useAuthorizedSettingsConfig.ts
@@ -151,7 +151,7 @@ const useAuthorizedSettingsConfig = () => {
         icon: GroupIcon,
       },
       Shares: {
-        name: t("Share Links"),
+        name: t("Shared Links"),
         path: "/settings/shares",
         component: Shares,
         enabled: true,
diff --git a/app/scenes/Settings/Shares.tsx b/app/scenes/Settings/Shares.tsx
index f3be922de..1b89a16fd 100644
--- a/app/scenes/Settings/Shares.tsx
+++ b/app/scenes/Settings/Shares.tsx
@@ -67,8 +67,8 @@ function Shares() {
   }, [shares.orderedData, shareIds]);
 
   return (
-    <Scene title={t("Share Links")} icon={<LinkIcon color="currentColor" />}>
-      <Heading>{t("Share Links")}</Heading>
+    <Scene title={t("Shared Links")} icon={<LinkIcon color="currentColor" />}>
+      <Heading>{t("Shared Links")}</Heading>
 
       {can.manage && !canShareDocuments && (
         <>
diff --git a/app/scenes/Settings/components/SharesTable.tsx b/app/scenes/Settings/components/SharesTable.tsx
index 9ffc371f6..29f551378 100644
--- a/app/scenes/Settings/components/SharesTable.tsx
+++ b/app/scenes/Settings/components/SharesTable.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
 import Share from "~/models/Share";
+import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import TableFromParams from "~/components/TableFromParams";
 import Time from "~/components/Time";
@@ -35,12 +36,15 @@ function SharesTable({ canManage, ...rest }: Props) {
           Cell: observer(
             ({ value, row }: { value: string; row: { original: Share } }) =>
               value ? (
-                <>
-                  <Time dateTime={value} addSuffix />{" "}
-                  {t("by {{ name }}", {
-                    name: row.original.createdBy.name,
-                  })}
-                </>
+                <Flex align="center" gap={4}>
+                  {row.original.createdBy && (
+                    <Avatar
+                      src={row.original.createdBy.avatarUrl}
+                      alt={row.original.createdBy.name}
+                    />
+                  )}
+                  <Time dateTime={value} addSuffix />
+                </Flex>
               ) : null
           ),
         },
@@ -64,6 +68,11 @@ function SharesTable({ canManage, ...rest }: Props) {
             ) : null
           ),
         },
+        {
+          id: "views",
+          Header: t("Views"),
+          accessor: "views",
+        },
         canManage
           ? {
               Header: " ",
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index a677217a0..ff3608528 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -209,7 +209,7 @@
   "Features": "Features",
   "Members": "Members",
   "Groups": "Groups",
-  "Share Links": "Share Links",
+  "Shared Links": "Shared Links",
   "Import": "Import",
   "Export": "Export",
   "Webhooks": "Webhooks",
@@ -599,6 +599,7 @@
   "Last accessed": "Last accessed",
   "Date shared": "Date shared",
   "Shared nested": "Shared nested",
+  "Views": "Views",
   "Add to Slack": "Add to Slack",
   "Settings saved": "Settings saved",
   "document published": "document published",