React Middle курс: Tanstack Query, OAuth2, openapi typescript, musicfun

pnpm create vite

# Основные
pnpm install @tanstack/react-query
pnpm install @tanstack/react-query-devtools
 
# Для генерации типов из OpenAPI
pnpm install -D openapi-typescript
pnpm install openapi-fetch
 
# Дополнительные
pnpm install react-hook-form
pnpm install @tanstack/react-router

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true
  }
}

function App() {
  useEffect(() => {
    ;(async function () {
      const response = await fetch("https://musicfun.it-incubator.app/api/1.0/playlists", {
        headers: {
          "api-key": "72c3121c-c679-4c0e-9131-2d3f35e6a3bd",
        },
      })
 
      const data = response.json()
      console.log(data)
    })()
  }, [])
}

"scripts": {
"api:gen": "pnpm openapi-typescript https://musicfun.it-incubator.app/api-json -o ./src/shared/api/schema.ts --root-types"
}

import createClient from "openapi-fetch"
import type { paths } from "./schema"
 
export const client = createClient<paths>({
  baseUrl: "https://musicfun.it-incubator.app/api/1.0",
  headers: {
    "api-key": "72c3121c-c679-4c0e-9131-2d3f35e6a3bd",
  },
})

function App() {
  useEffect(() => {
    ;(async function () {
      const response = await client.GET("/playlists")
      const data = response.data
      console.log(data)
    })()
  }, [])
}

import { createRoot } from "react-dom/client"
import "./index.css"
import App from "./App.tsx"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
const queryClient = new QueryClient() //создание экземпляра клиента React
// Query - управляет кэшем, контролирует настройки, синхронизирует данные
 
createRoot(document.getElementById("root")!).render(
  //React-компонент провайдер - предоставляет доступ к queryClient всему
  // дереву компонентов, создает контекст, должен оборачивать корневой
  // компонент приложения
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
)

function App() {
  //useEffect(() => {
  //  (async function() {
  //    const response = await client.GET('/playlists')
  //    const data = response.data;
  //    console.log(data)
  //  })()
  //}, [])
  const query = useQuery({
    queryKey: ["playlists"],
    queryFn: () => {
      client.GET("./playlists")
    },
  })
}

function App() {
  return (
    <>
      <h2>hello it-incubator!!!</h2>
      <Playlists />
    </>
  )
}
 
const Playlists = () => {
  const query = useQuery({
    queryKey: ["playlists"],
    queryFn: () => {
      client.GET("./playlists")
    },
  })
 
  return (
    <div>
      <ul>
        {query.data?.data?.data.map((playlist: { id }) => (
          <li>{playlist.attributes.title}</li>
        ))}
      </ul>
    </div>
  )
}

const Playlists = () => {
  const query = useQuery({
    staleTime: 10000,
    queryKey: ["playlists"],
    queryFn: () => {
      client.GET("./playlists")
    },
  })
}

function App() {
  const [isVisible, setIsVisible] = useState(true)
  useEffect(() => {
    setInterval(() => {
      setIsVisible((prev) => !prev)
    }, 3000)
  }, [])
  return (
    <>
      <h2>hello it-incubator!!!</h2>
      {isVisible && <Playlists />}
    </>
  )
}
 
const Playlists = () => {
  const query = useQuery({
    staleTime: Infinity,
    gcTime: 5 * 1000,
    queryKey: ["playlists"],
    queryFn: () => {
      client.GET("./playlists")
    },
  })
 
  return (
    <div>
      <ul>
        {query.data?.data?.data.map((playlist: { id }) => (
          <li>{playlist.attributes.title}</li>
        ))}
      </ul>
    </div>
  )
}

import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>,
)

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      gcTime: 5 * 1000,
    },
  },
})

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
 
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}
 
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
}
 
/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}
 
/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}
 
/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
 
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}
 
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
 
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}
 
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}
 
/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  background: #060707;
  color: #9c9c9c;
}
 
a {
  color: #9c9c9c;
}

pnpm add -D @tanstack/router-plugin

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { tanstackRouter } from "@tanstack/router-plugin/vite"
 
