# ログイン機能の作成2 次にログイン成功した際に返却された`id`と`name`を管理するのですが、通常のstateの場合ページが切り替わった際にstateを保持することができません。ページ遷移でもstateを保持する場合は、**global state**として管理します。 ※動画では、recoilを使用していますが、recoilの開発が終了したため、useContextでの実装を紹介します。まず、ログインした際の保持する情報の型を`src/types/login.ts`に定義します。

export type LoginInfoType = {
  email: string;
  password: string;
};

export type LoginReturnType = {
  id: number;
  name: string;
};

export type LoginUserType = {
  id: number;
  name: string;
};

次に`src/components`配下に`providers`ディレクトリを作成し、`LoginUserProvider.tsx`を作成します。そして、以下の内容を記述します。

import { createContext, ReactNode, useState } from "react";
import { LoginUserType } from "../types/login";

export type LoginUserContextType = {
  loginUser: LoginUserType;
  setLoginUser: (user: LoginUserType) => void;
};

export const LoginUserContext = createContext<LoginUserContextType | undefined>(
  undefined
);

export const LoginUserProvider = ({ children }: { children: ReactNode }) => {
  const [loginUser, setLoginUser] = useState<LoginUserType>({
    id: 0,
    name: "",
  });

  return (
    <LoginUserContext.Provider value={{ loginUser, setLoginUser }}>
      {children}
    </LoginUserContext.Provider>
  );
};

このファイルでは、`createContext`という関数を使用して、**コンテキスト**を作成します。**コンテキスト**とは、コンポーネントツリーの中でデータを直接渡すことなく、様々な階層のコンポーネント間でデータを共有できる機能です。今回の場合`LoginUserContext`というコンテキストを作成しています。そして、`LoginUserProvider`というコンポーネントを作成していますが、その中で`LoginUserContext.Provider`に`value`というpropsとして共有したいデータを渡すことで、`LoginUserProvider`にchildrenとして渡したcomponentにて、そのデータを取り扱うことができます。今回の場合は、`loginUser`と`setLoginUser`を共有するようにしています。これらのデータを、プロジェクト全体で使用するために、`LoginUserProvider`で大元のコンポーネントを括る必要があります。

import React from "react";
import ReactDOM from "react-dom/client";
import "./styles/index.css";
import "./styles/destyle.css";
import "./styles/output.css";
import { RouterProvider } from "react-router-dom";
import { router } from "./routes";
import { LoginUserProvider } from "./providers/LoginUserProvider";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LoginUserProvider>
      <RouterProvider router={router} />
    </LoginUserProvider>
  </React.StrictMode>
);

また、このコンテキストを呼び出すためのファイルを作成します。 `src`配下に`hooks`ディレクトリを作成し、`useLoginUser.ts`を作成しましょう。その中に、以下のように記述します。

import { useContext } from "react";
import { LoginUserContext } from "../providers/LoginUserProvider";

export const useLoginUser = () => {
  const context = useContext(LoginUserContext);
  if (context === undefined) {
    throw new Error("useLoginUser must be used within a LoginUserProvider");
  }
  return context;
};

上記ファイルでは、`useContext`という関数を使用して、作成したコンテキストからデータを取得することができます。こちら、`createContext`で作成したコンテキストは、`undefined`となる可能性があるので、`undefined`の場合のエラーハンドリングを行っています。そして、このデータを取得する場合は、以下のように呼び出して使用します。 ``` const { loginUser, setLoginUser } = useLoginUser(); ``` ではログインした際に、setStateにてユーザー情報を保存するようにしましょう。

import { ChangeEvent, FormEvent, useState } from "react";
import { useSetRecoilState } from "recoil";
import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";
import { LoginInfoType } from "../../types/login";
import { login } from "../../api/login";
import { useLoginUser } from "../../hooks/useLoginUser";

export const LoginPage = () => {
  const { setLoginUser } = useLoginUser();
  const [loginInfo, setLoginInfo] = useState<LoginInfoType>({
    email: "",
    password: "",
  })
  const [errorMessage, setErrorMessage] = useState("");

  const changeLoginInfo = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target
    setLoginInfo({ ...loginInfo, [name]: value })
  }

  const handleLogin = (event: FormEvent<HTMLFormElement>) => {
    setErrorMessage("")
    event.preventDefault()
    try {
      const resUser = login(loginInfo)
      setLoginUser({ id: resUser.id, name: resUser.name })
    } catch {
      setErrorMessage("ログインに失敗しました");
    }
  };
