This commit is contained in:
Karol Wypchlo 2021-02-19 17:32:30 +01:00
parent aeba920da5
commit a7a71f45dd
5 changed files with 33 additions and 9 deletions

View File

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

View File

@ -59,12 +59,25 @@ export default function Table({ items, count, headers, actions, offset, setOffse
<tbody> <tbody>
{items.map((row, index) => ( {items.map((row, index) => (
<tr className={index % 2 ? "bg-white" : "bg-gray-100"} key={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 <td
key={key} key={key}
className={`${nowrap ? "whitespace-nowrap" : ""} px-6 py-4 text-sm font-medium text-gray-900`} 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> </td>
))} ))}
{actions.map(({ key, name, action }) => ( {actions.map(({ key, name, action }) => (

View File

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

View File

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

View File

@ -1,6 +1,8 @@
const isProduction = process.env.NODE_ENV === "production";
export default function authServerSideProps(getServerSideProps) { export default function authServerSideProps(getServerSideProps) {
return function authenticate(context) { 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 { return {
redirect: { redirect: {
permanent: false, permanent: false,