Cleanup starter (#334)

Author: KyleAMathews

examples/react/projects/src/routes/_authenticated.tsx

@@ -1,92 +1,60 @@
-import { createFileRoute, useNavigate, Link } from "@tanstack/react-router"
+import {
+  Link,
+  Outlet,
+  createFileRoute,
+  useNavigate,
+} from "@tanstack/react-router"
 import { useEffect, useState } from "react"
-import { Outlet } from "@tanstack/react-router"
+import { useLiveQuery } from "@tanstack/react-db"
 import { authClient } from "@/lib/auth-client"
-import {
-  useLiveQuery,
-  createCollection,
-  liveQueryCollectionOptions,
-  createLiveQueryCollection,
-  not,
-  like,
-  count,
-} from "@tanstack/react-db"
 import { projectCollection } from "@/lib/collections"
 
-export const Route = createFileRoute("/_authenticated")({
+export const Route = createFileRoute(`/_authenticated`)({
   component: AuthenticatedLayout,
   ssr: false,
 })
 
 function AuthenticatedLayout() {
   const { data: session, isPending } = authClient.useSession()
-  console.log({ session, isPending })
   const navigate = useNavigate()
   const [showNewProjectForm, setShowNewProjectForm] = useState(false)
-  const [newProjectName, setNewProjectName] = useState("")
-
-  const countQuery = createLiveQueryCollection({
-    query: (q) =>
-      q.from({ projects: projectCollection }).select(({ projects }) => ({
-        count: count(projects.id),
-      })),
-  })
-  const newQuery = createCollection(
-    liveQueryCollectionOptions({
-      query: (q) =>
-        q
-          .from({ projects: projectCollection })
-          .where(({ projects }) => not(like(projects.name, `Default`))),
-    })
-  )
+  const [newProjectName, setNewProjectName] = useState(``)
 
-  const { data: notDefault } = useLiveQuery(newQuery)
-  const { data: countData } = useLiveQuery(countQuery)
-  console.log({ notDefault, countData })
   const { data: projects, isLoading } = useLiveQuery((q) =>
     q.from({ projectCollection })
   )
 
   useEffect(() => {
-    if (!isPending && !session) {
-      navigate({
-        href: "/login",
+    if (session && projects.length === 0 && !isLoading) {
+      projectCollection.insert({
+        id: Math.floor(Math.random() * 100000),
+        name: `Default`,
+        description: `Default project`,
+        owner_id: session.user.id,
+        shared_user_ids: [],
+        created_at: new Date(),
+        updated_at: new Date(),
       })
     }
-  }, [session, isPending, navigate])
-
-  useEffect(() => {
-    if (session && projects && !isLoading) {
-      const hasProject = projects.length > 0
-      if (!hasProject) {
-        projectCollection.insert({
-          id: Math.floor(Math.random() * 100000),
-          name: "Default",
-          description: "Default project",
-          owner_id: session.user.id,
-          shared_user_ids: [],
-          created_at: new Date(),
-        })
-      }
-    }
   }, [session, projects, isLoading])
 
   const handleLogout = async () => {
     await authClient.signOut()
-    navigate({ to: "/login" })
+    navigate({ to: `/login` })
   }
 
   const handleCreateProject = () => {
     if (newProjectName.trim() && session) {
       projectCollection.insert({
         id: Math.floor(Math.random() * 100000),
         name: newProjectName.trim(),
-        description: "",
+        description: ``,
         owner_id: session.user.id,
         shared_user_ids: [],
         created_at: new Date(),
+        updated_at: new Date(),
       })
-      setNewProjectName("")
+      setNewProjectName(``)
       setShowNewProjectForm(false)
     }
   }
@@ -154,7 +122,7 @@ function AuthenticatedLayout() {
                   type="text"
                   value={newProjectName}
                   onChange={(e) => setNewProjectName(e.target.value)}
-                  onKeyDown={(e) => e.key === "Enter" && handleCreateProject()}
+                  onKeyDown={(e) => e.key === `Enter` && handleCreateProject()}
                   placeholder="Project name"
                   className="w-full px-2 py-1 border border-gray-300 rounded text-sm"
                 />

examples/react/projects/src/routes/_authenticated/index.tsx

@@ -7,10 +7,13 @@ export const Route = createFileRoute(`/_authenticated/`)({
   component: IndexRedirect,
   ssr: false,
   loader: async () => {
-    console.log(1)
+    const timeout = setTimeout(() => {
+      window.location.href = `/login`
+    }, 500)
     await projectCollection.preload()
     await todoCollection.preload()
-    console.log(2)
+    clearTimeout(timeout)
+
     return null
   },
 })
@@ -20,10 +23,10 @@ function IndexRedirect() {
   const { data: projects } = useLiveQuery((q) => q.from({ projectCollection }))
 
   useEffect(() => {
-    if (projects && projects.length > 0) {
+    if (projects.length > 0) {
       const firstProject = projects[0]
       navigate({
-        to: "/project/$projectId",
+        to: `/project/$projectId`,
         params: { projectId: firstProject.id.toString() },
         replace: true,
       })