Revert "UI: Redirect to peers page by default, add buttons there (#1498…

…)"

This reverts commit c64d77c.

ui/app/peers/page.tsx

@@ -15,8 +15,7 @@ import useSWR from 'swr';
 import { fetcher } from '../utils/swr';
 
 export default function Peers() {
-  const peers: any[] = [];
-  const { data, error, isLoading } = useSWR('/api/peers', fetcher);
+  const { data: peers, error, isLoading } = useSWR('/api/peers', fetcher);
 
   return (
     <LayoutMain alignSelf='flex-start' justifySelf='flex-start'>
@@ -40,72 +39,19 @@ 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 &&
-          (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)} />
-          ))}
+        {!isLoading && (
+          <PeersTable
+            title='All peers'
+            peers={peers.map((peer: any) => peer)}
+          />
+        )}
       </Panel>
     </LayoutMain>
   );

ui/app/peers/peersTable.tsx

@@ -33,7 +33,7 @@ function PeerRow({ peer }: { peer: Peer }) {
   );
 }
 
-function PeersTable({ peers }: { peers: Peer[] }) {
+function PeersTable({ title, peers }: { title: string; peers: Peer[] }) {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [filteredType, setFilteredType] = useState<DBType | undefined>(
     undefined
@@ -65,6 +65,7 @@ function PeersTable({ peers }: { peers: Peer[] }) {
 
   return (
     <Table
+      title={<Label variant='headline'>{title}</Label>}
       toolbar={{
         left: <></>,
         right: (

ui/next.config.js

@@ -3,15 +3,6 @@ const nextConfig = {
   compiler: {
     styledComponents: true,
   },
-  async redirects() {
-    return [
-      {
-        source: '/',
-        destination: '/peers',
-        permanent: false,
-      },
-    ];
-  },
   reactStrictMode: true,
   swcMinify: true,
   output: 'standalone',