From 9ec2efadd834f440da1c1c0f025f1688f0ba2c96 Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seveibar@gmail.com>
Date: Mon, 21 Oct 2024 14:06:18 -0700
Subject: [PATCH] order My Snippets by last created time (#108)

* order My Snippets by last created time

* fix sorting of recent snippets on quickstart page

* fix type issues
---
 bun.lockb                       | Bin 328279 -> 329365 bytes
 package.json                    |   2 +-
 src/hooks/use-run-tsx/index.tsx |   2 +-
 src/pages/dashboard.tsx         |   6 +++-
 src/pages/quickstart.tsx        |  49 ++++++++++++++++++--------------
 src/pages/user-profile.tsx      |  17 +++++++++--
 6 files changed, 50 insertions(+), 26 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 3e6ba40d6574b73079954be8d32b4b0de882461b..cd82c347b4a8ae4bf69ad854553ff987584c0ca5 100755
GIT binary patch
delta 5517
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

delta 4806
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
HzU1?7zb!u#

diff --git a/package.json b/package.json
index ad7ecfa..8bc58f9 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "@babel/standalone": "^7.25.6",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
-    "@tscircuit/core": "^0.0.120",
+    "@tscircuit/core": "^0.0.126",
     "@tscircuit/prompt-benchmarks": "^0.0.14",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
diff --git a/src/hooks/use-run-tsx/index.tsx b/src/hooks/use-run-tsx/index.tsx
index 1ee3460..8aedaf4 100644
--- a/src/hooks/use-run-tsx/index.tsx
+++ b/src/hooks/use-run-tsx/index.tsx
@@ -159,7 +159,7 @@ export const useRunTsx = ({
             compiledModule: module,
             compiledJs,
             message: "",
-            circuitJson,
+            circuitJson: circuitJson as AnyCircuitElement[],
             isLoading: false,
           })
         } catch (error: any) {
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 22e193b..fc9d41c 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -21,7 +21,11 @@ export const DashboardPage = () => {
     error,
   } = useQuery<Snippet[]>("userSnippets", async () => {
     const response = await axios.get(`/snippets/list?owner_name=${currentUser}`)
-    return response.data.snippets
+    return response.data.snippets.sort(
+      (a: any, b: any) =>
+        new Date(b.updated_at || b.created_at).getTime() -
+        new Date(a.updated_at || a.created_at).getTime(),
+    )
   })
 
   const { data: trendingSnippets } = useQuery<Snippet[]>(
diff --git a/src/pages/quickstart.tsx b/src/pages/quickstart.tsx
index 33e5130..27199ad 100644
--- a/src/pages/quickstart.tsx
+++ b/src/pages/quickstart.tsx
@@ -41,32 +41,39 @@ export const QuickstartPage = () => {
     <div>
       <Header />
       <div className="container mx-auto px-4 py-8">
-        <div className="mb-8">
+        <div className="mb-8 hidden md:block">
           <h2 className="text-xl font-semibold mb-4">Recent Snippets</h2>
           {isLoading ? (
             <div>Loading...</div>
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              {mySnippets?.slice(0, 6).map((snippet) => (
-                <Link
-                  key={snippet.snippet_id}
-                  href={`/editor?snippet_id=${snippet.snippet_id}`}
-                >
-                  <Card className="hover:shadow-md transition-shadow rounded-md">
-                    <CardHeader className="pb-0 p-4">
-                      <CardTitle className="text-md">
-                        {snippet.unscoped_name}
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="p-4 pt-0">
-                      <p className="text-sm text-gray-500">
-                        Last edited:{" "}
-                        {new Date(snippet.updated_at).toLocaleDateString()}
-                      </p>
-                    </CardContent>
-                  </Card>
-                </Link>
-              ))}
+              {mySnippets
+                ?.sort(
+                  (a, b) =>
+                    new Date(b.created_at).getTime() -
+                    new Date(a.created_at).getTime(),
+                )
+                .slice(0, 4)
+                .map((snippet) => (
+                  <Link
+                    key={snippet.snippet_id}
+                    href={`/editor?snippet_id=${snippet.snippet_id}`}
+                  >
+                    <Card className="hover:shadow-md transition-shadow rounded-md">
+                      <CardHeader className="pb-0 p-4">
+                        <CardTitle className="text-md">
+                          {snippet.unscoped_name}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent className="p-4 pt-0">
+                        <p className="text-sm text-gray-500">
+                          Last edited:{" "}
+                          {new Date(snippet.updated_at).toLocaleDateString()}
+                        </p>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                ))}
             </div>
           )}
         </div>
diff --git a/src/pages/user-profile.tsx b/src/pages/user-profile.tsx
index c568323..288ad3c 100644
--- a/src/pages/user-profile.tsx
+++ b/src/pages/user-profile.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { useParams } from "wouter"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
@@ -8,10 +8,12 @@ import { Snippet } from "fake-snippets-api/lib/db/schema"
 import { Link } from "wouter"
 import { Button } from "@/components/ui/button"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
+import { Input } from "@/components/ui/input"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
   const axios = useAxios()
+  const [searchQuery, setSearchQuery] = useState("")
 
   const { data: userSnippets, isLoading } = useQuery<Snippet[]>(
     ["userSnippets", username],
@@ -21,6 +23,10 @@ export const UserProfilePage = () => {
     },
   )
 
+  const filteredSnippets = userSnippets?.filter((snippet) =>
+    snippet.unscoped_name.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
   return (
     <div>
       <Header />
@@ -40,11 +46,18 @@ export const UserProfilePage = () => {
           </a>
         </div>
         <h2 className="text-2xl font-semibold mb-4">Snippets</h2>
+        <Input
+          type="text"
+          placeholder="Search snippets..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="mb-4"
+        />
         {isLoading ? (
           <div>Loading snippets...</div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {userSnippets?.map((snippet) => (
+            {filteredSnippets?.map((snippet) => (
               <Link
                 key={snippet.snippet_id}
                 href={`/${snippet.owner_name}/${snippet.unscoped_name}`}