...

次にログインしたらカレンダーページに遷移するようにしましょう。 `pages`配下に`CalendarPage.tsx`を作成しましょう。その中で`loginUser`を表示してみましょう。

import { useLoginUser } from "../../hooks/useLoginUser";

export const CalendarPage = () => {
  const { loginUser } = useLoginUser();

  return (
    <div>
      <p>{loginUser.id}</p>
      <p>{loginUser.name}</p>
    </div>
  );
};

`routes.ts`の方にてCalendarPageのパスを設定しましょう。

import { createBrowserRouter } from "react-router-dom";
import { TopPage } from "./components/pages/TopPage";
import { LoginPage } from "./components/pages/LoginPage";
import { NotLoginLayout } from "./components/templates/NotLoginLayouts";
import { CalendarPage } from "./components/pages/CalendarPage";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <NotLoginLayout />,
    children: [
      { index: true, element: <TopPage /> },
      { path: "/login", element: <LoginPage /> },
      { path: "/calendar", element: <CalendarPage />}
    ],
  },
]);

そして、ログイン成功時に/calendarに遷移するようにしましょう。

import { ChangeEvent, FormEvent, useState } from "react";
import { useSetRecoilState } from "recoil";
import { useNavigate } from "react-router-dom";
import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";
import { LoginInfoType } from "../../types/login";
import { login } from "../../api/login";
import { useLoginUser } from "../../hooks/useLoginUser";

export const LoginPage = () => {
  const navigate = useNavigate()
const { setLoginUser } = useLoginUser();
  const [loginInfo, setLoginInfo] = useState<LoginInfoType>({
    email: "",
    password: "",
  })
  const [errorMessage, setErrorMessage] = useState("");

  const changeLoginInfo = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target
    setLoginInfo({ ...loginInfo, [name]: value })
  }

  const handleLogin = (event: FormEvent<HTMLFormElement>) => {
    setErrorMessage("")
    event.preventDefault()
    try {
      const resUser = login(loginInfo)
      setLoginUser({ id: resUser.id, name: resUser.name })
      navigate("/calendar")
    } catch {
      setErrorMessage("ログインに失敗しました");
    }
  };
...

これでログイン成功時に`/calendar`に遷移し、`loginUser`をglobal stateとして管理しているので、`loginUser`が表示されているかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: recoilを導入し、ログインユーザーをglobal stateにて管理するようにした ``` としましょう。ではログインページの作成が完了したので、GitHubにpushしましょう。 ```basic git push origin feature/login-func ``` これでGitHubのリポジトリのページにいき、main <- feature/login-funcのPRを作成しましょう。 PRのタイトルは ``` feat: ログイン機能を作成 ``` としましょう。作成したら自身で`Merge pull request`を押してmergeしましょう。 mergeが完了したらWarpに戻り、mainをpullしましょう。 ```bash git switch main ``` ```bash git pull origin main ``` ※recoilの記述は以下に残しておきます。useContextで実装した場合は、以下を実装しなくて大丈夫です。 ~~`recoil`をインストールしましょう。~~ ```bash npm i recoil ``` ~~recoilをプロジェクト全体で使用するために、`RecoilRoot`で大元のコンポーネントを括る必要があります。~~

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RecoilRoot } from "recoil";
import { RouterProvider } from "react-router-dom";
import './styles/index.css'
import "./styles/output.css"
import "./styles/destyle.css";
import { router } from './routes';

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RecoilRoot>
      <RouterProvider router={router} />
    </RecoilRoot>
  </React.StrictMode>
);

~~次にglobal stateを定義するのですが、`src`配下に`store`ディレクトリを作成し、その中に`loginUserState.ts`を作成します。そして以下のように記述することで、`{ id: 0, name: "" }`のstateを定義することができます。~~ {% code title="atoms/loginUserState.ts◎" %} ```typescript import { atom } from "recoil"; type LoginUserType = { id: number; name: string; }; export const loginUserState = atom({ key: "loginUser", default: { id: 0, name: "", }, }); ``` {% endcode %} ~~このstateを使用する場合は、3通りの方法があり、まずstateのみを使用する場合は、`useRecoilValue`を呼び出し、setStateを使用する場合は、`useSetRecoilState`を呼び出し、state,setStateの両方を使用する場合は、`useRecoilState`を呼び出します。そして、引数に先ほど定義したstate(loginUserState)を渡します。~~ ```tsx // stateのみ const loginUser = useRecoilValue(loginUserState) // setStateのみ const setLoginUser = useSetRecoilState(loginUserState) // state、setStateの両方 const [loginUser, setLoginUser] = useRecoilState(loginUserState) ``` ~~ではログインした際に、setStateにてユーザー情報を保存するようにしましょう。~~