export default defineConfig({
  plugins: [
    tanstackRouter({
      target: "react",
      autoCodeSplitting: true,
    }),
    react(),
  ],
})

import { createRootRoute, Outlet } from "@tanstack/react-router"
 
export const Route = createRootRoute({
  component: () => (
    <>
      <Outlet />
    </>
  ),
})

import { createFileRoute } from "@tanstack/react-router"
import App from "../App.tsx"
 
export const Route = createFileRoute("/")({
  component: App,
})

import { createRoot } from "react-dom/client"
import "./styles/reset.css"
import "./styles/index.css"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
import { routeTree } from "../routes/routeTree.gen"
import { createRouter, RouterProvider } from "@tanstack/react-router"
 
// Create a new router instance
const router = createRouter({ routeTree })
 
// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router
  }
}
 
createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryClient}>
    <RouterProvider router={router} />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>,
)

import { Outlet } from "@tanstack/react-router"
 
export const RootLayout = () => (
  <>
    <Outlet />
  </>
)

import { createRootRoute } from "@tanstack/react-router"
import { RootLayout } from "../layouts/root-layout.tsx"
 
export const Route = createRootRoute({
  component: RootLayout,
})

import { createFileRoute } from "@tanstack/react-router"
import PlayListsPage from "../playlists-page.tsx"
 
export const Route = createFileRoute("/")({
  component: PlayListsPage,
})

import { Playlists } from "./playlists-page.tsx"
 
function MyPlaylistsPage() {
  // Show usages
 
  return (
    <>
      <h2>My Playlists</h2>
      <Playlists />
    </>
  )
}
 
export default MyPlaylistsPage

import { createFileRoute } from "@tanstack/react-router"
import MyPlaylistsPage from "../../pages/my-playlists-page.tsx"
 
export const Route = createFileRoute("/my-playlists")({
  component: MyPlaylistsPage,
})

export function OAuthCallbackPage() {
  // no usages
 
  return (
    <>
      <h2>OAuth2 Callback page</h2>
    </>
  )
}

import { createFileRoute } from "@tanstack/react-router"
import { OAuthCallbackPage } from "../../../pages/auth/oauth-callback-page.tsx"
 
export const Route = createFileRoute("/oauth/callback")({
  component: OAuthCallbackPage,
})

import { Link } from "@tanstack/react-router"
import styles from "./header.module.css"
import type { ReactNode } from "react"
 
type Props = {
  renderAccountBar: () => ReactNode
}
 
export const Header = ({ renderAccountBar }: Props) => {
  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <div className={styles.linksBlock}>
          <Link to="/">Playlists</Link>
          <Link to="/my-playlists">My Playlists</Link>
          <Link to="/oauth/callback">temp page</Link>
        </div>
 
        <div>{renderAccountBar()}</div>
      </div>
    </header>
  )
}

import { Outlet } from "@tanstack/react-router"
import { Header } from "../shared/ui/header.tsx"
 
export const RootLayout = () => {
  return (
    <>
      <Header renderAccountBar={() => <div>Account</div>} />
      <Outlet />
    </>
  )
}

export const Playlists = () => {
  const query = useQuery({
    queryKey: ["playlists"],
    queryFn: () => client.GET("/playlists"),
  })
 
  console.log("status:" + query.status)
  console.log("fetchStatus:" + query.fetchStatus)
 
  return (
    <div>
      <ul>
        {query.data?.data?.data.map((playlist) => (
          <li>{playlist.attributes.title}</li>
        ))}
      </ul>
    </div>
  )
}

export const Playlists = () => {
  const query = useQuery({
    queryKey: ["playlists"],
    queryFn: () => client.GET("/playlists"),
  })
 
  console.log("status:" + query.status)
  console.log("fetchStatus:" + query.fetchStatus)
 
  if (query.status === "pending") return <span>Loading...</span>
 
  return (
    <div>
      if (query.fetchStatus === 'fetching') return <span>⏳</span>
      <ul>
        {query.data?.data?.data.map((playlist) => (
          <li>{playlist.attributes.title}</li>
        ))}
      </ul>
    </div>
  )
}

