Feature/connect-and-disconnect-oauth-provider

src/app/providers/AppProviders.tsx

@@ -2,7 +2,6 @@ import { PropsWithChildren } from 'react';
 import { QueryProvider } from './QueryProvider';
 import { Toaster, TooltipProvider } from 'shared/ui';
 import { FrontendObservability } from 'shared/config/';
-
 export function AppProviders({ children }: PropsWithChildren) {
   return (
     <>

src/entities/auth/api/http.ts

@@ -96,16 +96,17 @@ export class AuthHttp {
       signal,
     });
   }
-  static connectedOAuthProviders() {
+  static connectedOAuthProviders(signal: AbortSignal) {
     return api<TAuth.ConnectedOAuthProvidersResponse>({
       url: '/auth/oauth/providers/connected',
       method: 'GET',
       contracts: {
         response: SAuth.ConnectedOAuthProvidersResponse,
       },
+      signal,
     });
   }
-  static connecteOAuthProvder(provider: TAuth.OAuthProvider) {
+  static connectOAuthProvder(provider: TAuth.OAuthProvider) {
     return api<TAuth.ConnectOAuthProviderResponse>({
       url: `/auth/oauth/${provider}/connect`,
       method: 'POST',

src/entities/auth/api/queries.ts

@@ -1,12 +1,20 @@
 import { queryOptions } from '@tanstack/react-query';
 import { AuthHttp } from './http';
+import { authFabricKeys } from '../model/const';
 
 export class AuthQueries {
   static getOAuthProviders() {
     return queryOptions({
-      queryKey: ['oauth-providers'],
+      queryKey: authFabricKeys.availableProviders(),
       queryFn: async ({ signal }) => AuthHttp.oAuthProviders(signal),
       staleTime: 60_000 * 360 * 24,
     });
   }
+  static getConnectedOAuthProviders() {
+    return queryOptions({
+      queryKey: authFabricKeys.connectedProviders(),
+      queryFn: async ({ signal }) => AuthHttp.connectedOAuthProviders(signal),
+      staleTime: 60_000 * 360 * 24,
+    });
+  }
 }

src/entities/auth/config/oauth-providers.ts

@@ -0,0 +1,26 @@
+import { type TAuth } from 'entities/auth';
+import YandexIcon from 'public/yandex-logo.svg';
+import VkontakteIcon from 'public/vkontakte-logo.svg';
+import GoogleIcon from 'public/google-logo.svg';
+import GithubIcon from 'public/github-logo.svg';
+
+export type OAuthProviderMeta = {
+  iconSrc: string;
+  buttonClassName?: string;
+};
+
+export const OAUTH_PROVIDERS: Record<TAuth.OAuthProvider, OAuthProviderMeta> = {
+  yandex: {
+    iconSrc: YandexIcon,
+    buttonClassName: 'text-[#fc3f1d] hover:text-[#fc3f1d]',
+  },
+  vkontakte: {
+    iconSrc: VkontakteIcon,
+    buttonClassName: 'bg-[#07f] hover:bg-[#07f]',
+  },
+  google: { iconSrc: GoogleIcon },
+  github: {
+    iconSrc: GithubIcon,
+    buttonClassName: 'bg-[#24292f] hover:bg-[#24292f] text-white hover:text-white ',
+  },
+} as const;

src/entities/auth/index.ts

@@ -3,3 +3,5 @@ export type * as TAuth from './model/types';
 export * as CAuth from './model/const';
 export { AuthHttp } from './api/http';
 export { AuthQueries } from './api/queries';
+export { authFabricKeys } from './model/const';
+export { OAUTH_PROVIDERS } from './config/oauth-providers';

src/entities/auth/model/const.ts

@@ -1,6 +1,13 @@
+import { createEntityKeys } from 'shared/lib/utils';
+
 export const MIN_PASS_LENGTH = 8;
 export const MAX_PASS_LENGTH = 32;
 export const OTP_LENGTH = 6;
 
 export const MIN_NAME_LENGTH = 2;
 export const MAX_NAME_LENGTH = 50;
+
+export const authFabricKeys = createEntityKeys('auth', {
+  availableProviders: () => ['providers', 'available'],
+  connectedProviders: () => ['providers', 'connected'],
+});

src/features/auth/oauth-login/ui/OAuthButton.tsx

@@ -0,0 +1,48 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { Button } from 'shared/ui';
+import { cn } from 'shared/lib/utils';
+import { OAUTH_PROVIDERS } from 'entities/auth';
+import type { ButtonHTMLAttributes } from 'react';
+import type { Route } from 'next';
+import type { TAuth } from 'entities/auth';
+
+type OAuthButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+  iconClassName?: string;
+  href: Route;
+  data: {
+    label: string;
+    value: TAuth.OAuthProvider;
+  };
+};
+
+export function OAuthButton({ className, iconClassName, href, data, ...props }: OAuthButtonProps) {
+  const { label, value } = data;
+  const meta = OAUTH_PROVIDERS[value];
+
+  if (!meta) return null;
+
+  return (
+    <Button
+      type="button"
+      size={meta.iconSrc ? 'icon' : 'default'}
+      variant={'outline'}
+      className={cn(meta.buttonClassName, className)}
+      {...props}
+    >
+      <Link href={href} className="text-base">
+        {meta.iconSrc ? (
+          <Image
+            src={meta.iconSrc}
+            alt={label}
+            width={24}
+            height={24}
+            className={cn('size-6', iconClassName)}
+          />
+        ) : (
+          label
+        )}
+      </Link>
+    </Button>
+  );
+}

src/features/auth/oauth-login/ui/OAuthLoginButtons.tsx

@@ -1,38 +1,32 @@
 'use client';
-import { Button, Skeleton } from 'shared/ui';
-import { OAUTH_PROVIDERS, OAUTH_PROVIDERS_COUNT } from '../model/consts';
+import { Skeleton } from 'shared/ui';
 import { cn } from 'shared/lib/utils';
-import Link from 'next/link';
 import { useQuery } from '@tanstack/react-query';
 import { AuthQueries } from 'entities/auth';
+import { routes } from 'shared/config';
+import { OAuthButton } from './OAuthButton';
+import { type TAuth } from 'entities/auth';
+import { type StartOauthParams } from '../model/types';
 import { type Route } from 'next';
 
+export const getRoute = (provider: TAuth.OAuthProvider) => {
+  const params = new URLSearchParams({
+    provider,
+    startOAuth: 'true',
+  } satisfies Record<keyof StartOauthParams, string>);
+
+  return `${routes.auth.oauth()}?${params.toString()}`;
+};
+
 export function OAuthLoginButtons({ className }: { className?: string }) {
   const { data, isLoading } = useQuery(AuthQueries.getOAuthProviders());
 
   return (
     <div className={cn('flex items-center justify-center gap-2', className)}>
-      {isLoading &&
-        Array.from({ length: OAUTH_PROVIDERS_COUNT }, (_v, i) => (
-          <Skeleton className="size-8" key={i} />
-        ))}
+      {isLoading && Array.from({ length: 3 }, (_v, i) => <Skeleton className="size-8" key={i} />)}
 
       {data?.map((item) => {
-        const providerConfig = OAUTH_PROVIDERS[item.value];
-
-        return (
-          <Button
-            asChild
-            style={{ backgroundColor: providerConfig.color }}
-            key={item.value}
-            size={'icon'}
-            variant={'outline'}
-          >
-            <Link href={providerConfig.href as Route}>
-              <providerConfig.icon className="size-6" />
-            </Link>
-          </Button>
-        );
+        return <OAuthButton key={item.value} data={item} href={getRoute(item.value) as Route} />;
       })}
     </div>
   );

src/features/handle-query-params/index.ts

@@ -0,0 +1 @@
+export { QueryParamsHandler } from './ui/QueryParamsHandler';

src/features/handle-query-params/ui/QueryParamsHandler.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { type Route } from 'next';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+
+export function QueryParamsHandler() {
+  const params = useSearchParams();
+  const isShowToast = useRef(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const success = params?.get('success');
+    const message = params?.get('message');
+
+    if (isShowToast.current || !success) return;
+
+    if (success === 'true') {
+      toast.success(message || 'Операция выполнена успешно');
+    } else if (success === 'false') {
+      toast.error(message || 'Произошла ошибка. Пожалуйста, попробуйте позже');
+    }
+
+    isShowToast.current = true;
+    router.replace(location.pathname as Route);
+  }, [params, router]);
+
+  return null;
+}