chore: organize components

Author: avashForReal

src/app/(ui)/(protected)/layout.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import TopHeader from "@/components/top-header";
 import { useGetProfile } from "@/hooks/user/user.hooks";
 import { BoxLoader } from "@/components/loader";
-import ChangePassword from "@/components/change-password";
+import ChangePassword from "@/components/user/change-password";
 
 export default function ProtectedLayout({ children }: { children: React.ReactNode }) {
     const [checking, setChecking] = useState(true);

src/app/(ui)/(protected)/page.tsx

@@ -3,6 +3,7 @@
 import { BoxLoader } from "@/components/loader";
 import PageHeader from "@/components/page-header";
 import Proxies from "@/components/proxies/proxies";
+import ProxiesActions from "@/components/proxies/proxies-actions";
 import { Separator } from "@/components/ui/separator";
 import { useGetRegisteredDomains } from "@/hooks/domains/domain.hooks";
 
@@ -15,6 +16,7 @@ export default function Home() {
         title="Proxies"
         description="Manage your proxies from here!"
         showBackButton={false}
+        actions={<ProxiesActions />}
       />
       <Separator />
       {isLoading ? (

src/components/proxies/proxies-actions.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Button } from '../ui/button'
+import { IconPlus, IconRefresh } from '@tabler/icons-react'
+import { useQueryClient, useIsFetching } from '@tanstack/react-query'
+
+const ProxiesActions = () => {
+    const queryClient = useQueryClient();
+    const isFetchingDomains = useIsFetching({ queryKey: ["registered-domains"] });
+
+    const refreshProxies = async () => {
+        queryClient.invalidateQueries({
+            queryKey: ["registered-domains"]
+        })
+    }
+
+    const handleAddProxy = () => {
+
+    }
+
+    return (
+        <div className='flex items-center justify-end gap-4'>
+            <Button onClick={refreshProxies} className='cursor-pointer' variant={'outline'}>
+                <span>
+                    <IconRefresh className={isFetchingDomains ? 'animate-spin' : ''} />
+                </span>
+                Refresh
+            </Button>
+            <Button onClick={refreshProxies} className='cursor-pointer' variant={'default'}>
+                <span>
+                    <IconPlus className={isFetchingDomains ? 'animate-spin' : ''} />
+                </span>
+                Add Proxy
+            </Button>
+        </div>
+    )
+}
+
+export default ProxiesActions

src/components/top-header.tsx

@@ -3,7 +3,7 @@ import { Header } from "./header"
 import { usePathname } from "next/navigation"
 import Link from "next/link"
 import { ProfileDropdown } from "./profile-dropdown"
-import ChangePassword from "./change-password"
+import ChangePassword from "./user/change-password"
 import { useState } from "react"
 
 const NAV_ITEMS = [

src/components/change-password.tsx renamed to src/components/user/change-password.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './ui/dialog'
-import { Button } from './ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog'
+import { Button } from '../ui/button'
 import { cn } from '@/lib/utils'
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from './ui/form'
-import { PasswordInput } from './password-input'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
+import { PasswordInput } from '../password-input'
 import { PasswordChangeData, PasswordChangeSchema } from '@/schemas/user/auth.schema'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'