[Refactor] Разделить UI и side-effects в logout и нормализовать очистку кэша

src/features/auth/sign-out/model/useSignOut.ts

@@ -1,33 +1,28 @@
-import { type DefaultError, useMutation } from '@tanstack/react-query';
+import { type DefaultError, useMutation, UseMutationOptions } from '@tanstack/react-query';
 import { AuthHttp, TAuth } from 'entities/auth';
 import { useRouter } from 'next/navigation';
 import { AccessToken } from 'shared/api';
 import { routes } from 'shared/config';
 import { toast } from 'sonner';
 
-interface UseSignOutProps {
-  onSuccess?: (res: TAuth.SignoutResponse) => void;
-  onError?: (err: Error) => void;
-}
+export type UseSignOutOptions = Omit<
+  UseMutationOptions<TAuth.SignoutResponse, DefaultError>,
+  'mutationFn'
+>;
 
-export function useSignOut({ onSuccess, onError }: UseSignOutProps = {}) {
+export function useSignOut({ onSuccess, ...rest }: UseSignOutOptions = {}) {
   const router = useRouter();
 
   return useMutation<Awaited<TAuth.SignoutResponse>, DefaultError, void>({
+    ...rest,
     mutationFn: AuthHttp.signout,
-    onError: (err) => {
-      onError?.(err);
-    },
-    onSuccess: async (res, _v, _m, { client }) => {
-      onSuccess?.(res);
-
-      await client.cancelQueries();
-      client.clear();
-
+    onSuccess: async (res, _v, _r, context) => {
+      onSuccess?.(res, _v, _r, context);
+      await context.client.cancelQueries();
       AccessToken.clear();
-
-      toast.success(res.message || 'Вы вышли из аккаунта');
+      context.client.clear();
       router.replace(routes.auth.signin());
+      toast.success(res?.message || 'Вы вышли из аккаунта');
     },
   });
 }

src/features/auth/sign-out/ui/SignOut.tsx

@@ -1,22 +1,46 @@
 import { LogOut } from 'lucide-react';
-import type { ComponentProps } from 'react';
-import { Button } from 'shared/ui';
-import { useSignOut } from '../model/useSignOut';
+import { type ComponentProps } from 'react';
+import { Button, buttonVariants } from 'shared/ui';
+import { useSignOut, UseSignOutOptions } from '../model/useSignOut';
+import { Slot } from 'radix-ui';
+import { cn } from 'shared/lib/utils';
 
-function SignOut(props: Omit<ComponentProps<typeof Button>, 'children'>) {
-  const signoutMutation = useSignOut();
+type SignOutProps = ComponentProps<typeof Button> & {
+  mutateOptions?: UseSignOutOptions;
+};
 
+function SignOut({
+  asChild = false,
+  className = '',
+  variant = 'link',
+  size = 'default',
+  children = null,
+  mutateOptions = {},
+  ...props
+}: SignOutProps) {
+  const { mutate, isPending } = useSignOut(mutateOptions);
+  const Com = asChild ? Slot.Root : 'button';
   return (
-    <Button
-      className="text-destructive"
-      variant="link"
-      onClick={() => signoutMutation.mutate()}
-      disabled={signoutMutation.isPending}
+    <Com
+      className={
+        asChild ? className : cn(buttonVariants({ variant, size }), 'text-destructive', className)
+      }
+      onClick={() => mutate()}
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      disabled={isPending}
       {...props}
     >
-      Выйти
-      <LogOut className="size-4" />
-    </Button>
+      {asChild ? (
+        children
+      ) : (
+        <>
+          Выйти
+          <LogOut className="size-4" />
+        </>
+      )}
+    </Com>
   );
 }
 

src/widgets/app-sidebar/ui/NavUser.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { BadgeCheck, ChevronsUpDown } from 'lucide-react';
+import { BadgeCheck, ChevronsUpDown, LogOut } from 'lucide-react';
 import {
   Avatar,
   AvatarFallback,
@@ -77,9 +77,13 @@ export function NavUser() {
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem asChild>
-              <SignOut className="w-full justify-between" />
-            </DropdownMenuItem>
+
+            <SignOut asChild className="w-full justify-between">
+              <DropdownMenuItem>
+                Выйти
+                <LogOut className="size-4" />
+              </DropdownMenuItem>
+            </SignOut>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>