fix: minor fixes

Author: brynblack

src/components/Map.tsx

@@ -135,38 +135,38 @@ const Map = React.forwardRef<
             Japan
           </div>
         </div> */}
-        {nodesGeo != null ? (
-          clusterPoints(
-            Object.values(nodesGeo).map((geo) => ({
-              lat: geo.ll[0],
-              lng: geo.ll[1],
-            })),
-            1000,
-          ).map(({ count, lat, lng }, i) => {
-            const { x, y } = latLonToOffsets(lat * 1.8, lng, 100, 100);
-            return (
-              <div
-                className="absolute grid aspect-square -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-[rgba(255,255,255)]"
-                key={i}
-                style={{
-                  left: `${x > 0 ? x : 100 + x}%`,
-                  top: `${y}%`,
-                  transformOrigin: 'top left',
-                  width: `${
-                    Math.max(Math.min(Math.log(count * 1000), 15), 1) +
-                    (width > 640 ? 0 : 4)
-                  }%`,
-                }}
-              >
-                <div className="flex aspect-square w-3/4 justify-center rounded-full bg-white">
-                  <img
-                    alt="Polykey Logo"
-                    className="w-3/5"
-                    src="images/polykey-logomark-dark.svg"
-                  />
-                </div>
+        {nodesGeo != null
+          ? clusterPoints(
+              Object.values(nodesGeo).map((geo) => ({
+                lat: geo.ll[0],
+                lng: geo.ll[1],
+              })),
+              1000,
+            ).map(({ count, lat, lng }, i) => {
+              const { x, y } = latLonToOffsets(lat * 1.8, lng, 100, 100);
+              return (
                 <div
-                  className="
+                  className="absolute grid aspect-square -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-[rgba(255,255,255)]"
+                  key={i}
+                  style={{
+                    left: `${x > 0 ? x : 100 + x}%`,
+                    top: `${y}%`,
+                    transformOrigin: 'top left',
+                    width: `${
+                      Math.max(Math.min(Math.log(count * 1000), 15), 1) +
+                      (width > 640 ? 0 : 4)
+                    }%`,
+                  }}
+                >
+                  <div className="flex aspect-square w-3/4 justify-center rounded-full bg-white">
+                    <img
+                      alt="Polykey Logo"
+                      className="w-3/5"
+                      src="images/polykey-logomark-dark.svg"
+                    />
+                  </div>
+                  <div
+                    className="
                   absolute bottom-0 right-0
                   inline-block
                   aspect-square w-6 rounded-full
@@ -176,15 +176,13 @@ const Map = React.forwardRef<
                   text-xs
                   leading-5
                   text-white"
-                >
-                  {count}
+                  >
+                    {count}
+                  </div>
                 </div>
-              </div>
-            );
-          })
-        ) : (
-          <></>
-        )}
+              );
+            })
+          : null}
       </div>
     </div>
   );

src/components/ResourceChart.tsx

@@ -117,9 +117,7 @@ const ResourceChart = ({
       title={title}
       {...props}
     />
-  ) : (
-    <></>
-  );
+  ) : null;
 };
 
 export default ResourceChart;

src/components/SeedNodeCard.tsx

@@ -10,9 +10,9 @@ const NodeCard = React.forwardRef<
   }
   // Complains about props not being validated
 >(({ className, nodeId, data, ...props }, ref) => {
-  let contents: React.JSX.Element;
+  let contents: React.JSX.Element | null;
   if (data == null) {
-    contents = <></>;
+    contents = null;
   } else if ('error' in data) {
     contents = (
       <>

src/pages/index.tsx

@@ -8,7 +8,7 @@ import Map from '../components/Map';
 import SeedNodeCard from '../components/SeedNodeCard';
 import ResourceChart from '../components/ResourceChart';
 
-export default function Home(): React.JSX.Element {
+const Home = () => {
   const { siteConfig } = useDocusaurusContext();
   const nodesGeoQuery = useQuery<{ [nodeId: string]: IpGeo }>({
     queryKey: ['nodesGeo'],
@@ -77,23 +77,6 @@ export default function Home(): React.JSX.Element {
     libNetworkVersion: 'NetVer',
   };
 
-  const versionMetadataKeysSorted = React.useMemo(() => {
-    if (!Array.isArray(deploymentsQuery.data)) return [];
-
-    const keySet = new Set<string>();
-    for (const deployment of deploymentsQuery.data) {
-      if (
-        deployment &&
-        typeof deployment.versionMetadata === 'object' &&
-        deployment.versionMetadata != null
-      ) {
-        for (const key of Object.keys(deployment.versionMetadata)) {
-          keySet.add(key);
-        }
-      }
-    }
-    return Array.from(keySet).sort();
-  }, [deploymentsQuery.data]);
   return (
     <Layout
       description="Polykey, a new approach to secrets management."
@@ -110,23 +93,19 @@ export default function Home(): React.JSX.Element {
         <div className="mx-auto max-w-6xl space-y-3 p-3">
           <h1 className="text-center text-2xl">Seed Nodes</h1>
           <div className="flex flex-wrap justify-center gap-3">
-            {seedNodesQuery.data != null ? (
-              Object.entries(seedNodesQuery.data).map(([nodeId, data]) => (
-                <SeedNodeCard
-                  className="min-w-0 shrink grow-[0.5]"
-                  data={data}
-                  key={nodeId}
-                  nodeId={nodeId}
-                />
-              ))
-            ) : (
-              <></>
-            )}
+            {seedNodesQuery.data != null
+              ? Object.entries(seedNodesQuery.data).map(([nodeId, data]) => (
+                  <SeedNodeCard
+                    className="min-w-0 shrink grow-[0.5]"
+                    data={data}
+                    key={nodeId}
+                    nodeId={nodeId}
+                  />
+                ))
+              : null}
             {seedNodesQuery.error != null ? (
               <>Unable to fetch seednodes status from Polykey-Network-Status</>
-            ) : (
-              <></>
-            )}
+            ) : null}
           </div>
           {resourceCpuQuery.error == null ||
           resourceMemoryQuery.error == null ? (
@@ -140,9 +119,7 @@ export default function Home(): React.JSX.Element {
                     )}
                     title="CPU Usage"
                   />
-                ) : (
-                  <></>
-                )}
+                ) : null}
               </div>
               <div className="inline-block aspect-[1.5] w-full md:w-1/2">
                 {resourceMemoryQuery.data != null ? (
@@ -153,14 +130,10 @@ export default function Home(): React.JSX.Element {
                     )}
                     title="Memory Usage"
                   />
-                ) : (
-                  <></>
-                )}
+                ) : null}
               </div>
             </div>
-          ) : (
-            <></>
-          )}
+          ) : null}
           <div className="rounded-2xl bg-[#E4F6F2] p-3">
             <span className="font-semibold">Deployments:</span>
             <table className="mt-3 w-full table-auto">
@@ -287,4 +260,6 @@ export default function Home(): React.JSX.Element {
       </div>
     </Layout>
   );
-}
+};
+
+export default Home;

src/theme/SearchBar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styles from './SearchBar.module.css';
 
-export default function FooterLayout(): React.JSX.Element {
+const FooterLayout = () => {
   return <p className={styles.helpme}></p>;
-}
+};
+
+export default FooterLayout;