UI: Redirect to peers page by default, add buttons there (#1498)

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">
PeerDB-io · Mar 18, 2024 · c64d77c · c64d77c
1 parent 23539f5
commit c64d77c
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 9 deletions.
diff --git 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,19 +40,72 @@ 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 && (
           <div className='h-screen flex items-center justify-center'>
             <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
@@ -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
@@ -3,6 +3,15 @@ const nextConfig = {
   compiler: {
     styledComponents: true,
   },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/peers',
+        permanent: false,
+      },
+    ];
+  },
   reactStrictMode: true,
   swcMinify: true,
   output: 'standalone',