From 5dc0b65a8fb96e84cf5ff6c3aa792767d07da0bf Mon Sep 17 00:00:00 2001
From: k-taro56 <121674121+k-taro56@users.noreply.github.com>
Date: Sat, 6 Jul 2024 13:00:16 +0900
Subject: [PATCH] feat: Add Buddy component to display user's buddy

---
 src/components/account-setting.tsx |  9 ++++++++-
 src/components/buddy.tsx           | 12 ++++++++++++
 src/pages/index.page.tsx           | 15 +++++----------
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/account-setting.tsx b/src/components/account-setting.tsx
index 1ef0b85..20a9784 100644
--- a/src/components/account-setting.tsx
+++ b/src/components/account-setting.tsx
@@ -1,6 +1,12 @@
 import { useState } from "react";
 
-const AccountSetting = ({ accessToken }: { accessToken: string }) => {
+const AccountSetting = ({
+  accessToken,
+  setAccessToken,
+}: {
+  accessToken: string;
+  setAccessToken: (token: string) => void;
+}) => {
   const [githubUser, setGithubUser] = useState<{ login: string; avatar_url: string } | null>(null);
 
   const fetchGithubUser = async (token: string) => {
@@ -20,6 +26,7 @@ const AccountSetting = ({ accessToken }: { accessToken: string }) => {
 
   const handleRemoveToken = () => {
     chrome.storage.local.remove(["accessToken"]);
+    setAccessToken("");
   };
 
   return (
diff --git a/src/components/buddy.tsx b/src/components/buddy.tsx
index e69de29..dbcc575 100644
--- a/src/components/buddy.tsx
+++ b/src/components/buddy.tsx
@@ -0,0 +1,12 @@
+const Buddy = () => {
+  return (
+    <div className="pb-4 border-b border-gray-300 w-60 h-72">
+      <h1 className="text-xl font-bold whitespace-nowrap mb-2 border-b border-gray-300">
+        Your buddy
+      </h1>
+      <img src="./images/buddy/gif0047.gif" alt="buddy" className="w-60 h-60" />
+    </div>
+  );
+};
+
+export default Buddy;
diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
index 945af31..e4df502 100644
--- a/src/pages/index.page.tsx
+++ b/src/pages/index.page.tsx
@@ -4,6 +4,8 @@ import type { CustomNextPage } from "next";
 import { Layout } from "src/layout";
 import Navigation from "src/components/navigation";
 import LoginWithGithub from "src/components/login-with-github";
+import Buddy from "src/components/buddy";
+import DurationSetting from "src/components/duration-setting";
 import AccountSetting from "src/components/account-setting";
 
 const requestDeviceCode = async () => {
@@ -164,18 +166,11 @@ const IndexPage: CustomNextPage = () => {
   const renderContent = () => {
     switch (currentView) {
       case "buddy":
-        return (
-          <div className="pb-4 border-b border-gray-300 w-60 h-72">
-            <h1 className="text-xl font-bold whitespace-nowrap mb-2 border-b border-gray-300">
-              Your buddy
-            </h1>
-            <img src="./images/buddy/gif0047.gif" alt="buddy" className="w-60 h-60" />
-          </div>
-        );
+        return <Buddy />;
       case "duration-setting":
-        return <div>Duration Setting Component</div>;
+        return <DurationSetting />;
       case "account-setting":
-        return <AccountSetting accessToken={accessToken} />;
+        return <AccountSetting accessToken={accessToken} setAccessToken={setAccessToken} />;
       default:
         return null;
     }