import { ChangeEvent, FormEvent, useState } from "react";
import { useSetRecoilState } from "recoil";
import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";
import { LoginInfoType } from "../../types/login";
import { login } from "../../api/login";
import { loginUserState } from "../../store/loginUserState";

export const LoginPage = () => {
  const setLoginUser = useSetRecoilState(loginUserState)
  const [loginInfo, setLoginInfo] = useState<LoginInfoType>({
    email: "",
    password: "",
  })
  const [errorMessage, setErrorMessage] = useState("");

  const changeLoginInfo = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target
    setLoginInfo({ ...loginInfo, [name]: value })
  }

  const handleLogin = (event: FormEvent<HTMLFormElement>) => {
    setErrorMessage("")
    event.preventDefault()
    try {
      const resUser = login(loginInfo)
      setLoginUser({ id: resUser.id, name: resUser.name })
    } catch {
      setErrorMessage("ログインに失敗しました");
    }
  };
...

~~次にログインしたらカレンダーページに遷移するようにしましょう。~~ ~~`pages`配下に`CalendarPage.tsx`を作成しましょう。~~ ~~その中で`loginUser`を表示してみましょう。~~

import { useRecoilValue } from "recoil"
import { loginUserState } from "../../store/loginUserState"

export const CalendarPage = () => {
  const loginUser = useRecoilValue(loginUserState)
  return (
    <div>
      <p>{loginUser.id}</p>
      <p>{loginUser.name}</p>
    </div>
  );
}

~~`routes.ts`の方にてCalendarPageのパスを設定しましょう。~~

import { createBrowserRouter } from "react-router-dom";
import { TopPage } from "./components/pages/TopPage";
import { LoginPage } from "./components/pages/LoginPage";
import { NotLoginLayout } from "./components/templates/NotLoginLayouts";
import { CalendarPage } from "./components/pages/CalendarPage";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <NotLoginLayout />,
    children: [
      { index: true, element: <TopPage /> },
      { path: "/login", element: <LoginPage /> },
      { path: "/calendar", element: <CalendarPage />}
    ],
  },
]);

~~そして、ログイン成功時に/calendarに遷移するようにしましょう。~~

import { ChangeEvent, FormEvent, useState } from "react";
import { useSetRecoilState } from "recoil";
import { useNavigate } from "react-router-dom";
import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";
import { LoginInfoType } from "../../types/login";
import { login } from "../../api/login";
import { loginUserState } from "../../store/loginUserState";

export const LoginPage = () => {
  const navigate = useNavigate()
  const setLoginUser = useSetRecoilState(loginUserState)
  const [loginInfo, setLoginInfo] = useState<LoginInfoType>({
    email: "",
    password: "",
  })
  const [errorMessage, setErrorMessage] = useState("");

  const changeLoginInfo = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target
    setLoginInfo({ ...loginInfo, [name]: value })
  }

  const handleLogin = (event: FormEvent<HTMLFormElement>) => {
    setErrorMessage("")
    event.preventDefault()
    try {
      const resUser = login(loginInfo)
      setLoginUser({ id: resUser.id, name: resUser.name })
      navigate("/calendar")
    } catch {
      setErrorMessage("ログインに失敗しました");
    }
  };
...

~~これでログイン成功時に`/calendar`に遷移し、`loginUser`をglobal stateとして管理しているので、`loginUser`が表示されているかと思います。~~