tests wip

docker-compose.accounts.yml

@@ -21,8 +21,8 @@ services:
 
   accounts:
     # uncomment "build" and comment out "image" to build from sources
-    # build: https://github.com/SkynetLabs/skynet-accounts.git#main
-    image: skynetlabs/skynet-accounts
+    build: https://github.com/SkynetLabs/skynet-accounts.git#main
+    # image: skynetlabs/skynet-accounts
     container_name: accounts
     restart: unless-stopped
     logging: *default-logging
@@ -75,3 +75,25 @@ services:
       - 3000
     depends_on:
       - mongo
+
+  dashboard-v2:
+    build:
+      context: ./packages/dashboard-v2
+      dockerfile: Dockerfile
+    container_name: dashboard-v2
+    restart: unless-stopped
+    logging: *default-logging
+    env_file:
+      - .env
+    environment:
+      - GATSBY_PORTAL_DOMAIN=${PORTAL_DOMAIN}
+    volumes:
+      - ./docker/data/dashboard-v2/.cache:/usr/app/.cache
+      - ./docker/data/dashboard-v2/public:/usr/app/public
+    networks:
+      shared:
+        ipv4_address: 10.10.10.90
+    expose:
+      - 9000
+    depends_on:
+      - mongo

docker/nginx/conf.d/server/server.account

@@ -4,7 +4,7 @@ include /etc/nginx/conf.d/include/ssl-settings;
 include /etc/nginx/conf.d/include/init-optional-variables;
 
 location / {
-    proxy_pass http://dashboard:3000;
+    proxy_pass http://dashboard-v2:9000;
 }
 
 location /health {

packages/dashboard-v2/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:16.14.2-alpine
+
+WORKDIR /usr/app
+
+COPY package.json yarn.lock ./
+
+RUN yarn --frozen-lockfile
+
+COPY static ./static
+COPY src ./src
+COPY gatsby*.js ./
+COPY postcss.config.js tailwind.config.js ./
+
+CMD ["sh", "-c", "yarn build && yarn serve --host 0.0.0.0 -p 9000"]

packages/dashboard-v2/gatsby-config.js

@@ -18,7 +18,7 @@ module.exports = {
       resolve: "gatsby-source-filesystem",
       options: {
         name: "images",
-        path: "./src/images/",
+        path: "./static/images/",
       },
       __key: "images",
     },

packages/dashboard-v2/src/contexts/user/UserProvider.js

@@ -1,17 +1,29 @@
+import { navigate } from "gatsby";
 import { useEffect, useState } from "react";
 import useSWRImmutable from "swr/immutable";
+import { UnauthorizedError } from "../../lib/swrConfig";
 
 import { UserContext } from "./UserContext";
 
-export const UserProvider = ({ children }) => {
+export const UserProvider = ({ children, allowGuests = false, allowAuthenticated = true }) => {
   const { data: user, error, mutate } = useSWRImmutable("user");
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (user || error) {
-      setLoading(false);
+    if (user) {
+      if (!allowAuthenticated) {
+        navigate("/");
+      } else {
+        setLoading(false);
+      }
+    } else if (error) {
+      if (error instanceof UnauthorizedError && !allowGuests) {
+        navigate(`/auth/login?return_to=${encodeURIComponent(window.location.href)}`);
+      } else {
+        setLoading(false);
+      }
     }
-  }, [user, error]);
+  }, [user, error, allowGuests, allowAuthenticated]);
 
   return <UserContext.Provider value={{ user, error, loading, mutate }}>{children}</UserContext.Provider>;
 };

packages/dashboard-v2/src/hooks/useUpgradeRedirect.js

