fix: add no posts case

finds-su · Jun 30, 2023 · c85d98d · c85d98d
1 parent 7ed4f8d
commit c85d98d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/public/assets/illustrations/basket.png b/public/assets/illustrations/basket.png
diff --git a/src/components/posts/my-posts-list/my-posts-list.tsx b/src/components/posts/my-posts-list/my-posts-list.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react'
 import { formatDate } from '@/lib/format-date'
 import Link from 'next/link'
 import { Campus } from '@/lib/campus'
+import Image from 'next/image'
 
 interface MyPostsListProps {
   reason: PostItemReason
@@ -41,28 +42,42 @@ export default function MyPostsList(props: MyPostsListProps) {
       <ul role='list' className='divide-y divide-gray-100'>
         {myPostsListQuery.isLoading &&
           Array.from(Array(5).keys()).map((index) => <MyPostSkeleton key={index} />)}
-        {myPosts.map((myPost, index) => (
-          <Link href={myPost.id} key={index}>
-            <li className='flex justify-between gap-x-6 py-5'>
-              <div className='min-w-0'>
-                <p className='text-sm font-semibold leading-6 text-gray-900'>{myPost.name}</p>
-                <p className='mt-1 truncate text-xs leading-5 text-gray-500'>
-                  {myPost.description}
-                </p>
-              </div>
-              <div className='hidden sm:flex sm:flex-row sm:items-center sm:gap-x-4'>
-                <div className='flex flex-col items-end'>
-                  <p className='text-sm leading-6 text-gray-900'>{Campus[myPost.campus]}</p>
-                  <p className='mt-1 text-xs leading-5 text-gray-500'>
-                    {formatDate(myPost.created.toString())} —{' '}
-                    {formatDate(myPost.expires.toString())}
+        {!myPostsListQuery.isLoading && myPosts.length === 0 && (
+          <div className='flex h-110 flex-col items-center justify-center text-center font-medium text-gray-700 lg:h-130'>
+            <Image
+              src='/assets/illustrations/basket.png'
+              alt=''
+              width={200}
+              height={200}
+              priority={false}
+            />
+            Постов нет
+          </div>
+        )}
+        {!myPostsListQuery.isLoading &&
+          myPosts.length > 0 &&
+          myPosts.map((myPost, index) => (
+            <Link href={myPost.id} key={index}>
+              <li className='flex justify-between gap-x-6 py-5'>
+                <div className='min-w-0'>
+                  <p className='text-sm font-semibold leading-6 text-gray-900'>{myPost.name}</p>
+                  <p className='mt-1 truncate text-xs leading-5 text-gray-500'>
+                    {myPost.description}
                   </p>
                 </div>
-                <ChevronRightIcon className='h-5 w-5 text-gray-500' />
-              </div>
-            </li>
-          </Link>
-        ))}
+                <div className='hidden sm:flex sm:flex-row sm:items-center sm:gap-x-4'>
+                  <div className='flex flex-col items-end'>
+                    <p className='text-sm leading-6 text-gray-900'>{Campus[myPost.campus]}</p>
+                    <p className='mt-1 text-xs leading-5 text-gray-500'>
+                      {formatDate(myPost.created.toString())} —{' '}
+                      {formatDate(myPost.expires.toString())}
+                    </p>
+                  </div>
+                  <ChevronRightIcon className='h-5 w-5 text-gray-500' />
+                </div>
+              </li>
+            </Link>
+          ))}
       </ul>
     </Window>
   )