はじめに
前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day8. スプレッドシートとの連携」と題して、資料請求フォームのデータをスプレッドシートに保存する機能を実装しました。
今回は、フォーム送信後に表示される完了画面を作成して、資料請求フォームの完成を目指します。
完了画面の実装
今回の完了画面は資料請求フォームのCatalogPage.tsxと同じ、components/pages/catalogディレクトリ内にComplete.tsxとして実装していきます。
完了画面コンポーネントの作成
完了画面は画面下に「閉じる」ボタンを配置したいと思います。
クリックすると LIFF の画面を閉じるようにしたいため、LIFF SDK のcloseWindow()を使用しています。
import liff from "@line/liff";
export default function Complete() {
return (
<div className="flex flex-col justify-center items-center min-h-screen text-center">
<h1 className="text-3xl font-medium p-12">
カタログをご請求いただき
<br />
ありがとうございます！
</h1>
<p>カタログのご到着までしばしお待ち下さい。</p>
<p>なにかご不明点があれば、お気軽にお問い合わせください！</p>
<div className="py-12">
<a className="underline" onClick={() => liff.closeWindow()}>
閉じる
</a>
</div>
</div>
);
}
ページの分岐
完了画面への切り替えはuseStateを使いました。
import { useState } from "react";
import CatalogPage from "@/components/pages/catalog/CatalogPage";
import Complete from "@/components/pages/catalog/Complete";
export default function Catalog() {
const [isComplete, setIsComplete] = useState(false);
if (isComplete) return <Complete />;
else return <CatalogPage setIsComplete={setIsComplete} />;
}
CatalogPageコンポーネントにsetIsCompleteを渡していますが、この時点では props の型にsetIsCompleteは渡されていないのでこの後修正を行っていきます。
CatalogPage コンポーネントの修正
はじめにsetIsCompleteを受け取るための型を定義します。
export default function CatalogPage({
setIsComplete,
}: {
setIsComplete: (isComplete: boolean) => void;
})
ページの切り替えはフォームの送信処理が完了した段階で行いたいため、setIsCompleteはtriggerのonSuccessで呼び出しています。
const onSubmit: SubmitHandler<CatalogPageProps> = (data) => {
console.log(data);
trigger(data, {
onSuccess: () => {
setIsComplete(true);
},
});
};
完了画面の動作確認
では実際に完了画面への切り替えができるか確認してみましょう。
フォームに入力を行い「送信する」ボタンをクリックすると完了画面が表示されました！
なお、「閉じる」ボタンはあくまで LIFF の画面を閉じるためのものなので、ブラウザ側では確認ができません。
後ほどデプロイをして確認を行っていきたいと思います。
ボタンのローディング
「送信する」ボタンを押した際にローディングがないことが気になるので、ボタンにローディングをつけていきたいと思います。
ボタンコンポーネントの追記
ローディングを表示するためにButtonコンポーネントを以下の通り修正していきます。
import { Button as MUIButton } from "@mui/material";
import LoadingButton from "@mui/lab/LoadingButton";
import { ButtonProps } from "./type";
export default function Button({
label,
type,
bgColor = "bg-primary",
textColor = "text-white",
isLoading = false,
...props
}: ButtonProps) {
if (!isLoading)
return (
<div>
<MUIButton
type={type}
className={`${bgColor} ${textColor} w-full py-4`}
{...props}
>
{label}
</MUIButton>
</div>
);
else
return (
<LoadingButton className={`bg-neutral-500 w-full py-4`} loading>
{label}
</LoadingButton>
);
}
propsにisLoadingを追加して、その値に応じて使うコンポーネントを変えています。
CatalogPage コンポーネントの修正
ローディング中かを確認するためにuseSWRMutationからisMutatingを取得します。
const { trigger, isMutating } = useSWRMutation("/api/catalog", updateUser);
ButtonコンポーネントのisLoadingにisMutatingを指定します。
<Button type="submit" label="送信する" isLoading={isMutating} />
これでローディングの追加は完了です。
ローディングの動作確認
再度フォームを送信してみるとボタンがローディング表示に変わるのが確認できると思います。
デプロイ
ここまでで資料請求フォームの実装が大体完了したので、一旦デプロイを行って動作確認の確認を行っていきたいと思います。
line-liff-v2-starter ディレクトリ配下で以下のコマンドを実行します。
$ netlify deploy --build --prod
動作確認
デプロイが完了したら動作確認を行っていきます。
LIFF アプリの URL を開いてたら資料請求フォームが出てくるので内容を入力して送信ボタンを押してみます。
ちゃんとローディングが表示されていますね！
ローディングが終わると、完了画面も表示されました！
もちろん「閉じる」ボタンを押すと LIFF の画面が閉じるのも確認ができました。
スプレッドシートの出力はどうなっているのでしょうか？
ちゃんと入ってる！これで完成ですね！
まとめ
今回はフォーム送信後の完了画面を実装してきました。
次回はせっかくなので資料請求が完了したタイミングで完了メッセージが届くよう実装していきたいと思います。
残りは 15 日！
気になる方は是非フォローやカレンダー購読をお願いします