@@ -17,7 +17,6 @@ export default function useUpgradeRedirect() {
 
     if (isDataLoaded) {
       if (settings.isSubscriptionRequired && !hasPaidSubscription) {
-        console.log("redirecting", user, settings);
         navigate("/upgrade");
       } else {
         setVerifyingSubscription(false);

packages/dashboard-v2/src/layouts/AuthLayout.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { SWRConfig } from "swr";
 
 import { UserProvider } from "../contexts/user";
-import { guestsOnly, allUsers } from "../lib/swrConfig";
+import { allUsers } from "../lib/swrConfig";
 
 const Layout = styled.div.attrs({
   className: "min-h-screen w-screen bg-black flex",
@@ -22,12 +22,12 @@ const Content = styled.div.attrs({
 })``;
 
 const AuthLayout =
-  (swrConfig) =>
+  (userProviderProps) =>
   ({ children }) => {
     return (
       <>
-        <SWRConfig value={swrConfig}>
-          <UserProvider>
+        <SWRConfig value={allUsers}>
+          <UserProvider {...userProviderProps}>
             <Layout>
               <SloganContainer className="pl-20 pr-20 lg:pr-30 xl:pr-40">
                 <div className="">
@@ -45,6 +45,12 @@ const AuthLayout =
   };
 
 // Some pages (e.g. email confirmation) need to be accessible to both logged-in and guest users.
-export const AllUsersAuthLayout = AuthLayout(allUsers);
+export const AllUsersAuthLayout = AuthLayout({
+  allowGuests: true,
+  allowAuthenticated: true,
+});
 
-export default AuthLayout(guestsOnly);
+export default AuthLayout({
+  allowGuests: true,
+  allowAuthenticated: false,
+});

packages/dashboard-v2/src/layouts/DashboardLayout.js

@@ -2,10 +2,10 @@ import * as React from "react";
 import styled from "styled-components";
 import { SWRConfig } from "swr";
 
-import { authenticatedOnly } from "../lib/swrConfig";
+import { allUsers } from "../lib/swrConfig";
 
 import { PageContainer } from "../components/PageContainer";
-import { NavBar } from "../components/Navbar";
+import { NavBar } from "../components/NavBar";
 import { Footer } from "../components/Footer";
 import { UserProvider, useUser } from "../contexts/user";
 import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";
@@ -33,8 +33,8 @@ const Layout = ({ children }) => {
 const DashboardLayout = ({ children }) => {
   return (
     <>
-      <SWRConfig value={authenticatedOnly}>
-        <UserProvider>
+      <SWRConfig value={allUsers}>
+        <UserProvider allowAuthenticated>
           <Layout>
             <NavBar />
             <PageContainer>

packages/dashboard-v2/src/layouts/UserSettingsLayout.js

@@ -3,10 +3,10 @@ import { Link } from "gatsby";
 import styled from "styled-components";
 import { SWRConfig } from "swr";
 
-import { authenticatedOnly } from "../lib/swrConfig";
+import { allUsers } from "../lib/swrConfig";
 
 import { PageContainer } from "../components/PageContainer";
-import { NavBar } from "../components/Navbar";
+import { NavBar } from "../components/NavBar";
 import { Footer } from "../components/Footer";
 import { UserProvider, useUser } from "../contexts/user";
 import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
@@ -67,8 +67,8 @@ const Content = styled.main.attrs({
 `;
 
 const UserSettingsLayout = ({ children }) => (
-  <SWRConfig value={authenticatedOnly}>
-    <UserProvider>
+  <SWRConfig value={allUsers}>
+    <UserProvider allowAuthenticated>
       <Layout>
         <NavBar />
         <PageContainer className="mt-2 md:mt-14">

packages/dashboard-v2/src/lib/swrConfig.js

@@ -1,39 +1,19 @@
-import { navigate } from "gatsby";
 import { StatusCodes } from "http-status-codes";
 
-// TODO: portal-aware URL
-const baseUrl = process.env.NODE_ENV !== "production" ? "/api" : "https://account.skynetpro.net/api";
-
-const redirectUnauthenticated = (key) =>
-  fetch(`${baseUrl}/${key}`).then((response) => {
-    if (response.status === StatusCodes.UNAUTHORIZED) {
-      navigate(`/auth/login?return_to=${encodeURIComponent(window.location.href)}`);
-      return null;
-    }
-
-    return response.json();
-  });
-
-const redirectAuthenticated = (key) =>
-  fetch(`${baseUrl}/${key}`).then(async (response) => {
-    if (response.ok) {
-      await navigate("/");
-      return response.json();
-    }
-
-    // If there was an error, let's throw so useSWR's "error" property is populated instead "data".
-    const data = await response.json();
-    throw new Error(data?.message || `Error occured when trying to fetch: ${key}`);
-  });
+export class UnauthorizedError extends Error {}
 
 export const allUsers = {
-  fetcher: (key) => fetch(`${baseUrl}/${key}`).then((response) => response.json()),
-};
+  fetcher: (key) => fetch(`/api/${key}`).then(async (response) => {
+    if (response.ok) {
+      return response.json();
+    }
+    
+    const data = await response.json();
 
-export const authenticatedOnly = {
-  fetcher: redirectUnauthenticated,
-};
-
-export const guestsOnly = {
-  fetcher: redirectAuthenticated,
+    if (response.status === StatusCodes.UNAUTHORIZED) {
+      throw new UnauthorizedError(data?.message || "Unauthorized");
+    }
+    
+    throw new Error(data?.message || `Error occurred when trying to fetch: ${key}`);
+  })
 };

packages/dashboard-v2/src/pages/auth/signup.js

@@ -15,7 +15,7 @@ const FreePortalHeader = () => {
   const { plans } = usePlans();
 
   const freePlan = plans.find(({ price }) => price === 0);
-  const freeStorage = freePlan ? bytes(freePlan.limits?.storageLimit, { binary: true }) : null;
+  const freeStorage = freePlan?.limits ? bytes(freePlan.limits?.storageLimit, { binary: true }) : null;
 
   return (
     <div className="mt-4 mb-8 font-sans">

packages/dashboard-v2/src/services/skynetClient.js

@@ -1,3 +1,3 @@
 import { SkynetClient } from "skynet-js";
 
-export default new SkynetClient("https://skynetpro.net"); // TODO: proper API url
+export default new SkynetClient(`https://${process.env.GATSBY_PORTAL_DOMAIN}`);

packages/dashboard-v2/yarn.lock

@@ -14090,7 +14090,7 @@ sjcl@^1.0.8:
   resolved "https://registry.yarnpkg.com/sjcl/-/sjcl-1.0.8.tgz#f2ec8d7dc1f0f21b069b8914a41a8f236b0e252a"
   integrity sha512-LzIjEQ0S0DpIgnxMEayM1rq9aGwGRG4OnZhCdjx7glTaJtf4zRfpg87ImfjSJjoW9vKpagd82McDOwbRT5kQKQ==
 
-skynet-js@^4.0.27-beta:
+skynet-js@4.0.27-beta:
   version "4.0.27-beta"
   resolved "https://registry.yarnpkg.com/skynet-js/-/skynet-js-4.0.27-beta.tgz#4257bffda8757830656e0beb89d0d2e44da17e2f"
   integrity sha512-JV+QE/2l2YwVN1jQHVMFXgggwtBrPAnuyXySbLgafEJAde5dUwSEr5YRMV+3LvEgYkGhxSb74pyq0u0wrF2sUg==