From c64d77c2ce2662f7e3aa80dcf5b04d749dff7610 Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <amogh@peerdb.io>
Date: Mon, 18 Mar 2024 23:33:40 +0530
Subject: [PATCH] UI: Redirect to peers page by default, add buttons there
 (#1498)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Now users do not land on the Home page. The landing route is the peers
page (`/peers`), where if there are no peers, the below look holds:

<img width="1719" alt="Screenshot 2024-03-18 at 10 09 31 PM"
src="https://github.com/PeerDB-io/peerdb/assets/65964360/ba342b60-4c51-4af7-bbf6-9ac9d5420e7b">
---
 ui/app/peers/page.tsx       | 68 +++++++++++++++++++++++++++++++++----
 ui/app/peers/peersTable.tsx |  3 +-
 ui/next.config.js           |  9 +++++
 3 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/ui/app/peers/page.tsx b/ui/app/peers/page.tsx
index d7812e54c0..48394acde7 100644
--- a/ui/app/peers/page.tsx
+++ b/ui/app/peers/page.tsx
@@ -15,7 +15,8 @@ import useSWR from 'swr';
 import { fetcher } from '../utils/swr';
 
 export default function Peers() {
-  const { data: peers, error, isLoading } = useSWR('/api/peers', fetcher);
+  const peers: any[] = [];
+  const { data, error, isLoading } = useSWR('/api/peers', fetcher);
 
   return (
     <LayoutMain alignSelf='flex-start' justifySelf='flex-start'>
@@ -39,6 +40,10 @@ export default function Peers() {
         >
           Peers
         </Header>
+        <Label>
+          Peers represent a data store. Once you have a couple of peers, you can
+          start moving data between them through mirrors.
+        </Label>
       </Panel>
       <Panel>
         {isLoading && (
@@ -46,12 +51,61 @@ export default function Peers() {
             <ProgressCircle variant='determinate_progress_circle' />
           </div>
         )}
-        {!isLoading && (
-          <PeersTable
-            title='All peers'
-            peers={peers.map((peer: any) => peer)}
-          />
-        )}
+        {!isLoading &&
+          (peers && peers.length == 0 ? (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                columnGap: '1rem',
+              }}
+            >
+              <Button
+                as={Link}
+                href={'/peers/create'}
+                style={{
+                  width: 'fit-content',
+                  boxShadow: '0px 2px 2px rgba(0,0,0,0.1)',
+                }}
+                variant='normalSolid'
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  <Icon name='add' />
+                  <Label>Add your first peer</Label>
+                </div>
+              </Button>
+
+              <Button
+                as={Link}
+                href={'https://docs.peerdb.io/features/supported-connectors'}
+                target={'_blank'}
+                style={{
+                  width: 'fit-content',
+                  boxShadow: '0px 2px 2px rgba(0,0,0,0.1)',
+                }}
+                variant='normal'
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  <Icon name='info' />
+                  <Label>Learn more about peers</Label>
+                </div>
+              </Button>
+            </div>
+          ) : (
+            <PeersTable peers={peers.map((peer: any) => peer)} />
+          ))}
       </Panel>
     </LayoutMain>
   );
diff --git a/ui/app/peers/peersTable.tsx b/ui/app/peers/peersTable.tsx
index a49cbd2e53..a592d232f3 100644
--- a/ui/app/peers/peersTable.tsx
+++ b/ui/app/peers/peersTable.tsx
@@ -33,7 +33,7 @@ function PeerRow({ peer }: { peer: Peer }) {
   );
 }
 
-function PeersTable({ title, peers }: { title: string; peers: Peer[] }) {
+function PeersTable({ peers }: { peers: Peer[] }) {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [filteredType, setFilteredType] = useState<DBType | undefined>(
     undefined
@@ -65,7 +65,6 @@ function PeersTable({ title, peers }: { title: string; peers: Peer[] }) {
 
   return (
     <Table
-      title={<Label variant='headline'>{title}</Label>}
       toolbar={{
         left: <></>,
         right: (
diff --git a/ui/next.config.js b/ui/next.config.js
index a42a10c727..5212d4780c 100644
--- a/ui/next.config.js
+++ b/ui/next.config.js
@@ -3,6 +3,15 @@ const nextConfig = {
   compiler: {
     styledComponents: true,
   },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/peers',
+        permanent: false,
+      },
+    ];
+  },
   reactStrictMode: true,
   swcMinify: true,
   output: 'standalone',