Add SpotifyMusicSelect Component

[igsr5]

close https://github.com/youngeek-0410/hacku-kosen-2022-frontend/issues/4

作ったもの → https://github.com/youngeek-0410/hacku-kosen-2022-frontend/pull/5#issuecomment-1345551810

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
hacku-kosen-2022-frontend	✅ Ready (Inspect)	Visit Preview	Dec 11, 2022 at 1:07PM (UTC)

[igsr5]

いい感じのやつ作った

プロジェクト詳細画面に載せるやつ	音楽選択コンポーネント

https://user-images.githubusercontent.com/66525257/206905781-b4bea4c5-6271-46f7-83f9-1b84060327db.mov

楽曲検索コンポーネントの使い方

1. サーバ側で SpotifyApi の AccessToken を取得(expireed_in: 3600)し、props としてクライアントサイドへ流す

import { authenticate as authenticateSpotifyApi } from "../common/spotifyMusic/utils/authenticate";

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const spotifyApiAccessToken = await authenticateSpotifyApi();
  return {
    props: {
      spotifyApiAccessToken,
    },
  };
};

2. <SpotifyMusicSearch /> を配置する

⚠️ SpotifyApiAccessTokenProvider より中で呼び出す必要あり。

import { SpotifyApiAccessTokenProvider } from "../common/spotifyMusic/contexts/SpotifyApiAuthProvider";
import { SpotifyMusicSearch } from "../common/spotifyMusic/components/SpotifyMusicSearch";

const Page: NextPage<Props> = (props) => {
  return (
    <SpotifyApiAccessTokenProvider accessToken={props.spotifyApiAccessToken}>
      <SpotifyMusicSearch />
    </SpotifyApiAccessTokenProvider>
  );
};

このコンポーネントを配置すると上のビデオのようなコンポーネントが表示される。

楽曲表示コンポーネント（プロジェクト編集画面に載せるやつ）

1. 表示したい箇所に以下のような形式で <SpotifyMusicSelect /> を配置する

// Project詳細画面

const ProjectShowPage: React.FC = () => {
  const [projectSpotifyMusic, setProjectSpotifyMusic] = useState<SpotifyMusic | null>(null)

  useEffect(() => {
    // バックエンドからSpotifyMusicを取得し、projectSpotifyMusic にセットする
  }, [setProjectSpotifyMusic])

  return (
    <>
      ...
      <SpotifyMusicSelect spotifyMusic={projectSpotifyMusic} onChange={setProjectSpotifyMusic} />
      ...
    </>
  )
}