links

packages/dashboard/package.json

@@ -24,6 +24,7 @@
     "pretty-bytes": "^5.5.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "skynet-js": "^3.0.0",
     "superagent": "^6.1.0",
     "swr": "^0.4.1",
     "tailwindcss": "^2.0.3",

packages/dashboard/src/components/Table.js

@@ -59,12 +59,25 @@ export default function Table({ items, count, headers, actions, offset, setOffse
               <tbody>
                 {items.map((row, index) => (
                   <tr className={index % 2 ? "bg-white" : "bg-gray-100"} key={index}>
-                    {headers.map(({ key, formatter, nowrap = true }) => (
+                    {headers.map(({ key, formatter, href, nowrap = true }) => (
                       <td
                         key={key}
                         className={`${nowrap ? "whitespace-nowrap" : ""} px-6 py-4 text-sm font-medium text-gray-900`}
                       >
-                        {(formatter ? formatter(row[key]) : row[key]) || <>&mdash;</>}
+                        {(formatter ? (
+                          formatter(row, key)
+                        ) : href ? (
+                          <a
+                            href={href(row, key)}
+                            className="text-green-600 hover:text-green-900"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {row[key]}
+                          </a>
+                        ) : (
+                          row[key]
+                        )) || <>&mdash;</>}
                       </td>
                     ))}
                     {actions.map(({ key, name, action }) => (

packages/dashboard/src/pages/downloads.js

@@ -5,14 +5,18 @@ import useSWR from "swr";
 import Layout from "../components/Layout";
 import Table from "../components/Table";
 import authServerSideProps from "../services/authServerSideProps";
+import { SkynetClient } from "skynet-js";
 
+const skynetClient = new SkynetClient(process.env.SKYNET_PORTAL_API ?? "https://siasky.net");
 const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
 const fetcher = (url) => fetch(url).then((r) => r.json());
+const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
+const getRelativeDate = ({ downloadedOn }) => dayjs(downloadedOn).format("YYYY-MM-DD HH:mm:ss");
 const headers = [
-  { key: "name", name: "Name", nowrap: false },
+  { key: "name", name: "Name", nowrap: false, href: getSkylinkLink },
   { key: "skylink", name: "Skylink" },
-  { key: "size", name: "Size", formatter: prettyBytes },
-  { key: "downloadedOn", name: "Accessed on", formatter: (date) => dayjs(date).format("YYYY-MM-DD HH:mm:ss") },
+  { key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) },
+  { key: "downloadedOn", name: "Accessed on", formatter: getRelativeDate },
 ];
 const actions = [];
 

packages/dashboard/src/pages/uploads.js

@@ -5,14 +5,18 @@ import useSWR from "swr";
 import Layout from "../components/Layout";
 import Table from "../components/Table";
 import authServerSideProps from "../services/authServerSideProps";
+import { SkynetClient } from "skynet-js";
 
+const skynetClient = new SkynetClient(process.env.SKYNET_PORTAL_API ?? "https://siasky.net");
 const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
 const fetcher = (url) => fetch(url).then((r) => r.json());
+const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
+const getRelativeDate = ({ uploadedOn }) => dayjs(uploadedOn).format("YYYY-MM-DD HH:mm:ss");
 const headers = [
-  { key: "name", name: "Name", nowrap: false },
+  { key: "name", name: "Name", nowrap: false, href: getSkylinkLink },
   { key: "skylink", name: "Skylink" },
-  { key: "size", name: "Size", formatter: prettyBytes },
-  { key: "uploadedOn", name: "Uploaded on", formatter: (date) => dayjs(date).format("YYYY-MM-DD HH:mm:ss") },
+  { key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) },
+  { key: "uploadedOn", name: "Uploaded on", formatter: getRelativeDate },
 ];
 const actions = [];
 

packages/dashboard/src/services/authServerSideProps.js

@@ -1,6 +1,8 @@
+const isProduction = process.env.NODE_ENV === "production";
+
 export default function authServerSideProps(getServerSideProps) {
   return function authenticate(context) {
-    if (!("ory_kratos_session" in context.req.cookies) || !("skynet-jwt" in context.req.cookies)) {
+    if (isProduction && (!("ory_kratos_session" in context.req.cookies) || !("skynet-jwt" in context.req.cookies))) {
       return {
         redirect: {
           permanent: false,