export const Playlists = () => {
  const query = useQuery({
    queryKey: ["playlists"],
    queryFn: () => client.GET("/playlists"),
  })
 
  console.log("status:" + query.status)
  console.log("fetchStatus:" + query.fetchStatus)
 
  if (query.isPending) return <span>Loading...</span>
  if (query.isError) return <span>{JSON.stringify(query.error.message)}</span>
 
  return (
    <div>
      if (query.isFetching) return <span>⏳</span>
      <ul>
        {query.data.data?.data.map((playlist) => (
          <li>{playlist.attributes.title}</li>
        ))}
      </ul>
    </div>
  )
}

export const Playlists = () => {
  const query = useQuery({
    queryKey: ["playlists"],
    queryFn: async () => {
      const response = await client.GET("/playlists")
      return response.data! //сейчас будем считать что у нас точно есть данные
      // и ошибка не упадёт
    },
  })
 
  console.log("status:" + query.status)
  console.log("fetchStatus:" + query.fetchStatus)
 
  if (query.isPending) return <span>Loading...</span>
  if (query.isError) return <span>{JSON.stringify(query.error.message)}</span>
 
  return (
    <div>
      if (query.isFetching) return <span>⏳</span>
      <ul>
        {query.data.data?.data.map((playlist) => (
          <li>{playlist.attributes.title}</li>
        ))}
      </ul>
    </div>
  )
}

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 0,
      staleTime: Infinity,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      gcTime: 5 * 1000,
    },
  },
})

type Props = {
  current: number
  pagesCount: number
  onChange: (page: number) => void
}
 
const SIBLING_COUNT = 1
 
export const PaginationNav = ({ current, pagesCount, onChange }: Props) => {
  const pages = getPaginationPages(current, pagesCount, SIBLING_COUNT)
 
  return (
    <div className={s.pagination}>
      {pages.map((item, idx) =>
        item === "..." ? (
          <span className={s.ellipsis} key={`ellipsis-${idx}`}>
            ...
          </span>
        ) : (
          <button
            key={item}
            className={item === current ? `${s.pageButton} ${s.pageButtonActive}` : s.pageButton}
            onClick={() => item !== current && onChange(Number(item))}
            disabled={item === current}
            type="button"
          >
            {item}
          </button>
        ),
      )}
    </div>
  )
}

type Props = {
  current: number
  pagesCount: number
  changePageNumber: (page: number) => void
  isFetching: boolean
}
 
export const Pagination = ({ current, pagesCount, changePageNumber, isFetching }: Props) => {
  return (
    <div className={s.container}>
      <PaginationNav current={current} pagesCount={pagesCount} onChange={changePageNumber} />{" "}
      {isFetching && "X"}
    </div>
  )
}

import { keepPreviousData } from "@tanstack/react-query"
 
export const Playlists = () => {
  const [page, setPage] = useState(1)
 
  const query = useQuery({
    queryKey: ["playlists", page],
    queryFn: async () => {
      const response = await client.GET("/playlists", {
        params: {
          query: {
            pageNumber: page,
          },
        },
      })
      if (response.error) {
        throw (response as unknown as { error: Error }).error
      }
      return response.data
    },
    placeholderData: keepPreviousData,
  })
 
  console.log("status:" + query.status)
  console.log("fetchStatus:" + query.fetchStatus)
 
  if (query.isPending) return <span>Loading...</span>
  if (query.isError) return <span>{JSON.stringify(query.error.message)}</span>
 
  return (
    <div>
      <Pagination
        pageCount={query.data.meta.pagesCount}
        currentPage={page}
        onPageNumberChange={setPage}
        isFetching={query.isFetching}
      />
      <ul>
        {query.data.data?.data.map((playlist) => (
          <li>{playlist.attributes.title}</li>
        ))}
      </ul>
    </div>
  )
}

