Fix tree history (#118)

* Try with enabled

* Try adding some logging

* Interesting semantics

* We are erroring out

* We were not erroring out, thanks copilot

* Remove unnecesary code

* Add link to tree history from new thing

* Remove console log

Author: odarbelaeze

src/components/upload/Tos/New.tsx

@@ -7,7 +7,7 @@ import { createOpenAlexTree } from "./createTree";
 import { useMutation } from "@tanstack/react-query";
 import { logEvent } from "firebase/analytics";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 const New = () => {
   const navigate = useNavigate();
@@ -22,7 +22,7 @@ const New = () => {
   });
 
   return (
-    <div>
+    <div className="flex flex-col gap-8">
       <form
         className="flex flex-col gap-8"
         onSubmit={(e) => {
@@ -50,6 +50,14 @@ const New = () => {
           </button>
         </div>
       </form>
+      <div className="flex flex-row items-center justify-center">
+        <Link
+          className="text-sky-600 hover:text-sky-800 active:text-sky-800"
+          to="/history"
+        >
+          Tree History
+        </Link>
+      </div>
     </div>
   );
 };

src/components/upload/TreeHistory/hooks/useTrees.ts

@@ -25,7 +25,7 @@ export const useTrees = (userId: string, max: number) => {
   const firebase = useFirebase();
   const [limit, setLimit] = useState(25);
   const query = useQuery({
-    queryKey: ["trees", limit],
+    queryKey: ["trees", userId, limit],
     queryFn: async () => {
       const query = getQuery(firebase.firestore, userId, limit);
       return (await getDocs(query)).docs;

src/components/upload/TreeHistory/index.tsx

@@ -39,6 +39,7 @@ const TreeHistory = ({ userId }: Props) => {
 
   if (!user) return "You must log in to see your history";
   if (!trees.query.data?.length) return "No trees found";
+  if (trees.query.isError) return "There was an error loading your trees";
 
   const data = sortBy(
     trees.query.data.map((doc) => {
@@ -57,7 +58,7 @@ const TreeHistory = ({ userId }: Props) => {
     <div className="flex flex-col gap-3">
       {user.plan === "basic" ? (
         <ul className="flex flex-col gap-2">
-          <Items trees={data.slice(3)} />
+          <Items trees={data.slice(0, 3)} />
         </ul>
       ) : (
         <div className="flex flex-col gap-8">