Tiny adjustments

4 files changed, 36 insertions, 16 deletions

diff --git a/src/app/groups/actions.ts b/src/app/groups/actions.ts
new file mode 100644
index 0000000..2d07004
--- /dev/null
+++ b/src/app/groups/actions.ts
@@ -0,0 +1,7 @@
+'use server'
+import { getGroups } from "@/lib/api"
+
+export async function getGroupsAction(groupIds: string[]) {
+  'use server'
+  return getGroups(groupIds)
+}
diff --git a/src/app/groups/layout.tsx b/src/app/groups/layout.tsx
index df7d39e..65aec0e 100644
--- a/src/app/groups/layout.tsx
+++ b/src/app/groups/layout.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react'
 
 export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
   return (
-    <main className="flex-1 max-w-screen-md w-full mx-auto p-4">
+    <main className="flex-1 max-w-screen-md w-full mx-auto p-4 flex flex-col gap-2">
       {children}
     </main>
   )
diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 0c46d99..4a0d286 100644
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -1,6 +1,5 @@
 import { RecentGroupList } from '@/app/groups/recent-group-list'
 import { Button } from '@/components/ui/button'
-import { getGroups } from '@/lib/api'
 import { Plus } from 'lucide-react'
 import { Metadata } from 'next'
 import Link from 'next/link'
@@ -10,13 +9,8 @@ export const metadata: Metadata = {
 }
 
 export default async function GroupsPage() {
-  async function getGroupsAction(groupIds: string[]) {
-    'use server'
-    return getGroups(groupIds)
-  }
-
   return (
-    <main>
+    <>
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-2">
         <h1 className="font-bold text-2xl mb-4">
           <Link href="/groups">Recently visited groups</Link>
@@ -28,7 +22,7 @@ export default async function GroupsPage() {
           </Link>
         </Button>
       </div>
-      <RecentGroupList getGroupsAction={getGroupsAction} />
-    </main>
+      <RecentGroupList />
+    </>
   )
 }
diff --git a/src/app/groups/recent-group-list.tsx b/src/app/groups/recent-group-list.tsx
index 92bc743..60e3922 100644
--- a/src/app/groups/recent-group-list.tsx
+++ b/src/app/groups/recent-group-list.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { getGroupsAction } from '@/app/groups/actions'
 import { getRecentGroups } from '@/app/groups/recent-groups-helpers'
 import { Button } from '@/components/ui/button'
 import { getGroups } from '@/lib/api'
@@ -28,7 +29,7 @@ type Props = {
   getGroupsAction: (groupIds: string[]) => ReturnType<typeof getGroups>
 }
 
-export function RecentGroupList({ getGroupsAction }: Props) {
+export function RecentGroupList() {
   const [state, setState] = useState<State>({ status: 'pending' })
 
   useEffect(() => {
@@ -37,15 +38,30 @@ export function RecentGroupList({ getGroupsAction }: Props) {
     getGroupsAction(groupsInStorage.map((g) => g.id)).then((groupsDetails) => {
       setState({ status: 'complete', groups: groupsInStorage, groupsDetails })
     })
-  }, [getGroupsAction])
+  }, [])
 
-  if (state.status === 'pending')
+  if (state.status === 'pending') {
     return (
       <p>
         <Loader2 className="w-4 m-4 mr-2 inline animate-spin" /> Loading recent
         groups…
       </p>
     )
+  }
+
+  if (state.groups.length === 0) {
+    return (
+      <div className="text-sm space-y-2">
+        <p>You have not visited any group recently.</p>
+        <p>
+          <Button variant="link" asChild className="-m-4">
+            <Link href={`/groups/create`}>Create one</Link>
+          </Button>{' '}
+          or ask a friend to send you the link to an existing one.
+        </p>
+      </div>
+    )
+  }
 
   return (
     <ul className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
@@ -70,9 +86,12 @@ export function RecentGroupList({ getGroupsAction }: Props) {
                         <div className="flex items-center">
                           <Calendar className="w-3 h-3 inline mx-1" />
                           <span>
-                            {details.createdAt.toLocaleDateString('en-US', {
-                              dateStyle: 'medium',
-                            })}
+                            {new Date(details.createdAt).toLocaleDateString(
+                              'en-US',
+                              {
+                                dateStyle: 'medium',
+                              },
+                            )}
                           </span>
                         </div>
                       </div>