export const Playlists = () => {
 const [page, setPage] = useState(1)
 
 const query = useQuery({
   queryKey: ['playlists', page],
   queryFn: async ({signal}) => {
     // signal - это AbortSignal от AbortController
     const response = await client.GET('/playlists', {
      params:{
        query:{
          pageNumber: page
        }
      },
      signal
     })
     if (response.error){
       throw (response as unknown as {error:Error}).error
     }
     return response.data
   },
   placeholderData: keepPreviousData
 })

export const Playlists = () => {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
 
  const query = useQuery({
    queryKey: ["playlists", { page, search }], //при большом количестве параметров лучше объединять
    // их в объекты - это поможет избежать путаницы
    queryFn: async ({ signal }) => {
      const response = await client.GET("/playlists", {
        params: {
          query: {
            pageNumber: page,
            search,
          },
        },
        signal,
      })
      if (response.error) {
        throw (response as unknown as { error: Error }).error
      }
      return response.data
    },
    placeholderData: keepPreviousData,
  })
 
  console.log("status:" + query.status)
  console.log("fetchStatus:" + query.fetchStatus)
 
  if (query.isPending) return <span>Loading...</span>
  if (query.isError) return <span>{JSON.stringify(query.error.message)}</span>
 
  return (
    <div>
      <div>
        <input
          value={search}
          onChange={(e: ChangeEvent<HTMLInputElement>) => setSearch(e.currentTarget.value)}
          placeholder={"search..."}
        />
      </div>
      <hr />
      <Pagination
        pageCount={query.data.meta.pagesCount}
        currentPage={page}
        onPageNumberChange={setPage}
        isFetching={query.isFetching}
      />
      <ul>
        {query.data.data?.data.map((playlist) => (
          <li>{playlist.attributes.title}</li>
        ))}
      </ul>
    </div>
  )
}

import { useMutation } from "@tanstack/react-query"
import { client } from "../../../shared/api/client.ts"
 
export const LoginButton = () => {
  const mutation = useMutation({
    mutationFn: async ({ code }: { code: string }) => {
      const response = await client.POST("/auth/login", {
        body: {
          code: code,
          redirectURI: "?????",
          rememberMe: true,
          accessTokenTTL: "1d",
        },
      })
 
      if (response.error) {
        throw new Error(response.error.message)
      }
 
      return response.data
    },
  })
  const handleLoginClick = () => {
    //...
    mutation.mutate({ code: "?????" })
  }
 
  return <button onClick={handleLoginClick}>Login with GITHUB</button>
}

export const LoginButton = () => {
 const mutation = useMutation({...})
 const handleLoginClick = () => {
    const callbackUrl = 'http://localhost:5173/oauth/callback';
    window.open(`https://musicfun.it-incubator.app/api/1.0/auth/oauth-redirect?callbackUrl=${callbackUrl}`, 'apihub-oauth2', 'width=500, height=600');
 
return <button onClick={handleLoginClick}>Login with GITHUB</button>
}

import { Outlet } from "@tanstack/react-router"
import { Header } from "../shared/ui/header/header.tsx"
import styles from "./root-layout.module.css"
import { LoginButton } from "../features/auth/ui/login-button.tsx"
 
export const RootLayout = () => {
  return (
    <>
      <Header renderAccountBar={() => <LoginButton />} />
      <div className={styles.container}>
        <Outlet />
      </div>
    </>
  )
}

export function OAuthCallbackPage() {
  // no usages
 
  useEffect(() => {
    const url = new URL(window.location.href)
    const code = url.searchParams.get("code")
 
    if (code && window.opener) {
      window.opener.postMessage({ code }, window.location.origin)
    }
 
    window.close()
  }, [])
 
  return (
    <>
      <h2>OAuth2 Callback page</h2>
    </>
  )
}

export const LoginButton = () => {
 const callbackUrl = 'http://localhost:5173/oauth/callback';
 mutationFn: async ({code}: {code: string}) => {
     const response = await client.POST('/auth/login', {
       body: {
         code: code,
         redirectURI: callbackUrl,
         rememberMe: true,
         accessTokenTTL: '1d'
       }
     })
...
   }
 const handleLoginClick = () => {
   window.addEventListener('message', handleOAuthMessage)
   window.open(`https://musicfun.it-incubator.app/api/1.0/auth/oauth-redirect?callbackUrl=${callbackUrl}`, 'apihub-oauth2', 'width=500, height=600');
   const handleOAuthMessage = (event: MessageEvent) => {
     window.removeEventListener('message', handleOAuthMessage)
     if (event.origin !== document.location.origin) {
       console.warn('origin not match')
       return;
     }
 
   const code = event.data.code;
     if (!code) {
       console.warn('no code in message')
       return;
     }
 
   mutation.mutate({code})
...
}

import { useMutation } from "@tanstack/react-query"
import { client } from "../../../shared/api/client.ts"
 
export const LoginButton = () => {
  const mutation = useMutation({
    mutationFn: async ({ code }: { code: string }) => {
      const response = await client.POST("/auth/login", {
        body: {
          code: code,
          redirectURI: "?????",
          rememberMe: true,
          accessTokenTTL: "1d",
        },
      })
 
      if (response.error) {
        throw new Error(response.error.message)
      }
 
      return response.data
    },
    onSuccess: (data: { refreshToken: string; accessToken: string }) => {
      localStorage.setItem("musicfun-refresh-token", data.refreshToken)
      localStorage.setItem("musicfun-access-token", data.accessToken)
    },
  })
  const handleLoginClick = () => {
    //...
    mutation.mutate({ code: "?????" })
  }
 
  return <button onClick={handleLoginClick}>Login with GITHUB</button>
}

import createClient, {type Middleware} from "openapi-fetch"
import type { paths } from "./schema"
 
const myMiddleware: Middleware = {
 async onRequest({ request, options }: MiddlewareCallbackParams) {
   const accessToken = localStorage.getItem('musicfun-access-token');
   if (accessToken) {
     request.headers.set("Authorization", "Bearer " + accessToken);
   }
 
   return request;
 }
};
 
export const client = createClient <paths>
  {
    baseUrl: "https://musicfun.it-incubator.app/api/1.0/",
    headers: {
      "api-key": "72e3121c-c679-4c0e-9131-2d3f35e6a3bd",
    },
  }
 
client.use(authMiddleware);

import { LoginButton } from "./login-button.tsx"
import { useQuery } from "@tanstack/react-query"
import { client } from "../../../shared/api/client.ts"
 
export const AccountBar = () => {
  const query = useQuery({
    queryKey: ["auth", "me"],
    queryFn: async () => {
      const clientResponse = await client.GET("/auth/me")
      return clientResponse.data
    },
  })
 
  return (
    <div>
      {!query.data && <LoginButton />}
      {/*{query.data && <CurrentUser />}*/}
    </div>
  )
}

const myMiddleware: Middleware = {
 async onRequest({ request, options }: MiddlewareCallbackParams) {...}
 onResponse({ response }: MiddlewareCallbackParams & { response: Re... }) {
 if (!response.ok) {
   throw new Error(`${response.url}: ${response.status} ${response.statusText}`)
 }
}
};
 

import { Outlet } from "@tanstack/react-router"
import { Header } from "../shared/ui/header/header.tsx"
import styles from "./root-layout.module.css"
//import { LoginButton } from "../features/auth/ui/login-button.tsx"
import { AccountBar } from "../features/auth/ui/account-bar.tsx"
 
export const RootLayout = () => {
  return (
    <>
      <Header renderAccountBar={() => <AccountBar />} />
      <div className={styles.container}>
        <Outlet />
      </div>
    </>
  )
}

import { useQuery } from "@tanstack/react-query"
import { client } from "../../../shared/api/client.ts"
 
export const useMeQuery = () => {
  const query = useQuery({
    queryKey: ["auth", "me"],
    queryFn: async () => {
      const clientResponse = await client.GET("/auth/me")
      return clientResponse.data
    },
    retry: false,
  })
 
  return query
}

import { Link } from "@tanstack/react-router"
import styles from "./account-bar.module.css"
import { useMeQuery } from "../api/use-me-query.ts"
 
export const CurrentUser = () => {
  const query = useMeQuery()
 
  if (!query.data) return <span>...</span>
 
  return (
    <div className={styles.meInfoContainer}>
      <Link to="/my-playlists" activeOptions={{ exact: true }}>
        {query.data!.login}
      </Link>
    </div>
  )
}

import { LoginButton } from "./login-button.tsx"
import { useMeQuery } from "../api/use-me-query.ts"
 
export const AccountBar = () => {
  const query = useMeQuery()
 
  if (query.isPending) return <></>
 
  return (
    <div>
      {!query.data && <LoginButton />}
      {query.data && <CurrentUser />}
    </div>
  )
}

export const LoginButton = () => {
 
 const callbackUrl = 'http://localhost:5173/oauth/callback';
 
 const queryClient = useQueryClient();
 
 const mutation = useMutation({
   mutationFn: async ({code}: {code: string}) => {
     const response = await client.POST('/auth/login', {
       body: {
         code: code,
         redirectURI: callbackUrl,
         rememberMe: true,
         accessTokenTTL: '1d'
       }
     })
 
     if (response.error) {
       throw new Error(response.error.message)
     }
 
     return response.data;
   },
   onSuccess: (data: {refreshToken: string; accessToken: stri...}) => {
     localStorage.setItem('musicfun-refresh-token', data.refreshToken)
     localStorage.setItem('musicfun-access-token', data.accessToken)
     queryClient.invalidateQueries({
       queryKey: ['auth', 'me']
     })
   }
 })
}

export const callbackUrl = 'http://localhost:5173/oauth/callback';
 
export const useLoginMutation = () => {
 const queryClient = useQueryClient();
 
 const mutation = useMutation({
   mutationFn: async ({code}: {code: string}) => {
     const response = await client.POST('/auth/login', {
       body: {
         code: code,
         redirectURI: callbackUrl,
         rememberMe: true,
         accessTokenTTL: '1d'
       }
     })
 
     if (response.error) {
       throw new Error(response.error.message)
     }
 
     return response.data;
   },
   onSuccess: (data: {refreshToken: string; accessToken: stri...}) => {
     localStorage.setItem('musicfun-refresh-token', data.refreshToken)
     localStorage.setItem('musicfun-access-token', data.accessToken)
     queryClient.invalidateQueries({
       queryKey: ['auth', 'me']
     })
   }
 })
 
 return mutation
}

import { callbackUrl, useLoginMutation } from "../api/use-login-mutation.tsx"
 
export const LoginButton = () => {
  const mutation = useLoginMutation()
 
  const handleLoginClick = () => {
    window.addEventListener("message", handleOauthMessage)
    window.open(
      `https://musicfun.it-incubator.app/api/1.0/auth/oauth-redirect?callbackUrl=${callbackUrl}`,
      "apihub-oauth2",
      "w",
    )
  }
 
  const handleOauthMessage = (event: MessageEvent) => {
    window.removeEventListener("message", handleOauthMessage)
    if (event.origin !== document.location.origin) {
      console.warn("origin not match")
      return
    }
 
    const code = event.data.code
    if (!code) {
      console.warn("no code in message")
      return
    }
 
    mutation.mutate({ code })
  }
 
  return <button onClick={handleLoginClick}>Login with APIHUB</button>
}

export const useLogoutMutation = () => {
  const queryClient = useQueryClient()
 
  const mutation = useMutation({
    mutationFn: async () => {
      const response = await client.POST("/auth/logout", {
        body: {
          refreshToken: localStorage.getItem("musicfun-refresh-token")!,
        },
      })
      return response.data
    },
    onSuccess: () => {
      localStorage.removeItem("musicfun-refresh-token")
      localStorage.removeItem("musicfun-access-token")
      queryClient.resetQueries({
        queryKey: ["auth", "me"],
      })
    },
  })
 
  return mutation
}

import { useLogoutMutation } from "../api/use-logout-mutation.tsx"
 
export const LogoutButton = () => {
  const mutation = useLogoutMutation()
 
  const handleLogoutClick = () => {
    mutation.mutate()
  }
 
  return <button onClick={handleLogoutClick}>Logout</button>
}

export const CurrentUser = () => {
  const query = useMeQuery()
 
  if (!query.data) return <span>...</span>
 
  return (
    <div className={styles.meInfoContainer}>
      <Link to="/my-playlists" activeOptions={{ exact: true }}>
        {query.data!.login} <LogoutButton />
      </Link>
    </div>
  )
}

// mutex
export const baseUrl = "https://musicfun.it-incubator.app/api/1.0/"
export const apiKey = "72c3121c-c679-4c0e-9131-2d3f35e6a3bd"
 
// mutex
let refreshPromise: Promise<void> | null = null
 
function makeRefreshToken() {
  if (!refreshPromise) {
    refreshPromise = (async (): Promise<void> => {
      const refreshToken = localStorage.getItem("musicfun-refresh-token")
      if (!refreshToken) throw new Error("No refresh token")
 
      const response = await fetch(baseUrl + "auth/refresh", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "API-KEY": apiKey,
        },
        body: JSON.stringify({
          refreshToken: refreshToken,
        }),
      })
    })()
 
    refreshPromise.finally(() => {
      refreshPromise = null
    })
  }
 
  return refreshPromise
}
 
const authMiddleware: Middleware = {
  onRequest({ request }: MiddlewareCallbackParams) {
    // set "foo" header
    const accessToken = localStorage.getItem("musicfun-access-token")
    if (accessToken) {
      request.headers.set("Authorization", "Bearer " + accessToken)
    }
 
    // @ts-expect-error hot fix
    request._retryRequest = request.clone()
 
    return request
  },
 
  async onResponse({ request, response }) {
    if (response.ok) return response
    if (!response.ok && response.status !== 401) {
      throw new Error(`${response.url}: ${response.status} ${response.statusText}`)
    }
 
    try {
      await makeRefreshToken()
      // @ts-expect-error ignore it
      const originalRequest: Request = request._retryRequest
      const retryRequest = new Request(originalRequest, {
        headers: new Headers(originalRequest.headers),
      })
      retryRequest.headers.set(
        "Authorization",
        "Bearer " + localStorage.getItem("musicfun-access-token"),
      )
      return fetch(retryRequest)
    } catch {
      return response
    }
  },
}

import { Link } from "@tanstack/react-router"
import styles from "./header.module.css"
import type { ReactNode } from "react"
 
type Props = {
  renderAccountBar: () => ReactNode
}
 
export const Header = ({ renderAccountBar }: Props) => {
  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <div className={styles.linksBlock}>
          <Link to="/">Playlists</Link>
        </div>
 
        <div>{renderAccountBar()}</div>
      </div>
    </header>
  )
}

import { Playlists } from "../features/playlists.tsx"
import { useMeQuery } from "../features/auth/api/use-me-query.ts"
import { Navigate } from "@tanstack/react-router"
 
export function MyPlaylistsPage() {
  const { data, isPending } = useMeQuery()
 
  if (isPending) return <div>Loading...</div>
 
  if (!data) {
    return <Navigate to="/" replace />
  }
 
  return (
    <div>
      <h2>My Playlists</h2>
      <Playlists userId={data.userId} />
    </div>
  )
}

type Props = {
  userId?: string
}
 
export const Playlists = () => {
  const [page, setPage] = useState(1)
  const [search, setSearch] = useState("")
 
  const query = useQuery({
    queryKey: ["playlists", { page, search }],
    queryFn: async ({ signal }) => {
      const response = await client.GET("/playlists", {
        params: {
          query: {
            pageNumber: page,
            search,
            userId,
          },
        },
        signal,
      })
      if (response.error) {
        throw (response as unknown as { error: Error }).error
      }
      return response.data
    },
    placeholderData: keepPreviousData,
  })
    ...
}

export function MyPlaylistsPage() {
  ...
 
  return (
    <div>
      <h2>My Playlists</h2>
      <hr />
      <AddPlaylistForm />
      <hr />
      <Playlists userId={data.userId} />
    </div>
  )
}