feat(client): improve user experience

client/app/(auth)/login/page.jsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
+import { set, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { LoaderCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -31,11 +31,7 @@ export default function Page() {
   const { toast } = useToast();
 
   const form = useForm({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      username: '',
-      password: ''
-    }
+    resolver: zodResolver(formSchema)
   });
 
   async function onSubmit(values) {
@@ -48,6 +44,7 @@ export default function Page() {
         description: 'bir hata oluştu. lütfen daha sonra tekrar deneyin.',
         duration: 3000
       });
+      setIsSubmitting(false);
       return;
     }
     if (response.status === 401) {
@@ -56,10 +53,10 @@ export default function Page() {
         description: 'kullanıcı adı veya parola yanlış.',
         duration: 3000
       });
+      setIsSubmitting(false);
       return;
     }
 
-    form.reset();
     setIsSubmitting(false);
     router.push('/app');
     router.refresh();
@@ -105,7 +102,7 @@ export default function Page() {
                 <FormItem className='space-y-1'>
                   <FormLabel>parola</FormLabel>
                   <FormControl>
-                    <Input type='password' className='text-xs' {...field} />
+                    <Input type='password' {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>

client/app/app/explore/guilds/page.jsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'çöplükler';
+}

client/app/app/explore/layout-content.jsx

@@ -0,0 +1,39 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+export default function LayoutContent({ children }) {
+  const pathname = usePathname();
+  const path = pathname.split('/')[3];
+
+  return (
+    <Tabs value={path}>
+      <TabsList className='grid w-full grid-cols-3'>
+        <TabsTrigger value='posts' asChild>
+          <Link href='/app/explore/posts'>çöpler</Link>
+        </TabsTrigger>
+        <TabsTrigger value='guilds' asChild>
+          <Link href='/app/explore/guilds'>çöplükler</Link>
+        </TabsTrigger>
+        <TabsTrigger value='users' asChild>
+          <Link href='/app/explore/users'>çöpçüler</Link>
+        </TabsTrigger>
+      </TabsList>
+      <AnimatePresence mode='wait'>
+        <motion.div
+          key={path}
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ ease: 'easeInOut', duration: 0.3 }}
+        >
+          <TabsContent value='posts'>{children}</TabsContent>
+          <TabsContent value='guilds'>{children}</TabsContent>
+          <TabsContent value='users'>{children}</TabsContent>
+        </motion.div>
+      </AnimatePresence>
+    </Tabs>
+  );
+}

client/app/app/explore/layout.jsx

@@ -1,7 +1,9 @@
+import LayoutContent from "@/app/app/explore/layout-content";
+
 export const metadata = {
   title: 'keşfet'
 };
 
 export default function Layout({ children }) {
-  return children;
+  return <LayoutContent>{children}</LayoutContent>;
 }

client/app/app/explore/posts/page.jsx

@@ -0,0 +1,14 @@
+'use client';
+
+import PostList from '@/components/app/Post/List';
+import { getPosts } from '@/lib/api/posts';
+
+export default function Page() {
+  const fetchPosts = async (offset) => {
+    return await getPosts(11, offset);
+  };
+
+  return (
+    <PostList fetchPosts={fetchPosts} />
+  );
+}

client/app/app/explore/users/page.jsx

@@ -0,0 +1,12 @@
+'use client';
+
+import UserList from '@/components/app/User/List';
+import { getUsers } from '@/lib/api/users';
+
+export default function Page() {
+  const fetchUsers = async (offset) => {
+    return await getUsers(11, offset);
+  };
+
+  return <UserList fetchUsers={fetchUsers} />;
+}

client/app/app/users/[slug]/page.jsx

@@ -94,7 +94,7 @@ export default function Page({ params }) {
             </>
           )}
           <div className='mt-10'>
-            <div className='text-xs text-zinc-400 mb-5'>çöpler</div>
+            <div className='text-xs text-zinc-400 mb-3'>çöpler</div>
             <PostList fetchPosts={fetchPosts} />
           </div>
         </div>

client/components/app/Navbar/Collapsed.jsx

@@ -16,7 +16,7 @@ export default function Collapsed({ router, pathname }) {
   useEffect(() => {
     if (pathname === '/app') {
       setIcon(<Home className='h-4 w-4' />);
-    } else if (pathname === '/app/explore') {
+    } else if (pathname.startsWith('/app/explore')) {
       setIcon(<Compass className='h-4 w-4' />);
     } else if (pathname === '/app/notifications') {
       setIcon(<Bell className='h-4 w-4' />);

client/components/app/Post/List.jsx

@@ -8,7 +8,6 @@ export default function PostList({ fetchPosts }) {
   const [posts, setPosts] = useState([]);
   const [offset, setOffset] = useState(10);
   const [hasMorePost, setHasMorePost] = useState(true);
-  const [loading, setLoading] = useState(false);
   const { toast } = useToast();
 
   const handleDelete = (postId) => {
@@ -43,9 +42,7 @@ export default function PostList({ fetchPosts }) {
 
   useEffect(() => {
     const fetchInitialPosts = async () => {
-      setLoading(true);
       const response = await fetchPosts(0);
-      setLoading(false);
 
       if (!response) {
         toast({
@@ -72,10 +69,7 @@ export default function PostList({ fetchPosts }) {
 
   return (
     <div className='flex flex-col gap-2'>
-      {loading && (
-        <LoaderCircle className='mt-3 w-4 h-4 animate-spin self-center' />
-      )}
-      {!loading && posts.length > 0 ? (
+      {posts.length > 0 ? (
         <>
           {posts.map((post) => (
             <Post key={post.id} post={post} onDelete={handleDelete} />
@@ -87,11 +81,9 @@ export default function PostList({ fetchPosts }) {
           )}
         </>
       ) : (
-        !loading && (
-          <div className='flex flex-col items-center justify-center text-sm'>
-            buralar şimdilik sessiz.
-          </div>
-        )
+        <div className='flex flex-col items-center justify-center text-sm'>
+          buralar şimdilik sessiz.
+        </div>
       )}
     </div>
   );

client/next.config.mjs

@@ -7,6 +7,11 @@ const nextConfig = {
         destination: '/app/settings/profile',
         permanent: true,
       },
+      {
+        source: '/app/explore',
+        destination: '/app/explore/posts',
+        permanent: true,
+      }
     ];
   }
 };