refactor: use Fresh's partial for /dashboard (#633)

I put the `<Partial>` element only around the actual content and not the `<TabsBar>`. closes #630. Signed-off-by: Niklas Metje <[email protected]> Co-authored-by: Asher Gomez <[email protected]>
denoland · Oct 16, 2023 · 5acbcd3 · 5acbcd3
1 parent 052fe7a
commit 5acbcd3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/routes/dashboard/stats.tsx b/routes/dashboard/stats.tsx
@@ -4,6 +4,7 @@ import Head from "@/components/Head.tsx";
 import TabsBar from "@/components/TabsBar.tsx";
 import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts";
 import { defineRoute } from "$fresh/server.ts";
+import { Partial } from "$fresh/runtime.ts";
 
 function randomNumbers(length: number) {
   return Array.from({ length }, () => Math.floor(Math.random() * 1000));
@@ -45,7 +46,7 @@ export default defineRoute((_req, ctx) => {
   return (
     <>
       <Head title="Dashboard" href={ctx.url.href} />
-      <main class="flex-1 p-4 flex flex-col">
+      <main class="flex-1 p-4 flex flex-col f-client-nav">
         <h1 class={HEADING_WITH_MARGIN_STYLES}>Dashboard</h1>
         <TabsBar
           links={[{
@@ -57,36 +58,38 @@ export default defineRoute((_req, ctx) => {
           }]}
           currentPath={ctx.url.pathname}
         />
-        <div class="flex-1 relative">
-          <Chart
-            type="line"
-            options={{
-              maintainAspectRatio: false,
-              interaction: {
-                intersect: false,
-                mode: "index",
-              },
-              scales: {
-                x: {
-                  grid: { display: false },
+        <Partial name="stats">
+          <div class="flex-1 relative">
+            <Chart
+              type="line"
+              options={{
+                maintainAspectRatio: false,
+                interaction: {
+                  intersect: false,
+                  mode: "index",
                 },
-                y: {
-                  beginAtZero: true,
-                  grid: { display: false },
-                  ticks: { precision: 0 },
+                scales: {
+                  x: {
+                    grid: { display: false },
+                  },
+                  y: {
+                    beginAtZero: true,
+                    grid: { display: false },
+                    ticks: { precision: 0 },
+                  },
                 },
-              },
-            }}
-            data={{
-              labels,
-              datasets: datasets.map((dataset) => ({
-                ...dataset,
-                pointRadius: 0,
-                cubicInterpolationMode: "monotone",
-              })),
-            }}
-          />
-        </div>
+              }}
+              data={{
+                labels,
+                datasets: datasets.map((dataset) => ({
+                  ...dataset,
+                  pointRadius: 0,
+                  cubicInterpolationMode: "monotone",
+                })),
+              }}
+            />
+          </div>
+        </Partial>
       </main>
     </>
   );

diff --git a/routes/dashboard/users.tsx b/routes/dashboard/users.tsx
@@ -4,6 +4,7 @@ import TabsBar from "@/components/TabsBar.tsx";
 import { HEADING_WITH_MARGIN_STYLES } from "@/utils/constants.ts";
 import UsersTable from "@/islands/UsersTable.tsx";
 import { defineRoute } from "$fresh/server.ts";
+import { Partial } from "$fresh/runtime.ts";
 
 export default defineRoute((_req, ctx) => {
   const endpoint = "/api/users";
@@ -18,7 +19,7 @@ export default defineRoute((_req, ctx) => {
           rel="preload"
         />
       </Head>
-      <main class="flex-1 p-4">
+      <main class="flex-1 p-4 f-client-nav">
         <h1 class={HEADING_WITH_MARGIN_STYLES}>Dashboard</h1>
         <TabsBar
           links={[{
@@ -30,7 +31,9 @@ export default defineRoute((_req, ctx) => {
           }]}
           currentPath={ctx.url.pathname}
         />
-        <UsersTable endpoint={endpoint} />
+        <Partial name="users">
+          <UsersTable endpoint={endpoint} />
+        </Partial>
       </main>
     </>
   );